AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 12:49:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: overflow issues in chat history (#8062)

Browse Source
This commit is contained in:
Yi Xiao 2024-09-06 19:20:18 +08:00 committed by GitHub
parent 900fd82a92
commit cdb08be951
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 63 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
View File

@ -144,9 +144,9 @@ const ChatWrapper = () => {
config={appConfig} config={appConfig}
chatList={chatList} chatList={chatList}
isResponding={isResponding} isResponding={isResponding}
chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-[720px] ${isMobile && 'px-4'}`} chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-full ${isMobile && 'px-4'}`}
chatFooterClassName='pb-4' chatFooterClassName='pb-4'
chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`} chatFooterInnerClassName={`mx-auto w-full max-w-full ${isMobile && 'px-4'}`}
onSend={doSend} onSend={doSend}
onStopResponding={handleStop} onStopResponding={handleStop}
chatNode={chatNode} chatNode={chatNode}

10
web/app/components/base/chat/chat/citation/popup.tsx
View File

@ -53,14 +53,15 @@ const Popup: FC<PopupProps> = ({
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent style={{ zIndex: 1000 }}> <PortalToFollowElemContent style={{ zIndex: 1000 }}>
<div className='w-[360px] bg-gray-50 rounded-xl shadow-lg'> <div className='max-w-[360px] bg-gray-50 rounded-xl shadow-lg'>
<div className='px-4 pt-3 pb-2'> <div className='px-4 pt-3 pb-2'>
<div className='flex items-center h-[18px]'> <div className='flex items-center h-[18px]'>
<FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' /> <FileIcon type={fileType} className='shrink-0 mr-1 w-4 h-4' />
<div className='text-xs font-medium text-gray-600 truncate'>{data.documentName}</div> <div className='text-xs font-medium text-gray-600 truncate'>{data.documentName}</div>
</div> </div>
</div> </div>
<div className='px-4 py-0.5 max-h-[450px] bg-white rounded-lg overflow-auto'> <div className='px-4 py-0.5 max-h-[450px] bg-white rounded-lg overflow-y-auto'>
<div className='w-full'>
{ {
data.sources.map((source, index) => ( data.sources.map((source, index) => (
<Fragment key={index}> <Fragment key={index}>
@ -83,10 +84,10 @@ const Popup: FC<PopupProps> = ({
) )
} }
</div> </div>
<div className='text-[13px] text-gray-800'>{source.content}</div> <div className='text-[13px] text-gray-800 break-words'>{source.content}</div>
{ {
showHitInfo && ( showHitInfo && (
<div className='flex items-center mt-2 text-xs font-medium text-gray-500'> <div className='flex items-center mt-2 text-xs font-medium text-gray-500 flex-wrap'>
<Tooltip <Tooltip
text={t('common.chat.citation.characters')} text={t('common.chat.citation.characters')}
data={source.word_count} data={source.word_count}
@ -121,6 +122,7 @@ const Popup: FC<PopupProps> = ({
} }
</div> </div>
</div> </div>
</div>
</PortalToFollowElemContent> </PortalToFollowElemContent>
</PortalToFollowElem> </PortalToFollowElem>
) )

4
web/app/components/base/chat/chat/index.tsx
View File

@ -192,12 +192,12 @@ const Chat: FC<ChatProps> = ({
<div className='relative h-full'> <div className='relative h-full'>
<div <div
ref={chatContainerRef} ref={chatContainerRef}
className={classNames('relative h-full overflow-y-auto', chatContainerClassName)} className={classNames('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
> >
{chatNode} {chatNode}
<div <div
ref={chatContainerInnerRef} ref={chatContainerInnerRef}
className={`${chatContainerInnerClassName}`} className={`w-full ${chatContainerInnerClassName}`}
> >
{ {
chatList.map((item, index) => { chatList.map((item, index) => {

6
web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
View File

@ -99,7 +99,7 @@ const ChatWrapper = () => {
return ( return (
<> <>
{!currentConversationId && ( {!currentConversationId && (
<div className={cn('mx-auto w-full max-w-[720px] tablet:px-4', isMobile && 'px-4')}> <div className={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}>
<div className='mb-6' /> <div className='mb-6' />
<ConfigPanel /> <ConfigPanel />
<div <div
@ -132,9 +132,9 @@ const ChatWrapper = () => {
config={appConfig} config={appConfig}
chatList={chatList} chatList={chatList}
isResponding={isResponding} isResponding={isResponding}
chatContainerInnerClassName={cn('mx-auto w-full max-w-[720px] tablet:px-4', isMobile && 'px-4')} chatContainerInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
chatFooterClassName='pb-4' chatFooterClassName='pb-4'
chatFooterInnerClassName={cn('mx-auto w-full max-w-[720px] tablet:px-4', isMobile && 'px-4')} chatFooterInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
onSend={doSend} onSend={doSend}
onStopResponding={handleStop} onStopResponding={handleStop}
chatNode={chatNode} chatNode={chatNode}

4
web/app/components/workflow/panel/chat-record/index.tsx
View File

@ -103,9 +103,9 @@ const ChatRecord = () => {
} as any} } as any}
chatList={chatMessageList} chatList={chatMessageList}
chatContainerClassName='px-4' chatContainerClassName='px-4'
chatContainerInnerClassName='pt-6' chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
chatFooterClassName='px-4 rounded-b-2xl' chatFooterClassName='px-4 rounded-b-2xl'
chatFooterInnerClassName='pb-4' chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
chatNode={<UserInput />} chatNode={<UserInput />}
noChatInput noChatInput
allToolIcons={{}} allToolIcons={{}}

4
web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
View File

@ -103,9 +103,9 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
chatList={chatList} chatList={chatList}
isResponding={isResponding} isResponding={isResponding}
chatContainerClassName='px-3' chatContainerClassName='px-3'
chatContainerInnerClassName='pt-6' chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
chatFooterClassName='px-4 rounded-bl-2xl' chatFooterClassName='px-4 rounded-bl-2xl'
chatFooterInnerClassName='pb-4' chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
onSend={doSend} onSend={doSend}
onStopResponding={handleStop} onStopResponding={handleStop}
chatNode={( chatNode={(

1
web/app/components/workflow/panel/debug-and-preview/index.tsx
View File

@ -88,7 +88,6 @@ const DebugAndPreview = () => {
<RiEqualizer2Line className='w-4 h-4' /> <RiEqualizer2Line className='w-4 h-4' />
</ActionButton> </ActionButton>
</Tooltip> </Tooltip>
{expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
</div> </div>
)} )}
<div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div> <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>