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

2
.env
View File

@ -1,7 +1,7 @@
# Glob API URL
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#正式
http://114.218.158.24:9020#测试
# Whether long replies are supported, which may result in higher API fees

View File

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

View File

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

View File

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

View File

@ -1,36 +1,55 @@
<script setup >
<script setup>
import {uploadFormData, uploadImg} from "@/api/api";
import {Local} from "@/utils/storage/storage";
import dayjs from "dayjs";
import { computed, onMounted, onUnmounted, ref,watch } from 'vue'
import { useRoute } from 'vue-router'
import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui'
import { AreaChartOutlined ,PlusOutlined } from '@ant-design/icons-vue';
import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop} from 'naive-ui'
import {AreaChartOutlined, PlusOutlined} from '@ant-design/icons-vue';
import html2canvas from 'html2canvas'
import { Message } from './components'
import { useScroll } from './hooks/useScroll'
import { useChat } from './hooks/useChat'
import { useUsingContext } from './hooks/useUsingContext'
import {Message} from './components'
import {useScroll} from './hooks/useScroll'
import {useChat} from './hooks/useChat'
import {useUsingContext} from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { useChatStore, usePromptStore } from '@/store'
import { fetchChatAPIProcess } from '@/api'
import { t } from '@/locales'
import { UploadOutlined } from '@ant-design/icons-vue';
import {HoverButton, SvgIcon} from '@/components/common'
import {useBasicLayout} from '@/hooks/useBasicLayout'
import {useChatStore, usePromptStore} from '@/store'
import {fetchChatAPIProcess} from '@/api'
import {t} from '@/locales'
import {UploadOutlined} from '@ant-design/icons-vue';
import {storeToRefs} from 'pinia'
import { sessionDetailForSetup } from '@/store'
const sessionDetailData=sessionDetailForSetup()
import {sessionDetailForSetup} from '@/store'
const sessionDetailData = sessionDetailForSetup()
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 ms = useMessage()
const chatStore = useChatStore()
const { isMobile } = useBasicLayout()
const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
const { usingContext, toggleUsingContext } = useUsingContext()
const {isMobile} = useBasicLayout()
const {
addChat,
updateChat,
updateChatSome,
getChatByUuidAndIndex
} = useChat()
const {
scrollRef,
scrollToBottom,
scrollToBottomIfAtBottom
} = useScroll()
const {
usingContext,
toggleUsingContext
} = useUsingContext()
const prompt = ref('')
const loading = ref(false)
const inputRef = ref(null)
@ -39,35 +58,44 @@ const inputRef = ref(null)
const promptStore = usePromptStore()
// 使storeToRefsstore
const { promptList: promptTemplate } = storeToRefs(promptStore)
const {promptList: promptTemplate} = storeToRefs(promptStore)
// loading
dataSources.value.forEach((item, index) => {
if (item.loading)
updateChatSome(+uuid, index, { loading: false })
if (item.loading) {
updateChatSome(+uuid, index, {loading: false})
}
})
function handleSubmit() {
dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: prompt.value,
inversion: true,
error: false,
fileList:fileList.value.map(x=>x.url),
loading:false
fileList: fileList.value.map(x => x.url),
loading: false
})
sendDataStream()
}
const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
const createParams = () => {
const messages = dataSources.value.map((x) => {
return {
content:(()=>{
if (gptMode.value==='gpt-4-vision-preview'){
return [{type: "text", text: x.text},...x.fileList.map((y)=>{
return {type: "image_url", image_url:y}
content: (() => {
if (gptMode.value === 'gpt-4-vision-preview') {
return [{
type: "text",
text: x.text
}, ...x.fileList.map((y) => {
return {
type: "image_url",
image_url: y
}
})]
}else {
} else {
return x.text
}
})(),
@ -75,7 +103,7 @@ const createParams = () => {
}
});
return {
type:isFile.value?'custom':'',
type: isFile.value ? 'custom' : '',
listUuid: currentListUuid.value,
messages,
frequency_penalty: 0,
@ -88,49 +116,51 @@ const createParams = () => {
};
};
const handleResponseStream = async (reader) => {
const { done, value } = await reader.read();
const {
done,
value
} = await reader.read();
if (!done) {
let decoded = new TextDecoder().decode(value);
let decodedArray = decoded.split("data: ");
decodedArray.forEach((decoded) => {
for (const decoded of decodedArray) {
if (decoded !== "") {
if (decoded.trim() === "[DONE]") {
dataSources.value[dataSources.value.length - 1].loading=false
loading.value=false
return;
dataSources.value[dataSources.value.length - 1].loading = false
loading.value = false
} else {
if (isStop.value){
loading.value=false
if (isStop.value) {
dataSources.value[dataSources.value.length - 1].loading = false
loading.value = false
return;
}
loading.value=true
dataSources.value[dataSources.value.length - 1].loading=true
loading.value = true
dataSources.value[dataSources.value.length - 1].loading = true
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);
}
};
const sendDataStream = async () => {
const params = createParams();
fileList.value=[]
prompt.value=''
isStop.value=false
fileList.value = []
prompt.value = ''
isStop.value = false
dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: '思考中..',
inversion: false,
error: false,
loading:true
loading: true
});
visible.value=false
visible.value = false
try {
loading.value=true
loading.value = true
const response = await fetch(API_URL, {
method: "POST",
timeout: 10000,
@ -145,16 +175,18 @@ const sendDataStream = async () => {
const contentType = response.headers.get('Content-Type');
if (!contentType || !contentType.includes('application/json')) {
const reader = response.body.getReader();
dataSources.value[dataSources.value.length-1].text=''
dataSources.value[dataSources.value.length - 1].text = ''
await handleResponseStream(reader);
}
} catch (error) {
console.error('发生错误:', error);
}
};
function handleExport() {
if (loading.value)
if (loading.value) {
return
}
const d = dialog.warning({
title: t('chat.exportImage'),
@ -173,8 +205,9 @@ function handleExport() {
tempLink.style.display = 'none'
tempLink.href = imgUrl
tempLink.setAttribute('download', 'chat-shot.png')
if (typeof tempLink.download === 'undefined')
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
@ -183,11 +216,9 @@ function handleExport() {
d.loading = false
ms.success(t('chat.exportSuccess'))
Promise.resolve()
}
catch (error) {
} catch (error) {
ms.error(t('chat.exportFailed'))
}
finally {
} finally {
d.loading = false
}
},
@ -195,8 +226,9 @@ function handleExport() {
}
function handleDelete(index) {
if (loading.value)
if (loading.value) {
return
}
dialog.warning({
title: t('chat.deleteMessage'),
@ -210,8 +242,9 @@ function handleDelete(index) {
}
function handleClear() {
if (loading.value)
if (loading.value) {
return
}
dialog.warning({
title: t('chat.clearChat'),
@ -230,18 +263,18 @@ function handleEnter(event) {
event.preventDefault()
handleSubmit()
}
}
else {
} else {
if (event.key === 'Enter' && event.ctrlKey) {
event.preventDefault()
handleSubmit()
}
}
}
function handleStop() {
function handleStop(item) {
if (loading.value) {
loading.value = false
isStop.value=true
isStop.value = true
}
}
@ -256,8 +289,7 @@ const searchOptions = computed(() => {
value: obj.value,
}
})
}
else {
} else {
return []
}
})
@ -265,15 +297,17 @@ const searchOptions = computed(() => {
// valuekey
const renderOption = (option) => {
for (const i of promptTemplate.value) {
if (i.value === option.label)
if (i.value === option.label) {
return [i.key]
}
}
return []
}
const placeholder = computed(() => {
if (isMobile.value)
if (isMobile.value) {
return t('chat.placeholderMobile')
}
return t('chat.placeholder')
})
@ -283,23 +317,26 @@ const buttonDisabled = computed(() => {
const footerClass = computed(() => {
let classes = ['p-4']
if (isMobile.value)
if (isMobile.value) {
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
}
return classes
})
onMounted(() => {
scrollToBottom()
if (inputRef.value && !isMobile.value)
if (inputRef.value && !isMobile.value) {
inputRef.value?.focus()
}
})
const fileList = ref([
]);
const fileList = ref([]);
onUnmounted(() => {
if (loading.value)
if (loading.value) {
controller.abort()
}
})
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
@ -308,6 +345,7 @@ function getBase64(file) {
reader.onerror = error => reject(error);
});
}
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
@ -324,25 +362,25 @@ const handlePreview = async (file) => {
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
const value = ref('gpt-3.5-turbo');
const visible=ref(false)
const removeImg=(data)=>{
fileList.value.splice(fileList.value.findIndex(x=>x.url===data.url),1)
const visible = ref(false)
const removeImg = (data) => {
fileList.value.splice(fileList.value.findIndex(x => x.url === data.url), 1)
}
watch(gptMode,()=>{
currentListUuid.value=''
dataSources.value=[]
watch(gptMode, () => {
currentListUuid.value = ''
dataSources.value = []
})
const visible1=ref(false)
const fileList1=ref([])
const isFile=ref(false)
const upItemImage1= async (file)=>{
const visible1 = ref(false)
const fileList1 = ref([])
const isFile = ref(false)
const upItemImage1 = async (file) => {
const data = {
file: file.file,
}
const res=await uploadFormData(data)
if (res.code===0){
const res = await uploadFormData(data)
if (res.code === 0) {
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 {
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: x,
@ -350,19 +388,22 @@ if (res.code===0){
error: false,
}
})]
isFile.value=true
fileList1.value=[]
visible1.value=false
isFile.value = true
fileList1.value = []
visible1.value = false
sendDataStream()
}
}
}
const customRequest=async (file)=>{
const res=await uploadImg({file:file.file,source:'approval'})
if (res.code===0){
const customRequest = async (file) => {
const res = await uploadImg({
file: file.file,
source: 'approval'
})
if (res.code === 0) {
file.onSuccess()
fileList.value.push({
url:res.data.ori_url
url: res.data.ori_url
})
}
}
@ -376,7 +417,25 @@ const customRequest=async (file)=>{
@handle-clear="handleClear"
/>
<main class="flex-1 overflow-hidden">
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" >
<div class="shortcut-arrow">
<div class="top">
<n-button @click="scrollToBottom" 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"
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>
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
<div
id="image-wrapper"
class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
@ -385,14 +444,14 @@ const customRequest=async (file)=>{
>
<template v-if="!dataSources.length">
<div class="flex items-center justify-center mt-4 text-center text-neutral-300">
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl"/>
<span>当前没有会话哦</span>
</div>
</template>
<template v-else>
<div>
<Message
v-for="(item, index) of dataSources.filter(x=>x.text||x.fileList?.length>0)"
v-for="(item, index) of dataSources"
:key="index"
:date-time="item.dateTime"
:text="item.text"
@ -403,9 +462,9 @@ 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">
<NButton v-if="loading" type="warning" @click="handleStop(item)">
<template #icon>
<SvgIcon icon="ri:stop-circle-line" />
<SvgIcon icon="ri:stop-circle-line"/>
</template>
停止响应
</NButton>
@ -435,8 +494,10 @@ const customRequest=async (file)=>{
</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 class="text-xl text-[#4f555e] dark:text-white"
style="display: flex;justify-content: center;align-items: center"
>
<SvgIcon icon="ri:upload-2-line"/>
</span>
</HoverButton>
</a-popover>
@ -451,32 +512,34 @@ const customRequest=async (file)=>{
@remove="removeImg"
>
<div>
<plus-outlined />
<plus-outlined/>
<div style="margin-top: 8px">上传</div>
</div>
</a-upload>
<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>
</div>
</template>
<HoverButton @click="visible=!visible">
<span class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center">
<AreaChartOutlined />
<span class="text-xl text-[#4f555e] dark:text-white"
style="display: flex;justify-content: center;align-items: center"
>
<AreaChartOutlined/>
</span>
</HoverButton>
</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">
<SvgIcon icon="ri:download-2-line" />
<SvgIcon icon="ri:download-2-line"/>
</span>
</HoverButton>
<!-- <HoverButton @click="toggleUsingContext">
<!-- <HoverButton @click="toggleUsingContext">
<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
<SvgIcon icon="ri:chat-history-line" />
</span>
@ -499,7 +562,7 @@ const customRequest=async (file)=>{
<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
<template #icon>
<span class="dark:text-black">
<SvgIcon icon="ri:send-plane-fill" />
<SvgIcon icon="ri:send-plane-fill"/>
</span>
</template>
</NButton>
@ -508,3 +571,19 @@ const customRequest=async (file)=>{
</footer>
</div>
</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>