fix: thumbnails are too large in the chat box infiniflow#818 (infinif…

…low#819)

### What problem does this PR solve?

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

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/chunk-method-modal/index.tsx

@@ -15,14 +15,14 @@ import {
   Modal,
   Select,
   Space,
-  Switch,
   Tooltip,
 } from 'antd';
 import omit from 'lodash/omit';
 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

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;

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>

web/src/pages/chat/chat-container/index.less

@@ -36,6 +36,9 @@
   // .referenceIcon {
   //   padding: 0 6px;
   // }
+  .thumbnailImg {
+    max-width: 20px;
+  }
 }
 
 .messageItemLeft {

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}`}

web/src/pages/chat/share/index.less

@@ -39,6 +39,9 @@
   .messageEmpty {
     width: 300px;
   }
+  .thumbnailImg {
+    max-width: 20px;
+  }
 }
 
 .messageItemLeft {

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}`}