ui: improve state of welcome screen

web/screens/Chat/index.tsx

@@ -67,6 +67,7 @@ const ChatScreen = () => {
       setIsWaitingToSend(false)
       sendChatMessage()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [waitingToSendMessage, activeConversationId])
 
   const handleKeyDown = async (

web/screens/Welcome/index.tsx

@@ -1,6 +1,21 @@
+import { Fragment } from 'react'
+
+import { Badge, Button } from '@janhq/uikit'
+
 import LogoMark from '@/containers/Brand/Logo/Mark'
 
+import { MainViewState } from '@/constants/screens'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
+
+import { useMainViewState } from '@/hooks/useMainViewState'
+
 const WelcomeScreen = () => {
+  const { downloadedModels } = useGetDownloadedModels()
+  const { activeModel } = useActiveModel()
+  const { setMainViewState } = useMainViewState()
+
   return (
     <div className="flex h-full items-center justify-center px-4">
       <div className="text-center">
@@ -9,10 +24,45 @@ const WelcomeScreen = () => {
           width={56}
           height={56}
         />
-        <h1 data-testid="testid-welcome-title" className="text-2xl font-bold">
-          Welcome to Jan
-        </h1>
-        <p className="">{`let’s download your first model`}</p>
+
+        {downloadedModels.length === 0 && !activeModel && (
+          <Fragment>
+            <h1
+              data-testid="testid-welcome-title"
+              className="text-2xl font-bold"
+            >
+              Welcome to Jan
+            </h1>
+            <p className="mt-1">{`let’s download your first model`}</p>
+            <Button
+              className="mt-4"
+              onClick={() => setMainViewState(MainViewState.ExploreModels)}
+            >
+              Explore Models
+            </Button>
+          </Fragment>
+        )}
+        {downloadedModels.length >= 1 && !activeModel && (
+          <Fragment>
+            <h1 className="mt-2 text-lg font-medium">{`You don’t have any actively running models`}</h1>
+            <p className="mt-1">{`Please start a downloaded model in My Models page to use this feature.`}</p>
+            <Badge className="mt-4" themes="secondary">
+              ⌘e to show your model
+            </Badge>
+          </Fragment>
+        )}
+        {downloadedModels.length >= 1 && activeModel && (
+          <Fragment>
+            <h1 className="mt-2 text-lg font-medium">{`Your Model is Active`}</h1>
+            <p className="mt-1">{`You are ready to start conversations.`}</p>
+            <Button
+              className="mt-4"
+              onClick={() => setMainViewState(MainViewState.Chat)}
+            >
+              Start a conversation
+            </Button>
+          </Fragment>
+        )}
       </div>
     </div>
   )