fix(stage): logo for providers, added support for anthropic

apps/stage-tamagotchi-tauri/locales/en.yml

@@ -67,6 +67,8 @@ settings:
     models:
       description: Live2D, VRM, etc.
       title: Models
+    memory:
+      description: Where memories got stored, and organized
     modules:
       consciousness:
         description: Personality, desired model, etc.
@@ -177,6 +179,9 @@ settings:
             title: Voice Settings
       description: LLMs, speech providers, etc.
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: cloudflare.com
           fields:
@@ -248,11 +253,13 @@ settings:
           description: fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: Speech Service region
                 label: Region
+          title: Microsoft / Azure Speech
         mistral:
           description: mistral.ai
           title: Mistral
@@ -271,6 +278,9 @@ settings:
         openrouter:
           description: openrouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: together.ai
           title: Together.ai
@@ -316,30 +326,11 @@ settings:
                 title: Nordic Colors
             title: Theme Presets
       title: Themes
-    shortcuts:
-      title: Shortcuts
-      description: Configure the shortcuts for the stage
-      sections:
-        section:
-          window-controls:
-            title: Window Controls
-            press-keys-hint:
-              label: Press Keys...Or Escape to cancel
-            fields:
-              field:
-                toggle-resize:
-                  label: Toggle Resize
-                toggle-move:
-                  label: Toggle Move
-                toggle-ignore-mouse-event: # TODO: Add this feature
-                  label: Toggle Ignore Mouse Event
-
   sections:
     section:
       general:
         title: General
-  dark-mode: Dark mode
-  stage-transitions: Stage Transitions
+  theme: Theme
   title: Settings
   voices: Voice
 stage:

apps/stage-tamagotchi-tauri/locales/zh-CN.yml

@@ -50,6 +50,9 @@ settings:
   microphone: 麦克风
   models: 模型
   pages:
+    memory:
+      description: 存放记忆的地方，以及策略
+      title: 记忆体
     models:
       description: 切换角色的 Live2D，VRM 模型
       title: 角色模型
@@ -165,6 +168,9 @@ settings:
             title: 声音配置
       description: LLM，语音合成，语音识别提供商等
       provider:
+        anthropic:
+          description: anthropic.com
+          title: Anthropic | Claude
         cloudflare-workers-ai:
           description: Cloudflare.com
           fields:
@@ -234,11 +240,13 @@ settings:
           description: Fireworks.ai
           title: Fireworks.ai
         microsoft-speech:
+          description: speech.microsoft.com
           fields:
             field:
               region:
                 description: 服务 Endpoint 地区（比如亚太 eastasia 区域）
                 label: Endpoint 地区
+          title: Microsoft / Azure 语音服务
         mistral:
           description: mistral.ai
           title: Mistral
@@ -257,6 +265,9 @@ settings:
         openrouter:
           description: OpenRouter.ai
           title: OpenRouter
+        perplexity:
+          description: perplexity.ai
+          title: Perplexity
         together:
           description: 一起
           title: Together.ai
@@ -295,29 +306,11 @@ settings:
                 title: 北欧颜色
             title: 主题预设
       title: 舞台主题
-    shortcuts:
-      title: 快捷键
-      description: 配置舞台快捷键
-      sections:
-        section:
-          window-controls:
-            title: 窗口控制
-            press-keys-hint:
-              label: 按下快捷键...或按下 Esc 取消
-            fields:
-              field:
-                toggle-resize:
-                  label: 切换大小
-                toggle-move:
-                  label: 切换移动
-                toggle-ignore-mouse-event: # TODO: Add this feature
-                  label: 切换鼠标穿透
   sections:
     section:
       general:
         title: 通用
-  dark-mode: 暗黑模式
-  stage-transitions: 动画效果
+  theme: 主题颜色
   title: 设置
   voices: 声线
 stage:

apps/stage-tamagotchi-tauri/src/pages/settings/providers/anthropic.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  ProviderAdvancedSettings,
+  ProviderApiKeyInput,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'anthropic'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+// Use computed properties for settings
+const apiKey = computed({
+  get: () => providers.value[providerId]?.apiKey || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].apiKey = value
+  },
+})
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  // Initialize provider if it doesn't exist
+  if (!providers.value[providerId]) {
+    providers.value[providerId] = {
+      baseUrl: 'https://api.anthropic.com/v1/',
+    }
+  }
+
+  // Initialize refs with current values
+  apiKey.value = providers.value[providerId]?.apiKey || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/'
+})
+
+// Watch settings and update the provider configuration
+watch([apiKey, baseUrl], () => {
+  providers.value[providerId] = {
+    ...providers.value[providerId],
+    apiKey: apiKey.value,
+    baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/',
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    baseUrl: 'https://api.anthropic.com/v1/',
+  }
+}
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName || 'Anthropic | Claude'"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <div bg="orange-50 dark:orange-900/20" rounded-xl p-4 flex="~ col gap-3">
+      <h2 text-xl font-bold text="orange-700 dark:orange-500">
+        Before you start
+      </h2>
+      <p>
+        While Anthropic recently did announce that they are having a beta support for
+        OpenAI SDK compatibility <a underline href="https://docs.anthropic.com/en/api/openai-sdk">(you can read more here)</a>,
+        but due to the implementation details comes with <a underline href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">CORS</a>
+        restrictions which not aligned with the OpenAI SDK, it's currently not possible to use this provider in the browser.
+      </p>
+      <p>
+        If you do need to use this provider, you will need a dedicated proxy backend like a Serverless Function running on
+        <a underline href="https://workers.cloudflare.com/">Cloudflare Workers</a> or some CORS bypassing services to bypass the CORS restrictions.
+      </p>
+    </div>
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        :title="t('settings.pages.providers.common.section.basic.title')"
+        :description="t('settings.pages.providers.common.section.basic.description')"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderApiKeyInput
+          v-model="apiKey"
+          :provider-name="providerMetadata?.localizedName || 'Anthropic'"
+          placeholder="sk-..."
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          placeholder="https://api.anthropic.com/v1/"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>

apps/stage-tamagotchi-tauri/uno.config.ts

@@ -80,6 +80,7 @@ export default defineConfig({
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
         // include js/ts files
         '(components|src)/**/*.{js,ts}',
+        '**/stage-ui/**/*.{js,ts}',
       ],
     },
   },