@olares/lares-mobile 0.15.24 → 0.15.26

package/src/settings/AgentSettings.vue

@@ -44,36 +44,107 @@
     <section class="lares-agent__group">
       <h2>{{ tVoice("settings.title") }}</h2>
       <div class="lares-agent__list">
-        <LaresSettingRow
-          :label="tVoice('settings.stt.model')"
-          :value="voiceModelLabel"
-          chevron
-          boxed
-          :disabled="Boolean(pending)"
-          @click="openSheet('voiceModel')"
-        />
-        <LaresSettingRow
-          :label="tVoice('settings.language.title')"
-          :value="voiceLangLabel"
-          chevron
-          boxed
-          :disabled="Boolean(pending)"
-          @click="openSheet('voiceLang')"
-        />
+        <template v-if="isDesktop">
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.stt.model') }}</span>
+            <LaresSelect
+              :value="voiceModelId"
+              :sections="voiceModelSections"
+              :disabled="busy || !voice"
+              @select="chooseVoiceModel"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.language.title') }}</span>
+            <LaresSelect
+              :value="voiceLangId"
+              :sections="voiceLanguageSections"
+              :disabled="busy || !voice"
+              @select="chooseVoiceLanguage"
+            />
+          </label>
+        </template>
+        <template v-else>
+          <LaresSettingRow
+            :label="tVoice('settings.stt.model')"
+            :value="voiceModelLabel"
+            chevron
+            boxed
+            :disabled="Boolean(pending)"
+            @click="openSheet('voiceModel')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.language.title')"
+            :value="voiceLangLabel"
+            chevron
+            boxed
+            :disabled="Boolean(pending)"
+            @click="openSheet('voiceLang')"
+          />
+        </template>
       </div>
       <VoicePreferences :key="hostKey" ref="voicePreferences" :settings="settings" :tts-fetch="ttsFetch" :snapshot="voice" :device="device" :t="tVoice" :bind-before-leave="bindBeforeLeave" @change="voice = $event" />
-      <label class="lares-agent__hint">{{ tVoice('settings.mobileMode') }}
-        <select :value="voice?.config?.mobileMode || 'continuous'" @change="patchVoice('mobileMode', $event.target.value)">
-          <option value="single">{{ tVoice('settings.mode.single') }}</option>
-          <option value="continuous">{{ tVoice('settings.mode.continuous') }}</option>
-        </select>
-      </label>
-      <label class="lares-agent__hint">{{ tVoice('settings.device') }}
-        <select :value="voice?.config?.device || 'auto'" @change="patchVoice('device', $event.target.value)">
-          <option v-for="device in ['auto', 'device', 'headset']" :key="device" :value="device">{{ tVoice(`settings.device.${device}`) }}</option>
-        </select>
-      </label>
+      <h3>{{ tVoice("settings.conversation") }}</h3>
+      <div class="lares-agent__list">
+        <template v-if="isDesktop">
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.mobileMode') }}</span>
+            <LaresSelect
+              :value="voice?.config?.mobileMode || 'continuous'"
+              :sections="mobileModeSections"
+              :disabled="busy || !voice"
+              @select="(item) => patchVoice('mobileMode', item.id)"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.device') }}</span>
+            <LaresSelect
+              :value="voice?.config?.device || 'auto'"
+              :sections="deviceSections"
+              :disabled="busy || !voice"
+              @select="(item) => patchVoice('device', item.id)"
+            />
+          </label>
+          <label class="lares-agent__field">
+            <span>{{ tVoice('settings.mode.title') }}</span>
+            <LaresSelect
+              :value="voice?.config?.streaming ? 'streaming' : 'turns'"
+              :sections="readingSections"
+              :disabled="busy || !voice || !reading"
+              @select="(item) => chooseReading(item.id)"
+            />
+          </label>
+        </template>
+        <template v-else>
+          <LaresSettingRow
+            :label="tVoice('settings.mobileMode')"
+            :value="voiceChoiceLabel('mobileMode')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice"
+            @click="openSheet('voiceMobileMode')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.device')"
+            :value="voiceChoiceLabel('device')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice"
+            @click="openSheet('voiceDevice')"
+          />
+          <LaresSettingRow
+            :label="tVoice('settings.mode.title')"
+            :value="voiceChoiceLabel('reading')"
+            chevron
+            boxed
+            :disabled="Boolean(pending) || !voice || !reading"
+            @click="openSheet('voiceReading')"
+          />
+        </template>
+      </div>
+      <p class="lares-agent__hint">{{ readingHint }}</p>
       <p v-if="voiceError" class="lares-agent__hint" data-status="error">{{ voiceError }}</p>
