Showing a modal when user start conf but model not active

web/app/_components/InputToolbar/index.tsx

@@ -3,7 +3,7 @@
 
 import BasicPromptInput from '../BasicPromptInput'
 import BasicPromptAccessories from '../BasicPromptAccessories'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import SecondaryButton from '../SecondaryButton'
 import { PlusIcon } from '@heroicons/react/24/outline'
 import useCreateConversation from '@hooks/useCreateConversation'
@@ -13,9 +13,9 @@ import {
   getActiveConvoIdAtom,
 } from '@helpers/atoms/Conversation.atom'
 import useGetInputState from '@hooks/useGetInputState'
-import { Button } from '../../../uikit/button'
 import useStartStopModel from '@hooks/useStartStopModel'
 import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
+import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
 
 const InputToolbar: React.FC = () => {
   const activeModel = useAtomValue(activeAssistantModelAtom)
@@ -25,12 +25,14 @@ const InputToolbar: React.FC = () => {
   const { startModel } = useStartStopModel()
   const { loading } = useAtomValue(stateModel)
   const conversations = useAtomValue(userConversationsAtom)
-
   const activeConvoId = useAtomValue(getActiveConvoIdAtom)
+  const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
 
   const onNewConversationClick = () => {
     if (activeModel) {
       requestCreateConvo(activeModel)
+    } else {
+      setShowModalNoActiveModel(true)
     }
   }
 
@@ -43,19 +45,21 @@ const InputToolbar: React.FC = () => {
   if (!activeConvoId) {
     return null
   }
-
-  if (inputState === 'model-mismatch' || inputState === 'loading') {
-    const message =
-      inputState === 'loading' || loading ? 'Loading..' : 'Model mismatch!'
+  if (
+    (activeConvoId && inputState === 'model-mismatch') ||
+    inputState === 'loading'
+  ) {
+    // const message = inputState === 'loading' ? 'Loading..' : 'Model mismatch!'
     return (
       <div className="sticky bottom-0 flex items-center justify-center bg-background/90">
-        <div className="mb-2">
-          <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
+        <div className="my-2">
+          {/* <p className="mx-auto my-5 line-clamp-2 text-ellipsis text-center italic text-gray-600">
             {message}
-          </p>
-          <Button onClick={onStartModelClick}>
-            Load {currentConvo?.modelId}
-          </Button>
+          </p> */}
+          <SecondaryButton
+            onClick={onStartModelClick}
+            title={`Start model ${currentConvo?.modelId}`}
+          />
         </div>
       </div>
     )

web/app/_components/ModalNoActiveModel/index.tsx

@@ -39,7 +39,8 @@ const ModalNoActiveModel: React.FC = () => {
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-border bg-background/90 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <h1 className="font-base mb-4 font-bold">
-                  There is no active model at the moment ...
+                  You don’t have any actively running models. Please start a
+                  downloaded model in My Models page to use this feature.
                 </h1>
                 <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                   <button

web/screens/Chat/index.tsx

@@ -9,13 +9,13 @@ import LeftHeaderAction from '@/_components/LeftHeaderAction'
 const ChatScreen = () => {
   return (
     <div className="flex h-full">
-      <div className="border-border flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r ">
+      <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border ">
         <div className="px-4 py-6 pt-4">
           <LeftHeaderAction />
           <HistoryList />
         </div>
       </div>
-      <div className="bg-background/50 relative flex h-full w-full flex-col">
+      <div className="relative flex h-full w-full flex-col bg-background/50">
         <MainHeader />
         <ChatBody />
         <InputToolbar />