435 lines
13 KiB
Vue
435 lines
13 KiB
Vue
<template>
|
||
<div class="hit-test p-16-24">
|
||
<h4>
|
||
{{ $t('views.application.hitTest.title') }}
|
||
<el-text type="info" class="ml-4"> {{ $t('views.application.hitTest.text') }}</el-text>
|
||
</h4>
|
||
<el-card style="--el-card-padding: 0" class="hit-test__main p-16 mt-16 mb-16" v-loading="loading">
|
||
<div class="question-title" :style="{ visibility: questionTitle ? 'visible' : 'hidden' }">
|
||
<div class="avatar">
|
||
<el-avatar>
|
||
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
||
</el-avatar>
|
||
</div>
|
||
<div class="content">
|
||
<h4 class="text break-all">{{ questionTitle }}</h4>
|
||
</div>
|
||
</div>
|
||
<el-scrollbar>
|
||
<div class="hit-test-height">
|
||
<el-empty
|
||
v-if="first"
|
||
:image="emptyImg"
|
||
:description="$t('views.application.hitTest.emptyMessage1')"
|
||
style="padding-top: 160px"
|
||
:image-size="125"
|
||
/>
|
||
<el-empty
|
||
v-else-if="paragraphDetail.length == 0"
|
||
:description="$t('views.application.hitTest.emptyMessage2')"
|
||
style="padding-top: 160px"
|
||
:image-size="125"
|
||
/>
|
||
<el-row v-else>
|
||
<el-col
|
||
:xs="24"
|
||
:sm="12"
|
||
:md="12"
|
||
:lg="8"
|
||
:xl="6"
|
||
v-for="(item, index) in paragraphDetail"
|
||
:key="index"
|
||
class="p-8"
|
||
>
|
||
<CardBox
|
||
shadow="hover"
|
||
:title="item.title || '-'"
|
||
:description="item.content"
|
||
class="document-card layout-bg layout-bg cursor"
|
||
:class="item.is_active ? '' : 'disabled'"
|
||
:showIcon="false"
|
||
@click="editParagraph(item)"
|
||
>
|
||
<template #icon>
|
||
<el-avatar class="mr-12 avatar-light" :size="22"> {{ index + 1 + '' }}</el-avatar>
|
||
</template>
|
||
<div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
|
||
<template #footer>
|
||
<div class="footer-content flex-between">
|
||
<el-text>
|
||
<el-icon>
|
||
<Document />
|
||
</el-icon>
|
||
{{ item?.document_name }}
|
||
</el-text>
|
||
<div v-if="item.trample_num || item.star_num">
|
||
<span v-if="item.star_num">
|
||
<AppIcon iconName="app-like-color"></AppIcon>
|
||
{{ item.star_num }}
|
||
</span>
|
||
<span v-if="item.trample_num" class="ml-4">
|
||
<AppIcon iconName="app-oppose-color"></AppIcon>
|
||
{{ item.trample_num }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</CardBox>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-card>
|
||
<ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
|
||
|
||
<div class="hit-test__operate">
|
||
<el-popover :visible="popoverVisible" placement="right-end" :width="500" trigger="click">
|
||
<template #reference>
|
||
<el-button icon="Setting" class="mb-8" @click="settingChange('open')">{{
|
||
$t('common.paramSetting')
|
||
}}</el-button>
|
||
</template>
|
||
<div class="mb-16">
|
||
<div class="title mb-8">
|
||
{{ $t('views.application.dialog.selectSearchMode') }}
|
||
</div>
|
||
<el-radio-group
|
||
v-model="cloneForm.search_mode"
|
||
class="card__radio"
|
||
@change="changeHandle"
|
||
>
|
||
<el-card
|
||
shadow="never"
|
||
class="mb-16"
|
||
:class="cloneForm.search_mode === 'embedding' ? 'active' : ''"
|
||
>
|
||
<el-radio value="embedding" size="large">
|
||
<p class="mb-4">
|
||
{{ $t('views.application.dialog.vectorSearch') }}
|
||
</p>
|
||
<el-text type="info">{{
|
||
$t('views.application.dialog.vectorSearchTooltip')
|
||
}}</el-text>
|
||
</el-radio>
|
||
</el-card>
|
||
<el-card
|
||
shadow="never"
|
||
class="mb-16"
|
||
:class="cloneForm.search_mode === 'keywords' ? 'active' : ''"
|
||
>
|
||
<el-radio value="keywords" size="large">
|
||
<p class="mb-4">
|
||
{{ $t('views.application.dialog.fullTextSearch') }}
|
||
</p>
|
||
<el-text type="info">{{
|
||
$t('views.application.dialog.fullTextSearchTooltip')
|
||
}}</el-text>
|
||
</el-radio>
|
||
</el-card>
|
||
<el-card
|
||
shadow="never"
|
||
class="mb-16"
|
||
:class="cloneForm.search_mode === 'blend' ? 'active' : ''"
|
||
>
|
||
<el-radio value="blend" size="large">
|
||
<p class="mb-4">
|
||
{{ $t('views.application.dialog.hybridSearch') }}
|
||
</p>
|
||
<el-text type="info">{{
|
||
$t('views.application.dialog.hybridSearchTooltip')
|
||
}}</el-text>
|
||
</el-radio>
|
||
</el-card>
|
||
</el-radio-group>
|
||
</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="mb-16">
|
||
<div class="title mb-8">
|
||
{{ $t('views.application.dialog.similarityThreshold') }}
|
||
</div>
|
||
<el-input-number
|
||
v-model="cloneForm.similarity"
|
||
:min="0"
|
||
:max="cloneForm.search_mode === 'blend' ? 2 : 1"
|
||
:precision="3"
|
||
:step="0.1"
|
||
:value-on-clear="0"
|
||
controls-position="right"
|
||
class="w-full"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="mb-16">
|
||
<div class="title mb-8">
|
||
{{ $t('views.application.dialog.topReferences') }}
|
||
</div>
|
||
<el-input-number
|
||
v-model="cloneForm.top_number"
|
||
:min="1"
|
||
:max="10000"
|
||
controls-position="right"
|
||
class="w-full"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="text-right">
|
||
<el-button @click="popoverVisible = false">{{ $t('common.cancel') }}</el-button>
|
||
<el-button type="primary" @click="settingChange('close')">{{
|
||
$t('common.confirm')
|
||
}}</el-button>
|
||
</div>
|
||
</el-popover>
|
||
<div class="operate-textarea flex">
|
||
<el-input
|
||
ref="quickInputRef"
|
||
v-model="inputValue"
|
||
type="textarea"
|
||
:placeholder="$t('common.inputPlaceholder')"
|
||
:autosize="{ minRows: 1, maxRows: 8 }"
|
||
@keydown.enter="sendChatHandle($event)"
|
||
/>
|
||
<div class="operate">
|
||
<el-button
|
||
text
|
||
class="sent-button"
|
||
:disabled="isDisabledChart || loading"
|
||
@click="sendChatHandle"
|
||
>
|
||
<img v-show="isDisabledChart || loading" src="@/assets/icon_send.svg" alt="" />
|
||
<img
|
||
v-show="!isDisabledChart && !loading"
|
||
src="@/assets/icon_send_colorful.svg"
|
||
alt=""
|
||
/>
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { nextTick, ref, onMounted, computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { cloneDeep } from 'lodash'
|
||
import KnowledgeApi from '@/api/shared/knowledge'
|
||
// import applicationApi from '@/api/application/application'
|
||
import ParagraphDialog from '@/views/paragraph/component/ParagraphDialog.vue'
|
||
import { arraySort } from '@/utils/common'
|
||
import emptyImg from '@/assets/hit-test-empty.png'
|
||
import { t } from '@/locales'
|
||
const route = useRoute()
|
||
const {
|
||
meta: { activeMenu },
|
||
params: { id },
|
||
} = route as any
|
||
|
||
const quickInputRef = ref()
|
||
const ParagraphDialogRef = ref()
|
||
const loading = ref(false)
|
||
const paragraphDetail = ref<any[]>([])
|
||
const title = ref('')
|
||
const inputValue = ref('')
|
||
const formInline = ref({
|
||
similarity: 0.6,
|
||
top_number: 5,
|
||
search_mode: 'embedding',
|
||
})
|
||
|
||
// 第一次加载
|
||
const first = ref(true)
|
||
|
||
const cloneForm = ref<any>({})
|
||
|
||
const popoverVisible = ref(false)
|
||
const questionTitle = ref('')
|
||
|
||
const isDisabledChart = computed(() => !inputValue.value)
|
||
|
||
const isApplication = computed(() => {
|
||
return activeMenu.includes('application')
|
||
})
|
||
const isDataset = computed(() => {
|
||
return activeMenu.includes('knowledge')
|
||
})
|
||
|
||
function changeHandle(val: string) {
|
||
if (val === 'keywords') {
|
||
cloneForm.value.similarity = 0
|
||
} else {
|
||
cloneForm.value.similarity = 0.6
|
||
}
|
||
}
|
||
|
||
function settingChange(val: string) {
|
||
if (val === 'open') {
|
||
popoverVisible.value = true
|
||
cloneForm.value = cloneDeep(formInline.value)
|
||
} else if (val === 'close') {
|
||
popoverVisible.value = false
|
||
formInline.value = cloneDeep(cloneForm.value)
|
||
}
|
||
}
|
||
|
||
function editParagraph(row: any) {
|
||
title.value = t('views.paragraph.paragraphDetail')
|
||
ParagraphDialogRef.value.open(row)
|
||
}
|
||
|
||
function sendChatHandle(event: any) {
|
||
if (!event?.ctrlKey && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
|
||
// 如果没有按下组合键，则会阻止默认事件
|
||
event.preventDefault()
|
||
if (!isDisabledChart.value && !loading.value) {
|
||
getHitTestList()
|
||
}
|
||
} else {
|
||
// 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
|
||
insertNewlineAtCursor(event)
|
||
}
|
||
}
|
||
const insertNewlineAtCursor = (event?: any) => {
|
||
const textarea = quickInputRef.value.$el.querySelector(
|
||
'.el-textarea__inner',
|
||
) as HTMLTextAreaElement
|
||
const startPos = textarea.selectionStart
|
||
const endPos = textarea.selectionEnd
|
||
// 阻止默认行为（避免额外的换行符）
|
||
event.preventDefault()
|
||
// 在光标处插入换行符
|
||
inputValue.value = inputValue.value.slice(0, startPos) + '\n' + inputValue.value.slice(endPos)
|
||
nextTick(() => {
|
||
textarea.setSelectionRange(startPos + 1, startPos + 1) // 光标定位到换行后位置
|
||
})
|
||
}
|
||
|
||
function getHitTestList() {
|
||
const obj = {
|
||
query_text: inputValue.value,
|
||
...formInline.value,
|
||
}
|
||
if (isDataset.value) {
|
||
KnowledgeApi.getKnowledgeHitTest(id, obj, loading).then((res) => {
|
||
paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
|
||
questionTitle.value = inputValue.value
|
||
inputValue.value = ''
|
||
first.value = false
|
||
})
|
||
} else if (isApplication.value) {
|
||
// applicationApi.getApplicationHitTest(id, obj, loading).then((res) => {
|
||
// paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
|
||
// questionTitle.value = inputValue.value
|
||
// inputValue.value = ''
|
||
// first.value = false
|
||
// })
|
||
}
|
||
}
|
||
|
||
function refresh(data: any) {
|
||
if (data) {
|
||
const obj = paragraphDetail.value.filter((v) => v.id === data.id)[0]
|
||
obj.content = data.content
|
||
obj.title = data.title
|
||
} else {
|
||
paragraphDetail.value = []
|
||
getHitTestList()
|
||
}
|
||
}
|
||
|
||
onMounted(() => {})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.hit-test {
|
||
.question-title {
|
||
.avatar {
|
||
float: left;
|
||
}
|
||
.content {
|
||
padding-left: 40px;
|
||
.text {
|
||
padding: 6px 0;
|
||
height: 34px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__operate {
|
||
.operate-textarea {
|
||
box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
|
||
background-color: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #ffffff;
|
||
box-sizing: border-box;
|
||
|
||
&:has(.el-textarea__inner:focus) {
|
||
border: 1px solid var(--el-color-primary);
|
||
}
|
||
|
||
:deep(.el-textarea__inner) {
|
||
border-radius: 8px !important;
|
||
box-shadow: none;
|
||
resize: none;
|
||
padding: 12px 16px;
|
||
}
|
||
.operate {
|
||
padding: 6px 10px;
|
||
.sent-button {
|
||
max-height: none;
|
||
.el-icon {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
:deep(.el-loading-spinner) {
|
||
margin-top: -15px;
|
||
.circular {
|
||
width: 31px;
|
||
height: 31px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hit-test {
|
||
&__header {
|
||
position: absolute;
|
||
right: calc(var(--app-base-px) * 3);
|
||
}
|
||
|
||
.hit-test-height {
|
||
height: calc(100vh - 300px);
|
||
}
|
||
.document-card {
|
||
height: 210px;
|
||
border: 1px solid var(--app-layout-bg-color);
|
||
&:hover {
|
||
background: #ffffff;
|
||
border: 1px solid var(--el-border-color);
|
||
}
|
||
&.disabled {
|
||
background: var(--app-layout-bg-color);
|
||
border: 1px solid var(--app-layout-bg-color);
|
||
:deep(.description) {
|
||
color: var(--app-border-color-dark);
|
||
}
|
||
:deep(.title) {
|
||
color: var(--app-border-color-dark);
|
||
}
|
||
}
|
||
:deep(.description) {
|
||
-webkit-line-clamp: 5 !important;
|
||
height: 110px;
|
||
}
|
||
.active-button {
|
||
position: absolute;
|
||
right: 16px;
|
||
top: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|