agilebuilder-ui 1.1.45 → 1.1.46-sit1

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/fs-preview/src/fs-preview.vue

@@ -11,6 +11,7 @@
         </span>
       </template>
       <div v-if="firstFileName" ref="toolRef" class="fs-preview-tool">
+        <slot name="tool-prefix" :item="getFirstFile()"></slot>
         <el-tooltip v-if="enableDelete && !disabled" :content="$t('fsUpload.delete')">
           <super-icon @click="deleteFirst()" iconValue="amb-color-icon-shanchu" />
         </el-tooltip>
@@ -20,11 +21,12 @@
         <el-tooltip v-if="!disabled || !fileSetObj.disabledNoDownload" :content="$t('fsUpload.download')">
           <super-icon @click="downloadFirst()" iconValue="amb-color-icon-xiazai" />
         </el-tooltip>
+        <slot name="tool-suffix" :item="getFirstFile()"></slot>
         <el-divider v-if="showMultipleFile" direction="vertical" />
         <el-popover :width="450" trigger="click">
           <template #reference>
             <el-button v-if="showMultipleFile" type="primary" round size="small" @click="showMultiView">
-              更多
+              {{ $t('fsUpload.more') }}
               <el-icon><ArrowDownBold /></el-icon>
             </el-button>
           </template>
@@ -53,6 +55,7 @@
                 <el-link type="primary" v-if="!disabled || !fileSetObj.disabledNoDownload" underline>
                   {{ $t('fsUpload.download') }}
                 </el-link> -->
+                <slot name="tool-more-prefix" :item="item"></slot>
                 <el-tooltip v-if="enableDelete" :content="$t('fsUpload.delete')">
                   <super-icon @click="deleteFile(item)" iconValue="amb-color-icon-shanchu" />
                 </el-tooltip>
@@ -375,6 +378,7 @@ export default {
           })
         }
       }
+      return this.fileList
     },
     deleteFirst() {
       const fileInfo = this.getFirstFile()

package/packages/fs-upload-list/src/fs-upload-list.vue

@@ -21,6 +21,7 @@
               :show-file-list="false"
               :headers="headers"
               :on-success="uploadOnSuccess"
+              :on-error="onError"
               :with-credentials="true"
               name="file"
             >
@@ -310,9 +311,13 @@ export default {
     },
     getFileIconByName(fileName) {
       return getFileIconByName(fileName)
+    },
+    onError(error) {
+      $emit(this, 'on-error', error)
+
     }
   },
-  emits: ['close', 'upload-success', 'delete-success', 'delete', 'update:value', 'close', 'update:value']
+  emits: ['close', 'upload-success', 'delete-success', 'delete', 'update:value', 'close', 'update:value', 'on-error']
 }
 </script>
 <style lang="scss" scoped>

package/packages/fs-upload-new/src/fs-button-upload.vue

@@ -14,6 +14,7 @@
       :before-upload="handleBeforeUpload"
       :before-remove="beforeRemove"
       :on-success="onSuccess"
+      :on-error="onError"
     >
       <el-button size="small" type="primary">{{ placeholder }}</el-button>
       <template #tip>
@@ -40,13 +41,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref, defineProps, defineEmits } from 'vue'
 import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
 import { getToken } from '../../../src/utils/auth'
 import type { UploadFile, UploadFiles } from 'element-plus'
 import fsPreviewNew from './fs-preview-new.vue'
 import { ElMessage } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+
+const emits = defineEmits(['on-error'])
 const { t } = useI18n()
 const props = defineProps({
   openFsUpload: {
@@ -200,4 +203,8 @@ const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFil
   })
   props.onSuccess(response, uploadFile, uploadFiles)
 }
+
+const onError = (error: any) => {
+  emits('on-error', error)
+}
 </script>

package/packages/fs-upload-new/src/fs-drag-upload.vue

@@ -12,6 +12,7 @@
     :before-upload="handleBeforeUpload"
     :on-success="onUploadSuccess"
     :before-remove="beforeRemove"
+    :on-error="onError"
   >
     <el-icon class="el-icon--upload"><upload-filled /></el-icon>
     <div class="el-upload__text">{{ placeholder }}</div>
@@ -38,13 +39,15 @@
 
 <script setup lang="ts">
 import { UploadFilled } from '@element-plus/icons-vue'
-import { ref, defineProps } from 'vue'
+import { ref, defineProps, defineEmits } from 'vue'
 import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
 import { getToken } from '../../../src/utils/auth'
 import type { UploadFile, UploadFiles } from 'element-plus'
 import fsPreviewNew from './fs-preview-new.vue'
 import { ElMessage } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+
+const emits = defineEmits(['on-error'])
 const { t } = useI18n()
 const props = defineProps({
   openFsUpload: {
@@ -197,4 +200,8 @@ const onUploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: Upl
   })
   props.onSuccess(response, uploadFile, uploadFiles)
 }
+
+const onError = (error: any) => {
+  emits('on-error', error)
+}
 </script>

package/packages/fs-upload-new/src/fs-upload-new.vue

@@ -17,6 +17,7 @@
     }"
     @upload-success="onInputUploadSuccess"
     @delete-success="onInputDeleteSuccess"
+    @on-error="onError"
   />
   <fs-button-upload
     v-else-if="!isMobile && displayType === 'button'"
@@ -135,6 +136,9 @@ import FileUploadInputMobile from './file-upload-mobile/file-upload-input.vue'
 import FsUploadList from '../../fs-upload-list/src/fs-upload-list.vue'
 import { ref, defineProps } from 'vue'
 import { getReplaceUrlDomain, isMobileBrowser, isPlateSys } from '../../../src/utils/common-util'
+import { useI18n } from 'vue-i18n'
+import { ElMessage } from 'element-plus'
+const { t } = useI18n()
 const props = defineProps({
   openFsUpload: {
     type: Object,
@@ -377,5 +381,18 @@ function uploadFileDone(data) {
     fileUploadRef.value.uploadFileDone(data)
   }
 }
+
+function onError(error) {
+  console.error('Upload error:', error)
+  if (error.message) {
+    let message = JSON.parse(error.message)
+    if (message && message.message) {
+      message = JSON.parse(message.message)
+    }
+    ElMessage.error(message)
+  } else {
+    ElMessage.error(t('fsUpload.uploadFailed'))
+  }
+}
 defineExpose({ pickFileDone, uploadFileDone })
 </script>