ai-assistant-pro 0.0.13 → 0.0.15

package/components/demo/api/index.js

@@ -78,9 +78,10 @@ export const pustReanswerToTeacher = (params) => {
     });
 }
 
-export const getDetailList = (resId) => {
+export const getDetailList = (resId, aiId) => {
     return request({
         url: prefix + `/assistant/detail/v2/${resId}`,
+        params: { aiId },
         method: 'get',
     });
 }
@@ -121,7 +122,13 @@ export async function getAutoQuestioning(iaId, message) {
         messages: message,
     });
 }
-
+/**
+ * 发起聊天接口(正常聊天)
+ * @param params 请求参数
+ * @param signal signal 对象
+ * @param onmessage 回调函数
+ * @returns 返回节点详情数据
+ * */
 export async function sendMessageEventSource(params, signal, onmessage) {
     return fetchEventSource(`${baseURL}${prefix}/assistant/conversation?token=${cache.session.getJSON('SRKJ_TOKEN_CACHE')}`, {
         method: 'POST',
@@ -134,4 +141,34 @@ export async function sendMessageEventSource(params, signal, onmessage) {
         body: JSON.stringify(params),
         onmessage,
     });
+}
+
+/**
+ * 发起聊天接口(图文多模态翻译)
+ * @param params 请求参数
+ * @param signal signal 对象
+ * @param onmessage 回调函数
+ * @returns 返回节点详情数据
+ * */
+export async function sendMessageMoreSource(params, signal, onmessage) {
+    return fetchEventSource(`${baseURL}${prefix}/assistant/qa/system-qa/stream?token=${cache.session.getJSON('SRKJ_TOKEN_CACHE')}`, {
+        method: 'POST',
+        signal: signal,
+        openWhenHidden: true,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(params),
+        onmessage,
+    });
+}
+/**
+ * 自动追问
+ * @param params 请求参数
+ * @returns 返回节点详情数据
+ */
+export async function loopChatDetail(params) {
+    return request.post(`${prefix}/assistant/qa/get-session-dialog`, {
+       ...params
+    });
 }

package/components/demo/plugins/Formula-show.js

@@ -0,0 +1,52 @@
+export class FormulaShow {                       // JS 语法
+    constructor(parent) {
+        this.title = '编辑' // 自定义菜单标题
+        this.tag = 'button'
+        this.parent = parent;
+    }
+    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
+    isActive(editor) {                      // JS 语法
+        return false
+    }
+    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
+    getValue(editor) {                               // JS 语法
+        return ''
+    }
+    upDataParent(parent) {
+        this.parent = parent;
+    }
+    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
+    isDisabled(editor) {                     // JS 语法
+        return false
+    }
+    // 点击菜单时触发的函数
+    exec(editor, value) {
+        // Modal menu ，这个函数不用写，空着即可
+        const [currentValue] = editor.getFragment();
+
+        if (currentValue) {
+            this.parent.editFormula(currentValue.children[0].value);
+        } else {
+            console.log('currentValue ger error');
+        }
+
+    }
+    // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
+    getModalPositionNode(editor) {                             // JS 语法
+        return null // modal 依据选区定位
+    }
+    // 定义 modal 内部的 DOM Element
+    getModalContentElem(editor) {                        // JS 语法
+        const $content = $('<div></div>')
+        const $button = $('<button>do something</button>')
+        $content.append($button)
+
+        $button.on('click', () => {
+            editor.insertText(' hello ')
+        })
+
+        return $content[0] // 返回 DOM Element 类型
+
+        // PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
+    }
+}

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

@@ -1,16 +1,18 @@
 <template>
     <div class="robot-tools">
-        <div class="robot-reanswer"
-             style="margin-bottom: 8px"
-             v-if="(listData.stop || listData.finish && !sending) && isLast"
-             @click="reAnswer(listData)">
-            <i class="el-icon-refresh-right"></i>
-            重新回答
-        </div>
-        <div class="stopMsg" style="color: #cfcfcf; cursor: default" v-if="listData.stop">已停止生成</div>
-        <div class="stopMsg"
-             @click="stopChat(listData)"
-             v-if="!listData.stop && !listData.finish  && !sending">停止输出</div>
+        <template v-if="activeKey === 'chat'">
+            <div class="robot-reanswer"
+                 style="margin-bottom: 8px"
+                 v-if="(listData.stop || listData.finish && !sending) && isLast"
+                 @click="reAnswer(listData)">
+                <i class="el-icon-refresh-right"></i>
+                重新回答
+            </div>
+            <div class="stopMsg" style="color: #cfcfcf; cursor: default" v-if="listData.stop">已停止生成</div>
+            <div class="stopMsg"
+                 @click="stopChat(listData)"
+                 v-if="!listData.stop && !listData.finish  && !sending">停止输出</div>
+        </template>
         <div class="right-tools">
             <el-tooltip content="赞" effect="light" placement="top">
                 <div class="tools-icon" @click="doZan(listData)">
@@ -90,6 +92,10 @@ export default {
             type: Boolean,
             default: false
         },
+        activeKey: {
+            type: String,
+            default: 'chat',
+        },
     },
     data() {
         return {

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

@@ -0,0 +1,103 @@
+<template>
+    <div class="chat-tab-wrap">
+        <div class="chat-tab-button-wrap"
+             :class="{'chat-tab-button-active': activeKey === 'chat'}">
+            <div class="chat-tab-button chat-button" @click="changeType('chat')"></div>
+        </div>
+        <div class="chat-tab-button-wrap"
+             :class="{'chat-tab-button-active': activeKey === 'image'}">
+            <div class="chat-tab-button image-button" @click="changeType('image')"></div>
+        </div>
+<!--        <div class="chat-tab-button-wrap"-->
+<!--             :class="{'chat-tab-button-active': activeKey === 'translate'}">-->
+<!--            <div class="chat-tab-button translate-button" @click="changeType('translate')"></div>-->
+<!--        </div>-->
+<!--        <div class="chat-tab-button-wrap"-->
+<!--             :class="{'chat-tab-button-active': activeKey === 'multimodal'}">-->
+<!--            <div class="chat-tab-button multimodal-button" @click="changeType('multimodal')"></div>-->
+<!--        </div>-->
+    </div>
+</template>
+<script>
+export default {
+    name: 'ChatType',
+    props: {
+        stop: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            activeKey: 'chat',
+        }
+    },
+    methods: {
+        changeType(type) {
+            if (this.stop) {
+                this.$message.warning('对话正在进行中，请稍后重试');
+                return false;
+            }
+            this.activeKey = type;
+            this.$emit('on-type-change', type);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.chat-tab-wrap {
+    display: flex;
+    padding-top: 12px;
+    padding-right: 16px;
+    .chat-tab-button {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        display: inline-block;
+    }
+    .chat-tab-button-wrap {
+        width: 32px;
+        height: 32px;
+        border-radius: 12px;
+        background: transparent;
+        text-align: center;
+        line-height: 43px;
+        margin-right: 32px;
+    }
+    .chat-button {
+        background-image: url("../static/message.png");
+        background-size: 100%;
+    }
+    .image-button {
+        background-image: url("../static/image.png");
+        background-size: 100%;
+    }
+    .translate-button {
+        background-image: url("../static/translate.png");
+        background-size: 100%;
+    }
+    .multimodal-button {
+        background-image: url("../static/multimodal.png");
+        background-size: 100%;
+    }
+    .chat-tab-button-active {
+        background: linear-gradient(135deg, rgb(96, 160, 255) 0%, rgb(48, 96, 255) 100%);
+        .chat-button {
+            background-image: url("../static/message-active.png");
+            background-size: 100%;
+        }
+        .image-button {
+            background-image: url("../static/image-active.png");
+            background-size: 100%;
+        }
+        .translate-button {
+            background-image: url("../static/translate-active.png");
+            background-size: 100%;
+        }
+        .multimodal-button {
+            background-image: url("../static/multimodal-active.png");
+            background-size: 100%;
+        }
+    }
+}
+</style>

package/components/demo/src/chat.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="chat-contain" ref="chatContainer">
-        <div v-for="(list, index) in messageData" :key="index"
+        <div v-for="(list, index) in messageData"
              :class="{'user-list': list.type === 'user'}"
              class="message">
             <div v-if="list.type === 'robot'" class="robot">
@@ -9,35 +9,41 @@
             </div>
             <div v-else class="robot user">user</div>
             <div :class="{'user-info': list.type === 'user'}" class="robot-message">
-                <div v-html="list.message"></div>
+                <div v-html="list.message" v-if="list.type === 'user' || activeKey !== 'image'"></div>
+                <div class="image-wrap" v-if="list.type === 'robot' && activeKey === 'image'">
+                    <div v-loading="!list.message" style="min-height: 50px">
+                        <img :src="img || noImage" alt="" v-for="img in list.message && list.message.split(',')">
+                    </div>
+                </div>
                 <div v-if="list.type === 'robot' && list.links.length > 0 && showFile" class="link">
                     <div v-if="!list.allIdWithStart">
                         <div class="link-title">参考文件</div>
                         <div class="link-content">
                             <template v-for="item in list.links" >
-                                <div class="links" v-if="!item.title.startsWith(chatMajorId)">
+                                <template v-if="!item.title.startsWith(chatMajorId)">
+                                    <div class="links">
                                     <span>{{ `《${item.title}》` }} 共
                                         <span style="font-weight: bold">
                                             {{ item.fileDTOS.length }}
                                         </span>
                                         处引用
                                     </span>
-                                </div>
-                                <div
-                                    v-for="(pdf, index) in item.fileDTOS"
-                                    class="link-part-container"
-                                    :key="index"
-                                >
+                                    </div>
+                                    <div
+                                        v-for="pdf in item.fileDTOS"
+                                        class="link-part-container"
+                                    >
                                     <span class="link-list-part">
                                         {{ pdf.matchContent }}
                                     </span>
-                                    <span
-                                        class="link-list-button"
-                                        @click="seeDetail(pdf, item.documentUrl)"
-                                    >
+                                        <span
+                                            class="link-list-button"
+                                            @click="seeDetail(pdf, item.documentUrl)"
+                                        >
                                         点击查看
                                     </span>
-                                </div>
+                                    </div>
+                                </template>
                             </template>
                         </div>
                     </div>
@@ -68,6 +74,7 @@
                 </div>
                 <chat-tools v-if="list.type === 'robot'"
                             :chatId="chatId"
+                            :activeKey="activeKey"
                             :detail-data="list"
                             :sending="list.sending"
                             :resId="resId"
@@ -82,8 +89,19 @@
 <script>
 import { errorList, cacheMessageList } from '../utils/config';
 import ChatTools from './chat-tools.vue';
-import { sendMessageEventSource, getAutoQuestioning, pdfUrl, pdfUrlBase } from "../api";
+import {
+    sendMessageEventSource,
+    getAutoQuestioning,
+    pdfUrl,
+    pdfUrlBase,
+    sendMessageMoreSource,
+    loopChatDetail
+} from "../api";
 import { marked } from 'marked';
+import noImage from '../static/no-image.png';
+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;
 
@@ -109,6 +127,10 @@ export default {
             type: String,
             default: '',
         },
+        activeKey: {
+            type: String,
+            default: 'chat',
+        },
         chatMajorId: {
             type: String,
             default: undefined,
@@ -133,6 +155,7 @@ export default {
             errors: [],
             errorList: errorList,
             finish: false,
+            noImage,
             cacheKeyWord: '' // 由于外部需要快速清掉 keyword 但是存在重新发送请求的情况,因此需要一个混存记录
         }
     },
@@ -150,6 +173,14 @@ export default {
                 }
             },
             immediate: true
+        },
+        messageData: {
+            handler() {
+                setTimeout(() => {
+                    this.renderKaTeX();
+                })
+            },
+            immediate: true
         }
     },
     methods: {
@@ -212,9 +243,18 @@ export default {
                     this.makeAutoMessage();
                 });
             }
