Fix: UI improvements for typing indicator and input resizing

src/assets/index.css

@@ -82,42 +82,23 @@ pre {
   transition: opacity 400ms ease-in 200ms;
 }
 
-.bubble-typing {
-  transition:
-    width 400ms ease-out,
-    height 400ms ease-out;
-}
-
-.bubble1,
-.bubble2,
-.bubble3 {
-  background-color: var(--chatbot-host-bubble-color);
-  opacity: 0.5;
-}
-
-.bubble1 {
-  animation: chatBubbles 1s ease-in-out infinite;
-}
-
-.bubble2 {
-  animation: chatBubbles 1s ease-in-out infinite;
-  animation-delay: 0.3s;
-}
-
-.bubble3 {
-  animation: chatBubbles 1s ease-in-out infinite;
-  animation-delay: 0.5s;
-}
+  .typing-dot {
+    background-color: var(--chatbot-host-bubble-color);
+    opacity: 0.2;
+    animation: typingBlink 1.2s infinite ease-in-out;
+    animation-fill-mode: both;
+    will-change: opacity;
+  }
 
-@keyframes chatBubbles {
+@keyframes typingBlink {
   0% {
-    transform: translateY(0);
+    opacity: 0.2;
   }
   50% {
-    transform: translateY(-5px);
+    opacity: 1;
   }
   100% {
-    transform: translateY(0);
+    opacity: 0.2;
   }
 }
 
@@ -208,12 +189,6 @@ textarea {
   white-space: normal;
 }
 
-.chatbot-host-bubble > .bubble-typing {
-  background-color: #f7f8ff;
-  border: var(--chatbot-host-bubble-border);
-  border-radius: 6px;
-}
-
 .chatbot-host-bubble img,
 .chatbot-host-bubble iframe,
 .chatbot-host-bubble video {

src/components/Bot.tsx

@@ -478,6 +478,13 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   const [isMessageStopping, setIsMessageStopping] = createSignal(false);
   const [starterPrompts, setStarterPrompts] = createSignal<string[]>([], { equals: false });
   const [chatFeedbackStatus, setChatFeedbackStatus] = createSignal<boolean>(false);
+  const showTypingBubble = createMemo(() => {
+    if (!loading()) return false;
+    const msgs = messages();
+    const last = msgs[msgs.length - 1];
+    if (!last) return false;
+    return last.type === 'userMessage' || (last.type === 'apiMessage' && last.message === '');
+  });
   const [fullFileUpload, setFullFileUpload] = createSignal<boolean>(false);
   const [uploadsConfig, setUploadsConfig] = createSignal<UploadsConfig>();
   const [leadsConfig, setLeadsConfig] = createSignal<LeadsConfig>();
@@ -1876,12 +1883,13 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
                           setLeadEmail={setLeadEmail}
                         />
                       )}
-                      {message.type === 'userMessage' && loading() && index() === messages().length - 1 && <LoadingBubble />}
-                      {message.type === 'apiMessage' && message.message === '' && loading() && index() === messages().length - 1 && <LoadingBubble />}
                     </>
                   );
                 }}
               </For>
+              <div classList={{ hidden: !showTypingBubble() }}>
+                <LoadingBubble />
+              </div>
             </div>
             <Show when={messages().length === 1}>
               <Show when={starterPrompts().length > 0}>

src/components/TypingBubble.tsx

@@ -1,7 +1,7 @@
 export const TypingBubble = () => (
   <div class="flex items-center">
-    <div class="w-2 h-2 mr-1 rounded-full bubble1" />
-    <div class="w-2 h-2 mr-1 rounded-full bubble2" />
-    <div class="w-2 h-2 rounded-full bubble3" />
+    <div class="w-2 h-2 mr-1 rounded-full typing-dot" style={{ 'animation-delay': '0s' }} />
+    <div class="w-2 h-2 mr-1 rounded-full typing-dot" style={{ 'animation-delay': '0.2s' }} />
+    <div class="w-2 h-2 rounded-full typing-dot" style={{ 'animation-delay': '0.4s' }} />
   </div>
 );

src/components/inputs/textInput/components/ShortTextInput.tsx

@@ -21,7 +21,7 @@ export const ShortTextInput = (props: ShortTextInputProps) => {
         // reset height when value is empty
         setHeight(DEFAULT_HEIGHT);
       } else {
-        setHeight(e.currentTarget.scrollHeight - 24);
+        setHeight(Math.min(Math.max(e.currentTarget.scrollHeight, DEFAULT_HEIGHT), 128));
       }
       e.currentTarget.scrollTo(0, e.currentTarget.scrollHeight);
       local.onInput(e.currentTarget.value);