agilebuilder-ui 1.1.46 → 1.1.48-rc1

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/department-tree-inline/src/department-multi-tree-inline.vue

@@ -19,39 +19,42 @@
             </el-autocomplete>
           </el-header>
           <el-main style="padding: 10px">
-            <div
-              v-if="!searchValue"
-              style="padding-top: 5px; overflow: auto; width: 100%; display: inline-block !important"
-            >
-              <el-tree
-                ref="deparmentTree"
-                :filter-node-method="filterNode"
-                :load="loadNode"
-                :props="defaultProps"
-                :show-checkbox="true"
-                check-strictly
-                lazy
-                node-key="id"
-                @check="handleCheckNode"
-                @check-change="handleCheckChange"
-                @node-expand="handleNodeExpand"
-                @node-click="handleNodeClick"
+            <template v-if="!searchValue">
+              <div
+                v-if="canShowOrgTree"
+                style="padding-top: 5px; overflow: auto; width: 100%; display: inline-block !important"
               >
-                <template #default="{ node, data }">
-                  <span>
-                    <el-icon>
-                      <Menu v-if="node.data.id === -1 || node.data.branch" />
-                      <Tickets v-else-if="node.data.id === -2 || node.data.id === -3" />
-                      <Calendar v-else />
-                    </el-icon>
-                    <span :title="node.label">
-                      {{ node.label }}
+                <el-tree
+                  ref="deparmentTree"
+                  :filter-node-method="filterNode"
+                  :load="loadNode"
+                  :props="defaultProps"
+                  :show-checkbox="true"
+                  check-strictly
+                  lazy
+                  node-key="id"
+                  @check="handleCheckNode"
+                  @check-change="handleCheckChange"
+                  @node-expand="handleNodeExpand"
+                  @node-click="handleNodeClick"
+                >
+                  <template #default="{ node, data }">
+                    <span>
+                      <el-icon>
+                        <Menu v-if="node.data.id === -1 || node.data.branch" />
+                        <Tickets v-else-if="node.data.id === -2 || node.data.id === -3" />
+                        <Calendar v-else />
+                      </el-icon>
+                      <span :title="node.label">
+                        {{ node.label }}
+                      </span>
                     </span>
-                  </span>
-                </template>
-              </el-tree>
-            </div>
-
+                  </template>
+                </el-tree>
+              </div>
+              <!-- 暂无信息 -->
+              <EmptyState v-else style="width: 100%; height: 100%" />
+            </template>
             <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
               <user-result
                 :grid-data="searchResult"
@@ -96,7 +99,7 @@ import utils from '../../utils/utils'
 import departmentTreeService from './department-tree-service'
 import UserResult from './search-result.vue'
 import memoryCacheUtils from '../../utils/memory-cache-utils'
-
+import EmptyState from '../../empty-state/index.vue'
 export default {
   data() {
     return {
@@ -139,12 +142,14 @@ export default {
       memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
       // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
       memoryCacheData: [],
-      ElIconSearch
+      ElIconSearch,
+      canShowOrgTree: false
     }
   },
   name: 'InlineDepartmentMultiTree',
   components: {
-    UserResult
+    UserResult,
+    EmptyState
   },
   props: {
     checkStrictly: {
@@ -199,6 +204,9 @@ export default {
     }
   },
   created() {
+    utils.canShowOrgTree().then((showOrgTree) => {
+      this.canShowOrgTree = showOrgTree
+    })
     this.initSelectDepts(this.searchField, this.selectDepartmentInfo, this.separator).then((selectUsers) => {
       if (selectUsers) {
         this.selectResult = selectUsers