-            await sendMessageEventSource(params, signal, res => {
-                this.makeMessageLine(res, list);
-            });
+            if (this.activeKey === 'chat') {
+                await sendMessageEventSource(params, signal, res => {
+                    this.makeMessageLine(res, list);
+                });
+            } else {
+                if (this.activeKey === 'image') params.messageList[0].aiId = '_comqapicture';
+                if (this.activeKey === 'translate') params.messageList[0].aiId = '_comqatranslate';
+                if (this.activeKey === 'multimodal') params.messageList[0].aiId = '_comqamodal';
+                await sendMessageMoreSource(params, signal, res => {
+                    this.makeMessageLine(res, list, params);
+                });
+            }
         },
         makeAutoMessage() {
             const cacheMessage = [];
@@ -229,38 +269,75 @@ export default {
                 this.makeAutoQuestioning(cacheMessage);
             }
         },
-        makeMessageLine(res, list) {
-            const { content, status, chatId, msgId, parentMsgId, reference, commonKey, connectUrl } = JSON.parse(res.data);
+        makeMessageLine(res, list, params) {
+            const {
+                content,
+                status,
+                chatId,
+                msgId,
+                parentMsgId,
+                reference,
+                commonKey,
+                connectUrl,
+                sessionId
+            } = JSON.parse(res.data);
             let index = list ? list.index : this.messageData.length - 1;
             const currentList = this.messageData[index];
             let allIdWithStart = true;
             // 结束标识
             if (status === 2 || status === 1) {
-                if (commonKey) {
-                    currentList.sending = true;
-                    this.postMessage(list, commonKey, parentMsgId);
+                // 普通对话
+                if (this.activeKey === 'chat' || this.activeKey === 'translate') {
+                    if (commonKey) {
+                        currentList.sending = true;
+                        this.postMessage(list, commonKey, parentMsgId);
+                        return;
+                    }
+                    currentList.finish = true;
+                    if (reference) {
+                        currentList.links = JSON.parse(reference);
+                        currentList.links.map((item) => {
+                            if (!item.title.startsWith(this.chatMajorId)) {
+                                allIdWithStart = false;
+                            }
+                        });
+                    }
+                    if (connectUrl) {
+                        currentList.connectUrl = JSON.parse(connectUrl);
+                    }
+                    currentList.allIdWithStart = allIdWithStart;
+                    this.messageFinish(chatId);
                     return;
-                }
-                currentList.finish = true;
-                if (reference) {
-                    currentList.links = JSON.parse(reference);
-                    currentList.links.map((item) => {
-                        if (!item.title.startsWith(this.chatMajorId)) {
-                            allIdWithStart = false;
+                    // 文生图
+                } else if (this.activeKey === 'image') {
+                    // 轮训查询
+                    let count = 0;
+                    const loopChatInfo = async () => {
+                        const data = await loopChatDetail({
+                            msgId,
+                            chatId,
+                            sessionId,
+                            aiId: params.messageList[0].aiId
+                        });
+                        if (!data) {
+                            count++;
+                            if (count <= 5) {
+                                setTimeout(() => loopChatInfo(), 10000)
+                            } else {
+                                currentList.message = ',';
+                                this.messageFinish(chatId, 'image');
+                            }
+                        } else {
+                            currentList.message = data;
+                            this.messageFinish(chatId, 'image');
                         }
-                    });
-                }
-                if (connectUrl) {
-                    currentList.connectUrl = JSON.parse(connectUrl);
+                    }
+                    loopChatInfo();
                 }
-                currentList.allIdWithStart = allIdWithStart;
-                this.cacheKeyWord = '';
-                this.finish = true;
-                this.$emit('on-message-finish', chatId);
-                return;
             }
             currentList.cacheMessage += content;
-            currentList.message = marked.parse(currentList.cacheMessage);
+            const renderFormulasTest = this.renderFormulas( currentList.cacheMessage);
+            currentList.message = marked.parse(renderFormulasTest);
             currentList.msgId = msgId;
             currentList.parentMsgId = parentMsgId;
             currentList.chatId = chatId;
@@ -270,7 +347,12 @@ export default {
             // 防止出现调用基础模型前导致停止回答id错误
             setTimeout(() =>  currentList.sending = false,500);
         },
-        async makeAutoQuestioning (messages) {
+        messageFinish(chatId, type) {
+            this.cacheKeyWord = '';
+            this.finish = true;
+            this.$emit('on-message-finish', chatId, type || 'chat');
+        },
+        async makeAutoQuestioning(messages) {
             // 首次不触发
             if (messages.length <= 2) return;
             const autoRes = await getAutoQuestioning(this.chatMajorId, messages);
@@ -283,7 +365,7 @@ export default {
             this.messageData[this.messageData.length - 1].followUps =
                 followUps.length > 3 ? followUps.splice(0, 3) : followUps;
         },
-        onStopChat(list){
+        onStopChat(list) {
             this.$emit('on-message-finish', list.chatId)
         },
         selectModule(message) {
@@ -299,11 +381,48 @@ export default {
             this.postMessage(list);
             this.$emit('on-reanser');
         },
-        seeDetail(pdfInfo, url){
+        seeDetail(pdfInfo, url) {
             const { pageIndex } = pdfInfo;
             const baseUrl = `${pdfUrlBase}/#/pdf-view?documentUrl=${pdfUrl}${encodeURIComponent(url)}&pageIndex=${pageIndex}`;
             window.open(baseUrl, '_blank');
         },
+        renderFormulas(text) {
+            const { renderToString } = katex;
+            return text.replace(/\\\(.*?\\\)/g, (match) => {
+                try {
+                    // 渲染行内公式
+                    return renderToString(match.slice(2, -2), { displayMode: false });
+                } catch (error) {
+                    console.error('Error rendering inline formula:', error);
+                    return match;
+                }
+            }).replace(/\\\[.*?\\\]/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 公式
+                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>
@@ -472,4 +591,11 @@ export default {
         cursor: pointer;
     }
 }
+.image-wrap {
+    img {
+        width: 256px;
+        height: 256px;
+        margin-right: 6px;
+    }
+}
 </style>