api proxy

pages/index.vue

@@ -4,8 +4,11 @@ definePageMeta({
   path: '/:id?',
   keepalive: true
 })
+
+const { $i18n } = useNuxtApp()
+const runtimeConfig = useRuntimeConfig()
+const drawer = useDrawer()
 const route = useRoute()
-const currentConversation = useConversation()
 const conversation = ref(getDefaultConversationData())
 
 const loadConversation = async () => {
@@ -22,31 +25,67 @@ const loadMessage = async () => {
   }
 }
 
-const updateCurrentConversation = () => {
-  currentConversation.value = Object.assign({}, conversation.value)
+const createNewConversation = () => {
+  if (route.path !== '/') {
+    return navigateTo('/?new')
+  }
+  conversation.value = Object.assign(getDefaultConversationData(), {
+    topic: $i18n.t('newConversation')
+  })
 }
 
+
 onMounted(async () => {
   if (route.params.id) {
     conversation.value.loadingMessages = true
     await loadConversation()
     await loadMessage()
     conversation.value.loadingMessages = false
-    updateCurrentConversation()
-  } else {
-    watch(currentConversation, (val) => {
-      conversation.value = Object.assign({}, val)
-    })
   }
 })
 
+
+const navTitle = computed(() => {
+  if (conversation.value && conversation.value.topic !== null) {
+    return conversation.value.topic === '' ? $i18n.t('defaultConversationTitle') : conversation.value.topic
+  }
+  return runtimeConfig.public.appName
+})
+
 onActivated(async () => {
-  updateCurrentConversation()
+  if (route.path === '/' && route.query.new !== undefined) {
+    createNewConversation()
+  }
 })
 
 </script>
 
 <template>
-  <Welcome v-if="!route.params.id && conversation.messages.length === 0" />
-  <Conversation :conversation="conversation" />
+  <v-app-bar>
+    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+    <v-toolbar-title>{{ navTitle }}</v-toolbar-title>
+
+    <v-spacer></v-spacer>
+
+    <v-btn
+        :title="$t('newConversation')"
+        icon="add"
+        @click="createNewConversation"
+        class="d-md-none"
+    ></v-btn>
+    <v-btn
+        variant="outlined"
+        class="text-none d-none d-md-block"
+        @click="createNewConversation"
+    >
+      {{ $t('newConversation') }}
+    </v-btn>
+
+  </v-app-bar>
+
+  <v-main>
+    <Welcome v-if="!route.params.id && conversation.messages.length === 0" />
+    <Conversation :conversation="conversation" />
+  </v-main>
 </template>