agilebuilder-ui 1.1.45 → 1.1.47

package/packages/chat-embed/src/index.vue

@@ -0,0 +1,425 @@
+<template>
+  <!-- <div v-permission="'mc.ragFlow.converseWithChat'"> -->
+  <div v-if="enableAiChat">
+    <div ref="chatIcon" :style="style" style="position: fixed; cursor: pointer; z-index: 100">
+      <img src="https://maxkb.fit2cloud.com/ui/MaxKB.gif" @click="showChatDialog" />
+    </div>
+    <transition name="slide-up">
+      <div v-show="showChatVisable" ref="chatContainerRef" class="chat-container">
+        <!-- 头部 -->
+        <Header
+          :aiAvatar="aiAvatar"
+          :dialogFullScreen="dialogFullScreen"
+          @expandDialog="expandDialog"
+          @showChatDialog="showChatDialog"
+        />
+        <!-- 聊天内容展示 -->
+        <!-- <div ref="talkMainRef" :key="talkMainRefKey" class="chat-embed__main"> -->
+        <div ref="talkMainRef" class="chat-embed__main" :key="talkMainRefKey">
+          <div class="chat-embed__main_content">
+            <BubbleList :list="messageList" :max-height="bubbleMaxHeight" :is-fog="true">
+              <template #content="{ item }">
+                <template v-if="!item.isRecommend && item.thinkingContent !== null">
+                  <!-- ai消息正在回复中 -->
+                  <Thinking
+                    style="margin-bottom: 5px"
+                    v-model="item.showThinkingContent"
+                    :status="item.thinkingStatus"
+                    auto-collapse
+                    :content="item.thinkingContent"
+                    max-width="100%"
+                    :typing="{ interval: 20 }"
+                    duration=".3s"
+                    class="thinking-chain-warp"
+                  >
+                  </Thinking>
+                </template>
+                <template v-if="item.content">
+                  <!-- ai消息和用户消息 -->
+                  <div
+                    :class="item.role === 'ai' ? 'content-container' : 'content-borderless-container'"
+                    :style="{ maxWidth: bubbleMaxWidth }"
+                  >
+                    <Typewriter
+                      v-if="item.role === 'ai' && !item.isRecommend"
+                      :content="item.content"
+                      :typing="{ interval: 10 }"
+                      :is-markdown="true"
+                    />
+                    <template v-else-if="item.role === 'user'">
+                      {{ item.content }}
+                      <template v-if="item.additionalData?.length > 0">
+                        <el-divider border-style="dashed" />
+                        <el-tag type="primary">
+                          <template #default>
+                            <div
+                              style="
+                                display: flex;
+                                align-items: center;
+                                flex-shrink: 0;
+                                min-width: max-content;
+                                margin-left: auto;
+                                gap: 10px;
+                              "
+                            >
+                              <el-icon><Paperclip /></el-icon>
+                              {{ item.additionalDataLabel }}
+                            </div>
+                          </template>
+                        </el-tag>
+                        <div
+                          style="
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            margin-top: 10px;
+                            gap: 10px;
+                          "
+                        >
+                          <el-button plain round size="small" @click="viewJson(item.additionalData)">
+                            <el-icon><View /></el-icon> <span>预览数据</span>
+                          </el-button>
+                          <el-button
+                            plain
+                            round
+                            size="small"
+                            @click="downloadJsonData(item.additionalData, item.menuName)"
+                          >
+                            <el-icon><Download /></el-icon> 下载数据
+                          </el-button>
+                        </div>
+                      </template>
+                    </template>
+                    <template v-else> {{ item.content }} </template>
+                  </div>
+                  <template v-if="item.recommendations && item.recommendations.length > 0">
+                    <!-- 推荐内容的消息 -->
+                    <RecommendationMessage :item="item" @clickRecommendation="clickRecommendation" />
+                  </template>
+                </template>
+              </template>
+              <template #footer="{ item }">
+                <div
+                  v-if="item.role === 'ai' && !item.isRecommend && item.thinkingStatus !== 'thinking'"
+                  class="footer-container"
+                >
+                  <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.regenerate')">
+                    <el-button type="info" :icon="Refresh" size="small" circle @click="regenerateQuestion(item)" />
+                  </el-tooltip>
+                  <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.copy')">
+                    <el-button
+                      type="info"
+                      color="#626aef"
+                      :icon="DocumentCopy"
+                      size="small"
+                      circle
+                      @click="cpoyContent(item)"
+                    />
+                  </el-tooltip>
+                </div>
+              </template>
+            </BubbleList>
+          </div>
+          <!-- 对话输入框 -->
+          <div ref="talkInputRef" class="chat-embed__input_container">
+            <ChatSender
+              :loading="loading"
+              @submit-question="sendQuestion"
+              @new-chat-session="newChatSession"
+              @handle-cancel="handleCancel"
+              @view-json="viewJson"
+            />
+          </div>
+        </div>
+      </div>
+    </transition>
+    <json-view-dialog v-model="jsonDialogVisible" :json-object="jsonObject" :append-to-body="true" title="预览数据" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { Refresh, DocumentCopy } from '@element-plus/icons-vue'
+import { BubbleList, Thinking, useXStream, Typewriter } from 'vue-element-plus-x'
+import { useDraggable } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import { getMessageTemplate, defaultMessage } from './chat-embed-message'
+import RecommendationMessage from './recommendation-message.vue'
+import { BubbleProps } from 'vue-element-plus-x/types/Bubble'
+import { useI18n } from 'vue-i18n'
+import Header from './header.vue'
+import ChatSender from './chat-sender.vue'
+import { JsonViewDialog } from '../../json-view'
+import { generateFileName, downloadJsonFile } from './util.ts'
+
+const enableAiChat = ref(false)
+if (window.$vueApp.config.globalProperties.enableAiChat) {
+  enableAiChat.value = true
+}
+
+const { t } = useI18n()
+const chatIcon = ref()
+let isActualClick = ref(true)
+const isActualClickTimer = ref(null)
+
+const jsonDialogVisible = ref(false)
+const jsonObject = ref({})
+
+const initialX = document.documentElement.clientWidth - 100
+const initialY = document.documentElement.clientHeight - 100
+const { x, y, style } = useDraggable(chatIcon, {
+  // 聊天图标的初始位置
+  initialValue: { x: initialX, y: initialY },
+  preventDefault: true,
+  onStart() {
+    // 拖拽开始时重置状态
+    isActualClick.value = true
+  },
+  onMove(position) {
+    isActualClick.value = false
+    // 限制拖拽范围 防止拖出屏幕外
+    const maxX = window.innerWidth - chatIcon.value.offsetWidth
+    const maxY = window.innerHeight - chatIcon.value.offsetHeight
+    position.x = Math.max(0, Math.min(position.x, maxX))
+    position.y = Math.max(0, Math.min(position.y, maxY))
+  },
+  onEnd() {
+    adjustChatIconPosition()
+    // 延迟重置确保 click 事件先处理
+    setTimeout(() => (isActualClick.value = true), 50)
+  }
+})
+
+function adjustChatIconPosition() {
+  if (!chatIcon.value) return
+  const maxX = window.innerWidth - chatIcon.value.offsetWidth
+  const maxY = window.innerHeight - chatIcon.value.offsetHeight
+  if (x.value > maxX) x.value = maxX
+  if (y.value > maxY) y.value = maxY
+}
+
+const talkInputRef = ref()
+// 显示聊天窗口的状态
+const showChatVisable = ref(false)
+// 聊天窗口的引用
+const chatContainerRef = ref()
+// 聊天窗口主区域的引用
+const talkMainRef = ref()
+// 聊天输入框状态
+const loading = ref(false)
+// 聊天窗口是否全屏
+const dialogFullScreen = ref(false)
+
+const talkMainRefKey = ref(0)
+
+const bubbleMaxWidth = ref('')
+const bubbleMaxHeight = ref('500px')
+
+const aiAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
+
+// 聊天内容
+const messageList: any = ref([])
+// 默认ai提示消息
+messageList.value.push(defaultMessage)
+// messageList.value.push(getMessageTemplate('user', '11111111111', true))
+// 正在生成的ai消息
+const answerContent: any = ref({})
+// 后端会话session_id
+const session_id = ref(null)
+
+onMounted(() => {
+  window.addEventListener('resize', adjustChatIconPosition)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', adjustChatIconPosition)
+  // 清除定时器
+  if (isActualClickTimer.value) {
+    clearTimeout(isActualClickTimer.value)
+  }
+})
+
+// 处理聊天窗口的显示和隐藏
+function showChatDialog() {
+  if (isActualClick.value) {
+    showChatVisable.value = !showChatVisable.value
+    talkMainRefKey.value++
+    nextTick(() => {
+      setHeightAndWidth()
+    })
+  }
+}
+
+const { cancel, data } = useXStream()
+
+// 发送聊天内容
+function sendQuestion(submitData: any) {
+  const question = submitData.question
+  if (!question) {
+    return
+  }
+  data.value = []
+  const message = getMessageTemplate('user', question, true)
+  if (submitData.additionalData && submitData.additionalData.length > 0) {
+    message.additionalData = submitData.additionalData
+    message.additionalDataLabel = submitData.additionalDataLabel
+    message.menuName = submitData.menuName
+    message.menuCode = submitData.menuCode
+  }
+  messageList.value.push(message)
+  // console.log('submit', question)
+  loading.value = true
+  if (!session_id.value) {
+    session_id.value = new Date().getTime().toString()
+  }
+  // 创建一个新的消息对象
+  answerContent.value = getMessageTemplate('ai', '', false)
+  // 设置消息的状态为正在思考 并存下历史的 question信息
+  answerContent.value.thinkingStatus = 'thinking'
+  answerContent.value.question = question
+  answerContent.value.menuName = submitData.menuName
+  answerContent.value.menuCode = submitData.menuCode
+  answerContent.value.askAdditionalData = submitData.additionalData
+  messageList.value.push(answerContent.value)
+  try {
+    window.$vueApp.config.globalProperties.$http
+      .post(window.$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck', {
+        question: question,
+        messageId: session_id.value,
+        data: JSON.stringify(submitData.additionalData)
+      })
+      .then((res) => {
+        // 创建一个新的消息对象
+        answerContent.value.thinkingStatus = 'end'
+        answerContent.value.content = res
+        answerContent.value = {}
+        loading.value = false
+      })
+  } catch (err) {
+    console.error('Fetch error:', err)
+    messageList.push(getMessageTemplate('ai', t('chatEmbed.requestFailed'), false))
+    loading.value = false
+  }
+}
+
+// 处理聊天内容的取消
+function handleCancel() {
+  loading.value = false
+  messageList.value[messageList.value.length - 1].thinkingStatus = 'end'
+  cancel()
+}
+
+// 处理聊天窗口的全屏和缩小
+function expandDialog() {
+  dialogFullScreen.value = !dialogFullScreen.value
+  setHeightAndWidth()
+}
+
+function setHeightAndWidth() {
+  let heightVh = 100
+  let widthVw = 40
+  if (dialogFullScreen.value) {
+    heightVh = 100
+    widthVw = 100
+  }
+  chatContainerRef.value.style.height = `calc(${heightVh}vh - var(--chat-padding) * 2)`
+  chatContainerRef.value.style.width = `calc(${widthVw}vw - var(--chat-padding) * 2)`
+  // talkMainRef.value.style.height = `calc(${heightVh}vh - var(--header-height) - var(--chat-padding) * 2)`
+  const talkHeight = talkInputRef.value.offsetHeight
+  // alert(`talkHeight: ${talkHeight}`)
+  // bubbleMaxHeight.value = `calc(${heightVh}vh - var(--header-height) - var(--chat-padding) * 5 - 144px)`
+  nextTick(() => {
+    const talkHeight = talkInputRef.value?.offsetHeight || 80
+    // 定义具体的像素值
+    const headerHeight = 56
+    const chatPadding = 12
+    // 更清晰的计算：总高度 - 头部 - 输入框 - 各种padding和间距
+    bubbleMaxHeight.value = `calc(${heightVh}vh - ${headerHeight}px - ${talkHeight}px - ${chatPadding * 4}px)`
+    talkMainRefKey.value++
+  })
+}
+
+// 点击推荐内容的处理函数
+// 这里可以根据需要进行处理，比如发送请求、更新状态等
+function clickRecommendation(item: BubbleProps) {
+  console.log('clickRecommendation', item)
+  sendQuestion(item.content)
+}
+
+function regenerateQuestion(answerData) {
+  sendQuestion({
+    question: answerData.question,
+    additionalData: answerData.additionalData,
+    additionalDataLabel: answerData.additionalDataLabel,
+    menuName: answerData.menuName,
+    menuCode: answerData.menuCode
+  })
+}
+
+function cpoyContent(item: BubbleProps) {
+  // 复制内容到剪贴板
+  if (!item.content) {
+    return
+  }
+  navigator.clipboard.writeText(item.content).then(() => {
+    ElMessage({
+      message: t('chatEmbed.copySuccess'),
+      type: 'success'
+    })
+  })
+}
+
+function newChatSession() {
+  // 清空聊天记录
+  messageList.value = []
+  if (session_id.value) {
+    try {
+      window.$vueApp.config.globalProperties.$http
+        .post(window.$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck/clear/' + session_id.value)
+        .then((res) => {
+          //
+        })
+    } catch (err) {
+      console.error('Fetch error:', err)
+      messageList.push(getMessageTemplate('ai', t('chatEmbed.requestFailed'), false))
+      loading.value = false
+    }
+  }
+  session_id.value = null
+  // 重置加载状态
+  loading.value = false
+  messageList.value.push(defaultMessage)
+}
+
+function viewJson(viewData: any) {
+  jsonObject.value = viewData
+  jsonDialogVisible.value = true
+}
+
+// 下载 JSON 数据功能
+function downloadJsonData(data: any, fileName: string) {
+  try {
+    downloadJsonFile(data, generateFileName(fileName || 'data'))
+  } catch (error) {
+    console.error('下载失败:', error)
+  }
+}
+</script>
+<style lang="scss" rel="stylesheet/scss" scoped>
+@import url('./chat-embed.css');
+:root {
+  --header-height: 56px;
+  --chat-padding: 12px;
+}
+
+h4 {
+  font-size: 16px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+:deep(.el-bubble-content-wrapper .el-bubble-content) {
+  padding: 0 !important;
+}
+:deep(.el-divider--horizontal) {
+  margin: 5px 0;
+}
+</style>

package/packages/chat-embed/src/recommendation-message.vue

@@ -0,0 +1,37 @@
+<template>
+  <Bubble
+    v-for="(recommendation, index) in item.recommendations"
+    class="chat-embed__recommendation"
+    :no-style="true"
+    variant="borderless"
+  >
+    <template v-if="index === 0" #header>
+      <div class="content-container-header">推荐内容</div>
+    </template>
+    <template #content>
+      <div class="content-borderless-container" @click="clickRecommendation(recommendation)">
+        {{ recommendation.content }}
+      </div>
+    </template>
+  </Bubble>
+</template>
+<script lang="ts" setup>
+import { Bubble } from 'vue-element-plus-x'
+import { defineProps, defineEmits } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(['clickRecommendation'])
+
+const clickRecommendation = (recommendation: any) => {
+  emit('clickRecommendation', recommendation)
+}
+</script>
+
+<style scoped>
+@import url('./chat-embed.css');
+</style>

package/packages/chat-embed/src/util.ts

@@ -0,0 +1,33 @@
+// 生成文件名
+function generateFileName(fileName: string): string {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+  const safeName = fileName.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '_')
+  return `${safeName}_${timestamp}.json`
+}
+
+// 核心下载方法
+function downloadJsonFile(data: any, fileName: string) {
+  // 将数据转换为格式化的 JSON 字符串
+  const jsonString = JSON.stringify(data, null, 2)
+
+  // 创建 Blob 对象
+  const blob = new Blob([jsonString], {
+    type: 'application/json;charset=utf-8'
+  })
+
+  // 创建下载链接
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+
+  // 触发下载
+  document.body.appendChild(link)
+  link.click()
+
+  // 清理
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+export { generateFileName, downloadJsonFile }

package/packages/index.js

@@ -1,8 +1,8 @@
 import '../src/utils/insert_css' // 公共样式库
 // 依次导入组件库的各个组件
 import { resizeDirective } from '../src/utils/resize'
-import '../src/utils/iframe-communicator';
-import store from '../src/store';
+import '../src/utils/iframe-communicator'
+import store from '../src/store'
 import Breadcrumb from './breadcrumb'
 import DepartmentTree from './department-tree'
 import Hamburger from './hamburger'
@@ -44,8 +44,9 @@ import FsUploadNew from './fs-upload-new'
 import ScanCodeInputBrowser from './scan-code-input-browser'
 import WorkgroupTreeMobile from './workgroup-tree-mobile'
 import RowForm from './row-form'
-import * as ElementPlusIconsVue from "@element-plus/icons-vue"
-import YxAffix from '../src/components/Affix';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import YxAffix from '../src/components/Affix'
+import ChatEmbed from './chat-embed'
 // 将所有组件都存储起来,方便后续统一注册
 const components = [
   YxAffix,
@@ -81,11 +82,12 @@ const components = [
   IntervalSelection,
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
-	SuperIcon,
-	FsUploadNew,
+  SuperIcon,
+  FsUploadNew,
   ScanCodeInputBrowser,
   WorkgroupTreeMobile,
-  RowForm
+  RowForm,
+  ChatEmbed
 ]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
@@ -106,8 +108,8 @@ const install = function (Vue) {
     Vue.component(key, component)
   }
   // store挂载到Vue原型
-  Vue.provide('$agilebuilderUIStore', store);
-  if(Vue.config.globalProperties) Vue.config.globalProperties.$agilebuilderUIStore = store;
+  Vue.provide('$agilebuilderUIStore', store)
+  if (Vue.config.globalProperties) Vue.config.globalProperties.$agilebuilderUIStore = store
 }
 
 //  判断是否是直接引入vue的js文件，即全局引用可自动安装所有组件
@@ -146,16 +148,17 @@ export {
   SecretInfo,
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
-	SuperIcon,
-	FsUploadNew,
+  SuperIcon,
+  FsUploadNew,
   ScanCodeInputBrowser,
   WorkgroupTreeMobile,
-  RowForm
+  RowForm,
+  ChatEmbed
 }
 
 export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   store,
-  ...components,
+  ...components
 }

package/packages/json-view/index.ts

@@ -0,0 +1,3 @@
+import JsonView from './json-view.vue'
+import JsonViewDialog from './json-view-dialog.vue'
+export { JsonView, JsonViewDialog }

package/packages/json-view/json-view-dialog.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    append-to-body
+    v-model="showJsonVisible"
+    :append-to-body="appendToBody"
+    :title="title"
+    width="600"
+    @close="close"
+  >
+    <json-view :jsonObject="jsonObject" />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, defineEmits, defineProps, defineOptions, watch } from 'vue'
+defineOptions({
+  name: 'JsonViewDialog',
+  inheritAttrs: false
+})
+import JsonView from './json-view.vue'
+const props = defineProps({
+  jsonObject: {
+    type: Object,
+    default: () => {}
+  },
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: 'JSON 预览'
+  }
+})
+const emits = defineEmits(['update:modelValue'])
+const showJsonVisible = ref(false)
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      showJsonVisible.value = true
+    }
+  }
+)
+const close = () => {
+  showJsonVisible.value = false
+  emits('update:modelValue', false)
+}
+</script>
+<style scoped></style>