+      <VoiceKeys :key="`keys-${hostKey}`" :client="voiceKeys" :t="tVoice" />
     </section>
     <section class="lares-agent__group">
       <h2>{{ tSearch("settings.title") }}</h2>
@@ -105,7 +176,7 @@
           :key="item.id"
           :label="item.label"
           :checked="item.id === sheetCurrent"
-          :disabled="busy"
+          :disabled="busy || item.disabled"
           @click="pick(item)"
         />
       </template>
@@ -138,6 +209,7 @@ import { adoptHost } from "../runtime.js";
 import { createT } from "../i18n.js";
 import { chatDevice, DEVICE_DESKTOP } from "../layout.js";
 import VoicePreferences from "./VoicePreferences.vue";
+import VoiceKeys from "./VoiceKeys.vue";
 import LaresSettingRow from "./SettingRow.vue";
 import LaresSheet from "./Sheet.vue";
 import LaresSelect from "./Select.vue";
@@ -154,7 +226,7 @@ function itemLabel(items, id) {
 
 export default {
   name: "LaresAgentSettings",
-  components: { VoicePreferences, LaresSettingRow, LaresSheet, LaresSelect },
+  components: { VoicePreferences, VoiceKeys, LaresSettingRow, LaresSheet, LaresSelect },
   expose: ["reload", "beforeLeave"],
   props: {
     locale: { type: String, default: "en" },
@@ -180,6 +252,7 @@ export default {
       voiceError: "",
       searchError: "",
       conversationError: "",
+      reading: null,
     };
   },
   computed: {
@@ -205,6 +278,7 @@ export default {
       return hostSessionKey(this.ports);
     },
     ttsFetch() { return createHostClient(this.ports).ttsFetch; },
+    voiceKeys() { return createHostClient(this.ports).voiceKeys; },
     settings() {
       return createHostClient(this.ports).settings;
     },
@@ -244,13 +318,31 @@ export default {
       }
       return this.models.default?.model || "—";
     },
+    voiceModelId() {
+      return voiceMenuValue(this.voice?.config?.model);
+    },
+    voiceLangId() {
+      return voiceMenuValue(this.voice?.config?.language);
+    },
+    voiceModelSections() {
+      return [{ items: this.voiceModels }];
+    },
+    voiceLanguageSections() {
+      return [{ items: this.voiceLanguages }];
+    },
     voiceModelLabel() {
       if (!this.voice) return "—";
-      return itemLabel(this.voiceModels, voiceMenuValue(this.voice.config?.model));
+      return itemLabel(this.voiceModels, this.voiceModelId);
     },
     voiceLangLabel() {
       if (!this.voice) return "—";
-      return itemLabel(this.voiceLanguages, voiceMenuValue(this.voice.config?.language));
+      return itemLabel(this.voiceLanguages, this.voiceLangId);
+    },
+    readingHint() {
+      if (this.reading && !this.reading.allowed) return this.tVoice("settings.mode.hint");
+      const type = this.reading?.gpu?.type;
+      if (type) return this.tVoice("settings.mode.gpu", { type: this.tVoice(`settings.gpu.${type}`) });
+      return this.tVoice("settings.mode.hint");
     },
     searchMenuId() {
       return searchMenuValue(this.search);
@@ -280,10 +372,27 @@ export default {
         ],
       }];
     },
