From 368d9810c24b9fb251877a3d425d57e3495059f4 Mon Sep 17 00:00:00 2001
From: ecwu <bitlabwzh@gmail.com>
Date: Fri, 20 Dec 2024 18:21:28 +0800
Subject: [PATCH] refactor message layout for improved UI consistency

---
 src/message.tsx       | 288 +++++++++++++++++++++--------------------
 src/pages/App.tsx     | 168 ++++++++++++------------
 src/pages/Chatbox.tsx | 291 ++++++++++++++++++++++--------------------
 3 files changed, 391 insertions(+), 356 deletions(-)

diff --git a/src/message.tsx b/src/message.tsx
index 1e95ac8..3ed507e 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -12,6 +12,15 @@ import { MessageToolCall } from "@/messageToolCall";
 import { MessageToolResp } from "@/messageToolResp";
 import { EditMessage } from "@/editMessage";
 import logprobToColor from "@/logprob";
+import {
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleMessage,
+  ChatBubbleAction,
+  ChatBubbleActionWrapper,
+} from "@/components/ui/chat/chat-bubble";
+import { useToast } from "@/hooks/use-toast";
+import { ClipboardIcon, PencilIcon, TrashIcon } from "lucide-react";
 
 export const isVailedJSON = (str: string): boolean => {
   try {
@@ -74,10 +83,13 @@ export default function Message(props: Props) {
     </div>
   );
 
+  const { toast } = useToast();
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
-    setShowCopiedHint(true);
-    setTimeout(() => setShowCopiedHint(false), 1000);
+    // TODO: Remove show copied hint
+    toast({
+      description: Tr("Message copied to clipboard!"),
+    });
   };
 
   const CopyIcon = ({ textToCopy }: { textToCopy: string }) => {
@@ -108,154 +120,154 @@ export default function Message(props: Props) {
             </span>
           </div>
         )}
-      <div
-        className={`flex ${
-          chat.role === "assistant" ? "justify-start" : "justify-end"
-        }`}
+      <ChatBubble
+        variant={chat.role === "assistant" ? "received" : "sent"}
+        className={chat.role !== "assistant" ? "flex-row-reverse" : ""}
       >
-        <div className={`w-full`}>
-          <div
-            className={`chat min-w-16 p-2 my-2 ${
-              chat.role === "assistant" ? "chat-start" : "chat-end"
-            } ${chat.hide ? "opacity-50" : ""}`}
-          >
-            <div
-              className={`chat-bubble max-w-full ${
-                chat.role === "assistant"
-                  ? renderColor
-                    ? "chat-bubble-neutral"
-                    : "chat-bubble-secondary"
-                  : "chat-bubble-primary"
-              }`}
-            >
-              {chat.hide ? (
-                <MessageHide chat={chat} />
-              ) : typeof chat.content !== "string" ? (
-                <MessageDetail chat={chat} renderMarkdown={renderMarkdown} />
-              ) : chat.tool_calls ? (
-                <MessageToolCall
-                  chat={chat}
-                  copyToClipboard={copyToClipboard}
-                />
-              ) : chat.role === "tool" ? (
-                <MessageToolResp
-                  chat={chat}
-                  copyToClipboard={copyToClipboard}
-                />
-              ) : renderMarkdown ? (
-                // @ts-ignore
-                <Markdown markdown={getMessageText(chat)} />
-              ) : (
-                <div className="message-content">
-                  {
-                    // only show when content is string or list of message
-                    // this check is used to avoid rendering tool call
-                    chat.content &&
-                      (chat.logprobs && renderColor
-                        ? chat.logprobs.content
-                            .filter((c) => c.token)
-                            .map((c) => (
-                              <div
-                                style={{
-                                  backgroundColor: logprobToColor(c.logprob),
-                                  display: "inline",
-                                }}
-                              >
-                                {c.token}
-                              </div>
-                            ))
-                        : getMessageText(chat))
-                  }
-                </div>
-              )}
+        <ChatBubbleAvatar fallback={chat.role === "assistant" ? "AI" : "US"} />
+        <ChatBubbleMessage isLoading={false}>
+          {chat.hide ? (
+            <MessageHide chat={chat} />
+          ) : typeof chat.content !== "string" ? (
+            <MessageDetail chat={chat} renderMarkdown={renderMarkdown} />
+          ) : chat.tool_calls ? (
+            <MessageToolCall chat={chat} copyToClipboard={copyToClipboard} />
+          ) : chat.role === "tool" ? (
+            <MessageToolResp chat={chat} copyToClipboard={copyToClipboard} />
+          ) : renderMarkdown ? (
+            <Markdown markdown={getMessageText(chat)} />
+          ) : (
+            <div className="message-content">
+              {chat.content &&
+                (chat.logprobs && renderColor
+                  ? chat.logprobs.content
+                      .filter((c) => c.token)
+                      .map((c) => (
+                        <div
+                          style={{
+                            backgroundColor: logprobToColor(c.logprob),
+                            display: "inline",
+                          }}
+                        >
+                          {c.token}
+                        </div>
+                      ))
+                  : getMessageText(chat))}
             </div>
-            <div className="chat-footer opacity-50 flex gap-x-2">
-              <DeleteIcon />
-              <button onClick={() => setShowEdit(true)}>Edit</button>
-              <CopyIcon textToCopy={getMessageText(chat)} />
-              {chatStore.tts_api && chatStore.tts_key && (
-                <TTSButton
-                  chatStore={chatStore}
-                  chat={chat}
-                  setChatStore={setChatStore}
-                />
-              )}
-              <TTSPlay chat={chat} />
-              {chat.response_model_name && (
-                <>
-                  <span className="opacity-50">{chat.response_model_name}</span>
-                  <hr />
-                </>
-              )}
-            </div>
-          </div>
-          {showEdit && (
-            <EditMessage
-              setShowEdit={setShowEdit}
-              chat={chat}
+          )}
+        </ChatBubbleMessage>
+        <ChatBubbleActionWrapper>
+          <ChatBubbleAction
+            icon={<TrashIcon className="size-4" />}
+            onClick={() => {
+              chatStore.history[messageIndex].hide =
+                !chatStore.history[messageIndex].hide;
+              chatStore.totalTokens = 0;
+              for (const i of chatStore.history
+                .filter(({ hide }) => !hide)
+                .slice(chatStore.postBeginIndex)
+                .map(({ token }) => token)) {
+                chatStore.totalTokens += i;
+              }
+              setChatStore({ ...chatStore });
+            }}
+          />
+          <ChatBubbleAction
+            icon={<PencilIcon className="size-4" />}
+            onClick={() => setShowEdit(true)}
+          />
+          <ChatBubbleAction
+            icon={<ClipboardIcon className="size-4" />}
+            onClick={() => copyToClipboard(getMessageText(chat))}
+          />
+          {chatStore.tts_api && chatStore.tts_key && (
+            <TTSButton
               chatStore={chatStore}
+              chat={chat}
               setChatStore={setChatStore}
             />
           )}
-          {showCopiedHint && <CopiedHint />}
-          {chatStore.develop_mode && (
-            <div
-              className={`gap-1 chat-end flex ${
-                chat.role === "assistant" ? "justify-start" : "justify-end"
-              }`}
+          <TTSPlay chat={chat} />
+        </ChatBubbleActionWrapper>
+      </ChatBubble>
+      {showEdit && (
+        <EditMessage
+          setShowEdit={setShowEdit}
+          chat={chat}
+          chatStore={chatStore}
+          setChatStore={setChatStore}
+        />
+      )}
+      {showCopiedHint && <CopiedHint />}
+      {chatStore.develop_mode && (
+        <div
+          className={`flex flex-wrap items-center gap-2 mt-2 ${
+            chat.role !== "assistant" ? "justify-end" : ""
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-sm">token</span>
+            <input
+              type="number"
+              value={chat.token}
+              className="h-8 w-16 rounded-md border border-input bg-background px-2 text-sm"
+              readOnly
+            />
+            <button
+              className="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground"
+              onClick={() => {
+                chatStore.history.splice(messageIndex, 1);
+                chatStore.postBeginIndex = Math.max(
+                  chatStore.postBeginIndex - 1,
+                  0
+                );
+                chatStore.totalTokens = 0;
+                for (const i of chatStore.history
+                  .filter(({ hide }) => !hide)
+                  .slice(chatStore.postBeginIndex)
+                  .map(({ token }) => token)) {
+                  chatStore.totalTokens += i;
+                }
+                setChatStore({ ...chatStore });
+              }}
             >
-              <span className="">token</span>
+              <XMarkIcon className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="flex items-center gap-4">
+            <label className="flex items-center gap-2">
               <input
-                value={chat.token}
-                className="input input-bordered input-xs w-16"
-                onChange={(event: any) => {
-                  chat.token = parseInt(event.target.value);
-                  setChatStore({ ...chatStore });
-                }}
-              />
-              <button
-                onClick={() => {
-                  chatStore.history.splice(messageIndex, 1);
-                  chatStore.postBeginIndex = Math.max(
-                    chatStore.postBeginIndex - 1,
-                    0
-                  );
-                  //chatStore.totalTokens =
-                  chatStore.totalTokens = 0;
-                  for (const i of chatStore.history
-                    .filter(({ hide }) => !hide)
-                    .slice(chatStore.postBeginIndex)
-                    .map(({ token }) => token)) {
-                    chatStore.totalTokens += i;
-                  }
-                  setChatStore({ ...chatStore });
-                }}
-              >
-                <XMarkIcon className="w-4 h-4" />
-              </button>
-              <span
-                onClick={(event: any) => {
+                type="checkbox"
+                className="h-4 w-4 rounded border-primary"
+                checked={chat.example}
+                onChange={() => {
                   chat.example = !chat.example;
                   setChatStore({ ...chatStore });
                 }}
-              >
-                <label className="">{Tr("example")}</label>
-                <input type="checkbox" checked={chat.example} />
-              </span>
-              <span
-                onClick={(event: any) => setRenderWorkdown(!renderMarkdown)}
-              >
-                <label className="">{Tr("render")}</label>
-                <input type="checkbox" checked={renderMarkdown} />
-              </span>
-              <span onClick={(event: any) => setRenderColor(!renderColor)}>
-                <label className="">{Tr("color")}</label>
-                <input type="checkbox" checked={renderColor} />
-              </span>
-            </div>
-          )}
+              />
+              <span className="text-sm font-medium">{Tr("example")}</span>
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-primary"
+                checked={renderMarkdown}
+                onChange={() => setRenderWorkdown(!renderMarkdown)}
+              />
+              <span className="text-sm font-medium">{Tr("render")}</span>
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-primary"
+                checked={renderColor}
+                onChange={() => setRenderColor(!renderColor)}
+              />
+              <span className="text-sm font-medium">{Tr("color")}</span>
+            </label>
+          </div>
         </div>
-      </div>
+      )}
     </>
   );
 }
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 4cb1ca9..00fb6da 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -68,6 +68,7 @@ import {
   ScissorsIcon,
   WholeWordIcon,
   EllipsisIcon,
+  CogIcon,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 
@@ -307,90 +308,95 @@ export function App() {
         <SidebarRail />
       </Sidebar>
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 border-b">
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b z-50">
           <div className="flex items-center gap-2 px-3">
             <SidebarTrigger />
             <Separator orientation="vertical" className="mr-2 h-4" />
-            <div className="dropdown lg:hidden flex items-center gap-2">
-              <h1 className="text-lg font-bold">{chatStore.model}</h1>{" "}
-              <Badge variant="outline">
-                {chatStore.totalTokens.toString()}
-              </Badge>
-              <Popover>
-                <PopoverTrigger>
-                  <EllipsisIcon />
-                </PopoverTrigger>
-                <PopoverContent>
-                  <p>
-                    Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
-                  </p>
-                  <p>
-                    Cut(s): {chatStore.postBeginIndex}/
-                    {chatStore.history.filter(({ hide }) => !hide).length}
-                  </p>
-                  <p>
-                    Cost: ${chatStore.cost.toFixed(4)} / $
-                    {getTotalCost().toFixed(2)}
-                  </p>
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="hidden lg:inline-grid">
-              <Menubar>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <BoxesIcon className="w-4 h-4 mr-2" />
-                    {chatStore.model}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>
-                      {models[chatStore.model]?.price?.prompt * 1000 * 1000}$ /
-                      1M input tokens
-                    </MenubarItem>
-                  </MenubarContent>
-                </MenubarMenu>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <ArrowUpDownIcon className="w-4 h-4 mr-2" />
-                    {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>STREAM/FETCH</MenubarItem>
-                  </MenubarContent>
-                </MenubarMenu>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <WholeWordIcon className="w-4 h-4 mr-2" />{" "}
-                    {chatStore.totalTokens}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>Max: {chatStore.maxTokens}</MenubarItem>
-                  </MenubarContent>
-                </MenubarMenu>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <ScissorsIcon className="w-4 h-4 mr-2" />
-                    {chatStore.postBeginIndex}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>
-                      Max:{" "}
-                      {chatStore.history.filter(({ hide }) => !hide).length}
-                    </MenubarItem>
-                  </MenubarContent>
-                </MenubarMenu>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <CircleDollarSignIcon className="w-4 h-4 mr-2" />
-                    {chatStore.cost.toFixed(4)}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>
-                      Accumulated: ${getTotalCost().toFixed(2)}
-                    </MenubarItem>
-                  </MenubarContent>
-                </MenubarMenu>
-              </Menubar>
+            <div className="flex justify-between items-center gap-2">
+              <div>
+                <div className="dropdown lg:hidden flex items-center gap-2">
+                  <h1 className="text-lg font-bold">{chatStore.model}</h1>{" "}
+                  <Badge variant="outline">
+                    {chatStore.totalTokens.toString()}
+                  </Badge>
+                  <Popover>
+                    <PopoverTrigger>
+                      <EllipsisIcon />
+                    </PopoverTrigger>
+                    <PopoverContent>
+                      <p>
+                        Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
+                      </p>
+                      <p>
+                        Cut(s): {chatStore.postBeginIndex}/
+                        {chatStore.history.filter(({ hide }) => !hide).length}
+                      </p>
+                      <p>
+                        Cost: ${chatStore.cost.toFixed(4)} / $
+                        {getTotalCost().toFixed(2)}
+                      </p>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+                <div className="hidden lg:inline-grid">
+                  <Menubar>
+                    <MenubarMenu>
+                      <MenubarTrigger>
+                        <BoxesIcon className="w-4 h-4 mr-2" />
+                        {chatStore.model}
+                      </MenubarTrigger>
+                      <MenubarContent>
+                        <MenubarItem>
+                          {models[chatStore.model]?.price?.prompt * 1000 * 1000}
+                          $ / 1M input tokens
+                        </MenubarItem>
+                      </MenubarContent>
+                    </MenubarMenu>
+                    <MenubarMenu>
+                      <MenubarTrigger>
+                        <ArrowUpDownIcon className="w-4 h-4 mr-2" />
+                        {chatStore.streamMode ? Tr("STREAM") : Tr("FETCH")}
+                      </MenubarTrigger>
+                      <MenubarContent>
+                        <MenubarItem>STREAM/FETCH</MenubarItem>
+                      </MenubarContent>
+                    </MenubarMenu>
+                    <MenubarMenu>
+                      <MenubarTrigger>
+                        <WholeWordIcon className="w-4 h-4 mr-2" />{" "}
+                        {chatStore.totalTokens}
+                      </MenubarTrigger>
+                      <MenubarContent>
+                        <MenubarItem>Max: {chatStore.maxTokens}</MenubarItem>
+                      </MenubarContent>
+                    </MenubarMenu>
+                    <MenubarMenu>
+                      <MenubarTrigger>
+                        <ScissorsIcon className="w-4 h-4 mr-2" />
+                        {chatStore.postBeginIndex}
+                      </MenubarTrigger>
+                      <MenubarContent>
+                        <MenubarItem>
+                          Max:{" "}
+                          {chatStore.history.filter(({ hide }) => !hide).length}
+                        </MenubarItem>
+                      </MenubarContent>
+                    </MenubarMenu>
+                    <MenubarMenu>
+                      <MenubarTrigger>
+                        <CircleDollarSignIcon className="w-4 h-4 mr-2" />
+                        {chatStore.cost.toFixed(4)}
+                      </MenubarTrigger>
+                      <MenubarContent>
+                        <MenubarItem>
+                          Accumulated: ${getTotalCost().toFixed(2)}
+                        </MenubarItem>
+                      </MenubarContent>
+                    </MenubarMenu>
+                  </Menubar>
+                </div>
+              </div>
+              <CogIcon />
             </div>
           </div>
         </header>
diff --git a/src/pages/Chatbox.tsx b/src/pages/Chatbox.tsx
index 61b38e2..67faca1 100644
--- a/src/pages/Chatbox.tsx
+++ b/src/pages/Chatbox.tsx
@@ -40,6 +40,16 @@ import VersionHint from "@/components/VersionHint";
 import StatusBar from "@/components/StatusBar";
 import WhisperButton from "@/components/WhisperButton";
 import AddToolMsg from "./AddToolMsg";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import {
+  ChatBubble,
+  ChatBubbleAvatar,
+  ChatBubbleMessage,
+  ChatBubbleAction,
+  ChatBubbleActionWrapper,
+} from "@/components/ui/chat/chat-bubble";
+import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 
 export default function ChatBOX(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
@@ -436,7 +446,7 @@ export default function ChatBOX(props: {
 
   return (
     <div className="grow flex flex-col p-2 w-full">
-      {showSettings && (
+      {true && (
         <Settings
           chatStore={chatStore}
           setChatStore={setChatStore}
@@ -532,128 +542,131 @@ export default function ChatBOX(props: {
             setChatStore={setChatStore}
           />
         )}
+        <ChatMessageList>
+          {chatStore.history.filter((msg) => !msg.example).length == 0 && (
+            <div className="bg-base-200 break-all p-3 my-3 text-left">
+              <h2>
+                <span>{Tr("Saved prompt templates")}</span>
+                <Button
+                  variant="link"
+                  className="mx-2"
+                  onClick={() => {
+                    chatStore.systemMessageContent = "";
+                    chatStore.toolsString = "";
+                    chatStore.history = [];
+                    setChatStore({ ...chatStore });
+                  }}
+                >
+                  {Tr("Reset Current")}
+                </Button>
+              </h2>
+              <div className="divider"></div>
+              <div className="flex flex-wrap">
+                <Templates
+                  templates={templates}
+                  setTemplates={setTemplates}
+                  chatStore={chatStore}
+                  setChatStore={setChatStore}
+                />
+              </div>
+            </div>
+          )}
+          {chatStore.history.length === 0 && (
+            <p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
+              {Tr("No chat history here")}
+              <br />⚙{Tr("Model")}: {chatStore.model}
+              <br />⬆{Tr("Click above to change the settings of this chat")}
+              <br />↖{Tr("Click the conor to create a new chat")}
+              <br />⚠
+              {Tr(
+                "All chat history and settings are stored in the local browser"
+              )}
+              <br />
+            </p>
+          )}
+          {chatStore.systemMessageContent.trim() && (
+            <div className="chat chat-start">
+              <div className="chat-header">Prompt</div>
+              <div
+                className="chat-bubble chat-bubble-accent cursor-pointer message-content"
+                onClick={() => setShowSettings(true)}
+              >
+                {chatStore.systemMessageContent}
+              </div>
+            </div>
+          )}
+
+          {chatStore.history.map((_, messageIndex) => (
+            <Message
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              messageIndex={messageIndex}
+            />
+          ))}
+          {showGenerating && (
+            <p className="p-2 my-2 animate-pulse message-content">
+              {generatingMessage || Tr("Generating...")}
+              ...
+            </p>
+          )}
+          <p className="text-center">
+            {chatStore.history.length > 0 && (
+              <Button
+                variant="secondary"
+                size="sm"
+                className="m-2"
+                disabled={showGenerating}
+                onClick={async () => {
+                  const messageIndex = chatStore.history.length - 1;
+                  if (chatStore.history[messageIndex].role === "assistant") {
+                    chatStore.history[messageIndex].hide = true;
+                  }
 
-        {chatStore.history.filter((msg) => !msg.example).length == 0 && (
-          <div className="bg-base-200 break-all p-3 my-3 text-left">
-            <h2>
-              <span>{Tr("Saved prompt templates")}</span>
-              <button
-                className="mx-2 underline cursor-pointer"
-                onClick={() => {
-                  chatStore.systemMessageContent = "";
-                  chatStore.toolsString = "";
-                  chatStore.history = [];
                   setChatStore({ ...chatStore });
+                  await complete();
                 }}
               >
-                {Tr("Reset Current")}
-              </button>
-            </h2>
-            <div className="divider"></div>
-            <div className="flex flex-wrap">
-              <Templates
-                templates={templates}
-                setTemplates={setTemplates}
-                chatStore={chatStore}
-                setChatStore={setChatStore}
-              />
-            </div>
-          </div>
-        )}
-        {chatStore.history.length === 0 && (
-          <p className="break-all opacity-60 p-6 rounded bg-white my-3 text-left dark:text-black">
-            {Tr("No chat history here")}
-            <br />⚙{Tr("Model")}: {chatStore.model}
-            <br />⬆{Tr("Click above to change the settings of this chat")}
-            <br />↖{Tr("Click the conor to create a new chat")}
-            <br />⚠
-            {Tr(
-              "All chat history and settings are stored in the local browser"
+                {Tr("Re-Generate")}
+              </Button>
+            )}
+            {chatStore.develop_mode && chatStore.history.length > 0 && (
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={showGenerating}
+                onClick={async () => {
+                  await complete();
+                }}
+              >
+                {Tr("Completion")}
+              </Button>
             )}
-            <br />
           </p>
-        )}
-        {chatStore.systemMessageContent.trim() && (
-          <div className="chat chat-start">
-            <div className="chat-header">Prompt</div>
-            <div
-              className="chat-bubble chat-bubble-accent cursor-pointer message-content"
-              onClick={() => setShowSettings(true)}
-            >
-              {chatStore.systemMessageContent}
-            </div>
-          </div>
-        )}
-
-        {chatStore.history.map((_, messageIndex) => (
-          <Message
-            chatStore={chatStore}
-            setChatStore={setChatStore}
-            messageIndex={messageIndex}
-          />
-        ))}
-        {showGenerating && (
-          <p className="p-2 my-2 animate-pulse message-content">
-            {generatingMessage || Tr("Generating...")}
-            ...
+          <p className="p-2 my-2 text-center opacity-50 dark:text-white">
+            {chatStore.postBeginIndex !== 0 && (
+              <>
+                <br />
+                {Tr("Info: chat history is too long, forget messages")}:{" "}
+                {chatStore.postBeginIndex}
+              </>
+            )}
           </p>
-        )}
-        <p className="text-center">
-          {chatStore.history.length > 0 && (
-            <button
-              className="btn btn-sm btn-warning disabled:line-through disabled:btn-neutral disabled:text-white m-2 p-2"
-              disabled={showGenerating}
-              onClick={async () => {
-                const messageIndex = chatStore.history.length - 1;
-                if (chatStore.history[messageIndex].role === "assistant") {
-                  chatStore.history[messageIndex].hide = true;
-                }
-
-                //chatStore.totalTokens =
-                setChatStore({ ...chatStore });
-
-                await complete();
-              }}
-            >
-              {Tr("Re-Generate")}
-            </button>
+          <VersionHint chatStore={chatStore} />
+          {showRetry && (
+            <p className="text-right p-2 my-2 dark:text-white">
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  setShowRetry(false);
+                  await complete();
+                }}
+              >
+                {Tr("Retry")}
+              </Button>
+            </p>
           )}
-          {chatStore.develop_mode && chatStore.history.length > 0 && (
-            <button
-              className="btn btn-outline btn-sm btn-warning disabled:line-through disabled:bg-neural"
-              disabled={showGenerating}
-              onClick={async () => {
-                await complete();
-              }}
-            >
-              {Tr("Completion")}
-            </button>
-          )}
-        </p>
-        <p className="p-2 my-2 text-center opacity-50 dark:text-white">
-          {chatStore.postBeginIndex !== 0 && (
-            <>
-              <br />
-              {Tr("Info: chat history is too long, forget messages")}:{" "}
-              {chatStore.postBeginIndex}
-            </>
-          )}
-        </p>
-        <VersionHint chatStore={chatStore} />
-        {showRetry && (
-          <p className="text-right p-2 my-2 dark:text-white">
-            <button
-              className="p-1 rounded bg-rose-500"
-              onClick={async () => {
-                setShowRetry(false);
-                await complete();
-              }}
-            >
-              {Tr("Retry")}
-            </button>
-          </p>
-        )}
-        <div ref={messagesEndRef}></div>
+          <div ref={messagesEndRef}></div>
+        </ChatMessageList>
       </div>
       {images.length > 0 && (
         <div className="flex flex-wrap">
@@ -683,16 +696,17 @@ export default function ChatBOX(props: {
         </span>
       )}
 
-      <div className="flex justify-between my-1">
-        <button
-          className="btn btn-primary disabled:line-through disabled:text-white disabled:bg-neutral m-1 p-1"
+      <div className="sticky top-0 z-10 bg-background flex justify-between my-1 gap-2 p-2">
+        <Button
+          variant="default"
+          size="sm"
           disabled={showGenerating || !chatStore.apiKey}
           onClick={() => {
             setShowAddImage(!showAddImage);
           }}
         >
           Image
-        </button>
+        </Button>
         {showAddImage && (
           <AddImage
             chatStore={chatStore}
@@ -702,8 +716,8 @@ export default function ChatBOX(props: {
             setImages={setImages}
           />
         )}
-        <textarea
-          autofocus
+        <Textarea
+          autoFocus
           value={inputMsg}
           ref={userInputRef}
           onChange={(event: any) => {
@@ -711,7 +725,6 @@ export default function ChatBOX(props: {
             autoHeight(event.target);
           }}
           onKeyPress={(event: any) => {
-            console.log(event);
             if (event.ctrlKey && event.code === "Enter") {
               send(event.target.value, true);
               setInputMsg("");
@@ -722,14 +735,15 @@ export default function ChatBOX(props: {
             autoHeight(event.target);
             setInputMsg(event.target.value);
           }}
-          className="textarea textarea-bordered textarea-sm grow w-0"
+          className="min-h-[40px] flex-grow resize-none"
+          placeholder="Type here..."
           style={{
             lineHeight: "1.39",
           }}
-          placeholder="Type here..."
-        ></textarea>
-        <button
-          className="btn btn-primary disabled:btn-neutral disabled:line-through m-1 p-1"
+        />
+        <Button
+          variant="default"
+          size="sm"
           disabled={showGenerating}
           onClick={() => {
             send(inputMsg, true);
@@ -738,7 +752,7 @@ export default function ChatBOX(props: {
           }}
         >
           {Tr("Send")}
-        </button>
+        </Button>
         {chatStore.whisper_api && chatStore.whisper_key && (
           <WhisperButton
             chatStore={chatStore}
@@ -747,8 +761,9 @@ export default function ChatBOX(props: {
           />
         )}
         {chatStore.develop_mode && (
-          <button
-            className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
+          <Button
+            variant="outline"
+            size="sm"
             disabled={showGenerating || !chatStore.apiKey}
             onClick={() => {
               chatStore.history.push({
@@ -768,29 +783,31 @@ export default function ChatBOX(props: {
             }}
           >
             {Tr("AI")}
-          </button>
+          </Button>
         )}
         {chatStore.develop_mode && (
-          <button
-            className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
+          <Button
+            variant="outline"
+            size="sm"
             disabled={showGenerating || !chatStore.apiKey}
             onClick={() => {
               send(inputMsg, false);
             }}
           >
             {Tr("User")}
-          </button>
+          </Button>
         )}
         {chatStore.develop_mode && (
-          <button
-            className="btn disabled:line-through disabled:btn-neutral disabled:text-white m-1 p-1"
+          <Button
+            variant="outline"
+            size="sm"
             disabled={showGenerating || !chatStore.apiKey}
             onClick={() => {
               setShowAddToolMsg(true);
             }}
           >
             {Tr("Tool")}
-          </button>
+          </Button>
         )}
         {showAddToolMsg && (
           <AddToolMsg