Merge pull request #647 from lihqi/lhq-alpha-0605

feat(lb-components): Enhanced Latex rendering

Author: lihqi

packages/lb-components/src/components/LLMToolView/modelAPIView/index.tsx

@@ -11,6 +11,7 @@ import { InfoCircleFilled, SyncOutlined } from '@ant-design/icons';
 import { LLMViewCls } from '../questionView';
 import { ILLMToolConfig, IModelAPIAnswer } from '../types';
 import { i18n } from '@labelbee/lb-utils';
+import { convertLatexFormat } from '@/utils/LLM';
 
 interface IProps {
   dataFormatType: EDataFormatType;
@@ -32,6 +33,10 @@ const RenderContent = ({
     return <MarkdownView value={answer} />;
   }
 
+  if (dataFormatType === EDataFormatType.Latex) {
+    return <MarkdownView value={convertLatexFormat(answer)} />;
+  }
+
   return <span>{answer}</span>;
 };
 

packages/lb-components/src/components/LLMToolView/questionView/components/header/index.tsx

@@ -8,12 +8,13 @@ import { useTranslation } from 'react-i18next';
 import { Resizable } from 're-resizable';
 import { Radio, Image, Empty } from 'antd';
 import { EDataFormatType, prefix } from '@/constant';
-import { FileTextOutlined } from '@ant-design/icons';
+import { FileTextOutlined, FileMarkdownOutlined } from '@ant-design/icons';
 import MarkdownView from '@/components/markdownView';
 import { isObject, isString } from 'lodash';
 import { i18n } from '@labelbee/lb-utils';
 import ImgFailCn from '@/assets/annotation/LLMTool/imgFail_cn.svg';
 import ImgFailEn from '@/assets/annotation/LLMTool/imgFail_en.svg';
+import { convertLatexFormat } from '@/utils/LLM';
 
 interface IProps {
   question:
@@ -74,7 +75,17 @@ export const RenderQuestion = ({
 
   return (
     <div style={{ whiteSpace: 'pre-wrap' }}>
-      {dataFormatType === EDataFormatType.Markdown ? <MarkdownView value={textValue} /> : textValue}
+      {(() => {
+        // 根据不同的数据格式类型渲染不同的视图
+        switch (dataFormatType) {
+          case EDataFormatType.Markdown:
+            return <MarkdownView value={textValue} />;
+          case EDataFormatType.Latex:
+            return <MarkdownView value={convertLatexFormat(textValue)} />;
+          default:
+            return textValue;
+        }
+      })()}
     </div>
   );
 };
@@ -141,6 +152,9 @@ export const ToggleDataFormatType = (props: {
         >
           <FileTextOutlined />
         </Radio.Button>
+        <Radio.Button value={EDataFormatType.Latex} style={{ textAlign: 'center', width: '52px' }}>
+          <FileMarkdownOutlined />
+        </Radio.Button>
       </Radio.Group>
       <span style={{ marginLeft: '8px', width: '4px', background: '#1890ff' }} />
     </span>

packages/lb-components/src/components/LLMToolView/questionView/index.tsx

@@ -23,6 +23,7 @@ import Header from './components/header';
 import ImgView from './components/imgView';
 import { isString } from 'lodash';
 import AudioView from './components/audioView';
+import { convertLatexFormat } from '@/utils/LLM';
 
 interface IProps {
   hoverKey?: number;
@@ -59,6 +60,11 @@ export const RenderAnswer = ({
   if (dataFormatType === EDataFormatType.Markdown) {
     return <MarkdownView value={i?.newAnswer ?? i?.answer} />;
   }
+
+  if (dataFormatType === EDataFormatType.Latex) {
+    return <MarkdownView value={convertLatexFormat(i?.newAnswer ?? i?.answer)} />;
+  }
+
   if (isTextControl) {
     return (
       <div style={{ width: '100%', overflowWrap: 'break-word' }}>

packages/lb-components/src/constant/index.tsx

@@ -27,6 +27,7 @@ export const componentCls = `${prefix}-component`;
 export enum EDataFormatType {
   Default = 'default', // 原文
   Markdown = 'markdown', // markdown
+  Latex = 'latex', // latex  
 }
 
 // LLM工具的数据类型

packages/lb-components/src/utils/LLM.ts

@@ -0,0 +1,14 @@
+/**
+ * 将 LaTeX 数学公式从 \(...\) 格式转换为 $...$ 格式
+ * @param latexContent - 包含 LaTeX 数学公式的原始字符串
+ * @returns 转换后的字符串，其中数学公式使用 $...$ 格式
+ */
+export const convertLatexFormat = (latexContent: string) => {
+  try {
+    // 匹配 \( ... \) 并替换为 $...$
+    return latexContent.replace(/\\\((.*?)\\\)/g, (_, formula) => `$${formula.trim()}$`);
+  } catch (error) {
+    // 发生错误时返回原始字符串
+    return latexContent;
+  }
+};