ai-error-assistant-mobile 0.0.13 → 0.0.14

package/components/demo/src/chat.vue

@@ -5,7 +5,7 @@
          :class="{'user-list': list.type === 'user'}"
          class="message">
       <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>
@@ -82,6 +82,9 @@ import ChatTools from './chat-tools.vue';
 import ErrorChat from './error-chat.vue';
 import {marked} from 'marked';
 import {chartClear, sendMessageEventSource, getAutoQuestioning, pdfUrlBase} from "../api";
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+
 
 const controller = new AbortController();
 const signal = controller.signal;
@@ -364,6 +367,48 @@ 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;
+            }
+          });
+    },
   },
 }
 </script>
@@ -421,8 +466,8 @@ export default {
       border-radius: 0.25rem 1rem 1rem 1rem;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       min-width: 120px;
-      max-width: 85%;
-      padding: 0.75rem;
+      max-width: 100%;
+      padding: 12px;
     }
   }
 }
@@ -502,6 +547,27 @@ export default {
     font-size: 0.875rem;
   }
 
+  :deep(table) {
+    border-collapse: collapse;
+    margin: 16px 0;
+    font-size: 14px;
+  }
+
+  :deep(th),
+  :deep(td) {
+    border: 1px solid #e0e0e0;
+    text-align: left;
+  }
+
+  :deep(th) {
+    background: #f3f2ff;
+    font-weight: 600;
+  }
+
+  :deep(li) {
+    list-style: none;
+  }
+
   :deep(a) {
     color: #6050f0;
     text-decoration: none;

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

@@ -2,7 +2,7 @@
   <div class="error-chat-contain">
     <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">
           </div>
-          <div class="answer-list" v-html="item"></div>
+          <div class="answer-list" v-html="renderFormulas(item)"></div>
         </div>
       </div>
       <div class="answer-part"
@@ -44,7 +44,7 @@
           <div v-for="(item, index) in questionStem.studentAnswer"
                style="margin-right: 16px; font-size: 0.875rem; margin-bottom: 0.5rem;"
                :key="index"
-               v-html="item">
+               v-html="renderFormulas(item)">
           </div>
         </div>
         <div v-if="questionStem.type === 'judge'">
@@ -65,9 +65,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">
         推荐资料
@@ -90,6 +90,8 @@
 <script>
 import ChatTools from './chat-tools.vue';
 import {erranalysis, retryAnalysis,pdfUrlBase} from '../api/index'
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
 
 export default {
   name: 'ErrorChart',
@@ -205,7 +207,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>

package/components/demo/src/main.vue

@@ -400,15 +400,14 @@ export default {
 
   .ai-main-content {
     position: relative;
-    height: calc(100% - 250px);
+    height: calc(100% - 200px);
   }
 
   .disclaimer {
-    margin: 0;
     font-size: 14px;
     color: #cfcfcf;
     text-align: center;
-    margin-top: 6px;
+    margin: 6px 0 0;
   }
 
   .message-wrap {