AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 17:49:01 +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}

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

@ -53,72 +53,74 @@ 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) => ( {
<Fragment key={index}> data.sources.map((source, index) => (
<div className='group py-3'> <Fragment key={index}>
<div className='flex items-center justify-between mb-2'> <div className='group py-3'>
<div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'> <div className='flex items-center justify-between mb-2'>
<Hash02 className='mr-0.5 w-3 h-3 text-gray-400' /> <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
<div className='text-[11px] font-medium text-gray-500'> <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
{source.segment_position || index + 1} <div className='text-[11px] font-medium text-gray-500'>
{source.segment_position || index + 1}
</div>
</div> </div>
{
showHitInfo && (
<Link
href={`/datasets/${source.dataset_id}/documents/${source.document_id}`}
className='hidden items-center h-[18px] text-xs text-primary-600 group-hover:flex'>
{t('common.chat.citation.linkToDataset')}
<ArrowUpRight className='ml-1 w-3 h-3' />
</Link>
)
}
</div> </div>
<div className='text-[13px] text-gray-800 break-words'>{source.content}</div>
{ {
showHitInfo && ( showHitInfo && (
<Link <div className='flex items-center mt-2 text-xs font-medium text-gray-500 flex-wrap'>
href={`/datasets/${source.dataset_id}/documents/${source.document_id}`} <Tooltip
className='hidden items-center h-[18px] text-xs text-primary-600 group-hover:flex'> text={t('common.chat.citation.characters')}
{t('common.chat.citation.linkToDataset')} data={source.word_count}
<ArrowUpRight className='ml-1 w-3 h-3' /> icon={<TypeSquare className='mr-1 w-3 h-3' />}
</Link> />
<Tooltip
text={t('common.chat.citation.hitCount')}
data={source.hit_count}
icon={<Target04 className='mr-1 w-3 h-3' />}
/>
<Tooltip
text={t('common.chat.citation.vectorHash')}
data={source.index_node_hash.substring(0, 7)}
icon={<BezierCurve03 className='mr-1 w-3 h-3' />}
/>
{
source.score && (
<ProgressTooltip data={Number(source.score.toFixed(2))} />
)
}
</div>
) )
} }
</div> </div>
<div className='text-[13px] text-gray-800'>{source.content}</div>
{ {
showHitInfo && ( index !== data.sources.length - 1 && (
<div className='flex items-center mt-2 text-xs font-medium text-gray-500'> <div className='my-1 h-[1px] bg-black/5' />
<Tooltip
text={t('common.chat.citation.characters')}
data={source.word_count}
icon={<TypeSquare className='mr-1 w-3 h-3' />}
/>
<Tooltip
text={t('common.chat.citation.hitCount')}
data={source.hit_count}
icon={<Target04 className='mr-1 w-3 h-3' />}
/>
<Tooltip
text={t('common.chat.citation.vectorHash')}
data={source.index_node_hash.substring(0, 7)}
icon={<BezierCurve03 className='mr-1 w-3 h-3' />}
/>
{
source.score && (
<ProgressTooltip data={Number(source.score.toFixed(2))} />
)
}
</div>
) )
} }
</div> </Fragment>
{ ))
index !== data.sources.length - 1 && ( }
<div className='my-1 h-[1px] bg-black/5' /> </div>
)
}
</Fragment>
))
}
</div> </div>
</div> </div>
</PortalToFollowElemContent> </PortalToFollowElemContent>

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>