feat: add chat log step display

#324
#742

frontend/src/api/chat.ts

@@ -52,6 +52,8 @@ export class ChatRecord {
   analysis_record_id?: number
   predict_record_id?: number
   regenerate_record_id?: number
+  duration?: number
+  total_tokens?: number
 
   constructor()
   constructor(
@@ -77,7 +79,9 @@ export class ChatRecord {
     recommended_question: string | undefined,
     analysis_record_id: number | undefined,
     predict_record_id: number | undefined,
-    regenerate_record_id: number | undefined
+    regenerate_record_id: number | undefined,
+    duration: number | undefined,
+    total_tokens: number | undefined
   )
   constructor(
     id?: number,
@@ -102,7 +106,9 @@ export class ChatRecord {
     recommended_question?: string,
     analysis_record_id?: number,
     predict_record_id?: number,
-    regenerate_record_id?: number
+    regenerate_record_id?: number,
+    duration?: number,
+    total_tokens?: number
   ) {
     this.id = id
     this.chat_id = chat_id
@@ -127,6 +133,8 @@ export class ChatRecord {
     this.analysis_record_id = analysis_record_id
     this.predict_record_id = predict_record_id
     this.regenerate_record_id = regenerate_record_id
+    this.duration = duration
+    this.total_tokens = total_tokens
   }
 }
 
@@ -267,7 +275,9 @@ const toChatRecord = (data?: any): ChatRecord | undefined => {
     data.recommended_question,
     data.analysis_record_id,
     data.predict_record_id,
-    data.regenerate_record_id
+    data.regenerate_record_id,
+    data.duration,
+    data.total_tokens
   )
 }
 const toChatRecordList = (list: any = []): ChatRecord[] => {
@@ -281,6 +291,95 @@ const toChatRecordList = (list: any = []): ChatRecord[] => {
   return records
 }
 
+export class ChatLogHistoryItem {
+  start_time?: Date | string
+  finish_time?: Date | string
+  duration?: number | undefined
+  total_tokens?: number | undefined
+  operate?: string | undefined
+  local_operation?: boolean | undefined
+
+  constructor()
+  constructor(
+    start_time: Date | string,
+    finish_time: Date | string,
+    duration: number | undefined,
+    total_tokens: number | undefined,
+    operate: string | undefined,
+    local_operation: boolean | undefined
+  )
+  constructor(
+    start_time?: Date | string,
+    finish_time?: Date | string,
+    duration?: number | undefined,
+    total_tokens?: number | undefined,
+    operate?: string | undefined,
+    local_operation?: boolean | undefined
+  ) {
+    this.start_time = getDate(start_time)
+    this.finish_time = getDate(finish_time)
+    this.duration = duration
+    this.total_tokens = total_tokens
+    this.operate = operate
+    this.local_operation = !!local_operation
+  }
+}
+
+export class ChatLogHistory {
+  start_time?: Date | string
+  finish_time?: Date | string
+  duration?: number | undefined
+  total_tokens?: number | undefined
+  steps?: Array<ChatLogHistoryItem> | undefined
+
+  constructor()
+  constructor(
+    start_time: Date | string,
+    finish_time: Date | string,
+    duration: number | undefined,
+    total_tokens: number | undefined,
+    steps: Array<ChatLogHistoryItem> | undefined
+  )
+  constructor(
+    start_time?: Date | string,
+    finish_time?: Date | string,
+    duration?: number | undefined,
+    total_tokens?: number | undefined,
+    steps?: Array<ChatLogHistoryItem> | undefined
+  ) {
+    this.start_time = getDate(start_time)
+    this.finish_time = getDate(finish_time)
+    this.duration = duration
+    this.total_tokens = total_tokens
+    this.steps = steps ? steps : []
+  }
+}
+
+const toChatLogHistoryItem = (data?: any): any | undefined => {
+  if (!data) {
+    return undefined
+  }
+  return new ChatLogHistoryItem(
+    data.start_time,
+    data.finish_time,
+    data.duration,
+    data.total_tokens,
+    data.operate,
+    data.local_operation
+  )
+}
+
+const toChatLogHistoryItemList = (list: any = []): ChatLogHistoryItem[] => {
+  const records: Array<ChatLogHistoryItem> = []
+  for (let i = 0; i < list.length; i++) {
+    const record = toChatLogHistoryItem(list[i])
+    if (record) {
+      records.push(record)
+    }
+  }
+  return records
+}
+
 export const chatApi = {
   toChatInfo: (data?: any): ChatInfo | undefined => {
     if (!data) {
@@ -312,6 +411,18 @@ export const chatApi = {
     }
     return infos
   },
+  toChatLogHistory: (data?: any): ChatLogHistory | undefined => {
+    if (!data) {
+      return undefined
+    }
+    return new ChatLogHistory(
+      data.start_time,
+      data.finish_time,
+      data.duration,
+      data.total_tokens,
+      toChatLogHistoryItemList(data.steps)
+    )
+  },
   list: (): Promise<Array<ChatInfo>> => {
     return request.get('/chat/list')
   },
@@ -327,6 +438,9 @@ export const chatApi = {
   get_chart_predict_data: (record_id?: number): Promise<any> => {
     return request.get(`/chat/record/${record_id}/predict_data`)
   },
+  get_chart_log_history: (record_id?: number): Promise<any> => {
+    return request.get(`/chat/record/${record_id}/log`)
+  },
   startChat: (data: any): Promise<ChatInfo> => {
     return request.post('/chat/start', data)
   },

frontend/src/views/chat/ChatTokenTime.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
+
+const props = defineProps<{
+  recordId?: number
+  duration?: number | undefined
+  totalTokens?: number | undefined
+}>()
+
+const logHistory = ref<ChatLogHistory>()
+
+function getLogList() {
+  chatApi.get_chart_log_history(props.recordId).then((res) => {
+    logHistory.value = chatApi.toChatLogHistory(res)
+    console.log(logHistory.value)
+  })
+}
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div v-if="recordId && (duration || totalTokens)" class="tool-container">
+    <span>token: {{ totalTokens }}</span>
+    <span>duration: {{ duration }}</span>
+    <el-button @click="getLogList">log</el-button>
+  </div>
+</template>
+
+<style scoped lang="less">
+.tool-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  row-gap: 8px;
+
+  min-height: 22px;
+
+  margin-top: 12px;
+  margin-bottom: 12px;
+
+  .tool-times {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: rgba(100, 106, 115, 1);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .time {
+      white-space: nowrap;
+    }
+  }
+}
+</style>

frontend/src/views/chat/index.vue

@@ -239,6 +239,11 @@
                   >
                     <ErrorInfo :error="message.record?.error" class="error-container" />
                     <template #tool>
+                      <ChatTokenTime
+                        :record-id="message.record?.id"
+                        :duration="message.record?.duration"
+                        :total-tokens="message.record?.total_tokens"
+                      />
                       <ChatToolBar v-if="!message.isTyping" :message="message">
                         <div class="tool-btns">
                           <el-tooltip
@@ -329,6 +334,11 @@
                   >
                     <ErrorInfo :error="message.record?.error" class="error-container" />
                     <template #tool>
+                      <ChatTokenTime
+                        :record-id="message.record?.id"
+                        :duration="message.record?.duration"
+                        :total-tokens="message.record?.total_tokens"
+                      />
                       <ChatToolBar v-if="!message.isTyping" :message="message" />
                     </template>
                   </AnalysisAnswer>
@@ -351,6 +361,11 @@
                   >
                     <ErrorInfo :error="message.record?.error" class="error-container" />
                     <template #tool>
+                      <ChatTokenTime
+                        :record-id="message.record?.id"
+                        :duration="message.record?.duration"
+                        :total-tokens="message.record?.total_tokens"
+                      />
                       <ChatToolBar v-if="!message.isTyping" :message="message" />
                     </template>
                   </PredictAnswer>
@@ -443,6 +458,7 @@ 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 ChatTokenTime from '@/views/chat/ChatTokenTime.vue'
 import ErrorInfo from './ErrorInfo.vue'
 import ChatToolBar from './ChatToolBar.vue'
 import { dsTypeWithImg } from '@/views/ds/js/ds-type'
@@ -592,8 +608,7 @@ const handleScroll = (val: any) => {
   }, 400)
 
   const threshold =
-    innerRef.value!.clientHeight -
-    (document.querySelector('.chat-record-list')!.clientHeight - 20)
+    innerRef.value!.clientHeight - (document.querySelector('.chat-record-list')!.clientHeight - 20)
   const isNearBottom = scrollTopVal + 50 >= threshold
 
   // 用户滚动离开底部时，标记并停止自动滚动