From 37cc673098284746703e2fcd5106a199c5dc9940 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 28 Mar 2024 11:42:40 +0800
Subject: [PATCH] feat: set the object-fit attribute of the chunk image to
 contain so that the image is not stretched and if the chunk number of the
 knowledge base is greater than 0, set the embedding model to disabled (#160)

* feat: if the chunk number of the knowledge base is greater than 0, set the embedding model to disabled

* feat: set the object-fit attribute of the chunk image to contain so that the image is not stretched
---
 web/src/components/max-token-number.tsx                   | 2 +-
 .../knowledge-chunk/components/chunk-card/index.less      | 6 ++++--
 .../knowledge-chunk/components/chunk-card/index.tsx       | 2 +-
 .../components/knowledge-setting/configuration.tsx        | 5 +++--
 .../add-knowledge/components/knowledge-setting/hooks.ts   | 8 +++++---
 web/src/pages/chat/chat-container/index.less              | 8 ++++++--
 web/src/pages/chat/chat-container/index.tsx               | 2 +-
 7 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/web/src/components/max-token-number.tsx b/web/src/components/max-token-number.tsx
index 70eb44c198..43618be4fc 100644
--- a/web/src/components/max-token-number.tsx
+++ b/web/src/components/max-token-number.tsx
@@ -3,7 +3,7 @@ import { Flex, Form, InputNumber, Slider } from 'antd';
 const MaxTokenNumber = () => {
   return (
     <Form.Item
-      label="Token number"
+      label="Chunk token number"
       tooltip="It determine the token number of a chunk approximately."
     >
       <Flex gap={20} align="center">
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
index 956caaa73a..9bb4f5b4a1 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
@@ -1,10 +1,12 @@
 .image {
   width: 100px !important;
-  min-width: 100px;
+  object-fit: contain;
 }
 
 .imagePreview {
-  width: 600px;
+  max-width: 50vw;
+  max-height: 50vh;
+  object-fit: contain;
 }
 
 .content {
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
index c1aaf2c73c..d1d9106da5 100644
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
@@ -55,7 +55,7 @@ const ChunkCard = ({
         <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
         {item.img_id && (
           <Popover
-            placement="topRight"
+            placement="right"
             content={
               <Image id={item.img_id} className={styles.imagePreview}></Image>
             }
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 96991c5723..f772eb25ae 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx
@@ -15,7 +15,7 @@ const { Option } = Select;
 const ConfigurationForm = ({ form }: { form: FormInstance }) => {
   const { submitKnowledgeConfiguration, submitLoading } =
     useSubmitKnowledgeConfiguration();
-  const { parserList, embeddingModelOptions } =
+  const { parserList, embeddingModelOptions, disabled } =
     useFetchKnowledgeConfigurationOnMount(form);
 
   const onFinishFailed = (errorInfo: any) => {
@@ -90,6 +90,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         <Select
           placeholder="Please select a embedding model"
           options={embeddingModelOptions}
+          disabled={disabled}
         ></Select>
       </Form.Item>
       <Form.Item
@@ -98,7 +99,7 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => {
         tooltip="The instruction is at right."
         rules={[{ required: true }]}
       >
-        <Select placeholder="Please select a chunk method">
+        <Select placeholder="Please select a chunk method" disabled={disabled}>
           {parserList.map((x) => (
             <Option value={x.value} key={x.value}>
               {x.label}
diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
index 56d29a9b46..93e644f062 100644
--- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
@@ -41,8 +41,6 @@ export const useSubmitKnowledgeConfiguration = () => {
 };
 
 export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
-  // const [form] = Form.useForm();
-
   const knowledgeDetails = useSelectKnowledgeDetails();
   const parserList = useSelectParserList();
   const embeddingModelOptions = useSelectLlmOptions();
@@ -69,7 +67,11 @@ export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
     });
   }, [form, knowledgeDetails]);
 
-  return { parserList, embeddingModelOptions };
+  return {
+    parserList,
+    embeddingModelOptions,
+    disabled: knowledgeDetails.chunk_num > 0,
+  };
 };
 
 export const useSelectKnowledgeDetailsLoading = () =>
diff --git a/web/src/pages/chat/chat-container/index.less b/web/src/pages/chat/chat-container/index.less
index f74051bd57..e13b72ddca 100644
--- a/web/src/pages/chat/chat-container/index.less
+++ b/web/src/pages/chat/chat-container/index.less
@@ -47,16 +47,20 @@
 }
 
 .referencePopoverWrapper {
-  width: 50vw;
+  max-width: 50vw;
 }
 
 .referenceChunkImage {
   width: 10vw;
+  object-fit: contain;
 }
 
 .referenceImagePreview {
-  width: 600px;
+  max-width: 45vw;
+  max-height: 45vh;
 }
 .chunkContentText {
   .chunkText;
+  max-height: 45vh;
+  overflow-y: auto;
 }
diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx
index bb36839e3d..a92712194a 100644
--- a/web/src/pages/chat/chat-container/index.tsx
+++ b/web/src/pages/chat/chat-container/index.tsx
@@ -95,7 +95,7 @@ const MessageItem = ({
           className={styles.referencePopoverWrapper}
         >
           <Popover
-            placement="topRight"
+            placement="left"
             content={
               <Image
                 id={chunkItem?.img_id}