From 81bfba73171ba73086cb1465db4365fc35e14d96 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 8 Nov 2023 00:12:18 +0700
Subject: [PATCH] Improve state of welcome screen

---
 web/screens/Chat/index.tsx    |  1 +
 web/screens/Welcome/index.tsx | 58 ++++++++++++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/web/screens/Chat/index.tsx b/web/screens/Chat/index.tsx
index 4b5dc3094b..b3d379b823 100644
--- a/web/screens/Chat/index.tsx
+++ b/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 (
diff --git a/web/screens/Welcome/index.tsx b/web/screens/Welcome/index.tsx
index 3a0a2a65c1..72030cb919 100644
--- a/web/screens/Welcome/index.tsx
+++ b/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>
   )