feat: move icon create new thread into top panel

web/containers/Layout/TopPanel/index.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import { Fragment, useCallback, useEffect } from 'react'
 
 import { Button } from '@janhq/joi'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
@@ -12,22 +12,35 @@ 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 useAssistantQuery from '@/hooks/useAssistantQuery'
+import useThreadCreateMutation from '@/hooks/useThreadCreateMutation'
+import useThreads from '@/hooks/useThreads'
+
+import { copyOverInstructionEnabledAtom } from '@/screens/Thread/ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction'
+
 import {
  MainViewState,
  mainViewStateAtom,
  showLeftPanelAtom,
  showRightPanelAtom,
 } from '@/helpers/atoms/App.atom'
-import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+import {
+ downloadedModelsAtom,
+ getSelectedModelAtom,
+} from '@/helpers/atoms/Model.atom'
 import {
  reduceTransparentAtom,
  selectedSettingAtom,
 } from '@/helpers/atoms/Setting.atom'
+import { threadsAtom, activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const TopPanel = () => {
  const [showLeftPanel, setShowLeftPanel] = useAtom(showLeftPanelAtom)
@@ -37,6 +50,51 @@ const TopPanel = () => {
  const reduceTransparent = useAtomValue(reduceTransparentAtom)
  const downloadedModels = useAtomValue(downloadedModelsAtom)
 
+ const { setActiveThread } = useThreads()
+ const createThreadMutation = useThreadCreateMutation()
+
+ const selectedModel = useAtomValue(getSelectedModelAtom)
+ const threads = useAtomValue(threadsAtom)
+
+ const activeThread = useAtomValue(activeThreadAtom)
+ const { data: assistants } = useAssistantQuery()
+ const copyOverInstructionEnabled = useAtomValue(
+ copyOverInstructionEnabledAtom
+ )
+
+ useEffect(() => {
+ if (activeThread?.id) return
+ if (threads.length === 0) return
+ setActiveThread(threads[0].id)
+ }, [activeThread?.id, setActiveThread, threads])
+
+ const onCreateThreadClicked = useCallback(async () => {
+ if (!assistants || assistants.length) {
+ toaster({
+ title: 'No assistant available.',
+ description: `Could not create a new thread. Please add an assistant.`,
+ type: 'error',
+ })
+ return
+ }
+ if (!selectedModel) return
+ let instructions: string | undefined = undefined
+ if (copyOverInstructionEnabled) {
+ instructions = activeThread?.assistants[0]?.instructions ?? undefined
+ }
+ await createThreadMutation.mutateAsync({
+ modelId: selectedModel.model,
+ assistant: assistants[0],
+ instructions,
+ })
+ }, [
+ createThreadMutation,
+ selectedModel,
+ assistants,
+ activeThread,
+ copyOverInstructionEnabled,
+ ])
+
  return (
  <div
  className={twMerge(
@@ -73,6 +131,18 @@ const TopPanel = () => {
  )}
  </Fragment>
  )}
+ {mainViewState === MainViewState.Thread && (
+ <Button
+ data-testid="btn-create-thread"
+ onClick={onCreateThreadClicked}
+ 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

@@ -1,89 +1,21 @@
-import { useCallback, useEffect } from 'react'
-
-import { Button } from '@janhq/joi'
 import { AnimatePresence } from 'framer-motion'
 
 import { useAtomValue } from 'jotai'
-import { PenSquareIcon } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
 
 import LeftPanelContainer from '@/containers/LeftPanelContainer'
-import { toaster } from '@/containers/Toast'
-
-import useAssistantQuery from '@/hooks/useAssistantQuery'
-
-import useThreadCreateMutation from '@/hooks/useThreadCreateMutation'
-
-import useThreads from '@/hooks/useThreads'
-
-import { copyOverInstructionEnabledAtom } from '../ThreadRightPanel/AssistantSettingContainer/components/CopyOverInstruction'
 
 import ThreadItem from './ThreadItem'
 
-import { getSelectedModelAtom } from '@/helpers/atoms/Model.atom'
-import { activeThreadAtom, threadsAtom } from '@/helpers/atoms/Thread.atom'
+import { threadsAtom } from '@/helpers/atoms/Thread.atom'
 
 const ThreadLeftPanel: React.FC = () => {
- const { setActiveThread } = useThreads()
- const createThreadMutation = useThreadCreateMutation()
-
- const selectedModel = useAtomValue(getSelectedModelAtom)
  const threads = useAtomValue(threadsAtom)
 
- const activeThread = useAtomValue(activeThreadAtom)
- const { data: assistants } = useAssistantQuery()
- const copyOverInstructionEnabled = useAtomValue(
- copyOverInstructionEnabledAtom
- )
-
- useEffect(() => {
- if (activeThread?.id) return
- if (threads.length === 0) return
- setActiveThread(threads[0].id)
- }, [activeThread?.id, setActiveThread, threads])
-
- const onCreateThreadClicked = useCallback(async () => {
- if (!assistants || assistants.length === 0) {
- toaster({
- title: 'No assistant available.',
- description: `Could not create a new thread. Please add an assistant.`,
- type: 'error',
- })
- return
- }
- if (!selectedModel) return
- let instructions: string | undefined = undefined
- if (copyOverInstructionEnabled) {
- instructions = activeThread?.assistants[0]?.instructions ?? undefined
- }
- await createThreadMutation.mutateAsync({
- modelId: selectedModel.model,
- assistant: assistants[0],
- instructions,
- })
- }, [
- createThreadMutation,
- selectedModel,
- assistants,
- activeThread,
- copyOverInstructionEnabled,
- ])
-
  return (
  <LeftPanelContainer>
  <div className={twMerge('pl-1.5 pt-3')}>
- <Button
- className="mb-2"
- data-testid="btn-create-thread"
- onClick={onCreateThreadClicked}
- theme="icon"
- >
- <PenSquareIcon
- size={16}
- className="cursor-pointer text-[hsla(var(--text-secondary))]"
- />
- </Button>
  <AnimatePresence>
  {threads.map((thread) => (
  <ThreadItem key={thread.id} thread={thread} />