@olares/lares-mobile 0.15.0 → 0.15.2

package/README.md

@@ -4,16 +4,22 @@ LarePass 只依赖这一个包。对话、Host、设置都在内部走 `@olares/
 
 ```vue
 <template>
-  <LaresApp :locale="locale" :env="env" />
+  <LaresApp :locale="locale" :device="device" v-bind="ports" />
 </template>
 <script setup>
-import { LaresApp } from "@olares/lares-mobile";
+import { LaresApp, laresPortsFromAccount, findLaresEntrance } from "@olares/lares-mobile";
 </script>
 ```
 
+`device` 为 `desktop` 时对话列居中、宽 748px；`mobile`（默认）保持全宽。
+
 设置页同样只挂 `LaresAgentSettings`。
 
-`env` 由宿主注入（`PROTOCOL` / `LARES_SUB_DOMAIN` / `ACCOUNT_DOMAIN` / `IS_PC_TEST`）。PC 预览走 `/laresHost` 代理时设 `IS_PC_TEST`。需要自定义鉴权请求时再传 `request`。
+正式 App：把当前登录账号的 `myApps` 交给 `laresPortsFromAccount`（或自己调 `findLaresEntrance` 得到 `baseUrl`）。入口前缀是安装时随机的，不要拼 `lares.<用户>.olares.com`，也不要把 webpack `.env` 里的调试子域带进生产。
+
+PC 预览：`IS_PC_TEST` 时走 `/laresHost` 代理，`laresPortsFromAccount` 会继续用 `PROTOCOL` / `LARES_SUB_DOMAIN` / `ACCOUNT_DOMAIN`。自定义鉴权请求再传 `request`。
+
+切账号时更新 `baseUrl` / `env` 即可，客户端会丢掉上一台的 runtime 和设置缓存，改连新 Host。
 
 本地联调（包未上 registry 时）：
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.0",
+    "@olares/lares-core": "0.15.2",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lares-shell">
+  <div class="lares-shell" :data-device="chatDevice">
     <LaresChatBar
       :t="t"
       :title="sessionTitle"
@@ -16,52 +16,54 @@
       @close="panel = ''"
       @pick="pickSession"
     />
-    <p v-if="failed" class="lares-shell__status">{{ failText }}</p>
-    <button v-if="failed" type="button" class="lares-shell__retry" :disabled="starting" @click="retry">
-      {{ t("probe.retry") }}
-    </button>
-    <LaresTranscript
-      ref="transcript"
-      :items="viewItems"
-      :running="running"
-      :loading="historyLoading || starting"
-      :previews="previews"
-      :media-url="mediaUrl"
-      :scroll-top="scrollTop"
-      :remember-scroll="rememberScroll"
-      :sticking="sticking"
-      :session-id="sessionId"
-      :question="question"
-      :question-busy="questionBusy"
-      :t="t"
-      @open="openFile"
-      @media="pinLog"
-      @answer="answerQuestion"
-    />
-    <LaresComposer
-      :draft="draft"
-      :sending="sending"
-      :can-send="canSend"
-      :model-label="modelLabel"
-      :model-busy="modelBusy"
-      :effort-label="effortLabel"
-      :effort-disabled="effortDisabled"
-      :attach-pending="upload.pending > 0"
-      :attach-disabled="!sessionId || historyLoading || starting"
-      :voice-phase="voicePhase"
-      :voice-elapsed="voiceElapsed"
-      :voice-error="voiceErrorText"
-      :failures="upload.failures"
-      :t="t"
-      @update:draft="draft = $event"
-      @send="send"
-      @model="openModelSheet"
-      @effort="openEffortSheet"
-      @files="attachFiles"
-      @voice="toggleVoice"
-      @hold-start="onHoldStart"
-      @hold-end="onHoldEnd"
-    />
+    <div class="lares-shell__conversation">
+      <p v-if="failed" class="lares-shell__status">{{ failText }}</p>
+      <button v-if="failed" type="button" class="lares-shell__retry" :disabled="starting" @click="retry">
+        {{ t("probe.retry") }}
+      </button>
+      <LaresTranscript
+        ref="transcript"
+        :items="viewItems"
+        :running="running"
+        :loading="historyLoading || starting"
+        :previews="previews"
+        :media-url="mediaUrl"
+        :scroll-top="scrollTop"
+        :remember-scroll="rememberScroll"
+        :sticking="sticking"
+        :session-id="sessionId"
+        :question="question"
+        :question-busy="questionBusy"
+        :t="t"
+        @open="openFile"
+        @media="pinLog"
+        @answer="answerQuestion"
+      />
+      <LaresComposer
+        :draft="draft"
+        :sending="sending"
+        :can-send="canSend"
+        :model-label="modelLabel"
+        :model-busy="modelBusy"
+        :effort-label="effortLabel"
+        :effort-disabled="effortDisabled"
+        :attach-pending="upload.pending > 0"
+        :attach-disabled="!sessionId || historyLoading || starting"
+        :voice-phase="voicePhase"
+        :voice-elapsed="voiceElapsed"
+        :voice-error="voiceErrorText"
+        :failures="upload.failures"
+        :t="t"
+        @update:draft="draft = $event"
+        @send="send"
+        @model="openModelSheet"
+        @effort="openEffortSheet"
+        @files="attachFiles"
+        @voice="toggleVoice"
+        @hold-start="onHoldStart"
+        @hold-end="onHoldEnd"
+      />
+    </div>
     <LaresSheet :open="modelSheet" :title="t('model.menuAria')" @close="modelSheet = false">
       <p v-if="modelError" class="lares-shell__status">{{ modelError }}</p>
       <p v-else-if="!models" class="lares-shell__hint">{{ t("agent.loading") }}</p>
@@ -118,6 +120,7 @@ import { DEFAULT_MAX_UPLOAD_BYTES } from "@olares/lares-core/files/limits";
 import { groupModelsByProvider, effortMenuRows, reasoningOfModel, currentEffortId, selectionKey } from "@olares/lares-core/router/session-model";
 import { messageFromCode } from "@olares/lares-core/i18n/t";
 import { parseAskUserQuestions, singleSelectAnswer } from "@olares/lares-core/larepass/questions";
+import { chatDevice as resolveChatDevice } from "./layout.js";
 import LaresChatBar from "./chat/ChatBar.vue";
 import LaresHistoryPanel from "./chat/HistoryPanel.vue";
 import LaresTranscript from "./chat/Transcript.vue";
@@ -132,6 +135,7 @@ export default {
   components: { LaresChatBar, LaresHistoryPanel, LaresTranscript, LaresComposer, LaresPreview, LaresSheet, LaresSettingRow },
   props: {
     locale: { type: String, default: "en" },
+    device: { type: String, default: "mobile" },
     baseUrl: { type: String, default: undefined },
     proxyPrefix: { type: String, default: undefined },
     request: { type: Function, default: undefined },
@@ -141,6 +145,7 @@ export default {
     return {
       sending: false,
       starting: false,
+      hostGen: 0,
       running: false,
       sessionId: "",
       draft: "",
@@ -183,9 +188,15 @@ export default {
     runtime() {
       return connectChat(this.ports);
     },
+    hostKey() {
+      return this.runtime.key;
+    },
     t() {
       return createT(this.locale);
     },
+    chatDevice() {
+      return resolveChatDevice(this.device);
+    },
     canSend() {
       return Boolean(this.draft.trim()) && Boolean(this.sessionId) && !this.running && !this.historyLoading && this.upload.pending === 0;
     },
@@ -274,6 +285,9 @@ export default {
     sessionId(id) {
       this.bindIntake(id);
     },
+    hostKey() {
+      this.switchHost();
+    },
   },
   created() {
     this.intake = new FileIntake((file, sessionId, options) => this.runtime.upload(file, options, sessionId));
@@ -290,7 +304,7 @@ export default {
       },
     });
     this.bindIntake(this.sessionId);
-    this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
+    this.bindRuntime();
     try {
       const raw = JSON.parse(localStorage.getItem("lares.mobile.effort") || "{}");
       if (raw && typeof raw === "object") this.effortByModel = raw;
@@ -404,17 +418,47 @@ export default {
       this.preview = { path: "", status: "idle", data: null, error: "" };
     },
     async retry() {
+      const gen = ++this.hostGen;
       this.starting = true;
       try {
         await this.runtime.start();
+        if (gen !== this.hostGen) return;
         await this.loadComposerMeta();
       } finally {
-        this.starting = false;
+        if (gen === this.hostGen) this.starting = false;
       }
     },
     modelKey(model) {
       return selectionKey({ provider: model.provider, model: model.id });
     },
+    bindRuntime() {
+      this.unsub?.();
+      this.unsub = this.runtime.subscribe((snap) => this.applySnap(snap));
+    },
+    switchHost() {
+      this.voiceCap?.stop?.(true);
+      this.intakeUnsub?.();
+      if (this.sessionId) this.intake?.cancelSession(this.sessionId);
+      this.sessionId = "";
+      this.items = [];
+      this.sessions = [];
+      this.sessionsReady = false;
+      this.previews = {};
+      this.preview = { path: "", status: "idle", data: null, error: "" };
+      this.pendingUser = "";
+      this.failed = "";
+      this.error = "";
+      this.models = null;
+      this.modelError = "";
+      this.modelPending = "";
+      this.modelSheet = false;
+      this.panel = "";
+      this.question = null;
+      this.questionBusy = false;
+      this.bindIntake("");
+      this.bindRuntime();
+      this.retry();
+    },
     bindIntake(sessionId) {
       this.intakeUnsub?.();
       this.intakeUnsub = null;

package/src/chat/Composer.vue

@@ -68,7 +68,6 @@
             </svg>
           </button>
           <button
-            v-if="showSend"
             type="submit"
             class="lares-composer__icon"
             data-kind="send"
@@ -79,8 +78,9 @@
               <path d="M12 19V7M6.5 12.5 12 7l5.5 5.5" />
             </svg>
           </button>
+          <!-- Voice input parked.
           <button
-            v-else
+            v-if="!showSend"
             type="button"
             class="lares-composer__icon"
             data-kind="voice"
@@ -99,10 +99,11 @@
               <path d="M17.5 9v6" />
             </svg>
           </button>
+          -->
         </div>
       </div>
     </div>
-    <p v-if="voiceError" class="lares-composer__hint" data-status="error">{{ voiceError }}</p>
+    <!-- <p v-if="voiceError" class="lares-composer__hint" data-status="error">{{ voiceError }}</p> -->
     <p v-for="item in failures" :key="item.id" class="lares-composer__hint" data-status="error">
       {{ t("upload.failed", { name: item.name, reason: t(`error.${item.code}`) }) }}
     </p>
@@ -187,6 +188,8 @@ export default {
       this.onSend();
     },
     canHold(event) {
+      // Voice input parked (hold-to-record).
+      return false;
       if (this.draft.trim() || this.sending || this.voiceBlocked) return false;
       if (event.pointerType === "mouse") return false;
       return true;

package/src/chat/Deliverables.vue

@@ -23,11 +23,15 @@
           playsinline
         />
         <audio
-          v-else
+          v-else-if="item.kind === 'audio'"
           class="lares-turn-media-audio"
           :src="mediaUrl(item)"
           controls
         />
+        <div
+          v-else-if="item.kind === 'model3d'"
+          class="lares-turn-media-model3d"
+        >{{ t("model3dHint") }}</div>
       </figure>
     </div>
     <div v-if="group.files.length" class="lares-turn-files">
@@ -136,6 +140,14 @@ export default {
   width: min(520px, 100%);
 }
 
+.lares-turn-media-model3d {
+  width: min(520px, 100%);
+  padding: 16px;
+  color: var(--q-ink-3);
+  font-size: 13px;
+  line-height: 20px;
+}
+
 .lares-turn-files {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);

package/src/host.js

@@ -1,4 +1,4 @@
-import { hostConfigFromEnv, hostUrl, MODELS_PATH, probeHost } from "@olares/lares-core/larepass/host";
+import { hostTarget, hostUrl, MODELS_PATH, probeHost } from "@olares/lares-core/larepass/host";
 import { callRpc, consumeMux, ensureSession, loadTranscript, MUX_PATH, sendPrompt } from "@olares/lares-core/larepass/chat";
 import { muxWsUrl } from "@olares/lares-core/larepass/mux";
 import { RESPOND_PATH } from "@olares/lares-core/larepass/rpc";
@@ -92,9 +92,7 @@ export async function defaultRequest(url, init = {}) {
 }
 
 export function createHostClient(ports = {}) {
-  const fromEnv = hostConfigFromEnv(ports.env);
-  const baseUrl = ports.baseUrl ?? fromEnv.baseUrl;
-  const proxyPrefix = ports.proxyPrefix ?? fromEnv.proxyPrefix;
+  const { baseUrl, proxyPrefix } = hostTarget(ports);
   const send = ports.request ?? defaultRequest;
   const urlFor = (path) => hostUrl({ baseUrl, proxyPrefix, path });
   const request = (path, init) => send(urlFor(path), init);

package/src/index.d.ts

@@ -29,11 +29,24 @@ export type HostPorts = {
 
 export const PC_TEST_PROXY: string;
 
+export function findLaresEntrance(apps?: unknown[]): string;
+
 export function hostConfigFromEnv(env?: HostEnv): {
   baseUrl: string;
   proxyPrefix: string;
 };
 
+export function hostKey(ports?: HostPorts): string;
+
+export function laresPortsFromAccount(input?: {
+  env?: HostEnv;
+  apps?: unknown[];
+}): {
+  baseUrl?: string;
+  env?: HostEnv;
+  proxyPrefix?: string;
+};
+
 export function defaultRequest(url: string, init?: HostRequestInit): Promise<HostResponse>;
 
 export function createHostClient(ports?: HostPorts): {
@@ -44,8 +57,11 @@ export function createHostClient(ports?: HostPorts): {
   prompt: (sessionId: string, text: string) => Promise<{ ok: boolean }>;
 };
 
+export type ChatDevice = "desktop" | "mobile";
+
 export const LaresApp: DefineComponent<{
   locale?: string;
+  device?: ChatDevice;
   baseUrl?: string;
   proxyPrefix?: string;
   env?: HostEnv;

package/src/index.js

@@ -1,4 +1,10 @@
 export { default as LaresApp } from "./App.vue";
 export { default as LaresAgentSettings } from "./settings/AgentSettings.vue";
 export { createHostClient, defaultRequest } from "./host.js";
-export { hostConfigFromEnv, PC_TEST_PROXY } from "@olares/lares-core/larepass/host";
+export {
+  findLaresEntrance,
+  hostConfigFromEnv,
+  hostKey,
+  laresPortsFromAccount,
+  PC_TEST_PROXY,
+} from "@olares/lares-core/larepass/host";

package/src/layout.js

@@ -0,0 +1,8 @@
+export const DEVICE_MOBILE = "mobile";
+export const DEVICE_DESKTOP = "desktop";
+export const DESKTOP_CHAT_WIDTH_PX = 748;
+
+/** Host-facing layout. Unknown values stay on the phone column. */
+export function chatDevice(value) {
+  return value === DEVICE_DESKTOP ? DEVICE_DESKTOP : DEVICE_MOBILE;
+}

package/src/preview/Preview.vue

@@ -38,6 +38,9 @@
         @click="onMarkdownClick"
       />
       <pre v-else-if="data?.kind === 'text'" class="lares-preview__text">{{ data.text }}</pre>
+      <div v-else-if="data?.kind === 'model3d'" class="lares-preview__hint">
+        <p>{{ t("model3dHint") }}</p>
+      </div>
       <div v-else class="lares-preview__hint">
         <p>{{ t("unsupportedTitle") }}</p>
         <p>{{ t("unsupported") }}</p>

package/src/runtime.js

@@ -1,12 +1,32 @@
+import { hostKey } from "@olares/lares-core/larepass/host";
+import { resetHostSettingsCache } from "@olares/lares-core/larepass/settings";
 import { createChatRuntime } from "@olares/lares-core/larepass/runtime";
 import { createHostClient } from "./host.js";
 
 let current = null;
+let liveKey = "";
+
+export function adoptHost(ports) {
+  const key = hostKey(ports);
+  if (key === liveKey) return key;
+  liveKey = key;
+  current?.dispose?.();
+  current = null;
+  resetHostSettingsCache();
+  return key;
+}
 
 export function connectChat(ports) {
   const client = createHostClient(ports);
-  const key = client.urlFor("/api");
+  const key = adoptHost(ports);
   if (current?.key === key) return current;
   current = Object.assign(createChatRuntime(client), { key });
   return current;
 }
+
+export function resetChatHost() {
+  liveKey = "";
+  current?.dispose?.();
+  current = null;
+  resetHostSettingsCache();
+}

package/src/settings/AgentSettings.vue

@@ -22,6 +22,7 @@
       </p>
       <p v-if="modelError" class="lares-agent__hint" data-status="error">{{ modelError }}</p>
     </section>
+    <!-- Voice input parked.
     <section class="lares-agent__group">
       <h2>{{ tVoice("settings.title") }}</h2>
       <div class="lares-agent__list">
@@ -44,6 +45,7 @@
       </div>
       <p v-if="voiceError" class="lares-agent__hint" data-status="error">{{ voiceError }}</p>
     </section>
+    -->
     <section class="lares-agent__group">
       <h2>{{ tSearch("settings.title") }}</h2>
       <div class="lares-agent__list">
@@ -94,7 +96,9 @@ import {
   searchValueFromMenu,
 } from "@olares/lares-core/search/menu";
 import { rememberedSettings } from "@olares/lares-core/larepass/settings";
+import { hostKey as hostSessionKey } from "@olares/lares-core/larepass/host";
 import { createHostClient } from "../host.js";
+import { adoptHost } from "../runtime.js";
 import { createT } from "../i18n.js";
 import LaresSettingRow from "./SettingRow.vue";
 import LaresSheet from "./Sheet.vue";
@@ -138,13 +142,19 @@ export default {
     t() {
       return createT(this.locale);
     },
-    settings() {
-      return createHostClient({
+    ports() {
+      return {
         baseUrl: this.baseUrl,
         proxyPrefix: this.proxyPrefix,
         request: this.request,
         env: this.env,
-      }).settings;
+      };
+    },
+    hostKey() {
+      return hostSessionKey(this.ports);
+    },
+    settings() {
+      return createHostClient(this.ports).settings;
     },
     busy() {
       return this.loading || Boolean(this.pending);
@@ -238,6 +248,19 @@ export default {
       return "";
     },
   },
+  watch: {
+    hostKey() {
+      adoptHost(this.ports);
+      this.panel = "";
+      this.models = null;
+      this.voice = null;
+      this.search = null;
+      this.modelError = "";
+      this.voiceError = "";
+      this.searchError = "";
+      this.load(true);
+    },
+  },
   mounted() {
     this.load(false);
   },

package/src/styles.css

@@ -7,6 +7,21 @@
   color: var(--q-ink-1);
 }
 
+.lares-shell__conversation {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  width: 100%;
+}
+
+.lares-shell[data-device="desktop"] .lares-shell__conversation {
+  width: 748px;
+  max-width: 100%;
+  margin-inline: auto;
+}
+
 .lares-shell button,
 .lares-shell textarea,
 .lares-shell select {