fix: input chat input wrong padding (#8207)

This commit is contained in:
Joel 2024-09-10 17:01:32 +08:00 committed by GitHub
parent 2cf1187b32
commit d1605952b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 13 additions and 3 deletions

View File

@ -129,6 +129,7 @@ const ChatItem: FC<ChatItemProps> = ({
questionIcon={<Avatar name={userProfile.name} size={40} />} questionIcon={<Avatar name={userProfile.name} size={40} />}
allToolIcons={allToolIcons} allToolIcons={allToolIcons}
hideLogModal hideLogModal
noSpacing
/> />
) )
} }

View File

@ -128,6 +128,7 @@ const DebugWithMultipleModel = () => {
onSend={handleSend} onSend={handleSend}
speechToTextConfig={speechToTextConfig} speechToTextConfig={speechToTextConfig}
visionConfig={visionConfig} visionConfig={visionConfig}
noSpacing
/> />
</div> </div>
) )

View File

@ -130,6 +130,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
onAnnotationEdited={handleAnnotationEdited} onAnnotationEdited={handleAnnotationEdited}
onAnnotationAdded={handleAnnotationAdded} onAnnotationAdded={handleAnnotationAdded}
onAnnotationRemoved={handleAnnotationRemoved} onAnnotationRemoved={handleAnnotationRemoved}
noSpacing
/> />
) )
}) })

View File

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

View File

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

View File

@ -118,6 +118,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
} }
</> </>
)} )}
noSpacing
suggestedQuestions={suggestedQuestions} suggestedQuestions={suggestedQuestions}
showPromptLog showPromptLog
chatAnswerContainerInner='!pr-2' chatAnswerContainerInner='!pr-2'