feat(stage-*): allow to connect remote ws server (#953)

packages/i18n/src/locales/en/settings.yaml

@@ -722,6 +722,13 @@ pages:
         playground:
           title: Transcription Playground
     title: Providers
+  connection:
+    description: Configure WebSocket server connection
+    title: Connection
+    websocket-url:
+      description: Full address of the WebSocket server (e.g., ws://localhost:6121/ws)
+      label: WebSocket Server Address
+      placeholder: ws://localhost:6121/ws
   scene:
     description: Configure the environment where the character lives
     title: Scene

packages/i18n/src/locales/es/settings.yaml

@@ -696,6 +696,12 @@ pages:
         playground:
           title: Playground de Transcripción
     title: Proveedores
+  connection:
+    description: Configurar la conexión del servidor WebSocket
+    title: Conexión
+    websocket-url:
+      description: "Dirección completa del servidor WebSocket (ej.: ws://localhost:6121/ws)'      label: Dirección del servidor WebSocket"
+      placeholder: ws://localhost:6121/ws
   scene:
     description: Configurar el entorno donde vive el personaje
     title: Escena

packages/i18n/src/locales/ja/settings.yaml

@@ -696,6 +696,13 @@ pages:
         playground:
           title: 文字起こし実験場
     title: プロバイダー
+  connection:
+    description: WebSocket サーバー接続を設定
+    title: 接続
+    websocket-url:
+      description: WebSocket サーバーの完全なアドレス（例：ws://localhost:6121/ws）
+      label: WebSocket サーバーアドレス
+      placeholder: ws://localhost:6121/ws
   scene:
     description: キャラクターが過ごす環境を設定する
     title: シーン

packages/i18n/src/locales/ko/settings.yaml

@@ -696,6 +696,13 @@ pages:
         playground:
           title: Transcription Playground
     title: Providers
+  connection:
+    description: WebSocket 서버 연결 구성
+    title: 연결
+    websocket-url:
+      description: 'WebSocket 서버의 전체 주소 (예: ws://localhost:6121/ws)'
+      label: WebSocket 서버 주소
+      placeholder: ws://localhost:6121/ws
   scene:
     description: Configure the environment where the character lives
     title: Scene

packages/i18n/src/locales/ru/settings.yaml

@@ -696,6 +696,13 @@ pages:
         playground:
           title: Песочница транскрипции
     title: Провайдеры
+  connection:
+    description: Настроить подключение к WebSocket серверу
+    title: Подключение
+    websocket-url:
+      description: 'Полный адрес WebSocket сервера (например: ws://localhost:6121/ws)'
+      label: Адрес WebSocket сервера
+      placeholder: ws://localhost:6121/ws
   scene:
     description: Настройте окружение, в котором живёт персонаж
     title: Сцена

packages/i18n/src/locales/vi/settings.yaml

@@ -696,6 +696,13 @@ pages:
         playground:
           title: Transcription Playground
     title: Nhà cung cấp
+  connection:
+    description: Cấu hình kết nối máy chủ WebSocket
+    title: Kết nối
+    websocket-url:
+      description: 'Địa chỉ đầy đủ của máy chủ WebSocket (ví dụ: ws://localhost:6121/ws)'
+      label: Địa chỉ máy chủ WebSocket
+      placeholder: ws://localhost:6121/ws
   scene:
     description: Cấu hình môi trường nhân vật sinh sống
     title: Bối cảnh

packages/i18n/src/locales/zh-Hans/settings.yaml

@@ -699,6 +699,13 @@ pages:
   scene:
     description: 配置角色所在环境
     title: 场景
+  connection:
+    description: 配置 WebSocket 服务器连接
+    title: 连接
+    websocket-url:
+      description: WebSocket 服务器的完整地址（例如：ws://localhost:6121/ws）
+      label: WebSocket 服务器地址
+      placeholder: ws://localhost:6121/ws
   system:
     color-scheme:
       description: 更改舞台的配色方案

packages/i18n/src/locales/zh-Hant/settings.yaml

@@ -696,6 +696,13 @@ pages:
         playground:
           title: 實驗平台
     title: 服務來源
+  connection:
+    description: 設定 WebSocket 伺服器連線
+    title: 連線
+    websocket-url:
+      description: WebSocket 伺服器的完整位址（例如：ws://localhost:6121/ws）
+      label: WebSocket 伺服器位址
+      placeholder: ws://localhost:6121/ws
   scene:
     description: 設定角色所在環境
     title: 場景

packages/stage-layouts/src/layouts/settings.vue

@@ -103,6 +103,10 @@ const routeHeaderMetadataMap = computed(() => {
       subtitle: t('settings.title'),
       title: t('settings.pages.data.title'),
     },
+    '/settings/connection': {
+      subtitle: t('settings.title'),
+      title: t('settings.pages.connection.title'),
+    },
     '/settings/scene': {
       subtitle: t('settings.title'),
       title: t('settings.pages.scene.title'),

packages/stage-pages/src/pages/settings/connection/ConnectionSettings.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { createResettableLocalStorage } from '@proj-airi/stage-ui/utils/resettable'
+import { FieldInput } from '@proj-airi/ui'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const defaultWebSocketUrl = import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws'
+const [websocketUrl] = createResettableLocalStorage('settings/connection/websocket-url', defaultWebSocketUrl)
+</script>
+
+<template>
+  <div :class="['rounded-lg', 'bg-neutral-50', 'p-4', 'dark:bg-neutral-800', 'flex', '~', 'col', 'gap-4']">
+    <!-- // TODO: Make this array, support to connect to multiple WebSocket server -->
+    <FieldInput
+      v-model="websocketUrl"
+      :label="t('settings.pages.connection.websocket-url.label')"
+      :description="t('settings.pages.connection.websocket-url.description')"
+      :placeholder="t('settings.pages.connection.websocket-url.placeholder')"
+    />
+    <slot name="platform-specific" />
+  </div>
+</template>

packages/stage-pages/src/pages/settings/connection/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ConnectionSettings from './ConnectionSettings.vue'
+</script>
+
+<template>
+  <ConnectionSettings />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+</route>

packages/stage-pages/src/pages/settings/index.vue

@@ -69,6 +69,12 @@ const settings = computed(() => [
     icon: 'i-solar:database-bold-duotone',
     to: '/settings/data',
   },
+  {
+    title: t('settings.pages.connection.title'),
+    description: t('settings.pages.connection.description'),
+    icon: 'i-solar:router-bold-duotone',
+    to: '/settings/connection',
+  },
   {
     title: t('settings.pages.system.title'),
     description: t('settings.pages.system.description'),

packages/stage-ui/src/stores/mods/api/channel-server.ts

@@ -2,9 +2,10 @@ import type { ContextUpdate, WebSocketBaseEvent, WebSocketEvent, WebSocketEventO
 
 import { Client, WebSocketEventSource } from '@proj-airi/server-sdk'
 import { isStageTamagotchi, isStageWeb } from '@proj-airi/stage-shared'
+import { useLocalStorage } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 import { useWebSocketInspectorStore } from '../../devtools/websocket-inspector'
 
@@ -16,6 +17,9 @@ export const useModsServerChannelStore = defineStore('mods:channels:proj-airi:se
   const listenersInitialized = ref(false)
   const listenerDisposers = ref<Array<() => void>>([])
 
+  const defaultWebSocketUrl = import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws'
+  const websocketUrl = useLocalStorage('settings/connection/websocket-url', defaultWebSocketUrl)
+
   const basePossibleEvents: Array<keyof WebSocketEvents> = [
     'context:update',
     'error',
@@ -47,7 +51,7 @@ export const useModsServerChannelStore = defineStore('mods:channels:proj-airi:se
     initializing.value = new Promise<void>((resolve) => {
       client.value = new Client({
         name: isStageWeb() ? WebSocketEventSource.StageWeb : isStageTamagotchi() ? WebSocketEventSource.StageTamagotchi : WebSocketEventSource.StageWeb,
-        url: import.meta.env.VITE_AIRI_WS_URL || 'ws://localhost:6121/ws',
+        url: websocketUrl.value || defaultWebSocketUrl,
         token: options?.token,
         possibleEvents,
         onAnyMessage: (event) => {
@@ -173,12 +177,24 @@ export const useModsServerChannelStore = defineStore('mods:channels:proj-airi:se
     flush()
     clearListeners()
 
-    client.value?.close()
+    if (client.value) {
+      client.value.close()
+      client.value = undefined
+    }
     connected.value = false
-    client.value = undefined
     initializing.value = null
   }
 
+  watch(websocketUrl, (newUrl, oldUrl) => {
+    if (newUrl === oldUrl)
+      return
+
+    if (client.value || initializing.value) {
+      dispose()
+      void initialize()
+    }
+  })
+
   return {
     connected,
     ensureConnected,