Merge pull request #499 from janhq/feat/new-conversation

feat: add New Conversation button on the conversation sidebar

web/app/_components/HistoryList/index.tsx

@@ -15,32 +15,33 @@ const HistoryList: React.FC = () => {
 
   useEffect(() => {
     getUserConversations()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
-    <div className="flex flex-grow flex-col gap-2">
+    <div className="flex flex-grow flex-col gap-2 px-4 pb-4">
       <ExpandableHeader title="CHAT HISTORY" />
-      <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
-        {conversations.length > 0 ? (
-          conversations
+      {conversations.length > 0 ? (
+        <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
+          {conversations
             .filter(
               (e) =>
                 searchText.trim() === '' ||
                 e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
             )
-            .map((convo) => (
+            .map((convo, i) => (
               <HistoryItem
-                key={convo._id}
+                key={i}
                 conversation={convo}
                 summary={convo.summary}
                 name={convo.name || 'Jan'}
                 updatedAt={convo.updatedAt ?? ''}
               />
-            ))
-        ) : (
-          <SidebarEmptyHistory />
-        )}
-      </ul>
+            ))}
+        </ul>
+      ) : (
+        <SidebarEmptyHistory />
+      )}
     </div>
   )
 }

web/app/_components/InputToolbar/index.tsx

@@ -43,15 +43,7 @@ const InputToolbar: React.FC = () => {
   }
 
   if (!activeConvoId) {
-    return (
-      <div className="my-3 flex justify-center gap-2">
-        <SecondaryButton
-          onClick={onNewConversationClick}
-          title="New Conversation"
-          icon={<PlusIcon width={16} height={16} />}
-        />
-      </div>
-    )
+    return null
   }
   if (
     (activeConvoId && inputState === 'model-mismatch') ||
@@ -94,13 +86,13 @@ const InputToolbar: React.FC = () => {
             </span>
           </div>
         )}
-        <div className="my-3 flex justify-center gap-2">
+        {/* <div className="my-3 flex justify-center gap-2">
           <SecondaryButton
             onClick={onNewConversationClick}
             title="New Conversation"
             icon={<PlusIcon width={16} height={16} />}
           />
-        </div>
+        </div> */}
         {/* My text input */}
         <div className="mb-5 flex items-start space-x-4">
           <div className="relative min-w-0 flex-1">

web/app/_components/LeftHeaderAction/index.tsx

@@ -2,22 +2,37 @@
 
 import React from 'react'
 import SecondaryButton from '../SecondaryButton'
-import { useSetAtom } from 'jotai'
+import { useSetAtom, useAtomValue } from 'jotai'
 import {
   MainViewState,
   setMainViewStateAtom,
 } from '@helpers/atoms/MainView.atom'
 import { MagnifyingGlassIcon, PlusIcon } from '@heroicons/react/24/outline'
+import useCreateConversation from '@hooks/useCreateConversation'
 import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
+import { Button } from '@uikit'
+import { activeAssistantModelAtom } from '@helpers/atoms/Model.atom'
+import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
 
 const LeftHeaderAction: React.FC = () => {
   const setMainView = useSetAtom(setMainViewStateAtom)
   const { downloadedModels } = useGetDownloadedModels()
+  const activeModel = useAtomValue(activeAssistantModelAtom)
+  const { requestCreateConvo } = useCreateConversation()
+  const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
 
   const onExploreClick = () => {
     setMainView(MainViewState.ExploreModel)
   }
 
+  const onNewConversationClick = () => {
+    if (activeModel) {
+      requestCreateConvo(activeModel)
+    } else {
+      setShowModalNoActiveModel(true)
+    }
+  }
+
   const onCreateBotClicked = () => {
     if (downloadedModels.length === 0) {
       alert('You need to download at least one model to create a bot.')
@@ -27,19 +42,28 @@ const LeftHeaderAction: React.FC = () => {
   }
 
   return (
-    <div className="sticky top-0 mb-4 flex flex-row gap-2">
-      <SecondaryButton
-        title={'Explore'}
-        onClick={onExploreClick}
-        className="flex-1"
-        icon={<MagnifyingGlassIcon width={16} height={16} />}
-      />
-      <SecondaryButton
-        title={'Create bot'}
-        onClick={onCreateBotClicked}
-        className="flex-1"
-        icon={<PlusIcon width={16} height={16} />}
-      />
+    <div className="sticky top-0 mb-4 bg-background/90 p-4">
+      <div className="flex flex-row gap-2">
+        <SecondaryButton
+          title={'Explore'}
+          onClick={onExploreClick}
+          className="w-full flex-1"
+          icon={<MagnifyingGlassIcon width={16} height={16} />}
+        />
+        <SecondaryButton
+          title={'Create bot'}
+          onClick={onCreateBotClicked}
+          className="w-full flex-1"
+          icon={<PlusIcon width={16} height={16} />}
+        />
+      </div>
+      <Button
+        onClick={onNewConversationClick}
+        className="mt-2 flex w-full items-center space-x-2"
+      >
+        <PlusIcon width={16} height={16} />
+        <span>New Conversation</span>
+      </Button>
     </div>
   )
 }

web/app/_components/SecondaryButton/index.tsx

@@ -16,7 +16,13 @@ const SecondaryButton: React.FC<Props> = ({
   className,
   icon,
 }) => (
-  <Button size="sm" disabled={disabled} type="button" onClick={onClick}>
+  <Button
+    size="sm"
+    disabled={disabled}
+    type="button"
+    onClick={onClick}
+    className={className}
+  >
     {icon}&nbsp;
     {title}
   </Button>

web/screens/Chat/index.tsx

@@ -10,10 +10,8 @@ const ChatScreen = () => {
   return (
     <div className="flex h-full">
       <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>
+        <LeftHeaderAction />
+        <HistoryList />
       </div>
       <div className="relative flex h-full w-full flex-col bg-background/50">
         <MainHeader />