fix(stage-ui,stage-web,stage-tamagotchi): should not use useI18n in non-setup hook

Author: nekomeowww

apps/stage-tamagotchi/src/renderer/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defineInvoke, defineInvokeHandler } from '@moeru/eventa'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { installChatContextBridge } from '@proj-airi/stage-ui/stores/plugins/chat-context-bridge'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
@@ -22,6 +23,7 @@ const { language, themeColorsHue, themeColorsHueDynamic } = storeToRefs(settings
 const onboardingStore = useOnboardingStore()
 const router = useRouter()
 const route = useRoute()
+const cardStore = useAiriCardStore()
 let disposeChatBridge: (() => void) | undefined
 
 watch(language, () => {
@@ -35,6 +37,7 @@ onMounted(() => updateThemeColor())
 
 // FIXME: store settings to file
 onMounted(async () => {
+  cardStore.initialize()
   onboardingStore.initializeSetupCheck()
 
   await displayModelsStore.loadDisplayModelsFromIndexedDB()

apps/stage-web/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { OnboardingDialog, ToasterRoot } from '@proj-airi/stage-ui/components'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
+import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { installChatContextBridge } from '@proj-airi/stage-ui/stores/plugins/chat-context-bridge'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
@@ -24,6 +25,7 @@ const settings = storeToRefs(settingsStore)
 const onboardingStore = useOnboardingStore()
 const { shouldShowSetup } = storeToRefs(onboardingStore)
 const { isDark } = useTheme()
+const cardStore = useAiriCardStore()
 let disposeChatBridge: (() => void) | undefined
 
 const primaryColor = computed(() => {
@@ -62,6 +64,8 @@ watch(settings.themeColorsHueDynamic, () => {
 
 // Initialize first-time setup check when app mounts
 onMounted(async () => {
+  cardStore.initialize()
+
   onboardingStore.initializeSetupCheck()
   const bridge = installChatContextBridge()
   disposeChatBridge = bridge.dispose

packages/stage-ui/src/stores/modules/airi-card.ts

@@ -54,6 +54,8 @@ export interface AiriCard extends Card {
 }
 
 export const useAiriCardStore = defineStore('airi-card', () => {
+  const { t } = useI18n()
+
   const [cards, resetCards] = createResettableLocalStorage<Map<string, AiriCard>>('airi-cards', new Map())
   const [activeCardId, resetActiveCardId] = createResettableLocalStorage('airi-card-active-id', 'default')
 
@@ -179,24 +181,7 @@ export const useAiriCardStore = defineStore('airi-card', () => {
     }
   }
 
-  // onMounted(() => {
-  //   if (cards.value.has('default'))
-  //     return
-  //   const { t } = useI18n()
-  //   cards.value.set('default', newAiriCard({
-  //     name: 'ReLU',
-  //     version: '1.0.0',
-  //     // description: 'ReLU is a simple and effective activation function that is used in many neural networks.',
-  //     description: SystemPromptV2(
-  //       t('base.prompt.prefix'),
-  //       t('base.prompt.suffix'),
-  //     ).content,
-  //   }))
-  // })
-
-  // Lilia: onMounted initialisation cause default card system prompt initialisation failure
-  function ensureDefaultCard() {
-    const { t } = useI18n()
+  function initialize() {
     if (cards.value.has('default'))
       return
     cards.value.set('default', newAiriCard({
@@ -210,7 +195,6 @@ export const useAiriCardStore = defineStore('airi-card', () => {
     if (!activeCardId.value)
       activeCardId.value = 'default'
   }
-  ensureDefaultCard()
 
   watch(activeCard, (newCard: AiriCard | undefined) => {
     if (!newCard)
@@ -240,6 +224,7 @@ export const useAiriCardStore = defineStore('airi-card', () => {
     removeCard,
     getCard,
     resetState,
+    initialize,
 
     currentModels: computed(() => {
       return {