Update convo state when user change model

Author: urmauur

uikit/src/button/styles.scss

@@ -12,15 +12,15 @@
   }
 
   &-outline {
-    @apply border-input hover:bg-accent hover:text-accent-foreground border bg-transparent;
+    @apply border-input hover:bg-primary hover:text-primary-foreground border bg-transparent;
   }
 
   &-secondary {
     @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
   }
 
   &-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground;
+    @apply hover:bg-primary hover:text-primary-foreground;
   }
 
   &-sm {

uikit/src/command/styles.scss

@@ -25,7 +25,7 @@
   }
 
   &-list-item {
-    @apply text-foreground aria-selected:bg-accent relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none;
+    @apply text-foreground aria-selected:bg-primary relative flex cursor-pointer select-none items-center rounded-md px-2 py-2 text-sm outline-none;
   }
 
   &-empty {

uikit/src/main.scss

@@ -27,17 +27,13 @@
   }
 }
 
-
 :root {
   --background: 0 0% 100%;
   --foreground: 20 14.3% 4.1%;
 
   --muted: 60 4.8% 95.9%;
   --muted-foreground: 240 3.8% 46.1%;
 
-  --accent: 60 4.8% 95.9%;
-  --accent-foreground: 24 9.8% 10%;
-
   --danger: 346.8 77.2% 49.8%;
   --danger-foreground: 355.7 100% 97.3%;
 
@@ -77,9 +73,6 @@
   --muted: 12 6.5% 15.1%;
   --muted-foreground: 24 5.4% 63.9%;
 
-  --accent: 12 6.5% 15.1%;
-  --accent-foreground: 60 9.1% 97.8%;
-
   --danger: 346.8 77.2% 49.8%;
   --danger-foreground: 355.7 100% 97.3%;
 

web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx

@@ -73,7 +73,7 @@ export default function CommandListDownloadedModel() {
                     <div className="flex w-full items-center justify-between">
                       <span>{model.name}</span>
                       {activeModel && activeModel._id === model._id && (
-                        <Badge>Active</Badge>
+                        <Badge themes="secondary">Active</Badge>
                       )}
                     </div>
                   </CommandItem>

web/hooks/useGetConfiguredModels.ts

@@ -40,6 +40,7 @@ export function useGetConfiguredModels() {
   // TODO allow user for filter
   useEffect(() => {
     fetchModels()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return { loading, models }

web/screens/Chat/HistoryList/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { Conversation, Model } from '@janhq/core/lib/types'
-import { Button } from '@janhq/uikit'
+import { Badge, Button } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
 import { useAtomValue, useSetAtom } from 'jotai'
 
@@ -64,7 +64,7 @@ export default function HistoryList() {
       <div className="sticky top-0 z-20 flex flex-col border-b border-border bg-background px-4 py-3">
         <Button
           size="sm"
-          themes="outline"
+          themes="secondary"
           onClick={handleClickConversation}
           disabled={!activeModel}
         >

web/screens/Chat/index.tsx

@@ -3,7 +3,7 @@ import { Fragment, useEffect } from 'react'
 import { Model } from '@janhq/core/lib/types'
 import { ScrollArea, Input, Button, Badge } from '@janhq/uikit'
 
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import { Trash2Icon } from 'lucide-react'
 
 import { currentPromptAtom } from '@/containers/Providers/Jotai'
@@ -17,6 +17,7 @@ import useDeleteConversation from '@/hooks/useDeleteConversation'
 
 import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
 
+import useGetUserConversations from '@/hooks/useGetUserConversations'
 import { useMainViewState } from '@/hooks/useMainViewState'
 
 import useSendChatMessage from '@/hooks/useSendChatMessage'
@@ -28,6 +29,7 @@ import HistoryList from '@/screens/Chat/HistoryList'
 import {
   currentConversationAtom,
   getActiveConvoIdAtom,
+  userConversationsAtom,
   waitingToSendMessage,
 } from '@/helpers/atoms/Conversation.atom'
 
@@ -40,7 +42,6 @@ const ChatScreen = () => {
   const { activeModel, stateModel } = useActiveModel()
   const { setMainViewState } = useMainViewState()
 
-  const isEnableChat = currentConvo && activeModel
   const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom)
   const currentConvoState = useAtomValue(currentConvoStateAtom)
   const { sendChatMessage } = useSendChatMessage()
@@ -49,6 +50,14 @@ const ChatScreen = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom)
   const [isWaitingToSend, setIsWaitingToSend] = useAtom(waitingToSendMessage)
   const { requestCreateConvo } = useCreateConversation()
+  const { getUserConversations } = useGetUserConversations()
+  const conversations = useAtomValue(userConversationsAtom)
+  const isEnableChat = (currentConvo && activeModel) || conversations.length > 0
+
+  useEffect(() => {
+    getUserConversations()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const handleMessageChange = (value: string) => {
     setCurrentPrompt(value)
@@ -81,6 +90,8 @@ const ChatScreen = () => {
     }
   }
 
+  console.log(currentConvo)
+
   return (
     <div className="flex h-full">
       <div className="flex h-full w-64 flex-shrink-0 flex-col border-r border-border">
@@ -91,14 +102,34 @@ const ChatScreen = () => {
       <div className="relative flex h-full w-full flex-col bg-muted/10">
         <div className="flex h-full w-full flex-col justify-between">
           {isEnableChat && (
-            <div className="h-[53px] flex-shrink-0 border-b border-border p-4">
+            <div className="h-[53px] flex-shrink-0 border-b border-border bg-background p-4">
               <div className="flex items-center justify-between">
                 <span>{currentConvo?.name ?? ''}</span>
-                <Trash2Icon
-                  size={16}
-                  className="cursor-pointer text-muted-foreground"
-                  onClick={() => deleteConvo()}
-                />
+                {downloadedModels.find((x) => x.name === currentConvo?.name) ||
+                activeModel?._id === currentConvo?.modelId ? (
+                  <Fragment>
+                    {!stateModel.loading && (
+                      <Trash2Icon
+                        size={16}
+                        className="cursor-pointer text-muted-foreground"
+                        onClick={() => deleteConvo()}
+                      />
+                    )}
+                  </Fragment>
+                ) : (
+                  <div>
+                    <Button
+                      themes="secondary"
+                      size="sm"
+                      className="-mt-1"
+                      onClick={() => {
+                        setMainViewState(MainViewState.ExploreModels)
+                      }}
+                    >
+                      Download Model
+                    </Button>
+                  </div>
+                )}
               </div>
             </div>
           )}
@@ -140,7 +171,11 @@ const ChatScreen = () => {
               className="h-10"
               onKeyDown={(e) => handleKeyDown(e)}
               placeholder="Type your message ..."
-              disabled={!activeModel || stateModel.loading}
+              disabled={
+                !activeModel ||
+                stateModel.loading ||
+                activeModel._id !== currentConvo?.modelId
+              }
               value={currentPrompt}
               onChange={(e) => handleMessageChange(e.target.value)}
             />

web/screens/ExploreModels/ExploreModelList/index.tsx

@@ -10,7 +10,7 @@ export default function ExploreModelList(props: Props) {
   const { models } = props
   return (
     <div className="relative h-full w-full flex-shrink-0">
-      {models?.map((item) => <ExploreModelItem key={item._id} model={item} />)}
+      {models?.map((item, i) => <ExploreModelItem key={i} model={item} />)}
     </div>
   )
 }

web/screens/MyModels/index.tsx

@@ -113,7 +113,8 @@ const MyModelsScreen = () => {
                                 <Button
                                   themes="danger"
                                   onClick={() =>
-                                    setTimeout(() => {
+                                    setTimeout(async () => {
+                                      await stopModel(model._id)
                                       deleteModel(model)
                                     }, 500)
                                   }