xingyy/chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Phoenix 2024-02-06 14:46:56 +08:00
parent 19fb7e2bac
commit b7f46d1c22
5 changed files with 492 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,7 +1,7 @@
# Glob API URL # Glob API URL
VITE_GLOB_API_URL=/api VITE_GLOB_API_URL=/api
VITE_APP_API_BASE_URL=https://erpapi.fontree.cn VITE_APP_API_BASE_URL=http://114.218.158.24:9020
https://erpapi.fontree.cn#正式 https://erpapi.fontree.cn#正式
http://114.218.158.24:9020#测试 http://114.218.158.24:9020#测试
# Whether long replies are supported, which may result in higher API fees # Whether long replies are supported, which may result in higher API fees

1
src/views/chat/components/Message/Text.vue
View File

@ -43,6 +43,7 @@ const wrapClass = computed(() => {
return [ return [
'text-wrap', 'text-wrap',
'min-w-[20px]', 'min-w-[20px]',
'min-h-[31px]',
'rounded-md', 'rounded-md',
isMobile.value ? 'p-2' : 'px-3 py-2', isMobile.value ? 'p-2' : 'px-3 py-2',
props.inversion ? 'bg-[#dfd7f3]' : 'bg-[#f4f6f8]', props.inversion ? 'bg-[#dfd7f3]' : 'bg-[#f4f6f8]',

13
src/views/chat/components/Message/index.vue
View File

@ -45,12 +45,7 @@ const options = computed(() => {
label: t('chat.copy'), label: t('chat.copy'),
key: 'copyText', key: 'copyText',
icon: iconRender({ icon: 'ri:file-copy-2-line' }), icon: iconRender({ icon: 'ri:file-copy-2-line' }),
}/* , }
{
label: t('common.delete'),
key: 'delete',
icon: iconRender({ icon: 'ri:delete-bin-line' }),
}, */
] ]
if (!props.inversion) { if (!props.inversion) {
@ -76,12 +71,6 @@ function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
emit('delete') emit('delete')
} }
} }
/* function handleRegenerate() {
messageRef.value?.scrollIntoView()
emit('regenerate')
} */
async function handleCopy() { async function handleCopy() {
try { try {
await copyToClip(props.text || '') await copyToClip(props.text || '')

1
src/views/chat/hooks/useScroll.ts
View File

@ -12,7 +12,6 @@ interface ScrollReturn {
export function useScroll(): ScrollReturn { export function useScroll(): ScrollReturn {
const scrollRef = ref<ScrollElement>(null) const scrollRef = ref<ScrollElement>(null)
const scrollToBottom = async () => { const scrollToBottom = async () => {
await nextTick() await nextTick()
if (scrollRef.value) if (scrollRef.value)

899
src/views/chat/index.vue
View File

@ -1,36 +1,55 @@
<script setup > <script setup>
import {uploadFormData, uploadImg} from "@/api/api"; import {uploadFormData, uploadImg} from "@/api/api";
import {Local} from "@/utils/storage/storage"; import {Local} from "@/utils/storage/storage";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { computed, onMounted, onUnmounted, ref,watch } from 'vue' import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui' import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop} from 'naive-ui'
import { AreaChartOutlined ,PlusOutlined } from '@ant-design/icons-vue'; import {AreaChartOutlined, PlusOutlined} from '@ant-design/icons-vue';
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { Message } from './components' import {Message} from './components'
import { useScroll } from './hooks/useScroll' import {useScroll} from './hooks/useScroll'
import { useChat } from './hooks/useChat' import {useChat} from './hooks/useChat'
import { useUsingContext } from './hooks/useUsingContext' import {useUsingContext} from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue' import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon } from '@/components/common' import {HoverButton, SvgIcon} from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout' import {useBasicLayout} from '@/hooks/useBasicLayout'
import { useChatStore, usePromptStore } from '@/store' import {useChatStore, usePromptStore} from '@/store'
import { fetchChatAPIProcess } from '@/api' import {fetchChatAPIProcess} from '@/api'
import { t } from '@/locales' import {t} from '@/locales'
import { UploadOutlined } from '@ant-design/icons-vue'; import {UploadOutlined} from '@ant-design/icons-vue';
import {storeToRefs} from 'pinia' import {storeToRefs} from 'pinia'
import { sessionDetailForSetup } from '@/store' import {sessionDetailForSetup} from '@/store'
const sessionDetailData=sessionDetailForSetup()
const sessionDetailData = sessionDetailForSetup()
let controller = new AbortController() let controller = new AbortController()
const { sessionDetail:dataSources ,currentListUuid,gptMode,isStop,isGPT4} = storeToRefs(sessionDetailData) const {
sessionDetail: dataSources,
currentListUuid,
gptMode,
isStop,
isGPT4
} = storeToRefs(sessionDetailData)
const dialog = useDialog() const dialog = useDialog()
const ms = useMessage() const ms = useMessage()
const chatStore = useChatStore() const chatStore = useChatStore()
const { isMobile } = useBasicLayout() const {isMobile} = useBasicLayout()
const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat() const {
const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll() addChat,
const { usingContext, toggleUsingContext } = useUsingContext() updateChat,
updateChatSome,
getChatByUuidAndIndex
} = useChat()
const {
scrollRef,
scrollToBottom,
scrollToBottomIfAtBottom
} = useScroll()
const {
usingContext,
toggleUsingContext
} = useUsingContext()
const prompt = ref('') const prompt = ref('')
const loading = ref(false) const loading = ref(false)
const inputRef = ref(null) const inputRef = ref(null)
@ -39,472 +58,532 @@ const inputRef = ref(null)
const promptStore = usePromptStore() const promptStore = usePromptStore()
// 使用storeToRefs，保证store修改后，联想部分能够重新渲染 // 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const { promptList: promptTemplate } = storeToRefs(promptStore) const {promptList: promptTemplate} = storeToRefs(promptStore)
// 未知原因刷新页面，loading 状态不会重置，手动重置 // 未知原因刷新页面，loading 状态不会重置，手动重置
dataSources.value.forEach((item, index) => { dataSources.value.forEach((item, index) => {
if (item.loading) if (item.loading) {
updateChatSome(+uuid, index, { loading: false }) updateChatSome(+uuid, index, {loading: false})
}
}) })
function handleSubmit() { function handleSubmit() {
dataSources.value.push({ dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: prompt.value, text: prompt.value,
inversion: true, inversion: true,
error: false, error: false,
fileList:fileList.value.map(x=>x.url), fileList: fileList.value.map(x => x.url),
loading:false loading: false
}) })
sendDataStream() sendDataStream()
} }
const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`; const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
const createParams = () => { const createParams = () => {
const messages = dataSources.value.map((x) => { const messages = dataSources.value.map((x) => {
return { return {
content:(()=>{ content: (() => {
if (gptMode.value==='gpt-4-vision-preview'){ if (gptMode.value === 'gpt-4-vision-preview') {
return [{type: "text", text: x.text},...x.fileList.map((y)=>{ return [{
return {type: "image_url", image_url:y} type: "text",
})] text: x.text
}else { }, ...x.fileList.map((y) => {
return x.text return {
} type: "image_url",
})(), image_url: y
role: x.inversion ? 'user' : 'assistant' }
} })]
}); } else {
return { return x.text
type:isFile.value?'custom':'', }
listUuid: currentListUuid.value, })(),
messages, role: x.inversion ? 'user' : 'assistant'
frequency_penalty: 0, }
max_tokens: 1000, });
model: gptMode.value, return {
presence_penalty: 0, type: isFile.value ? 'custom' : '',
stream: true, listUuid: currentListUuid.value,
temperature: 1, messages,
top_p: 1 frequency_penalty: 0,
}; max_tokens: 1000,
model: gptMode.value,
presence_penalty: 0,
stream: true,
temperature: 1,
top_p: 1
};
}; };
const handleResponseStream = async (reader) => { const handleResponseStream = async (reader) => {
const { done, value } = await reader.read(); const {
if (!done) { done,
let decoded = new TextDecoder().decode(value); value
let decodedArray = decoded.split("data: "); } = await reader.read();
decodedArray.forEach((decoded) => { if (!done) {
if (decoded !== "") { let decoded = new TextDecoder().decode(value);
if (decoded.trim() === "[DONE]") { let decodedArray = decoded.split("data: ");
dataSources.value[dataSources.value.length - 1].loading=false for (const decoded of decodedArray) {
loading.value=false if (decoded !== "") {
return; if (decoded.trim() === "[DONE]") {
} else { dataSources.value[dataSources.value.length - 1].loading = false
if (isStop.value){ loading.value = false
loading.value=false } else {
return; if (isStop.value) {
} dataSources.value[dataSources.value.length - 1].loading = false
loading.value=true loading.value = false
dataSources.value[dataSources.value.length - 1].loading=true return;
const response = JSON.parse(decoded).choices[0].delta.content }
? JSON.parse(decoded).choices[0].delta.content loading.value = true
: ""; dataSources.value[dataSources.value.length - 1].loading = true
dataSources.value[dataSources.value.length - 1].text += response; const response = JSON.parse(decoded).choices[0].delta.content
} ? JSON.parse(decoded).choices[0].delta.content
} : "";
}); dataSources.value[dataSources.value.length - 1].text += response;
}
await handleResponseStream(reader); }
} }
await handleResponseStream(reader);
}
}; };
const sendDataStream = async () => { const sendDataStream = async () => {
const params = createParams(); const params = createParams();
fileList.value=[] fileList.value = []
prompt.value='' prompt.value = ''
isStop.value=false isStop.value = false
dataSources.value.push({ dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: '思考中..', text: '思考中..',
inversion: false, inversion: false,
error: false, error: false,
loading:true loading: true
}); });
visible.value=false visible.value = false
try { try {
loading.value=true loading.value = true
const response = await fetch(API_URL, { const response = await fetch(API_URL, {
method: "POST", method: "POST",
timeout: 10000, timeout: 10000,
body: JSON.stringify(params), body: JSON.stringify(params),
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
Accept: "application/json", Accept: "application/json",
Authorization: Local.get('token'), Authorization: Local.get('token'),
}, },
}); });
const contentType = response.headers.get('Content-Type'); const contentType = response.headers.get('Content-Type');
if (!contentType || !contentType.includes('application/json')) { if (!contentType || !contentType.includes('application/json')) {
const reader = response.body.getReader(); const reader = response.body.getReader();
dataSources.value[dataSources.value.length-1].text='' dataSources.value[dataSources.value.length - 1].text = ''
await handleResponseStream(reader); await handleResponseStream(reader);
} }
} catch (error) { } catch (error) {
console.error('发生错误:', error); console.error('发生错误:', error);
} }
}; };
function handleExport() { function handleExport() {
if (loading.value) if (loading.value) {
return return
}
const d = dialog.warning({ const d = dialog.warning({
title: t('chat.exportImage'), title: t('chat.exportImage'),
content: t('chat.exportImageConfirm'), content: t('chat.exportImageConfirm'),
positiveText: t('common.yes'), positiveText: t('common.yes'),
negativeText: t('common.no'), negativeText: t('common.no'),
onPositiveClick: async () => { onPositiveClick: async () => {
try { try {
d.loading = true d.loading = true
const ele = document.getElementById('image-wrapper') const ele = document.getElementById('image-wrapper')
const canvas = await html2canvas(ele, { const canvas = await html2canvas(ele, {
useCORS: true, useCORS: true,
}) })
const imgUrl = canvas.toDataURL('image/png') const imgUrl = canvas.toDataURL('image/png')
const tempLink = document.createElement('a') const tempLink = document.createElement('a')
tempLink.style.display = 'none' tempLink.style.display = 'none'
tempLink.href = imgUrl tempLink.href = imgUrl
tempLink.setAttribute('download', 'chat-shot.png') tempLink.setAttribute('download', 'chat-shot.png')
if (typeof tempLink.download === 'undefined') if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank') tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink) document.body.appendChild(tempLink)
tempLink.click() tempLink.click()
document.body.removeChild(tempLink) document.body.removeChild(tempLink)
window.URL.revokeObjectURL(imgUrl) window.URL.revokeObjectURL(imgUrl)
d.loading = false d.loading = false
ms.success(t('chat.exportSuccess')) ms.success(t('chat.exportSuccess'))
Promise.resolve() Promise.resolve()
} } catch (error) {
catch (error) { ms.error(t('chat.exportFailed'))
ms.error(t('chat.exportFailed')) } finally {
} d.loading = false
finally { }
d.loading = false },
} })
},
})
} }
function handleDelete(index) { function handleDelete(index) {
if (loading.value) if (loading.value) {
return return
}
dialog.warning({ dialog.warning({
title: t('chat.deleteMessage'), title: t('chat.deleteMessage'),
content: t('chat.deleteMessageConfirm'), content: t('chat.deleteMessageConfirm'),
positiveText: t('common.yes'), positiveText: t('common.yes'),
negativeText: t('common.no'), negativeText: t('common.no'),
onPositiveClick: () => { onPositiveClick: () => {
chatStore.deleteChatByUuid(+uuid, index) chatStore.deleteChatByUuid(+uuid, index)
}, },
}) })
} }
function handleClear() { function handleClear() {
if (loading.value) if (loading.value) {
return return
}
dialog.warning({ dialog.warning({
title: t('chat.clearChat'), title: t('chat.clearChat'),
content: t('chat.clearChatConfirm'), content: t('chat.clearChatConfirm'),
positiveText: t('common.yes'), positiveText: t('common.yes'),
negativeText: t('common.no'), negativeText: t('common.no'),
onPositiveClick: () => { onPositiveClick: () => {
chatStore.clearChatByUuid(+uuid) chatStore.clearChatByUuid(+uuid)
}, },
}) })
} }
function handleEnter(event) { function handleEnter(event) {
if (!isMobile.value) { if (!isMobile.value) {
if (event.key === 'Enter' && !event.shiftKey) { if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault() event.preventDefault()
handleSubmit() handleSubmit()
} }
} } else {
else { if (event.key === 'Enter' && event.ctrlKey) {
if (event.key === 'Enter' && event.ctrlKey) { event.preventDefault()
event.preventDefault() handleSubmit()
handleSubmit() }
} }
}
} }
function handleStop() {
if (loading.value) { function handleStop(item) {
loading.value = false if (loading.value) {
isStop.value=true loading.value = false
} isStop.value = true
}
} }
// 可优化部分 // 可优化部分
// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果) // 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现 // 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
const searchOptions = computed(() => { const searchOptions = computed(() => {
if (prompt.value.startsWith('/')) { if (prompt.value.startsWith('/')) {
return promptTemplate.value.filter((item) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj) => { return promptTemplate.value.filter((item) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase())).map((obj) => {
return { return {
label: obj.value, label: obj.value,
value: obj.value, value: obj.value,
} }
}) })
} } else {
else { return []
return [] }
}
}) })
// value反渲染key // value反渲染key
const renderOption = (option) => { const renderOption = (option) => {
for (const i of promptTemplate.value) { for (const i of promptTemplate.value) {
if (i.value === option.label) if (i.value === option.label) {
return [i.key] return [i.key]
} }
return [] }
return []
} }
const placeholder = computed(() => { const placeholder = computed(() => {
if (isMobile.value) if (isMobile.value) {
return t('chat.placeholderMobile') return t('chat.placeholderMobile')
return t('chat.placeholder') }
return t('chat.placeholder')
}) })
const buttonDisabled = computed(() => { const buttonDisabled = computed(() => {
return loading.value || !prompt.value || prompt.value.trim() === '' return loading.value || !prompt.value || prompt.value.trim() === ''
}) })
const footerClass = computed(() => { const footerClass = computed(() => {
let classes = ['p-4'] let classes = ['p-4']
if (isMobile.value) if (isMobile.value) {
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden'] classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
return classes }
return classes
}) })
onMounted(() => { onMounted(() => {
scrollToBottom() scrollToBottom()
if (inputRef.value && !isMobile.value) if (inputRef.value && !isMobile.value) {
inputRef.value?.focus() inputRef.value?.focus()
}
}) })
const fileList = ref([ const fileList = ref([]);
]);
onUnmounted(() => { onUnmounted(() => {
if (loading.value) if (loading.value) {
controller.abort() controller.abort()
}
}) })
function getBase64(file) { function getBase64(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result); reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error); reader.onerror = error => reject(error);
}); });
} }
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImage = ref(''); const previewImage = ref('');
const previewTitle = ref(''); const previewTitle = ref('');
const handleCancel = () => { const handleCancel = () => {
previewVisible.value = false; previewVisible.value = false;
previewTitle.value = ''; previewTitle.value = '';
}; };
const handlePreview = async (file) => { const handlePreview = async (file) => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = (await getBase64(file.originFileObj)) file.preview = (await getBase64(file.originFileObj))
} }
previewImage.value = file.url || file.preview; previewImage.value = file.url || file.preview;
previewVisible.value = true; previewVisible.value = true;
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1); previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
}; };
const value = ref('gpt-3.5-turbo'); const value = ref('gpt-3.5-turbo');
const visible=ref(false) const visible = ref(false)
const removeImg=(data)=>{ const removeImg = (data) => {
fileList.value.splice(fileList.value.findIndex(x=>x.url===data.url),1) fileList.value.splice(fileList.value.findIndex(x => x.url === data.url), 1)
} }
watch(gptMode,()=>{ watch(gptMode, () => {
currentListUuid.value='' currentListUuid.value = ''
dataSources.value=[] dataSources.value = []
}) })
const visible1=ref(false) const visible1 = ref(false)
const fileList1=ref([]) const fileList1 = ref([])
const isFile=ref(false) const isFile = ref(false)
const upItemImage1= async (file)=>{ const upItemImage1 = async (file) => {
const data = { const data = {
file: file.file, file: file.file,
} }
const res=await uploadFormData(data) const res = await uploadFormData(data)
if (res.code===0){ if (res.code === 0) {
file.onSuccess() file.onSuccess()
dataSources.value=[...dataSources.value,...res.data.paragraph.flatMap(n=>[n,'']).map((x)=>{ dataSources.value = [...dataSources.value, ...res.data.paragraph.flatMap(n => [n, '']).map((x) => {
return { return {
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: x, text: x,
inversion: Boolean(x), inversion: Boolean(x),
error: false, error: false,
} }
})] })]
isFile.value=true isFile.value = true
fileList1.value=[] fileList1.value = []
visible1.value=false visible1.value = false
sendDataStream() sendDataStream()
} }
} }
const customRequest=async (file)=>{ const customRequest = async (file) => {
const res=await uploadImg({file:file.file,source:'approval'}) const res = await uploadImg({
if (res.code===0){ file: file.file,
file.onSuccess() source: 'approval'
fileList.value.push({ })
url:res.data.ori_url if (res.code === 0) {
}) file.onSuccess()
} fileList.value.push({
url: res.data.ori_url
})
}
} }
</script> </script>
<template> <template>
<div class="flex flex-col w-full h-full"> <div class="flex flex-col w-full h-full">
<HeaderComponent <HeaderComponent
v-if="isMobile" v-if="isMobile"
:using-context="usingContext" :using-context="usingContext"
@export="handleExport" @export="handleExport"
@handle-clear="handleClear" @handle-clear="handleClear"
/> />
<main class="flex-1 overflow-hidden"> <main class="flex-1 overflow-hidden">
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" > <div class="shortcut-arrow">
<div <div class="top">
id="image-wrapper" <n-button @click="scrollToBottom" type="primary" dashed circle>
class="w-full max-w-screen-xl m-auto dark:bg-[#101014]" <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"
d="M244 400L100 256l144-144"
></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="M120 256h292"
></path>
</svg>
</template>
</n-button>
</div>
</div>
:class="[isMobile ? 'p-2' : 'p-4']"
> <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
<template v-if="!dataSources.length"> <div
<div class="flex items-center justify-center mt-4 text-center text-neutral-300"> id="image-wrapper"
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" /> class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
<span>当前没有会话哦</span>
</div> :class="[isMobile ? 'p-2' : 'p-4']"
</template> >
<template v-else> <template v-if="!dataSources.length">
<div> <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
<Message <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl"/>
v-for="(item, index) of dataSources.filter(x=>x.text||x.fileList?.length>0)" <span>当前没有会话哦</span>
:key="index" </div>
:date-time="item.dateTime" </template>
:text="item.text" <template v-else>
:fileList="item.fileList" <div>
:inversion="item.inversion" <Message
:error="item.error" v-for="(item, index) of dataSources"
:loading="item.loading" :key="index"
@delete="handleDelete(index)" :date-time="item.dateTime"
/> :text="item.text"
<div class="sticky bottom-0 left-0 flex justify-center"> :fileList="item.fileList"
<NButton v-if="loading" type="warning" @click="handleStop"> :inversion="item.inversion"
<template #icon> :error="item.error"
<SvgIcon icon="ri:stop-circle-line" /> :loading="item.loading"
</template> @delete="handleDelete(index)"
停止响应 />
</NButton> <div class="sticky bottom-0 left-0 flex justify-center">
</div> <NButton v-if="loading" type="warning" @click="handleStop(item)">
</div> <template #icon>
</template> <SvgIcon icon="ri:stop-circle-line"/>
</div> </template>
</div> 停止响应
</main> </NButton>
<footer :class="footerClass"> </div>
<div class="w-full max-w-screen-xl m-auto"> </div>
<div class="flex items-center justify-between space-x-2" style="flex-wrap: initial"> </template>
<a-popover :open="visible1" trigger="click"> </div>
<template #content> </div>
<div class="clearfix"> </main>
<a-upload <footer :class="footerClass">
:max-count="1" <div class="w-full max-w-screen-xl m-auto">
v-model:file-list="fileList1" <div class="flex items-center justify-between space-x-2" style="flex-wrap: initial">
name="file" <a-popover :open="visible1" trigger="click">
:customRequest="upItemImage1" <template #content>
> <div class="clearfix">
<a-button> <a-upload
<upload-outlined></upload-outlined> :max-count="1"
上传文件 v-model:file-list="fileList1"
</a-button> name="file"
</a-upload> :customRequest="upItemImage1"
</div> >
</template> <a-button>
<HoverButton @click="visible1=!visible1"> <upload-outlined></upload-outlined>
<span class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center"> 上传文件
<SvgIcon icon="ri:upload-2-line" /> </a-button>
</a-upload>
</div>
</template>
<HoverButton @click="visible1=!visible1">
<span class="text-xl text-[#4f555e] dark:text-white"
style="display: flex;justify-content: center;align-items: center"
>
<SvgIcon icon="ri:upload-2-line"/>
</span> </span>
</HoverButton> </HoverButton>
</a-popover> </a-popover>
<a-popover v-if="gptMode==='gpt-4-vision-preview'" :open="visible" trigger="click"> <a-popover v-if="gptMode==='gpt-4-vision-preview'" :open="visible" trigger="click">
<template #content> <template #content>
<div class="clearfix"> <div class="clearfix">
<a-upload <a-upload
:file-list="fileList" :file-list="fileList"
:customRequest="customRequest" :customRequest="customRequest"
list-type="picture-card" list-type="picture-card"
@preview="handlePreview" @preview="handlePreview"
@remove="removeImg" @remove="removeImg"
> >
<div> <div>
<plus-outlined /> <plus-outlined/>
<div style="margin-top: 8px">上传</div> <div style="margin-top: 8px">上传</div>
</div> </div>
</a-upload> </a-upload>
<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel"> <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" /> <img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal> </a-modal>
</div> </div>
</template> </template>
<HoverButton @click="visible=!visible"> <HoverButton @click="visible=!visible">
<span class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center"> <span class="text-xl text-[#4f555e] dark:text-white"
<AreaChartOutlined /> style="display: flex;justify-content: center;align-items: center"
>
<AreaChartOutlined/>
</span> </span>
</HoverButton> </HoverButton>
</a-popover> </a-popover>
<!-- <HoverButton v-if="!isMobile" @click="handleClear"> <!-- <HoverButton v-if="!isMobile" @click="handleClear">
<span class="text-xl text-[#4f555e] dark:text-white">
<SvgIcon icon="ri:delete-bin-line" />
</span>
</HoverButton>-->
<HoverButton v-if="!isMobile" @click="handleExport">
<span class="text-xl text-[#4f555e] dark:text-white"> <span class="text-xl text-[#4f555e] dark:text-white">
<SvgIcon icon="ri:delete-bin-line" /> <SvgIcon icon="ri:download-2-line"/>
</span> </span>
</HoverButton>--> </HoverButton>
<HoverButton v-if="!isMobile" @click="handleExport"> <!-- <HoverButton @click="toggleUsingContext">
<span class="text-xl text-[#4f555e] dark:text-white"> <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
<SvgIcon icon="ri:download-2-line" /> <SvgIcon icon="ri:chat-history-line" />
</span> </span>
</HoverButton> </HoverButton>-->
<!-- <HoverButton @click="toggleUsingContext"> <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }"> <template #default="{ handleInput, handleBlur, handleFocus }">
<SvgIcon icon="ri:chat-history-line" /> <NInput
</span> ref="inputRef"
</HoverButton>--> v-model:value="prompt"
<NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption"> type="textarea"
<template #default="{ handleInput, handleBlur, handleFocus }"> :placeholder="placeholder"
<NInput :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
ref="inputRef" @input="handleInput"
v-model:value="prompt" @focus="handleFocus"
type="textarea" @blur="handleBlur"
:placeholder="placeholder" @keypress="handleEnter"
:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }" />
@input="handleInput" </template>
@focus="handleFocus" </NAutoComplete>
@blur="handleBlur" <NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
@keypress="handleEnter" <template #icon>
/>
</template>
</NAutoComplete>
<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
<template #icon>
<span class="dark:text-black"> <span class="dark:text-black">
<SvgIcon icon="ri:send-plane-fill" /> <SvgIcon icon="ri:send-plane-fill"/>
</span> </span>
</template> </template>
</NButton> </NButton>
</div> </div>
</div> </div>
</footer> </footer>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.shortcut-arrow {
width: min-content;
height: min-content;
position: absolute;
z-index: 10;
left: 50%;
bottom: 90px;
.top {
transform: rotate(270deg) translateX(-50%);
width: min-content;
height: min-content;
}
}
</style>