Merge pull request #3381 from janhq/chore/cherry-pick-move-create-new-thread

chore: move create new thread to top panel

web/containers/CenterPanelContainer/index.tsx

@@ -9,9 +9,7 @@ import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
 const CenterPanelContainer = ({ children }: PropsWithChildren) => {
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
   return (
-    <div
+    <div className={twMerge('flex h-full w-full')}>
-      className={twMerge('flex h-full w-full', !reduceTransparent && 'px-1.5')}
-    >
       <div
         className={twMerge(
           'h-full w-full overflow-hidden bg-[hsla(var(--center-panel-bg))]',

web/containers/Layout/TopPanel/index.tsx

@@ -12,18 +12,24 @@ import {
   SquareIcon,
   PaletteIcon,
   XIcon,
+  PenSquareIcon,
 } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 
 import LogoMark from '@/containers/Brand/Logo/Mark'
 
+import { toaster } from '@/containers/Toast'
+
 import { MainViewState } from '@/constants/screens'
 
+import { useCreateNewThread } from '@/hooks/useCreateNewThread'
+
 import {
   mainViewStateAtom,
   showLeftPanelAtom,
   showRightPanelAtom,
 } from '@/helpers/atoms/App.atom'
+import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import {
   reduceTransparentAtom,
   selectedSettingAtom,
@@ -35,6 +41,18 @@ const TopPanel = () => {
   const [mainViewState, setMainViewState] = useAtom(mainViewStateAtom)
   const setSelectedSetting = useSetAtom(selectedSettingAtom)
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
+  const { requestCreateNewThread } = useCreateNewThread()
+  const assistants = useAtomValue(assistantsAtom)
+
+  const onCreateNewThreadClick = () => {
+    if (!assistants.length)
+      return toaster({
+        title: 'No assistant available.',
+        description: `Could not create a new thread. Please add an assistant.`,
+        type: 'error',
+      })
+    requestCreateNewThread(assistants[0])
+  }
 
   return (
     <div
@@ -71,6 +89,18 @@ const TopPanel = () => {
               )}
             </Fragment>
           )}
+          {mainViewState === MainViewState.Thread && (
+            <Button
+              data-testid="btn-create-thread"
+              onClick={onCreateNewThreadClick}
+              theme="icon"
+            >
+              <PenSquareIcon
+                size={16}
+                className="cursor-pointer text-[hsla(var(--text-secondary))]"
+              />
+            </Button>
+          )}
         </div>
         <div className="unset-drag flex items-center gap-x-2">
           {mainViewState !== MainViewState.Hub &&

web/screens/Thread/ThreadLeftPanel/index.tsx

@@ -5,16 +5,11 @@ import { Thread } from '@janhq/core'
 import { Button } from '@janhq/joi'
 import { motion as m } from 'framer-motion'
 import { useAtomValue, useSetAtom } from 'jotai'
-import {
+import { GalleryHorizontalEndIcon, MoreHorizontalIcon } from 'lucide-react'
-  GalleryHorizontalEndIcon,
-  MoreHorizontalIcon,
-  PenSquareIcon,
-} from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
 import LeftPanelContainer from '@/containers/LeftPanelContainer'
-import { toaster } from '@/containers/Toast'
 
 import { useCreateNewThread } from '@/hooks/useCreateNewThread'
 import useRecommendedModel from '@/hooks/useRecommendedModel'
@@ -87,18 +82,6 @@ const ThreadLeftPanel = () => {
     downloadedModels,
   ])
 
-  const onCreateConversationClick = async () => {
-    if (assistants.length === 0) {
-      toaster({
-        title: 'No assistant available.',
-        description: `Could not create a new thread. Please add an assistant.`,
-        type: 'error',
-      })
-    } else {
-      requestCreateNewThread(assistants[0])
-    }
-  }
-
   const onContextMenu = (event: React.MouseEvent, thread: Thread) => {
     event.preventDefault()
     setContextMenu({
@@ -126,18 +109,6 @@ const ThreadLeftPanel = () => {
         </div>
       ) : (
         <div className="p-3">
-          <Button
-            className="mb-2"
-            data-testid="btn-create-thread"
-            onClick={onCreateConversationClick}
-            theme="icon"
-          >
-            <PenSquareIcon
-              size={16}
-              className="cursor-pointer text-[hsla(var(--text-secondary))]"
-            />
-          </Button>
-
           {threads.map((thread) => (
             <div
               key={thread.id}