Skip to content

Commit 79dc172

Browse files
ulleoulleo
committed
feat: chat css
1 parent 16bf2dc commit 79dc172

File tree

6 files changed

+260
-85
lines changed

6 files changed

+260
-85
lines changed

‎backend/apps/chat/curd/chat.py‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
import orjson
55
from sqlalchemy import and_
66
from sqlalchemy.orm import load_only
7-
from sqlmodel import select
87

98
from apps.chat.models.chat_model import Chat, ChatRecord, CreateChat, ChatInfo, RenameChat, ChatQuestion
109
from apps.datasource.models.datasource import CoreDatasource
@@ -13,8 +12,9 @@
1312

1413

1514
def list_chats(session: SessionDep, current_user: CurrentUser) -> List[Chat]:
16-
chart_list = session.exec(
17-
select(Chat).where(Chat.create_by == current_user.id).order_by(Chat.create_time.desc())).all()
15+
oid = current_user.oid if current_user.oid is not None else 1
16+
chart_list = session.query(Chat).filter(and_(Chat.create_by == current_user.id, Chat.oid == oid)).order_by(
17+
Chat.create_time.desc()).all()
1818
return chart_list
1919

2020

@@ -149,6 +149,7 @@ def create_chat(session: SessionDep, current_user: CurrentUser, create_chat_obj:
149149

150150
chat = Chat(create_time=datetime.datetime.now(),
151151
create_by=current_user.id,
152+
oid=current_user.oid if current_user.oid is not None else 1,
152153
brief=create_chat_obj.question.strip()[:20])
153154
ds: CoreDatasource | None = None
154155
if create_chat_obj.datasource:

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import { datetimeFormat } from '@/utils/utils.ts'
3+
import type { ChatMessage } from '@/api/chat.ts'
4+
5+
defineProps<{
6+
message: ChatMessage
7+
}>()
8+
</script>
9+
10+
<template>
11+
<div class="tool-container">
12+
<div class="tool-btns">
13+
<slot></slot>
14+
</div>
15+
<div class="tool-times">
16+
<div></div>
17+
<div class="time">
18+
{{ datetimeFormat(message?.record?.create_time) }}
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<style scoped lang="less">
25+
.tool-container {
26+
display: flex;
27+
flex-direction: row;
28+
align-items: center;
29+
justify-content: space-between;
30+
flex-wrap: wrap;
31+
32+
row-gap: 8px;
33+
34+
min-height: 22px;
35+
36+
margin-top: 12px;
37+
margin-bottom: 12px;
38+
39+
.tool-times {
40+
flex: 1;
41+
font-size: 14px;
42+
font-weight: 400;
43+
line-height: 22px;
44+
color: rgba(100, 106, 115, 1);
45+
46+
display: flex;
47+
flex-direction: row;
48+
align-items: center;
49+
justify-content: space-between;
50+
51+
.time {
52+
white-space: nowrap;
53+
}
54+
}
55+
}
56+
</style>

‎frontend/src/views/chat/answer/BaseAnswer.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ onMounted(() => {
7070

7171
<template>
7272
<div class="base-answer-block">
73-
<el-button v-if="loading || hasReasoning" class="thinking-btn" @click="clickShow">
73+
<el-button v-if="message.isTyping || hasReasoning" class="thinking-btn" @click="clickShow">
7474
<div class="thinking-btn-inner">
75-
<span v-if="loading">{{ t('qa.thinking') }}</span>
75+
<span v-if="message.isTyping">{{ t('qa.thinking') }}</span>
7676
<span v-else>{{ t('qa.thinking_step') }}</span>
7777
<span class="btn-icon">
7878
<el-icon v-if="show">
@@ -140,7 +140,14 @@ onMounted(() => {
140140
line-height: 22px;
141141
font-weight: 400;
142142
font-size: 14px;
143-
color: rgba(143, 149, 158, 1);
143+
color: rgba(143, 149, 158, 1) !important;
144+
145+
.markdown-body {
146+
color: rgba(143, 149, 158, 1) !important;
147+
line-height: 22px;
148+
font-weight: 400;
149+
font-size: 14px;
150+
}
144151
145152
padding-bottom: 8px;
146153
border-bottom: 1px solid rgba(31, 35, 41, 0.15);

‎frontend/src/views/chat/chat-block/ChartBlock.vue‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<script setup lang="ts">
2+
import type { ChatMessage } from '@/api/chat.ts'
3+
import DisplayChartBlock from '@/views/chat/component/DisplayChartBlock.vue'
4+
import { computed, ref } from 'vue'
5+
import { concat } from 'lodash-es'
6+
import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
7+
8+
const props = withDefaults(
9+
defineProps<{
10+
message: ChatMessage
11+
isPredict?: boolean
12+
}>(),
13+
{
14+
isPredict: false,
15+
}
16+
)
17+
18+
const dataObject = computed<{
19+
fields: Array<string>
20+
data: Array<{ [key: string]: any }>
21+
}>(() => {
22+
if (props.message?.record?.data) {
23+
if (typeof props.message?.record?.data === 'string') {
24+
return JSON.parse(props.message.record.data)
25+
} else {
26+
return props.message.record.data
27+
}
28+
}
29+
return {}
30+
})
31+
32+
const data = computed(() => {
33+
if (props.isPredict) {
34+
let _list = []
35+
if (
36+
props.message?.record?.predict_data &&
37+
typeof props.message?.record?.predict_data === 'string'
38+
) {
39+
if (
40+
props.message?.record?.predict_data.length > 0 &&
41+
props.message?.record?.predict_data.trim().startsWith('[') &&
42+
props.message?.record?.predict_data.trim().endsWith(']')
43+
) {
44+
try {
45+
_list = JSON.parse(props.message?.record?.predict_data)
46+
} catch (e) {
47+
console.error(e)
48+
}
49+
}
50+
} else {
51+
if (props.message?.record?.predict_data.length > 0) {
52+
_list = props.message?.record?.predict_data
53+
}
54+
}
55+
56+
if (_list.length == 0) {
57+
return _list
58+
}
59+
60+
if (dataObject.value.data && dataObject.value.data.length > 0) {
61+
return concat(dataObject.value.data, _list)
62+
}
63+
64+
return _list
65+
} else {
66+
return dataObject.value.data
67+
}
68+
})
69+
70+
const chartRef = ref()
71+
72+
const chartObject = computed<{
73+
type: ChartTypes
74+
title: string
75+
axis: {
76+
x: { name: string; value: string }
77+
y: { name: string; value: string }
78+
series: { name: string; value: string }
79+
}
80+
columns: Array<{ name: string; value: string }>
81+
}>(() => {
82+
if (props.message?.record?.chart) {
83+
return JSON.parse(props.message.record.chart)
84+
}
85+
return {}
86+
})
87+
88+
const currentChartType = ref<ChartTypes | undefined>(undefined)
89+
90+
const chartType = computed<ChartTypes>({
91+
get() {
92+
if (currentChartType.value) {
93+
return currentChartType.value
94+
}
95+
return chartObject.value.type ?? 'table'
96+
},
97+
set(v) {
98+
currentChartType.value = v
99+
},
100+
})
101+
</script>
102+
103+
<template>
104+
<div
105+
v-if="
106+
(!isPredict && (message?.record?.sql || message?.record?.chart)) ||
107+
(isPredict && message?.record?.chart && data.length > 0)
108+
"
109+
class="chart-component-container"
110+
>
111+
<div class="header-bar">todo</div>
112+
<div v-if="message?.record?.chart" class="chart-block">
113+
<DisplayChartBlock
114+
:id="message.record.id"
115+
ref="chartRef"
116+
:chart-type="chartType"
117+
:message="message"
118+
:data="data"
119+
/>
120+
</div>
121+
</div>
122+
</template>
123+
124+
<style scoped lang="less">
125+
.chart-component-container {
126+
width: 100%;
127+
padding: 16px;
128+
display: flex;
129+
flex-direction: column;
130+
131+
gap: 16px;
132+
133+
border: 1px solid rgba(222, 224, 227, 1);
134+
border-radius: 12px;
135+
136+
.header-bar {
137+
height: 32px;
138+
}
139+
140+
.chart-block {
141+
height: 352px;
142+
width: 100%;
143+
}
144+
}
145+
</style>

‎frontend/src/views/chat/component/DisplayChartBlock.vue‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -61,29 +61,26 @@ defineExpose({
6161
</script>
6262

6363
<template>
64-
<div v-if="message?.record">
65-
<div v-if="message.record.chart" class="chart-base-container">
66-
<div v-if="data?.length > 0">
67-
<ChartComponent
68-
v-if="message.record.id"
69-
:id="id ?? 'default_chat_id'"
70-
ref="chartRef"
71-
:type="chartType"
72-
:columns="chartObject?.columns"
73-
:x="xAxis"
74-
:y="yAxis"
75-
:series="series"
76-
:data="data"
77-
/>
78-
</div>
79-
<el-empty v-else description="No Data" />
80-
</div>
64+
<div v-if="message.record?.chart" class="chart-base-container">
65+
<ChartComponent
66+
v-if="message.record.id && data?.length > 0"
67+
:id="id ?? 'default_chat_id'"
68+
ref="chartRef"
69+
:type="chartType"
70+
:columns="chartObject?.columns"
71+
:x="xAxis"
72+
:y="yAxis"
73+
:series="series"
74+
:data="data"
75+
/>
76+
<el-empty v-else description="No Data" />
8177
</div>
8278
</template>
8379

8480
<style scoped lang="less">
8581
.chart-base-container {
86-
padding: 20px;
82+
height: 100%;
83+
width: 100%;
8784
background: rgba(224, 224, 226, 0.29);
8885
}
8986
</style>

0 commit comments

Comments
 (0)