|
|
|
|
@ -20,7 +20,7 @@ import {t} from '@/locales'
|
|
|
|
|
import {UploadOutlined} from '@ant-design/icons-vue';
|
|
|
|
|
import {storeToRefs} from 'pinia'
|
|
|
|
|
import {sessionDetailForSetup} from '@/store'
|
|
|
|
|
|
|
|
|
|
import StopSvg from '@/assets/RecordStop12Regular.svg'
|
|
|
|
|
const sessionDetailData = sessionDetailForSetup()
|
|
|
|
|
let controller = new AbortController()
|
|
|
|
|
const {
|
|
|
|
|
@ -28,7 +28,8 @@ const {
|
|
|
|
|
currentListUuid,
|
|
|
|
|
gptMode,
|
|
|
|
|
isStop,
|
|
|
|
|
isGPT4
|
|
|
|
|
isGPT4,
|
|
|
|
|
loading
|
|
|
|
|
} = storeToRefs(sessionDetailData)
|
|
|
|
|
|
|
|
|
|
const dialog = useDialog()
|
|
|
|
|
@ -51,7 +52,6 @@ const {
|
|
|
|
|
toggleUsingContext
|
|
|
|
|
} = useUsingContext()
|
|
|
|
|
const prompt = ref('')
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const inputRef = ref(null)
|
|
|
|
|
|
|
|
|
|
// 添加PromptStore
|
|
|
|
|
@ -68,19 +68,32 @@ dataSources.value.forEach((item, index) => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function handleSubmit() {
|
|
|
|
|
if (loading.value){
|
|
|
|
|
handleStop()
|
|
|
|
|
}else {
|
|
|
|
|
dataSources.value.push({
|
|
|
|
|
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
|
|
|
|
|
text: prompt.value,
|
|
|
|
|
text: prompt.value?.trim(),
|
|
|
|
|
inversion: true,
|
|
|
|
|
error: false,
|
|
|
|
|
fileList: fileList.value.map(x => x.url),
|
|
|
|
|
loading: false
|
|
|
|
|
})
|
|
|
|
|
sendDataStream()
|
|
|
|
|
scrollToBottom('smooth')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//一键滚动到底部，一键滚动到顶部逻辑未完善
|
|
|
|
|
/* const isTopBottom=()=>{
|
|
|
|
|
if ( scrollRef.value.scrollTop ===0){
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
|
|
|
|
|
const createParams = () => {
|
|
|
|
|
const messages = dataSources.value.map((x) => {
|
|
|
|
|
return {
|
|
|
|
|
@ -160,7 +173,6 @@ const sendDataStream = async () => {
|
|
|
|
|
});
|
|
|
|
|
visible.value = false
|
|
|
|
|
try {
|
|
|
|
|
loading.value = true
|
|
|
|
|
const response = await fetch(API_URL, {
|
|
|
|
|
method: "POST",
|
|
|
|
|
timeout: 10000,
|
|
|
|
|
@ -271,7 +283,7 @@ function handleEnter(event) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleStop(item) {
|
|
|
|
|
function handleStop() {
|
|
|
|
|
if (loading.value) {
|
|
|
|
|
loading.value = false
|
|
|
|
|
isStop.value = true
|
|
|
|
|
@ -312,7 +324,7 @@ const placeholder = computed(() => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const buttonDisabled = computed(() => {
|
|
|
|
|
return loading.value || !prompt.value || prompt.value.trim() === ''
|
|
|
|
|
return prompt.value.trim() === '' &&!loading.value
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const footerClass = computed(() => {
|
|
|
|
|
@ -322,14 +334,35 @@ const footerClass = computed(() => {
|
|
|
|
|
}
|
|
|
|
|
return classes
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const isShowBottom=ref(false)
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
|
|
|
|
scrollToBottom()
|
|
|
|
|
scrollRef.value.addEventListener('scroll', function() {
|
|
|
|
|
if (scrollRef.value.scrollTop + scrollRef.value.clientHeight +100>= scrollRef.value.scrollHeight) {
|
|
|
|
|
isShowBottom.value=false
|
|
|
|
|
}else {
|
|
|
|
|
isShowBottom.value=true
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (inputRef.value && !isMobile.value) {
|
|
|
|
|
inputRef.value?.focus()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const currentColor = ref('#ff0000'); // 初始颜色红色
|
|
|
|
|
const colors = ['#ff0000', '#ffffff']; // 颜色数组（红色和白色）
|
|
|
|
|
let intervalId = null;
|
|
|
|
|
|
|
|
|
|
// 计时器函数
|
|
|
|
|
const changeColor = () => {
|
|
|
|
|
currentColor.value = currentColor.value === colors[0] ? colors[1] : colors[0];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
watch(loading,()=>{
|
|
|
|
|
if (loading.value){
|
|
|
|
|
intervalId = setInterval(changeColor, 1000);
|
|
|
|
|
}else {
|
|
|
|
|
clearInterval(intervalId);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const fileList = ref([]);
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
if (loading.value) {
|
|
|
|
|
@ -345,7 +378,6 @@ function getBase64(file) {
|
|
|
|
|
reader.onerror = error => reject(error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const previewVisible = ref(false);
|
|
|
|
|
const previewImage = ref('');
|
|
|
|
|
const previewTitle = ref('');
|
|
|
|
|
@ -394,7 +426,10 @@ const upItemImage1 = async (file) => {
|
|
|
|
|
sendDataStream()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
watch(dataSources,()=>{
|
|
|
|
|
loading.value=false
|
|
|
|
|
scrollToBottom('auto')
|
|
|
|
|
})
|
|
|
|
|
const customRequest = async (file) => {
|
|
|
|
|
const res = await uploadImg({
|
|
|
|
|
file: file.file,
|
|
|
|
|
@ -417,9 +452,10 @@ const customRequest = async (file) => {
|
|
|
|
|
@handle-clear="handleClear"
|
|
|
|
|
/>
|
|
|
|
|
<main class="flex-1 overflow-hidden">
|
|
|
|
|
<div class="shortcut-arrow">
|
|
|
|
|
<transition name="fade">
|
|
|
|
|
<div class="shortcut-arrow" v-if="isShowBottom">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<n-button @click="scrollToBottom" type="primary" dashed circle>
|
|
|
|
|
<n-button @click="scrollToBottom('smooth')" type="primary" dashed circle>
|
|
|
|
|
<template #icon>
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
|
|
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
|
|
|
|
|
@ -433,7 +469,7 @@ const customRequest = async (file) => {
|
|
|
|
|
</n-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
|
|
|
|
|
<div
|
|
|
|
|
@ -462,12 +498,12 @@ const customRequest = async (file) => {
|
|
|
|
|
@delete="handleDelete(index)"
|
|
|
|
|
/>
|
|
|
|
|
<div class="sticky bottom-0 left-0 flex justify-center">
|
|
|
|
|
<NButton v-if="loading" type="warning" @click="handleStop(item)">
|
|
|
|
|
<!-- <NButton v-if="loading" type="warning" @click="handleStop(item)">
|
|
|
|
|
<template #icon>
|
|
|
|
|
<SvgIcon icon="ri:stop-circle-line"/>
|
|
|
|
|
</template>
|
|
|
|
|
停止响应
|
|
|
|
|
</NButton>
|
|
|
|
|
</NButton>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -561,8 +597,13 @@ const customRequest = async (file) => {
|
|
|
|
|
</NAutoComplete>
|
|
|
|
|
<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
|
|
|
|
|
<template #icon>
|
|
|
|
|
<span class="dark:text-black">
|
|
|
|
|
<span class="dark:text-black" v-if="!loading">
|
|
|
|
|
<SvgIcon icon="ri:send-plane-fill"/>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="dark:text-black" v-if="loading">
|
|
|
|
|
<svg style="width:100%;height:100%;" xmlns="http://www.w3.org/2000/svg" :style="{color:currentColor}" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"><g fill="none"><path d="M5 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5zm6 2A5 5 0 1 1 1 6a5 5 0 0 1 10 0zm-1 0a4 4 0 1 0-8 0a4 4 0 0 0 8 0z" fill="currentColor"></path></g></svg>
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</NButton>
|
|
|
|
|
@ -572,13 +613,19 @@ const customRequest = async (file) => {
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
|
|
|
transition: opacity 0.4s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
.fade-enter-from, .fade-leave-to {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
.shortcut-arrow {
|
|
|
|
|
width: min-content;
|
|
|
|
|
height: min-content;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
left: 50%;
|
|
|
|
|
bottom: 90px;
|
|
|
|
|
bottom: 100px;
|
|
|
|
|
.top {
|
|
|
|
|
transform: rotate(270deg) translateX(-50%);
|
|
|
|
|
width: min-content;
|
|
|
|
|
|
Phoenix
7 months ago
