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 70eb44c1..43618be4 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 956caaa7..9bb4f5b4 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 c1aaf2c7..d1d9106d 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 96991c57..f772eb25 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 56d29a9b..93e644f0 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 f74051bd..e13b72dd 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 bb36839e..a9271219 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}