From 36b0e90560e11d61cf8eb286f07045642e2f273e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 10 Sep 2024 16:32:50 +0800
Subject: [PATCH] fix: input chat input wrong padding

---
 .../debug/debug-with-multiple-model/chat-item.tsx          | 1 +
 .../debug/debug-with-multiple-model/index.tsx              | 1 +
 .../configuration/debug/debug-with-single-model/index.tsx  | 1 +
 web/app/components/base/chat/chat/chat-input.tsx           | 7 +++++--
 web/app/components/base/chat/chat/index.tsx                | 5 ++++-
 .../workflow/panel/debug-and-preview/chat-wrapper.tsx      | 1 +
 6 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
index d4a156032465f5..80dfb5c534ea5c 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
@@ -129,6 +129,7 @@ const ChatItem: FC<ChatItemProps> = ({
       questionIcon={<Avatar name={userProfile.name} size={40} />}
       allToolIcons={allToolIcons}
       hideLogModal
+      noSpacing
     />
   )
 }
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
index 892d0cfe8b3298..3d2f3bca590042 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/index.tsx
@@ -128,6 +128,7 @@ const DebugWithMultipleModel = () => {
               onSend={handleSend}
               speechToTextConfig={speechToTextConfig}
               visionConfig={visionConfig}
+              noSpacing
             />
           </div>
         )
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
index 0f09a232425e54..d93ad00659e478 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
@@ -130,6 +130,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
       onAnnotationEdited={handleAnnotationEdited}
       onAnnotationAdded={handleAnnotationAdded}
       onAnnotationRemoved={handleAnnotationRemoved}
+      noSpacing
     />
   )
 })
diff --git a/web/app/components/base/chat/chat/chat-input.tsx b/web/app/components/base/chat/chat/chat-input.tsx
index c4578fab62b011..a90f86402d110a 100644
--- a/web/app/components/base/chat/chat/chat-input.tsx
+++ b/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>
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 7540cd873b9460..65e49eff67dd5f 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/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}
                 />
               )
             }
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index e7639ddc794083..a7dd607e221ea5 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -118,6 +118,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
             }
           </>
         )}
+        noSpacing
         suggestedQuestions={suggestedQuestions}
         showPromptLog
         chatAnswerContainerInner='!pr-2'