From b7e45dabad4219480e6b237f4dcc16f77287c7f0 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 30 Oct 2023 22:22:27 +0700
Subject: [PATCH] Add button new conversation in history list

---
 web/app/_components/HistoryList/index.tsx | 74 ++++++++++++++++-------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/web/app/_components/HistoryList/index.tsx b/web/app/_components/HistoryList/index.tsx
index 3cbb482f6..3dab9f411 100644
--- a/web/app/_components/HistoryList/index.tsx
+++ b/web/app/_components/HistoryList/index.tsx
@@ -1,46 +1,74 @@
 import HistoryItem from '../HistoryItem'
-import { useEffect } from 'react'
+import { Fragment, useEffect } from 'react'
 import ExpandableHeader from '../ExpandableHeader'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
 import { searchAtom } from '@helpers/JotaiWrapper'
 import useGetUserConversations from '@hooks/useGetUserConversations'
 import SidebarEmptyHistory from '../SidebarEmptyHistory'
 import { userConversationsAtom } from '@helpers/atoms/Conversation.atom'
 import { twMerge } from 'tailwind-merge'
+import { Button } from '@uikit'
+import { activeAssistantModelAtom, stateModel } from '@helpers/atoms/Model.atom'
+import useCreateConversation from '@hooks/useCreateConversation'
+import { showingModalNoActiveModel } from '@helpers/atoms/Modal.atom'
+import { PlusIcon } from '@heroicons/react/24/outline'
 
 const HistoryList: React.FC = () => {
   const conversations = useAtomValue(userConversationsAtom)
   const searchText = useAtomValue(searchAtom)
   const { getUserConversations } = useGetUserConversations()
+  const activeModel = useAtomValue(activeAssistantModelAtom)
+  const { requestCreateConvo } = useCreateConversation()
+  const setShowModalNoActiveModel = useSetAtom(showingModalNoActiveModel)
+
+  const onNewConversationClick = () => {
+    if (activeModel) {
+      requestCreateConvo(activeModel)
+    } else {
+      setShowModalNoActiveModel(true)
+    }
+  }
 
   useEffect(() => {
     getUserConversations()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
     <div className="flex flex-grow flex-col gap-2">
       <ExpandableHeader title="CHAT HISTORY" />
-      <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
-        {conversations.length > 0 ? (
-          conversations
-            .filter(
-              (e) =>
-                searchText.trim() === '' ||
-                e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
-            )
-            .map((convo) => (
-              <HistoryItem
-                key={convo._id}
-                conversation={convo}
-                summary={convo.summary}
-                name={convo.name || 'Jan'}
-                updatedAt={convo.updatedAt ?? ''}
-              />
-            ))
-        ) : (
-          <SidebarEmptyHistory />
-        )}
-      </ul>
+      {conversations.length > 0 ? (
+        <Fragment>
+          <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, i) => (
+                <HistoryItem
+                  key={i}
+                  conversation={convo}
+                  summary={convo.summary}
+                  name={convo.name || 'Jan'}
+                  updatedAt={convo.updatedAt ?? ''}
+                />
+              ))}
+          </ul>
+          <Button
+            onClick={onNewConversationClick}
+            className="mt-2 flex items-center space-x-2"
+          >
+            <PlusIcon width={16} height={16} />
+            <span>New Conversation</span>
+          </Button>
+        </Fragment>
+      ) : (
+        <SidebarEmptyHistory />
+      )}
     </div>
   )
 }