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 70eb44c19..43618be4f 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 956caaa73..9bb4f5b4a 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 c1aaf2c73..d1d9106da 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 96991c572..f772eb25a 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 56d29a9b4..93e644f06 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 f74051bd5..e13b72ddc 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 bb36839e3..a92712194 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}