Add button new conversation in history list

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.length > 0 ? (
+        <Fragment>
-          conversations
+          <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
-            .filter(
+            {conversations
-              (e) =>
+              .filter(
-                searchText.trim() === '' ||
+                (e) =>
-                e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
+                  searchText.trim() === '' ||
-            )
+                  e.name
-            .map((convo) => (
+                    ?.toLowerCase()
-              <HistoryItem
+                    .includes(searchText.toLowerCase().trim())
-                key={convo._id}
+              )
-                conversation={convo}
+              .map((convo, i) => (
-                summary={convo.summary}
+                <HistoryItem
-                name={convo.name || 'Jan'}
+                  key={i}
-                updatedAt={convo.updatedAt ?? ''}
+                  conversation={convo}
-              />
+                  summary={convo.summary}
-            ))
+                  name={convo.name || 'Jan'}
-        ) : (
+                  updatedAt={convo.updatedAt ?? ''}
-          <SidebarEmptyHistory />
+                />
-        )}
+              ))}
-      </ul>
+          </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>
   )
 }