Compare commits

..

2 commits

3 changed files with 5 additions and 8 deletions

View file

@ -11,15 +11,15 @@
<body> <body>
<div class="container bg-white rounded-lg shadow-md flex flex-col"> <div class="container bg-white rounded-lg shadow-md flex flex-col">
<h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII</h1> <h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII
<div class="typing-indicator" id="typingIndicator"></div>
</h1>
<div class="chat break-all" id="chatContainer"> <div class="chat break-all" id="chatContainer">
</div> </div>
<div class="flex-none flex"> <div class="flex-none flex">
<textarea type="text" id="userInput" placeholder="Type message here" class="outline-none flex-auto"></textarea> <textarea type="text" id="userInput" placeholder="Type message here" class="outline-none flex-auto"></textarea>
<button class="send-button flex-none" id="sendButton" >Send</button> <button class="send-button flex-none" id="sendButton" >Send</button>
</div> </div>
<div class="typing-indicator" id="typingIndicator">
</div>
</div> </div>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>

View file

@ -95,7 +95,7 @@ let typingTimeout;
function showTypingIndicator() { function showTypingIndicator() {
clearTimeout(typingTimeout); clearTimeout(typingTimeout);
typingIndicator.style.display = "inline-block"; typingIndicator.style.display = "inline-flex";
} }
function hideTypingIndicator() { function hideTypingIndicator() {

View file

@ -56,7 +56,7 @@ body {
.message-bubble { .message-bubble {
padding: 12px 18px; padding: 12px 18px;
max-width: 70%; max-width: 95%;
border-radius: 20px; border-radius: 20px;
line-height: 1.6; line-height: 1.6;
font-size: 0.95rem; font-size: 0.95rem;
@ -146,9 +146,6 @@ input[type="text"] {
.typing-indicator { .typing-indicator {
display: none; display: none;
align-items: center;
justify-content: flex-end;
margin-top: 8px;
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #333; background-color: #333;