fix: input chat input wrong padding (#8207)

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

@@ -32,18 +32,21 @@ import {
   useDraggableUploader,
   useImageFiles,
 } from '@/app/components/base/image-uploader/hooks'
+import cn from '@/utils/classnames'
 
 type ChatInputProps = {
   visionConfig?: VisionConfig
   speechToTextConfig?: EnableType
   onSend?: OnSend
   theme?: Theme | null
+  noSpacing?: boolean
 }
 const ChatInput: FC<ChatInputProps> = ({
   visionConfig,
   speechToTextConfig,
   onSend,
   theme,
+  noSpacing,
 }) => {
   const { appData } = useChatWithHistoryContext()
   const { t } = useTranslation()
@@ -146,7 +149,7 @@ const ChatInput: FC<ChatInputProps> = ({
 
   return (
     <>
-      <div className='relative'>
+      <div className={cn('relative', !noSpacing && 'px-8')}>
         <div
           className={`
             p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
@@ -193,7 +196,7 @@ const ChatInput: FC<ChatInputProps> = ({
             onDrop={onDrop}
             autoSize
           />
-          <div className='absolute bottom-[7px] right-2 flex items-center h-8'>
+          <div className={cn('absolute bottom-[7px] flex items-center h-8', noSpacing ? 'right-2' : 'right-10')}>
             <div className='flex items-center px-1 h-5 rounded-md bg-gray-100 text-xs font-medium text-gray-500'>
               {query.trim().length}
             </div>

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

@@ -60,6 +60,7 @@ export type ChatProps = {
   hideProcessDetail?: boolean
   hideLogModal?: boolean
   themeBuilder?: ThemeBuilder
+  noSpacing?: boolean
 }
 
 const Chat: FC<ChatProps> = ({
@@ -89,6 +90,7 @@ const Chat: FC<ChatProps> = ({
   hideProcessDetail,
   hideLogModal,
   themeBuilder,
+  noSpacing,
 }) => {
   const { t } = useTranslation()
   const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -197,7 +199,7 @@ const Chat: FC<ChatProps> = ({
           {chatNode}
           <div
             ref={chatContainerInnerRef}
-            className={`w-full ${chatContainerInnerClassName}`}
+            className={classNames('w-full', !noSpacing && 'px-8', chatContainerInnerClassName)}
           >
             {
               chatList.map((item, index) => {
@@ -268,6 +270,7 @@ const Chat: FC<ChatProps> = ({
                   speechToTextConfig={config?.speech_to_text}
                   onSend={onSend}
                   theme={themeBuilder?.theme}
+                  noSpacing={noSpacing}
                 />
               )
             }