fix(stage-web): prompt error

apps/stage-web/src/components/Layouts/HeaderLink.vue

@@ -19,7 +19,7 @@ const dark = useDark()
     <template v-else>
       <img :src="Logo" h-8 w-8 class="theme-colored">
     </template>
-    <div translate-y="[2px]" font-bold font-quicksand text-stroke-sm style="paint-order: stroke fill;">
+    <div translate-y="[2px]" font-bold font-quicksand>
       <span>AIRI</span>
     </div>
   </RouterLink>

apps/stage-web/src/components/Layouts/InteractiveArea.vue

@@ -150,7 +150,7 @@ onAfterSend(async () => {
         flex="~ row"
         :checked="tab === 'chat'"
         :aria-checked="tab === 'chat'"
-        border="solid 2 primary-50 dark:primary-900"
+        border="solid 2 primary-100 dark:primary-900"
         text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500"
         transition="all duration-250 ease-in-out"
         cursor-pointer items-center gap-1 rounded-lg px-2
@@ -232,53 +232,3 @@ onAfterSend(async () => {
     </div>
   </div>
 </template>
-
-<style lang="css" scoped>
-/**
-  Plunker - Untitled
-  https://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview&preview
-
-  by https://stackoverflow.com/a/31547711/19954520
- */
-.animate-stripe {
-  background-image: repeating-linear-gradient(-45deg, #a16207, #a16207 25px, #eab308 25px, #eab308 50px);
-  background-size: 175% 100%;
-}
-
-.animate-stripe:hover {
-  animation: progress 2s linear infinite;
-}
-
-@-webkit-keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -75px 0px;
-  }
-}
-@-moz-keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -75px 0px;
-  }
-}
-@-ms-keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -75px 0px;
-  }
-}
-@keyframes progress {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: -70px 0px;
-  }
-}
-</style>

apps/stage-web/src/pages/index.vue

@@ -28,8 +28,11 @@ const positionCursor = useMouse()
     >
       <div relative flex="~ col" z-2 h-100dvh w-100vw of-hidden>
         <!-- header -->
-        <div>
-          <Header class="flex" p2 />
+        <div
+          class="px-0 py-1 hidden sm:block md:px-3 md:py-3"
+          w-full gap-2
+        >
+          <Header class="flex" />
         </div>
         <!-- page -->
         <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">

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

@@ -180,13 +180,14 @@ export const useAiriCardStore = defineStore('airi-card', () => {
 
   onMounted(() => {
     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('prompt.prefix'),
-        t('prompt.suffix'),
+        t('base.prompt.prefix'),
+        t('base.prompt.suffix'),
       ).content,
     }))
   })