feat: set the object-fit attribute of the chunk image to contain so that the...

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

@@ -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">

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

 .image {
   width: 100px !important;
-  min-width: 100px;
+  object-fit: contain;
 }
 
 .imagePreview {
-  width: 600px;
+  max-width: 50vw;
+  max-height: 50vh;
+  object-fit: contain;
 }
 
 .content {

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

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}

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 = () =>

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

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}