From 057eb2911dc4887a1e10571b862eaabdccdefc48 Mon Sep 17 00:00:00 2001
From: inter <inter@qq.com>
Date: Mon, 8 Sep 2025 16:37:51 +0800
Subject: [PATCH] Add File

---
 frontend/src/views/chat/index.vue | 1328 +++++++++++++++++++++++++++++
 1 file changed, 1328 insertions(+)
 create mode 100644 frontend/src/views/chat/index.vue

diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue
new file mode 100644
index 0000000..0745584
--- /dev/null
+++ b/frontend/src/views/chat/index.vue
@@ -0,0 +1,1328 @@
+<template>
+  <el-popover
+    :width="280"
+    v-if="assistantStore.assistant && !assistantStore.pageEmbedded && assistantStore.type != 4"
+    placement="bottom-start"
+    popper-class="popover-chat_history popover-chat_history_small"
+  >
+    <template #reference>
+      <el-icon class="show-history_icon" style="" size="20" @click="showFloatPopover">
+        <icon_sidebar_outlined></icon_sidebar_outlined>
+      </el-icon>
+    </template>
+    <ChatListContainer
+      ref="floatPopoverRef"
+      v-model:chat-list="chatList"
+      v-model:current-chat-id="currentChatId"
+      v-model:current-chat="currentChat"
+      v-model:loading="loading"
+      :in-popover="!chatListSideBarShow"
+      @go-empty="goEmpty"
+      @on-chat-created="onChatCreated"
+      @on-click-history="onClickHistory"
+      @on-chat-deleted="onChatDeleted"
+      @on-chat-renamed="onChatRenamed"
+      @on-click-side-bar-btn="hideSideBar"
+    />
+  </el-popover>
+  <el-container class="chat-container no-padding">
+    <el-aside
+      v-if="(isCompletePage || pageEmbedded) && chatListSideBarShow"
+      class="chat-container-left"
+    >
+      <ChatListContainer
+        v-model:chat-list="chatList"
+        v-model:current-chat-id="currentChatId"
+        v-model:current-chat="currentChat"
+        v-model:loading="loading"
+        :in-popover="!chatListSideBarShow"
+        @go-empty="goEmpty"
+        @on-chat-created="onChatCreated"
+        @on-click-history="onClickHistory"
+        @on-chat-deleted="onChatDeleted"
+        @on-chat-renamed="onChatRenamed"
+        @on-click-side-bar-btn="hideSideBar"
+      />
+    </el-aside>
+
+    <div
+      v-if="(!isCompletePage && !pageEmbedded) || !chatListSideBarShow"
+      class="hidden-sidebar-btn"
+      :class="{ 'assistant-popover-sidebar': !isCompletePage && !pageEmbedded }"
+    >
+      <el-popover
+        :width="280"
+        placement="bottom-start"
+        popper-class="popover-chat_history"
+        :popper-style="{ ...defaultFloatPopoverStyle }"
+      >
+        <template #reference>
+          <el-button link type="primary" class="icon-btn" @click="showSideBar">
+            <el-icon>
+              <icon_sidebar_outlined />
+            </el-icon>
+          </el-button>
+        </template>
+        <ChatListContainer
+          ref="floatPopoverRef"
+          v-model:chat-list="chatList"
+          v-model:current-chat-id="currentChatId"
+          v-model:current-chat="currentChat"
+          v-model:loading="loading"
+          :in-popover="!chatListSideBarShow"
+          @go-empty="goEmpty"
+          @on-chat-created="onChatCreated"
+          @on-click-history="onClickHistory"
+          @on-chat-deleted="onChatDeleted"
+          @on-chat-renamed="onChatRenamed"
+          @on-click-side-bar-btn="hideSideBar"
+        />
+      </el-popover>
+
+      <el-drawer
+        v-model="floatPopoverVisible"
+        :with-header="false"
+        :modal="false"
+        direction="ltr"
+        size="278"
+        modal-class="assistant-popover_sidebar"
+        :before-close="hideSideBar"
+      >
+        <ChatListContainer
+          ref="floatPopoverRef"
+          v-model:chat-list="chatList"
+          v-model:current-chat-id="currentChatId"
+          v-model:current-chat="currentChat"
+          v-model:loading="loading"
+          :in-popover="false"
+          @go-empty="goEmpty"
+          @on-chat-created="onChatCreated"
+          @on-click-history="onClickHistory"
+          @on-chat-deleted="onChatDeleted"
+          @on-chat-renamed="onChatRenamed"
+          @on-click-side-bar-btn="hideSideBar"
+        />
+      </el-drawer>
+
+      <el-tooltip effect="dark" :offset="8" :content="t('qa.new_chat')" placement="bottom">
+        <el-button link type="primary" class="icon-btn" @click="createNewChatSimple">
+          <el-icon>
+            <icon_new_chat_outlined />
+          </el-icon>
+        </el-button>
+      </el-tooltip>
+    </div>
+    <el-container :loading="loading">
+      <el-main
+        class="chat-record-list"
+        :class="{
+          'hide-sidebar': (isCompletePage || pageEmbedded) && !chatListSideBarShow,
+          'assistant-chat-main': !isCompletePage && !pageEmbedded,
+        }"
+      >
+        <div v-if="computedMessages.length == 0 && !loading" class="welcome-content-block">
+          <div class="welcome-content">
+            <template v-if="isCompletePage">
+              <div class="greeting">
+                <el-icon size="32">
+                  <logo_fold />
+                </el-icon>
+                {{ t('qa.greeting') }}
+              </div>
+              <div class="sub">
+                {{ t('qa.hint_description') }}
+              </div>
+            </template>
+
+            <div v-else class="assistant-desc">
+              <img
+                v-if="logoAssistant"
+                :src="logoAssistant"
+                class="logo"
+                width="30px"
+                height="30px"
+                alt=""
+              />
+              <el-icon v-else size="32">
+                <logo_fold />
+              </el-icon>
+              <div class="i-am">{{ welcome }}</div>
+              <div class="i-can">{{ welcomeDesc }}</div>
+            </div>
+
+            <el-button
+              v-if="isCompletePage && currentChatId === undefined"
+              size="large"
+              type="primary"
+              class="greeting-btn"
+              @click="createNewChatSimple"
+            >
+              <span class="inner-icon">
+                <el-icon>
+                  <icon_new_chat_outlined />
+                </el-icon>
+              </span>
+              {{ t('qa.start_sqlbot') }}
+            </el-button>
+          </div>
+        </div>
+        <div v-else-if="computedMessages.length == 0 && loading" class="welcome-content-block">
+          <logo />
+        </div>
+        <el-scrollbar
+          v-if="computedMessages.length > 0"
+          ref="chatListRef"
+          class="no-horizontal"
+          @scroll="handleScroll"
+        >
+          <div
+            ref="innerRef"
+            class="chat-scroll"
+            :class="{
+              'no-sidebar': isCompletePage && !chatListSideBarShow,
+              pad16: !isCompletePage,
+            }"
+          >
+            <template v-for="(message, _index) in computedMessages" :key="_index">
+              <ChatRow :current-chat="currentChat" :msg="message" :hide-avatar="message.first_chat">
+                <RecommendQuestion
+                  v-if="message.role === 'assistant' && message.first_chat"
+                  ref="recommendQuestionRef"
+                  :current-chat="currentChat"
+                  :record-id="message.record?.id"
+                  :questions="message.recommended_question"
+                  :disabled="isTyping"
+                  :first-chat="message.first_chat"
+                  @click-question="quickAsk"
+                  @stop="onChatStop"
+                />
+                <UserChat v-if="message.role === 'user'" :message="message" />
+                <template v-if="message.role === 'assistant' && !message.first_chat">
+                  <ChartAnswer
+                    v-if="
+                      (message?.record?.analysis_record_id === undefined ||
+                        message?.record?.analysis_record_id === null) &&
+                      (message?.record?.predict_record_id === undefined ||
+                        message?.record?.predict_record_id === null)
+                    "
+                    ref="chartAnswerRef"
+                    :chat-list="chatList"
+                    :current-chat="currentChat"
+                    :current-chat-id="currentChatId"
+                    :loading="isTyping"
+                    :message="message"
+                    :reasoning-name="['sql_answer', 'chart_answer']"
+                    @finish="onChartAnswerFinish"
+                    @error="onChartAnswerError"
+                    @stop="onChatStop"
+                  >
+                    <ErrorInfo :error="message.record?.error" class="error-container" />
+                    <template #tool>
+                      <ChatToolBar v-if="!message.isTyping" :message="message">
+                        <div class="tool-btns">
+                          <el-tooltip
+                            effect="dark"
+                            :offset="8"
+                            :content="t('qa.ask_again')"
+                            placement="top"
+                          >
+                            <el-button
+                              class="tool-btn"
+                              text
+                              :disabled="isTyping"
+                              @click="askAgain(message)"
+                            >
+                              <el-icon size="18">
+                                <icon_replace_outlined />
+                              </el-icon>
+                            </el-button>
+                          </el-tooltip>
+                          <template v-if="message.record?.chart">
+                            <div class="divider"></div>
+                            <div>
+                              <el-button
+                                class="tool-btn"
+                                text
+                                :disabled="isTyping"
+                                @click="clickAnalysis(message.record?.id)"
+                              >
+                                <span class="tool-btn-inner">
+                                  <el-icon size="18">
+                                    <icon_screen_outlined />
+                                  </el-icon>
+                                  <span class="btn-text">
+                                    {{ t('chat.data_analysis') }}
+                                  </span>
+                                </span>
+                              </el-button>
+                            </div>
+                            <div>
+                              <el-button
+                                class="tool-btn"
+                                text
+                                :disabled="isTyping"
+                                @click="clickPredict(message.record?.id)"
+                              >
+                                <span class="tool-btn-inner">
+                                  <el-icon size="18">
+                                    <icon_start_outlined />
+                                  </el-icon>
+                                  <span class="btn-text">
+                                    {{ t('chat.data_predict') }}
+                                  </span>
+                                </span>
+                              </el-button>
+                            </div>
+                          </template>
+                        </div>
+                      </ChatToolBar>
+                    </template>
+                    <template #footer>
+                      <RecommendQuestion
+                        ref="recommendQuestionRef"
+                        :current-chat="currentChat"
+                        :record-id="message.record?.id"
+                        :questions="message.recommended_question"
+                        :first-chat="message.first_chat"
+                        :disabled="isTyping"
+                        @click-question="quickAsk"
+                        @stop="onChatStop"
+                      />
+                    </template>
+                  </ChartAnswer>
+                  <AnalysisAnswer
+                    v-if="
+                      message?.record?.analysis_record_id !== undefined &&
+                      message?.record?.analysis_record_id !== null
+                    "
+                    ref="analysisAnswerRef"
+                    :chat-list="chatList"
+                    :current-chat="currentChat"
+                    :current-chat-id="currentChatId"
+                    :loading="isTyping"
+                    :message="message"
+                    @finish="onAnalysisAnswerFinish"
+                    @error="onAnalysisAnswerError"
+                    @stop="onChatStop"
+                  >
+                    <ErrorInfo :error="message.record?.error" class="error-container" />
+                    <template #tool>
+                      <ChatToolBar v-if="!message.isTyping" :message="message" />
+                    </template>
+                  </AnalysisAnswer>
+                  <PredictAnswer
+                    v-if="
+                      message?.record?.predict_record_id !== undefined &&
+                      message?.record?.predict_record_id !== null
+                    "
+                    ref="predictAnswerRef"
+                    :chat-list="chatList"
+                    :current-chat="currentChat"
+                    :current-chat-id="currentChatId"
+                    :loading="isTyping"
+                    :message="message"
+                    @finish="onPredictAnswerFinish"
+                    @error="onPredictAnswerError"
+                    @stop="onChatStop"
+                  >
+                    <ErrorInfo :error="message.record?.error" class="error-container" />
+                    <template #tool>
+                      <ChatToolBar v-if="!message.isTyping" :message="message" />
+                    </template>
+                  </PredictAnswer>
+                </template>
+              </ChatRow>
+            </template>
+          </div>
+        </el-scrollbar>
+      </el-main>
+      <el-footer v-if="computedMessages.length > 0 || !isCompletePage" class="chat-footer">
+        <div class="input-wrapper" @click="clickInput">
+          <div v-if="isCompletePage" class="datasource">
+            <template v-if="currentChat.datasource && currentChat.datasource_name">
+              {{ t('qa.selected_datasource') }}:
+              <img
+                v-if="currentChatEngineType"
+                style="margin-left: 4px; margin-right: 4px"
+                :src="currentChatEngineType"
+                width="16px"
+                height="16px"
+                alt=""
+              />
+              <span class="name">
+                {{ currentChat.datasource_name }}
+              </span>
+            </template>
+          </div>
+          <el-input
+            ref="inputRef"
+            v-model="inputMessage"
+            :disabled="isTyping"
+            clearable
+            class="input-area"
+            :class="!isCompletePage && 'is-assistant'"
+            type="textarea"
+            :autosize="{ minRows: 1, maxRows: 8.583 }"
+            :placeholder="t('qa.question_placeholder')"
+            @keydown.enter.exact.prevent="($event: any) => sendMessage($event)"
+            @keydown.ctrl.enter.exact.prevent="handleCtrlEnter"
+          />
+
+          <el-button
+            circle
+            type="primary"
+            class="input-icon"
+            :disabled="isTyping"
+            @click.stop="sendMessage"
+          >
+            <el-icon size="16">
+              <icon_send_filled />
+            </el-icon>
+          </el-button>
+        </div>
+      </el-footer>
+    </el-container>
+
+    <ChatCreator v-if="isCompletePage" ref="chatCreatorRef" @on-chat-created="onChatCreatedQuick" />
+    <ChatCreator ref="hiddenChatCreatorRef" hidden @on-chat-created="onChatCreatedQuick" />
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat'
+import ChatRow from './ChatRow.vue'
+import ChartAnswer from './answer/ChartAnswer.vue'
+import AnalysisAnswer from './answer/AnalysisAnswer.vue'
+import PredictAnswer from './answer/PredictAnswer.vue'
+import UserChat from './chat-block/UserChat.vue'
+import RecommendQuestion from './RecommendQuestion.vue'
+import ChatListContainer from './ChatListContainer.vue'
+import ChatCreator from '@/views/chat/ChatCreator.vue'
+import ErrorInfo from './ErrorInfo.vue'
+import ChatToolBar from './ChatToolBar.vue'
+import { dsTypeWithImg } from '@/views/ds/js/ds-type'
+import { useI18n } from 'vue-i18n'
+import { find, forEach } from 'lodash-es'
+import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
+import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
+import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
+import icon_screen_outlined from '@/assets/svg/icon_screen_outlined.svg'
+import icon_start_outlined from '@/assets/svg/icon_start_outlined.svg'
+import logo_fold from '@/assets/svg/logo-custom_small.svg'
+import logo from '@/assets/LOGO.svg'
+import icon_send_filled from '@/assets/svg/icon_send_filled.svg'
+import { useAssistantStore } from '@/stores/assistant'
+import { onClickOutside } from '@vueuse/core'
+import { useUserStore } from '@/stores/user'
+import router from '@/router'
+const userStore = useUserStore()
+const props = defineProps<{
+  startChatDsId?: number
+  welcomeDesc?: string
+  logoAssistant?: string
+  welcome?: string
+  pageEmbedded?: boolean
+}>()
+const floatPopoverRef = ref()
+const floatPopoverVisible = ref(false)
+const assistantStore = useAssistantStore()
+const defaultFloatPopoverStyle = ref({
+  padding: '0',
+  height: '654px',
+  border: '1px solid rgba(222, 224, 227, 1)',
+  borderRadius: '6px',
+})
+
+const isCompletePage = computed(() => !assistantStore.getAssistant || assistantStore.getEmbedded)
+
+const { t } = useI18n()
+
+const inputMessage = ref('')
+
+const chatListRef = ref()
+const innerRef = ref()
+const chatCreatorRef = ref()
+
+function scrollToBottom() {
+  nextTick(() => {
+    chatListRef.value?.scrollTo({
+      top: chatListRef.value.wrapRef.scrollHeight,
+      behavior: 'smooth',
+    })
+  })
+}
+
+const loading = ref<boolean>(false)
+const chatList = ref<Array<ChatInfo>>([])
+
+const currentChatId = ref<number | undefined>()
+const currentChat = ref<ChatInfo>(new ChatInfo())
+const isTyping = ref<boolean>(false)
+
+const computedMessages = computed<Array<ChatMessage>>(() => {
+  const messages: Array<ChatMessage> = []
+  if (currentChatId.value === undefined) {
+    return messages
+  }
+  for (let i = 0; i < currentChat.value.records.length; i++) {
+    const record = currentChat.value.records[i]
+    if (record.question !== undefined && !record.first_chat) {
+      messages.push({
+        role: 'user',
+        create_time: record.create_time,
+        record: record,
+        content: record.question,
+        index: i,
+      })
+    }
+    messages.push({
+      role: 'assistant',
+      create_time: record.create_time,
+      record: record,
+      isTyping: i === currentChat.value.records.length - 1 && isTyping.value,
+      first_chat: record.first_chat,
+      recommended_question: record.recommended_question,
+      index: i,
+    })
+  }
+
+  return messages
+})
+
+const goEmpty = (func?: (...p: any[]) => void, ...param: any[]) => {
+  inputMessage.value = ''
+  stop(func, ...param)
+}
+
+let scrollTime: any
+let scrollingTime: any
+let scrollTopVal = 0
+let scrolling = false
+const scrollBottom = () => {
+  if (scrolling) return
+  if (!isTyping.value) {
+    clearInterval(scrollTime)
+  }
+  chatListRef.value!.setScrollTop(innerRef.value!.clientHeight)
+}
+
+const handleScroll = (val: any) => {
+  if (!isCompletePage.value) return
+  scrollTopVal = val.scrollTop
+  scrolling = true
+  clearTimeout(scrollingTime)
+  scrollingTime = setTimeout(() => {
+    scrolling = false
+  }, 400)
+  if (
+    scrollTopVal + 200 <
+    innerRef.value!.clientHeight - (document.querySelector('.chat-record-list')!.clientHeight - 20)
+  ) {
+    clearInterval(scrollTime)
+    scrollTime = null
+    return
+  }
+
+  if (
+    !scrollTime &&
+    isTyping.value &&
+    scrollTopVal + 30 <
+      innerRef.value!.clientHeight -
+        (document.querySelector('.chat-record-list')!.clientHeight - 20)
+  ) {
+    scrollTime = setInterval(() => {
+      scrollBottom()
+    }, 300)
+  }
+}
+
+const createNewChatSimple = async () => {
+  currentChat.value = new ChatInfo()
+  currentChatId.value = undefined
+  await createNewChat()
+}
+
+const createNewChat = async () => {
+  try {
+    await chatApi.checkLLMModel()
+  } catch (error: any) {
+    console.error(error)
+    let errorMsg = t('model.default_miss')
+    let confirm_text = t('datasource.got_it')
+    if (userStore.isAdmin) {
+      errorMsg = t('model.default_miss_admin')
+      confirm_text = t('model.to_config')
+    }
+    ElMessageBox.confirm(t('qa.ask_failed'), {
+      confirmButtonType: 'primary',
+      tip: errorMsg,
+      showCancelButton: userStore.isAdmin,
+      confirmButtonText: confirm_text,
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+      showClose: false,
+      callback: (val: string) => {
+        if (userStore.isAdmin && val === 'confirm') {
+          router.push('/system/model')
+        }
+      },
+    })
+    return
+  }
+  goEmpty()
+  if (!isCompletePage.value) {
+    currentChat.value = new ChatInfo()
+    currentChatId.value = undefined
+    return
+  }
+  chatCreatorRef.value?.showDs()
+}
+
+function getChatList(callback?: () => void) {
+  loading.value = true
+  chatApi
+    .list()
+    .then((res) => {
+      chatList.value = chatApi.toChatInfoList(res)
+    })
+    .finally(() => {
+      loading.value = false
+      if (callback && typeof callback === 'function') {
+        callback()
+      }
+    })
+}
+
+function onClickHistory(chat: ChatInfo) {
+  scrollToBottom()
+  forEach(chat?.records, (record: ChatRecord) => {
+    // getChatData(record.id)
+    if (record.predict_record_id) {
+      // getChatPredictData(record.id)
+    }
+  })
+}
+
+const currentChatEngineType = computed(() => {
+  return (dsTypeWithImg.find((ele) => currentChat.value.ds_type === ele.type) || {}).img
+})
+
+function onChatDeleted(id: number) {
+  console.info('deleted', id)
+}
+
+function onChatRenamed(chat: Chat) {
+  console.info('renamed', chat)
+}
+
+const chatListSideBarShow = ref<boolean>(true)
+function hideSideBar() {
+  if (!isCompletePage.value && !props.pageEmbedded) {
+    floatPopoverVisible.value = false
+    return
+  }
+  chatListSideBarShow.value = false
+}
+
+function showSideBar() {
+  chatListSideBarShow.value = true
+}
+
+function onChatCreatedQuick(chat: ChatInfo) {
+  chatList.value.unshift(chat)
+  currentChatId.value = chat.id
+  currentChat.value = chat
+  onChatCreated(chat)
+}
+
+function onChatCreated(chat: ChatInfo) {
+  if (chat.records.length === 1) {
+    getRecommendQuestions(chat.records[0].id)
+  }
+}
+
+const recommendQuestionRef = ref()
+
+function getRecommendQuestions(id?: number) {
+  nextTick(() => {
+    if (recommendQuestionRef.value) {
+      if (recommendQuestionRef.value instanceof Array) {
+        for (let i = 0; i < recommendQuestionRef.value.length; i++) {
+          const _id = recommendQuestionRef.value[i].id()
+          if (_id === id) {
+            recommendQuestionRef.value[i].getRecommendQuestions()
+            break
+          }
+        }
+      } else {
+        recommendQuestionRef.value.getRecommendQuestions()
+      }
+    }
+  })
+}
+
+function quickAsk(question: string) {
+  inputMessage.value = question
+  nextTick(() => {
+    sendMessage()
+  })
+}
+
+const chartAnswerRef = ref()
+
+async function onChartAnswerFinish(id: number) {
+  loading.value = false
+  isTyping.value = false
+  getRecommendQuestions(id)
+}
+
+function onChartAnswerError() {
+  loading.value = false
+  isTyping.value = false
+  console.debug('onChartAnswerError')
+}
+
+function onChatStop() {
+  loading.value = false
+  isTyping.value = false
+  console.debug('onChatStop')
+}
+const assistantPrepareSend = async () => {
+  if (
+    !isCompletePage.value &&
+    (currentChatId.value == null || typeof currentChatId.value == 'undefined')
+  ) {
+    const assistantChat = await assistantStore.setChat()
+    if (assistantChat) {
+      onChatCreatedQuick(assistantChat as any)
+    }
+  }
+}
+const sendMessage = async ($event: any = {}) => {
+  if ($event?.isComposing) {
+    return
+  }
+  if (!inputMessage.value.trim()) return
+
+  loading.value = true
+  isTyping.value = true
+  if (isCompletePage.value) {
+    scrollTopVal = innerRef.value!.clientHeight
+    scrollTime = setInterval(() => {
+      scrollBottom()
+    }, 300)
+  }
+  await assistantPrepareSend()
+  const currentRecord = new ChatRecord()
+  currentRecord.create_time = new Date()
+  currentRecord.chat_id = currentChatId.value
+  currentRecord.question = inputMessage.value
+  currentRecord.sql_answer = ''
+  currentRecord.sql = ''
+  currentRecord.chart_answer = ''
+  currentRecord.chart = ''
+
+  currentChat.value.records.push(currentRecord)
+  inputMessage.value = ''
+
+  nextTick(async () => {
+    const index = currentChat.value.records.length - 1
+    if (chartAnswerRef.value) {
+      if (chartAnswerRef.value instanceof Array) {
+        for (let i = 0; i < chartAnswerRef.value.length; i++) {
+          const _index = chartAnswerRef.value[i].index()
+          if (index === _index) {
+            await chartAnswerRef.value[i].sendMessage()
+            break
+          }
+        }
+      } else {
+        await chartAnswerRef.value.sendMessage()
+      }
+    }
+  })
+}
+
+const analysisAnswerRef = ref()
+
+async function onAnalysisAnswerFinish(id: number) {
+  loading.value = false
+  isTyping.value = false
+  console.debug(id)
+  //await getRecommendQuestions(id)
+}
+function onAnalysisAnswerError() {
+  loading.value = false
+  isTyping.value = false
+}
+
+function askAgain(message: ChatMessage) {
+  inputMessage.value = message.record?.question ?? ''
+  nextTick(() => {
+    sendMessage()
+  })
+}
+
+async function clickAnalysis(id?: number) {
+  const baseRecord = find(currentChat.value.records, (value) => id === value.id)
+  if (baseRecord == undefined) {
+    return
+  }
+
+  loading.value = true
+  isTyping.value = true
+
+  const currentRecord = new ChatRecord()
+  currentRecord.create_time = new Date()
+  currentRecord.chat_id = baseRecord.chat_id
+  currentRecord.question = baseRecord.question
+  currentRecord.chart = baseRecord.chart
+  currentRecord.data = baseRecord.data
+  currentRecord.analysis_record_id = id
+  currentRecord.analysis = ''
+
+  currentChat.value.records.push(currentRecord)
+
+  nextTick(async () => {
+    const index = currentChat.value.records.length - 1
+    if (analysisAnswerRef.value) {
+      if (analysisAnswerRef.value instanceof Array) {
+        for (let i = 0; i < analysisAnswerRef.value.length; i++) {
+          const _index = analysisAnswerRef.value[i].index()
+          if (index === _index) {
+            await analysisAnswerRef.value[i].sendMessage()
+            break
+          }
+        }
+      } else {
+        await analysisAnswerRef.value.sendMessage()
+      }
+    }
+  })
+
+  return
+}
+
+const predictAnswerRef = ref()
+
+async function onPredictAnswerFinish(id: number) {
+  loading.value = false
+  isTyping.value = false
+  console.debug('onPredictAnswerFinish: ', id)
+  //await getRecommendQuestions(id)
+}
+function onPredictAnswerError() {
+  loading.value = false
+  isTyping.value = false
+}
+
+async function clickPredict(id?: number) {
+  const baseRecord = find(currentChat.value.records, (value) => id === value.id)
+  if (baseRecord == undefined) {
+    return
+  }
+
+  loading.value = true
+  isTyping.value = true
+
+  const currentRecord = new ChatRecord()
+  currentRecord.create_time = new Date()
+  currentRecord.chat_id = baseRecord.chat_id
+  currentRecord.question = baseRecord.question
+  currentRecord.chart = baseRecord.chart
+  currentRecord.data = baseRecord.data
+  currentRecord.predict_record_id = id
+  currentRecord.predict = ''
+  currentRecord.predict_data = ''
+
+  currentChat.value.records.push(currentRecord)
+
+  nextTick(async () => {
+    const index = currentChat.value.records.length - 1
+    if (predictAnswerRef.value) {
+      if (predictAnswerRef.value instanceof Array) {
+        for (let i = 0; i < predictAnswerRef.value.length; i++) {
+          const _index = predictAnswerRef.value[i].index()
+          if (index === _index) {
+            await predictAnswerRef.value[i].sendMessage()
+            break
+          }
+        }
+      } else {
+        await predictAnswerRef.value.sendMessage()
+      }
+    }
+  })
+
+  return
+}
+
+const handleCtrlEnter = (e: KeyboardEvent) => {
+  const textarea = e.target as HTMLTextAreaElement
+  const start = textarea.selectionStart
+  const end = textarea.selectionEnd
+  const value = textarea.value
+
+  inputMessage.value = value.substring(0, start) + '\n' + value.substring(end)
+
+  nextTick(() => {
+    textarea.selectionStart = textarea.selectionEnd = start + 1
+  })
+}
+
+const inputRef = ref()
+
+function clickInput() {
+  inputRef.value?.focus()
+}
+
+function stop(func?: (...p: any[]) => void, ...param: any[]) {
+  if (recommendQuestionRef.value) {
+    if (recommendQuestionRef.value instanceof Array) {
+      for (let i = 0; i < recommendQuestionRef.value.length; i++) {
+        recommendQuestionRef.value[i].stop()
+      }
+    } else {
+      recommendQuestionRef.value.stop()
+    }
+  }
+  if (chartAnswerRef.value) {
+    if (chartAnswerRef.value instanceof Array) {
+      for (let i = 0; i < chartAnswerRef.value.length; i++) {
+        chartAnswerRef.value[i].stop()
+      }
+    } else {
+      chartAnswerRef.value.stop()
+    }
+  }
+  if (analysisAnswerRef.value) {
+    if (analysisAnswerRef.value instanceof Array) {
+      for (let i = 0; i < analysisAnswerRef.value.length; i++) {
+        analysisAnswerRef.value[i].stop()
+      }
+    } else {
+      analysisAnswerRef.value.stop()
+    }
+  }
+  if (predictAnswerRef.value) {
+    if (predictAnswerRef.value instanceof Array) {
+      for (let i = 0; i < predictAnswerRef.value.length; i++) {
+        predictAnswerRef.value[i].stop()
+      }
+    } else {
+      predictAnswerRef.value.stop()
+    }
+  }
+  if (func && typeof func === 'function') {
+    func(...param)
+  }
+}
+const showFloatPopover = () => {
+  if (!isCompletePage.value && !floatPopoverVisible.value) {
+    floatPopoverVisible.value = true
+  }
+}
+const assistantPrepareInit = () => {
+  if (isCompletePage.value || props.pageEmbedded) {
+    return
+  }
+  Object.assign(defaultFloatPopoverStyle.value, {
+    height: '100% !important',
+    inset: '0px auto auto 0px',
+  })
+  goEmpty()
+  onClickOutside(floatPopoverRef, (event: any) => {
+    if (floatPopoverVisible.value) {
+      let parentElement: any = event.target
+      let isEdOverlay = false
+      while (parentElement) {
+        if (parentElement.className.includes('ed-overlay')) {
+          isEdOverlay = true
+          break
+        } else {
+          parentElement = parentElement.parentElement
+        }
+      }
+      if (isEdOverlay) return
+      floatPopoverVisible.value = false
+    }
+  })
+}
+defineExpose({
+  createNewChat,
+  showFloatPopover,
+})
+
+const hiddenChatCreatorRef = ref()
+
+function jumpCreatChat() {
+  if (props.startChatDsId) {
+    const _id = props.startChatDsId
+    nextTick(() => {
+      hiddenChatCreatorRef.value?.createChat(_id)
+    })
+    const newUrl = window.location.hash.replace(/\?.*$/, '')
+    history.replaceState({}, '', newUrl)
+  }
+}
+
+onMounted(() => {
+  getChatList(jumpCreatChat)
+  assistantPrepareInit()
+})
+</script>
+
+<style lang="less" scoped>
+.chat-container {
+  height: 100%;
+  position: relative;
+
+  border-radius: 12px;
+  .assistant-popover-sidebar {
+    button {
+      display: none;
+    }
+  }
+  .hidden-sidebar-btn {
+    z-index: 1;
+    position: absolute;
+    padding: 16px;
+    top: 0;
+    left: 0;
+  }
+
+  .icon-btn {
+    min-width: unset;
+    width: 26px;
+    height: 26px;
+    font-size: 18px;
+
+    --ed-button-text-color: rgba(31, 35, 41, 1);
+    --ed-button-hover-text-color: var(--ed-button-text-color);
+    --ed-button-active-text-color: var(--ed-button-text-color);
+    --ed-button-hover-link-text-color: var(--ed-button-text-color);
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+    }
+  }
+
+  .chat-container-left {
+    --ed-aside-width: 280px;
+    border-radius: 12px 0 0 12px;
+
+    background: rgba(245, 246, 247, 1);
+  }
+
+  :deep(.chat-record-list) {
+    padding: 0 0 20px 0;
+    border-radius: 0 12px 12px 0;
+
+    .no-horizontal.ed-scrollbar {
+      .ed-scrollbar__bar.is-horizontal {
+        display: none;
+      }
+    }
+
+    &.hide-sidebar {
+      border-radius: 12px;
+    }
+  }
+  .assistant-chat-main {
+    padding: 0 0 20px 0;
+  }
+
+  .chat-scroll {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 56px;
+    padding-right: 56px;
+
+    &.no-sidebar {
+      padding-left: 96px;
+    }
+
+    &.pad16 {
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+
+  .chat-footer {
+    min-height: calc(120px + 16px);
+    max-height: calc(300px + 16px);
+    height: fit-content;
+
+    padding-bottom: 16px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .input-wrapper {
+      width: 100%;
+      position: relative;
+      max-width: 800px;
+
+      .datasource {
+        width: calc(100% - 2px);
+        position: absolute;
+        margin-left: 1px;
+        margin-top: 1px;
+        left: 0;
+        top: 0;
+        padding-top: 12px;
+        padding-left: 12px;
+        z-index: 10;
+        background: transparent;
+        line-height: 22px;
+        font-size: 14px;
+        font-weight: 400;
+        border-top-right-radius: 16px;
+        border-top-left-radius: 16px;
+        color: rgba(100, 106, 115, 1);
+        display: flex;
+        align-items: center;
+
+        .name {
+          color: rgba(31, 35, 41, 1);
+        }
+      }
+
+      .input-area {
+        border-color: #d9dcdf;
+
+        :deep(.ed-textarea__inner) {
+          padding: 42px 12px 52px 12px;
+          background: #f8f9fa;
+          border-radius: 16px;
+          line-height: 24px;
+        }
+
+        &.is-assistant {
+          :deep(.ed-textarea__inner) {
+            padding: 12px 12px 52px 12px;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 24px;
+            border-radius: 16px;
+
+            &::placeholder {
+              color: #8f959e;
+            }
+          }
+        }
+      }
+
+      .input-icon {
+        min-width: unset;
+        position: absolute;
+        bottom: 12px;
+        right: 12px;
+
+        border-color: unset;
+
+        &.is-disabled {
+          background: rgba(187, 191, 196, 1);
+          border-color: unset;
+        }
+      }
+    }
+  }
+
+  .send-btn {
+    min-width: 0;
+  }
+}
+
+.error-container {
+  margin-top: 12px;
+}
+
+.tool-btns {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  column-gap: 16px;
+  row-gap: 8px;
+
+  .tool-btn {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: rgba(100, 106, 115, 1);
+
+    .tool-btn-inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+    }
+    &:active {
+      background: rgba(31, 35, 41, 0.1);
+    }
+  }
+
+  .btn-text {
+    margin-left: 4px;
+  }
+
+  .divider {
+    width: 1px;
+    height: 16px;
+    border-left: 1px solid rgba(31, 35, 41, 0.15);
+  }
+}
+
+.welcome-content-block {
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .welcome-content {
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    flex-direction: column;
+
+    .assistant-desc {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .i-am {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 32px;
+        margin: 16px 0;
+        max-width: 100%;
+        word-break: break-all;
+        padding: 0 20px;
+      }
+
+      .i-can {
+        margin-bottom: 4px;
+        max-width: 350px;
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        color: #646a73;
+        max-width: 88%;
+        word-break: break-all;
+        padding: 0 20px;
+      }
+    }
+
+    .greeting {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      line-height: 32px;
+      font-size: 24px;
+      font-weight: 600;
+      color: rgba(31, 35, 41, 1);
+    }
+
+    .sub {
+      color: grey;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .greeting-btn {
+      width: 100%;
+      height: 88px;
+      border-radius: 16px;
+      border-style: dashed;
+
+      .inner-icon {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        margin-right: 6px;
+      }
+
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: 500;
+
+      --ed-button-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-hover-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-active-text-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-bg-color: rgba(248, 249, 250, 1);
+      --ed-button-hover-bg-color: var(--ed-color-primary-1a, #1cba901a);
+      --ed-button-border-color: rgba(217, 220, 223, 1);
+      --ed-button-hover-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      --ed-button-active-bg-color: var(--ed-color-primary-33, #1cba9033);
+      --ed-button-active-border-color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.assistant-popover_sidebar {
+  .ed-drawer {
+    height: 100% !important;
+    margin-top: 0 !important;
+  }
+  .ed-drawer__body {
+    padding: 0;
+  }
+}
+
+.popover-chat_history {
+  box-shadow: 0px 4px 8px 0px #1f23291a !important;
+  border-radius: 12px !important;
+  overflow: hidden;
+}
+
+.popover-chat_history_small {
+  height: calc(100% - 54px);
+  padding: 0 !important;
+  border: 1px solid rgba(222, 224, 227, 1);
+  border-radius: 6px;
+}
+
+.show-history_icon {
+  cursor: pointer;
+  position: absolute;
+  top: 18px;
+  left: 16px;
+  z-index: 199;
+  &::after {
+    content: '';
+    background-color: #1f23291a;
+    position: absolute;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    display: none;
+  }
+
+  &:hover {
+    &::after {
+      display: block;
+    }
+  }
+}
+</style>