api proxy
This commit is contained in:
Rafi
@@ -25,8 +25,6 @@ const processMessageQueue = () => {
|
||||
}
|
||||
isProcessingQueue = true
|
||||
const nextMessage = messageQueue.shift()
|
||||
console.log(runtimeConfig.public.typewriter)
|
||||
// console.log(process.env.NUXT_PUBLIC_TYPEWRITER)
|
||||
if (runtimeConfig.public.typewriter) {
|
||||
let wordIndex = 0;
|
||||
const intervalId = setInterval(() => {
|
||||
@@ -111,7 +109,7 @@ const fetchReply = async (message) => {
|
||||
if (event === 'done') {
|
||||
abortFetch()
|
||||
props.conversation.messages[props.conversation.messages.length - 1].id = data.messageId
|
||||
if (!props.conversation.topic || props.conversation.topic === '') {
|
||||
if (!props.conversation.id) {
|
||||
props.conversation.id = data.conversationId
|
||||
genTitle(props.conversation.id)
|
||||
}
|
||||
@@ -139,12 +137,6 @@ const scrollChatWindow = () => {
|
||||
grab.value.scrollIntoView({behavior: 'smooth'})
|
||||
}
|
||||
|
||||
const checkOrAddConversation = () => {
|
||||
if (props.conversation.messages.length === 0) {
|
||||
props.conversation.messages.push({id: null, is_bot: true, message: ''})
|
||||
}
|
||||
}
|
||||
|
||||
const send = (message) => {
|
||||
fetchingResponse.value = true
|
||||
if (props.conversation.messages.length === 0) {
|
||||
|
||||
338
components/NavigationDrawer.vue
Normal file
338
components/NavigationDrawer.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<script setup>
|
||||
import { useDisplay } from 'vuetify'
|
||||
import {useDrawer} from "../composables/states";
|
||||
|
||||
const route = useRoute()
|
||||
const { $i18n } = useNuxtApp()
|
||||
const colorMode = useColorMode()
|
||||
const {mdAndUp} = useDisplay()
|
||||
const drawerPermanent = computed(() => {
|
||||
return mdAndUp.value
|
||||
})
|
||||
const user = useUser()
|
||||
|
||||
const themes = ref([
|
||||
{ title: $i18n.t('lightMode'), value: 'light' },
|
||||
{ title: $i18n.t('darkMode'), value: 'dark' },
|
||||
{ title: $i18n.t('followSystem'), value: 'system'}
|
||||
])
|
||||
const setTheme = (theme) => {
|
||||
colorMode.preference = theme
|
||||
}
|
||||
const feedback = () => {
|
||||
window.open('https://github.com/WongSaang/chatgpt-ui/issues', '_blank')
|
||||
}
|
||||
|
||||
const { locale, locales, setLocale } = useI18n()
|
||||
const setLang = (lang) => {
|
||||
setLocale(lang)
|
||||
}
|
||||
|
||||
const conversations = useConversations()
|
||||
|
||||
const editingConversation = ref(null)
|
||||
const deletingConversationIndex = ref(null)
|
||||
|
||||
const editConversation = (index) => {
|
||||
editingConversation.value = conversations.value[index]
|
||||
}
|
||||
|
||||
const updateConversation = async (index) => {
|
||||
editingConversation.value.updating = true
|
||||
const { data, error } = await useAuthFetch(`/api/chat/conversations/${editingConversation.value.id}/`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({
|
||||
topic: editingConversation.value.topic
|
||||
})
|
||||
})
|
||||
if (!error.value) {
|
||||
conversations.value[index] = editingConversation.value
|
||||
}
|
||||
editingConversation.value = null
|
||||
}
|
||||
|
||||
const deleteConversation = async (index) => {
|
||||
deletingConversationIndex.value = index
|
||||
const { data, error } = await useAuthFetch(`/api/chat/conversations/${conversations.value[index].id}/`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
deletingConversationIndex.value = null
|
||||
if (!error.value) {
|
||||
const deletingConversation = conversations.value[index]
|
||||
conversations.value.splice(index, 1)
|
||||
if (route.params.id && parseInt(route.params.id) === deletingConversation.id) {
|
||||
await navigateTo('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clearConversations = async () => {
|
||||
deletingConversations.value = true
|
||||
const { data, error } = await useAuthFetch(`/api/chat/conversations/delete_all`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
if (!error.value) {
|
||||
loadConversations()
|
||||
clearConfirmDialog.value = false
|
||||
}
|
||||
deletingConversations.value = false
|
||||
}
|
||||
|
||||
const clearConfirmDialog = ref(false)
|
||||
const deletingConversations = ref(false)
|
||||
const loadingConversations = ref(false)
|
||||
|
||||
const loadConversations = async () => {
|
||||
loadingConversations.value = true
|
||||
conversations.value = await getConversations()
|
||||
loadingConversations.value = false
|
||||
}
|
||||
|
||||
const settings = useSettings()
|
||||
const showApiKeySetting = ref(false)
|
||||
watchEffect(() => {
|
||||
if (settings.value) {
|
||||
const settingsValue = toRaw(settings.value)
|
||||
showApiKeySetting.value = settingsValue.open_api_key_setting && settingsValue.open_api_key_setting === 'True'
|
||||
}
|
||||
})
|
||||
|
||||
const signOut = async () => {
|
||||
const { data, error } = await useFetch('/api/account/logout/', {
|
||||
method: 'POST'
|
||||
})
|
||||
if (!error.value) {
|
||||
await logout()
|
||||
}
|
||||
}
|
||||
|
||||
onNuxtReady(async () => {
|
||||
loadConversations()
|
||||
})
|
||||
|
||||
const drawer = useDrawer()
|
||||
|
||||
</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-list-item
|
||||
rounded="xl"
|
||||
active-color="primary"
|
||||
:to="conversation.id ? `/${conversation.id}` : '/'"
|
||||
v-bind="props"
|
||||
>
|
||||
<v-list-item-title>{{ (conversation.topic && conversation.topic !== '') ? conversation.topic : $t('defaultConversationTitle') }}</v-list-item-title>
|
||||
<template v-slot:append>
|
||||
<div
|
||||
v-show="isHovering && conversation.id"
|
||||
>
|
||||
<v-btn
|
||||
icon="edit"
|
||||
size="small"
|
||||
variant="text"
|
||||
@click.prevent="editConversation(cIdx)"
|
||||
>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon="delete"
|
||||
size="small"
|
||||
variant="text"
|
||||
:loading="deletingConversationIndex === cIdx"
|
||||
@click.prevent="deleteConversation(cIdx)"
|
||||
>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-hover>
|
||||
</template>
|
||||
</v-list>
|
||||
</div>
|
||||
|
||||
<template v-slot:append>
|
||||
<div class="px-1">
|
||||
<v-divider></v-divider>
|
||||
<v-list>
|
||||
|
||||
<v-dialog
|
||||
v-model="clearConfirmDialog"
|
||||
persistent
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
rounded="xl"
|
||||
prepend-icon="delete_forever"
|
||||
:title="$t('clearConversations')"
|
||||
></v-list-item>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title class="text-h5">
|
||||
Are you sure you want to delete all conversations?
|
||||
</v-card-title>
|
||||
<v-card-text>This will be a permanent deletion and cannot be retrieved once deleted. Please proceed with caution.</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="green-darken-1"
|
||||
variant="text"
|
||||
@click="clearConfirmDialog = false"
|
||||
class="text-none"
|
||||
>
|
||||
Cancel deletion
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="green-darken-1"
|
||||
variant="text"
|
||||
@click="clearConversations"
|
||||
class="text-none"
|
||||
:loading="deletingConversations"
|
||||
>
|
||||
Confirm deletion
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<ApiKeyDialog
|
||||
v-if="showApiKeySetting"
|
||||
/>
|
||||
|
||||
<ModelParameters/>
|
||||
|
||||
<v-menu
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
rounded="xl"
|
||||
:prepend-icon="$colorMode.value === 'light' ? 'light_mode' : 'dark_mode'"
|
||||
:title="$t('themeMode')"
|
||||
></v-list-item>
|
||||
</template>
|
||||
<v-list
|
||||
bg-color="white"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(theme, idx) in themes"
|
||||
:key="idx"
|
||||
@click="setTheme(theme.value)"
|
||||
>
|
||||
<v-list-item-title>{{ theme.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<SettingsLanguages/>
|
||||
|
||||
<v-list-item
|
||||
rounded="xl"
|
||||
prepend-icon="help_outline"
|
||||
:title="$t('feedback')"
|
||||
@click="feedback"
|
||||
></v-list-item>
|
||||
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.v-navigation-drawer__content::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
.v-navigation-drawer__content:hover::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.v-navigation-drawer__content:hover::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user