ai-assistant-pro 0.0.13 → 0.0.15

package/components/demo/src/main.vue

@@ -6,67 +6,99 @@
                 <img src="../static/logo.png" alt="" style="width: 48px; height: 48px">
                 <span class="title-font">学习助手</span>
             </div>
-            <div class="icon-close" @click="closeMessage">
-                <i class="el-icon-close"></i>
+            <div class="operator-wrap">
+                <chat-type @on-type-change="changeType" :stop="stop"></chat-type>
+                <div class="icon-close" @click="closeMessage">
+                    <i class="el-icon-close"></i>
+                </div>
             </div>
         </div>
-      <template v-if="courseFlag">
-        <div class="ai-main-content">
-          <hot-search v-show="!chatShow"
-                      :resId="resId"
-                      @select-module="selectModule"
-                      @init-info="initInfo"
-                      ></hot-search>
-          <chat v-if="chatShow"
-                ref="chatRef"
-                :resId="resId"
-                :open-course-id="openCourseId"
-                :chatId="chatId"
-                :key-word="aiMessageKeyWord"
-                :message-data="messageList"
-                :chat-major-id="chatMajorId"
-                :show-more-q-a="showMoreQA"
-                :show-file="showFile"
-                @on-reanser="reanserMethod"
-                @on-message-finish="messageFinish"
-          />
-        </div>
-        <div class="tools-wrap">
-          <span @click="addNewChat">新增对话</span>
-          <span @click="clearChat">清空对话</span>
-        </div>
-        <div class="ai-message-send"  @keyup.enter="goChat">
-          <el-input v-model="aiMessage"
-                    type="textarea"
-                    :rows="2"
-                    placeholder="可以提出问题...">
-          </el-input>
-          <div class="ai-send-icon" @click="goChat">
-            <img src="../static/send-icon.png" alt="" style="width: 24px; height: 24px">
-          </div>
+        <template v-if="courseFlag">
+            <div class="ai-main-content">
+                <hot-search v-show="!chatShow"
+                     :resId="resId"
+                     @select-module="selectModule"
+                     @init-info="initInfo"/>
+                <chat v-if="chatShow"
+                    ref="chatRef"
+                    :activeKey="activeKey"
+                    :resId="resId"
+                    :open-course-id="openCourseId"
+                    :chatId="chatId"
+                    :key-word="aiMessageKeyWord"
+                    :message-data="messageList"
+                    :chat-major-id="chatMajorId"
+                    :show-more-q-a="showMoreQA"
+                    :show-file="showFile"
+                    @on-reanser="reanserMethod"
+                    @on-message-finish="messageFinish"
+                  />
+            </div>
+            <div class="tools-wrap">
+                <span @click="addNewChat" v-if="activeKey === 'chat'">新增对话</span>
+                <span @click="clearChat">清空对话</span>
+            </div>
+            <div class="ai-message-send" @keyup.enter="goChat">
+                <el-popover
+                    v-if="activeKey === 'chat'"
+                    popper-class="srkj-tools-agent-content"
+                    placement="top-start"
+                    v-model="formulaVisible"
+                >
+                     <div class="agent-list-container" style="width: 782px; height: 420px">
+                         <iframe :src="`https://zjyw.icve.com.cn/kityformula-editor/kityFormula.html?c=${formulaValue}`"
+                                    ref="editorFrame"
+                                    class="iframe-editor">
+                         </iframe>
+                         <el-button type="primary" class="save-button" @click="saveFormula">保存</el-button>
+                     </div>
+                     <div class="formula" slot="reference" ref="formulaBtn"  @click="formulaValue = ''"></div>
+                 </el-popover>
+                <Editor
+                    v-if="resizeInput"
+                    class="editor-input"
+                    v-model="aiMessage"
+                    :defaultConfig="editorConfig"
+                    :mode="mode"
+                    @onCreated="onCreated"
+                />
+                <div class="ai-send-icon" @click="goChat">
+                     <img src="../static/send-icon.png" alt="" style="width: 24px; height: 24px">
+                </div>
+            </div>
+        </template>
+        <div v-if="!courseFlag" class="message-wrap">
+            <div class="message-line">{{message}}</div>
+            <div class="message-line">不能交流</div>
         </div>
