Merge pull request #89 from jakobhoeg/feature/action-buttons

jakobhoeg · web-flow · commit 2e9e81e4beb5 · 2025-01-13T11:07:13.000+01:00
feat: add action buttons (regenerate, copy)
diff --git a/src/app/hooks/useChatStore.ts b/src/app/hooks/useChatStore.ts
@@ -13,24 +13,23 @@ interface State {
   currentChatId: string | null;
   selectedModel: string | null;
   userName: string | "Anonymous";
-  isDownloading: boolean; // New: Track download state
-  downloadProgress: number; // New: Track download progress
-  downloadingModel: string | null; // New: Track which model is being downloaded
+  isDownloading: boolean;
+  downloadProgress: number;
+  downloadingModel: string | null;
 }
 
 interface Actions {
   setBase64Images: (base64Images: string[] | null) => void;
-  setMessages: (chatId: string, fn: (messages: Message[]) => Message[]) => void;
   setCurrentChatId: (chatId: string) => void;
   setSelectedModel: (selectedModel: string) => void;
   getChatById: (chatId: string) => ChatSession | undefined;
   getMessagesById: (chatId: string) => Message[];
   saveMessages: (chatId: string, messages: Message[]) => void;
   handleDelete: (chatId: string, messageId?: string) => void;
   setUserName: (userName: string) => void;
-  startDownload: (modelName: string) => void; // New: Start download
-  stopDownload: () => void; // New: Stop download
-  setDownloadProgress: (progress: number) => void; // New: Update progress
+  startDownload: (modelName: string) => void;
+  stopDownload: () => void;
+  setDownloadProgress: (progress: number) => void;
 }
 
 const useChatStore = create<State & Actions>()(
@@ -41,29 +40,13 @@ const useChatStore = create<State & Actions>()(
       currentChatId: null,
       selectedModel: null,
       userName: "Anonymous",
-      isDownloading: false, // Default download state
-      downloadProgress: 0, // Default progress
-      downloadingModel: null, // Default downloading model
+      isDownloading: false,
+      downloadProgress: 0,
+      downloadingModel: null, 
 
-      // Existing actions
       setBase64Images: (base64Images) => set({ base64Images }),
       setUserName: (userName) => set({ userName }),
-      setMessages: (chatId, fn) =>
-        set((state) => {
-          const existingChat = state.chats[chatId];
-          const updatedMessages = fn(existingChat?.messages || []);
 
-          return {
-            chats: {
-              ...state.chats,
-              [chatId]: {
-                ...existingChat,
-                messages: updatedMessages,
-                createdAt: existingChat?.createdAt || new Date().toISOString(),
-              },
-            },
-          };
-        }),
       setCurrentChatId: (chatId) => set({ currentChatId: chatId }),
       setSelectedModel: (selectedModel) => set({ selectedModel }),
       getChatById: (chatId) => {
@@ -118,7 +101,6 @@ const useChatStore = create<State & Actions>()(
         });
       },
 
-      // New actions for download state
       startDownload: (modelName) =>
         set({ isDownloading: true, downloadingModel: modelName, downloadProgress: 0 }),
       stopDownload: () =>
diff --git a/src/components/button-with-tooltip.tsx b/src/components/button-with-tooltip.tsx
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import { Button } from "./ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface ButtonWithTooltipProps {
+  children: React.ReactElement;
+  side: "top" | "bottom" | "left" | "right";
+  toolTipText: string;
+}
+
+const ButtonWithTooltip = forwardRef<HTMLDivElement, ButtonWithTooltipProps>(
+  ({ children, side, toolTipText }, ref) => {
+    return (
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            {React.cloneElement(children, { ref })}
+          </TooltipTrigger>
+          <TooltipContent side={side}>
+            <div>{toolTipText}</div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
+
+ButtonWithTooltip.displayName = "ButtonWithTooltip";
+
+export default ButtonWithTooltip;
diff --git a/src/components/chat/chat-list.tsx b/src/components/chat/chat-list.tsx
@@ -7,17 +7,22 @@ import {
   ChatBubbleAvatar,
   ChatBubbleMessage,
 } from "../ui/chat/chat-bubble";
+import { ChatRequestOptions } from "ai";
 
 interface ChatListProps {
   messages: Message[];
   isLoading: boolean;
   loadingSubmit?: boolean;
+  reload: (
+    chatRequestOptions?: ChatRequestOptions
+  ) => Promise<string | null | undefined>;
 }
 
 export default function ChatList({
   messages,
   isLoading,
   loadingSubmit,
+  reload,
 }: ChatListProps) {
   return (
     <div className="flex-1 w-full overflow-y-auto">
@@ -28,6 +33,7 @@ export default function ChatList({
             message={message}
             isLast={index === messages.length - 1}
             isLoading={isLoading}
+            reload={reload}
           />
         ))}
         {loadingSubmit && (
diff --git a/src/components/chat/chat-message.tsx b/src/components/chat/chat-message.tsx
@@ -11,21 +11,39 @@ import {
   ChatBubbleAvatar,
   ChatBubbleMessage,
 } from "../ui/chat/chat-bubble";
+import ButtonWithTooltip from "../button-with-tooltip";
+import { Button } from "../ui/button";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+import { ChatRequestOptions } from "ai";
+import { RefreshCcw } from "lucide-react";
 
 export type ChatMessageProps = {
   message: Message;
   isLast: boolean;
   isLoading: boolean | undefined;
+  reload: (
+    chatRequestOptions?: ChatRequestOptions
+  ) => Promise<string | null | undefined>;
 };
 
-function ChatMessage({ message, isLast, isLoading }: ChatMessageProps) {
+function ChatMessage({ message, isLast, isLoading, reload }: ChatMessageProps) {
   const contentParts = useMemo(
     () => message.content.split("```"),
     [message.content]
   );
 
   const variant = message.role === "user" ? "sent" : "received";
 
+  const [isCopied, setisCopied] = React.useState<boolean>(false);
+
+  const copyToClipboard = (response: string) => () => {
+    navigator.clipboard.writeText(response);
+    setisCopied(true);
+    setTimeout(() => {
+      setisCopied(false);
+    }, 1500);
+  };
+
   return (
     <motion.div
       layout
@@ -82,6 +100,45 @@ function ChatMessage({ message, isLast, isLoading }: ChatMessageProps) {
               );
             }
           })}
+
+          {message.role === "assistant" && (
+            <div>
+              {/* Action buttons */}
+              <div className="pt-2 flex gap-1 items-center text-muted-foreground">
+                {/* Copy button */}
+                {!isLoading && (
+                  <ButtonWithTooltip side="bottom" toolTipText="Copy">
+                    <Button
+                      onClick={copyToClipboard(message.content)}
+                      variant="ghost"
+                      size="icon"
+                      className="h-4 w-4"
+                    >
+                      {isCopied ? (
+                        <CheckIcon className="w-3.5 h-3.5 transition-all" />
+                      ) : (
+                        <CopyIcon className="w-3.5 h-3.5 transition-all" />
+                      )}
+                    </Button>
+                  </ButtonWithTooltip>
+                )}
+
+                {/* Only show regenerate button on the last ai message */}
+                {!isLoading && isLast && (
+                  <ButtonWithTooltip side="bottom" toolTipText="Regenerate">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-4 w-4"
+                      onClick={() => reload()}
+                    >
+                      <RefreshCcw className="w-3.5 h-3.5 scale-100 transition-all" />
+                    </Button>
+                  </ButtonWithTooltip>
+                )}
+              </div>
+            </div>
+          )}
         </ChatBubbleMessage>
       </ChatBubble>
     </motion.div>
diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
@@ -30,6 +30,7 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
     stop,
     setMessages,
     setInput,
+    reload,
   } = useChat({
     id,
     initialMessages,
@@ -40,15 +41,15 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
     },
     onFinish: (message) => {
       const savedMessages = getMessagesById(id);
-      console.log(savedMessages);
       saveMessages(id, [...savedMessages, message]);
       setLoadingSubmit(false);
       router.replace(`/c/${id}`);
     },
     onError: (error) => {
       setLoadingSubmit(false);
       router.replace("/");
-      toast.error("An error occurred. Please try again.");
+      console.error(error.message);
+      console.error(error.cause);
     },
   });
   const [loadingSubmit, setLoadingSubmit] = React.useState(false);
@@ -103,6 +104,19 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
     setBase64Images(null);
   };
 
+  const removeLatestMessage = () => {
+    const updatedMessages = messages.slice(0, -1);
+    setMessages(updatedMessages);
+    saveMessages(id, updatedMessages);
+    return updatedMessages;
+  };
+
+  const handleStop = () => {
+    stop();
+    saveMessages(id, [...messages]);
+    setLoadingSubmit(false);
+  };
+
   return (
     <div className="flex flex-col w-full max-w-3xl h-full">
       <ChatTopbar
@@ -129,7 +143,7 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
             handleInputChange={handleInputChange}
             handleSubmit={onSubmit}
             isLoading={isLoading}
-            stop={stop}
+            stop={handleStop}
             setInput={setInput}
           />
         </div>
@@ -139,13 +153,27 @@ export default function Chat({ initialMessages, id, isMobile }: ChatProps) {
             messages={messages}
             isLoading={isLoading}
             loadingSubmit={loadingSubmit}
+            reload={async () => {
+              removeLatestMessage();
+
+              const requestOptions: ChatRequestOptions = {
+                options: {
+                  body: {
+                    selectedModel: selectedModel,
+                  },
+                },
+              };
+
+              setLoadingSubmit(true);
+              return reload(requestOptions);
+            }}
           />
           <ChatBottombar
             input={input}
             handleInputChange={handleInputChange}
             handleSubmit={onSubmit}
             isLoading={isLoading}
-            stop={stop}
+            stop={handleStop}
             setInput={setInput}
           />
         </>
