vue2-client 1.10.33 → 1.11.1

package/src/base-client/components/common/XConversation/XConversation.vue

@@ -1,263 +1,275 @@
-<template>
-  <div>
-    <div class="chat-container" v-if="loading">
-      <!-- 对话展示区域 -->
-      <div class="chat-content">
-        <div
-          v-for="(message, index) in messages"
-          :key="index"
-          :class="['chat-message', message.type]"
-        >
-          <span class="chat-avatar">{{ message.type === 'user' ? '👤' : '🤖' }}</span>
-          <div class="chat-text" v-if="message.text" v-html="renderMarkdown(message.text)"></div>
-          <div class="chat-text" v-else-if="message.state === 'loading'">
-            <a-spin :spinning="true"/>
-          </div>
-        </div>
-      </div>
-
-      <!-- 输入框和发送按钮 -->
-      <div class="chat-input">
-        <a-input
-          v-model="inputMessage"
-          placeholder="Type your message..."
-          @pressEnter="sendMessage"
-        />
-        <a-button type="primary" @click="sendMessage">发送</a-button>
-      </div>
-    </div>
-    <a-spin :spinning="!loading"/>
-  </div>
-</template>
-
-<script>
-import { runLogic } from '@vue2-client/services/api/common'
-import { postByServiceName, startEventStreamPOST } from '@vue2-client/services/api/restTools'
-import moment from 'moment/moment'
-import { marked } from 'marked'
-
-export default {
-  inject: {
-    getSelectedId: {
-      default: () => () => {
-        console.warn('getSelectedId is not provided.')
-        return null
-      },
-    },
-    getSelectedData: {
-      default: () => () => {
-        console.warn('getSelectedData is not provided.')
-        return null
-      },
-    },
-    getMixinData: {
-      default: () => () => {
-        console.warn('getMixinData is not provided.')
-        return {}
-      },
-    },
-    getOutEnv: {
-      default: () => () => {
-        console.warn('getOutEnv is not provided.')
-        return {}
-      },
-    },
-    currUser: {
-      default: () => () => {
-        console.warn('currUser is not provided.')
-        return {}
-      },
-    }
-  },
-  name: 'XConversation',
-  props: {
-    prompt: {
-      type: String,
-      default: undefined
-    }
-  },
-  data () {
-    return {
-      serviceName: undefined,
-      // 组件加载状态
-      loading: false,
-      // 配置内容
-      renderConfig: {
-        // 请求logic 名称
-        logicName: '',
-        // 请求api 地址
-        api: '',
-        // 请求流式api 地址
-        streamApi: '',
-        // 聊天室id 当type为AI 时必传
-        chatId: '',
-        // ai 模型 当type为AI 时必传
-        aiModel: '',
-        type: ''
-      },
-      // 用户输入的内容
-      inputMessage: '',
-      additionalInfo: {},
-      stopConnection: undefined,
-      messages: [ // 消息列表
-        { type: 'bot', text: '你好! 今天有什么能帮到您的?' },
-      ],
-    }
-  },
-  methods: {
-    renderMarkdown (text) {
-      const markdownPatterns = [
-        /(^|\s)(#{1,6})\s/, // 标题 (# 到 ######)
-        /(\*\*|__)(.*?)\1/, // 加粗 (** 或 __)
-        /(\*|_)(.*?)\1/, // 斜体 (* 或 _)
-        /\[([^\]]+)\]\([^\)]+\)/, // 链接 [text](url)
-        /`{1,3}[^`]+`{1,3}/, // 行内代码 (`text`)
-        /\n{2,}([^\n]+)\n{2,}/, // 段落之间的换行
-        /\n{3,}([^\n]+)\n{3,}/, // 多行代码块
-        /[-\*\+]\s+/, // 无序列表 (- 或 * 或 +)
-        /\d+\.\s+/, // 有序列表 (1. 或 2. 或 3.)
-      ]
-      if (markdownPatterns.some(pattern => pattern.test(text))) {
-        return marked(text)
-      } else {
-        return text
-      }
-    },
-    setAddtionalInfo (params) {
-      this.additionalInfo = params
-    },
-    init (params) {
-      this.renderConfig = params
-      this.loading = true
-      this.serviceName = params.serviceName || process.env.VUE_APP_SERVICE_NAME
-    },
-    async sendMessage () {
-      if (this.renderConfig.type === 'AI') {
-        // 验证 chatId 和 aiModel
-        if (!this.renderConfig.chatId || !this.renderConfig.aiModel) {
-          this.$message.error('chatId 和 aiModel 不能为空,请检查调用逻辑')
-          return
-        }
-      }
-      if (!this.inputMessage.trim()) return
-
-      // 添加用户消息
-      this.messages.push({ type: 'user', text: this.inputMessage })
-
-      // 清空输入框
-      const userMessage = this.inputMessage
-      this.inputMessage = ''
-      // 模拟机器人的回复
-      // 通过logic获取消息
-      if (this.renderConfig.logicName) {
-        const response = await runLogic(this.renderConfig.logicName, {
-          question: userMessage,
-          additionalInfo: this.additionalInfo
-        }, this.serviceName)
-        this.messages.push({ type: 'bot', text: response.value })
-      } else if (this.renderConfig.api) {
-        // 通过api获取消息
-        this.messages.push({ type: 'bot', state: 'loading' })
-        this.messages[this.messages.length - 1].text = await postByServiceName(this.renderConfig.api, {
-          userMessage,
-          model: this.renderConfig.aiModel,
-          chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
-          prompt: this.prompt
-        }, this.serviceName)
-        this.$forceUpdate()
-      } else if (this.renderConfig.streamApi) {
-        // 通过流式api 获取消息
-        this.messages.push({ type: 'bot', state: 'loading' })
-        this.stopConnection = startEventStreamPOST(
-          this.renderConfig.streamApi,
-          {
-            userMessage,
-            model: this.renderConfig.aiModel,
-            chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
-            prompt: this.prompt
-          }, {},
-          (data) => {
-            this.messages[this.messages.length - 1].text = `${this.messages[this.messages.length - 1]?.text || ''}${data}`
-            this.$forceUpdate()
-          }
-        )
-      }
-    },
-  },
-  mounted () {
-    this.setAddtionalInfo(this.getMixinData())
-  },
-  beforeDestroy () {
-    if (this.stopConnection) {
-      this.stopConnection()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 500px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.chat-content {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-  background: #f5f5f5;
-}
-
-.chat-message {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-
-.chat-message.user {
-  justify-content: flex-end;
-}
-
-.chat-message.bot {
-  justify-content: flex-start;
-}
-
-.chat-avatar {
-  margin: 0 8px;
-}
-
-.chat-text {
-  max-width: 70%;
-  padding: 8px 12px;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.chat-message.user .chat-text {
-  background-color: #e6f7ff;
-}
-
-.chat-input {
-  display: flex;
-  padding: 8px;
-  background: #fff;
-  border-top: 1px solid #d9d9d9;
-  gap: 10px;
-}
-
-.chat-input a-input {
-  flex: 1;
-}
-
-code {
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  padding: 2px 4px;
-  font-size: 90%;
-}
-</style>
+<template>
+  <div>
+    <div class="chat-container" v-if="loading">
+      <!-- 对话展示区域 -->
+      <div class="chat-content">
+        <div
+          v-for="(message, index) in messages"
+          :key="index"
+          :class="['chat-message', message.type]"
+        >
+          <span class="chat-avatar">{{ message.type === 'user' ? '👤' : '🤖' }}</span>
+          <div class="chat-text" v-if="message.text" v-html="renderMarkdown(message.text)"></div>
+          <div class="chat-text" v-else-if="message.state === 'loading'">
+            <a-spin :spinning="true"/>
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入框和发送按钮 -->
+      <div class="chat-input">
+        <a-input
+          v-model="inputMessage"
+          placeholder="Type your message..."
+          @pressEnter="sendMessage"
+        />
+        <a-button type="primary" @click="sendMessage">发送</a-button>
+      </div>
+    </div>
+    <a-spin :spinning="!loading"/>
+  </div>
+</template>
+
+<script>
+import { runLogic } from '@vue2-client/services/api/common'
+import { postByServiceName, startEventStreamPOST } from '@vue2-client/services/api/restTools'
+import moment from 'moment/moment'
+import { marked } from 'marked'
+
+export default {
+  inject: {
+    getSelectedId: {
+      default: () => () => {
+        console.warn('getSelectedId is not provided.')
+        return null
+      },
+    },
+    setGlobalData: {
+      default: () => () => {
+        console.warn('setGlobalData is not provided.')
+        return null
+      },
+    },
+    getGlobalData: {
+      default: () => () => {
+        console.warn('getGlobalData is not provided.')
+        return null
+      },
+    },
+    getSelectedData: {
+      default: () => () => {
+        console.warn('getSelectedData is not provided.')
+        return null
+      },
+    },
+    getMixinData: {
+      default: () => () => {
+        console.warn('getMixinData is not provided.')
+        return {}
+      },
+    },
+    getOutEnv: {
+      default: () => () => {
+        console.warn('getOutEnv is not provided.')
+        return {}
+      },
+    },
+    currUser: {
+      default: () => () => {
+        console.warn('currUser is not provided.')
+        return {}
+      },
+    }
+  },
+  name: 'XConversation',
+  props: {
+    prompt: {
+      type: String,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      serviceName: undefined,
+      // 组件加载状态
+      loading: false,
+      // 配置内容
+      renderConfig: {
+        // 请求logic 名称
+        logicName: '',
+        // 请求api 地址
+        api: '',
+        // 请求流式api 地址
+        streamApi: '',
+        // 聊天室id 当type为AI 时必传
+        chatId: '',
+        // ai 模型 当type为AI 时必传
+        aiModel: '',
+        type: ''
+      },
+      // 用户输入的内容
+      inputMessage: '',
+      additionalInfo: {},
+      stopConnection: undefined,
+      messages: [ // 消息列表
+        { type: 'bot', text: '你好! 今天有什么能帮到您的?' },
+      ],
+    }
+  },
+  methods: {
+    renderMarkdown (text) {
+      const markdownPatterns = [
+        /(^|\s)(#{1,6})\s/, // 标题 (# 到 ######)
+        /(\*\*|__)(.*?)\1/, // 加粗 (** 或 __)
+        /(\*|_)(.*?)\1/, // 斜体 (* 或 _)
+        /\[([^\]]+)\]\([^\)]+\)/, // 链接 [text](url)
+        /`{1,3}[^`]+`{1,3}/, // 行内代码 (`text`)
+        /\n{2,}([^\n]+)\n{2,}/, // 段落之间的换行
+        /\n{3,}([^\n]+)\n{3,}/, // 多行代码块
+        /[-\*\+]\s+/, // 无序列表 (- 或 * 或 +)
+        /\d+\.\s+/, // 有序列表 (1. 或 2. 或 3.)
+      ]
+      if (markdownPatterns.some(pattern => pattern.test(text))) {
+        return marked(text)
+      } else {
+        return text
+      }
+    },
+    setAddtionalInfo (params) {
+      this.additionalInfo = params
+    },
+    init (params) {
+      this.renderConfig = params
+      this.loading = true
+      this.serviceName = params.serviceName || process.env.VUE_APP_SERVICE_NAME
+    },
+    async sendMessage () {
+      if (this.renderConfig.type === 'AI') {
+        // 验证 chatId 和 aiModel
+        if (!this.renderConfig.chatId || !this.renderConfig.aiModel) {
+          this.$message.error('chatId 和 aiModel 不能为空,请检查调用逻辑')
+          return
+        }
+      }
+      if (!this.inputMessage.trim()) return
+
+      // 添加用户消息
+      this.messages.push({ type: 'user', text: this.inputMessage })
+
+      // 清空输入框
+      const userMessage = this.inputMessage
+      this.inputMessage = ''
+      // 模拟机器人的回复
+      // 通过logic获取消息
+      if (this.renderConfig.logicName) {
+        const response = await runLogic(this.renderConfig.logicName, {
+          question: userMessage,
+          additionalInfo: this.additionalInfo
+        }, this.serviceName)
+        this.messages.push({ type: 'bot', text: response.value })
+      } else if (this.renderConfig.api) {
+        // 通过api获取消息
+        this.messages.push({ type: 'bot', state: 'loading' })
+        this.messages[this.messages.length - 1].text = await postByServiceName(this.renderConfig.api, {
+          userMessage,
+          model: this.renderConfig.aiModel,
+          chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
+          prompt: this.prompt
+        }, this.serviceName)
+        this.$forceUpdate()
+      } else if (this.renderConfig.streamApi) {
+        // 通过流式api 获取消息
+        this.messages.push({ type: 'bot', state: 'loading' })
+        this.stopConnection = startEventStreamPOST(
+          this.renderConfig.streamApi,
+          {
+            userMessage,
+            model: this.renderConfig.aiModel,
+            chatId: this.renderConfig.chatId || moment().format('YYYYMMDDHHmmss'),
+            prompt: this.prompt
+          }, {},
+          (data) => {
+            this.messages[this.messages.length - 1].text = `${this.messages[this.messages.length - 1]?.text || ''}${data}`
+            this.$forceUpdate()
+          }
+        )
+      }
+    },
+  },
+  mounted () {
+    this.setAddtionalInfo(this.getMixinData())
+  },
+  beforeDestroy () {
+    if (this.stopConnection) {
+      this.stopConnection()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.chat-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  background: #f5f5f5;
+}
+
+.chat-message {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+
+.chat-message.user {
+  justify-content: flex-end;
+}
+
+.chat-message.bot {
+  justify-content: flex-start;
+}
+
+.chat-avatar {
+  margin: 0 8px;
+}
+
+.chat-text {
+  max-width: 70%;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.chat-message.user .chat-text {
+  background-color: #e6f7ff;
+}
+
+.chat-input {
+  display: flex;
+  padding: 8px;
+  background: #fff;
+  border-top: 1px solid #d9d9d9;
+  gap: 10px;
+}
+
+.chat-input a-input {
+  flex: 1;
+}
+
+code {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-size: 90%;
+}
+</style>