Add File
This commit is contained in:
255
frontend/src/views/chat/ChatCreator.vue
Normal file
255
frontend/src/views/chat/ChatCreator.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, computed, shallowRef } from 'vue'
|
||||
import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
|
||||
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||
import { chatApi, ChatInfo } from '@/api/chat.ts'
|
||||
import { datasourceApi } from '@/api/datasource.ts'
|
||||
import Card from '@/views/ds/ChatCard.vue'
|
||||
import AddDrawer from '@/views/ds/AddDrawer.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
hidden?: boolean
|
||||
}>(),
|
||||
{
|
||||
hidden: false,
|
||||
}
|
||||
)
|
||||
|
||||
const addDrawerRef = ref()
|
||||
const searchLoading = ref(false)
|
||||
const datasourceConfigVisible = ref(false)
|
||||
const keywords = ref('')
|
||||
const datasourceList = shallowRef([] as any[])
|
||||
const datasourceListWithSearch = computed(() => {
|
||||
if (!keywords.value) return datasourceList.value
|
||||
return datasourceList.value.filter((ele) =>
|
||||
ele.name.toLowerCase().includes(keywords.value.toLowerCase())
|
||||
)
|
||||
})
|
||||
const beforeClose = () => {
|
||||
datasourceConfigVisible.value = false
|
||||
keywords.value = ''
|
||||
}
|
||||
|
||||
const emits = defineEmits(['onChatCreated'])
|
||||
|
||||
function listDs() {
|
||||
searchLoading.value = true
|
||||
datasourceApi
|
||||
.list()
|
||||
.then((res) => {
|
||||
datasourceList.value = res
|
||||
})
|
||||
.finally(() => {
|
||||
searchLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const innerDs = ref()
|
||||
|
||||
const loading = ref(false)
|
||||
const statusLoading = ref(false)
|
||||
|
||||
function showDs() {
|
||||
listDs()
|
||||
datasourceConfigVisible.value = true
|
||||
}
|
||||
|
||||
function hideDs() {
|
||||
innerDs.value = undefined
|
||||
datasourceConfigVisible.value = false
|
||||
}
|
||||
|
||||
function selectDsInDialog(ds: any) {
|
||||
innerDs.value = ds.id
|
||||
}
|
||||
|
||||
function confirmSelectDs() {
|
||||
if (innerDs.value) {
|
||||
statusLoading.value = true
|
||||
//check first
|
||||
datasourceApi
|
||||
.check_by_id(innerDs.value)
|
||||
.then((res: any) => {
|
||||
if (res) {
|
||||
createChat(innerDs.value)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
statusLoading.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function createChat(datasource: number) {
|
||||
loading.value = true
|
||||
chatApi
|
||||
.startChat({
|
||||
datasource: datasource,
|
||||
})
|
||||
.then((res) => {
|
||||
const chat: ChatInfo | undefined = chatApi.toChatInfo(res)
|
||||
if (chat == undefined) {
|
||||
throw Error('chat is undefined')
|
||||
}
|
||||
emits('onChatCreated', chat)
|
||||
hideDs()
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.hidden) {
|
||||
return
|
||||
}
|
||||
})
|
||||
|
||||
const handleAddDatasource = () => {
|
||||
addDrawerRef.value.handleAddDatasource()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showDs,
|
||||
hideDs,
|
||||
createChat,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading.body.fullscreen.lock="loading || statusLoading">
|
||||
<el-drawer
|
||||
v-model="datasourceConfigVisible"
|
||||
:close-on-click-modal="false"
|
||||
size="calc(100% - 100px)"
|
||||
modal-class="datasource-drawer-chat"
|
||||
direction="btt"
|
||||
:before-close="beforeClose"
|
||||
:show-close="false"
|
||||
>
|
||||
<template #header="{ close }">
|
||||
<span style="white-space: nowrap">{{ $t('qa.select_datasource') }}</span>
|
||||
<div class="flex-center" style="width: 100%">
|
||||
<el-input
|
||||
v-model="keywords"
|
||||
clearable
|
||||
style="width: 320px"
|
||||
:placeholder="$t('datasource.search')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<icon_searchOutline_outlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-icon style="cursor: pointer" @click="close">
|
||||
<icon_close_outlined></icon_close_outlined>
|
||||
</el-icon>
|
||||
</template>
|
||||
<div v-if="datasourceListWithSearch.length" class="card-content">
|
||||
<el-row :gutter="16" class="w-full">
|
||||
<el-col
|
||||
v-for="ele in datasourceListWithSearch"
|
||||
:key="ele.id"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="6"
|
||||
class="mb-16"
|
||||
>
|
||||
<Card
|
||||
:id="ele.id"
|
||||
:key="ele.id"
|
||||
:name="ele.name"
|
||||
:type="ele.type"
|
||||
:type-name="ele.type_name"
|
||||
:num="ele.num"
|
||||
:is-selected="ele.id === innerDs"
|
||||
:description="ele.description"
|
||||
@select-ds="selectDsInDialog(ele)"
|
||||
></Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<template v-if="!keywords && !datasourceListWithSearch.length && !searchLoading">
|
||||
<EmptyBackground
|
||||
class="datasource-yet_btn"
|
||||
:description="$t('datasource.data_source_yet')"
|
||||
img-type="noneWhite"
|
||||
/>
|
||||
|
||||
<div style="text-align: center; margin-top: -10px">
|
||||
<el-button type="primary" @click="handleAddDatasource">
|
||||
<template #icon>
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</template>
|
||||
{{ $t('datasource.new_data_source') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<EmptyBackground
|
||||
v-if="!!keywords && !datasourceListWithSearch.length"
|
||||
:description="$t('datasource.relevant_content_found')"
|
||||
class="datasource-yet"
|
||||
img-type="tree"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button secondary :disabled="loading" @click="hideDs">{{
|
||||
$t('common.cancel')
|
||||
}}</el-button>
|
||||
<el-button
|
||||
:type="loading || statusLoading || innerDs === undefined ? 'info' : 'primary'"
|
||||
:disabled="loading || statusLoading || innerDs === undefined"
|
||||
@click="confirmSelectDs"
|
||||
>
|
||||
{{ $t('datasource.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
<AddDrawer ref="addDrawerRef" @search="listDs"></AddDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.datasource-drawer-chat {
|
||||
.ed-drawer__body {
|
||||
padding: 16px 0 16px 0;
|
||||
}
|
||||
.card-content {
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
padding: 0 8px 0 24px;
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mb-16 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.datasource-yet {
|
||||
padding-bottom: 0;
|
||||
height: auto;
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
.datasource-yet_btn {
|
||||
height: auto !important;
|
||||
padding-top: 200px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user