centaline-data-driven-v3 0.0.83 → 0.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven-v3",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "private": false,
   "description": "centaline-data-driven-v3",
   "main": "dist/centaline-data-driven-v3.umd.js",

package/src/components/web/AIChat.vue

@@ -3,12 +3,10 @@
         <!-- 头部 -->
         <div class="header">
             <div class="header-item">
-                <el-icon class="ico-button" @click="hideAI()">
-                    <DArrowLeft />
-                </el-icon>
+                <img class="ico-button" :src="util.getAssetsImage('AIChat.png')" @click="hideAI()">
             </div>
             <div class="header-item" v-if="model.controlLabel">
-                <h3 style="line-height: 25px;">
+                <h3 style="line-height: 35px;">
                     {{ model.controlLabel }}</h3>
             </div>
         </div>
@@ -19,10 +17,11 @@
                     :class="{ 'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai' }">
                     <template v-if="message.type == 'table'">
                         <div :style="{ 'width': tablewidth - 70 + 'px' }">
-                             <div v-if="JSON.parse(message.content).title" style="margin-bottom: 10px;" v-html="JSON.parse(message.content).title"></div>
+                            <div v-if="JSON.parse(message.content).title" style="margin-bottom: 10px;"
+                                v-html="JSON.parse(message.content).title"></div>
                             <template v-for="(row, rowindex) in JSON.parse(message.content).rows" :key="rowindex">
-                                <ct-layout :vmodel="row" :cellLayout="JSON.parse(message.content).cellLayout" :rowindex="rowindex"
-                                    @rolRouterclick="rolRouterCellClickHandler"
+                                <ct-layout :vmodel="row" :cellLayout="JSON.parse(message.content).cellLayout"
+                                    :rowindex="rowindex" @rolRouterclick="rolRouterCellClickHandler"
                                     :actionRouter="JSON.parse(message.content).actionRouters">
                                 </ct-layout>
                             </template>
@@ -34,10 +33,10 @@
                         </div>
                     </template>
                 </div>
-                <div v-else class="loading-container">
-                    <div class="loading-circle"></div>
-                </div>
             </template>
+            <div v-if="afoot" class="loading-container">
+                <div class="loading-circle"></div>
+            </div>
         </div>
 
         <!-- 输入区域 -->
@@ -46,7 +45,6 @@
                 <textarea ref="textareaRef" class="chat-input" v-model="inputMessage" @keydown="handleKeydown"
                     :placeholder="model.placeholder"></textarea>
 
-
             </div>
             <div class="chat-editor-action">
 
@@ -76,6 +74,8 @@ import { marked } from 'marked';
 import DOMPurify from 'dompurify'
 import Router from '../../loader/src/Router';
 import { RouterClickHandler } from '../../utils/mixins';
+import util from '../../utils/pub-use'
+
 
 const emit = defineEmits(['loaded', "getRefFieldPara", "hideAI"])
 const props = defineProps({
@@ -239,8 +239,10 @@ const addMessage = (message) => {
 }
 // 添加消息通用方法
 const appendMessage = (message) => {
-    model.value.messages[model.value.messages.length - 1].content = model.value.messages[model.value.messages.length - 1].content + message;
-    scheduleScroll()
+    if (!isStopped) {
+        model.value.messages[model.value.messages.length - 1].content = model.value.messages[model.value.messages.length - 1].content + message;
+        scheduleScroll()
+    }
 }
 
 const UpdateMessageType = (type) => {
@@ -253,11 +255,10 @@ const UpdateMessageType = (type) => {
 const scheduleScroll = (flagScroll) => {
     if (!scrollPending) {
         if (messagesContainer.value) {
-            const container = messagesContainer.value;
-
-            const distanceToBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);
+            const distanceToBottom = getDistanceToBottom();
+            console.log(flagScroll, distanceToBottom)
             if (flagScroll || distanceToBottom <= 20) {
-                scrollPending = true
+                scrollPending = true;
                 nextTick(() => {
                     if (messagesContainer.value) {
                         messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
@@ -269,6 +270,18 @@ const scheduleScroll = (flagScroll) => {
     }
 }
 
+const getDistanceToBottom = () => {
+    let rtn = 0;
+
+    if (messagesContainer.value) {
+        const container = messagesContainer.value;
+
+        rtn = container.scrollHeight - (container.scrollTop + container.clientHeight);
+    }
+
+    return rtn;
+
+}
 //获取关联列返回对象
 function getRefFieldJson() {
     let rtn = {};
@@ -385,9 +398,7 @@ const fetchAIResponse = async (params) => {
         });
     }).then(() => {
         // 在所有行处理完毕后执行 startTypingEffect
-        if (outtext.value == '') {
-         
-        }
+
         let TemplateType = getTemplateType(outtext.value);
         UpdateMessageType(TemplateType);
 
@@ -403,7 +414,12 @@ const fetchAIResponse = async (params) => {
                 });
                 data.actionRouters = actionRouters
             }
+            const flagScroll = (getDistanceToBottom() <= 20) ? true : false;
             appendMessage(JSON.stringify(data));
+
+
+            setTimeout(() => scheduleScroll(flagScroll), 500);
+
         } else {
             startTypingEffect(outtext.value);
         }
@@ -517,35 +533,33 @@ const getTemplateType = (fullText) => {
 
 
 function startTypingEffect(fullText) {
-
     let index = 0;
-    let timer = setInterval(() => {
-        // 检查索引是否超出字符串长度
-        if (index >= fullText.length) {
-            clearInterval(timer); // 清除定时器
-            return;
-        }
+    outtext.value = ''; // 清空内容
 
+    function typeNext() {
         // 随机生成3到10之间的字符数
-        const randomChars = Math.floor(Math.random() * 8) + 3; // 3到10（包括3和10）
+        const randomChars = Math.floor(Math.random() * 5) + 8;
         const charsToLoad = Math.min(randomChars, fullText.length - index);
 
-        // 获取当前要加载的字符
+        // 获取并显示当前字符
         const currentChars = fullText.substring(index, index + charsToLoad);
-        // 显示字符
         appendMessage(currentChars);
-        // 更新索引
         index += charsToLoad;
 
-        // 检查是否已经加载完成
-        if (index >= fullText.length) {
-            clearInterval(timer); // 清除定时器
+        // 递归条件判断
+        if (index < fullText.length && !isStopped) {
+            setTimeout(typeNext, 100); // 继续下一次迭代
+        } else {
+            // 全部完成后执行
+            outtext.value = '';
         }
-    }, 100); // 每100毫秒加载10个字符
-    outtext.value = '';
-    
+    }
+
+    // 启动首次调用
+    setTimeout(typeNext, 100);
 }
 
+
 function hideAI() {
     emit("hideAI", false);
 
@@ -598,7 +612,7 @@ function rolRouterCellClickHandler(routerKey, rowindex, forname, forrowindex, fl
 
     /* 子元素之间的间距为5像素 */
     .header-item {
-        padding: 10px 0px 10px 10px;
+        padding: 3px 0px 0px 8px;
     }
 }
 
@@ -793,9 +807,8 @@ function rolRouterCellClickHandler(routerKey, rowindex, forname, forrowindex, fl
 
 .ico-button {
     cursor: pointer;
-    width: 25px;
-    height: 25px;
-    background-color: #DBEAFE;
+    width: 35px;
+    height: 35px;
 }