feat: fixed an issue where the default value for temperature was not set when creating a new chat and install remark-gfm so that the markdown table can be displayed (#124)

* feat: install remark-gfm so that the markdown table can be displayed

* feat: fixed an issue where the default value for temperature was not set when creating a new chat

web/src/pages/chat/chat-configuration-modal/index.tsx

@@ -1,5 +1,9 @@
 import { ReactComponent as ChatConfigurationAtom } from '@/assets/svg/chat-configuration-atom.svg';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import {
+  ModelVariableType,
+  settledModelVariableMap,
+} from '@/constants/knowledge';
 import { IDialog } from '@/interfaces/database/chat';
 import { Divider, Flex, Form, Modal, Segmented, UploadFile } from 'antd';
 import { SegmentedValue } from 'antd/es/segmented';
@@ -130,6 +134,9 @@ const ChatConfigurationModal = ({
       }
       form.setFieldsValue({
         ...initialDialog,
+        llm_setting:
+          initialDialog.llm_setting ??
+          settledModelVariableMap[ModelVariableType.Precise],
         icon: fileList,
         llm_id: initialDialog.llm_id ?? modelId,
       });

web/src/pages/chat/chat-configuration-modal/model-setting.tsx

@@ -75,7 +75,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
             <Form.Item
               name={['llm_setting', 'temperature']}
               noStyle
-              rules={[{ required: true, message: 'Province is required' }]}
+              rules={[{ required: true, message: 'Temperature is required' }]}
             >
               <Slider className={styles.variableSlider} max={1} step={0.01} />
             </Form.Item>
@@ -83,7 +83,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item
             name={['llm_setting', 'temperature']}
             noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
+            rules={[{ required: true, message: 'Temperature is required' }]}
           >
             <InputNumber
               className={styles.sliderInputNumber}
@@ -103,7 +103,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
             <Form.Item
               name={['llm_setting', 'top_p']}
               noStyle
-              rules={[{ required: true, message: 'Province is required' }]}
+              rules={[{ required: true, message: 'Top_p is required' }]}
             >
               <Slider className={styles.variableSlider} max={1} step={0.01} />
             </Form.Item>
@@ -111,7 +111,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item
             name={['llm_setting', 'top_p']}
             noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
+            rules={[{ required: true, message: 'Top_p is required' }]}
           >
             <InputNumber
               className={styles.sliderInputNumber}
@@ -135,7 +135,9 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
             <Form.Item
               name={['llm_setting', 'presence_penalty']}
               noStyle
-              rules={[{ required: true, message: 'Province is required' }]}
+              rules={[
+                { required: true, message: 'Presence Penalty is required' },
+              ]}
             >
               <Slider className={styles.variableSlider} max={1} step={0.01} />
             </Form.Item>
@@ -143,7 +145,9 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item
             name={['llm_setting', 'presence_penalty']}
             noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
+            rules={[
+              { required: true, message: 'Presence Penalty is required' },
+            ]}
           >
             <InputNumber
               className={styles.sliderInputNumber}
@@ -167,7 +171,9 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
             <Form.Item
               name={['llm_setting', 'frequency_penalty']}
               noStyle
-              rules={[{ required: true, message: 'Province is required' }]}
+              rules={[
+                { required: true, message: 'Frequency Penalty is required' },
+              ]}
             >
               <Slider className={styles.variableSlider} max={1} step={0.01} />
             </Form.Item>
@@ -175,7 +181,9 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item
             name={['llm_setting', 'frequency_penalty']}
             noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
+            rules={[
+              { required: true, message: 'Frequency Penalty is required' },
+            ]}
           >
             <InputNumber
               className={styles.sliderInputNumber}
@@ -195,7 +203,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
             <Form.Item
               name={['llm_setting', 'max_tokens']}
               noStyle
-              rules={[{ required: true, message: 'Province is required' }]}
+              rules={[{ required: true, message: 'Max Tokens is required' }]}
             >
               <Slider className={styles.variableSlider} max={2048} />
             </Form.Item>
@@ -203,7 +211,7 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item
             name={['llm_setting', 'max_tokens']}
             noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
+            rules={[{ required: true, message: 'Max Tokens is required' }]}
           >
             <InputNumber
               className={styles.sliderInputNumber}

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

@@ -15,7 +15,7 @@
     width: 70%;
   }
   .messageItemSectionRight {
-    width: 30%;
+    width: 40%;
   }
   .messageItemContent {
     display: inline-flex;

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

@@ -1,8 +1,14 @@
 import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
+import Image from '@/components/image';
+import NewDocumentLink from '@/components/new-document-link';
+import DocumentPreviewer from '@/components/pdf-previewer';
 import { MessageType } from '@/constants/chat';
+import { useSelectFileThumbnails } from '@/hooks/knowledgeHook';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import { IReference, Message } from '@/interfaces/database/chat';
+import { IChunk } from '@/interfaces/database/knowledge';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Button,
@@ -16,7 +22,10 @@ import {
 } from 'antd';
 import classNames from 'classnames';
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
+import Markdown from 'react-markdown';
 import reactStringReplace from 'react-string-replace';
+import remarkGfm from 'remark-gfm';
+import { visitParents } from 'unist-util-visit-parents';
 import {
   useClickDrawer,
   useFetchConversationOnMount,
@@ -24,14 +33,6 @@ import {
   useSendMessage,
 } from '../hooks';
 
-import Image from '@/components/image';
-import NewDocumentLink from '@/components/new-document-link';
-import DocumentPreviewer from '@/components/pdf-previewer';
-import { useSelectFileThumbnails } from '@/hooks/knowledgeHook';
-import { IChunk } from '@/interfaces/database/knowledge';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import Markdown from 'react-markdown';
-import { visitParents } from 'unist-util-visit-parents';
 import styles from './index.less';
 
 const reg = /(#{2}\d+\${2})/g;
@@ -178,6 +179,7 @@ const MessageItem = ({
               {item.content !== '' ? (
                 <Markdown
                   rehypePlugins={[rehypeWrapReference]}
+                  remarkPlugins={[remarkGfm]}
                   components={
                     {
                       'custom-typography': ({
@@ -243,7 +245,9 @@ const ChatContainer = () => {
   };
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setValue(e.target.value);
+    const value = e.target.value.trim();
+    const nextValue = value.replaceAll('\\n', '\n');
+    setValue(nextValue);
   };
 
   return (