feat: add chat log step display

#324
#742

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
 
   // 用户滚动离开底部时，标记并停止自动滚动