|
@@ -1,5 +1,5 @@
|
|
|
<script setup lang="ts">
|
|
|
- import { onMounted, ref } from 'vue';
|
|
|
+ import { computed, onMounted, ref, toRaw } from 'vue';
|
|
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
|
|
import Chat from './components/Chat.vue';
|
|
|
import { list as getKnowledgeList } from '@/api/aigc/knowledge';
|
|
@@ -8,6 +8,7 @@
|
|
|
import { getMessages, clean } from '@/api/aigc/chat';
|
|
|
import { useChatStore } from './components/store/useChatStore';
|
|
|
import { useDialog, useMessage } from 'naive-ui';
|
|
|
+ import DataTable from './components/DataTable.vue';
|
|
|
|
|
|
const dialog = useDialog();
|
|
|
const ms = useMessage();
|
|
@@ -16,7 +17,7 @@
|
|
|
const list = ref();
|
|
|
const knowledgeList = ref();
|
|
|
const promptList = ref();
|
|
|
- const value = ref();
|
|
|
+ const value = ref('');
|
|
|
const loading = ref(true);
|
|
|
const chatLoading = ref(false);
|
|
|
const model = ref('openai');
|
|
@@ -24,38 +25,36 @@
|
|
|
|
|
|
onMounted(async () => {
|
|
|
loading.value = true;
|
|
|
- knowledgeList.value = await getKnowledgeList({});
|
|
|
+ const data = await getKnowledgeList({});
|
|
|
+ let arr: any[] = [];
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.docs = item.docs.map((opt) => ({
|
|
|
+ label: opt.name,
|
|
|
+ value: opt.id,
|
|
|
+ }));
|
|
|
+ arr.push(item);
|
|
|
+ });
|
|
|
+ knowledgeList.value = arr;
|
|
|
+ console.log('xxx', knowledgeList.value);
|
|
|
promptList.value = await getPromptList({});
|
|
|
list.value = knowledgeList.value;
|
|
|
loading.value = false;
|
|
|
});
|
|
|
- const options = [
|
|
|
- {
|
|
|
- label: 'Drive My Car',
|
|
|
- value: 'Drive My Car',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Norwegian Wood',
|
|
|
- value: 'Norwegian Wood',
|
|
|
- },
|
|
|
- ];
|
|
|
|
|
|
async function onCheck(item: any) {
|
|
|
checked.value = item;
|
|
|
chatLoading.value = true;
|
|
|
chatStore.messages = [];
|
|
|
chatStore.conversationId = item.id;
|
|
|
- chatStore.knowledgeId = null;
|
|
|
- chatStore.promptId = null;
|
|
|
- chatStore.promptText = null;
|
|
|
+ chatStore.knowledge = null;
|
|
|
+ chatStore.prompt = null;
|
|
|
chatStore.messages = await getMessages(item.id);
|
|
|
|
|
|
if (activeTab.value === 'knowledge') {
|
|
|
- chatStore.knowledgeId = item.id;
|
|
|
+ chatStore.knowledge = item;
|
|
|
}
|
|
|
if (activeTab.value === 'prompt') {
|
|
|
- chatStore.promptId = item.id;
|
|
|
- chatStore.promptText = item.prompt;
|
|
|
+ chatStore.prompt = item;
|
|
|
}
|
|
|
|
|
|
chatLoading.value = false;
|
|
@@ -70,6 +69,10 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ function onUpdateSelect(val, opt) {
|
|
|
+ console.log(val, opt);
|
|
|
+ }
|
|
|
+
|
|
|
// 清除
|
|
|
function handleClear() {
|
|
|
if (loading.value || chatStore.conversationId == null) {
|
|
@@ -103,8 +106,9 @@
|
|
|
<li v-for="(item, idx) in list" :key="idx" @click="onCheck(item)">
|
|
|
<n-popselect
|
|
|
v-model:value="value"
|
|
|
- :options="options"
|
|
|
+ :options="item.docs"
|
|
|
placement="right"
|
|
|
+ @update:value="onUpdateSelect"
|
|
|
:show="item.isStruct !== undefined && item.isStruct && item == checked"
|
|
|
>
|
|
|
<label :for="item.name" class="block relative">
|
|
@@ -140,19 +144,6 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="absolute top-4 right-4 flex-none flex items-center justify-center w-4 h-4 rounded-full border peer-checked:bg-indigo-600 text-white peer-checked:text-white duration-200"
|
|
|
- >
|
|
|
- <svg class="w-2.5 h-2.5" viewBox="0 0 12 10">
|
|
|
- <polyline
|
|
|
- fill="none"
|
|
|
- stroke-width="2px"
|
|
|
- stroke="currentColor"
|
|
|
- stroke-dasharray="16px"
|
|
|
- points="1.5 6 4.5 9 10.5 1"
|
|
|
- />
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
</label>
|
|
|
</n-popselect>
|
|
|
</li>
|
|
@@ -161,46 +152,61 @@
|
|
|
</n-spin>
|
|
|
</n-layout-sider>
|
|
|
|
|
|
- <div class="flex justify-center items-center w-full mt-0">
|
|
|
- <div class="p-8 pt-6 w-full h-full mb-2">
|
|
|
- <div class="mb-2 flex flex-wrap justify-between items-center">
|
|
|
- <div class="font-bold flex justify-center items-center flex-wrap gap-2">
|
|
|
- <SvgIcon class="text-lg" icon="ion:sparkles-outline" />
|
|
|
- <span>AI对话</span>
|
|
|
+ <div class="flex flex-col gap-1 items-center w-full mt-0">
|
|
|
+ <n-split direction="vertical" :default-size="0" :resize-trigger-size="0">
|
|
|
+ <template #1>
|
|
|
+ <div class="w-full p-2 mb-4 h-full">
|
|
|
+ <span
|
|
|
+ class="inline-flex items-center mb-2 gap-x-2 rounded-full bg-green-600/20 px-2.5 py-1 text-sm font-semibold leading-5 text-green-600"
|
|
|
+ >
|
|
|
+ <span class="inline-block h-1.5 w-1.5 rounded-full bg-green-600"></span>
|
|
|
+ Approved
|
|
|
+ </span>
|
|
|
+ <DataTable />
|
|
|
</div>
|
|
|
- <n-space align="center">
|
|
|
- <n-select
|
|
|
- size="small"
|
|
|
- v-model:value="chatStore.model"
|
|
|
- :options="modelList"
|
|
|
- class="!w-[200px]"
|
|
|
- />
|
|
|
+ </template>
|
|
|
+ <template #2>
|
|
|
+ <div class="p-8 pt-6 w-full h-full mb-2">
|
|
|
+ <div class="mb-2 flex flex-wrap justify-between items-center">
|
|
|
+ <div class="font-bold flex justify-center items-center flex-wrap gap-2">
|
|
|
+ <SvgIcon class="text-lg" icon="ion:sparkles-outline" />
|
|
|
+ <span>AI对话</span>
|
|
|
+ </div>
|
|
|
+ <n-space align="center">
|
|
|
+ <n-select
|
|
|
+ size="small"
|
|
|
+ v-model:value="chatStore.model"
|
|
|
+ :options="modelList"
|
|
|
+ class="!w-[200px]"
|
|
|
+ />
|
|
|
|
|
|
- <n-button @click="handleClear" size="small" type="success" secondary>
|
|
|
- <template #icon>
|
|
|
- <SvgIcon class="text-[14px]" icon="fluent:delete-12-regular" />
|
|
|
- </template>
|
|
|
- 清空聊天
|
|
|
- </n-button>
|
|
|
- </n-space>
|
|
|
- </div>
|
|
|
- <div class="w-full h-full rounded-md p-2 flex items-center justify-center">
|
|
|
- <n-spin :show="chatLoading">
|
|
|
- <Chat
|
|
|
- :id="checked.id"
|
|
|
- :model="model"
|
|
|
- v-if="checked !== undefined && checked.id !== undefined"
|
|
|
- />
|
|
|
- <div v-else class="w-full h-full flex items-center justify-center">
|
|
|
- <n-empty description="请先选中左侧的知识库或者提示词列表开始聊天!">
|
|
|
- <template #extra>
|
|
|
- <n-button size="small" type="success"> 立即开始 </n-button>
|
|
|
- </template>
|
|
|
- </n-empty>
|
|
|
+ <n-button @click="handleClear" size="small" type="success" secondary>
|
|
|
+ <template #icon>
|
|
|
+ <SvgIcon class="text-[14px]" icon="fluent:delete-12-regular" />
|
|
|
+ </template>
|
|
|
+ 清空聊天
|
|
|
+ </n-button>
|
|
|
+ </n-space>
|
|
|
</div>
|
|
|
- </n-spin>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="w-full h-full rounded-md p-2 flex items-center justify-center">
|
|
|
+ <n-spin :show="chatLoading">
|
|
|
+ <Chat
|
|
|
+ :id="checked.id"
|
|
|
+ :model="model"
|
|
|
+ v-if="checked !== undefined && checked.id !== undefined"
|
|
|
+ />
|
|
|
+ <div v-else class="w-full h-full flex items-center justify-center">
|
|
|
+ <n-empty description="请先选中左侧的知识库或者提示词列表开始聊天!">
|
|
|
+ <template #extra>
|
|
|
+ <n-button size="small" type="success"> 立即开始 </n-button>
|
|
|
+ </template>
|
|
|
+ </n-empty>
|
|
|
+ </div>
|
|
|
+ </n-spin>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </n-split>
|
|
|
</div>
|
|
|
</n-layout>
|
|
|
</template>
|