fix: width inputbox based on preference and remove tooltip image upload (#4315)

web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx

@@ -231,12 +231,10 @@ 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 ||
+                  activeAssistant?.model.settings?.vision_model &&
                     isModelSupportRagAndTools
                     ? 'cursor-pointer'
                     : 'cursor-not-allowed opacity-50'
@@ -251,10 +249,6 @@ const ChatInput = () => {
                 <ImageIcon size={16} />
                 <span className="font-medium">Image</span>
               </li>
-                }
-                content="This feature only supports multimodal models."
-                disabled={activeAssistant?.model.settings?.vision_model}
-              />
               <Tooltip
                 side="bottom"
                 trigger={

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,9 +237,16 @@ const ThreadCenterPanel = () => {
           {reloadModel && <ModelReload />}
 
           {activeModel && isGeneratingResponse && <GenerateResponse />}
+          <div
+            className={twMerge(
+              'mx-auto w-full',
+              chatWidth === 'compact' && 'max-w-[700px]'
+            )}
+          >
             <ChatInput />
           </div>
         </div>
+      </div>
     </CenterPanelContainer>
   )
 }