klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: chat css

Browse Source
This commit is contained in:
ulleo
2025-07-18 18:43:45 +08:00
parent 9a0d7b0dfe
commit 8b34dccae0
3 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/svg/icon_send_filled.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.37253 7.37638C8.49177 8.29461 8 9.51773 8 10.7901C8 12.1866 8.59209 13.5176 9.62929 14.4527L10.293 15.0511C10.3773 15.1354 10.4824 15.196 10.5976 15.2268C10.7128 15.2576 10.834 15.2575 10.9492 15.2265C11.0643 15.1955 11.1692 15.1347 11.2534 15.0503C11.3376 14.9658 11.398 14.8607 11.4287 14.7455L14.8723 2.54916C14.9666 2.21511 14.5512 1.97734 14.3109 2.22784L9.37253 7.37638Z" fill="white"/>
<path d="M13.7768 1.68461C14.0305 1.44129 13.7835 1.02182 13.4477 1.12556L1.28049 4.8839C1.165 4.9142 1.05956 4.97442 0.974792 5.0585C0.890025 5.14258 0.828938 5.24753 0.797696 5.36276C0.766454 5.47799 0.766163 5.59942 0.796852 5.7148C0.827541 5.83018 0.888124 5.93542 0.972486 6.0199L1.7232 6.84202C2.5779 7.778 3.78692 8.31123 5.05442 8.31123C6.21832 8.31123 7.33717 7.86138 8.17714 7.0557L13.7768 1.68461Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 933 B

frontend/src/views/chat/chat-block/ChartBlock.vue
+6 -4
View File
@@ -236,16 +236,17 @@ function addToDashboard() {
</el-tooltip>
</div>
<div>
<div v-if="message?.record?.sql">
<el-tooltip effect="dark" :content="t('chat.show_sql')" placement="top">
<el-button v-if="message?.record?.sql" class="tool-btn" text @click="showSql">
<el-button class="tool-btn" text @click="showSql">
<el-icon size="16">
<icon_sql_outlined />
</el-icon>
</el-button>
</el-tooltip>
</div>
<div>
<div v-if="false">
<!-- todo -->
<el-tooltip effect="dark" :content="t('chat.export_to')" placement="top">
<el-button class="tool-btn" text>
<el-icon size="16">
@@ -254,7 +255,8 @@ function addToDashboard() {
</el-button>
</el-tooltip>
</div>
<div>
<div v-if="false">
<!-- todo -->
<el-tooltip effect="dark" :content="t('chat.add_to_dashboard')" placement="top">
<el-button class="tool-btn" text @click="addToDashboard">
<el-icon size="16">
frontend/src/views/chat/index.vue
+92 -35
View File
@@ -246,32 +246,38 @@
v-if="computedMessages.length > 0 || (isAssistant && currentChatId)"
class="chat-footer"
>
<div style="height: 24px">
<template v-if="currentChat.datasource && currentChat.datasource_name">
{{ t('ds.title') }}：{{ currentChat.datasource_name }}
</template>
</div>
<div class="input-wrapper">
<el-input
v-model="inputMessage"
:disabled="isTyping"
class="input-area"
type="textarea"
:rows="1"
:autosize="{ minRows: 1, maxRows: 8 }"
:placeholder="t('qa.question_placeholder')"
@keydown.enter.exact.prevent="sendMessage"
@keydown.ctrl.enter.exact.prevent="handleCtrlEnter"
/>
<div class="input-container" @click="clickInput">
<div class="datasource">
<template v-if="currentChat.datasource && currentChat.datasource_name">
{{ t('qa.selected_datasource') }}：
<span class="name">
{{ currentChat.datasource_name }}
</span>
</template>
</div>
<div class="input-wrapper">
<el-input
ref="inputRef"
v-model="inputMessage"
:disabled="isTyping"
class="input-area"
type="textarea"
:rows="1"
:autosize="{ minRows: 1, maxRows: 8 }"
:placeholder="t('qa.question_placeholder')"
@keydown.enter.exact.prevent="sendMessage"
@keydown.ctrl.enter.exact.prevent="handleCtrlEnter"
/>
</div>
<el-button
link
circle
type="primary"
class="input-icon"
:disabled="isTyping"
@click="sendMessage"
@click.stop="sendMessage"
>
<el-icon size="20">
<Position />
<el-icon size="16">
<icon_send_filled />
</el-icon>
</el-button>
</div>
@@ -284,7 +290,6 @@
<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue'
import { Position } from '@element-plus/icons-vue'
import { Chat, chatApi, ChatInfo, type ChatMessage, ChatRecord } from '@/api/chat'
import ChatRow from './ChatRow.vue'
import ChartAnswer from './answer/ChartAnswer.vue'
@@ -305,6 +310,7 @@ import icon_screen_outlined from '@/assets/svg/icon_screen_outlined.svg'
import icon_start_outlined from '@/assets/svg/icon_start_outlined.svg'
import logo_fold from '@/assets/LOGO-fold.svg'
import logo from '@/assets/LOGO.svg'
import icon_send_filled from '@/assets/svg/icon_send_filled.svg'
import { useAssistantStore } from '@/stores/assistant'
const assistantStore = useAssistantStore()
@@ -726,6 +732,13 @@ const getHistoryList = () => {
const getCurrentChatId = () => {
return currentChatId.value
}
const inputRef = ref()
function clickInput() {
inputRef.value?.focus()
}
defineExpose({
getHistoryList,
toAssistantHistory,
@@ -794,30 +807,74 @@ defineExpose({
}
.chat-footer {
--ed-footer-height: 120px;
--ed-footer-height: calc(142px + 16px);
padding-bottom: 16px;
display: flex;
flex-direction: column;
align-items: center;
.input-wrapper {
.input-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 800px;
border-radius: 16px;
border: 1px solid rgba(217, 220, 223, 1);
background: rgba(248, 249, 250, 1);
padding: 12px;
gap: 8px;
position: relative;
.input-area {
height: 100%;
padding-bottom: 8px;
:deep(.ed-textarea__inner) {
height: 100% !important;
}
}
.input-icon {
min-width: unset;
position: absolute;
bottom: 14px;
right: 8px;
bottom: 12px;
right: 12px;
border-color: unset;
&.is-disabled {
background: rgba(187, 191, 196, 1);
border-color: unset;
}
}
&:hover {
border-color: rgba(28, 186, 144, 1);
}
}
.datasource {
width: 100%;
line-height: 22px;
font-size: 14px;
font-weight: 400;
color: rgba(100, 106, 115, 1);
.name {
color: rgba(31, 35, 41, 1);
}
}
.input-wrapper {
width: 100%;
flex: 1;
.input-area {
height: 100%;
:deep(.ed-textarea__inner) {
height: 100% !important;
background: transparent;
box-shadow: unset;
padding: unset;
}
}
}
}