+    mobileModeSections() {
+      return [{ items: ["single", "continuous"].map((id) => ({ id, label: this.tVoice(`settings.mode.${id}`) })) }];
+    },
+    deviceSections() {
+      return [{ items: ["auto", "device", "headset"].map((id) => ({ id, label: this.tVoice(`settings.device.${id}`) })) }];
+    },
+    readingSections() {
+      return [{
+        items: [
+          { id: "turns", label: this.tVoice("settings.mode.turns") },
+          { id: "streaming", label: this.tVoice("settings.mode.streaming"), disabled: !this.reading?.allowed },
+        ],
+      }];
+    },
     sheetTitle() {
       if (this.panel === "model") return this.tModel("settings.title");
       if (this.panel === "voiceModel") return this.tVoice("settings.stt.model");
       if (this.panel === "voiceLang") return this.tVoice("settings.language.title");
+      if (this.panel === "voiceMobileMode") return this.tVoice("settings.mobileMode");
+      if (this.panel === "voiceDevice") return this.tVoice("settings.device");
+      if (this.panel === "voiceReading") return this.tVoice("settings.mode.title");
       if (this.panel === "search") return this.tSearch("settings.default");
       return "";
     },
@@ -298,6 +407,9 @@ export default {
       if (this.panel === "voiceLang") {
         return [{ items: this.voiceLanguages.map((item) => ({ id: item.id, label: item.label })) }];
       }
+      if (this.panel === "voiceMobileMode") return this.mobileModeSections;
+      if (this.panel === "voiceDevice") return this.deviceSections;
+      if (this.panel === "voiceReading") return this.readingSections;
       if (this.panel === "search") return this.searchSelectSections;
       return [];
     },
@@ -357,7 +469,16 @@ export default {
       if (!ready) return;
       this.panel = panel;
     },
