feat: 对话增加历史记录

apps/application/template/embed.js

@@ -53,7 +53,7 @@ const chatButtonHtml=
 
 const getChatContainerHtml=(protocol,host,token)=>{
  return `<div id="maxkb-chat-container">
-<iframe id="maxkb-chat" src=${protocol}://${host}/ui/chat/${token}></iframe>
+<iframe id="maxkb-chat" src=${protocol}://${host}/ui/chat/${token}?mode=embed></iframe>
 <div class="maxkb-operate"><div class="maxkb-closeviewport maxkb-viewportnone"><svg style="vertical-align: middle;overflow: hidden;" t="1710214539671"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  fill="rgb(100, 106, 115)" width="16" height="16"><path d="M85.333333 384c25.6 0 42.666667-17.066667 42.666667-42.666667V128h213.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v256c0 25.6 17.066667 42.666667 42.666666 42.666667zM938.666667 640c-25.6 0-42.666667 17.066667-42.666667 42.666667v213.333333h-213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h256c25.6 0 42.666667-17.066667 42.666666-42.666666v-256c0-25.6-17.066667-42.666667-42.666666-42.666667zM601.6 401.066667c4.266667 8.533333 12.8 17.066667 21.333333 21.333333 4.266667 4.266667 12.8 4.266667 17.066667 4.266667h256c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666667h-153.6l226.133333-226.133333c17.066667-17.066667 17.066667-42.666667 0-59.733333-8.533333-8.533333-17.066667-12.8-29.866666-12.8s-21.333333 4.266667-29.866667 12.8L682.666667 281.6V128c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666667 42.666667v256c0 4.266667 0 12.8 4.266667 17.066667zM115.2 968.533333L341.333333 742.4V896c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666667-42.666667v-256c0-4.266667 0-12.8-4.266667-17.066667-4.266667-8.533333-12.8-17.066667-21.333333-21.333333-4.266667-4.266667-12.8-4.266667-17.066667-4.266667H128c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667h153.6l-226.133333 226.133333c-17.066667 17.066667-17.066667 42.666667 0 59.733333s42.666667 17.066667 59.733333 0z" p-id="10189"></path></svg></div>
 <div class="maxkb-openviewport">
             <svg t="1710150885892"  style="vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  fill="rgb(100, 106, 115)" width="16" height="16" ><path d="M85.333333 384c25.6 0 42.666667-17.066667 42.666667-42.666667V128h213.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H85.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v256c0 25.6 17.066667 42.666667 42.666666 42.666667zM938.666667 640c-25.6 0-42.666667 17.066667-42.666667 42.666667v213.333333h-213.333333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h256c25.6 0 42.666667-17.066667 42.666666-42.666666v-256c0-25.6-17.066667-42.666667-42.666666-42.666667zM977.066667 68.266667c-4.266667-8.533333-12.8-17.066667-21.333334-21.333334-4.266667-4.266667-12.8-4.266667-17.066666-4.266666h-256c-25.6 0-42.666667 17.066667-42.666667 42.666666s17.066667 42.666667 42.666667 42.666667h153.6l-226.133334 226.133333c-17.066667 17.066667-17.066667 42.666667 0 59.733334 8.533333 8.533333 17.066667 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8L896 187.733333V341.333333c0 25.6 17.066667 42.666667 42.666667 42.666667s42.666667-17.066667 42.666666-42.666667V85.333333c0-4.266667 0-12.8-4.266666-17.066666zM354.133333 610.133333L128 836.266667V682.666667c0-25.6-17.066667-42.666667-42.666667-42.666667s-42.666667 17.066667-42.666666 42.666667v256c0 4.266667 0 12.8 4.266666 17.066666 4.266667 8.533333 12.8 17.066667 21.333334 21.333334 4.266667 4.266667 12.8 4.266667 17.066666 4.266666h256c25.6 0 42.666667-17.066667 42.666667-42.666666s-17.066667-42.666667-42.666667-42.666667H187.733333l226.133334-226.133333c17.066667-17.066667 17.066667-42.666667 0-59.733334s-42.666667-17.066667-59.733334 0z" p-id="8645"></path></svg>

ui/src/api/log.ts

@@ -1,5 +1,5 @@
 import { Result } from '@/request/Result'
-import { get, post, del, put, exportExcel } from '@/request/index'
+import { get, del, put, exportExcel } from '@/request/index'
 import type { pageRequest } from '@/api/type/common'
 import { type Ref } from 'vue'
 

ui/src/components/ai-chat/LogOperationButton.vue

@@ -41,7 +41,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted } from 'vue'
+import { ref } from 'vue'
 import { copyClick } from '@/utils/clipboard'
 import EditContentDialog from '@/views/log/component/EditContentDialog.vue'
 import EditMarkDialog from '@/views/log/component/EditMarkDialog.vue'
@@ -65,7 +65,6 @@ const EditContentDialogRef = ref()
 const EditMarkDialogRef = ref()
 
 const buttonData = ref(props.data)
-const loading = ref(false)
 
 function editContent(data: any) {
   EditContentDialogRef.value.open(data)

ui/src/components/ai-chat/OperationButton.vue

@@ -56,7 +56,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted } from 'vue'
+import { ref } from 'vue'
 import { copyClick } from '@/utils/clipboard'
 import applicationApi from '@/api/application'
 const props = defineProps({
@@ -68,7 +68,7 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  chartId: {
+  chatId: {
     type: String,
     default: ''
   },
@@ -86,8 +86,8 @@ function regeneration() {
 
 function voteHandle(val: string) {
   applicationApi
-    .putChatVote(props.applicationId, props.chartId, props.data.record_id, val, loading)
-    .then((res) => {
+    .putChatVote(props.applicationId, props.chatId, props.data.record_id, val, loading)
+    .then(() => {
       buttonData.value['vote_status'] = val
       emit('update:data', buttonData.value)
     })

ui/src/components/ai-chat/index.vue

@@ -2,7 +2,7 @@
   <div ref="aiChatRef" class="ai-chat" :class="log ? 'chart-log' : ''">
     <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
       <div ref="dialogScrollbar" class="ai-chat__content p-24">
-        <div class="item-content mb-16" v-if="!props.available || props.data?.prologue">
+        <div class="item-content mb-16" v-if="!props.available || (props.data?.prologue && !log)">
           <div class="avatar">
             <AppAvatar class="avatar-gradient">
               <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
@@ -132,7 +132,7 @@
                   <OperationButton
                     :data="item"
                     :applicationId="appId"
-                    :chartId="chartOpenId"
+                    :chatId="chartOpenId"
                     @regeneration="regenerationChart(item)"
                   />
                 </div>
@@ -187,7 +187,6 @@ import { randomId } from '@/utils/utils'
 import useStore from '@/stores'
 import MdRenderer from '@/components/markdown-renderer/MdRenderer.vue'
 import { MdPreview } from 'md-editor-v3'
-import { MsgError } from '@/utils/message'
 import { debounce } from 'lodash'
 defineOptions({ name: 'AiChat' })
 const route = useRoute()
@@ -260,9 +259,7 @@ watch(
 watch(
   () => props.record,
   (value) => {
-    if (props.log) {
-      chatList.value = value
-    }
+    chatList.value = value
   },
   {
     immediate: true
@@ -446,7 +443,7 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean) {
     })
   }
   if (!chartOpenId.value) {
-    getChartOpenId(chat).catch((e) => {
+    getChartOpenId(chat).catch(() => {
       errorWrite(chat)
     })
   } else {
@@ -464,7 +461,7 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean) {
             .then(() => {
               chatMessage(chat)
             })
-            .catch((err) => {
+            .catch(() => {
               errorWrite(chat)
             })
         } else if (response.status === 460) {

ui/src/components/common-list/index.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, useSlots } from 'vue'
+import { ref, watch } from 'vue'
 
 defineOptions({ name: 'CommonList' })
 
@@ -30,6 +30,8 @@ const props = withDefaults(
   }
 )
 
+const current = ref<Number | String>(0)
+
 watch(
   () => props.defaultActive,
   (val) => {
@@ -42,8 +44,6 @@ watch(
 
 const emit = defineEmits(['click'])
 
-const current = ref(0)
-
 function clickHandle(row: any, index: number) {
   current.value = index
   emit('click', row)
@@ -54,10 +54,12 @@ function clickHandle(row: any, index: number) {
 .common-list {
   li {
     padding: 10px 16px;
+    font-weight: 400;
     &.active {
       background: var(--el-color-primary-light-9);
       border-radius: 4px;
       color: var(--el-color-primary);
+      font-weight: 500;
     }
   }
 }

ui/src/router/modules/setting.ts

@@ -5,7 +5,7 @@ const settingRouter = {
   path: '/setting',
   name: 'setting',
   meta: { icon: 'Setting', title: '系统设置', permission: 'SETTING:READ' },
-  redirect: (to: any) => {
+  redirect: () => {
     if (hasPermission(new Role('ADMIN'), 'AND')) {
       return '/user'
     }

ui/src/stores/modules/log.ts

@@ -18,6 +18,23 @@ const useLogStore = defineStore({
             reject(error)
           })
       })
+    },
+    async asyncChatRecordLog(
+      id: string,
+      chatId: string,
+      page: pageRequest,
+      loading?: Ref<boolean>
+    ) {
+      return new Promise((resolve, reject) => {
+        logApi
+          .getChatRecordLog(id, chatId, page, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
     }
   }
 })

ui/src/utils/message.ts

@@ -1,6 +1,4 @@
-import { h } from 'vue'
-import { ElMessageBox, ElMessage, ElIcon } from 'element-plus'
-import { WarningFilled } from '@element-plus/icons-vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
 
 export const MsgSuccess = (message: string) => {
   ElMessage.success({
@@ -52,21 +50,3 @@ export const MsgConfirm = (title: string, description: string, options?: any) =>
   }
   return ElMessageBox.confirm(description, title, defaultOptions)
 }
-
-// export const MsgConfirm = ({ title, description }: any, options?: any) => {
-//   const message: any = h('div', { class: 'app-confirm' }, [
-//     h('h4', { class: 'app-confirm-title flex align-center' }, [
-//       h(ElIcon, { class: 'icon' }, [h(WarningFilled)]),
-//       h('span', { class: 'ml-16' }, title)
-//     ]),
-//     h('div', { class: 'app-confirm-description mt-8' }, description)
-//   ])
-
-//   const defaultOptions: Object = {
-//     showCancelButton: true,
-//     confirmButtonText: '确定',
-//     cancelButtonText: '取消',
-//     ...options
-//   }
-//   return ElMessageBox({ message, ...defaultOptions })
-// }

ui/src/views/application/index.vue

@@ -92,7 +92,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import applicationApi from '@/api/application'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { isAppIcon } from '@/utils/application'
@@ -121,7 +121,7 @@ function searchHandle() {
 }
 function getAccessToken(id: string) {
   application.asyncGetAccessToken(id, loading).then((res: any) => {
-    window.open(application.location + res?.data?.access_token)
+    window.open(application.location + res?.data?.access_token + '?mode=pc')
   })
 }
 

ui/src/views/chat/base/index.vue

@@ -34,7 +34,7 @@ const applicationAvailable = ref<boolean>(true)
 function getAccessToken(token: string) {
   application
     .asyncAppAuthentication(token, loading)
-    .then((res) => {
+    .then(() => {
       getProfile()
     })
     .catch(() => {

ui/src/views/chat/embed/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="chat" v-loading="loading">
-    <div class="chat__header">
+  <div class="chat-embed" v-loading="loading">
+    <div class="chat-embed__header">
       <div class="chat-width">
         <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
       </div>
     </div>
-    <div class="chat__main chat-width">
+    <div class="chat-embed__main chat-width">
       <AiChat
         v-model:data="applicationDetail"
         :available="applicationAvailable"
         :appId="applicationDetail?.id"
       ></AiChat>
     </div>
-    <div class="chat__footer"></div>
+    <!-- <div class="chat__footer"></div> -->
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
 const route = useRoute()
@@ -35,7 +35,7 @@ const chatLogeData = ref<any[]>([])
 function getAccessToken(token: string) {
   application
     .asyncAppAuthentication(token, loading)
-    .then((res) => {
+    .then(() => {
       getProfile()
     })
     .catch(() => {
@@ -73,7 +73,7 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-.chat {
+.chat-embed {
   background-color: var(--app-layout-bg-color);
   overflow: hidden;
   &__header {