Finished flow hub screen

web/containers/DropdownListSidebar/index.tsx

@@ -19,6 +19,7 @@ import { twMerge } from 'tailwind-merge'
 
 import { MainViewState } from '@/constants/screens'
 
+import { useActiveModel } from '@/hooks/useActiveModel'
 import { getDownloadedModels } from '@/hooks/useGetDownloadedModels'
 
 import { useMainViewState } from '@/hooks/useMainViewState'
@@ -35,6 +36,7 @@ export default function DropdownListSidebar() {
   const activeThread = useAtomValue(activeThreadAtom)
   const [selected, setSelected] = useState<Model | undefined>()
   const { setMainViewState } = useMainViewState()
+  const { activeModel, stateModel } = useActiveModel()
 
   useEffect(() => {
     getDownloadedModels().then((downloadedModels) => {
@@ -42,18 +44,24 @@ export default function DropdownListSidebar() {
       if (downloadedModels.length > 0) {
         setSelected(
           downloadedModels.filter(
-            (x) => x.id === activeThread?.assistants[0].model.id
+            (x) =>
+              x.id === activeThread?.assistants[0].model.id ||
+              x.id === activeModel?.id
           )[0] || downloadedModels[0]
         )
         setSelectedModel(
           downloadedModels.filter(
-            (x) => x.id === activeThread?.assistants[0].model.id
+            (x) =>
+              x.id === activeThread?.assistants[0].model.id ||
+              x.id === activeModel?.id
           )[0] || downloadedModels[0]
         )
       }
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeThread])
+  }, [activeThread, activeModel])
+
+  if (stateModel.loading) return null
 
   return (
     <Select

web/screens/Chat/index.tsx

@@ -137,7 +137,7 @@ const ChatScreen = () => {
 
           {stateModel.loading && (
             <div className="mb-1 mt-2 py-2 text-center">
-              <span className="rounded-lg border border-border px-4 py-2 shadow-lg">
+              <span className="rounded-lg border border-border bg-blue-200 px-4 py-2 font-semibold text-blue-600 shadow-lg">
                 Starting model {stateModel.model}
               </span>
             </div>

web/screens/ExploreModels/ExploreModelItemHeader/index.tsx

@@ -16,6 +16,7 @@ import { MainViewState } from '@/constants/screens'
 
 // import { ModelPerformance, TagType } from '@/constants/tagType'
 
+import { useActiveModel } from '@/hooks/useActiveModel'
 import useDownloadModel from '@/hooks/useDownloadModel'
 import { useDownloadState } from '@/hooks/useDownloadState'
 import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
@@ -33,6 +34,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
   const { downloadModel } = useDownloadModel()
   const { downloadedModels } = useGetDownloadedModels()
   const { modelDownloadStateAtom, downloadStates } = useDownloadState()
+  const { startModel } = useActiveModel()
   // const [title, setTitle] = useState<string>('Recommended')
 
   // const [performanceTag, setPerformanceTag] = useState<TagType>(
@@ -63,6 +65,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
         themes="success"
         className="min-w-[98px]"
         onClick={() => {
+          startModel(model.id)
           setMainViewState(MainViewState.MyModels)
         }}
       >