fix: dynamic input box width and remove tooltip image option

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={

web/screens/Thread/ThreadCenterPanel/index.tsx

@@ -30,6 +30,7 @@
 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 {
@@ -38,18 +39,18 @@
 } from '@/helpers/atoms/Thread.atom'
 
 const renderError = (code: string) => {
   switch (code) {
     case 'multiple-upload':
       return 'Currently, we only support 1 attachment at the same time'
 
     case 'retrieval-off':
       return 'Turn on Retrieval in Assistant Settings to use this feature'
 
     case 'file-invalid-type':
       return 'We do not support this file type'
 
     default:
       return 'Oops, something error, please try again.'
   }
 }
 
@@ -59,6 +60,7 @@
   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
     ? {
@@ -78,23 +80,23 @@
 
     onDragOver: (e) => {
       // Retrieval file drag and drop is experimental feature
       if (!experimentalFeature) return
       if (
         e.dataTransfer.items.length === 1 &&
         ((activeAssistant?.tools && activeAssistant?.tools[0]?.enabled) ||
           activeAssistant?.model.settings?.vision_model)
       ) {
         setDragOver(true)
       } else if (
         activeAssistant?.tools &&
         !activeAssistant?.tools[0]?.enabled
       ) {
         setDragRejected({ code: 'retrieval-off' })
       } else {
         setDragRejected({ code: 'multiple-upload' })
       }
     },
     onDragLeave: () => setDragOver(false),
     onDrop: async (files, rejectFiles) => {
       // Retrieval file drag and drop is experimental feature
       if (!experimentalFeature) return
@@ -235,7 +237,14 @@
           {reloadModel && <ModelReload />}
 
           {activeModel && isGeneratingResponse && <GenerateResponse />}
-          <ChatInput />
+          <div
+            className={twMerge(
+              'mx-auto w-full',
+              chatWidth === 'compact' && 'max-w-[700px]'
+            )}
+          >
+            <ChatInput />
+          </div>
         </div>
       </div>
     </CenterPanelContainer>