centaline-data-driven-v3 0.0.80 → 0.0.82

package/package.json

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

package/src/components/web/AIChat.vue

@@ -17,7 +17,8 @@
             <template v-for="message in model.messages">
                 <div :key="message.id" class="message" v-if="message.content"
                     :class="{ 'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai' }">
-                    <div class="chat-message" :style="{color:message.type=='error'?'red':''}" v-html="htmlContent(message)">
+                    <div class="chat-message" :style="{ color: message.type == 'error' ? 'red' : '' }"
+                        v-html="htmlContent(message)">
                     </div>
                 </div>
                 <div v-else class="loading-container">
@@ -29,8 +30,9 @@
         <!-- 输入区域 -->
         <div class="chat-editor" v-if="showAI">
             <div class="chat-input-editor-container">
-                <textarea ref="textareaRef" class="chat-input" v-model="inputMessage" @keydown="handleKeydown"
-                    placeholder="输入你的消息..."></textarea>
+                <textarea ref="textareaRef" class="chat-input" 
+                v-model="inputMessage" @keydown="handleKeydown"
+                    :placeholder="model.placeholder"></textarea>
 
 
             </div>
@@ -55,7 +57,7 @@
 
 
 <script setup lang="ts">
-import { ref, reactive, nextTick, watch, computed } from 'vue'
+import { ref, onActivated, nextTick, watch, computed } from 'vue'
 import AIChat from '../../loader/src/AIChat'
 import common from '../../utils/common'
 import { marked } from 'marked';
@@ -139,6 +141,13 @@ function load(data) {
     action();
 }
 
+onActivated(() => {
+    nextTick(() => {
+        if (inputMessage.value) {
+            inputMessage.value.focus();
+        }
+    })
+})
 // Marked 配置
 marked.setOptions({
     breaks: true,
@@ -194,7 +203,6 @@ const sendMessage = async () => {
         sender: 'ai',
         type: ''
     })
-
     // AI回复
     await fetchAIResponse({
         "query": inputMessage.value
@@ -207,7 +215,7 @@ const addMessage = (message) => {
         ...message,
         timestamp: new Date()
     })
-    scheduleScroll()
+    scheduleScroll(true);
 }
 // 添加消息通用方法
 const appendMessage = (message) => {
@@ -222,13 +230,13 @@ const UpdateMessageType = (type) => {
 }
 
 // 防抖滚动
-const scheduleScroll = () => {
+const scheduleScroll = (flagScroll) => {
     if (!scrollPending) {
         if (messagesContainer.value) {
             const container = messagesContainer.value;
 
             const distanceToBottom = container.scrollHeight - (container.scrollTop + container.clientHeight);
-            if (distanceToBottom <= 20) {
+            if (flagScroll || distanceToBottom <= 20) {
                 scrollPending = true
                 nextTick(() => {
                     if (messagesContainer.value) {
@@ -507,12 +515,12 @@ function hideAI() {
     background-color: #fff;
     display: flex;
     flex-direction: row;
-    /* 子元素水平排列 */
-    gap: 5px;
+    /* 子元素水平排列
+    gap: 5px; */
 
     /* 子元素之间的间距为5像素 */
     .header-item {
-        padding: 10px;
+        padding: 10px 0px 10px 10px;
     }
 }
 
@@ -637,9 +645,9 @@ function hideAI() {
     overflow: auto;
     resize: none;
     /* 禁用手动调整大小 */
-    min-height: 20px;
+    min-height: 40px;
     /* 设置最大高度 */
-    max-height: 55px;
+    max-height: 65px;
     /* 设置最大高度 */
 }
 
@@ -648,6 +656,10 @@ function hideAI() {
     outline: none;
 }
 
+.chat-input::placeholder {
+  color: #a8abb2;
+  opacity: 1;
+}
 .chat-editor-action {
     display: flex;
     justify-content: space-between;

package/src/loader/src/AIChat.js

@@ -6,7 +6,9 @@ function loadFromModel(source, messages, router) {
 
     var init = function (data) {
         var rtn = {
-           
+            get placeholder() {
+                return source.placeholder1 || '输入你的消息...';
+            },
             messages:messages,
             get action() {
                 return router && router.action ? router.action : "";//上传完整地址
@@ -14,6 +16,7 @@ function loadFromModel(source, messages, router) {
             set action(v) {
                 router.action = v;
             },
+
             getFormObj() {
                 var rtnFormObj = {};
                 var that = this;