feat: handle case thread when original model deleted (#4280)

web/containers/ModelDropdown/index.tsx

@@ -12,7 +12,7 @@ import {
   useClickOutside,
 } from '@janhq/joi'
 
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 import {
   ChevronDownIcon,
@@ -37,6 +37,7 @@ import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { formatDownloadPercentage, toGibibytes } from '@/utils/converter'
 
+import { manualRecommendationModel } from '@/utils/model'
 import {
   getLogoEngine,
   getTitleByEngine,
@@ -65,16 +66,21 @@ type Props = {
   disabled?: boolean
 }
 
+export const modelDropdownStateAtom = atom(false)
+
 const ModelDropdown = ({
   disabled,
   chatInputMode,
   strictedThread = true,
 }: Props) => {
   const { downloadModel } = useDownloadModel()
+  const [modelDropdownState, setModelDropdownState] = useAtom(
+    modelDropdownStateAtom
+  )
 
   const [searchFilter, setSearchFilter] = useState('local')
   const [searchText, setSearchText] = useState('')
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState<boolean>(modelDropdownState)
   const activeThread = useAtomValue(activeThreadAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
   const downloadingModels = useAtomValue(getDownloadingModelAtom)
@@ -84,22 +90,38 @@ const ModelDropdown = ({
   const [dropdownOptions, setDropdownOptions] = useState<HTMLDivElement | null>(
     null
   )
+
   const downloadStates = useAtomValue(modelDownloadStateAtom)
   const setThreadModelParams = useSetAtom(setThreadModelParamsAtom)
   const { updateModelParameter } = useUpdateModelParameters()
   const searchInputRef = useRef<HTMLInputElement>(null)
   const configuredModels = useAtomValue(configuredModelsAtom)
-  const featuredModel = configuredModels.filter((x) =>
+
-    x.metadata?.tags?.includes('Featured')
+  const featuredModel = configuredModels.filter(
+    (x) =>
+      manualRecommendationModel.includes(x.id) &&
+      x.metadata?.tags?.includes('Featured') &&
+      x.metadata?.size < 5000000000
   )
   const { updateThreadMetadata } = useCreateNewThread()
 
-  useClickOutside(() => setOpen(false), null, [dropdownOptions, toggle])
+  useClickOutside(() => handleChangeStateOpen(false), null, [
+    dropdownOptions,
+    toggle,
+  ])
 
   const [showEngineListModel, setShowEngineListModel] = useAtom(
     showEngineListModelAtom
   )
 
+  const handleChangeStateOpen = useCallback(
+    (state: boolean) => {
+      setOpen(state)
+      setModelDropdownState(state)
+    },
+    [setModelDropdownState]
+  )
+
   const isModelSupportRagAndTools = useCallback((model: Model) => {
     return (
       model?.engine === InferenceEngine.openai ||
@@ -145,6 +167,12 @@ const ModelDropdown = ({
     [configuredModels, searchText, searchFilter, downloadedModels]
   )
 
+  useEffect(() => {
+    if (modelDropdownState && chatInputMode) {
+      setOpen(modelDropdownState)
+    }
+  }, [chatInputMode, modelDropdownState])
+
   useEffect(() => {
     if (open && searchInputRef.current) {
       searchInputRef.current.focus()
@@ -157,7 +185,7 @@ const ModelDropdown = ({
 
     let model = downloadedModels.find((model) => model.id === modelId)
     if (!model) {
-      model = recommendedModel
+      model = undefined
     }
     setSelectedModel(model)
   }, [
@@ -343,14 +371,21 @@ const ModelDropdown = ({
               'inline-block max-w-[200px] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap',
               open && 'border border-transparent'
             )}
-            onClick={() => setOpen(!open)}
+            onClick={() => handleChangeStateOpen(!open)}
           >
-            <span>{selectedModel?.name}</span>
+            <span
+              className={twMerge(
+                !selectedModel && 'text-[hsla(var(--text-tertiary))]'
+              )}
+            >
+              {selectedModel?.name || 'Select Model'}
+            </span>
           </Badge>
         ) : (
           <Input
             value={selectedModel?.name || ''}
             className="cursor-pointer"
+            placeholder="Select Model"
             disabled={disabled}
             readOnly
             suffixIcon={

web/hooks/useCreateNewThread.ts

@@ -22,7 +22,6 @@ import { toaster } from '@/containers/Toast'
 import { isLocalEngine } from '@/utils/modelEngine'
 
 import { useActiveModel } from './useActiveModel'
-import useRecommendedModel from './useRecommendedModel'
 
 import useSetActiveThread from './useSetActiveThread'
 
@@ -71,8 +70,6 @@ export const useCreateNewThread = () => {
   const experimentalEnabled = useAtomValue(experimentalFeatureEnabledAtom)
   const setIsGeneratingResponse = useSetAtom(isGeneratingResponseAtom)
 
-  const { recommendedModel, downloadedModels } = useRecommendedModel()
-
   const threads = useAtomValue(threadsAtom)
   const { stopInference } = useActiveModel()
 
@@ -84,7 +81,7 @@ export const useCreateNewThread = () => {
     setIsGeneratingResponse(false)
     stopInference()
 
-    const defaultModel = model ?? recommendedModel ?? downloadedModels[0]
+    const defaultModel = model
 
     if (!model) {
       // if we have model, which means user wants to create new thread from Model hub. Allow them.

web/hooks/useSendChatMessage.ts

@@ -15,6 +15,7 @@ import {
 import { extractInferenceParams, extractModelLoadParams } from '@janhq/core'
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 
+import { modelDropdownStateAtom } from '@/containers/ModelDropdown'
 import {
   currentPromptAtom,
   editPromptAtom,
@@ -73,6 +74,7 @@ export default function useSendChatMessage() {
   const activeThreadRef = useRef<Thread | undefined>()
   const activeAssistantRef = useRef<ThreadAssistantInfo | undefined>()
   const setTokenSpeed = useSetAtom(tokenSpeedAtom)
+  const setModelDropdownState = useSetAtom(modelDropdownStateAtom)
 
   const selectedModelRef = useRef<Model | undefined>()
 
@@ -122,6 +124,11 @@ export default function useSendChatMessage() {
       return
     }
 
+    if (selectedModelRef.current?.id === undefined) {
+      setModelDropdownState(true)
+      return
+    }
+
     if (engineParamsUpdate) setReloadModel(true)
     setTokenSpeed(undefined)
 

web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx

@@ -27,6 +27,7 @@ import { modelDownloadStateAtom } from '@/hooks/useDownloadState'
 import { useStarterScreen } from '@/hooks/useStarterScreen'
 
 import { formatDownloadPercentage, toGibibytes } from '@/utils/converter'
+import { manualRecommendationModel } from '@/utils/model'
 import {
   getLogoEngine,
   getTitleByEngine,
@@ -56,15 +57,16 @@ const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
   const configuredModels = useAtomValue(configuredModelsAtom)
   const setMainViewState = useSetAtom(mainViewStateAtom)
 
-  const recommendModel = ['llama3.2-1b-instruct', 'llama3.2-3b-instruct']
-
   const featuredModel = configuredModels.filter((x) => {
     const manualRecommendModel = configuredModels.filter((x) =>
-      recommendModel.includes(x.id)
+      manualRecommendationModel.includes(x.id)
     )
 
     if (manualRecommendModel.length === 2) {
-      return x.id === recommendModel[0] || x.id === recommendModel[1]
+      return (
+        x.id === manualRecommendationModel[0] ||
+        x.id === manualRecommendationModel[1]
+      )
     } else {
       return (
         x.metadata?.tags?.includes('Featured') && x.metadata?.size < 5000000000

web/screens/Thread/ThreadCenterPanel/ChatInput/RichTextEditor.tsx

@@ -23,6 +23,7 @@ import useSendChatMessage from '@/hooks/useSendChatMessage'
 
 import { getCurrentChatMessagesAtom } from '@/helpers/atoms/ChatMessage.atom'
 
+import { selectedModelAtom } from '@/helpers/atoms/Model.atom'
 import {
   getActiveThreadIdAtom,
   activeSettingInputBoxAtom,
@@ -78,7 +79,7 @@ const RichTextEditor = ({
   const messages = useAtomValue(getCurrentChatMessagesAtom)
   const { sendChatMessage } = useSendChatMessage()
   const { stopInference } = useActiveModel()
-
+  const selectedModel = useAtomValue(selectedModelAtom)
   const largeContentThreshold = 1000
 
   // The decorate function identifies code blocks and marks the ranges
@@ -233,7 +234,9 @@ const RichTextEditor = ({
         event.preventDefault()
         if (messages[messages.length - 1]?.status !== MessageStatus.Pending) {
           sendChatMessage(currentPrompt)
+          if (selectedModel) {
             resetEditor()
+          }
         } else onStopInferenceClick()
       }
     },

web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx

@@ -90,6 +90,12 @@ const ChatInput = () => {
     }
   }, [activeThreadId])
 
+  useEffect(() => {
+    if (!selectedModel && !activeSettingInputBox) {
+      setActiveSettingInputBox(true)
+    }
+  }, [activeSettingInputBox, selectedModel, setActiveSettingInputBox])
+
   const onStopInferenceClick = async () => {
     stopInference()
   }
@@ -297,6 +303,7 @@ const ChatInput = () => {
                 </Button>
               </div>
             )}
+
             {messages[messages.length - 1]?.status !== MessageStatus.Pending &&
             !isGeneratingResponse &&
             !isStreamingResponse ? (
@@ -340,11 +347,11 @@ const ChatInput = () => {
           </div>
         </div>
 
-        {activeSettingInputBox && (
         <div
           className={twMerge(
             'absolute bottom-[5px] left-[1px] flex w-[calc(100%-10px)] items-center justify-between rounded-b-lg bg-[hsla(var(--center-panel-bg))] p-3 pr-0',
             !activeThread && 'bg-transparent',
+            !activeSettingInputBox && 'hidden',
             stateModel.loading && 'bg-transparent'
           )}
         >
@@ -374,10 +381,7 @@ const ChatInput = () => {
                   setShowRightPanel(true)
                   setActiveTabThreadRightPanel('model')
                 }
-                  if (
+                if (!showRightPanel && activeTabThreadRightPanel !== 'model') {
-                    !showRightPanel &&
-                    activeTabThreadRightPanel !== 'model'
-                  ) {
                   setShowRightPanel(true)
                   setActiveTabThreadRightPanel('model')
                 }
@@ -389,6 +393,7 @@ const ChatInput = () => {
               />
             </Badge>
           </div>
+          {selectedModel && (
             <Button
               theme="icon"
               onClick={() => setActiveSettingInputBox(false)}
@@ -398,9 +403,9 @@ const ChatInput = () => {
                 className="cursor-pointer text-[hsla(var(--text-secondary))]"
               />
             </Button>
-          </div>
           )}
         </div>
+      </div>
 
       <input
         type="file"

web/utils/model.ts

@@ -7,3 +7,8 @@
 export const normalizeModelId = (downloadUrl: string): string => {
   return downloadUrl.split('/').pop() ?? downloadUrl
 }
+
+export const manualRecommendationModel = [
+  'llama3.2-1b-instruct',
+  'llama3.2-3b-instruct',
+]