@olares/lares-mobile 0.15.1 → 0.15.4

package/README.md

@@ -4,19 +4,39 @@ LarePass 只依赖这一个包。对话、Host、设置都在内部走 `@olares/
 
 ```vue
 <template>
-  <LaresApp :locale="locale" v-bind="ports" />
+  <LaresApp :locale="locale" :device="device" v-bind="ports" />
 </template>
 <script setup>
 import { LaresApp, laresPortsFromAccount, findLaresEntrance } from "@olares/lares-mobile";
 </script>
 ```
 
+`device` 为 `desktop` 时对话列居中、宽 748px；`mobile`（默认）保持全宽。
+
 设置页同样只挂 `LaresAgentSettings`。
 
 正式 App：把当前登录账号的 `myApps` 交给 `laresPortsFromAccount`（或自己调 `findLaresEntrance` 得到 `baseUrl`）。入口前缀是安装时随机的，不要拼 `lares.<用户>.olares.com`，也不要把 webpack `.env` 里的调试子域带进生产。
 
 PC 预览：`IS_PC_TEST` 时走 `/laresHost` 代理，`laresPortsFromAccount` 会继续用 `PROTOCOL` / `LARES_SUB_DOMAIN` / `ACCOUNT_DOMAIN`。自定义鉴权请求再传 `request`。
 
+宿主页面与 Host 跨源时（打包桌面端是 `file://`）必须传 `request`，浏览器不会带上 Olares cookie，靠 cookie 的默认实现一律 401。`request` 会用在所有调用上，包括聊天附件上传和语音转写这两个二进制请求——它们的 `body` 是 `File` / `Blob`，`headers` 里自带 `content-type`，实现里不要再当成 JSON 序列化。
+
+```js
+async function request(url, { method = "GET", body, headers, signal } = {}) {
+  // body 可能是 File / Blob，原样发出去
+  const res = await send(url, { method, body, headers, signal, token });
+  return { ok: res.ok, status: res.status, body: res.json }; // 4xx 也要返回，不要 throw
+}
+```
+
+事件流 `/api/events.mux` 是唯一带不了 header 的调用——浏览器 `WebSocket` 构造器不收 header。Olares 会从 `Sec-WebSocket-Protocol` 取 token 提升成 `X-Authorization` 再走入口鉴权，所以另外传 `socketProtocol`：
+
+```js
+ports.socketProtocol = () => currentUser.access_token; // 传函数则每次连接现取，换 token 无需重建 runtime
+```
+
+也接受直接给字符串或数组。**不传就不传**，不要传空串——服务端不回应的子协议会让握手直接失败，同源的 PC 端保持裸构造。
+
 切账号时更新 `baseUrl` / `env` 即可，客户端会丢掉上一台的 runtime 和设置缓存，改连新 Host。
 
 本地联调（包未上 registry 时）：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.1",
+  "version": "0.15.4",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.1",
+    "@olares/lares-core": "0.15.4",
     "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 },
@@ -190,6 +194,9 @@ export default {
     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;
     },

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

@@ -15,7 +15,25 @@ function pageOrigin() {
   }
 }
 
-function openMuxSocket(httpUrl, signal) {
+/**
+ * A browser `WebSocket` takes no headers, so the mux upgrade cannot carry the
+ * `X-Authorization` every other call uses and a cross-origin host page — a
+ * packaged LarePass build sends no Olares cookie — is answered 401. Olares
+ * reads the token off `Sec-WebSocket-Protocol` instead and promotes it to the
+ * header before the entrance auth runs, so the host hands one down here.
+ *
+ * Read at connect time rather than captured with the client: a refreshed token
+ * then lands on the next reconnect instead of needing a rebuilt runtime.
+ */
+function socketProtocols(ports) {
+  const value = typeof ports.socketProtocol === "function"
+    ? ports.socketProtocol()
+    : ports.socketProtocol;
+  if (Array.isArray(value)) return value.length > 0 ? value : undefined;
+  return value ? String(value) : undefined;
+}
+
+function openMuxSocket(httpUrl, signal, protocols) {
   const Socket = globalThis.WebSocket;
   if (typeof Socket !== "function") {
     return Promise.resolve({
@@ -26,7 +44,10 @@ function openMuxSocket(httpUrl, signal) {
   }
   return new Promise((resolve) => {
     let settled = false;
-    const socket = new Socket(muxWsUrl(httpUrl, pageOrigin()));
+    const url = muxWsUrl(httpUrl, pageOrigin());
+    // Offering a subprotocol the server does not echo back aborts the
+    // handshake, so a host that hands down none keeps the bare constructor.
+    const socket = protocols === undefined ? new Socket(url) : new Socket(url, protocols);
     const finish = (result) => {
       if (settled) return;
       settled = true;
@@ -137,15 +158,26 @@ export function createHostClient(ports = {}) {
     downloadUrl(sessionId, path) {
       return urlFor(downloadFileUrl(sessionId, path));
     },
+    // Both carry a binary body, so neither can go through `request` as an RPC —
+    // but both must still ride the host's auth. `ports.request` is passed
+    // through rather than called here so a host that supplies none keeps the
+    // cookie `fetch` these two used before.
     upload(sessionId, file, options) {
-      return uploadFile(file, sessionId, { ...options, url: urlFor(FILES_UPLOAD_PATH) });
+      return uploadFile(file, sessionId, {
+        ...options,
+        url: urlFor(FILES_UPLOAD_PATH),
+        request: ports.request,
+      });
     },
     transcribe(blob, language, signal) {
-      return postTranscribe(blob, language, signal, { baseUrl: urlFor(VOICE_API) });
+      return postTranscribe(blob, language, signal, {
+        baseUrl: urlFor(VOICE_API),
+        request: ports.request,
+      });
     },
     async openMux(signal) {
       try {
-        return await openMuxSocket(urlFor(MUX_PATH), signal);
+        return await openMuxSocket(urlFor(MUX_PATH), signal, socketProtocols(ports));
       } catch (err) {
         return {
           ok: false,

package/src/index.d.ts

@@ -25,6 +25,11 @@ export type HostPorts = {
   proxyPrefix?: string;
   env?: HostEnv;
   request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
+  /**
+   * Token offered as `Sec-WebSocket-Protocol` on the mux upgrade, which cannot
+   * carry `X-Authorization`. Pass a function to have it read per connect.
+   */
+  socketProtocol?: string | string[] | (() => string | string[] | undefined);
 };
 
 export const PC_TEST_PROXY: string;
@@ -57,8 +62,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/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/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">

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 {