-<!--        <p class="disclaimer">-->
-<!--          此功能公测期间对正式版用户开放-->
-<!--        </p>-->
-      </template>
-      <div v-if="!courseFlag" class="message-wrap">
-        <div class="message-line">{{message}}</div>
-        <div class="message-line">不能交流</div>
-      </div>
     </div>
 </template>
 <script>
 import HotSearch from './hot-search.vue';
 import Chat from './chat.vue';
 import Cookies from "js-cookie";
+import ChatType from "./chat-type.vue";
 import { marked } from 'marked';
-import { getUserInfo } from '../utils/config';
+import { Editor } from '@wangeditor/editor-for-vue'
+import formulaModule from "@wangeditor/plugin-formula"
+import { Boot, DomEditor, SlateTransforms } from "@wangeditor/editor";
+import { getUserInfo, editorCurrentData } from '../utils/config';
 import { newChat, chartClear, getDetailList, countAccess,checkCourseIdIsExist } from '../api/index';
+import { FormulaShow } from '../plugins/Formula-show';
+const formulaInstance = new FormulaShow();
+const formulaShow = {
+    key: 'formulaShow', // 定义 menu key ：要保证唯一、不重复（重要）
+    factory() {
+        return formulaInstance // 把 `YourMenuClass` 替换为你菜单的 class
+    },
+}
 export default {
     name: 'AiAssistant',
     components: {
         HotSearch,
-        Chat
+        Chat,
+        ChatType,
+        Editor
     },
     props: {
         visible: true,
@@ -82,17 +114,21 @@ export default {
     watch: {
         visible() {
           if (this.visible){
+            this.activeKey = 'chat';
             checkCourseIdIsExist(this.resId).then(res=>{
               if (res.flag ==true){
                 this.courseFlag = true;
                 this.queryList();
+                countAccess(this.resId);
               }else{
                 this.courseFlag = false;
                 this.message = res.message;
               }
             });
+            this.registerLatex();
+          } else {
+            this.unloadLatex();
           }
-
         },
     },
     data() {
@@ -108,6 +144,26 @@ export default {
             chatMajorId: '',
             showMoreQA: false,
             showFile: false,
+            activeKey: 'chat',
+            chartIdType: {
+                chat: undefined,
+                image: undefined,
+                translate: undefined,
+                multimodal: undefined
+            },
+            formulaVisible: false,
+            formulaValue :  '',
+            // wangEditor
+            editorConfig: {
+                placeholder: '可以提出问题...',
+                hoverbarKeys: {
+                    formula: {
+                        menuKeys: ['formulaShow'], // “编辑公式”菜单
+                    },
+                },
+            },
+            mode: 'simple',
+            resizeInput: true,
         }
     },
     mounted() {
@@ -116,6 +172,14 @@ export default {
         }
         this.messageList = [];
         getUserInfo(Cookies.get("token"));
+        // 更新传入的 vue 实例
+        formulaInstance.upDataParent(this);
+        try {
+            Boot.registerMenu(formulaShow);
+            Boot.registerModule(formulaModule);
+        } catch (e) {
+            // 重复注册问题
+        }
     },
     methods: {
         closeMessage() {
@@ -124,6 +188,9 @@ export default {
             }
             this.$emit('close');
         },
+        onCreated(editor) {
+            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+        },
         selectModule(hotKey) {
             this.chatShow = true;
             this.aiMessage = hotKey;
@@ -132,9 +199,8 @@ export default {
         showHot() {
             this.chatShow = false;
         },
-        async queryList() {
-            countAccess(this.resId);
-            const listRes = await getDetailList(this.resId);
+        async queryList(type) {
+            const listRes = await getDetailList(this.resId, type);
             if (!listRes || listRes.length < 1) return;
             let currentList = listRes[0].contents.reverse();
             const { chatMajorId } = listRes[0];
@@ -149,9 +215,16 @@ export default {
                         }
                     });
                 }
+                let message = list.content;
+                if (this.activeKey === 'chat') {
+                    message = list.role === 'assistant' ? marked.parse(list.content || '') : list.content.replace(/\n/g, '<br>')
+                }
+                if (this.activeKey === 'image' || this.activeKey === 'translate') {
+                    message = list.content || ','
+                }
                 const obj = {
                     type: list.role === 'assistant' ? 'robot' : 'user',
-                    message: list.role === 'assistant' ? marked.parse(list.content || '') : list.content.replace(/\n/g, '<br>'),
+                    message,
                     zan: list.type === 1,
                     cai: list.type === 2,
                     stop: list.status === 1,
@@ -165,13 +238,18 @@ export default {
                 };
                 cacheArray.push(obj);
             })
-            if (currentList[0]) this.chatId = currentList[0].chatId;
+            if (currentList[0]) {
+                this.chatId = currentList[0].chatId;
+                this.chartIdType.chat = currentList[0].chatId;
+            }
             this.messageList = cacheArray;
             if (this.messageList.length > 0) {
                 this.chatShow = true;
                 setTimeout(() => {
                     this.$refs.chatRef.scrollToBottom();
                 });
+            } else {
+                this.chatShow = false;
             }
         },
         async addNewChat() {
@@ -195,6 +273,7 @@ export default {
             this.resizeChat();
             this.$message.success('对话清除成功！');
             this.chatId = undefined;
+            this.chartIdType[this.activeKey] = undefined;
         },
         goChat(event) {
             if (event.shiftKey) {
@@ -211,7 +290,7 @@ export default {
                 this.$message.error('输入内容为空');
                 return
             }
-            this.aiMessageKeyWord = this.aiMessage;
+            this.aiMessageKeyWord = editorCurrentData(this.editor.getHtml());
             this.chatShow = true;
             this.stop = true;
             setTimeout(() => {
@@ -230,17 +309,96 @@ export default {
         },
         resizeChat() {
             this.messageList = [];
-            this.chatShow = false;
+            if (this.activeKey === 'tab')  this.chatShow = false;
         },
         messageFinish(chatId) {
             this.stop = false;
             this.chatId = chatId;
+            this.chartIdType[this.activeKey] = chatId;
         },
         initInfo(info) {
             const { ifProbe, isShowFile } = info;
             this.showMoreQA = !!ifProbe;
             this.showFile = !!isShowFile;
-        }
+        },
+        changeType(type) {
+            this.activeKey = type;
+            this.chatId = this.chartIdType[type];
+            this.messageList = [];
+            let params = undefined;
+            this.aiMessage = undefined;
+            this.resizeInput = false;
+            if (type === 'chat') {
+                params = undefined;
+            }
+            if (type === 'image') {
+                params = '_comqapicture';
+            }
+            if (type === 'translate') {
+                params = '_comqatranslate';
+            }
+            if (type === 'multimodal') {
+                params = '_comqamodal';
+            }
+            this.queryList(params);
+            setTimeout(() => this.resizeInput = true)
+        },
+        registerLatex() {
+            window.addEventListener('message', this.latexMessage);
+        },
+        unloadLatex(){
+            window.removeEventListener('message', this.latexMessage);
+        },
+        latexMessage(event) {
+            const { mceAction, content } = event.data;
+            if (mceAction === 'insertContent') {
+                const match = content.match(/data-latex="([^"]+)"/);
+                if (match) {
+                    const latexValue = match[1];
+                    let latex = latexValue.replace(/\s/g, ""); // 去掉空格
+                    if (latex !== '\\placeholder') {
+                        const formulaNode = {
+                            type: "formula",
+                            value: latex,
+                            children: [
+                                {
+                                    text: "",
+                                },
+                            ],
+                        };
+                        if (!this.formulaValue) {
+                            this.editor.insertNode(formulaNode);
+                        } else {
+                            // 翻源码得 ↓
+                            this.editor.restoreSelection();
+                            const selectedElem = this.getSelectedElem(this.editor);
+                            const path = DomEditor.findPath(this.editor, selectedElem)
+                            const props = { value: latex };
+                            SlateTransforms.setNodes(this.editor, props, { at: path });
+                        }
+                    }
+                } else {
+                    console.log('公式值获取失败');
+                }
+            }
+        },
+        getSelectedElem(editor) {
+            const node = DomEditor.getSelectedNodeByType(editor, 'formula')
+            if (node == null) return null;
+            return node;
+        },
+        saveFormula() {
+            this.$refs.editorFrame.contentWindow.postMessage('message' ,'*');
+            setTimeout(() => {
+                this.formulaVisible = false;
+            });
+        },
+        editFormula(value) {
+            setTimeout(() => {
+                this.formulaValue = encodeURIComponent(value);
+                this.formulaVisible = true;
+            }, 100);
+        },
     }
 }
 </script>
@@ -324,16 +482,8 @@ export default {
 .ai-main-content {
     position: relative;
     z-index: 1;
-    //height: calc(100% - 53px - 86px - 32px - 17px);
     height: calc(100% - 53px - 86px - 32px);
-    padding: 16px 0 16px 8px;
-}
-.disclaimer {
-    margin: 0;
-    font-size: 14px;
-    color: #cfcfcf;
-    text-align: center;
-    margin-top: 6px;
+    padding: 16px 0 8px 8px;
 }
 .bg-image {
     position: absolute;
@@ -345,25 +495,24 @@ export default {
     border-radius: 16px 0;
 }
 :deep {
-    .ai-message-send {
-        .el-textarea__inner {
+    .editor-input {
+        .w-e-text-container {
+            background: transparent;
             height: 60px;
-            font-size: 16px;
-            resize: none;
-            color: rgba(51,51,51,.75);
-            border: 0;
-            border-radius: 40px;
-            background: linear-gradient(to bottom, #fff, #d8f0fb);
-            padding: 8px 56px 0 24px;
-            &::placeholder {
-                color: rgba(51,51,51,.75);
-            }
-            &::-webkit-scrollbar {
-                width: 0 !important; /* 针对 WebKit 浏览器 */
-            }
         }
     }
 }
+.editor-input {
+    background: #fff;
+    font-size: 16px;
+    color: rgba(51,51,51,.75);
+    border: 0;
+    border-radius: 40px;
+    box-shadow: 0 2px 8px rgba(32, 40, 64, 0.24);
+    background: linear-gradient(to bottom, #fff, #d8f0fb);
+    padding: 0 56px;
+    text-align: left;
+}
 .message-wrap {
   height: calc(100%  - 53px );
   align-items: center;
@@ -376,4 +525,41 @@ export default {
   font-size: 25px;
   margin: 8px 0; /* 上下各 8px 的间距 */
 }
-</style>
+.operator-wrap {
+    display: flex;
+}
+.formula {
+    position: absolute;
+    bottom: 1px;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    margin: 16px;
+    z-index: 1;
+    background: url("../static/formula.png");
+}
+.save-button {
+    position: absolute;
+    right: 24px;
+    bottom: 10px;
+}
+.agent-list-container {
+    position: relative;
+    padding: 24px;
+    border-radius: 16px;
+    background: linear-gradient(103.5deg, rgba(255, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 29%, rgba(255, 255, 255, 1) 71%, rgba(204, 238, 255, 1) 100%);
+}
+.iframe-editor {
+    width: 100%;
+    height: 100%;
+    outline: none;
+    border: none;
+}
+</style>
+<style lang="scss">
+.srkj-tools-agent-content {
+    padding: 2px;
+    border-radius: 16px;
+}
+</style>
+<style src="@wangeditor/editor/dist/css/style.css"></style>

package/components/demo/utils/config.js

@@ -59,4 +59,27 @@ export const cacheMessageList = [
 export const getUserInfo = async (token) => {
     await ssoAuth(token);
     cache.session.setJSON('SRKJ_TOKEN_CACHE', token);
+}
+
+export const editorCurrentData = (html)  => {
+    // 创建一个临时的 div 元素来解析 HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = html;
+
+    // 获取所有的 p 标签
+    const pElements = tempDiv.querySelectorAll('p');
+
+    // 遍历所有的 p 标签
+    pElements.forEach(pElement => {
+        // 遍历 p 标签内的所有 span 节点
+        const spanElements = pElement.querySelectorAll('span[data-w-e-type="formula"]');
+        spanElements.forEach(span => {
+            const formulaValue = span.getAttribute('data-value');
+            // 替换 span 节点为公式文本
+            span.outerHTML = `$$${formulaValue}$$`;
+        });
+    });
+
+    // 获取处理后的 HTML
+    return tempDiv.innerHTML;
 }