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

s

Browse Source
main
Phoenix 8 months ago
parent 19fb7e2bac
commit b7f46d1c22
5 changed files with 498 additions and 430 deletions
Show Stats Download Patch File Download Diff File

2
.env
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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)

155
src/views/chat/index.vue
Unescape Escape View File

@ -4,7 +4,7 @@ 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'
@ -20,17 +20,36 @@ 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)
@ -43,9 +62,11 @@ 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'),
@ -57,6 +78,7 @@ function handleSubmit() {
}) })
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 = () => {
@ -64,8 +86,14 @@ const createParams = () => {
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
}, ...x.fileList.map((y) => {
return {
type: "image_url",
image_url: y
}
})] })]
} else { } else {
return x.text return x.text
@ -88,18 +116,21 @@ const createParams = () => {
}; };
}; };
const handleResponseStream = async (reader) => { const handleResponseStream = async (reader) => {
const { done, value } = await reader.read(); const {
done,
value
} = await reader.read();
if (!done) { if (!done) {
let decoded = new TextDecoder().decode(value); let decoded = new TextDecoder().decode(value);
let decodedArray = decoded.split("data: "); let decodedArray = decoded.split("data: ");
decodedArray.forEach((decoded) => { for (const decoded of decodedArray) {
if (decoded !== "") { if (decoded !== "") {
if (decoded.trim() === "[DONE]") { if (decoded.trim() === "[DONE]") {
dataSources.value[dataSources.value.length - 1].loading = false dataSources.value[dataSources.value.length - 1].loading = false
loading.value = false loading.value = false
return;
} else { } else {
if (isStop.value) { if (isStop.value) {
dataSources.value[dataSources.value.length - 1].loading = false
loading.value = false loading.value = false
return; return;
} }
@ -111,8 +142,7 @@ const handleResponseStream = async (reader) => {
dataSources.value[dataSources.value.length - 1].text += response; dataSources.value[dataSources.value.length - 1].text += response;
} }
} }
}); }
await handleResponseStream(reader); await handleResponseStream(reader);
} }
}; };
@ -152,9 +182,11 @@ const sendDataStream = async () => {
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'),
@ -173,8 +205,9 @@ function handleExport() {
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()
@ -183,11 +216,9 @@ function handleExport() {
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 {
finally {
d.loading = false d.loading = false
} }
}, },
@ -195,8 +226,9 @@ function handleExport() {
} }
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'),
@ -210,8 +242,9 @@ function handleDelete(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'),
@ -230,15 +263,15 @@ function handleEnter(event) {
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() {
function handleStop(item) {
if (loading.value) { if (loading.value) {
loading.value = false loading.value = false
isStop.value = true isStop.value = true
@ -256,8 +289,7 @@ const searchOptions = computed(() => {
value: obj.value, value: obj.value,
} }
}) })
} } else {
else {
return [] return []
} }
}) })
@ -265,15 +297,17 @@ const searchOptions = computed(() => {
// 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')
}) })
@ -283,23 +317,26 @@ const buttonDisabled = computed(() => {
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();
@ -308,6 +345,7 @@ function getBase64(file) {
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('');
@ -358,7 +396,10 @@ if (res.code===0){
} }
const customRequest = async (file) => { const customRequest = async (file) => {
const res=await uploadImg({file:file.file,source:'approval'}) const res = await uploadImg({
file: file.file,
source: 'approval'
})
if (res.code === 0) { if (res.code === 0) {
file.onSuccess() file.onSuccess()
fileList.value.push({ fileList.value.push({
@ -376,6 +417,24 @@ const customRequest=async (file)=>{
@handle-clear="handleClear" @handle-clear="handleClear"
/> />
<main class="flex-1 overflow-hidden"> <main class="flex-1 overflow-hidden">
<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="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
<div <div
id="image-wrapper" id="image-wrapper"
@ -392,7 +451,7 @@ const customRequest=async (file)=>{
<template v-else> <template v-else>
<div> <div>
<Message <Message
v-for="(item, index) of dataSources.filter(x=>x.text||x.fileList?.length>0)" v-for="(item, index) of dataSources"
:key="index" :key="index"
:date-time="item.dateTime" :date-time="item.dateTime"
:text="item.text" :text="item.text"
@ -403,7 +462,7 @@ const customRequest=async (file)=>{
@delete="handleDelete(index)" @delete="handleDelete(index)"
/> />
<div class="sticky bottom-0 left-0 flex justify-center"> <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> <template #icon>
<SvgIcon icon="ri:stop-circle-line"/> <SvgIcon icon="ri:stop-circle-line"/>
</template> </template>
@ -435,7 +494,9 @@ const customRequest=async (file)=>{
</div> </div>
</template> </template>
<HoverButton @click="visible1=!visible1"> <HoverButton @click="visible1=!visible1">
<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"
style="display: flex;justify-content: center;align-items: center"
>
<SvgIcon icon="ri:upload-2-line"/> <SvgIcon icon="ri:upload-2-line"/>
</span> </span>
</HoverButton> </HoverButton>
@ -461,7 +522,9 @@ const customRequest=async (file)=>{
</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"
style="display: flex;justify-content: center;align-items: center"
>
<AreaChartOutlined/> <AreaChartOutlined/>
</span> </span>
</HoverButton> </HoverButton>
@ -508,3 +571,19 @@ const customRequest=async (file)=>{
</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>

Write Preview
Loading…
Cancel
Save