Update the layout to accommodate mobile
This commit is contained in:
Rafi
170
app.vue
170
app.vue
@@ -1,114 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { fetchEventSource } from '@microsoft/fetch-event-source'
|
|
||||||
|
|
||||||
const runtimeConfig = useRuntimeConfig()
|
const runtimeConfig = useRuntimeConfig()
|
||||||
const currentModel = useCurrentModel()
|
|
||||||
const openaiApiKey = useApiKey()
|
|
||||||
const fetchingResponse = ref(false)
|
|
||||||
const fetchReply = async (message, parentMessageId) => {
|
|
||||||
const ctrl = new AbortController()
|
|
||||||
try {
|
|
||||||
await fetchEventSource('/api/conversation', {
|
|
||||||
signal: ctrl.signal,
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
model: currentModel.value,
|
|
||||||
openaiApiKey: openaiApiKey.value,
|
|
||||||
message: message,
|
|
||||||
parentMessageId: parentMessageId,
|
|
||||||
conversationId: currentConversation.value.id
|
|
||||||
}),
|
|
||||||
onopen(response) {
|
|
||||||
if (response.status === 200) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
|
|
||||||
},
|
|
||||||
onclose() {
|
|
||||||
throw new Error(`Failed to send message. Server closed the connection unexpectedly.`);
|
|
||||||
},
|
|
||||||
onerror(err) {
|
|
||||||
throw err;
|
|
||||||
},
|
|
||||||
onmessage(message) {
|
|
||||||
if (message.event === 'error') {
|
|
||||||
throw new Error(JSON.parse(message.data).error);
|
|
||||||
}
|
|
||||||
const { type, data } = JSON.parse(message.data);
|
|
||||||
if (type === 'done') {
|
|
||||||
if (currentConversation.value.id === null) {
|
|
||||||
currentConversation.value.id = data.conversationId
|
|
||||||
}
|
|
||||||
currentConversation.value.messages[currentConversation.value.messages.length - 1].id = data.messageId
|
|
||||||
ctrl.abort();
|
|
||||||
fetchingResponse.value = false
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
|
|
||||||
currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
|
|
||||||
} else {
|
|
||||||
currentConversation.value.messages.push({id: null, from: 'ai', message: data})
|
|
||||||
}
|
|
||||||
scrollChatWindow()
|
|
||||||
},
|
|
||||||
})
|
|
||||||
} catch (err) {
|
|
||||||
ctrl.abort()
|
|
||||||
showSnackbar(err.message)
|
|
||||||
fetchingResponse.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const theme = ref('light')
|
const theme = ref('light')
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
theme.value = theme.value === 'light' ? 'dark' : 'light'
|
theme.value = theme.value === 'light' ? 'dark' : 'light'
|
||||||
}
|
}
|
||||||
|
const drawer = ref(false)
|
||||||
const defaultConversation = ref({
|
const showAppBar = computed(() => {
|
||||||
id: null,
|
return !drawer.value
|
||||||
messages: []
|
|
||||||
})
|
|
||||||
const currentConversation = ref({})
|
|
||||||
|
|
||||||
const grab = ref(null)
|
|
||||||
const scrollChatWindow = () => {
|
|
||||||
grab.value.scrollIntoView({behavior: 'smooth'})
|
|
||||||
}
|
|
||||||
|
|
||||||
const createNewConversation = () => {
|
|
||||||
currentConversation.value = Object.assign(defaultConversation.value, {
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const send = (message) => {
|
|
||||||
fetchingResponse.value = true
|
|
||||||
let parentMessageId = null
|
|
||||||
if (currentConversation.value.messages.length > 0) {
|
|
||||||
const lastMessage = currentConversation.value.messages[currentConversation.value.messages.length - 1]
|
|
||||||
if (lastMessage.from === 'ai' && lastMessage.id !== null) {
|
|
||||||
parentMessageId = lastMessage.id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
currentConversation.value.messages.push({from: 'me', parentMessageId: parentMessageId, message: message})
|
|
||||||
fetchReply(message, parentMessageId)
|
|
||||||
scrollChatWindow()
|
|
||||||
}
|
|
||||||
const stop = () => {
|
|
||||||
ctrl.abort();
|
|
||||||
fetchingResponse.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const snackbar = ref(false)
|
|
||||||
const snackbarText = ref('')
|
|
||||||
const showSnackbar = (text) => {
|
|
||||||
snackbarText.value = text
|
|
||||||
snackbar.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
onNuxtReady(() => {
|
|
||||||
createNewConversation()
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -117,7 +15,7 @@ onNuxtReady(() => {
|
|||||||
:theme="theme"
|
:theme="theme"
|
||||||
>
|
>
|
||||||
<v-navigation-drawer
|
<v-navigation-drawer
|
||||||
permanent
|
v-model="drawer"
|
||||||
>
|
>
|
||||||
<v-list>
|
<v-list>
|
||||||
<ModelDialog/>
|
<ModelDialog/>
|
||||||
@@ -137,59 +35,17 @@ onNuxtReady(() => {
|
|||||||
</v-list>
|
</v-list>
|
||||||
</template>
|
</template>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
<v-main>
|
|
||||||
<div ref="chatWindow">
|
|
||||||
<v-card
|
|
||||||
rounded="0"
|
|
||||||
elevation="0"
|
|
||||||
v-for="(conversation, index) in currentConversation.messages"
|
|
||||||
:key="index"
|
|
||||||
:variant="conversation.from === 'ai' ? 'tonal' : ''"
|
|
||||||
>
|
|
||||||
<v-container>
|
|
||||||
<v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>
|
|
||||||
<v-card-text>
|
|
||||||
<MsgContent :content="conversation.message" />
|
|
||||||
</v-card-text>
|
|
||||||
</v-container>
|
|
||||||
<v-divider></v-divider>
|
|
||||||
</v-card>
|
|
||||||
<div ref="grab" class="w-100" style="height: 150px;"></div>
|
|
||||||
</div>
|
|
||||||
<v-container>
|
|
||||||
</v-container>
|
|
||||||
</v-main>
|
|
||||||
<v-footer app class="d-flex flex-column">
|
|
||||||
<div class="px-16 w-100 d-flex align-center">
|
|
||||||
<v-btn
|
|
||||||
v-show="fetchingResponse"
|
|
||||||
icon="close"
|
|
||||||
title="stop"
|
|
||||||
class="mr-3"
|
|
||||||
@click="stop"
|
|
||||||
></v-btn>
|
|
||||||
<MsgEditor :send-message="send" :disabled="fetchingResponse" :loading="fetchingResponse" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
|
<v-app-bar
|
||||||
{{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
|
class="d-lg-none"
|
||||||
</div>
|
|
||||||
</v-footer>
|
|
||||||
<v-snackbar
|
|
||||||
v-model="snackbar"
|
|
||||||
multi-line
|
|
||||||
>
|
>
|
||||||
{{ snackbarText }}
|
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
|
|
||||||
<template v-slot:actions>
|
<v-toolbar-title>{{ runtimeConfig.public.appName }}</v-toolbar-title>
|
||||||
<v-btn
|
</v-app-bar>
|
||||||
color="red"
|
|
||||||
variant="text"
|
<v-main>
|
||||||
@click="snackbar = false"
|
<NuxtPage/>
|
||||||
>
|
</v-main>
|
||||||
Close
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
</v-snackbar>
|
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
159
pages/index.vue
Normal file
159
pages/index.vue
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
<script setup>
|
||||||
|
import { fetchEventSource } from '@microsoft/fetch-event-source'
|
||||||
|
|
||||||
|
const runtimeConfig = useRuntimeConfig()
|
||||||
|
const currentModel = useCurrentModel()
|
||||||
|
const openaiApiKey = useApiKey()
|
||||||
|
const fetchingResponse = ref(false)
|
||||||
|
const fetchReply = async (message, parentMessageId) => {
|
||||||
|
const ctrl = new AbortController()
|
||||||
|
try {
|
||||||
|
await fetchEventSource('/api/conversation', {
|
||||||
|
signal: ctrl.signal,
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: currentModel.value,
|
||||||
|
openaiApiKey: openaiApiKey.value,
|
||||||
|
message: message,
|
||||||
|
parentMessageId: parentMessageId,
|
||||||
|
conversationId: currentConversation.value.id
|
||||||
|
}),
|
||||||
|
onopen(response) {
|
||||||
|
if (response.status === 200) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw new Error(`Failed to send message. HTTP ${response.status} - ${response.statusText}`);
|
||||||
|
},
|
||||||
|
onclose() {
|
||||||
|
throw new Error(`Failed to send message. Server closed the connection unexpectedly.`);
|
||||||
|
},
|
||||||
|
onerror(err) {
|
||||||
|
throw err;
|
||||||
|
},
|
||||||
|
onmessage(message) {
|
||||||
|
if (message.event === 'error') {
|
||||||
|
throw new Error(JSON.parse(message.data).error);
|
||||||
|
}
|
||||||
|
const { type, data } = JSON.parse(message.data);
|
||||||
|
if (type === 'done') {
|
||||||
|
if (currentConversation.value.id === null) {
|
||||||
|
currentConversation.value.id = data.conversationId
|
||||||
|
}
|
||||||
|
currentConversation.value.messages[currentConversation.value.messages.length - 1].id = data.messageId
|
||||||
|
ctrl.abort();
|
||||||
|
fetchingResponse.value = false
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (currentConversation.value.messages[currentConversation.value.messages.length - 1].from === 'ai') {
|
||||||
|
currentConversation.value.messages[currentConversation.value.messages.length - 1].message += data
|
||||||
|
} else {
|
||||||
|
currentConversation.value.messages.push({id: null, from: 'ai', message: data})
|
||||||
|
}
|
||||||
|
scrollChatWindow()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
ctrl.abort()
|
||||||
|
showSnackbar(err.message)
|
||||||
|
fetchingResponse.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultConversation = ref({
|
||||||
|
id: null,
|
||||||
|
messages: []
|
||||||
|
})
|
||||||
|
const currentConversation = ref({})
|
||||||
|
|
||||||
|
const grab = ref(null)
|
||||||
|
const scrollChatWindow = () => {
|
||||||
|
grab.value.scrollIntoView({behavior: 'smooth'})
|
||||||
|
}
|
||||||
|
|
||||||
|
const createNewConversation = () => {
|
||||||
|
currentConversation.value = Object.assign(defaultConversation.value, {
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const send = (message) => {
|
||||||
|
fetchingResponse.value = true
|
||||||
|
let parentMessageId = null
|
||||||
|
if (currentConversation.value.messages.length > 0) {
|
||||||
|
const lastMessage = currentConversation.value.messages[currentConversation.value.messages.length - 1]
|
||||||
|
if (lastMessage.from === 'ai' && lastMessage.id !== null) {
|
||||||
|
parentMessageId = lastMessage.id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
currentConversation.value.messages.push({from: 'me', parentMessageId: parentMessageId, message: message})
|
||||||
|
fetchReply(message, parentMessageId)
|
||||||
|
scrollChatWindow()
|
||||||
|
}
|
||||||
|
const stop = () => {
|
||||||
|
ctrl.abort();
|
||||||
|
fetchingResponse.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const snackbar = ref(false)
|
||||||
|
const snackbarText = ref('')
|
||||||
|
const showSnackbar = (text) => {
|
||||||
|
snackbarText.value = text
|
||||||
|
snackbar.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
createNewConversation()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div ref="chatWindow">
|
||||||
|
<v-card
|
||||||
|
rounded="0"
|
||||||
|
elevation="0"
|
||||||
|
v-for="(conversation, index) in currentConversation.messages"
|
||||||
|
:key="index"
|
||||||
|
:variant="conversation.from === 'ai' ? 'tonal' : ''"
|
||||||
|
>
|
||||||
|
<v-container>
|
||||||
|
<v-card-text class="text-caption text-disabled">{{ conversation.from }}</v-card-text>
|
||||||
|
<v-card-text>
|
||||||
|
<MsgContent :content="conversation.message" />
|
||||||
|
</v-card-text>
|
||||||
|
</v-container>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
</v-card>
|
||||||
|
<div ref="grab" class="w-100" style="height: 150px;"></div>
|
||||||
|
</div>
|
||||||
|
<v-footer app class="d-flex flex-column">
|
||||||
|
<div class="px-md-16 w-100 d-flex align-center">
|
||||||
|
<v-btn
|
||||||
|
v-show="fetchingResponse"
|
||||||
|
icon="close"
|
||||||
|
title="stop"
|
||||||
|
class="mr-3"
|
||||||
|
@click="stop"
|
||||||
|
></v-btn>
|
||||||
|
<MsgEditor :send-message="send" :disabled="fetchingResponse" :loading="fetchingResponse" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-4 py-2 text-disabled text-caption font-weight-light text-center w-100">
|
||||||
|
{{ new Date().getFullYear() }} — {{ runtimeConfig.public.appName }}
|
||||||
|
</div>
|
||||||
|
</v-footer>
|
||||||
|
<v-snackbar
|
||||||
|
v-model="snackbar"
|
||||||
|
multi-line
|
||||||
|
>
|
||||||
|
{{ snackbarText }}
|
||||||
|
|
||||||
|
<template v-slot:actions>
|
||||||
|
<v-btn
|
||||||
|
color="red"
|
||||||
|
variant="text"
|
||||||
|
@click="snackbar = false"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-snackbar>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user