+    chooseVoiceModel(item) { return this.patchVoice("model", voiceValueFromMenu(item.id)); },
+    chooseVoiceLanguage(item) { return this.patchVoice("language", voiceValueFromMenu(item.id)); },
+    voiceChoiceLabel(kind) {
+      if (!this.voice) return "—";
+      if (kind === "mobileMode") return this.tVoice(`settings.mode.${this.voice.config?.mobileMode || "continuous"}`);
+      if (kind === "device") return this.tVoice(`settings.device.${this.voice.config?.device || "auto"}`);
+      return this.tVoice(`settings.mode.${this.voice.config?.streaming ? "streaming" : "turns"}`);
+    },
     async pick(item, panel = this.panel) {
+      if (item.disabled) return;
       if (item.id === this.sheetCurrentFor(panel)) {
         this.panel = "";
         return;
@@ -366,12 +487,18 @@ export default {
       if (panel === "model") await this.chooseModel(item.model);
       if (panel === "voiceModel") await this.patchVoice("model", voiceValueFromMenu(item.id));
       if (panel === "voiceLang") await this.patchVoice("language", voiceValueFromMenu(item.id));
+      if (panel === "voiceMobileMode") await this.patchVoice("mobileMode", item.id);
+      if (panel === "voiceDevice") await this.patchVoice("device", item.id);
+      if (panel === "voiceReading") this.chooseReading(item.id);
       if (panel === "search") await this.chooseSearch(item.id);
     },
     sheetCurrentFor(panel) {
       if (panel === "model") return this.modelCurrent;
       if (panel === "voiceModel") return voiceMenuValue(this.voice?.config?.model);
       if (panel === "voiceLang") return voiceMenuValue(this.voice?.config?.language);
+      if (panel === "voiceMobileMode") return this.voice?.config?.mobileMode || "continuous";
+      if (panel === "voiceDevice") return this.voice?.config?.device || "auto";
+      if (panel === "voiceReading") return this.voice?.config?.streaming ? "streaming" : "turns";
       if (panel === "search") return searchMenuValue(this.search);
       return "";
     },
@@ -387,7 +514,10 @@ export default {
         this.voice = remembered.voice ?? this.voice;
         this.search = remembered.search ?? this.search;
         this.conversation = remembered.conversation ?? this.conversation;
-        if (this.models && this.voice && this.search && this.conversation) return;
+        if (this.models && this.voice && this.search && this.conversation) {
+          void this.loadReading();
+          return;
+        }
       }
       this.panel = "";
       this.loading = true;
@@ -410,6 +540,21 @@ export default {
       if (conversation.status === "fulfilled") this.conversation = conversation.value;
       else this.conversationError = conversation.reason instanceof Error ? conversation.reason.message : String(conversation.reason);
       this.loading = false;
+      void this.loadReading();
+    },
+    async loadReading() {
+      try {
+        this.reading = await this.settings.readingMode();
+      } catch {
+        this.reading = { streaming: false, allowed: false, gpu: null };
+      }
+    },
+    chooseReading(value) {
+      if (value === "streaming" && !this.reading?.allowed) {
+        this.voiceError = this.tVoice("error.voice_streaming_time_slice");
+        return;
+      }
+      void this.patchVoice("streaming", value === "streaming");
     },
     async chooseModel(model) {
       const selection = { provider: model.provider, model: model.id };
@@ -431,8 +576,10 @@ export default {
       this.voiceError = "";
       try {
         this.voice = await this.$refs.voicePreferences.patch({ [key]: value });
-      } catch {
-        this.voiceError = this.tVoice("settings.saveFailed");
+      } catch (err) {
+        const code = err?.code;
+        const text = code ? this.tVoice(`error.${code}`) : "";
+        this.voiceError = text && text !== `error.${code}` ? text : this.tVoice("settings.saveFailed");
       } finally {
         this.pending = "";
       }
@@ -544,22 +691,45 @@ export default {
   gap: 8px;
 }
 
-.lares-agent__group h2 {
+.lares-agent__group h2,
+.lares-agent__group h3 {
   margin: 0;
-  font-size: 18px;
   font-weight: 500;
+  color: var(--q-ink-1);
+}
+
+.lares-agent__group h2 {
+  font-size: 18px;
   line-height: 24px;
 }
 
+.lares-agent__group h3 {
+  margin-top: 8px;
+  color: var(--q-ink-3);
+  font-size: 14px;
+  line-height: 18px;
+}
+
 .lares-agent__list {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
 
+.lares-agent__field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  color: var(--q-ink-1);
+  font-size: 15px;
+  line-height: 22px;
+}
+
 .lares-agent__hint {
   margin: 0;
   font-size: 15px;
+  line-height: 22px;
   color: var(--q-ink-3);
 }
 

package/src/settings/Select.vue

@@ -27,7 +27,7 @@
             class="lares-select__option"
             role="option"
             :aria-selected="item.id === value"
-            :disabled="disabled"
+            :disabled="disabled || item.disabled"
             @click="choose(item)"
           >
             <span>{{ item.label }}</span>
@@ -75,6 +75,7 @@ export default {
   },
   methods: {
     choose(item) {
+      if (this.disabled || item.disabled) return;
       this.open = false;
       this.$emit("select", item);
     },
@@ -177,6 +178,11 @@ export default {
   background: var(--q-background-hover);
 }
 
+.lares-select__option:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
 .lares-select__option[aria-selected="true"] span {
   color: var(--q-blue-default);
 }

package/src/settings/Sheet.vue

@@ -19,6 +19,9 @@
         <div class="lares-sheet__body">
           <slot />
         </div>
+        <footer v-if="$slots.footer" class="lares-sheet__foot">
+          <slot name="footer" />
+        </footer>
       </div>
     </div>
   </Teleport>
@@ -84,6 +87,11 @@ export default {
   transform: translateY(0);
 }
 
+.lares-sheet:has(.lares-sheet__foot) .lares-sheet__panel {
+  height: 45%;
+  overflow: hidden;
+}
+
 .lares-sheet__head {
   display: flex;
   align-items: center;
@@ -129,6 +137,17 @@ export default {
   -webkit-overflow-scrolling: touch;
 }
 
+.lares-sheet:has(.lares-sheet__foot) .lares-sheet__body {
+  flex: 1 1 auto;
+  padding-bottom: 8px;
+}
+
+.lares-sheet__foot {
+  flex-shrink: 0;
+  padding: 0 0 env(safe-area-inset-bottom, 0px);
+  background: var(--q-background-1);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .lares-sheet__backdrop,
   .lares-sheet__panel {