Enhance ChatBOX component with improved alert messages and layout; replace plain text with structured ChatBubble components for better user experience

src/pages/Chatbox.tsx

@@ -43,13 +43,28 @@ import AddToolMsg from "./AddToolMsg";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { ChatInput } from "@/components/ui/chat/chat-input";
+import {
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleMessage,
+  ChatBubbleAction,
+  ChatBubbleActionWrapper,
+} from "@/components/ui/chat/chat-bubble";
+
 import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import {
+  AlertTriangleIcon,
+  ArrowUpIcon,
   CornerDownLeftIcon,
+  CornerLeftUpIcon,
+  CornerUpLeftIcon,
   GlobeIcon,
   ImageIcon,
+  InfoIcon,
   KeyIcon,
   SearchIcon,
+  Settings2,
+  Settings2Icon,
 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -603,28 +618,58 @@ export default function ChatBOX(props: {
             </div>
           )}
           {chatStore.history.length === 0 && (
-            <p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
+            <Alert variant="default" className="my-3">
-              {Tr("No chat history here")}
+              <InfoIcon className="h-4 w-4" />
-              <br />⚙{Tr("Model")}: {chatStore.model}
+              <AlertTitle>{Tr("No chat history here")}</AlertTitle>
-              <br />⬆{Tr("Click above to change the settings of this chat")}
+              <AlertDescription className="flex flex-col gap-1 mt-5">
-              <br />↖{Tr("Click the conor to create a new chat")}
+                <div className="flex items-center gap-2">
-              <br />⚠
+                  <Settings2Icon className="h-4 w-4" />
-              {Tr(
+                  <span>
-                "All chat history and settings are stored in the local browser"
+                    {Tr("Model")}: {chatStore.model}
-              )}
+                  </span>
-              <br />
+                </div>
-            </p>
+                <div className="flex items-center gap-2">
+                  <ArrowUpIcon className="h-4 w-4" />
+                  <span>
+                    {Tr("Click above to change the settings of this chat")}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CornerLeftUpIcon className="h-4 w-4" />
+                  <span>{Tr("Click the corner to create a new chat")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <AlertTriangleIcon className="h-4 w-4" />
+                  <span>
+                    {Tr(
+                      "All chat history and settings are stored in the local browser"
+                    )}
+                  </span>
+                </div>
+              </AlertDescription>
+            </Alert>
           )}
           {chatStore.systemMessageContent.trim() && (
-            <div className="chat chat-start">
+            <ChatBubble variant="received">
-              <div className="chat-header">Prompt</div>
+              <ChatBubbleMessage>
-              <div
+                <div className="flex flex-col gap-1">
-                className="chat-bubble chat-bubble-accent cursor-pointer message-content"
+                  <div className="text-sm font-bold">System Prompt</div>
-                onClick={() => setShowSettings(true)}
+                  <div
-              >
+                    className="cursor-pointer"
-                {chatStore.systemMessageContent}
+                    onClick={() => setShowSettings(true)}
-              </div>
+                  >
-            </div>
+                    {chatStore.systemMessageContent}
+                  </div>
+                </div>
+              </ChatBubbleMessage>
+              <ChatBubbleActionWrapper>
+                <ChatBubbleAction
+                  className="size-7"
+                  icon={<Settings2Icon className="size-4" />}
+                  onClick={() => setShowSettings(true)}
+                />
+              </ChatBubbleActionWrapper>
+            </ChatBubble>
           )}
           {chatStore.history.map((_, messageIndex) => (
             <Message
@@ -634,10 +679,9 @@ export default function ChatBOX(props: {
             />
           ))}
           {showGenerating && (
-            <p className="p-2 my-2 animate-pulse message-content">
+            <ChatBubble variant="received">
-              {generatingMessage || Tr("Generating...")}
+              <ChatBubbleMessage isLoading />
-              ...
+            </ChatBubble>
-            </p>
           )}
           <p className="text-center">
             {chatStore.history.length > 0 && (
@@ -674,11 +718,14 @@ export default function ChatBOX(props: {
           </p>
           <p className="p-2 my-2 text-center opacity-50 dark:text-white">
             {chatStore.postBeginIndex !== 0 && (
-              <>
+              <Alert variant="info">
-                <br />
+                <InfoIcon className="h-4 w-4" />
-                {Tr("Info: chat history is too long, forget messages")}:{" "}
+                <AlertTitle>{Tr("Chat History Notice")}</AlertTitle>
-                {chatStore.postBeginIndex}
+                <AlertDescription>
-              </>
+                  {Tr("Info: chat history is too long, forget messages")}:{" "}
+                  {chatStore.postBeginIndex}
+                </AlertDescription>
+              </Alert>
             )}
           </p>
           <VersionHint chatStore={chatStore} />