From 4ca176bd41eefa5d7366e9186adc23dc77a255a7 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 17 May 2024 14:16:55 +0800
Subject: [PATCH] fix: thumbnails are too large in the chat box #818 (#819)

### What problem does this PR solve?

fix: thumbnails are too large in the chat box #818

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 .../components/chunk-method-modal/index.tsx   | 14 ++------------
 web/src/components/layout-recognize.tsx       | 19 +++++++++++++++++++
 .../knowledge-setting/configuration.tsx       |  9 ++++++++-
 web/src/pages/chat/chat-container/index.less  |  3 +++
 web/src/pages/chat/chat-container/index.tsx   |  5 ++++-
 web/src/pages/chat/share/index.less           |  3 +++
 web/src/pages/chat/share/large.tsx            |  5 ++++-
 7 files changed, 43 insertions(+), 15 deletions(-)
 create mode 100644 web/src/components/layout-recognize.tsx

diff --git a/web/src/components/chunk-method-modal/index.tsx b/web/src/components/chunk-method-modal/index.tsx
index ebb5e30cc1..21dde83d4b 100644
--- a/web/src/components/chunk-method-modal/index.tsx
+++ b/web/src/components/chunk-method-modal/index.tsx
@@ -15,7 +15,6 @@ import {
   Modal,
   Select,
   Space,
-  Switch,
   Tooltip,
 } from 'antd';
 import omit from 'lodash/omit';
@@ -23,6 +22,7 @@ import React, { useEffect, useMemo } from 'react';
 import { useFetchParserListOnMount } from './hooks';
 
 import { useTranslate } from '@/hooks/commonHooks';
+import LayoutRecognize from '../layout-recognize';
 import styles from './index.less';
 
 interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
@@ -228,17 +228,7 @@ const ChunkMethodModal: React.FC<IProps> = ({
             </Form.List>
           </>
         )}
-        {showOne && (
-          <Form.Item
-            name={['parser_config', 'layout_recognize']}
-            label={t('layoutRecognize')}
-            initialValue={true}
-            valuePropName="checked"
-            tooltip={t('layoutRecognizeTip')}
-          >
-            <Switch />
-          </Form.Item>
-        )}
+        {showOne && <LayoutRecognize></LayoutRecognize>}
         {showPages && (
           <Form.Item
             noStyle
diff --git a/web/src/components/layout-recognize.tsx b/web/src/components/layout-recognize.tsx
new file mode 100644
index 0000000000..4fb72027c6
--- /dev/null
+++ b/web/src/components/layout-recognize.tsx
@@ -0,0 +1,19 @@
+import { useTranslate } from '@/hooks/commonHooks';
+import { Form, Switch } from 'antd';
+
+const LayoutRecognize = () => {
+  const { t } = useTranslate('knowledgeDetails');
+  return (
+    <Form.Item
+      name={['parser_config', 'layout_recognize']}
+      label={t('layoutRecognize')}
+      initialValue={true}
+      valuePropName="checked"
+      tooltip={t('layoutRecognizeTip')}
+    >
+      <Switch />
+    </Form.Item>
+  );
+};
+
+export default LayoutRecognize;
diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
index e50156ebf1..80c9140ba5 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
@@ -6,6 +6,7 @@ import {
   useSubmitKnowledgeConfiguration,
 } from './hooks';
 
+import LayoutRecognize from '@/components/layout-recognize';
 import MaxTokenNumber from '@/components/max-token-number';
 import { useTranslate } from '@/hooks/commonHooks';
 import { FormInstance } from 'antd/lib';
@@ -99,11 +100,17 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
           const parserId = getFieldValue('parser_id');
 
           if (parserId === 'naive') {
-            return <MaxTokenNumber></MaxTokenNumber>;
+            return (
+              <>
+                <MaxTokenNumber></MaxTokenNumber>
+                <LayoutRecognize></LayoutRecognize>
+              </>
+            );
           }
           return null;
         }}
       </Form.Item>
+
       <Form.Item>
         <div className={styles.buttonWrapper}>
           <Space>
diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less
index 0ade14b057..502d332688 100644
--- a/web/src/pages/chat/chat-container/index.less
+++ b/web/src/pages/chat/chat-container/index.less
@@ -36,6 +36,9 @@
   // .referenceIcon {
   //   padding: 0 6px;
   // }
+  .thumbnailImg {
+    max-width: 20px;
+  }
 }
 
 .messageItemLeft {
diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx
index 9f062453ce..96b6cdf172 100644
--- a/web/src/pages/chat/chat-container/index.tsx
+++ b/web/src/pages/chat/chat-container/index.tsx
@@ -105,7 +105,10 @@ const MessageItem = ({
                     <List.Item>
                       <Flex gap={'small'} align="center">
                         {fileThumbnail ? (
-                          <img src={fileThumbnail}></img>
+                          <img
+                            src={fileThumbnail}
+                            className={styles.thumbnailImg}
+                          ></img>
                         ) : (
                           <SvgIcon
                             name={`file-icon/${fileExtension}`}
diff --git a/web/src/pages/chat/share/index.less b/web/src/pages/chat/share/index.less
index 54e5550110..1a0e52a6f1 100644
--- a/web/src/pages/chat/share/index.less
+++ b/web/src/pages/chat/share/index.less
@@ -39,6 +39,9 @@
   .messageEmpty {
     width: 300px;
   }
+  .thumbnailImg {
+    max-width: 20px;
+  }
 }
 
 .messageItemLeft {
diff --git a/web/src/pages/chat/share/large.tsx b/web/src/pages/chat/share/large.tsx
index 4e17dda31c..4c0d986c98 100644
--- a/web/src/pages/chat/share/large.tsx
+++ b/web/src/pages/chat/share/large.tsx
@@ -94,7 +94,10 @@ const MessageItem = ({
                     <List.Item>
                       <Flex gap={'small'} align="center">
                         {fileThumbnail ? (
-                          <img src={fileThumbnail}></img>
+                          <img
+                            src={fileThumbnail}
+                            className={styles.thumbnailImg}
+                          ></img>
                         ) : (
                           <SvgIcon
                             name={`file-icon/${fileExtension}`}