feat: add stop generation functionality and UI improvements

package.json

@@ -2,7 +2,6 @@
   "name": "react-vite-ui",
   "private": true,
   "version": "0.0.1",
-  "homepage": "https://mantrakp04.github.io/sheer",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -51,7 +50,7 @@
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.0.0",
+    "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
     "dexie": "^4.0.11",
     "dexie-react-hooks": "^1.1.7",

src/lib/chat/memory.ts

@@ -17,7 +17,7 @@ export class ChatHistoryDB extends Dexie {
   constructor() {
     super("chat_history");
     this.version(1).stores({
-      sessions: "++id, title, createdAt, updatedAt, model, embedding_model, enabled_tools, messages",
+      sessions: "id, title, createdAt, updatedAt, model, embedding_model, enabled_tools, messages",
     });
   }
 }

src/pages/chat/components/DocumentBadgesScrollArea.tsx

@@ -11,6 +11,7 @@ interface DocumentBadgesScrollAreaProps {
   removeable?: boolean;
   maxHeight?: string;
   className?: string;
+  rowReverse?: boolean;
 }
 
 export const DocumentBadgesScrollArea = React.memo(({ 
@@ -19,10 +20,11 @@ export const DocumentBadgesScrollArea = React.memo(({
   onRemove,
   removeable = true,
   maxHeight = "100px",
-  className = ""
+  className = "",
+  rowReverse = true,
 }: DocumentBadgesScrollAreaProps) => (
   <ScrollArea className={cn("w-full", className)} style={{ maxHeight }}>
-    <div className="flex flex-row-reverse flex-wrap-reverse gap-1 p-1">
+    <div className={`flex ${rowReverse ? "flex-row-reverse" : "flex-row"} flex-wrap-reverse gap-1 p-1`}>
       {documents.map((document) => (
         <DocumentBadge
           key={document.id}

src/pages/chat/components/Input.tsx

@@ -25,6 +25,7 @@ export const Input = React.memo(({
   handleAttachmentRemove,
   selectedModelName,
   isGenerating,
+  stopGenerating,
 }: InputProps) => {
   return (
     <div className="flex flex-col w-1/2 mx-auto bg-muted rounded-md p-1">
@@ -34,6 +35,7 @@ export const Input = React.memo(({
           onPreview={setPreviewDocument}
           onRemove={handleAttachmentRemove}
           maxHeight="100px"
+          rowReverse={false}
         />
       )}
       <AutosizeTextarea
@@ -70,8 +72,14 @@ export const Input = React.memo(({
           variant="default" 
           size="icon" 
           className="rounded-full" 
-          onClick={onSendMessage}
-          disabled={isGenerating}
+          onClick={() => {
+            if (isGenerating) {
+              // stop the generation
+              stopGenerating();
+            } else {
+              onSendMessage();
+            }
+          }}
         >
           {isGenerating ? (
             <Loader2 className="h-4 w-4 animate-spin" />

src/pages/chat/components/Messages.tsx

@@ -99,7 +99,7 @@ export const Messages = React.memo(({
         <Button
           variant="secondary"
           size="icon"
-          className="absolute left-1/2 -translate-x-1/2 bottom-4 rounded-full shadow-md hover:bg-accent z-50 bg-background/80 backdrop-blur-sm"
+          className="absolute left-1/2 -translate-x-1/2 z-50 bottom-4 rounded-full shadow-md hover:bg-accent bg-background/80 backdrop-blur-sm"
           onClick={scrollToBottom}
         >
           <ArrowDown className="h-4 w-4" />

src/pages/chat/page.tsx

@@ -174,6 +174,11 @@ export function ChatPage() {
     generateMessage(id, content, [], isGenerating, setIsGenerating, setStreamingHumanMessage, setStreamingAIMessageChunks, chatManager, setInput, setAttachments);
   }, [id, chatSession, isGenerating, chatHistoryDB.sessions, chatManager]);
 
+  const stopGenerating = React.useCallback(() => {
+    chatManager.controller.abort();
+    setIsGenerating(false);
+  }, [chatManager, setIsGenerating]);
+
   return (
     <div className="flex flex-col h-screen p-2">
       <Messages
@@ -205,6 +210,7 @@ export function ChatPage() {
         handleAttachmentRemove={handleAttachmentRemove}
         selectedModelName={selectedModelName}
         isGenerating={isGenerating}
+        stopGenerating={stopGenerating}
       />
       <FilePreviewDialog
         document={previewDocument}

src/pages/chat/types.ts

@@ -39,6 +39,7 @@ export interface InputProps {
   handleAttachmentFileUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleAttachmentUrlUpload: () => void;
   handleAttachmentRemove: (docId: string) => void;
+  stopGenerating: () => void;
 }
 
 export interface FilePreviewDialogProps {