agilebuilder-ui 1.1.45-ai2 → 1.1.46

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

@@ -1,420 +0,0 @@
-<template>
-  <!-- <div v-permission="'mc.ragFlow.converseWithChat'"> -->111111111111
-  <div>
-    <div ref="chatIcon" :style="style" style="position: fixed; cursor: pointer; z-index: 1">
-      <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 { 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

@@ -1,37 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-// 生成文件名
-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/json-view/index.ts

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

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

@@ -1,53 +0,0 @@
-<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>

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

@@ -1,126 +0,0 @@
-<template>
-  <div
-    :style="{
-      width: '100%'
-    }"
-    ref="cfCodemirrorJsonViewRef"
-    id="cf-codemirror-view-json"
-  ></div>
-</template>
-<script lang="ts" setup>
-import { ref, defineProps, defineOptions, watch, nextTick, onMounted } from 'vue'
-defineOptions({
-  name: 'JsonView',
-  inheritAttrs: false
-})
-import { basicSetup, EditorView } from 'codemirror'
-import { jsonLanguage } from '@codemirror/lang-json'
-import { EditorState, Facet } from '@codemirror/state'
-
-const props = defineProps({
-  jsonObject: {
-    type: Object,
-    default: () => {}
-  },
-  height: {
-    type: Number,
-    default: 0
-  },
-  theme: {
-    type: String,
-    default: null
-  }
-})
-const editor = ref<any>(null)
-const cfCodemirrorJsonViewRef = ref()
-const codemirrorHeight = ref('400px')
-watch(
-  () => props.jsonObject,
-  (newVal) => {
-    if (editor.value) {
-      // 更新 CodeMirror 中的值
-      loadEditor()
-    }
-  },
-  { deep: true }
-)
-onMounted(() => {
-  nextTick(() => {
-    loadEditor()
-  })
-})
-
-function loadEditor() {
-  if (editor.value) {
-    editor.value.destroy()
-  }
-  const jsonStr = props.jsonObject ? JSON.stringify(props.jsonObject, null, 2) : ''
-  if (props.height) {
-    codemirrorHeight.value = props.height + 'px'
-  } else {
-    if (cfCodemirrorJsonViewRef.value) {
-      const rect = cfCodemirrorJsonViewRef.value.getBoundingClientRect()
-      if (rect.y || rect.y === 0) {
-        console.log('window.innerHeight - rect.y', window.innerHeight, rect.y)
-        codemirrorHeight.value = window.innerHeight - rect.y - 100 + 'px'
-      }
-    }
-  }
-  const state = getEditorState(jsonStr)
-  let element: Element | null = document.getElementById('cf-codemirror-view-json')
-  if (element) {
-    editor.value = new EditorView({
-      state,
-      parent: element
-    })
-  }
-}
-// 获取编辑器状态
-function getEditorState(jsonStr: string) {
-  // 获取主题
-  const mytheme = getTheme()
-  // 基本主题样式，主要设置字体大小和高度
-  const baseTheme = EditorView.theme({
-    '.cm-content, .cm-gutter': { minHeight: codemirrorHeight.value },
-    '&': {
-      height: codemirrorHeight.value,
-      maxHeight: codemirrorHeight.value,
-      fontSize: '12px'
-    }
-  })
-  return EditorState.create({
-    doc: jsonStr,
-    extensions: [
-      EditorState.tabSize.of(16),
-      basicSetup,
-      jsonLanguage,
-      mytheme,
-      baseTheme,
-      readOnlyFacet.of(true),
-      preventChanges
-    ]
-  })
-}
-
-// 创建一个新的 Facet
-const readOnlyFacet = Facet.define<boolean, boolean>({ combine: (values) => values.some((a) => a) })
-
-// 创建一个新的 StateField 来监听更改
-const preventChanges = EditorState.transactionFilter.of((tr: any) => {
-  if (tr.isUserEvent && tr.docChanged && tr.state.facet(readOnlyFacet)) {
-    return {
-      changes: {
-        from: tr.changes.from,
-        to: tr.changes.to,
-        insert: tr.startState.doc.sliceString(tr.changes.from, tr.changes.to)
-      }
-    }
-  }
-  return tr
-})
-
-function getTheme() {
-  return EditorView.theme({})
-}
-</script>
-<style scoped></style>