Skip to content

Commit ec2ad68

Browse files
dataeaseShudataeaseShu
committed
fix: bug fix
1 parent 7378438 commit ec2ad68

File tree

3 files changed

+425
-83
lines changed

3 files changed

+425
-83
lines changed

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

Lines changed: 86 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<script setup lang="ts">
1+
<script lang="ts" setup>
2+
import { onMounted, ref, computed, shallowRef } from 'vue'
3+
import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
4+
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
25
import { chatApi, ChatInfo } from '@/api/chat.ts'
3-
import { onMounted, ref } from 'vue'
46
import { datasourceApi } from '@/api/datasource.ts'
5-
import DatasourceItemCard from '../ds/DatasourceItemCard.vue'
7+
import Card from '@/views/ds/ChatCard.vue'
68
79
const props = withDefaults(
810
defineProps<{
@@ -13,32 +15,40 @@ const props = withDefaults(
1315
}
1416
)
1517
16-
const dsList = ref<Array<any>>([])
18+
const datasourceConfigvVisible = ref(false)
19+
const keywords = ref('')
20+
const datasourceList = shallowRef([] as any[])
21+
const datasourceListWithSearch = computed(() => {
22+
if (!keywords.value) return datasourceList.value
23+
return datasourceList.value.filter((ele) =>
24+
ele.name.toLowerCase().includes(keywords.value.toLowerCase())
25+
)
26+
})
27+
const beforeClose = () => {
28+
datasourceConfigvVisible.value = false
29+
keywords.value = ''
30+
}
1731
1832
const emits = defineEmits(['onChatCreated'])
1933
2034
function listDs() {
2135
datasourceApi.list().then((res) => {
22-
dsList.value = res
36+
datasourceList.value = res
2337
})
2438
}
2539
26-
const dialogVisible = ref(false)
27-
28-
const DatasourceListRef = ref()
29-
3040
const innerDs = ref()
3141
3242
const loading = ref(false)
3343
3444
function showDs() {
3545
listDs()
36-
dialogVisible.value = true
46+
datasourceConfigvVisible.value = true
3747
}
3848
3949
function hideDs() {
4050
innerDs.value = undefined
41-
dialogVisible.value = false
51+
datasourceConfigvVisible.value = false
4252
}
4353
4454
function selectDsInDialog(ds: any) {
@@ -77,7 +87,6 @@ onMounted(() => {
7787
if (props.hidden) {
7888
return
7989
}
80-
listDs()
8190
})
8291
8392
defineExpose({
@@ -88,79 +97,73 @@ defineExpose({
8897
</script>
8998

9099
<template>
91-
<div v-if="!hidden">
92-
<el-drawer
93-
ref="DatasourceListRef"
94-
v-model="dialogVisible"
95-
direction="btt"
96-
:close-on-press-escape="false"
97-
:close-on-click-modal="false"
98-
destroy-on-close
99-
:show-close="false"
100-
size="100%"
101-
>
102-
<template #header>
103-
<div>
104-
<div>Choose Datasource</div>
105-
</div>
106-
</template>
107-
<el-scrollbar v-loading="loading">
108-
<div class="ds-row-container">
109-
<template v-for="(item, _index) in dsList" :key="_index">
110-
<DatasourceItemCard
111-
:ds="item"
112-
class="ds-card"
113-
:class="[item?.id === innerDs ? 'ds-card-selected' : '']"
114-
@click="selectDsInDialog(item)"
115-
/>
100+
<el-drawer
101+
v-model="datasourceConfigvVisible"
102+
:close-on-click-modal="false"
103+
size="calc(100% - 100px)"
104+
modal-class="datasource-drawer-chat"
105+
direction="btt"
106+
:before-close="beforeClose"
107+
:show-close="false"
108+
>
109+
<template #header="{ close }">
110+
<span style="white-space: nowrap">{{ $t('qa.select_datasource') }}</span>
111+
<div class="flex-center" style="width: 100%">
112+
<el-input
113+
v-model="keywords"
114+
clearable
115+
style="width: 320px"
116+
:placeholder="$t('datasource.search')"
117+
>
118+
<template #prefix>
119+
<el-icon>
120+
<icon_searchOutline_outlined />
121+
</el-icon>
116122
</template>
117-
</div>
118-
</el-scrollbar>
119-
<template #footer>
120-
<div class="dialog-footer">
121-
<el-button :disabled="loading" @click="hideDs">Cancel</el-button>
122-
<el-button
123-
type="primary"
124-
:disabled="loading || innerDs === undefined"
125-
@click="confirmSelectDs"
126-
>
127-
Confirm
128-
</el-button>
129-
</div>
130-
</template>
131-
</el-drawer>
132-
</div>
123+
</el-input>
124+
</div>
125+
<el-icon style="cursor: pointer" @click="close">
126+
<icon_close_outlined></icon_close_outlined>
127+
</el-icon>
128+
</template>
129+
<div class="card-content">
130+
<Card
131+
v-for="ele in datasourceListWithSearch"
132+
:id="ele.id"
133+
:key="ele.id"
134+
:name="ele.name"
135+
:type="ele.type"
136+
:type-name="ele.type_name"
137+
:num="ele.num"
138+
:is-selected="ele.id === innerDs"
139+
:description="ele.description"
140+
@select-ds="selectDsInDialog(ele)"
141+
></Card>
142+
</div>
143+
<template #footer>
144+
<div class="dialog-footer">
145+
<el-button secondary :disabled="loading" @click="hideDs">{{
146+
$t('common.cancel')
147+
}}</el-button>
148+
<el-button
149+
:type="loading || innerDs === undefined ? 'info' : 'primary'"
150+
:disabled="loading || innerDs === undefined"
151+
@click="confirmSelectDs"
152+
>
153+
{{ $t('datasource.confirm') }}
154+
</el-button>
155+
</div>
156+
</template>
157+
</el-drawer>
133158
</template>
134159

135-
<style scoped lang="less">
136-
.welcome-content {
137-
padding: 12px;
138-
}
139-
140-
.sub {
141-
color: grey;
142-
font-size: 0.8em;
143-
}
144-
145-
.ds-select-row {
146-
display: flex;
147-
align-items: center;
148-
flex-direction: row;
149-
justify-content: space-between;
150-
}
151-
152-
.ds-row-container {
153-
display: grid;
154-
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
155-
gap: 24px;
156-
}
157-
158-
.ds-card {
159-
cursor: pointer;
160-
}
161-
162-
.ds-card-selected {
163-
box-shadow: 0 1px 3px var(--ed-color-primary-light-5);
164-
border: 1px solid var(--ed-color-primary-light-5);
160+
<style lang="less">
161+
.datasource-drawer-chat {
162+
.card-content {
163+
display: flex;
164+
flex-wrap: wrap;
165+
max-height: 100%;
166+
overflow-y: auto;
167+
}
165168
}
166169
</style>

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

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<script lang="ts" setup>
2+
import { onMounted, ref, computed, shallowRef } from 'vue'
3+
import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
4+
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
5+
import { chatApi, ChatInfo } from '@/api/chat.ts'
6+
import { datasourceApi } from '@/api/datasource.ts'
7+
import Card from '@/views/ds/ChatCard.vue'
8+
9+
const props = withDefaults(
10+
defineProps<{
11+
hidden?: boolean
12+
}>(),
13+
{
14+
hidden: false,
15+
}
16+
)
17+
18+
const datasourceConfigvVisible = ref(false)
19+
const keywords = ref('')
20+
const datasourceList = shallowRef([] as any[])
21+
const datasourceListWithSearch = computed(() => {
22+
if (!keywords.value) return datasourceList.value
23+
return datasourceList.value.filter((ele) =>
24+
ele.name.toLowerCase().includes(keywords.value.toLowerCase())
25+
)
26+
})
27+
const beforeClose = () => {
28+
datasourceConfigvVisible.value = false
29+
keywords.value = ''
30+
}
31+
32+
const emits = defineEmits(['onChatCreated'])
33+
34+
function listDs() {
35+
datasourceApi.list().then((res) => {
36+
datasourceList.value = res
37+
})
38+
}
39+
40+
const dialogVisible = ref(false)
41+
42+
const innerDs = ref()
43+
44+
const loading = ref(false)
45+
46+
function showDs() {
47+
listDs()
48+
dialogVisible.value = true
49+
}
50+
51+
function hideDs() {
52+
innerDs.value = undefined
53+
dialogVisible.value = false
54+
}
55+
56+
function selectDsInDialog(ds: any) {
57+
innerDs.value = ds.id
58+
}
59+
60+
function confirmSelectDs() {
61+
if (innerDs.value) {
62+
createChat(innerDs.value)
63+
}
64+
}
65+
66+
function createChat(datasource: number) {
67+
loading.value = true
68+
chatApi
69+
.startChat({
70+
datasource: datasource,
71+
})
72+
.then((res) => {
73+
const chat: ChatInfo | undefined = chatApi.toChatInfo(res)
74+
if (chat == undefined) {
75+
throw Error('chat is undefined')
76+
}
77+
emits('onChatCreated', chat)
78+
hideDs()
79+
})
80+
.catch((e) => {
81+
console.error(e)
82+
})
83+
.finally(() => {
84+
loading.value = false
85+
})
86+
}
87+
88+
onMounted(() => {
89+
if (props.hidden) {
90+
return
91+
}
92+
})
93+
94+
defineExpose({
95+
showDs,
96+
hideDs,
97+
createChat,
98+
})
99+
</script>
100+
101+
<template>
102+
<el-drawer
103+
v-model="datasourceConfigvVisible"
104+
:close-on-click-modal="false"
105+
size="calc(100% - 100px)"
106+
modal-class="datasource-drawer-chat"
107+
direction="btt"
108+
:before-close="beforeClose"
109+
:show-close="false"
110+
>
111+
<template #header="{ close }">
112+
<span style="white-space: nowrap">{{ $t('qa.select_datasource') }}</span>
113+
<div class="flex-center" style="width: 100%">
114+
<el-input
115+
v-model="keywords"
116+
clearable
117+
style="width: 320px"
118+
:placeholder="$t('datasource.search')"
119+
>
120+
<template #prefix>
121+
<el-icon>
122+
<icon_searchOutline_outlined />
123+
</el-icon>
124+
</template>
125+
</el-input>
126+
</div>
127+
<el-icon style="cursor: pointer" @click="close">
128+
<icon_close_outlined></icon_close_outlined>
129+
</el-icon>
130+
</template>
131+
<div class="card-content">
132+
<Card
133+
v-for="ele in datasourceListWithSearch"
134+
:id="ele.id"
135+
:key="ele.id"
136+
:name="ele.name"
137+
:type="ele.type"
138+
:type-name="ele.type_name"
139+
:num="ele.num"
140+
:description="ele.description"
141+
@select-ds="selectDsInDialog(ele)"
142+
></Card>
143+
</div>
144+
<template #footer>
145+
<div class="dialog-footer">
146+
<el-button secondary :disabled="loading" @click="hideDs">{{
147+
$t('common.cancel')
148+
}}</el-button>
149+
<el-button
150+
type="primary"
151+
:disabled="loading || innerDs === undefined"
152+
@click="confirmSelectDs"
153+
>
154+
{{ $t('datasource.confirm') }}
155+
</el-button>
156+
</div>
157+
</template>
158+
</el-drawer>
159+
</template>
160+
161+
<style lang="less">
162+
.datasource-drawer-chat {
163+
.card-content {
164+
display: flex;
165+
flex-wrap: wrap;
166+
max-height: calc(100% - 40px);
167+
overflow-y: auto;
168+
}
169+
}
170+
</style>

0 commit comments

Comments
 (0)