Add empty model conversation (#254)

* add empty conversation model selection

Signed-off-by: James <james@jan.ai>

* chore: using secondary button instead of sidebar button

Signed-off-by: James <james@jan.ai>

---------

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>

web/app/_components/ActiveModelTable/index.tsx

@@ -1,7 +1,7 @@
-import { currentProductAtom } from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
 import React, { Fragment } from "react";
 import ModelTable from "../ModelTable";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
 
 const ActiveModelTable: React.FC = () => {
   const activeModel = useAtomValue(currentProductAtom);

web/app/_components/AvailableModelCard/index.tsx

@@ -2,9 +2,8 @@ import { Product } from "@/_models/Product";
 import DownloadModelContent from "../DownloadModelContent";
 import ModelDownloadButton from "../ModelDownloadButton";
 import ModelDownloadingButton from "../ModelDownloadingButton";
-import ViewModelDetailButton from "../ViewModelDetailButton";
 import { useAtomValue } from "jotai";
-import { modelDownloadStateAtom } from "@/_helpers/JotaiWrapper";
+import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
 
 type Props = {
   product: Product;
@@ -36,8 +35,6 @@ const AvailableModelCard: React.FC<Props> = ({
     }
   }
 
-  const handleViewDetails = () => {};
-
   const downloadButton = isDownloading ? (
     <div className="w-1/5 flex items-start justify-end">
       <ModelDownloadingButton total={total} value={transferred} />

web/app/_components/BasicPromptAccessories/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
 import { useSetAtom } from "jotai";
 import SecondaryButton from "../SecondaryButton";
 import SendButton from "../SendButton";
+import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 
 const BasicPromptAccessories: React.FC = () => {
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);

web/app/_components/BasicPromptButton/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSetAtom } from "jotai";
 import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
+import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 
 const BasicPromptButton: React.FC = () => {
   const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);

web/app/_components/BasicPromptInput/index.tsx

@@ -1,22 +1,45 @@
 "use client";
 
 import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
+import { getActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
+import { selectedModelAtom } from "@/_helpers/atoms/Model.atom";
+import useCreateConversation from "@/_hooks/useCreateConversation";
+import useInitModel from "@/_hooks/useInitModel";
 import useSendChatMessage from "@/_hooks/useSendChatMessage";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
+import { ChangeEvent } from "react";
 
 const BasicPromptInput: React.FC = () => {
+  const activeConversationId = useAtomValue(getActiveConvoIdAtom);
+  const selectedModel = useAtomValue(selectedModelAtom);
   const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom);
   const { sendChatMessage } = useSendChatMessage();
+  const { requestCreateConvo } = useCreateConversation();
 
-  const handleMessageChange = (event: any) => {
+  const { initModel } = useInitModel();
+
+  const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     setCurrentPrompt(event.target.value);
   };
 
-  const handleKeyDown = (event: any) => {
+  const handleKeyDown = async (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
     if (event.key === "Enter") {
       if (!event.shiftKey) {
+        if (activeConversationId) {
           event.preventDefault();
           sendChatMessage();
+        } else {
+          if (!selectedModel) {
+            console.log("No model selected");
+            return;
+          }
+
+          await requestCreateConvo(selectedModel);
+          await initModel(selectedModel);
+          sendChatMessage();
+        }
       }
     }
   };

web/app/_components/ChatBody/index.tsx

@@ -4,14 +4,12 @@ import React, { useCallback, useRef, useState } from "react";
 import ChatItem from "../ChatItem";
 import { ChatMessage } from "@/_models/ChatMessage";
 import useChatMessages from "@/_hooks/useChatMessages";
-import {
+import { showingTyping } from "@/_helpers/JotaiWrapper";
-  chatMessages,
-  getActiveConvoIdAtom,
-  showingTyping,
-} from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
 import { selectAtom } from "jotai/utils";
 import LoadingIndicator from "../LoadingIndicator";
+import { getActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
+import { chatMessages } from "@/_helpers/atoms/ChatMessage.atom";
 
 const ChatBody: React.FC = () => {
   const activeConversationId = useAtomValue(getActiveConvoIdAtom) ?? "";

web/app/_components/ChatBody/renderChatMessage.tsx

@@ -4,7 +4,7 @@ import SimpleTextMessage from "../SimpleTextMessage";
 import { ChatMessage, MessageType } from "@/_models/ChatMessage";
 import StreamTextMessage from "../StreamTextMessage";
 import { useAtomValue } from "jotai";
-import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
+import { currentStreamingMessageAtom } from "@/_helpers/atoms/ChatMessage.atom";
 
 export default function renderChatMessage({
   id,

web/app/_components/ChatContainer/index.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { MainViewState, getMainViewStateAtom } from "@/_helpers/JotaiWrapper";
 import { ReactNode } from "react";
 import Welcome from "../WelcomeContainer";
 import { Preferences } from "../Preferences";
 import MyModelContainer from "../MyModelContainer";
 import ExploreModelContainer from "../ExploreModelContainer";
+import {
+  MainViewState,
+  getMainViewStateAtom,
+} from "@/_helpers/atoms/MainView.atom";
+import EmptyChatContainer from "../EmptyChatContainer";
 
 type Props = {
   children: ReactNode;
@@ -16,6 +20,8 @@ export default function ChatContainer({ children }: Props) {
   const viewState = useAtomValue(getMainViewStateAtom);
 
   switch (viewState) {
+    case MainViewState.ConversationEmptyModel:
+      return <EmptyChatContainer />
     case MainViewState.ExploreModel:
       return <ExploreModelContainer />;
     case MainViewState.Setting:

web/app/_components/CompactLogo/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import JanImage from "../JanImage";
-import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
 import { useSetAtom } from "jotai";
+import { setActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
 
 const CompactLogo: React.FC = () => {
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);

web/app/_components/ConfirmDeleteConversationModal/index.tsx

@@ -1,4 +1,4 @@
-import { showConfirmDeleteConversationModalAtom } from "@/_helpers/JotaiWrapper";
+import { showConfirmDeleteConversationModalAtom } from "@/_helpers/atoms/Modal.atom";
 import useDeleteConversation from "@/_hooks/useDeleteConversation";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";

web/app/_components/ConfirmDeleteModelModal/index.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
-import { showConfirmDeleteModalAtom } from "@/_helpers/JotaiWrapper";
 import { useAtom } from "jotai";
+import { showConfirmDeleteModalAtom } from "@/_helpers/atoms/Modal.atom";
 
 const ConfirmDeleteModelModal: React.FC = () => {
   const [show, setShow] = useAtom(showConfirmDeleteModalAtom);

web/app/_components/ConfirmSignOutModal/index.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
-import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
 import { useAtom } from "jotai";
 import useSignOut from "@/_hooks/useSignOut";
+import { showConfirmSignOutModalAtom } from "@/_helpers/atoms/Modal.atom";
 
 const ConfirmSignOutModal: React.FC = () => {
   const [show, setShow] = useAtom(showConfirmSignOutModalAtom);

web/app/_components/EmptyChatContainer/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import SelectModels from "../ModelSelector";
+import InputToolbar from "../InputToolbar";
+
+const EmptyChatContainer: React.FC = () => (
+  <div className="flex flex-col flex-1">
+    <div className="flex flex-1 items-center justify-center">
+      <SelectModels />
+    </div>
+    <InputToolbar />
+  </div>
+);
+
+export default EmptyChatContainer;

web/app/_components/ExploreModelItem/index.tsx

@@ -7,8 +7,8 @@ import { Product } from "@/_models/Product";
 import SimpleTag, { TagType } from "../SimpleTag";
 import { displayDate } from "@/_utils/datetime";
 import useDownloadModel from "@/_hooks/useDownloadModel";
-import { modelDownloadStateAtom } from "@/_helpers/JotaiWrapper";
 import { atom, useAtomValue } from "jotai";
+import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
 
 type Props = {
   model: Product;

web/app/_components/HamburgerButton/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
+import { showingMobilePaneAtom } from "@/_helpers/atoms/Modal.atom";
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { useSetAtom } from "jotai";
 import React from "react";

web/app/_components/HistoryItem/index.tsx

@@ -1,18 +1,20 @@
 import React from "react";
 import JanImage from "../JanImage";
-import {
-  MainViewState,
-  conversationStatesAtom,
-  currentProductAtom,
-  getActiveConvoIdAtom,
-  setActiveConvoIdAtom,
-  setMainViewStateAtom,
-} from "@/_helpers/JotaiWrapper";
 import { useAtomValue, useSetAtom } from "jotai";
 import Image from "next/image";
 import { Conversation } from "@/_models/Conversation";
-import { DataService, InfereceService } from "../../../shared/coreService";
+import { DataService } from "../../../shared/coreService";
 import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
+import {
+  conversationStatesAtom,
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+} from "@/_helpers/atoms/Conversation.atom";
+import {
+  setMainViewStateAtom,
+  MainViewState,
+} from "@/_helpers/atoms/MainView.atom";
+import useInitModel from "@/_hooks/useInitModel";
 
 type Props = {
   conversation: Conversation;
@@ -33,7 +35,7 @@ const HistoryItem: React.FC<Props> = ({
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
   const isSelected = activeConvoId === conversation.id;
 
-  const setActiveProduct = useSetAtom(currentProductAtom);
+  const { initModel } = useInitModel();
 
   const onClick = async () => {
     const model = await executeSerial(
@@ -45,10 +47,7 @@ const HistoryItem: React.FC<Props> = ({
         `Model ${conversation.model_id} not found! Please re-download the model first.`
       );
     } else {
-      setActiveProduct(model);
+      initModel(model);
-      executeSerial(InfereceService.INIT_MODEL, model)
-        .then(() => console.info(`Init model success`))
-        .catch((err) => console.log(`Init model error ${err}`));
     }
     if (activeConvoId !== conversation.id) {
       setMainViewState(MainViewState.Conversation);

web/app/_components/HistoryList/index.tsx

@@ -2,9 +2,10 @@ import HistoryItem from "../HistoryItem";
 import { useEffect, useState } from "react";
 import ExpandableHeader from "../ExpandableHeader";
 import { useAtomValue } from "jotai";
-import { searchAtom, userConversationsAtom } from "@/_helpers/JotaiWrapper";
+import { searchAtom } from "@/_helpers/JotaiWrapper";
 import useGetUserConversations from "@/_hooks/useGetUserConversations";
 import SidebarEmptyHistory from "../SidebarEmptyHistory";
+import { userConversationsAtom } from "@/_helpers/atoms/Conversation.atom";
 
 const HistoryList: React.FC = () => {
   const conversations = useAtomValue(userConversationsAtom);

web/app/_components/InputToolbar/index.tsx

@@ -2,8 +2,8 @@
 
 import BasicPromptInput from "../BasicPromptInput";
 import BasicPromptAccessories from "../BasicPromptAccessories";
-import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
+import { showingAdvancedPromptAtom } from "@/_helpers/atoms/Modal.atom";
 
 const InputToolbar: React.FC = () => {
   const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom);

web/app/_components/JanLogo/index.tsx

@@ -1,4 +1,4 @@
-import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
+import { setActiveConvoIdAtom } from "@/_helpers/atoms/Conversation.atom";
 import { useSetAtom } from "jotai";
 import Image from "next/image";
 import React from "react";

web/app/_components/LeftContainer/index.tsx

@@ -3,14 +3,12 @@ import SidebarFooter from "../SidebarFooter";
 import SidebarHeader from "../SidebarHeader";
 import SidebarMenu from "../SidebarMenu";
 import HistoryList from "../HistoryList";
-import SecondaryButton from "../SecondaryButton";
+import NewChatButton from "../NewChatButton";
 
 const LeftContainer: React.FC = () => (
   <div className="w-[323px] flex-shrink-0 p-3 h-screen border-r border-gray-200 flex flex-col">
     <SidebarHeader />
-    <div className="h-5" />
+    <NewChatButton />
-    <SecondaryButton title={"New Chat"} onClick={() => {}} />
-    <div className="h-6" />
     <HistoryList />
     <SidebarMenu />
     <SidebarFooter />

web/app/_components/MenuHeader/index.tsx

@@ -3,7 +3,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { Fragment } from "react";
 // import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
 import { useSetAtom } from "jotai";
-import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
+import { showConfirmSignOutModalAtom } from "@/_helpers/atoms/Modal.atom";
 
 export const MenuHeader: React.FC = () => {
   const setShowConfirmSignOutModal = useSetAtom(showConfirmSignOutModalAtom);

web/app/_components/MobileMenuPane/index.tsx

@@ -2,8 +2,8 @@ import React, { useRef } from "react";
 import { Dialog } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
 import { useAtom } from "jotai";
+import { showingMobilePaneAtom } from "@/_helpers/atoms/Modal.atom";
 
 const MobileMenuPane: React.FC = () => {
   const [show, setShow] = useAtom(showingMobilePaneAtom);

web/app/_components/ModelMenu/index.tsx

@@ -1,12 +1,10 @@
 "use client";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import {
-  currentProductAtom,
-  showConfirmDeleteConversationModalAtom,
-} from "@/_helpers/JotaiWrapper";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 import useCreateConversation from "@/_hooks/useCreateConversation";
+import { showConfirmDeleteConversationModalAtom } from "@/_helpers/atoms/Modal.atom";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
 
 const ModelMenu: React.FC = () => {
   const currentProduct = useAtomValue(currentProductAtom);

web/app/_components/ModelRow/index.tsx

@@ -4,10 +4,10 @@ import Image from "next/image";
 import { ModelStatus, ModelStatusComponent } from "../ModelStatusComponent";
 import ModelActionMenu from "../ModelActionMenu";
 import { useAtomValue } from "jotai";
-import { currentProductAtom } from "@/_helpers/JotaiWrapper";
 import ModelActionButton, { ModelActionType } from "../ModelActionButton";
 import useStartStopModel from "@/_hooks/useStartStopModel";
 import useDeleteModel from "@/_hooks/useDeleteModel";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
 
 type Props = {
   model: Product;

web/app/_components/ModelSelector/index.tsx

@@ -0,0 +1,118 @@
+import { Fragment, useEffect } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
+import { Product } from "@/_models/Product";
+import { useAtom } from "jotai";
+import { selectedModelAtom } from "@/_helpers/atoms/Model.atom";
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const SelectModels: React.FC = () => {
+  const { downloadedModels } = useGetDownloadedModels();
+  const [selectedModel, setSelectedModel] = useAtom(selectedModelAtom);
+
+  useEffect(() => {
+    if (downloadedModels && downloadedModels.length > 0) {
+      onModelSelected(downloadedModels[0]);
+    }
+  }, [downloadedModels]);
+
+  const onModelSelected = (model: Product) => {
+    setSelectedModel(model);
+  };
+
+  if (!selectedModel) {
+    return <div>You have not downloaded any model!</div>;
+  }
+
+  return (
+    <Listbox value={selectedModel} onChange={onModelSelected}>
+      {({ open }) => (
+        <div className="w-[461px]">
+          <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">
+            Select a Model:
+          </Listbox.Label>
+          <div className="relative mt-[19px]">
+            <Listbox.Button className="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6">
+              <span className="flex items-center">
+                <img
+                  src={selectedModel.avatarUrl}
+                  alt=""
+                  className="h-5 w-5 flex-shrink-0 rounded-full"
+                />
+                <span className="ml-3 block truncate">
+                  {selectedModel.name}
+                </span>
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
+              </span>
+            </Listbox.Button>
+
+            <Transition
+              show={open}
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Listbox.Options className="absolute z-10 mt-1 max-h-[188px] w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                {downloadedModels.map((model) => (
+                  <Listbox.Option
+                    key={model.id}
+                    className={({ active }) =>
+                      classNames(
+                        active ? "bg-indigo-600 text-white" : "text-gray-900",
+                        "relative cursor-default select-none py-2 pl-3 pr-9"
+                      )
+                    }
+                    value={model}
+                  >
+                    {({ selected, active }) => (
+                      <>
+                        <div className="flex items-center">
+                          <img
+                            src={model.avatarUrl}
+                            alt=""
+                            className="h-5 w-5 flex-shrink-0 rounded-full"
+                          />
+                          <span
+                            className={classNames(
+                              selected ? "font-semibold" : "font-normal",
+                              "ml-3 block truncate"
+                            )}
+                          >
+                            {model.name}
+                          </span>
+                        </div>
+
+                        {selected ? (
+                          <span
+                            className={classNames(
+                              active ? "text-white" : "text-indigo-600",
+                              "absolute inset-y-0 right-0 flex items-center pr-4"
+                            )}
+                          >
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        </div>
+      )}
+    </Listbox>
+  );
+};
+
+export default SelectModels;

web/app/_components/MonitorBar/index.tsx

@@ -1,14 +1,12 @@
 import ProgressBar from "../ProgressBar";
 import SystemItem from "../SystemItem";
 import { useAtomValue } from "jotai";
-import {
+import { appDownloadProgress } from "@/_helpers/JotaiWrapper";
-  appDownloadProgress,
-  currentProductAtom,
-  getSystemBarVisibilityAtom,
-} from "@/_helpers/JotaiWrapper";
 import { useEffect, useState } from "react";
 import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
 import { SystemMonitoringService } from "../../../shared/coreService";
+import { getSystemBarVisibilityAtom } from "@/_helpers/atoms/SystemBar.atom";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
 
 const MonitorBar: React.FC = () => {
   const show = useAtomValue(getSystemBarVisibilityAtom);

web/app/_components/NewChatButton/index.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import SecondaryButton from "../SecondaryButton";
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+  MainViewState,
+  setMainViewStateAtom,
+} from "@/_helpers/atoms/MainView.atom";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
+import useCreateConversation from "@/_hooks/useCreateConversation";
+import useInitModel from "@/_hooks/useInitModel";
+import { Product } from "@/_models/Product";
+
+const NewChatButton: React.FC = () => {
+  const activeModel = useAtomValue(currentProductAtom);
+  const setMainView = useSetAtom(setMainViewStateAtom);
+  const { requestCreateConvo } = useCreateConversation();
+  const { initModel } = useInitModel();
+
+  const onClick = () => {
+    if (!activeModel) {
+      setMainView(MainViewState.ConversationEmptyModel);
+    } else {
+      createConversationAndInitModel(activeModel);
+    }
+  };
+
+  const createConversationAndInitModel = async (model: Product) => {
+    await requestCreateConvo(model);
+    await initModel(model);
+  };
+
+  return (
+    <SecondaryButton title={"New Chat"} onClick={onClick} className="my-5" />
+  );
+};
+
+export default NewChatButton;

web/app/_components/SecondaryButton/index.tsx

@@ -2,14 +2,20 @@ type Props = {
   title: string;
   onClick: () => void;
   disabled?: boolean;
+  className?: string;
 };
 
-const SecondaryButton: React.FC<Props> = ({ title, onClick, disabled }) => (
+const SecondaryButton: React.FC<Props> = ({
+  title,
+  onClick,
+  disabled,
+  className,
+}) => (
   <button
     disabled={disabled}
     type="button"
     onClick={onClick}
-    className="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+    className={`rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 ${className}`}
   >
     {title}
   </button>

web/app/_components/SendButton/index.tsx

@@ -1,7 +1,5 @@
-import {
+import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
-  currentConvoStateAtom,
+import { currentConvoStateAtom } from "@/_helpers/atoms/Conversation.atom";
-  currentPromptAtom,
-} from "@/_helpers/JotaiWrapper";
 import useSendChatMessage from "@/_hooks/useSendChatMessage";
 import { useAtom, useAtomValue } from "jotai";
 import Image from "next/image";

web/app/_components/SidebarButton/index.tsx

@@ -1,24 +0,0 @@
-import Image from "next/image";
-
-type Props = {
-  callback?: () => void;
-  className?: string;
-  icon: string;
-  width: number;
-  height: number;
-  title: string;
-};
-
-export const SidebarButton: React.FC<Props> = ({
-  callback,
-  height,
-  icon,
-  className,
-  width,
-  title,
-}) => (
-  <button onClick={callback} className={className}>
-    <Image src={icon} width={width} height={height} alt="" />
-    <span>{title}</span>
-  </button>
-);

web/app/_components/SidebarEmptyHistory/index.tsx

@@ -1,28 +1,56 @@
 import Image from "next/image";
-import { SidebarButton } from "../SidebarButton";
-import { executeSerial } from "../../../../electron/core/plugin-manager/execution/extension-manager";
-import { DataService } from "../../../shared/coreService";
 import useCreateConversation from "@/_hooks/useCreateConversation";
+import PrimaryButton from "../PrimaryButton";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useGetDownloadedModels } from "@/_hooks/useGetDownloadedModels";
+import { useEffect, useState } from "react";
+import {
+  MainViewState,
+  setMainViewStateAtom,
+} from "@/_helpers/atoms/MainView.atom";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
+import useInitModel from "@/_hooks/useInitModel";
+import { Product } from "@/_models/Product";
+
+enum ActionButton {
+  DownloadModel = "Download a Model",
+  StartChat = "Start a Conversation",
+}
 
 const SidebarEmptyHistory: React.FC = () => {
+  const { downloadedModels } = useGetDownloadedModels();
+  const activeModel = useAtomValue(currentProductAtom);
+  const setMainView = useSetAtom(setMainViewStateAtom);
   const { requestCreateConvo } = useCreateConversation();
-  const startChat = async () => {
+  const [action, setAction] = useState(ActionButton.DownloadModel);
-    // Host
+
-    if (window && !window.electronAPI) {
+  const { initModel } = useInitModel();
-      // requestCreateConvo(); // TODO: get model id from somewhere
+
-    }
+  useEffect(() => {
-    // Electron
+    if (downloadedModels.length > 0) {
-    const downloadedModels = await executeSerial(
+      setAction(ActionButton.StartChat);
-      DataService.GET_FINISHED_DOWNLOAD_MODELS
-    );
-    if (!downloadedModels || downloadedModels?.length === 0) {
-      alert(
-        "Seems like there is no model downloaded yet. Please download a model first."
-      );
     } else {
-      requestCreateConvo(downloadedModels[0]);
+      setAction(ActionButton.DownloadModel);
+    }
+  }, [downloadedModels]);
+
+  const onClick = () => {
+    if (action === ActionButton.DownloadModel) {
+      setMainView(MainViewState.ExploreModel);
+    } else {
+      if (!activeModel) {
+        setMainView(MainViewState.ConversationEmptyModel);
+      } else {
+        createConversationAndInitModel(activeModel);
+      }
     }
   };
+
+  const createConversationAndInitModel = async (model: Product) => {
+    await requestCreateConvo(model);
+    await initModel(model);
+  };
+
   return (
     <div className="flex flex-col items-center py-10 gap-3">
       <Image
@@ -32,22 +60,11 @@ const SidebarEmptyHistory: React.FC = () => {
         alt=""
       />
       <div className="flex flex-col items-center gap-6">
-        <div>
+        <div className="text-center text-gray-900 text-sm">No Chat History</div>
-          <div className="text-center text-gray-900 text-sm">
-            No Chat History
-          </div>
         <div className="text-center text-gray-500 text-sm">
           Get started by creating a new chat.
         </div>
-        </div>
+        <PrimaryButton title={action} onClick={onClick} />
-        <SidebarButton
-          callback={startChat}
-          className="flex items-center border bg-blue-600 rounded-lg py-[9px] pl-[15px] pr-[17px] gap-2 text-white font-medium text-sm"
-          height={14}
-          icon="icons/Icon_plus.svg"
-          title="New chat"
-          width={14}
-        />
       </div>
     </div>
   );

web/app/_components/SidebarFooter/index.tsx

@@ -1,27 +1,21 @@
 import React from "react";
-import { SidebarButton } from "../SidebarButton";
+import SecondaryButton from "../SecondaryButton";
 
 const SidebarFooter: React.FC = () => (
   <div className="flex justify-between items-center gap-2">
-    <SidebarButton
+    <SecondaryButton
-      className="flex items-center border border-gray-200 rounded-lg p-2 gap-3 flex-1 justify-center text-gray-900 font-medium text-sm"
+      title={"Discord"}
-      height={24}
+      onClick={() =>
-      icon="icons/discord.svg"
+        window.electronAPI?.openExternalUrl("https://discord.gg/AsJ8krTT3N")
-      title="Discord"
+      }
-      width={24}
+      className="flex-1"
-      callback={() => {
-        window.electronAPI?.openExternalUrl("https://discord.gg/AsJ8krTT3N");
-      }}
     />
-    <SidebarButton
+    <SecondaryButton
-      className="flex items-center border border-gray-200 rounded-lg p-2 gap-3 flex-1 justify-center text-gray-900 font-medium text-sm"
+      title={"Discord"}
-      height={24}
+      onClick={() =>
-      icon="icons/unicorn_twitter.svg"
+        window.electronAPI?.openExternalUrl("https://twitter.com/jan_dotai")
-      title="Twitter"
+      }
-      width={24}
+      className="flex-1"
-      callback={() => {
-        window.electronAPI?.openExternalUrl("https://twitter.com/jan_dotai");
-      }}
     />
   </div>
 );

web/app/_components/SidebarMenu/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { MainViewState } from "@/_helpers/JotaiWrapper";
 import SidebarMenuItem from "../SidebarMenuItem";
+import { MainViewState } from "@/_helpers/atoms/MainView.atom";
 
 const menu = [
   {

web/app/_components/SidebarMenuItem/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import Image from "next/image";
 import {
   MainViewState,
   getMainViewStateAtom,
   setMainViewStateAtom,
-} from "@/_helpers/JotaiWrapper";
+} from "@/_helpers/atoms/MainView.atom";
-import { useAtomValue, useSetAtom } from "jotai";
-import Image from "next/image";
 
 type Props = {
   title: string;

web/app/_components/StreamTextMessage/index.tsx

@@ -4,7 +4,7 @@ import { TextCode } from "../TextCode";
 import { getMessageCode } from "@/_utils/message";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
-import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
+import { currentStreamingMessageAtom } from "@/_helpers/atoms/ChatMessage.atom";
 
 type Props = {
   id: string;

web/app/_components/UserToolbar/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { currentConversationAtom } from "@/_helpers/JotaiWrapper";
+import { currentConversationAtom } from "@/_helpers/atoms/Conversation.atom";
 import { useAtomValue } from "jotai";
 import Image from "next/image";
 

web/app/_components/WelcomeContainer/index.tsx

@@ -1,7 +1,10 @@
 import Image from "next/image";
-import { SidebarButton } from "../SidebarButton";
 import { useSetAtom } from "jotai";
-import { MainViewState, setMainViewStateAtom } from "@/_helpers/JotaiWrapper";
+import {
+  setMainViewStateAtom,
+  MainViewState,
+} from "@/_helpers/atoms/MainView.atom";
+import SecondaryButton from "../SecondaryButton";
 
 const Welcome: React.FC = () => {
   const setMainViewState = useSetAtom(setMainViewStateAtom);
@@ -15,13 +18,9 @@ const Welcome: React.FC = () => {
           <br />
           let’s download your first model
         </span>
-        <SidebarButton
+        <SecondaryButton
-          callback={() => setMainViewState(MainViewState.ExploreModel)}
+          title={"Explore models"}
-          className="flex flex-row-reverse items-center rounded-lg gap-2 px-3 py-2 text-xs font-medium border border-gray-200"
+          onClick={() => setMainViewState(MainViewState.ExploreModel)}
-          icon={"icons/app_icon.svg"}
-          title="Explore models"
-          height={16}
-          width={16}
         />
       </div>
     </div>

web/app/_helpers/EventListenerWrapper.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useAtom, useSetAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import { ReactNode, useEffect } from "react";
-import {
+import { appDownloadProgress } from "./JotaiWrapper";
-  appDownloadProgress,
-  setDownloadStateAtom,
-  setDownloadStateSuccessAtom,
-} from "./JotaiWrapper";
 import { DownloadState } from "@/_models/DownloadState";
 import { execute } from "../../../electron/core/plugin-manager/execution/extension-manager";
 import { DataService } from "../../shared/coreService";
+import {
+  setDownloadStateAtom,
+  setDownloadStateSuccessAtom,
+} from "./atoms/DownloadState.atom";
 
 type Props = {
   children: ReactNode;

web/app/_helpers/JotaiWrapper.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { ChatMessage, MessageStatus } from "@/_models/ChatMessage";
-import { Conversation, ConversationState } from "@/_models/Conversation";
-import { DownloadState } from "@/_models/DownloadState";
-import { Product } from "@/_models/Product";
 import { Provider, atom } from "jotai";
 import { ReactNode } from "react";
 
@@ -15,286 +11,11 @@ export default function JotaiWrapper({ children }: Props) {
   return <Provider>{children}</Provider>;
 }
 
-const activeConversationIdAtom = atom<string | undefined>(undefined);
-export const getActiveConvoIdAtom = atom((get) =>
-  get(activeConversationIdAtom)
-);
-export const setActiveConvoIdAtom = atom(
-  null,
-  (_get, set, convoId: string | undefined) => {
-    if (convoId) {
-      console.log(`set active convo id to ${convoId}`);
-      set(setMainViewStateAtom, MainViewState.Conversation);
-    }
-    set(activeConversationIdAtom, convoId);
-  }
-);
-
 export const currentPromptAtom = atom<string>("");
 
-export const showingAdvancedPromptAtom = atom<boolean>(false);
-export const showingProductDetailAtom = atom<boolean>(false);
-export const showingMobilePaneAtom = atom<boolean>(false);
 export const showingTyping = atom<boolean>(false);
 
 export const appDownloadProgress = atom<number>(-1);
 export const searchingModelText = atom<string>("");
 
-/**
- * Stores all conversations for the current user
- */
-export const userConversationsAtom = atom<Conversation[]>([]);
-export const currentConversationAtom = atom<Conversation | undefined>((get) =>
-  get(userConversationsAtom).find((c) => c.id === get(activeConversationIdAtom))
-);
-export const setConvoUpdatedAtAtom = atom(null, (get, set, convoId: string) => {
-  const convo = get(userConversationsAtom).find((c) => c.id === convoId);
-  if (!convo) return;
-  const newConvo: Conversation = {
-    ...convo,
-    updated_at: new Date().toISOString(),
-  };
-  const newConversations: Conversation[] = get(userConversationsAtom).map((c) =>
-    c.id === convoId ? newConvo : c
-  );
-
-  set(userConversationsAtom, newConversations);
-});
-
-export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
-  undefined
-);
-
-export const setConvoLastImageAtom = atom(
-  null,
-  (get, set, convoId: string, lastImageUrl: string) => {
-    const convo = get(userConversationsAtom).find((c) => c.id === convoId);
-    if (!convo) return;
-    const newConvo: Conversation = { ...convo };
-    const newConversations: Conversation[] = get(userConversationsAtom).map(
-      (c) => (c.id === convoId ? newConvo : c)
-    );
-
-    set(userConversationsAtom, newConversations);
-  }
-);
-
-/**
- * Stores all conversation states for the current user
- */
-export const conversationStatesAtom = atom<Record<string, ConversationState>>(
-  {}
-);
-export const currentConvoStateAtom = atom<ConversationState | undefined>(
-  (get) => {
-    const activeConvoId = get(activeConversationIdAtom);
-    if (!activeConvoId) {
-      console.log("active convo id is undefined");
-      return undefined;
-    }
-
-    return get(conversationStatesAtom)[activeConvoId];
-  }
-);
-export const addNewConversationStateAtom = atom(
-  null,
-  (get, set, conversationId: string, state: ConversationState) => {
-    const currentState = { ...get(conversationStatesAtom) };
-    currentState[conversationId] = state;
-    set(conversationStatesAtom, currentState);
-  }
-);
-export const updateConversationWaitingForResponseAtom = atom(
-  null,
-  (get, set, conversationId: string, waitingForResponse: boolean) => {
-    const currentState = { ...get(conversationStatesAtom) };
-    currentState[conversationId] = {
-      ...currentState[conversationId],
-      waitingForResponse,
-    };
-    set(conversationStatesAtom, currentState);
-  }
-);
-export const updateConversationHasMoreAtom = atom(
-  null,
-  (get, set, conversationId: string, hasMore: boolean) => {
-    const currentState = { ...get(conversationStatesAtom) };
-    currentState[conversationId] = { ...currentState[conversationId], hasMore };
-    set(conversationStatesAtom, currentState);
-  }
-);
-
-/**
- * Stores all chat messages for all conversations
- */
-export const chatMessages = atom<Record<string, ChatMessage[]>>({});
-export const currentChatMessagesAtom = atom<ChatMessage[]>((get) => {
-  const activeConversationId = get(activeConversationIdAtom);
-  if (!activeConversationId) return [];
-  return get(chatMessages)[activeConversationId] ?? [];
-});
-
-export const addOldMessagesAtom = atom(
-  null,
-  (get, set, newMessages: ChatMessage[]) => {
-    const currentConvoId = get(activeConversationIdAtom);
-    if (!currentConvoId) return;
-
-    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
-    const updatedMessages = [...currentMessages, ...newMessages];
-
-    const newData: Record<string, ChatMessage[]> = {
-      ...get(chatMessages),
-    };
-    newData[currentConvoId] = updatedMessages;
-    set(chatMessages, newData);
-  }
-);
-export const addNewMessageAtom = atom(
-  null,
-  (get, set, newMessage: ChatMessage) => {
-    const currentConvoId = get(activeConversationIdAtom);
-    if (!currentConvoId) return;
-
-    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
-    const updatedMessages = [newMessage, ...currentMessages];
-
-    const newData: Record<string, ChatMessage[]> = {
-      ...get(chatMessages),
-    };
-    newData[currentConvoId] = updatedMessages;
-    set(chatMessages, newData);
-  }
-);
-
-export const deleteConversationMessage = atom(null, (get, set, id: string) => {
-  const newData: Record<string, ChatMessage[]> = {
-    ...get(chatMessages),
-  };
-  newData[id] = [];
-  set(chatMessages, newData);
-});
-
-export const updateMessageAtom = atom(
-  null,
-  (get, set, id: string, conversationId: string, text: string) => {
-    const messages = get(chatMessages)[conversationId] ?? [];
-    const message = messages.find((e) => e.id === id);
-    if (message) {
-      message.text = text;
-      const updatedMessages = [...messages];
-
-      const newData: Record<string, ChatMessage[]> = {
-        ...get(chatMessages),
-      };
-      newData[conversationId] = updatedMessages;
-      set(chatMessages, newData);
-    }
-  }
-);
-/**
- * For updating the status of the last AI message that is pending
- */
-export const updateLastMessageAsReadyAtom = atom(
-  null,
-  (get, set, id, text: string) => {
-    const currentConvoId = get(activeConversationIdAtom);
-    if (!currentConvoId) return;
-
-    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
-    const messageToUpdate = currentMessages.find((e) => e.id === id);
-
-    // if message is not found, do nothing
-    if (!messageToUpdate) return;
-
-    const index = currentMessages.indexOf(messageToUpdate);
-    const updatedMsg: ChatMessage = {
-      ...messageToUpdate,
-      status: MessageStatus.Ready,
-      text: text,
-    };
-
-    currentMessages[index] = updatedMsg;
-    const newData: Record<string, ChatMessage[]> = {
-      ...get(chatMessages),
-    };
-    newData[currentConvoId] = currentMessages;
-    set(chatMessages, newData);
-  }
-);
-
-export const currentProductAtom = atom<Product | undefined>(undefined);
-
 export const searchAtom = atom<string>("");
-
-// modal atoms
-export const showConfirmDeleteConversationModalAtom = atom(false);
-export const showConfirmSignOutModalAtom = atom(false);
-export const showConfirmDeleteModalAtom = atom(false);
-
-export type FileDownloadStates = {
-  [key: string]: DownloadState;
-};
-
-// main view state
-export enum MainViewState {
-  Welcome,
-  ExploreModel,
-  MyModel,
-  ResourceMonitor,
-  Setting,
-  Conversation,
-}
-
-const systemBarVisibilityAtom = atom<boolean>(true);
-export const getSystemBarVisibilityAtom = atom((get) =>
-  get(systemBarVisibilityAtom)
-);
-
-const currentMainViewStateAtom = atom<MainViewState>(MainViewState.Welcome);
-export const getMainViewStateAtom = atom((get) =>
-  get(currentMainViewStateAtom)
-);
-
-export const setMainViewStateAtom = atom(
-  null,
-  (get, set, state: MainViewState) => {
-    if (get(getMainViewStateAtom) === state) return;
-    if (state !== MainViewState.Conversation) {
-      set(activeConversationIdAtom, undefined);
-    }
-    const showSystemBar = state !== MainViewState.Conversation;
-    set(systemBarVisibilityAtom, showSystemBar);
-    set(currentMainViewStateAtom, state);
-  }
-);
-
-// download states
-export const modelDownloadStateAtom = atom<FileDownloadStates>({});
-
-export const setDownloadStateAtom = atom(
-  null,
-  (get, set, state: DownloadState) => {
-    const currentState = { ...get(modelDownloadStateAtom) };
-    console.debug(
-      `current download state for ${state.fileName} is ${JSON.stringify(state)}`
-    );
-    currentState[state.fileName] = state;
-    set(modelDownloadStateAtom, currentState);
-  }
-);
-
-export const setDownloadStateSuccessAtom = atom(
-  null,
-  (get, set, fileName: string) => {
-    const currentState = { ...get(modelDownloadStateAtom) };
-    const state = currentState[fileName];
-    if (!state) {
-      console.error(`Cannot find download state for ${fileName}`);
-      return;
-    }
-
-    delete currentState[fileName];
-    set(modelDownloadStateAtom, currentState);
-  }
-);

web/app/_helpers/atoms/ChatMessage.atom.ts

@@ -0,0 +1,109 @@
+import { ChatMessage, MessageStatus } from "@/_models/ChatMessage";
+import { atom } from "jotai";
+import { getActiveConvoIdAtom } from "./Conversation.atom";
+
+/**
+ * Stores all chat messages for all conversations
+ */
+export const chatMessages = atom<Record<string, ChatMessage[]>>({});
+
+export const currentChatMessagesAtom = atom<ChatMessage[]>((get) => {
+  const activeConversationId = get(getActiveConvoIdAtom);
+  if (!activeConversationId) return [];
+  return get(chatMessages)[activeConversationId] ?? [];
+});
+
+export const addOldMessagesAtom = atom(
+  null,
+  (get, set, newMessages: ChatMessage[]) => {
+    const currentConvoId = get(getActiveConvoIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const updatedMessages = [...currentMessages, ...newMessages];
+
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = updatedMessages;
+    set(chatMessages, newData);
+  }
+);
+
+export const addNewMessageAtom = atom(
+  null,
+  (get, set, newMessage: ChatMessage) => {
+    const currentConvoId = get(getActiveConvoIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const updatedMessages = [newMessage, ...currentMessages];
+
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = updatedMessages;
+    set(chatMessages, newData);
+  }
+);
+
+export const deleteConversationMessage = atom(null, (get, set, id: string) => {
+  const newData: Record<string, ChatMessage[]> = {
+    ...get(chatMessages),
+  };
+  newData[id] = [];
+  set(chatMessages, newData);
+});
+
+export const updateMessageAtom = atom(
+  null,
+  (get, set, id: string, conversationId: string, text: string) => {
+    const messages = get(chatMessages)[conversationId] ?? [];
+    const message = messages.find((e) => e.id === id);
+    if (message) {
+      message.text = text;
+      const updatedMessages = [...messages];
+
+      const newData: Record<string, ChatMessage[]> = {
+        ...get(chatMessages),
+      };
+      newData[conversationId] = updatedMessages;
+      set(chatMessages, newData);
+    }
+  }
+);
+
+/**
+ * For updating the status of the last AI message that is pending
+ */
+export const updateLastMessageAsReadyAtom = atom(
+  null,
+  (get, set, id, text: string) => {
+    const currentConvoId = get(getActiveConvoIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const messageToUpdate = currentMessages.find((e) => e.id === id);
+
+    // if message is not found, do nothing
+    if (!messageToUpdate) return;
+
+    const index = currentMessages.indexOf(messageToUpdate);
+    const updatedMsg: ChatMessage = {
+      ...messageToUpdate,
+      status: MessageStatus.Ready,
+      text: text,
+    };
+
+    currentMessages[index] = updatedMsg;
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = currentMessages;
+    set(chatMessages, newData);
+  }
+);
+
+export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(
+  undefined
+);

web/app/_helpers/atoms/Conversation.atom.ts

@@ -0,0 +1,104 @@
+import { atom } from "jotai";
+import { MainViewState, setMainViewStateAtom } from "./MainView.atom";
+import { Conversation, ConversationState } from "@/_models/Conversation";
+
+/**
+ * Stores the current active conversation id.
+ */
+const activeConversationIdAtom = atom<string | undefined>(undefined);
+
+export const getActiveConvoIdAtom = atom((get) =>
+  get(activeConversationIdAtom)
+);
+
+export const setActiveConvoIdAtom = atom(
+  null,
+  (_get, set, convoId: string | undefined) => {
+    if (convoId) {
+      console.debug(`Set active conversation id: ${convoId}`);
+      set(setMainViewStateAtom, MainViewState.Conversation);
+    }
+
+    set(activeConversationIdAtom, convoId);
+  }
+);
+
+/**
+ * Stores all conversation states for the current user
+ */
+export const conversationStatesAtom = atom<Record<string, ConversationState>>(
+  {}
+);
+export const currentConvoStateAtom = atom<ConversationState | undefined>(
+  (get) => {
+    const activeConvoId = get(activeConversationIdAtom);
+    if (!activeConvoId) {
+      console.log("active convo id is undefined");
+      return undefined;
+    }
+
+    return get(conversationStatesAtom)[activeConvoId];
+  }
+);
+export const addNewConversationStateAtom = atom(
+  null,
+  (get, set, conversationId: string, state: ConversationState) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = state;
+    set(conversationStatesAtom, currentState);
+  }
+);
+export const updateConversationWaitingForResponseAtom = atom(
+  null,
+  (get, set, conversationId: string, waitingForResponse: boolean) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = {
+      ...currentState[conversationId],
+      waitingForResponse,
+    };
+    set(conversationStatesAtom, currentState);
+  }
+);
+export const updateConversationHasMoreAtom = atom(
+  null,
+  (get, set, conversationId: string, hasMore: boolean) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = { ...currentState[conversationId], hasMore };
+    set(conversationStatesAtom, currentState);
+  }
+);
+
+/**
+ * Stores all conversations for the current user
+ */
+export const userConversationsAtom = atom<Conversation[]>([]);
+export const currentConversationAtom = atom<Conversation | undefined>((get) =>
+  get(userConversationsAtom).find((c) => c.id === get(getActiveConvoIdAtom))
+);
+export const setConvoUpdatedAtAtom = atom(null, (get, set, convoId: string) => {
+  const convo = get(userConversationsAtom).find((c) => c.id === convoId);
+  if (!convo) return;
+  const newConvo: Conversation = {
+    ...convo,
+    updated_at: new Date().toISOString(),
+  };
+  const newConversations: Conversation[] = get(userConversationsAtom).map((c) =>
+    c.id === convoId ? newConvo : c
+  );
+
+  set(userConversationsAtom, newConversations);
+});
+
+export const setConvoLastImageAtom = atom(
+  null,
+  (get, set, convoId: string, lastImageUrl: string) => {
+    const convo = get(userConversationsAtom).find((c) => c.id === convoId);
+    if (!convo) return;
+    const newConvo: Conversation = { ...convo };
+    const newConversations: Conversation[] = get(userConversationsAtom).map(
+      (c) => (c.id === convoId ? newConvo : c)
+    );
+
+    set(userConversationsAtom, newConversations);
+  }
+);

web/app/_helpers/atoms/DownloadState.atom.ts

@@ -0,0 +1,32 @@
+import { DownloadState } from "@/_models/DownloadState";
+import { atom } from "jotai";
+
+// download states
+export const modelDownloadStateAtom = atom<Record<string, DownloadState>>({});
+
+export const setDownloadStateAtom = atom(
+  null,
+  (get, set, state: DownloadState) => {
+    const currentState = { ...get(modelDownloadStateAtom) };
+    console.debug(
+      `current download state for ${state.fileName} is ${JSON.stringify(state)}`
+    );
+    currentState[state.fileName] = state;
+    set(modelDownloadStateAtom, currentState);
+  }
+);
+
+export const setDownloadStateSuccessAtom = atom(
+  null,
+  (get, set, fileName: string) => {
+    const currentState = { ...get(modelDownloadStateAtom) };
+    const state = currentState[fileName];
+    if (!state) {
+      console.error(`Cannot find download state for ${fileName}`);
+      return;
+    }
+
+    delete currentState[fileName];
+    set(modelDownloadStateAtom, currentState);
+  }
+);

web/app/_helpers/atoms/MainView.atom.ts

@@ -0,0 +1,54 @@
+import { atom } from "jotai";
+import { setActiveConvoIdAtom } from "./Conversation.atom";
+import { systemBarVisibilityAtom } from "./SystemBar.atom";
+
+export enum MainViewState {
+  Welcome,
+  ExploreModel,
+  MyModel,
+  ResourceMonitor,
+  Setting,
+  Conversation,
+
+  /**
+   * When user wants to create new conversation but haven't selected a model yet.
+   */
+  ConversationEmptyModel,
+}
+
+/**
+ * Stores the current main view state. Default is Welcome.
+ */
+const currentMainViewStateAtom = atom<MainViewState>(MainViewState.Welcome);
+
+/**
+ * Getter for current main view state.
+ */
+export const getMainViewStateAtom = atom((get) =>
+  get(currentMainViewStateAtom)
+);
+
+/**
+ * Setter for current main view state.
+ */
+export const setMainViewStateAtom = atom(
+  null,
+  (get, set, state: MainViewState) => {
+    // return if the state is already set
+    if (get(getMainViewStateAtom) === state) return;
+
+    if (state !== MainViewState.Conversation) {
+      // clear active conversation id if main view state is not Conversation
+      set(setActiveConvoIdAtom, undefined);
+    }
+
+    const showSystemBar =
+      state !== MainViewState.Conversation &&
+      state !== MainViewState.ConversationEmptyModel;
+
+    // show system bar if state is not Conversation nor ConversationEmptyModel
+    set(systemBarVisibilityAtom, showSystemBar);
+
+    set(currentMainViewStateAtom, state);
+  }
+);

web/app/_helpers/atoms/Modal.atom.ts

@@ -0,0 +1,8 @@
+import { atom } from "jotai";
+
+export const showConfirmDeleteConversationModalAtom = atom(false);
+export const showConfirmSignOutModalAtom = atom(false);
+export const showConfirmDeleteModalAtom = atom(false);
+export const showingAdvancedPromptAtom = atom<boolean>(false);
+export const showingProductDetailAtom = atom<boolean>(false);
+export const showingMobilePaneAtom = atom<boolean>(false);

web/app/_helpers/atoms/Model.atom.ts

@@ -0,0 +1,6 @@
+import { Product } from "@/_models/Product";
+import { atom } from "jotai";
+
+export const currentProductAtom = atom<Product | undefined>(undefined);
+
+export const selectedModelAtom = atom<Product | undefined>(undefined);

web/app/_helpers/atoms/SystemBar.atom.ts

@@ -0,0 +1,7 @@
+import { atom } from "jotai";
+
+export const systemBarVisibilityAtom = atom<boolean>(true);
+
+export const getSystemBarVisibilityAtom = atom((get) =>
+  get(systemBarVisibilityAtom)
+);

web/app/_hooks/useChatMessages.ts

@@ -1,14 +1,14 @@
-import {
-  addOldMessagesAtom,
-  conversationStatesAtom,
-  currentConversationAtom,
-  updateConversationHasMoreAtom,
-} from "@/_helpers/JotaiWrapper";
 import { ChatMessage, RawMessage, toChatMessage } from "@/_models/ChatMessage";
 import { executeSerial } from "@/_services/pluginService";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { DataService } from "../../shared/coreService";
+import { addOldMessagesAtom } from "@/_helpers/atoms/ChatMessage.atom";
+import {
+  currentConversationAtom,
+  conversationStatesAtom,
+  updateConversationHasMoreAtom,
+} from "@/_helpers/atoms/Conversation.atom";
 
 /**
  * Custom hooks to get chat messages for current(active) conversation

web/app/_hooks/useCreateConversation.ts

@@ -1,23 +1,22 @@
-// import useGetCurrentUser from "./useGetCurrentUser";
 import { useAtom, useSetAtom } from "jotai";
-import {
-  addNewConversationStateAtom,
-  currentProductAtom,
-  setActiveConvoIdAtom,
-  userConversationsAtom,
-} from "@/_helpers/JotaiWrapper";
 import { Conversation } from "@/_models/Conversation";
 import { executeSerial } from "@/_services/pluginService";
-import { DataService, InfereceService } from "../../shared/coreService";
+import { DataService } from "../../shared/coreService";
 import { Product } from "@/_models/Product";
+import {
+  userConversationsAtom,
+  setActiveConvoIdAtom,
+  addNewConversationStateAtom,
+} from "@/_helpers/atoms/Conversation.atom";
+import useInitModel from "./useInitModel";
 
 const useCreateConversation = () => {
+  const { initModel } = useInitModel();
   const [userConversations, setUserConversations] = useAtom(
     userConversationsAtom
   );
   const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
   const addNewConvoState = useSetAtom(addNewConversationStateAtom);
-  const setActiveProduct = useSetAtom(currentProductAtom);
 
   const requestCreateConvo = async (model: Product) => {
     const conv: Conversation = {
@@ -28,8 +27,7 @@ const useCreateConversation = () => {
       name: "Conversation",
     };
     const id = await executeSerial(DataService.CREATE_CONVERSATION, conv);
-    await executeSerial(InfereceService.INIT_MODEL, model);
+    await initModel(model);
-    setActiveProduct(model);
 
     const mappedConvo: Conversation = {
       id,

web/app/_hooks/useDeleteConversation.ts

@@ -1,15 +1,17 @@
-import {
+import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
-  currentPromptAtom,
-  deleteConversationMessage,
-  getActiveConvoIdAtom,
-  setActiveConvoIdAtom,
-  showingAdvancedPromptAtom,
-  showingProductDetailAtom,
-  userConversationsAtom,
-} from "@/_helpers/JotaiWrapper";
 import { execute } from "@/_services/pluginService";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { DataService } from "../../shared/coreService";
+import { deleteConversationMessage } from "@/_helpers/atoms/ChatMessage.atom";
+import {
+  userConversationsAtom,
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+} from "@/_helpers/atoms/Conversation.atom";
+import {
+  showingProductDetailAtom,
+  showingAdvancedPromptAtom,
+} from "@/_helpers/atoms/Modal.atom";
 
 export default function useDeleteConversation() {
   const [userConversations, setUserConversations] = useAtom(

web/app/_hooks/useGetAvailableModels.ts

@@ -3,8 +3,8 @@ import { executeSerial } from "@/_services/pluginService";
 import { ModelManagementService } from "../../shared/coreService";
 import { useEffect, useState } from "react";
 import { getModelFiles } from "./useGetDownloadedModels";
-import { modelDownloadStateAtom } from "@/_helpers/JotaiWrapper";
 import { useAtomValue } from "jotai";
+import { modelDownloadStateAtom } from "@/_helpers/atoms/DownloadState.atom";
 
 export default function useGetAvailableModels() {
   const downloadState = useAtomValue(modelDownloadStateAtom);

web/app/_hooks/useGetUserConversations.ts

@@ -1,11 +1,11 @@
 import { Conversation, ConversationState } from "@/_models/Conversation";
 import { useSetAtom } from "jotai";
+import { executeSerial } from "@/_services/pluginService";
+import { DataService } from "../../shared/coreService";
 import {
   conversationStatesAtom,
   userConversationsAtom,
-} from "@/_helpers/JotaiWrapper";
+} from "@/_helpers/atoms/Conversation.atom";
-import { executeSerial } from "@/_services/pluginService";
-import { DataService } from "../../shared/coreService";
 
 const useGetUserConversations = () => {
   const setConversationStates = useSetAtom(conversationStatesAtom);

web/app/_hooks/useInitModel.ts

@@ -0,0 +1,25 @@
+import { Product } from "@/_models/Product";
+import { executeSerial } from "@/_services/pluginService";
+import { InfereceService } from "../../shared/coreService";
+import { useAtom } from "jotai";
+import { currentProductAtom } from "@/_helpers/atoms/Model.atom";
+
+export default function useInitModel() {
+  const [activeModel, setActiveModel] = useAtom(currentProductAtom);
+
+  const initModel = async (model: Product) => {
+    if (activeModel && activeModel.id === model.id) {
+      console.debug(`Model ${model.id} is already init. Ignore..`);
+      return;
+    }
+    try {
+      await executeSerial(InfereceService.INIT_MODEL, model);
+      console.debug(`Init model ${model.name} successfully!`);
+      setActiveModel(model);
+    } catch (err) {
+      console.error(`Init model ${model.name} failed: ${err}`);
+    }
+  };
+
+  return { initModel };
+}

web/app/_hooks/useSendChatMessage.ts

@@ -1,14 +1,4 @@
-import {
+import { currentPromptAtom, showingTyping } from "@/_helpers/JotaiWrapper";
-  addNewMessageAtom,
-  chatMessages,
-  currentConversationAtom,
-  currentPromptAtom,
-  currentStreamingMessageAtom,
-  getActiveConvoIdAtom,
-  showingTyping,
-  updateMessageAtom,
-} from "@/_helpers/JotaiWrapper";
-
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { selectAtom } from "jotai/utils";
 import { DataService, InfereceService } from "../../shared/coreService";
@@ -19,6 +9,16 @@ import {
 } from "@/_models/ChatMessage";
 import { executeSerial } from "@/_services/pluginService";
 import { useCallback } from "react";
+import {
+  addNewMessageAtom,
+  updateMessageAtom,
+  chatMessages,
+  currentStreamingMessageAtom,
+} from "@/_helpers/atoms/ChatMessage.atom";
+import {
+  currentConversationAtom,
+  getActiveConvoIdAtom,
+} from "@/_helpers/atoms/Conversation.atom";
 
 export default function useSendChatMessage() {
   const currentConvo = useAtomValue(currentConversationAtom);
@@ -50,9 +50,9 @@ export default function useSendChatMessage() {
 
     const newChatMessage = await toChatMessage(newMessage);
     addNewMessage(newChatMessage);
-
+    const messageHistory = chatMessagesHistory ?? [];
     const recentMessages = [
-      ...chatMessagesHistory.sort((a, b) => parseInt(a.id) - parseInt(b.id)),
+      ...messageHistory.sort((a, b) => parseInt(a.id) - parseInt(b.id)),
       newChatMessage,
     ]
       .slice(-10)

web/app/_hooks/useStartStopModel.ts

@@ -1,20 +1,16 @@
-import { currentProductAtom } from "@/_helpers/JotaiWrapper";
 import { executeSerial } from "@/_services/pluginService";
-import { DataService, InfereceService } from "../../shared/coreService";
+import { DataService } from "../../shared/coreService";
-import { useSetAtom } from "jotai";
+import useInitModel from "./useInitModel";
 
 export default function useStartStopModel() {
-  const setActiveModel = useSetAtom(currentProductAtom);
+  const { initModel } = useInitModel();
 
   const startModel = async (modelId: string) => {
     const model = await executeSerial(DataService.GET_MODEL_BY_ID, modelId);
     if (!model) {
       alert(`Model ${modelId} not found! Please re-download the model first.`);
     } else {
-      setActiveModel(model);
+      await initModel(model);
-      executeSerial(InfereceService.INIT_MODEL, model)
-        .then(() => console.info(`Init model success`))
-        .catch((err) => console.log(`Init model error ${err}`));
     }
   };