feat: add chat log step detail

frontend/src/api/chat.ts

@@ -300,8 +300,10 @@ export class ChatLogHistoryItem {
   duration?: number | undefined
   total_tokens?: number | undefined
   operate?: string | undefined
+  operate_key?: string | undefined
   local_operation?: boolean | undefined
   error?: boolean | undefined
+  message?: any
 
   constructor()
   constructor(
@@ -311,7 +313,8 @@ export class ChatLogHistoryItem {
     total_tokens: number | undefined,
     operate: string | undefined,
     local_operation: boolean | undefined,
-    error: boolean | undefined
+    error: boolean | undefined,
+    message: any | undefined
   )
   constructor(
     start_time?: Date | string,
@@ -320,15 +323,18 @@ export class ChatLogHistoryItem {
     total_tokens?: number | undefined,
     operate?: string | undefined,
     local_operation?: boolean | undefined,
-    error?: boolean | undefined
+    error?: boolean | undefined,
+    message?: any | undefined
   ) {
     this.start_time = getDate(start_time)
     this.finish_time = getDate(finish_time)
     this.duration = duration
     this.total_tokens = total_tokens
+    this.operate_key = operate
     this.operate = t('chat.log.' + operate)
     this.local_operation = !!local_operation
     this.error = !!error
+    this.message = message
   }
 }
 
@@ -373,7 +379,8 @@ const toChatLogHistoryItem = (data?: any): any | undefined => {
     data.total_tokens,
     data.operate,
     data.local_operation,
-    data.error
+    data.error,
+    data.message
   )
 }
 

frontend/src/i18n/en.json

@@ -767,7 +767,16 @@
       "FILTER_CUSTOM_PROMPT": "Match Custom Prompts",
       "EXECUTE_SQL": "Execute SQL",
       "GENERATE_PICTURE": "Generate Picture"
-    }
+    },
+    "log_system": "Conversation Template",
+    "log_question": "Current Question",
+    "log_answer": "AI Response",
+    "log_history": "History",
+    "find_term_title": "Matched {0} terms",
+    "find_sql_sample_title": "Matched {0} SQL examples",
+    "find_custom_prompt_title": "Matched {0} custom prompts",
+    "query_count_title": "Found {0} data entries",
+    "generate_picture_success": "Image generated"
   },
   "about": {
     "title": "About",

frontend/src/i18n/ko-KR.json

@@ -767,7 +767,16 @@
       "FILTER_CUSTOM_PROMPT": "사용자 정의 프롬프트 매칭",
       "EXECUTE_SQL": "SQL 실행",
       "GENERATE_PICTURE": "이미지 생성"
-    }
+    },
+    "log_system": "대화 템플릿",
+    "log_question": "현재 질문",
+    "log_answer": "AI 응답",
+    "log_history": "기록",
+    "find_term_title": "{0}개의 용어 매칭됨",
+    "find_sql_sample_title": "{0}개의 SQL 예시 매칭됨",
+    "find_custom_prompt_title": "{0}개의 사용자 정의 프롬프트 매칭됨",
+    "query_count_title": "{0}개의 데이터 항목 발견됨",
+    "generate_picture_success": "이미지가 생성되었습니다"
   },
   "about": {
     "title": "정보",

frontend/src/i18n/zh-CN.json

@@ -767,7 +767,16 @@
       "FILTER_CUSTOM_PROMPT": "匹配自定义提示词",
       "EXECUTE_SQL": "执行 SQL",
       "GENERATE_PICTURE": "生成图片"
-    }
+    },
+    "log_system": "对话模板",
+    "log_question": "本次提问",
+    "log_answer": "AI 回答",
+    "log_history": "历史记录",
+    "find_term_title":"匹配到 {0} 个术语",
+    "find_sql_sample_title":"匹配到 {0} 个SQL示例",
+    "find_custom_prompt_title":"匹配到 {0} 个自定义提示词",
+    "query_count_title":"查询到 {0} 条数据",
+    "generate_picture_success":"已生成图片"
   },
   "about": {
     "title": "关于",

frontend/src/views/chat/ExecutionDetails.vue

@@ -8,6 +8,13 @@ import icon_alarm_clock_colorful from '@/assets/svg/icon_alarm-clock_colorful.sv
 import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
 import { useI18n } from 'vue-i18n'
 import { debounce } from 'lodash-es'
+import LogTerm from './execution-component/LogTerm.vue'
+import LogSQLSample from './execution-component/LogSQLSample.vue'
+import LogCustomPrompt from './execution-component/LogCustomPrompt.vue'
+import LogDataQuery from './execution-component/LogDataQuery.vue'
+import LogChooseTable from './execution-component/LogChooseTable.vue'
+import LogGeneratePicture from './execution-component/LogGeneratePicture.vue'
+import LogWithAi from '@/views/chat/execution-component/LogWithAi.vue'
 
 const { t } = useI18n()
 const logHistory = ref<ChatLogHistory>({})
@@ -76,13 +83,8 @@ defineExpose({
     <div class="title">{{ t('parameter.execution_details') }}</div>
 
     <div class="list">
-      <div
-        v-for="(ele, index) in logHistory.steps"
-        :key="ele.duration"
-        class="list-item"
-        @click="handleExpand(index)"
-      >
-        <div class="header">
+      <div v-for="(ele, index) in logHistory.steps" :key="ele.duration" class="list-item">
+        <div class="header" @click="handleExpand(index)">
           <div class="name">
             <el-icon class="shrink" :class="expandIds.includes(index) && 'expand'" size="10">
               <icon_expand_right_filled></icon_expand_right_filled>
@@ -104,7 +106,15 @@ defineExpose({
             </el-icon>
           </div>
         </div>
-        <div class="content"></div>
+        <div v-if="expandIds.includes(index)" class="content">
+          <LogTerm v-if="ele.operate_key === 'FILTER_TERMS'" :item="ele" />
+          <LogSQLSample v-else-if="ele.operate_key === 'FILTER_SQL_EXAMPLE'" :item="ele" />
+          <LogCustomPrompt v-else-if="ele.operate_key === 'FILTER_CUSTOM_PROMPT'" :item="ele" />
+          <LogChooseTable v-else-if="ele.operate_key === 'CHOOSE_TABLE'" :item="ele" />
+          <LogDataQuery v-else-if="ele.operate_key === 'EXECUTE_SQL'" :item="ele" />
+          <LogGeneratePicture v-else-if="ele.operate_key === 'GENERATE_PICTURE'" :item="ele" />
+          <LogWithAi v-else :item="ele" />
+        </div>
       </div>
     </div>
   </el-drawer>
@@ -175,13 +185,13 @@ defineExpose({
         }
 
         100% {
-          height: 504px;
+          min-height: 54px;
         }
       }
 
       &:has(.expand) {
-        height: 504px;
-        animation: expand 0.5s;
+        min-height: 54px;
+        //animation: expand 0.5s;
       }
 
       .shrink {

frontend/src/views/chat/execution-component/BaseContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="base-container"><slot></slot></div>
+</template>
+
+<style scoped lang="less">
+.base-container {
+  background: #f5f6f7;
+  border-radius: 12px;
+  padding: 12px;
+  margin-top: 16px;
+}
+</style>

frontend/src/views/chat/execution-component/LogChooseTable.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import BaseContent from './BaseContent.vue'
+import { type ChatLogHistoryItem } from '@/api/chat.ts'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    item?: ChatLogHistoryItem
+    error?: string
+  }>(),
+  {
+    item: undefined,
+    error: '',
+  }
+)
+
+const schema = computed(() => {
+  return (props.item?.message as string) ?? ''
+})
+</script>
+
+<template>
+  <BaseContent class="base-container">
+    <template v-if="item.error">
+      {{ error }}
+    </template>
+    <template v-else>
+      <div v-dompurify-html="schema" class="inner-title"></div>
+    </template>
+  </BaseContent>
+</template>
+
+<style scoped lang="less">
+.inner-title {
+  color: #646a73;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  vertical-align: middle;
+  white-space: pre-wrap;
+}
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  .inner-item {
+    border: 1px solid #dee0e3;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 12px;
+    padding: 16px;
+    background: #ffffff;
+
+    .inner-item-title {
+      color: #1f2329;
+      font-weight: 500;
+      line-height: 22px;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+    .inner-item-description {
+      color: #646a73;
+      font-weight: 400;
+      line-height: 22px;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+  }
+}
+</style>

frontend/src/views/chat/execution-component/LogCustomPrompt.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import BaseContent from './BaseContent.vue'
+import { type ChatLogHistoryItem } from '@/api/chat.ts'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(
+  defineProps<{
+    item?: ChatLogHistoryItem
+    error?: string
+  }>(),
+  {
+    item: undefined,
+    error: '',
+  }
+)
+
+const { t } = useI18n()
+
+const list = computed(() => {
+  return (props.item?.message as Array<any>) ?? []
+})
+const title = computed(() => {
+  return t('chat.find_custom_prompt_title', [list.value.length])
+})
+</script>
+
+<template>
+  <BaseContent class="base-container">
+    <template v-if="item.error">
+      {{ error }}
+    </template>
+    <template v-else>
+      <div class="inner-title">{{ title }}</div>
+      <div v-if="list.length > 0" style="margin-top: 8px" class="item-list">
+        <div v-for="(ele, index) in list" :key="index" class="inner-item">
+          <div v-dompurify-html="ele" class="inner-item-description" />
+        </div>
+      </div>
+    </template>
+  </BaseContent>
+</template>
+
+<style scoped lang="less">
+.inner-title {
+  color: #646a73;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  vertical-align: middle;
+}
+.item-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+  flex-wrap: nowrap;
+  .inner-item {
+    border: 1px solid #dee0e3;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-radius: 12px;
+    padding: 16px;
+    background: #ffffff;
+
+    .inner-item-title {
+      color: #1f2329;
+      font-weight: 500;
+      line-height: 22px;
+      font-size: 14px;
+      vertical-align: middle;
+    }
+    .inner-item-description {
+      //color: #646a73;
+      color: #1f2329;
+      font-weight: 400;
+      line-height: 22px;
+      font-size: 14px;
+      vertical-align: middle;
+      white-space: pre-wrap;
+    }
+  }
+}
+</style>