fix: toolbar overlap chat input

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

@@ -75,11 +75,11 @@
   )
 
   const isStreamingResponse = Object.values(threadStates).some(
     (threadState) => threadState.waitingForResponse
   )
 
   const onPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setCurrentPrompt(e.target.value)
   }
 
   const refAttachmentMenus = useClickOutside(() => setShowAttacmentMenus(false))
@@ -87,8 +87,8 @@
 
   useEffect(() => {
     if (isWaitingToSend && activeThreadId) {
       setIsWaitingToSend(false)
       sendChatMessage(currentPrompt)
     }
   }, [
     activeThreadId,
@@ -106,26 +106,26 @@
 
   useEffect(() => {
     if (textareaRef.current?.clientHeight) {
       textareaRef.current.style.height = activeSettingInputBox
         ? '100px'
         : '40px'
       textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'
       textareaRef.current.style.overflow =
         textareaRef.current.clientHeight >= 390 ? 'auto' : 'hidden'
     }
   }, [textareaRef.current?.clientHeight, currentPrompt, activeSettingInputBox])
 
   const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
       e.preventDefault()
       if (messages[messages.length - 1]?.status !== MessageStatus.Pending)
         sendChatMessage(currentPrompt)
       else onStopInferenceClick()
     }
   }
 
   const onStopInferenceClick = async () => {
     stopInference()
   }
 
   const isModelSupportRagAndTools =
@@ -138,20 +138,20 @@
    * @param event - The change event object.
    */
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
     setFileUpload([{ file: file, type: 'pdf' }])
   }
 
   const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
     setFileUpload([{ file: file, type: 'image' }])
   }
 
   const renderPreview = (fileUpload: any) => {
     if (fileUpload.length > 0) {
       if (fileUpload[0].type === 'image') {
         return <ImageUploadPreview file={fileUpload[0].file} />
       } else {
         return <FileUploadPreview />
@@ -392,7 +392,7 @@
         {activeSettingInputBox && (
           <div
             className={twMerge(
-              'absolute bottom-[6px] left-[1px] flex w-[calc(100%-2px)] items-center justify-between rounded-lg bg-[hsla(var(--textarea-bg))] p-3',
+              'absolute bottom-[6px] left-[1px] flex w-[calc(100%-10px)] items-center justify-between rounded-b-lg bg-[hsla(var(--center-panel-bg))] p-3 pr-0',
               !activeThread && 'bg-transparent',
               stateModel.loading && 'bg-transparent'
             )}