chore: add wrangler dependency to package.json

app/components/chat/CommandPalette.vue

@@ -15,7 +15,7 @@ const searchTerm = ref('')
 const openMessageModal = ref(false)
 const openClearModal = ref(false)
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 const { messages, submitMessage } = useChat()
 const { clearMessages, messages: storeMessages } = useChatStore()
 
@@ -72,7 +72,7 @@ const toolTipContent = {
   align: 'center',
   side: 'top',
   sideOffset: 0,
-}
+} as any
 
 const router = useRouter()
 function goHome() {
@@ -134,7 +134,7 @@ function isRoute(name: string): boolean {
                   <div class="absolute inset-0 -m-1" />
                   <div class="flex items-center gap-2.5">
                     <UIcon :name="item.icon!" size="20" />
-                    <span>{{ t(item.label) }}</span>
+                    <span>{{ t(item.label || '') }}</span>
                   </div>
                   <div class="text-dimmed text-xs font-medium text-start">
                     {{ t(item.prompt) }}

app/components/chat/Loading.vue

@@ -5,7 +5,7 @@ import { ChatState } from '~~/types'
 const props = defineProps<{ messageId: number, fetchStates: ChatFetchState[] }>()
 const currentState = ref<ChatFetchState | undefined>(props.fetchStates[0] ?? undefined)
 const { setLoadingState } = useChatStore()
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 
 onMounted(() => {
   let index = 0

app/components/chat/Main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t } = useI18n({ useScope: 'global' })
 </script>
 
 <template>

app/components/chat/MessageContainer.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const isArthur = computed(() => props.message.sender === ChatSender.ARTHUR)
 
-const { t, locale } = useI18n()
+const { t, locale } = useI18n({ useScope: 'global' })
 const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
 </script>
 

app/components/chat/MessageFromArthur.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
   message: ChatMessage
 }>()
 
-const { locale, t } = useI18n()
+const { locale, t } = useI18n({ useScope: 'global' })
 const formatDate = computed(() => useDateFormat(props.message.createdAt, 'D MMMM YYYY, HH:mm', { locales: locale.value ?? 'en' }).value)
 
 const componentMap: Record<ChatType, Component | undefined> = {
@@ -66,9 +66,19 @@ const dynamicComponent = computed(() => componentMap[props.message.type])
       </UCard>
       <UCard
         v-else
+        v-motion
         variant="soft"
         class="mt-1 w-full max-w-none bg-transparent"
         :ui="{ body: 'p-0 sm:p-0', header: 'p-0 sm:p-0', footer: 'p-0 sm:p-0' }"
+        :initial="{
+          opacity: 0,
+          y: 20,
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: { ease: 'easeInOut', duration: 300, delay: 500 },
+        }"
       >
         <component
           :is="dynamicComponent"