Merge pull request #375 from lixinghua123/LLM-lxh

fix: LLM tool text input supports formula editing
open-mmlab · Dec 20, 2023 · d7adbe2 · d7adbe2
2 parents b67bd41 + ea10931
commit d7adbe2
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 16 deletions.
diff --git a/packages/lb-components/src/components/LLMToolView/sidebar/components/answerList/index.tsx b/packages/lb-components/src/components/LLMToolView/sidebar/components/answerList/index.tsx
@@ -146,7 +146,7 @@ const AnswerList = (props: IProps) => {
       defaultActiveKey={
         list.length > 0 ? list.map((i: IAnswerList, index: number) => index) : undefined
       }
-      style={{ margin: '16px 0px' }}
+      style={{ margin: '16px 0px', background: '#fff' }}
     >
       {list.map((i: IAnswerList, index: number) => {
         const {
@@ -261,6 +261,7 @@ const AnswerList = (props: IProps) => {
                 updateValue={(changeValue) => {
                   updateValue({ order: i.order, value: changeValue, key: 'textEdit' });
                 }}
+                answerIndex={index}
               />
             )}
           </Panel>

diff --git a/.../lb-components/src/components/LLMToolView/sidebar/components/textEditor/index.module.scss b/.../lb-components/src/components/LLMToolView/sidebar/components/textEditor/index.module.scss
@@ -3,12 +3,14 @@
 }
 
 .outputDisplay {
+
   .title {
     line-height: 32px;
     margin-bottom: 8px;
   }
 
   .content {
+    border: 1px solid #d9d9d9;
     min-height: 100px;
     overflow: auto;
     max-height: 200px;

diff --git a/packages/lb-components/src/components/LLMToolView/sidebar/components/textEditor/index.tsx b/packages/lb-components/src/components/LLMToolView/sidebar/components/textEditor/index.tsx
@@ -17,10 +17,11 @@ interface IProps {
   textEditObject: ITextList;
   updateValue: (changeValue: string) => void;
   checkMode?: boolean;
+  answerIndex:number;
 }
 
 const TextEditor = (props: IProps) => {
-  const { checkMode, newAnswer, textEditObject, updateValue } = props;
+  const { checkMode, newAnswer, textEditObject, updateValue ,answerIndex} = props;
 
   const { max, min, isLaText } = textEditObject;
   const { TextArea } = Input;
@@ -42,8 +43,9 @@ const TextEditor = (props: IProps) => {
     }
   }, [newAnswer]);
 
-  const insertText = (newText: string) => {
-    const textarea = document.getElementById('inputTextarea') as HTMLInputElement;
+  const insertText = (newText: string,) => {
+    const id = `inputTextarea_${answerIndex}`
+    const textarea = document.getElementById(id) as HTMLInputElement;
 
     const text = textarea.value || '';
     // Get cursor position
@@ -123,7 +125,7 @@ const TextEditor = (props: IProps) => {
           disabled={checkMode}
           showCount={max ? true : false}
           style={{ width: '100%' }}
-          id='inputTextarea'
+          id={`inputTextarea_${answerIndex}`}
         />
       </Form.Item>
       {isLaText && (

diff --git a/...b-components/src/components/LLMToolView/sidebar/components/textInputBox/index.module.scss b/...b-components/src/components/LLMToolView/sidebar/components/textInputBox/index.module.scss
@@ -0,0 +1,26 @@
+.form {
+  margin-bottom: 16px;
+}
+
+.outputDisplay {
+
+  .title {
+    line-height: 32px;
+    margin-bottom: 8px;
+  }
+
+  .content {
+    min-height: 100px;
+    overflow: auto;
+    max-height: 200px;
+    background-color: #ffffff;
+    padding: 4px 12px;
+    border: 1px solid #d9d9d9;
+
+    :global {
+      .markdown-body {
+        font-size: 14px;
+      }
+    }
+  }
+}
diff --git a/packages/lb-components/src/components/LLMToolView/sidebar/components/textInputBox/index.tsx b/packages/lb-components/src/components/LLMToolView/sidebar/components/textInputBox/index.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect } from 'react';
-import { Form, Input } from 'antd';
+import { Form, Input, message } from 'antd';
 import { ILLMToolConfig, ITextList } from '@/components/LLMToolView/types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { isArray } from 'lodash';
+import LatexEditor from '@/components/latexEditor';
+import styles from './index.module.scss';
+import MarkdownView from '@/components/markdownView';
 
 interface IProps {
   textAttribute: ITextList[];
@@ -27,19 +30,68 @@ const TextInputBox = (props: IProps) => {
     form.setFieldsValue({ text: combinResult });
   }, [textConfig, textAttribute]);
 
+  const insertText = ({
+    newText,
+    fieldName,
+    max,
+  }: {
+    newText: string;
+    fieldName: number;
+    max?: number;
+  }) => {
+    const id = `textInput_${fieldName}`;
+    const textarea = document.getElementById(id) as HTMLInputElement;
+
+    const text = textarea.value || '';
+    // Get cursor position
+    const start = textarea?.selectionStart ?? text.length;
+    const end = textarea.selectionEnd ?? text.length;
+
+    // Get cursor character
+    const before = text.substring(0, start);
+    const after = text.substring(end, text.length);
+
+    const newValue = before + newText + after;
+    if (max && newValue?.length > max) {
+      message.error(
+        t('MaximumCharacterError', {
+          num: max,
+        }),
+      );
+      return;
+    }
+    textarea.value = newValue;
+    form.setFields([
+      {
+        name: ['text', fieldName, 'value'],
+        value: newValue,
+        errors: [],
+      },
+    ]);
+
+    updateValue();
+
+    // Position the cursor at the end of the inserted text
+    textarea.selectionStart = start + newText.length;
+    textarea.selectionEnd = start + newText.length;
+
+    // Give TextArea focus
+    textarea.focus();
+  };
+
+  const updateValue = () => {
+    const newText = form.getFieldValue('text');
+    setText(newText);
+  };
+
   return (
-    <Form
-      form={form}
-      onValuesChange={(__, allValues) => {
-        setText(allValues.text);
-      }}
-    >
+    <Form form={form}>
       <Form.List name='text'>
         {(fields, operation) => {
           return (
             <>
               {fields.map((field, index) => {
-                const { max, min, title, tip } = textConfig[field.name] || {};
+                const { max, min, title, tip, isLaText } = textConfig[field.name] || {};
                 const showTextInput = title;
                 const messageError = t('LeastCharacterError', {
                   num: min,
@@ -83,18 +135,26 @@ const TextInputBox = (props: IProps) => {
                                   errors: min ? [messageError] : [],
                                 },
                               ]);
-                              const newText = form.getFieldValue('text');
-                              setText(newText);
+                              updateValue();
                             }}
                           />
                         )}
                       </Form.Item>
                     )}
+
+                    {isLaText && (
+                      <LatexEditor
+                        onSelectLatex={(value) =>
+                          insertText({ newText: value, fieldName: field.name, max })
+                        }
+                        disabled={checkMode}
+                      />
+                    )}
                     {showTextInput && (
                       <Form.Item
                         name={[field.name, 'value']}
                         style={{
-                          marginBottom: 8,
+                          marginBottom: 24,
                         }}
                         rules={[
                           {
@@ -112,10 +172,30 @@ const TextInputBox = (props: IProps) => {
                           maxLength={max}
                           disabled={checkMode}
                           showCount={max ? true : false}
+                          autoSize={{ minRows: 4, maxRows: 10 }}
                           style={{ width: '100%' }}
+                          id={`textInput_${field.name}`}
                         />
                       </Form.Item>
                     )}
+                    {isLaText && (
+                      <Form.Item shouldUpdate={true} noStyle={true}>
+                        {() => {
+                          const inputValue =
+                            form.getFieldValue(['text', field.name, 'value']) || '';
+                          const markdownText = inputValue.replace(/\n/g, '  \n');
+
+                          return (
+                            <div className={styles.outputDisplay}>
+                              <div className={styles.title}>{t('OutputDisplay')}</div>
+                              <div className={styles.content}>
+                                {inputValue ? <MarkdownView value={markdownText} /> : ''}
+                              </div>
+                            </div>
+                          );
+                        }}
+                      </Form.Item>
+                    )}
                   </div>
                 );
               })}