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,25 +36,32 @@ 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) => {
  setDownloadedModels(downloadedModels)
  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)
  }}
  >