ai-error-assistant-pro 0.0.26 → 0.0.28

package/components/demo/src/chat.vue

@@ -13,7 +13,7 @@
             </div>
             <div v-if ="list.type === 'user' && avatarUrl===''" class="robot user">user</div>
             <div :class="{'user-info': list.type === 'user'}" class="robot-message">
-                <div v-html="list.message"></div>
+                <div v-html="renderFormulas(list.message)"></div>
                 <div v-if="list.type === 'robot' && list.links.length > 0 && showFile" class="link">
                     <div v-if="!list.allIdWithStart">
                         <div class="link-title">参考文件</div>
@@ -90,6 +90,9 @@ import ChatTools from './chat-tools.vue';
 import ErrorChat from './error-chat.vue';
 import { marked } from 'marked';
 import { chartClear, sendMessageEventSource, getAutoQuestioning, pdfUrl, pdfUrlBase } from "../api";
+import katex from 'katex';
+import renderMathInElement from 'katex/contrib/auto-render/auto-render.js'
+import 'katex/dist/katex.min.css';
 const controller = new AbortController();
 const signal = controller.signal;
 
@@ -158,7 +161,14 @@ export default {
                 }
             },
             immediate: true
-        }
+        },
+      messageData: {
+          handler() {
+            setTimeout(() => {
+              this.renderKaTeX();
+            })
+          }
+      }
     },
     methods: {
         handleScroll() {
@@ -401,6 +411,66 @@ export default {
             const baseUrl = `${pdfUrlBase}/#/pdf-view?documentUrl=${encodeURIComponent(url)}&pageIndex=${pageIndex}`;
             window.open(baseUrl, '_blank');
         },
+        renderFormulas(text) {
+          const {renderToString} = katex;
+          return text
+              .replace(/\$\$(.*?)\$\$/gs, (match) => {
+                try {
+                  // 渲染块级公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering block formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\$.*?\$/g, (match) => {
+                match = match.replace(/<br>/g, '');
+                try {
+                  // 渲染行内公式
+                  return renderToString(match.slice(1, -1), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering inline formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\\\(.*?\\\)/g, (match) => {
+                try {
+                  // 渲染行内公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering inline formula:', error);
+                  return match;
+                }
+              })
+              .replace(/\\\[[\s\S]*?\\\]/g, (match) => {
+                match = match.replace(/<br>/g, '');
+                try {
+                  // 渲染块级公式
+                  return renderToString(match.slice(2, -2), {displayMode: false});
+                } catch (error) {
+                  console.error('Error rendering block formula:', error);
+                  return match;
+                }
+              });
+        },
+        renderKaTeX() {
+          setTimeout(() => {
+            // 自动渲染页面中的所有 KaTeX 公式
+            if (this.$refs.chatContainer) {
+              renderMathInElement(this.$refs.chatContainer, {
+                delimiters: [
+                  {left: '$$', right: '$$', display: false},
+                  {left: '\(', right: '\)', display: false},
+                  {left: '\[', right: '\]', display: false}
+                ],
+                errorCallback() {
+                  console.log('忽略错误')
+                },
+                ignoredClasses: ['link-content']
+              });
+            }
+          }, 50)
+        },
     },
 }
 </script>
@@ -484,9 +554,6 @@ export default {
     .robot-message {
         p {
             margin: 0;
-            span {
-                color: #fff !important;
-            }
         }
         pre {
             code {

package/components/demo/src/error-chat.vue

@@ -2,7 +2,7 @@
     <div class="error-chat-contain" @scroll="handleScroll">
         <div class="exercises-answer">
             <div class="exercises-answer-bg"></div>
-            <p class="question-stem" v-html="questionStem.title"></p>
+            <p class="question-stem" v-html="renderFormulas(questionStem.title)"></p>
             <div class="answer-part" v-if="questionStem.type === 'single' || questionStem.type === 'multiple'">
                 <div class="answer-list" v-for="(item, index) in questionStem.options" :key="index">
                     <div class="check-content" style="width: 24px">
@@ -11,7 +11,7 @@
                              alt=""
                              style="width: 24px; height: 24px" />
                     </div>
-                    <div class="answer-list" v-html="item"></div>
+                    <div class="answer-list" v-html="renderFormulas(item)"></div>
                 </div>
             </div>
             <div class="answer-part"
@@ -33,7 +33,7 @@
                  style="padding-bottom: 24px"
                  v-if="questionStem.type === 'shortanswer' || questionStem.type === 'gapfilling'">
                 <span style="vertical-align: inherit; display: inline-block">正确答案:</span>
-                <span style="margin-left: 8px; display: inline-block; width: calc(100% - 82px); vertical-align: top;" v-html="questionStem.answer.join(',')"></span>
+                <span style="margin-left: 8px; display: inline-block; width: calc(100% - 82px); vertical-align: top;" v-html="renderFormulas(questionStem.answer.join(','))"></span>
             </div>
             <div class="student-answer-part">
                 <div class="check-content" style="width: 24px; margin-right: 16px">
@@ -43,7 +43,7 @@
                      <div v-for="(item, index) in questionStem.studentAnswer"
                            style="margin-right: 16px"
                            :key="index"
-                           v-html="item">
+                           v-html="renderFormulas(item)">
                      </div>
                 </div>
                 <div v-if="questionStem.type === 'judge'">
@@ -56,7 +56,7 @@
 <!--                    {{ item }}<span v-if="index !== questionStem.studentAnswer.length - 1">,</span>-->
 <!--                </span>-->
                 <div v-if="questionStem.type === 'shortanswer' || questionStem.type === 'gapfilling'">
-                    <span style="margin-left: 8px" v-html="questionStem.studentAnswer.join(',')"></span>
+                    <span style="margin-left: 8px" v-html="renderFormulas(questionStem.studentAnswer.join(','))"></span>
                 </div>
             </div>
         </div>
@@ -64,9 +64,9 @@
              element-loading-text="分析中,请稍后"
              v-loading="!Object.keys(analysisData).length > 0">
             <div class="title-label">题目解析</div>
-            <div class="answer-content" v-html="analysisData.analysis"></div>
+            <div class="answer-content" v-html="renderFormulas(analysisData.analysis)"></div>
             <div class="title-label">错因分析</div>
-            <div class="answer-content" v-html="analysisData.reason"></div>
+            <div class="answer-content" v-html="renderFormulas(analysisData.reason)"></div>
             <div class="title-label" v-if="businessSource !== '2' && analysisData.recommend && analysisData.recommend.length > 0 && !allIdWithStart">
                 推荐资料
             </div>
@@ -89,6 +89,8 @@
 <script>
 import ChatTools from './chat-tools.vue';
 import {erranalysis, pdfUrlBase, retryAnalysis} from '../api/index'
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
 export default {
     name: 'ErrorChart',
     components: {
@@ -197,7 +199,60 @@ export default {
                 this.analysisData = { key: true };
                 console.log(e);
             }
+        },
+      renderFormulas(text) {
+        if (!text) return '';
+        // 如果整个文本包含 LaTeX 命令且没有定界符，整体包裹
+        const hasDelimiter = /\$|\\\(|\\\[/.test(text);
+        if (!hasDelimiter) {
+          text = text.replace(
+              /(\\(?:frac|sqrt|sum|int|cdot|times|geq|leq|neq|pm|div|alpha|beta|gamma|theta|pi|sigma|omega|infty|log|sin|cos|tan|left|right|overline|hat|vec|bar|lim|in|notin|supset|subseteq|ln|Gamma|to)(?:\{[^{}]*(?:\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}[^{}]*)*\}|[^\s{}，。？！、；：\u4e00-\u9fa5])*)/g,
+              (match) => `\\(${match}\\)`
+          );
         }
+        const { renderToString } = katex;
+        return text
+            // 块级公式 $$...$$
+            .replace(/\$\$(.*?)\$\$/gs, (match, p1) => {
+              try {
+                return renderToString(p1, { displayMode: true, throwOnError:
+                      false });
+              } catch (e) {
+                console.error('Block formula error:', e);
+                return match;
+              }
+            })
+            // 行内公式 $...$
+            .replace(/\$(.*?)\$/g, (match, p1) => {
+              try {
+                return renderToString(p1, { displayMode: false, throwOnError:
+                      false });
+              } catch (e) {
+                console.error('Inline formula error:', e);
+                return match;
+              }
+            })
+            // 行内公式 \( ... \)
+            .replace(/\\\((.*?)\\\)/g, (match, p1) => {
+              try {
+                return renderToString(p1, { displayMode: false, throwOnError:
+                      false });
+              } catch (e) {
+                console.error('Inline formula error:', e);
+                return match;
+              }
+            })
+            // 块级公式 \[ ... \]
+            .replace(/\\\[(.*?)\\\]/gs, (match, p1) => {
+              try {
+                return renderToString(p1, { displayMode: true, throwOnError:
+                      false });
+              } catch (e) {
+                console.error('Block formula error:', e);
+                return match;
+              }
+            });
+      },
     }
 }
 </script>