@olares/lares-mobile 0.15.1 → 0.15.2

package/README.md

@@ -4,13 +4,15 @@ 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` 里的调试子域带进生产。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.1",
+  "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.1",
+    "@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 },
@@ -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/index.d.ts

@@ -57,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/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 {