GPT的会话窗口是一个一个字print,这种方式怎么做到呢?这边用vue写了一个!
<script setup>
import { useDisplay } from 'vuetify'
import {useDrawer} from "../composables/states";
const route = useRoute()
const { $i18n, $settings } = useNuxtApp()
const colorMode = useColorMode()
const {mdAndUp} = useDisplay()
const drawerPermanent = computed(() => {
return mdAndUp.value
})
const user = useUser()
const exportConversation = async (index) => {
let conversation = conversations.value[index]
let data = {}
data.conversation_topic = conversation.topic
data.messages = []
let messages = await loadMessage(conversation.id)
for (let message of messages) {
let msg = {}
msg.role = message.is_bot ? "assistant" : "user"
msg.content = message.message
data.messages.push(msg)
}
let file_content = JSON.stringify(data)
let file_name = `${conversation.topic}_${new Date()}`.replace(/[\/\\:*?"<>]/g, "_")
const element = document.createElement('a');
element.setAttribute(
"href",
"data:text/plain;charset=utf-8," + encodeURIComponent(file_content),
);
element.setAttribute("download", file_name);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
const openImportFileChooser = async () => {
let input_element = document.getElementById("import_conversation_input")
input_element.click()
}
const importConversation = async () => {
let input_element = document.getElementById("import_conversation_input")
let fileHandles = input_element.files
let imports = []
const reader = new FileReader()
for (let handle of fileHandles) {
let content = await new Promise((resolve, reject) => {
reader.readAsText(handle)
reader.onload = () => resolve(reader.result);
reader.onerror = eror => reject(error);
})
let json = JSON.parse(content)
imports.push(json)
}
let new_conversation_ids = []
try {
const { data, error } = await useAuthFetch('/api/upload_conversations/', {
method: 'POST',
headers: {
'accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
imports: imports,
}),
})
if (!error.value) {
new_conversation_ids = data.value
loadConversations()
} else {
console.log(err)
showSnackbar(err.message)
}
} catch (err) {
console.log(err.message)
showSnackbar(err.message)
}
}
</script>
<template>
<v-navigation-drawer
v-model="drawer"
:permanent="drawerPermanent"
width="300"
>
<template
v-slot:prepend
v-if="user"
>
<v-list>
<v-list-item
:title="user.username"
:subtitle="user.email"
>
<template v-slot:prepend>
<v-icon
icon="face"
size="x-large"
></v-icon>
</template>
<template v-slot:append>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
size="small"
variant="text"
icon="expand_more"
></v-btn>
</template>
<v-list>
<v-list-item
:title="$t('resetPassword')"
to="/account/resetPassword"
>
</v-list-item>
<v-list-item
:title="$t('signOut')"
@click="signOut"
>
</v-list-item>
</v-list>
</v-menu>
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>
</template>
<div class="px-2">
<v-list>
<v-list-item v-show="loadingConversations">
<v-list-item-title class="d-flex justify-center">
<v-progress-circular indeterminate></v-progress-circular>
</v-list-item-title>
</v-list-item>
</v-list>
<v-list>
<template
v-for="(conversation, cIdx) in conversations"
:key="conversation.id"
>
<v-list-item
active-color="primary"
rounded="xl"
v-if="editingConversation && editingConversation.id === conversation.id"
>
<v-text-field
v-model="editingConversation.topic"
:loading="editingConversation.updating"
variant="underlined"
append-icon="done"
hide-details
density="compact"
autofocus
@keyup.enter="updateConversation(cIdx)"
@click:append="updateConversation(cIdx)"
></v-text-field>
</v-list-item>
<v-hover
v-if="!editingConversation || editingConversation.id !== conversation.id"
v-slot="{ isHovering, props }"
>
...
<v-snackbar v-model="snackbar" multi-line location="top">
{{ snackbarText }}
<template v-slot:actions>
<v-btn color="red" variant="text" @click="snackbar = false" density="compact" size="default">
Close
</v-btn>
</template>
</v-snackbar>
<input
type="file" id="import_conversation_input" style="display:none"
accept="text/plain, text/json"
multiple
@change="importConversation"
>
</template>
这里提供一个好用的Chatgpt代码和资源,安装即可使用:
http://chat.itopdesign.com/file/ChatGpt.apk