|
|
@@ -1,6 +1,6 @@
|
|
|
<script setup>
|
|
|
import { ref, unref, onMounted, onUnmounted, computed, watch } from 'vue';
|
|
|
-import { useMessage, NInput, NSwitch, NPopover, NScrollbar, NUpload, NTooltip, NProgress } from 'naive-ui';
|
|
|
+import { useMessage, NInput, NPopover, NScrollbar, NUpload, NTooltip, NProgress, NButton } from 'naive-ui';
|
|
|
import { useUserStore } from '@/stores/modules/userStore';
|
|
|
import { baseURL } from '@/utils/request';
|
|
|
import { getFormatYesterDay } from '@/utils/format';
|
|
|
@@ -24,8 +24,14 @@ const MAX_NUM = 5;
|
|
|
const useStore = useUserStore();
|
|
|
|
|
|
const modelLoading = defineModel('loading');
|
|
|
+const modelOnline = defineModel('online');
|
|
|
const switchStatus = defineModel('switch');
|
|
|
|
|
|
+const selectOptions = [
|
|
|
+ { title: 'LibraAl', subTitle: '水务行业专家', value: 0 },
|
|
|
+ { title: 'Deepseek', subTitle: '适合深度思考', value: 1 },
|
|
|
+]
|
|
|
+
|
|
|
const message = useMessage();
|
|
|
|
|
|
const inpVal = ref('');
|
|
|
@@ -65,7 +71,15 @@ watch(inpVal, (curVal) => {
|
|
|
})
|
|
|
|
|
|
watch(() => props.activeItem, (curVal) => {
|
|
|
- selectedOption.value = curVal?.tools ? curVal : null;
|
|
|
+ // console.log(curVal);
|
|
|
+ selectedOption.value = curVal?.tools ? curVal : null;
|
|
|
+ // TODO: 这里后续大概率要删除
|
|
|
+ if ( curVal?.tools ) {
|
|
|
+ // 选中智能体，没有联网搜索
|
|
|
+ modelOnline.value = false;
|
|
|
+ // 选中智能体，需要使用默认的libraAi
|
|
|
+ switchStatus.value = 0;
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const handleInpFocus = () => {
|
|
|
@@ -197,6 +211,10 @@ const selectOption = (index) => {
|
|
|
highlightedIndex.value = index;
|
|
|
isOpen.value = false;
|
|
|
inpVal.value = selectedOption.value.content;
|
|
|
+ // 选中智能体，没有联网搜索
|
|
|
+ modelOnline.value = false;
|
|
|
+ // 选中智能体，需要使用默认的libraAi
|
|
|
+ switchStatus.value = 0;
|
|
|
}
|
|
|
|
|
|
const beforeUpload = ({ file }) => {
|
|
|
@@ -262,6 +280,12 @@ const clearFileList = () => {
|
|
|
uploadFileList.value = [];
|
|
|
}
|
|
|
|
|
|
+// 切换智能体
|
|
|
+const onChangeAgent = ({ value }) => {
|
|
|
+ switchStatus.value = value;
|
|
|
+ modelOnline.value = false;
|
|
|
+}
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
const { data } = await helperApi.getHelperList();
|
|
|
|
|
|
@@ -299,7 +323,7 @@ defineExpose({
|
|
|
<div class="chat-inp-outer border-[1px]" :class="[{ 'border-[#2454FF]': isFocusState }]">
|
|
|
<ul class="chat-tools-inner py-[10px] px-[10px] bg-[#fcfcfc]" v-show="selectedOption">
|
|
|
<li class="tools-tips space-x-[10px]">
|
|
|
- <span>与</span>
|
|
|
+ <span>与</span>
|
|
|
<p class="agent-name space-x-[5px]" @click="isOpen = true">
|
|
|
<img src="https://static.fuxicarbon.com/userupload/db77ffe0cef843278a23b0d2db9505fa.png" alt="">
|
|
|
<span>{{ selectedOption?.title }}</span>
|
|
|
@@ -358,34 +382,91 @@ defineExpose({
|
|
|
</NTooltip>
|
|
|
</NUpload>
|
|
|
</div>
|
|
|
- <NInput
|
|
|
- class="flex-1"
|
|
|
- ref="inpRef"
|
|
|
- type="textarea"
|
|
|
- size="medium"
|
|
|
- placeholder="输入@，召唤智能体"
|
|
|
- v-model:value="inpVal"
|
|
|
- :autosize="{ minRows: 1, maxRows: 5 }"
|
|
|
- @focus="focusInput"
|
|
|
- @blur="blurInput"
|
|
|
- @keypress="handleInpEnter"
|
|
|
- />
|
|
|
+ <div class="w-full ml-[15px]">
|
|
|
+ <NInput
|
|
|
+ class="flex-1"
|
|
|
+ ref="inpRef"
|
|
|
+ type="textarea"
|
|
|
+ size="medium"
|
|
|
+ placeholder="输入@，召唤智能体"
|
|
|
+ v-model:value="inpVal"
|
|
|
+ :autosize="{ minRows: 1, maxRows: 4 }"
|
|
|
+ @focus="focusInput"
|
|
|
+ @blur="blurInput"
|
|
|
+ @keypress="handleInpEnter"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="submit-btn">
|
|
|
- <button class="btn bg-[#1A2029] hover:bg-[#3C4148]" @click="handleBtnClick">
|
|
|
- <SvgIcon name="tool-send-plane" size="22" v-show="!modelLoading"></SvgIcon>
|
|
|
- <div style="color: #fff" class="la-ball-running-dots la-sm" v-show="modelLoading">
|
|
|
- <div v-for="item in 5" :key="item"></div>
|
|
|
+
|
|
|
+ <div class="option-wrapper">
|
|
|
+ <div class="option-list space-x-[10px]">
|
|
|
+ <n-popover
|
|
|
+ trigger="focus"
|
|
|
+ to=".option-wrapper"
|
|
|
+ raw
|
|
|
+ :show-arrow="false"
|
|
|
+ placement="top-start"
|
|
|
+ :width="150"
|
|
|
+ content-class="content-class"
|
|
|
+ content-style="padding: 0;"
|
|
|
+ isOpen
|
|
|
+ :disabled="selectedOption"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <n-button text>
|
|
|
+ <div class="switch-agent option">
|
|
|
+ <span>{{ selectOptions[switchStatus]?.title }}</span>
|
|
|
+ <i class="n-base-icon n-base-suffix__arrow"><svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.14645 5.64645C3.34171 5.45118 3.65829 5.45118 3.85355 5.64645L8 9.79289L12.1464 5.64645C12.3417 5.45118 12.6583 5.45118 12.8536 5.64645C13.0488 5.84171 13.0488 6.15829 12.8536 6.35355L8.35355 10.8536C8.15829 11.0488 7.84171 11.0488 7.64645 10.8536L3.14645 6.35355C2.95118 6.15829 2.95118 5.84171 3.14645 5.64645Z" fill="currentColor"></path></svg></i>
|
|
|
+ </div>
|
|
|
+ </n-button>
|
|
|
+ </template>
|
|
|
+ <ul class="select-agent-options space-y-[8px]">
|
|
|
+ <li class="agent-option-item" v-for="item in selectOptions" :key="item.value" @click="onChangeAgent(item)">
|
|
|
+ <p class="">
|
|
|
+ <span class="agent-title">{{ item.title }}</span>
|
|
|
+ <span class="agent-sub-title">{{ item.subTitle }}</span>
|
|
|
+ </p>
|
|
|
+ <SvgIcon name="chat-icon-arrow-down" v-show="switchStatus == item.value"></SvgIcon>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </n-popover>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="internet-agent option space-x-[4px]"
|
|
|
+ :class="{'agent-active': modelOnline}"
|
|
|
+ @click="modelOnline = !modelOnline"
|
|
|
+ v-show="switchStatus == 1"
|
|
|
+ >
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span>联网搜索</span>
|
|
|
+ <span class="circle"></span>
|
|
|
</div>
|
|
|
- </button>
|
|
|
+
|
|
|
+ <!-- <div class="internet-agent option space-x-[4px]">
|
|
|
+ <SvgIcon name="chat-icon-deep"></SvgIcon>
|
|
|
+ <span>深度思考(T1)</span>
|
|
|
+ <span class="circle"></span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="submit-btn">
|
|
|
+ <button class="btn bg-[#1A2029] hover:bg-[#3C4148]" @click="handleBtnClick">
|
|
|
+ <SvgIcon name="tool-send-plane" size="22" v-show="!modelLoading"></SvgIcon>
|
|
|
+ <div style="color: #fff" class="la-ball-running-dots la-sm" v-show="modelLoading">
|
|
|
+ <div v-for="item in 5" :key="item"></div>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="switch-inner pt-[8px] flex justify-between items-center">
|
|
|
- <div class="space-x-[6px]">
|
|
|
+
|
|
|
+ <div class="switch-inner pt-[8px] flex justify-center items-center">
|
|
|
+ <!-- <div class="space-x-[6px]">
|
|
|
<NSwitch size="small" v-model:value="switchStatus"></NSwitch>
|
|
|
<span class="text-[12px] text-[#9E9E9E]">使用deepseek R1</span>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div>
|
|
|
<TheArchival></TheArchival>
|
|
|
</div>
|
|
|
@@ -419,10 +500,12 @@ defineExpose({
|
|
|
<style scoped lang="scss">
|
|
|
.chat-inp-outer {
|
|
|
border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
box-shadow: 0px 3px 12px 0px #97D3FF40;
|
|
|
|
|
|
.chat-tools-inner {
|
|
|
+ border-top-left-radius: 8px;
|
|
|
+ border-top-right-radius: 8px;
|
|
|
+ margin-bottom: -3px;
|
|
|
@include flex(x, center, between);
|
|
|
|
|
|
.tools-tips {
|
|
|
@@ -446,12 +529,13 @@ defineExpose({
|
|
|
|
|
|
.chat-inp-inner {
|
|
|
position: relative;
|
|
|
- @include flex(x, center, between);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 18px 16px 14px 16px;
|
|
|
background: #fff;
|
|
|
|
|
|
.inp-wrapper {
|
|
|
@include flex(x, start, center);
|
|
|
- padding: 17px 0px 17px 17px;
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
|
.upload-inner {
|
|
|
width: 30px;
|
|
|
@@ -471,9 +555,69 @@ defineExpose({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .option-wrapper {
|
|
|
+ @include flex(x, center, between);
|
|
|
+
|
|
|
+ .option-list {
|
|
|
+ @include flex(x, center, between);
|
|
|
+ .option {
|
|
|
+ @include flex(x, center, between);
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 8px;
|
|
|
+ border: 1px solid #f5f5f5;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A2029;
|
|
|
+ cursor: pointer;
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .circle {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: #BDBDBD;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .switch-agent {
|
|
|
+ width: 110px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .internet-agent {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ .icon {
|
|
|
+ background: url("@/assets/svgs/chat/icon-internet.svg");
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: #2E5CFF;
|
|
|
+ .circle {
|
|
|
+ background: #2E5CFF;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ background: url("@/assets/svgs/chat/icon-internet-active.svg");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .agent-active {
|
|
|
+ background: #eaeff8;
|
|
|
+ color: #2E5CFF;
|
|
|
+ .circle {
|
|
|
+ background: #2E5CFF;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ background: url("@/assets/svgs/chat/icon-internet-active.svg");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.submit-btn {
|
|
|
@include flex(x, center, center);
|
|
|
- width: 84px;
|
|
|
|
|
|
.btn {
|
|
|
@include flex(x, center, center);
|
|
|
@@ -615,6 +759,44 @@ defineExpose({
|
|
|
height: 30px;
|
|
|
background: linear-gradient(180deg, rgba(232, 241, 250, 0) 0%, #E7F0FA 95%);
|
|
|
}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.chat-inp-outer {
|
|
|
+ .n-input-wrapper {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.option-wrapper {
|
|
|
+ .n-popover {
|
|
|
+ border-radius: 8px !important;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
+.select-agent-options {
|
|
|
+ width: 150px;
|
|
|
+ padding: 12px 19px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .agent-option-item {
|
|
|
+ @include flex(x, center, between);
|
|
|
+ cursor: pointer;
|
|
|
+ .agent-title, .agent-sub-title {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .agent-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A2029;
|
|
|
+ }
|
|
|
+ .agent-sub-title {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
