Skip to content

Commit 59edf69

Browse files
ulleoulleo
committed
feat: chat css
1 parent f657721 commit 59edf69

File tree

5 files changed

+131
-116
lines changed

5 files changed

+131
-116
lines changed

‎frontend/src/i18n/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
},
5050
"qa": {
5151
"new_chat": "New Chat",
52+
"start_sqlbot": "Start SQLBot",
5253
"title": "Smart Query",
5354
"placeholder": "Enter your question",
5455
"ask": "Ask",
@@ -57,7 +58,7 @@
5758
"error": "An error occurred, please try again later",
5859
"question_placeholder": "Press Enter to submit, or use Ctrl + Enter for new line",
5960
"greeting": "Hi, I'm SQLBot, nice to serve you",
60-
"description": "I can help query data, generate charts, detect data anomalies, predict data, etc. Please select a data source to start smart querying~",
61+
"hint_description": "I can help query data, generate charts, detect data anomalies, predict data, etc. Please select a data source to start smart querying~",
6162
"select_datasource": "Select Data Source",
6263
"view_more": "View More",
6364
"selected_datasource": "Selected Data Source",

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
},
5353
"qa": {
5454
"new_chat": "新建对话",
55+
"start_sqlbot": "开启问数",
5556
"title": "智能问数",
5657
"placeholder": "请输入您的问题",
5758
"ask": "提问",
@@ -60,7 +61,7 @@
6061
"error": "发生错误，请稍后再试",
6162
"question_placeholder": "按下 Enter 提交问题, 或使用 Ctrl + Enter 换行",
6263
"greeting": "你好，我是SQLBot，很高兴为你服务",
63-
"description": "我可以帮忙查询数据、生成图表、检测数据异常、预测数据等，请选择一个数据源，开启智能问数吧～",
64+
"hint_description": "我可以查询数据、生成图表、检测数据异常、预测数据等，请选择一个数据源，开启智能问数吧～",
6465
"select_datasource": "选择数据源",
6566
"view_more": "查看更多",
6667
"selected_datasource": "已选择数据源",

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

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,9 @@ withDefaults(
2424
<logo_fold v-if="!hideAvatar" />
2525
</el-icon>
2626
</el-avatar>
27-
<!-- <el-avatar v-if="msg.role === 'user'" class="user-avatar" shape="square">-->
28-
<!-- <el-icon>-->
29-
<!-- <UserFilled v-if="!hideAvatar" />-->
30-
<!-- </el-icon>-->
31-
<!-- </el-avatar>-->
32-
<slot></slot>
33-
<!-- <ChatBlock v-if="!msg.first_chat" :msg="msg" :class="{ 'row-full': msg.role === 'assistant' }">-->
34-
<!-- <slot></slot>-->
35-
<!-- <template #footer>-->
36-
<!-- <slot name="footer"></slot>-->
37-
<!-- </template>-->
38-
<!-- </ChatBlock>-->
39-
<!-- <ChatRecordFirst v-else :current-chat="currentChat" :msg="msg">-->
40-
<!-- <template #footer>-->
41-
<!-- <slot name="footer"></slot>-->
42-
<!-- </template>-->
43-
<!-- </ChatRecordFirst>-->
27+
<div :class="{ 'row-full': msg.role === 'assistant' }">
28+
<slot></slot>
29+
</div>
4430
</div>
4531
</template>
4632

@@ -51,7 +37,9 @@ withDefaults(
5137
align-items: flex-start;
5238
gap: 8px;
5339
54-
padding: 20px 20px 0;
40+
padding: 20px 0 0;
41+
max-width: 800px;
42+
width: 100%;
5543
5644
&.right-to-left {
5745
flex-direction: row-reverse;
@@ -61,14 +49,11 @@ withDefaults(
6149
flex: 1;
6250
width: 0;
6351
}
64-
}
65-
66-
.ai-avatar {
67-
font-size: 28px;
68-
background: transparent;
69-
}
7052
71-
.user-avatar {
72-
font-size: 28px;
53+
.ai-avatar {
54+
font-size: 28px;
55+
background: transparent;
56+
width: 28px;
57+
}
7358
}
7459
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function clickPredict() {
3333
flex-direction: row;
3434
gap: 8px;
3535
border-radius: 16px;
36-
height: 48px;
36+
min-height: 48px;
3737
line-height: 24px;
3838
font-size: 16px;
3939
padding: 12px 16px;

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

Lines changed: 115 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -59,103 +59,112 @@
5959
class="chat-record-list"
6060
:class="{ 'hide-sidebar': !isAssistant && !chatListSideBarShow }"
6161
>
62-
<div v-if="computedMessages.length == 0" class="welcome-content-block">
62+
<div v-if="computedMessages.length == 0 && !loading" class="welcome-content-block">
6363
<div class="welcome-content">
64-
<div class="logo">SQLBot</div>
65-
<div>{{ t('qa.greeting') }}</div>
66-
<div class="sub">{{ t('qa.description') }}</div>
64+
<div class="greeting">
65+
<el-icon size="32">
66+
<logo_fold />
67+
</el-icon>
68+
{{ t('qa.greeting') }}
69+
</div>
70+
<div class="sub">{{ t('qa.hint_description') }}</div>
6771
<el-button
6872
v-if="currentChatId === undefined"
6973
size="large"
7074
type="primary"
7175
@click="createNewChat"
7276
>
7377
<el-icon>
74-
<Plus />
78+
<icon_new_chat_outlined />
7579
</el-icon>
76-
{{ t('qa.new_chat') }}
80+
{{ t('qa.start_sqlbot') }}
7781
</el-button>
7882
</div>
7983
</div>
84+
<div v-else-if="computedMessages.length == 0 && loading" class="welcome-content-block">
85+
<logo />
86+
</div>
8087
<el-scrollbar v-if="computedMessages.length > 0" ref="chatListRef">
81-
<template v-for="(message, _index) in computedMessages" :key="_index">
82-
<ChatRow :current-chat="currentChat" :msg="message" :hide-avatar="message.first_chat">
83-
<RecommendQuestion
84-
v-if="message.role === 'assistant' && message.first_chat"
85-
:questions="message.recommended_question"
86-
:first-chat="message.first_chat"
87-
@click-question="quickAsk"
88-
/>
89-
<UserChat v-if="message.role === 'user'" :message="message" />
90-
<template v-if="message.role === 'assistant' && !message.first_chat">
91-
<ChatAnswer
92-
v-if="
93-
message?.record?.analysis_record_id == undefined &&
94-
message?.record?.predict_record_id == undefined
95-
"
96-
:message="message"
97-
>
98-
<template v-if="message.record?.chart">
99-
<div style="padding: 0 22px; display: flex; justify-content: flex-end">
100-
<el-button
101-
text
102-
type="primary"
103-
:disabled="isTyping || isPredictTyping || isAnalysisTyping"
104-
@click="clickAnalysis(message.record?.id)"
105-
>
106-
{{ t('chat.data_analysis') }}
107-
</el-button>
108-
<el-button
109-
text
110-
type="primary"
111-
:disabled="isTyping || isPredictTyping || isAnalysisTyping"
112-
@click="clickPredict(message.record?.id)"
113-
>
114-
{{ t('chat.data_predict') }}
115-
</el-button>
116-
</div>
117-
</template>
118-
</ChatAnswer>
119-
120-
<div
121-
v-if="
122-
message?.record?.analysis_record_id != undefined ||
123-
message?.record?.predict_record_id != undefined
124-
"
125-
class="analysis-container"
126-
>
127-
<template v-if="message.record?.analysis || isAnalysisTyping">
128-
<MdComponent :message="message.record?.analysis_thinking" />
129-
<MdComponent :message="message.record?.analysis" />
130-
</template>
131-
132-
<el-divider
133-
v-if="
134-
(message.record?.analysis || isAnalysisTyping) &&
135-
(message.record?.predict || isPredictTyping)
136-
"
137-
/>
138-
<template v-if="message.record?.predict || isPredictTyping">
139-
<MdComponent :message="message.record?.predict" />
140-
<MdComponent :message="message.record?.predict_content" />
141-
<!-- <PredictChartBlock-->
142-
<!-- :id="message.record?.id + '-predict'"-->
143-
<!-- :data="message.record?.predict_data ?? '[]'"-->
144-
<!-- :message="message"-->
145-
<!-- :chart-type="data.chartType"-->
146-
<!-- />-->
147-
</template>
148-
</div>
149-
</template>
150-
<template v-if="message.role === 'assistant'" #footer>
88+
<div class="chat-scroll" :class="{ 'no-sidebar': !isAssistant && !chatListSideBarShow }">
89+
<template v-for="(message, _index) in computedMessages" :key="_index">
90+
<ChatRow :current-chat="currentChat" :msg="message" :hide-avatar="message.first_chat">
15191
<RecommendQuestion
92+
v-if="message.role === 'assistant' && message.first_chat"
15293
:questions="message.recommended_question"
15394
:first-chat="message.first_chat"
15495
@click-question="quickAsk"
15596
/>
156-
</template>
157-
</ChatRow>
158-
</template>
97+
<UserChat v-if="message.role === 'user'" :message="message" />
98+
<template v-if="message.role === 'assistant' && !message.first_chat">
99+
<ChatAnswer
100+
v-if="
101+
message?.record?.analysis_record_id == undefined &&
102+
message?.record?.predict_record_id == undefined
103+
"
104+
:message="message"
105+
>
106+
<template v-if="message.record?.chart">
107+
<div style="padding: 0 22px; display: flex; justify-content: flex-end">
108+
<el-button
109+
text
110+
type="primary"
111+
:disabled="isTyping || isPredictTyping || isAnalysisTyping"
112+
@click="clickAnalysis(message.record?.id)"
113+
>
114+
{{ t('chat.data_analysis') }}
115+
</el-button>
116+
<el-button
117+
text
118+
type="primary"
119+
:disabled="isTyping || isPredictTyping || isAnalysisTyping"
120+
@click="clickPredict(message.record?.id)"
121+
>
122+
{{ t('chat.data_predict') }}
123+
</el-button>
124+
</div>
125+
</template>
126+
</ChatAnswer>
127+
128+
<div
129+
v-if="
130+
message?.record?.analysis_record_id != undefined ||
131+
message?.record?.predict_record_id != undefined
132+
"
133+
class="analysis-container"
134+
>
135+
<template v-if="message.record?.analysis || isAnalysisTyping">
136+
<MdComponent :message="message.record?.analysis_thinking" />
137+
<MdComponent :message="message.record?.analysis" />
138+
</template>
139+
140+
<el-divider
141+
v-if="
142+
(message.record?.analysis || isAnalysisTyping) &&
143+
(message.record?.predict || isPredictTyping)
144+
"
145+
/>
146+
<template v-if="message.record?.predict || isPredictTyping">
147+
<MdComponent :message="message.record?.predict" />
148+
<MdComponent :message="message.record?.predict_content" />
149+
<!-- <PredictChartBlock-->
150+
<!-- :id="message.record?.id + '-predict'"-->
151+
<!-- :data="message.record?.predict_data ?? '[]'"-->
152+
<!-- :message="message"-->
153+
<!-- :chart-type="data.chartType"-->
154+
<!-- />-->
155+
</template>
156+
</div>
157+
</template>
158+
<template v-if="message.role === 'assistant'" #footer>
159+
<RecommendQuestion
160+
:questions="message.recommended_question"
161+
:first-chat="message.first_chat"
162+
@click-question="quickAsk"
163+
/>
164+
</template>
165+
</ChatRow>
166+
</template>
167+
</div>
159168
</el-scrollbar>
160169
</el-main>
161170
<el-footer
@@ -200,7 +209,7 @@
200209

201210
<script setup lang="ts">
202211
import { computed, nextTick, onMounted, ref } from 'vue'
203-
import { Plus, Position } from '@element-plus/icons-vue'
212+
import { Position } from '@element-plus/icons-vue'
204213
import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord, questionApi } from '@/api/chat'
205214
import ChatRow from './ChatRow.vue'
206215
import ChatAnswer from './ChatAnswer.vue'
@@ -213,6 +222,8 @@ import { useI18n } from 'vue-i18n'
213222
import { endsWith, find, startsWith } from 'lodash-es'
214223
import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
215224
import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
225+
import logo_fold from '@/assets/LOGO-fold.svg'
226+
import logo from '@/assets/LOGO.svg'
216227
217228
import { useAssistantStore } from '@/stores/assistant'
218229
const assistantStore = useAssistantStore()
@@ -876,6 +887,19 @@ defineExpose({
876887
}
877888
}
878889
890+
.chat-scroll {
891+
width: 100%;
892+
display: flex;
893+
flex-direction: column;
894+
align-items: center;
895+
padding-left: 56px;
896+
padding-right: 56px;
897+
898+
&.no-sidebar {
899+
padding-left: 96px;
900+
}
901+
}
902+
879903
.chat-footer {
880904
--ed-footer-height: 120px;
881905
@@ -929,22 +953,26 @@ defineExpose({
929953
padding: 12px;
930954
931955
width: fit-content;
956+
max-width: 800px;
932957
display: flex;
933958
gap: 16px;
934959
align-items: center;
935960
flex-direction: column;
936961
937-
.logo {
938-
line-height: 60px;
939-
font-size: 3em;
940-
font-weight: bold;
941-
color: var(--el-color-primary);
942-
text-align: left;
962+
.greeting {
963+
display: flex;
964+
align-items: center;
965+
gap: 16px;
966+
line-height: 32px;
967+
font-size: 24px;
968+
font-weight: 600;
969+
color: rgba(31, 35, 41, 1);
943970
}
944971
945972
.sub {
946973
color: grey;
947-
font-size: 0.8em;
974+
font-size: 16px;
975+
line-height: 24px;
948976
}
949977
}
950978
}

0 commit comments

Comments
 (0)