Skip to content

Commit 2f57366

Browse files
ulleoulleo
committed
feat: add chat log step detail
1 parent 40925e9 commit 2f57366

File tree

13 files changed

+712
-17
lines changed

13 files changed

+712
-17
lines changed

‎frontend/src/api/chat.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -300,8 +300,10 @@ export class ChatLogHistoryItem {
300300
duration?: number | undefined
301301
total_tokens?: number | undefined
302302
operate?: string | undefined
303+
operate_key?: string | undefined
303304
local_operation?: boolean | undefined
304305
error?: boolean | undefined
306+
message?: any
305307

306308
constructor()
307309
constructor(
@@ -311,7 +313,8 @@ export class ChatLogHistoryItem {
311313
total_tokens: number | undefined,
312314
operate: string | undefined,
313315
local_operation: boolean | undefined,
314-
error: boolean | undefined
316+
error: boolean | undefined,
317+
message: any | undefined
315318
)
316319
constructor(
317320
start_time?: Date | string,
@@ -320,15 +323,18 @@ export class ChatLogHistoryItem {
320323
total_tokens?: number | undefined,
321324
operate?: string | undefined,
322325
local_operation?: boolean | undefined,
323-
error?: boolean | undefined
326+
error?: boolean | undefined,
327+
message?: any | undefined
324328
) {
325329
this.start_time = getDate(start_time)
326330
this.finish_time = getDate(finish_time)
327331
this.duration = duration
328332
this.total_tokens = total_tokens
333+
this.operate_key = operate
329334
this.operate = t('chat.log.' + operate)
330335
this.local_operation = !!local_operation
331336
this.error = !!error
337+
this.message = message
332338
}
333339
}
334340

@@ -373,7 +379,8 @@ const toChatLogHistoryItem = (data?: any): any | undefined => {
373379
data.total_tokens,
374380
data.operate,
375381
data.local_operation,
376-
data.error
382+
data.error,
383+
data.message
377384
)
378385
}
379386

‎frontend/src/i18n/en.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -767,7 +767,16 @@
767767
"FILTER_CUSTOM_PROMPT": "Match Custom Prompts",
768768
"EXECUTE_SQL": "Execute SQL",
769769
"GENERATE_PICTURE": "Generate Picture"
770-
}
770+
},
771+
"log_system": "Conversation Template",
772+
"log_question": "Current Question",
773+
"log_answer": "AI Response",
774+
"log_history": "History",
775+
"find_term_title": "Matched {0} terms",
776+
"find_sql_sample_title": "Matched {0} SQL examples",
777+
"find_custom_prompt_title": "Matched {0} custom prompts",
778+
"query_count_title": "Found {0} data entries",
779+
"generate_picture_success": "Image generated"
771780
},
772781
"about": {
773782
"title": "About",

‎frontend/src/i18n/ko-KR.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -767,7 +767,16 @@
767767
"FILTER_CUSTOM_PROMPT": "사용자 정의 프롬프트 매칭",
768768
"EXECUTE_SQL": "SQL 실행",
769769
"GENERATE_PICTURE": "이미지 생성"
770-
}
770+
},
771+
"log_system": "대화 템플릿",
772+
"log_question": "현재 질문",
773+
"log_answer": "AI 응답",
774+
"log_history": "기록",
775+
"find_term_title": "{0}개의 용어 매칭됨",
776+
"find_sql_sample_title": "{0}개의 SQL 예시 매칭됨",
777+
"find_custom_prompt_title": "{0}개의 사용자 정의 프롬프트 매칭됨",
778+
"query_count_title": "{0}개의 데이터 항목 발견됨",
779+
"generate_picture_success": "이미지가 생성되었습니다"
771780
},
772781
"about": {
773782
"title": "정보",

‎frontend/src/i18n/zh-CN.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -767,7 +767,16 @@
767767
"FILTER_CUSTOM_PROMPT": "匹配自定义提示词",
768768
"EXECUTE_SQL": "执行 SQL",
769769
"GENERATE_PICTURE": "生成图片"
770-
}
770+
},
771+
"log_system": "对话模板",
772+
"log_question": "本次提问",
773+
"log_answer": "AI 回答",
774+
"log_history": "历史记录",
775+
"find_term_title":"匹配到 {0} 个术语",
776+
"find_sql_sample_title":"匹配到 {0} 个SQL示例",
777+
"find_custom_prompt_title":"匹配到 {0} 个自定义提示词",
778+
"query_count_title":"查询到 {0} 条数据",
779+
"generate_picture_success":"已生成图片"
771780
},
772781
"about": {
773782
"title": "关于",

‎frontend/src/views/chat/ExecutionDetails.vue‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ import icon_alarm_clock_colorful from '@/assets/svg/icon_alarm-clock_colorful.sv
88
import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
99
import { useI18n } from 'vue-i18n'
1010
import { debounce } from 'lodash-es'
11+
import LogTerm from './execution-component/LogTerm.vue'
12+
import LogSQLSample from './execution-component/LogSQLSample.vue'
13+
import LogCustomPrompt from './execution-component/LogCustomPrompt.vue'
14+
import LogDataQuery from './execution-component/LogDataQuery.vue'
15+
import LogChooseTable from './execution-component/LogChooseTable.vue'
16+
import LogGeneratePicture from './execution-component/LogGeneratePicture.vue'
17+
import LogWithAi from '@/views/chat/execution-component/LogWithAi.vue'
1118
1219
const { t } = useI18n()
1320
const logHistory = ref<ChatLogHistory>({})
@@ -76,13 +83,8 @@ defineExpose({
7683
<div class="title">{{ t('parameter.execution_details') }}</div>
7784

7885
<div class="list">
79-
<div
80-
v-for="(ele, index) in logHistory.steps"
81-
:key="ele.duration"
82-
class="list-item"
83-
@click="handleExpand(index)"
84-
>
85-
<div class="header">
86+
<div v-for="(ele, index) in logHistory.steps" :key="ele.duration" class="list-item">
87+
<div class="header" @click="handleExpand(index)">
8688
<div class="name">
8789
<el-icon class="shrink" :class="expandIds.includes(index) && 'expand'" size="10">
8890
<icon_expand_right_filled></icon_expand_right_filled>
@@ -104,7 +106,15 @@ defineExpose({
104106
</el-icon>
105107
</div>
106108
</div>
107-
<div class="content"></div>
109+
<div v-if="expandIds.includes(index)" class="content">
110+
<LogTerm v-if="ele.operate_key === 'FILTER_TERMS'" :item="ele" />
111+
<LogSQLSample v-else-if="ele.operate_key === 'FILTER_SQL_EXAMPLE'" :item="ele" />
112+
<LogCustomPrompt v-else-if="ele.operate_key === 'FILTER_CUSTOM_PROMPT'" :item="ele" />
113+
<LogChooseTable v-else-if="ele.operate_key === 'CHOOSE_TABLE'" :item="ele" />
114+
<LogDataQuery v-else-if="ele.operate_key === 'EXECUTE_SQL'" :item="ele" />
115+
<LogGeneratePicture v-else-if="ele.operate_key === 'GENERATE_PICTURE'" :item="ele" />
116+
<LogWithAi v-else :item="ele" />
117+
</div>
108118
</div>
109119
</div>
110120
</el-drawer>
@@ -175,13 +185,13 @@ defineExpose({
175185
}
176186
177187
100% {
178-
height: 504px;
188+
min-height: 54px;
179189
}
180190
}
181191
182192
&:has(.expand) {
183-
height: 504px;
184-
animation: expand 0.5s;
193+
min-height: 54px;
194+
//animation: expand 0.5s;
185195
}
186196
187197
.shrink {

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts"></script>
2+
3+
<template>
4+
<div class="base-container"><slot></slot></div>
5+
</template>
6+
7+
<style scoped lang="less">
8+
.base-container {
9+
background: #f5f6f7;
10+
border-radius: 12px;
11+
padding: 12px;
12+
margin-top: 16px;
13+
}
14+
</style>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
import BaseContent from './BaseContent.vue'
3+
import { type ChatLogHistoryItem } from '@/api/chat.ts'
4+
import { computed } from 'vue'
5+
6+
const props = withDefaults(
7+
defineProps<{
8+
item?: ChatLogHistoryItem
9+
error?: string
10+
}>(),
11+
{
12+
item: undefined,
13+
error: '',
14+
}
15+
)
16+
17+
const schema = computed(() => {
18+
return (props.item?.message as string) ?? ''
19+
})
20+
</script>
21+
22+
<template>
23+
<BaseContent class="base-container">
24+
<template v-if="item.error">
25+
{{ error }}
26+
</template>
27+
<template v-else>
28+
<div v-dompurify-html="schema" class="inner-title"></div>
29+
</template>
30+
</BaseContent>
31+
</template>
32+
33+
<style scoped lang="less">
34+
.inner-title {
35+
color: #646a73;
36+
font-size: 12px;
37+
line-height: 20px;
38+
font-weight: 500;
39+
vertical-align: middle;
40+
white-space: pre-wrap;
41+
}
42+
.item-list {
43+
display: flex;
44+
flex-direction: column;
45+
gap: 8px;
46+
align-items: stretch;
47+
flex-wrap: nowrap;
48+
.inner-item {
49+
border: 1px solid #dee0e3;
50+
display: flex;
51+
flex-direction: column;
52+
gap: 8px;
53+
border-radius: 12px;
54+
padding: 16px;
55+
background: #ffffff;
56+
57+
.inner-item-title {
58+
color: #1f2329;
59+
font-weight: 500;
60+
line-height: 22px;
61+
font-size: 14px;
62+
vertical-align: middle;
63+
}
64+
.inner-item-description {
65+
color: #646a73;
66+
font-weight: 400;
67+
line-height: 22px;
68+
font-size: 14px;
69+
vertical-align: middle;
70+
}
71+
}
72+
}
73+
</style>

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<script setup lang="ts">
2+
import BaseContent from './BaseContent.vue'
3+
import { type ChatLogHistoryItem } from '@/api/chat.ts'
4+
import { computed } from 'vue'
5+
import { useI18n } from 'vue-i18n'
6+
7+
const props = withDefaults(
8+
defineProps<{
9+
item?: ChatLogHistoryItem
10+
error?: string
11+
}>(),
12+
{
13+
item: undefined,
14+
error: '',
15+
}
16+
)
17+
18+
const { t } = useI18n()
19+
20+
const list = computed(() => {
21+
return (props.item?.message as Array<any>) ?? []
22+
})
23+
const title = computed(() => {
24+
return t('chat.find_custom_prompt_title', [list.value.length])
25+
})
26+
</script>
27+
28+
<template>
29+
<BaseContent class="base-container">
30+
<template v-if="item.error">
31+
{{ error }}
32+
</template>
33+
<template v-else>
34+
<div class="inner-title">{{ title }}</div>
35+
<div v-if="list.length > 0" style="margin-top: 8px" class="item-list">
36+
<div v-for="(ele, index) in list" :key="index" class="inner-item">
37+
<div v-dompurify-html="ele" class="inner-item-description" />
38+
</div>
39+
</div>
40+
</template>
41+
</BaseContent>
42+
</template>
43+
44+
<style scoped lang="less">
45+
.inner-title {
46+
color: #646a73;
47+
font-size: 12px;
48+
line-height: 20px;
49+
font-weight: 500;
50+
vertical-align: middle;
51+
}
52+
.item-list {
53+
display: flex;
54+
flex-direction: column;
55+
gap: 8px;
56+
align-items: stretch;
57+
flex-wrap: nowrap;
58+
.inner-item {
59+
border: 1px solid #dee0e3;
60+
display: flex;
61+
flex-direction: column;
62+
gap: 8px;
63+
border-radius: 12px;
64+
padding: 16px;
65+
background: #ffffff;
66+
67+
.inner-item-title {
68+
color: #1f2329;
69+
font-weight: 500;
70+
line-height: 22px;
71+
font-size: 14px;
72+
vertical-align: middle;
73+
}
74+
.inner-item-description {
75+
//color: #646a73;
76+
color: #1f2329;
77+
font-weight: 400;
78+
line-height: 22px;
79+
font-size: 14px;
80+
vertical-align: middle;
81+
white-space: pre-wrap;
82+
}
83+
}
84+
}
85+
</style>

0 commit comments

Comments
 (0)