From bb3bbd25d2d84a72ca2e258955f32c076300a1c8 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Thu, 22 Aug 2024 11:18:37 +0700
Subject: [PATCH] fix: setting chatbox input (#3429)

* fix: setting chatbox input

* fix: linter issue
---
 web/containers/Layout/TopPanel/index.tsx      | 24 ++++++++++-
 web/helpers/atoms/ThreadRightPanel.atom.ts    |  4 +-
 .../ThreadCenterPanel/ChatInput/index.tsx     | 40 ++++++++++---------
 web/screens/Thread/ThreadRightPanel/index.tsx |  2 +-
 4 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/web/containers/Layout/TopPanel/index.tsx b/web/containers/Layout/TopPanel/index.tsx
index 6f7ae8b66..213f7dfa9 100644
--- a/web/containers/Layout/TopPanel/index.tsx
+++ b/web/containers/Layout/TopPanel/index.tsx
@@ -34,6 +34,7 @@ import {
   reduceTransparentAtom,
   selectedSettingAtom,
 } from '@/helpers/atoms/Setting.atom'
+import { activeTabThreadRightPanelAtom } from '@/helpers/atoms/ThreadRightPanel.atom'
 
 const TopPanel = () => {
   const [showLeftPanel, setShowLeftPanel] = useAtom(showLeftPanelAtom)
@@ -43,6 +44,9 @@ const TopPanel = () => {
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
   const { requestCreateNewThread } = useCreateNewThread()
   const assistants = useAtomValue(assistantsAtom)
+  const [activeTabThreadRightPanel, setActiveTabThreadRightPanel] = useAtom(
+    activeTabThreadRightPanelAtom
+  )
 
   const onCreateNewThreadClick = () => {
     if (!assistants.length)
@@ -107,11 +111,27 @@ const TopPanel = () => {
             mainViewState !== MainViewState.Settings && (
               <Fragment>
                 {showRightPanel ? (
-                  <Button theme="icon" onClick={() => setShowRightPanel(false)}>
+                  <Button
+                    theme="icon"
+                    onClick={() => {
+                      setShowRightPanel(false)
+                      if (activeTabThreadRightPanel === 'model') {
+                        setActiveTabThreadRightPanel(undefined)
+                      }
+                    }}
+                  >
                     <PanelRightCloseIcon size={16} />
                   </Button>
                 ) : (
-                  <Button theme="icon" onClick={() => setShowRightPanel(true)}>
+                  <Button
+                    theme="icon"
+                    onClick={() => {
+                      setShowRightPanel(true)
+                      if (activeTabThreadRightPanel === undefined) {
+                        setActiveTabThreadRightPanel('model')
+                      }
+                    }}
+                  >
                     <PanelRightOpenIcon size={16} />
                   </Button>
                 )}
diff --git a/web/helpers/atoms/ThreadRightPanel.atom.ts b/web/helpers/atoms/ThreadRightPanel.atom.ts
index 88cbe0e21..904e08552 100644
--- a/web/helpers/atoms/ThreadRightPanel.atom.ts
+++ b/web/helpers/atoms/ThreadRightPanel.atom.ts
@@ -1,4 +1,6 @@
 import { atom } from 'jotai'
 
 // Store tabs menu active state
-export const activeTabThreadRightPanelAtom = atom<string>('assistant')
+export const activeTabThreadRightPanelAtom = atom<string | undefined>(
+  'assistant'
+)
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index 0c7ec0d4f..ff3f19e16 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -3,14 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import { MessageStatus } from '@janhq/core'
 
-import {
-  TextArea,
-  Button,
-  Tooltip,
-  useClickOutside,
-  Badge,
-  useMediaQuery,
-} from '@janhq/joi'
+import { TextArea, Button, Tooltip, useClickOutside, Badge } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
 import {
   FileTextIcon,
@@ -20,7 +13,6 @@ import {
   SettingsIcon,
   ChevronUpIcon,
   Settings2Icon,
-  ShapesIcon,
 } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
@@ -89,8 +81,6 @@ const ChatInput = () => {
   const refAttachmentMenus = useClickOutside(() => setShowAttacmentMenus(false))
   const [showRightPanel, setShowRightPanel] = useAtom(showRightPanelAtom)
 
-  const matches = useMediaQuery('(max-width: 880px)')
-
   useEffect(() => {
     if (isWaitingToSend && activeThreadId) {
       setIsWaitingToSend(false)
@@ -403,11 +393,25 @@ const ChatInput = () => {
                   activeTabThreadRightPanel === 'model' ? 'solid' : 'outline'
                 }
                 onClick={() => {
-                  setActiveTabThreadRightPanel('model')
-                  if (matches) {
-                    setShowRightPanel(!showRightPanel)
-                  } else if (!showRightPanel) {
+                  // TODO @faisal: should be refactor later and better experience beetwen tab and toggle button
+                  if (showRightPanel && activeTabThreadRightPanel !== 'model') {
                     setShowRightPanel(true)
+                    setActiveTabThreadRightPanel('model')
+                  }
+                  if (showRightPanel && activeTabThreadRightPanel === 'model') {
+                    setShowRightPanel(false)
+                    setActiveTabThreadRightPanel(undefined)
+                  }
+                  if (activeTabThreadRightPanel === undefined) {
+                    setShowRightPanel(true)
+                    setActiveTabThreadRightPanel('model')
+                  }
+                  if (
+                    !showRightPanel &&
+                    activeTabThreadRightPanel !== 'model'
+                  ) {
+                    setShowRightPanel(true)
+                    setActiveTabThreadRightPanel('model')
                   }
                 }}
               >
@@ -415,9 +419,9 @@ const ChatInput = () => {
                   size={16}
                   className="flex-shrink-0 cursor-pointer text-[hsla(var(--text-secondary))]"
                 />
-                <span>Inference</span>
               </Badge>
-              {experimentalFeature && (
+              {/* Temporary disable it */}
+              {/* {experimentalFeature && (
                 <Badge
                   className="flex cursor-pointer items-center gap-x-1"
                   theme="secondary"
@@ -439,7 +443,7 @@ const ChatInput = () => {
                   />
                   <span>Tools</span>
                 </Badge>
-              )}
+              )} */}
             </div>
             <Button
               theme="icon"
diff --git a/web/screens/Thread/ThreadRightPanel/index.tsx b/web/screens/Thread/ThreadRightPanel/index.tsx
index de37ea520..e374cb362 100644
--- a/web/screens/Thread/ThreadRightPanel/index.tsx
+++ b/web/screens/Thread/ThreadRightPanel/index.tsx
@@ -191,7 +191,7 @@ const ThreadRightPanel = () => {
           { name: 'Model', value: 'model' },
           ...(experimentalFeature ? [{ name: 'Tools', value: 'tools' }] : []),
         ]}
-        value={activeTabThreadRightPanel}
+        value={activeTabThreadRightPanel as string}
         onValueChange={(value) => setActiveTabThreadRightPanel(value)}
       >
         <TabsContent value="assistant">