chore: typing indicator aligned with toolbar

web/app/_components/ChatBody/index.tsx

@@ -4,10 +4,8 @@ import React, { useCallback, useRef, useState, useEffect } from "react";
 import ChatItem from "../ChatItem";
 import { ChatMessage } from "@/_models/ChatMessage";
 import useChatMessages from "@/_hooks/useChatMessages";
-import { showingTyping } from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
 import { selectAtom } from "jotai/utils";
-import LoadingIndicator from "../LoadingIndicator";
 import { getActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
 import { chatMessages } from "@/_helpers/atoms/ChatMessage.atom";
 
@@ -21,7 +19,6 @@ const ChatBody: React.FC = () => {
   );
   const [content, setContent] = useState<React.JSX.Element[]>([]);
 
-  const isTyping = useAtomValue(showingTyping);
   const [offset, setOffset] = useState(0);
   const { loading, hasMore } = useChatMessages(offset);
   const intersectObs = useRef<any>(null);
@@ -58,11 +55,6 @@ const ChatBody: React.FC = () => {
 
   return (
     <div className="flex flex-col-reverse flex-1 py-4 overflow-y-auto scroll">
-      {isTyping && (
-        <div className="ml-4 mb-2" key="indicator">
-          <LoadingIndicator />
-        </div>
-      )}
       {content}
     </div>
   );

web/app/_components/InputToolbar/index.tsx

@@ -9,11 +9,14 @@ import { Fragment } from "react";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import useCreateConversation from "@/_hooks/useCreateConversation";
 import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
+import { showingTyping } from "@/_helpers/JotaiWrapper";
+import LoadingIndicator from "../LoadingIndicator";
 
 const InputToolbar: React.FC = () => {
   const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom);
   const currentProduct = useAtomValue(currentProductAtom);
   const { requestCreateConvo } = useCreateConversation();
+  const isTyping = useAtomValue(showingTyping);
 
   if (showingAdvancedPrompt) {
     return <div />;
@@ -30,7 +33,15 @@ const InputToolbar: React.FC = () => {
 
   return (
     <Fragment>
-      <div className="flex justify-end gap-2 mr-3 my-2">
+      <div className="flex justify-between gap-2 mr-3 my-2">
+        <div className="h-6">
+          {isTyping && (
+            <div className="my-2" key="indicator">
+              <LoadingIndicator />
+            </div>
+          )}{" "}
+        </div>
+
         {/* <SecondaryButton title="Regenerate" onClick={onRegenerateClick} /> */}
         <SecondaryButton
           onClick={onNewConversationClick}

web/app/_components/LoadingIndicator.tsx

@@ -1,12 +1,6 @@
 const LoadingIndicator = () => {
-  let circleCommonClasses = "h-1.5 w-1.5 bg-current rounded-full";
 
   return (
-    // <div className="flex">
-    //   <div className={`${circleCommonClasses} mr-1 animate-bounce`}></div>
-    //   <div className={`${circleCommonClasses} mr-1 animate-bounce200`}></div>
-    //   <div className={`${circleCommonClasses} animate-bounce400`}></div>
-    // </div>
     <div className="typingIndicatorContainer">
       <div className="typingIndicatorBubble">
         <div className="typingIndicatorBubbleDot"></div>

web/app/globals.css

@@ -386,7 +386,7 @@ body {
   align-items: center;
   justify-content: center;
   width: 52px;
-  height: 34px;
+  height: 28px;
   margin: 0px 8px;
   background-color: #f0f1f1;
   border-radius: 12px;