Enhance ChatBubble and ChatBOX components to display loading messages; improve structure and formatting for better readability

src/components/ui/chat/chat-bubble.tsx

@@ -23,7 +23,7 @@ const chatBubbleVariant = cva(
       variant: "received",
       layout: "default",
     },
-  },
+  }
 );
 
 interface ChatBubbleProps
@@ -35,7 +35,7 @@ const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
     <div
       className={cn(
         chatBubbleVariant({ variant, layout, className }),
-        "relative group",
+        "relative group"
       )}
       ref={ref}
       {...props}
@@ -46,10 +46,10 @@ const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
               variant,
               layout,
             } as React.ComponentProps<typeof child.type>)
-          : child,
+          : child
       )}
     </div>
-  ),
+  )
 );
 ChatBubble.displayName = "ChatBubble";
 
@@ -102,25 +102,28 @@ const ChatBubbleMessage = React.forwardRef<
 >(
   (
     { className, variant, layout, isLoading = false, children, ...props },
-    ref,
+    ref
   ) => (
     <div
       className={cn(
         chatBubbleMessageVariants({ variant, layout, className }),
-        "break-words max-w-full whitespace-pre-wrap",
+        "break-words max-w-full whitespace-pre-wrap"
       )}
       ref={ref}
       {...props}
     >
       {isLoading ? (
+        <>
+          {children}
           <div className="flex items-center space-x-2">
             <MessageLoading />
           </div>
+        </>
       ) : (
         children
       )}
     </div>
-  ),
+  )
 );
 ChatBubbleMessage.displayName = "ChatBubbleMessage";
 
@@ -181,7 +184,7 @@ const ChatBubbleActionWrapper = React.forwardRef<
       variant === "sent"
         ? "-left-1 -translate-x-full flex-row-reverse"
         : "-right-1 translate-x-full",
-      className,
+      className
     )}
     {...props}
   >

src/pages/Chatbox.tsx

@@ -680,7 +680,9 @@ export default function ChatBOX(props: {
           ))}
           {showGenerating && (
             <ChatBubble variant="received">
-              <ChatBubbleMessage isLoading />
+              <ChatBubbleMessage isLoading>
+                {generatingMessage}
+              </ChatBubbleMessage>
             </ChatBubble>
           )}
           <p className="text-center">