fix feature bar in basic chabot

web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx

@@ -17,7 +17,7 @@ import ChatInput from '@/app/components/base/chat/chat/chat-input'
 import type { VisionFile } from '@/app/components/base/chat/types'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
 import { useFeatures } from '@/app/components/base/features/hooks'
-// import { useStore as useAppStore } from '@/app/components/app/store'
+import { useStore as useAppStore } from '@/app/components/app/store'
 import { Resolution, TransferMethod } from '@/types/app'
 
 const DebugWithMultipleModel = () => {
@@ -106,7 +106,7 @@ const DebugWithMultipleModel = () => {
     }
   }, [twoLine, threeLine, fourLine])
 
-  // const setShowAppConfigureFeaturesModal = useAppStore(s => s.setShowAppConfigureFeaturesModal)
+  const setShowAppConfigureFeaturesModal = useAppStore(s => s.setShowAppConfigureFeaturesModal)
 
   return (
     <div className='flex flex-col h-full'>
@@ -140,6 +140,9 @@ const DebugWithMultipleModel = () => {
       {isChatMode && (
         <div className='shrink-0 pb-0 px-6'>
           <ChatInput
+            showFeatureBar
+            showFileUpload={false}
+            onFeatureBarClick={setShowAppConfigureFeaturesModal}
             onSend={handleSend}
             speechToTextConfig={speech2text as any}
             visionConfig={visionConfig}

web/app/components/base/chat/chat/chat-input.tsx

@@ -32,9 +32,14 @@ import {
   useDraggableUploader,
   useImageFiles,
 } from '@/app/components/base/image-uploader/hooks'
+import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import cn from '@/utils/classnames'
 
 type ChatInputProps = {
+  showFeatureBar?: boolean
+  showFileUpload?: boolean
+  featureBarDisabled?: boolean
+  onFeatureBarClick?: (state: boolean) => void
   visionConfig?: VisionConfig
   speechToTextConfig?: EnableType
   onSend?: OnSend
@@ -42,6 +47,10 @@ type ChatInputProps = {
   noSpacing?: boolean
 }
 const ChatInput: FC<ChatInputProps> = ({
+  showFeatureBar,
+  showFileUpload,
+  featureBarDisabled,
+  onFeatureBarClick,
   visionConfig,
   speechToTextConfig,
   onSend,
@@ -149,12 +158,9 @@ const ChatInput: FC<ChatInputProps> = ({
 
   return (
     <>
-      <div className={cn('relative', !noSpacing && 'px-8')}>
+      <div className={cn('relative', !noSpacing && 'px-8', showFeatureBar && 'z-10')}>
         <div
-          className={`
+          className={cn('p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto', isDragActive && 'border-primary-600', !showFeatureBar && 'mb-2')}
-            p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
-            ${isDragActive && 'border-primary-600'} mb-2
-          `}
         >
           {
             visionConfig?.enabled && (
@@ -180,7 +186,7 @@ const ChatInput: FC<ChatInputProps> = ({
             )
           }
           <Textarea
-            ref={textAreaRef}
+            ref={textAreaRef as any}
             className={`
               block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
               ${visionConfig?.enabled && 'pl-12'}
@@ -251,6 +257,7 @@ const ChatInput: FC<ChatInputProps> = ({
       {appData?.site?.custom_disclaimer && <div className='text-xs text-gray-500 mt-1 text-center'>
         {appData.site.custom_disclaimer}
       </div>}
+      {showFeatureBar && <FeatureBar showFileUpload={showFileUpload} disabled={featureBarDisabled} onFeatureBarClick={onFeatureBarClick} />}
     </>
   )
 }

web/app/components/base/chat/chat/index.tsx

@@ -26,7 +26,7 @@ import ChatInput from './chat-input'
 import ChatInputArea from './chat-input-area'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 import type { Emoji } from '@/app/components/tools/types'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
@@ -210,12 +210,12 @@ const Chat: FC<ChatProps> = ({
       <div className='relative h-full'>
         <div
           ref={chatContainerRef}
-          className={classNames('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
+          className={cn('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
         >
           {chatNode}
           <div
             ref={chatContainerInnerRef}
-            className={classNames('w-full', !noSpacing && 'px-8', chatContainerInnerClassName)}
+            className={cn('w-full', !noSpacing && 'px-8', chatContainerInnerClassName)}
           >
             {
               chatList.map((item, index) => {
@@ -258,7 +258,7 @@ const Chat: FC<ChatProps> = ({
         >
           <div
             ref={chatFooterInnerRef}
-            className={`${chatFooterInnerClassName}`}
+            className={cn('relative', chatFooterInnerClassName)}
           >
             {
               !noStopResponding && isResponding && (
@@ -294,6 +294,10 @@ const Chat: FC<ChatProps> = ({
             }
             {!noChatInput && !showFileUpload && (
               <ChatInput
+                showFeatureBar={showFeatureBar}
+                showFileUpload={showFileUpload}
+                featureBarDisabled={isResponding}
+                onFeatureBarClick={onFeatureBarClick}
                 onSend={onSend}
                 speechToTextConfig={config?.speech_to_text}
                 visionConfig={visionConfig}