From cdb08be9517f1079117a5f97c05b02f95f160632 Mon Sep 17 00:00:00 2001
From: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com>
Date: Fri, 6 Sep 2024 19:20:18 +0800
Subject: [PATCH] fix: overflow issues in chat history (#8062)

---
 .../chat/chat-with-history/chat-wrapper.tsx   |   4 +-
 .../base/chat/chat/citation/popup.tsx         | 102 +++++++++---------
 web/app/components/base/chat/chat/index.tsx   |   4 +-
 .../chat/embedded-chatbot/chat-wrapper.tsx    |   6 +-
 .../workflow/panel/chat-record/index.tsx      |   4 +-
 .../panel/debug-and-preview/chat-wrapper.tsx  |   4 +-
 .../panel/debug-and-preview/index.tsx         |   1 -
 7 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index 1129b18a8d..5a7bf1f17e 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -144,9 +144,9 @@ const ChatWrapper = () => {
       config={appConfig}
       chatList={chatList}
       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'
-      chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`}
+      chatFooterInnerClassName={`mx-auto w-full max-w-full ${isMobile && 'px-4'}`}
       onSend={doSend}
       onStopResponding={handleStop}
       chatNode={chatNode}
diff --git a/web/app/components/base/chat/chat/citation/popup.tsx b/web/app/components/base/chat/chat/citation/popup.tsx
index d039d98e6b..b61bf623fe 100644
--- a/web/app/components/base/chat/chat/citation/popup.tsx
+++ b/web/app/components/base/chat/chat/citation/popup.tsx
@@ -53,72 +53,74 @@ const Popup: FC<PopupProps> = ({
         </div>
       </PortalToFollowElemTrigger>
       <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='flex items-center h-[18px]'>
               <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>
           </div>
-          <div className='px-4 py-0.5 max-h-[450px] bg-white rounded-lg overflow-auto'>
-            {
-              data.sources.map((source, index) => (
-                <Fragment key={index}>
-                  <div className='group py-3'>
-                    <div className='flex items-center justify-between mb-2'>
-                      <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
-                        <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
-                        <div className='text-[11px] font-medium text-gray-500'>
-                          {source.segment_position || index + 1}
+          <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}>
+                    <div className='group py-3'>
+                      <div className='flex items-center justify-between mb-2'>
+                        <div className='flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
+                          <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
+                          <div className='text-[11px] font-medium text-gray-500'>
+                            {source.segment_position || index + 1}
+                          </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 className='text-[13px] text-gray-800 break-words'>{source.content}</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 className='flex items-center mt-2 text-xs font-medium text-gray-500 flex-wrap'>
+                            <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>
-                    <div className='text-[13px] text-gray-800'>{source.content}</div>
                     {
-                      showHitInfo && (
-                        <div className='flex items-center mt-2 text-xs font-medium text-gray-500'>
-                          <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>
+                      index !== data.sources.length - 1 && (
+                        <div className='my-1 h-[1px] bg-black/5' />
                       )
                     }
-                  </div>
-                  {
-                    index !== data.sources.length - 1 && (
-                      <div className='my-1 h-[1px] bg-black/5' />
-                    )
-                  }
-                </Fragment>
-              ))
-            }
+                  </Fragment>
+                ))
+              }
+            </div>
           </div>
         </div>
       </PortalToFollowElemContent>
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index c5d9af45c2..b3eebb9583 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -192,12 +192,12 @@ const Chat: FC<ChatProps> = ({
       <div className='relative h-full'>
         <div
           ref={chatContainerRef}
-          className={classNames('relative h-full overflow-y-auto', chatContainerClassName)}
+          className={classNames('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
         >
           {chatNode}
           <div
             ref={chatContainerInnerRef}
-            className={`${chatContainerInnerClassName}`}
+            className={`w-full ${chatContainerInnerClassName}`}
           >
             {
               chatList.map((item, index) => {
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 4934339e87..e317b67edb 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -99,7 +99,7 @@ const ChatWrapper = () => {
       return (
         <>
           {!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' />
               <ConfigPanel />
               <div
@@ -132,9 +132,9 @@ const ChatWrapper = () => {
       config={appConfig}
       chatList={chatList}
       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'
-      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}
       onStopResponding={handleStop}
       chatNode={chatNode}
diff --git a/web/app/components/workflow/panel/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
index 2ab3165c14..afd20b7358 100644
--- a/web/app/components/workflow/panel/chat-record/index.tsx
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -103,9 +103,9 @@ const ChatRecord = () => {
               } as any}
               chatList={chatMessageList}
               chatContainerClassName='px-4'
-              chatContainerInnerClassName='pt-6'
+              chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
               chatFooterClassName='px-4 rounded-b-2xl'
-              chatFooterInnerClassName='pb-4'
+              chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
               chatNode={<UserInput />}
               noChatInput
               allToolIcons={{}}
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 4655940037..e7639ddc79 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
@@ -103,9 +103,9 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
         chatList={chatList}
         isResponding={isResponding}
         chatContainerClassName='px-3'
-        chatContainerInnerClassName='pt-6'
+        chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
         chatFooterClassName='px-4 rounded-bl-2xl'
-        chatFooterInnerClassName='pb-4'
+        chatFooterInnerClassName='pb-4 w-full max-w-full mx-auto'
         onSend={doSend}
         onStopResponding={handleStop}
         chatNode={(
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 29fc48f896..8e1c489098 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -88,7 +88,6 @@ const DebugAndPreview = () => {
                   <RiEqualizer2Line className='w-4 h-4' />
                 </ActionButton>
               </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 className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>