ai-error-assistant-pro 0.0.25 → 0.0.27

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,16 +2,16 @@
     <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">
                         <img src="../static/correct.png"
                              v-if="questionStem.answer.indexOf(item) > -1"
                              alt=""
-                             style="width: 24px">
+                             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"
@@ -37,13 +37,13 @@
             </div>
             <div class="student-answer-part">
                 <div class="check-content" style="width: 24px; margin-right: 16px">
-                    <img src="../static/error.png" style="width: 24px">
+                    <img src="../static/error.png" style="width: 24px; height: 24px">
                 </div>
                 <div v-if="questionStem.type === 'single' || questionStem.type === 'multiple'">
                      <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'">
@@ -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,49 @@ export default {
                 this.analysisData = { key: true };
                 console.log(e);
             }
-        }
+        },
+        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;
+                }
+              });
+        },
     }
 }
 </script>
@@ -228,13 +272,14 @@ export default {
     line-height: 24px;
     font-weight: 700;
     margin: 0;
+}
 
-  .question-stem img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-  }
+:deep(.question-stem img) {
+  width: 50%;
+  height: auto;
+  display: block;
 }
+
 .answer-part {
     margin-top: 24px;
     margin-left: 8px;
@@ -244,6 +289,13 @@ export default {
         margin-right: 16px;
     }
 }
+
+:deep(.answer-part img) {
+  width: 50%;
+  height: auto;
+  display: block;
+}
+
 .answer-list {
     display: flex;
     margin-bottom: 8px;