From abb718c57f1b78797c5a830b087fdfbb57b7c979 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 23 Dec 2024 13:14:49 +0800
Subject: [PATCH] fix: width inputbox based on preference and remove tooltip
 image upload (#4315)

---
 .../ThreadCenterPanel/ChatInput/index.tsx     | 42 ++++++++-----------
 .../Thread/ThreadCenterPanel/index.tsx        | 11 ++++-
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index 198196484..0ba50880b 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -231,30 +231,24 @@ const ChatInput = () => {
             )}
           >
             <ul>
-              <Tooltip
-                trigger={
-                  <li
-                    className={twMerge(
-                      'text-[hsla(var(--text-secondary)] hover:bg-secondary flex w-full items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
-                      activeAssistant?.model.settings?.vision_model ||
-                        isModelSupportRagAndTools
-                        ? 'cursor-pointer'
-                        : 'cursor-not-allowed opacity-50'
-                    )}
-                    onClick={() => {
-                      if (activeAssistant?.model.settings?.vision_model) {
-                        imageInputRef.current?.click()
-                        setShowAttacmentMenus(false)
-                      }
-                    }}
-                  >
-                    <ImageIcon size={16} />
-                    <span className="font-medium">Image</span>
-                  </li>
-                }
-                content="This feature only supports multimodal models."
-                disabled={activeAssistant?.model.settings?.vision_model}
-              />
+              <li
+                className={twMerge(
+                  'text-[hsla(var(--text-secondary)] hover:bg-secondary flex w-full items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
+                  activeAssistant?.model.settings?.vision_model &&
+                    isModelSupportRagAndTools
+                    ? 'cursor-pointer'
+                    : 'cursor-not-allowed opacity-50'
+                )}
+                onClick={() => {
+                  if (activeAssistant?.model.settings?.vision_model) {
+                    imageInputRef.current?.click()
+                    setShowAttacmentMenus(false)
+                  }
+                }}
+              >
+                <ImageIcon size={16} />
+                <span className="font-medium">Image</span>
+              </li>
               <Tooltip
                 side="bottom"
                 trigger={
diff --git a/web/screens/Thread/ThreadCenterPanel/index.tsx b/web/screens/Thread/ThreadCenterPanel/index.tsx
index ca04f9e59..bd01365e4 100644
--- a/web/screens/Thread/ThreadCenterPanel/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/index.tsx
@@ -30,6 +30,7 @@ import RequestDownloadModel from './RequestDownloadModel'
 import { showSystemMonitorPanelAtom } from '@/helpers/atoms/App.atom'
 import { experimentalFeatureEnabledAtom } from '@/helpers/atoms/AppConfig.atom'
 import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
+import { chatWidthAtom } from '@/helpers/atoms/Setting.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 import {
@@ -59,6 +60,7 @@ const ThreadCenterPanel = () => {
   const experimentalFeature = useAtomValue(experimentalFeatureEnabledAtom)
   const activeThread = useAtomValue(activeThreadAtom)
   const activeAssistant = useAtomValue(activeAssistantAtom)
+  const chatWidth = useAtomValue(chatWidthAtom)
   const upload = uploader()
   const acceptedFormat: Accept = activeAssistant?.model.settings?.vision_model
     ? {
@@ -235,7 +237,14 @@ const ThreadCenterPanel = () => {
           {reloadModel && <ModelReload />}
 
           {activeModel && isGeneratingResponse && <GenerateResponse />}
-          <ChatInput />
+          <div
+            className={twMerge(
+              'mx-auto w-full',
+              chatWidth === 'compact' && 'max-w-[700px]'
+            )}
+          >
+            <ChatInput />
+          </div>
         </div>
       </div>
     </CenterPanelContainer>