Move new conversation sticky to top

web/app/_components/HistoryList/index.tsx

@@ -1,33 +1,17 @@
 import HistoryItem from '../HistoryItem'
-import { Fragment, useEffect } from 'react'
+import { useEffect } from 'react'
 import ExpandableHeader from '../ExpandableHeader'
-import { useAtomValue, useSetAtom } from 'jotai'
+import { useAtomValue } 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()
@@ -35,37 +19,26 @@ const HistoryList: React.FC = () => {
   }, [])
 
   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" />
       {conversations.length > 0 ? (
-        <Fragment>
+        <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
-          <ul className={twMerge('mt-1 flex flex-col gap-y-3 overflow-y-auto')}>
+          {conversations
-            {conversations
+            .filter(
-              .filter(
+              (e) =>
-                (e) =>
+                searchText.trim() === '' ||
-                  searchText.trim() === '' ||
+                e.name?.toLowerCase().includes(searchText.toLowerCase().trim())
-                  e.name
+            )
-                    ?.toLowerCase()
+            .map((convo, i) => (
-                    .includes(searchText.toLowerCase().trim())
+              <HistoryItem
-              )
+                key={i}
-              .map((convo, i) => (
+                conversation={convo}
-                <HistoryItem
+                summary={convo.summary}
-                  key={i}
+                name={convo.name || 'Jan'}
-                  conversation={convo}
+                updatedAt={convo.updatedAt ?? ''}
-                  summary={convo.summary}
+              />
-                  name={convo.name || 'Jan'}
+            ))}
-                  updatedAt={convo.updatedAt ?? ''}
+        </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 />
       )}

web/app/_components/InputToolbar/index.tsx

@@ -43,15 +43,7 @@ const InputToolbar: React.FC = () => {
   }
 
   if (!activeConvoId) {
-    return (
+    return null
-      <div className="my-3 flex justify-center gap-2">
-        <SecondaryButton
-          onClick={onNewConversationClick}
-          title="New Conversation"
-          icon={<PlusIcon width={16} height={16} />}
-        />
-      </div>
-    )
   }
   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">
+    <div className="sticky top-0 mb-4 bg-background/90 p-4">
-      <SecondaryButton
+      <div className="flex flex-row gap-2">
-        title={'Explore'}
+        <SecondaryButton
-        onClick={onExploreClick}
+          title={'Explore'}
-        className="flex-1"
+          onClick={onExploreClick}
-        icon={<MagnifyingGlassIcon width={16} height={16} />}
+          className="w-full flex-1"
-      />
+          icon={<MagnifyingGlassIcon width={16} height={16} />}
-      <SecondaryButton
+        />
-        title={'Create bot'}
+        <SecondaryButton
-        onClick={onCreateBotClicked}
+          title={'Create bot'}
-        className="flex-1"
+          onClick={onCreateBotClicked}
-        icon={<PlusIcon width={16} height={16} />}
+          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 />
-          <LeftHeaderAction />
+        <HistoryList />
-          <HistoryList />
-        </div>
       </div>
       <div className="relative flex h-full w-full flex-col bg-background/50">
         <MainHeader />