@olares/lares-mobile 0.15.0

package/src/chat/voice.js

@@ -0,0 +1,139 @@
+import { TranscriptQueue } from "@olares/lares-core/voice/client";
+import {
+  formatElapsed,
+  isRecordingTooShort,
+  pickRecordingMime,
+  RECORDING_AUDIO,
+} from "@olares/lares-core/voice/recorder";
+
+export { formatElapsed };
+
+export function createVoiceCapture({ transcribe, getDraft, setDraft, onPhase }) {
+  const queue = new TranscriptQueue();
+  let recorder = null;
+  let stream = null;
+  let chunks = [];
+  let started = 0;
+  let timer = 0;
+  let cancel = false;
+  let dead = false;
+  let abort = null;
+  let phase = "idle";
+
+  const emit = (next, extra = {}) => {
+    phase = next;
+    onPhase?.(next, extra);
+  };
+
+  const stopTimer = () => {
+    if (timer) {
+      clearInterval(timer);
+      timer = 0;
+    }
+  };
+
+  const release = () => {
+    stream?.getTracks().forEach((track) => track.stop());
+    stream = null;
+    recorder = null;
+  };
+
+  const fail = (code) => {
+    if (dead) return;
+    emit("error", { error: code, elapsed: 0 });
+    setTimeout(() => {
+      if (!dead && phase === "error") emit("idle", { error: "", elapsed: 0 });
+    }, 3200);
+  };
+
+  const finish = async () => {
+    stopTimer();
+    const took = Date.now() - started;
+    const type = recorder?.mimeType || "audio/webm";
+    const blobChunks = chunks;
+    chunks = [];
+    release();
+    if (dead) return;
+    if (cancel) {
+      emit("idle", { elapsed: 0 });
+      return;
+    }
+    const blob = new Blob(blobChunks, { type });
+    if (isRecordingTooShort(took, blob.size)) {
+      fail("voice_too_short");
+      return;
+    }
+    emit("transcribing", { elapsed: took });
+    abort = new AbortController();
+    try {
+      const text = await transcribe(blob, abort.signal);
+      if (dead) return;
+      emit("idle", { elapsed: 0 });
+      queue.apply(text, true, getDraft(), setDraft);
+    } catch (err) {
+      if (dead || abort.signal.aborted) return;
+      fail(err instanceof Error ? err.message : "voice_failed");
+    } finally {
+      abort = null;
+    }
+  };
+
+  return {
+    get phase() {
+      return phase;
+    },
+    async start() {
+      if (dead || phase === "recording" || phase === "transcribing") return;
+      if (typeof MediaRecorder === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+        fail("voice_unsupported");
+        return;
+      }
+      cancel = false;
+      let next;
+      try {
+        next = await navigator.mediaDevices.getUserMedia({ audio: RECORDING_AUDIO });
+      } catch {
+        fail("voice_permission_denied");
+        return;
+      }
+      if (dead || cancel) {
+        next.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      stream = next;
+      chunks = [];
+      const mime = pickRecordingMime();
+      recorder = new MediaRecorder(stream, mime ? { mimeType: mime } : undefined);
+      recorder.ondataavailable = (event) => {
+        if (event.data?.size) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        void finish();
+      };
+      started = Date.now();
+      emit("recording", { elapsed: 0, error: "" });
+      recorder.start();
+      timer = setInterval(() => emit("recording", { elapsed: Date.now() - started }), 200);
+    },
+    stop(aborting = false) {
+      cancel = Boolean(aborting);
+      if (recorder && recorder.state !== "inactive") recorder.stop();
+      else {
+        stopTimer();
+        release();
+        emit("idle", { elapsed: 0 });
+      }
+    },
+    toggle() {
+      if (phase === "recording") this.stop(false);
+      else if (phase === "idle" || phase === "error") void this.start();
+    },
+    dispose() {
+      dead = true;
+      stopTimer();
+      abort?.abort();
+      if (recorder && recorder.state !== "inactive") recorder.stop();
+      release();
+    },
+  };
+}

package/src/host.js

@@ -0,0 +1,162 @@
+import { hostConfigFromEnv, 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";
+import { createHostSettings } from "@olares/lares-core/larepass/settings";
+import { downloadFileUrl, previewMetaUrl, rawFileUrl } from "@olares/lares-core/files/preview-workspace";
+import { FILES_UPLOAD_PATH, uploadFile } from "@olares/lares-core/files/upload-client";
+import { API as VOICE_API, postTranscribe } from "@olares/lares-core/voice/client";
+
+function pageOrigin() {
+  try {
+    return globalThis.location?.origin || "http://localhost";
+  } catch {
+    return "http://localhost";
+  }
+}
+
+function openMuxSocket(httpUrl, signal) {
+  const Socket = globalThis.WebSocket;
+  if (typeof Socket !== "function") {
+    return Promise.resolve({
+      ok: false,
+      status: "error",
+      error: { code: "no-websocket", message: "WebSocket is not available" },
+    });
+  }
+  return new Promise((resolve) => {
+    let settled = false;
+    const socket = new Socket(muxWsUrl(httpUrl, pageOrigin()));
+    const finish = (result) => {
+      if (settled) return;
+      settled = true;
+      signal?.removeEventListener("abort", onAbort);
+      resolve(result);
+    };
+    const onAbort = () => {
+      try {
+        socket.close();
+      } catch {
+        // already closing
+      }
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    if (signal?.aborted) {
+      onAbort();
+      finish({ ok: false, status: "error", error: { code: "aborted", message: "mux aborted" } });
+      return;
+    }
+    socket.addEventListener("open", () => {
+      finish({ ok: true, http: 101, status: 101, body: socket });
+    }, { once: true });
+    socket.addEventListener("error", () => {
+      finish({
+        ok: false,
+        status: "unreachable",
+        error: { code: "unreachable", message: "mux websocket failed" },
+      });
+    }, { once: true });
+  });
+}
+
+export async function defaultRequest(url, init = {}) {
+  const res = await fetch(url, {
+    method: init.method ?? "GET",
+    body: init.body === undefined
+      ? undefined
+      : typeof init.body === "string"
+        ? init.body
+        : JSON.stringify(init.body),
+    credentials: "include",
+    redirect: "manual",
+    signal: init.signal,
+    headers: {
+      ...(init.body === undefined ? {} : { "content-type": "application/json" }),
+      ...init.headers,
+    },
+  });
+  const text = await res.text();
+  let body;
+  if (text) {
+    try {
+      body = JSON.parse(text);
+    } catch {
+      body = text;
+    }
+  }
+  return {
+    ok: res.status >= 200 && res.status < 300,
+    status: res.status,
+    body,
+  };
+}
+
+export function createHostClient(ports = {}) {
+  const fromEnv = hostConfigFromEnv(ports.env);
+  const baseUrl = ports.baseUrl ?? fromEnv.baseUrl;
+  const proxyPrefix = ports.proxyPrefix ?? fromEnv.proxyPrefix;
+  const send = ports.request ?? defaultRequest;
+  const urlFor = (path) => hostUrl({ baseUrl, proxyPrefix, path });
+  const request = (path, init) => send(urlFor(path), init);
+  const rpc = (method, payload) => callRpc(request, method, payload);
+  return {
+    urlFor,
+    probe() {
+      if (!proxyPrefix && !baseUrl) {
+        return Promise.resolve({ status: "missing" });
+      }
+      return probeHost((path) => request(path), MODELS_PATH);
+    },
+    rpc,
+    ensureSession() {
+      return ensureSession(rpc);
+    },
+    history(sessionId) {
+      return loadTranscript(rpc, sessionId);
+    },
+    prompt(sessionId, text) {
+      return sendPrompt(rpc, sessionId, text);
+    },
+    async respond(message) {
+      const res = await request(RESPOND_PATH, { method: "POST", body: message });
+      const body = res?.body;
+      if (body && typeof body === "object" && typeof body.accepted === "boolean") return body;
+      return { accepted: Boolean(res?.ok), reason: res?.ok ? undefined : "bad-response" };
+    },
+    async preview(sessionId, path) {
+      const res = await request(previewMetaUrl(sessionId, path));
+      const http = Number(res?.status) || 0;
+      const body = res?.body;
+      if (http < 200 || http >= 300) {
+        const code = body?.error?.code || "file_preview_failed";
+        throw new Error(code);
+      }
+      return body;
+    },
+    mediaUrl(sessionId, path, modifiedAt) {
+      return urlFor(rawFileUrl(sessionId, path, modifiedAt));
+    },
+    downloadUrl(sessionId, path) {
+      return urlFor(downloadFileUrl(sessionId, path));
+    },
+    upload(sessionId, file, options) {
+      return uploadFile(file, sessionId, { ...options, url: urlFor(FILES_UPLOAD_PATH) });
+    },
+    transcribe(blob, language, signal) {
+      return postTranscribe(blob, language, signal, { baseUrl: urlFor(VOICE_API) });
+    },
+    async openMux(signal) {
+      try {
+        return await openMuxSocket(urlFor(MUX_PATH), signal);
+      } catch (err) {
+        return {
+          ok: false,
+          status: "unreachable",
+          error: { code: "unreachable", message: err instanceof Error ? err.message : String(err) },
+        };
+      }
+    },
+    consumeMux,
+    settings: createHostSettings(request),
+  };
+}

package/src/i18n.js

@@ -0,0 +1,15 @@
+import { t as translate } from "@olares/lares-core/i18n/t";
+import { EN, ZH } from "@olares/lares-core/i18n/mobile";
+import { EN as PREVIEW_EN, ZH as PREVIEW_ZH } from "@olares/lares-core/i18n/preview";
+import { EN as FILES_EN, ZH as FILES_ZH } from "@olares/lares-core/i18n/files";
+import { EN as VOICE_EN, ZH as VOICE_ZH } from "@olares/lares-core/i18n/voice";
+import { EN as MODEL_EN, ZH as MODEL_ZH } from "@olares/lares-core/i18n/chat-model-switch";
+
+const catalog = {
+  zh: { ...PREVIEW_ZH, ...FILES_ZH, ...VOICE_ZH, ...MODEL_ZH, ...ZH },
+  en: { ...PREVIEW_EN, ...FILES_EN, ...VOICE_EN, ...MODEL_EN, ...EN },
+};
+
+export function createT(locale) {
+  return (key, params) => translate(catalog, locale, key, params);
+}

package/src/index.d.ts

@@ -0,0 +1,61 @@
+import { DefineComponent } from "vue";
+
+export type HostRequestInit = {
+  method?: string;
+  body?: unknown;
+  signal?: AbortSignal;
+  headers?: Record<string, string>;
+};
+
+export type HostResponse = {
+  ok: boolean;
+  status: number;
+  body?: unknown;
+};
+
+export type HostEnv = {
+  PROTOCOL?: string;
+  LARES_SUB_DOMAIN?: string;
+  ACCOUNT_DOMAIN?: string;
+  IS_PC_TEST?: string | boolean | number;
+};
+
+export type HostPorts = {
+  baseUrl?: string;
+  proxyPrefix?: string;
+  env?: HostEnv;
+  request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
+};
+
+export const PC_TEST_PROXY: string;
+
+export function hostConfigFromEnv(env?: HostEnv): {
+  baseUrl: string;
+  proxyPrefix: string;
+};
+
+export function defaultRequest(url: string, init?: HostRequestInit): Promise<HostResponse>;
+
+export function createHostClient(ports?: HostPorts): {
+  urlFor: (path: string) => string;
+  probe: () => Promise<{ status: string; http?: number; error?: string }>;
+  ensureSession: () => Promise<{ ok: boolean; value?: { sessionId: string } }>;
+  history: (sessionId: string) => Promise<{ ok: boolean; value?: unknown }>;
+  prompt: (sessionId: string, text: string) => Promise<{ ok: boolean }>;
+};
+
+export const LaresApp: DefineComponent<{
+  locale?: string;
+  baseUrl?: string;
+  proxyPrefix?: string;
+  env?: HostEnv;
+  request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
+}>;
+
+export const LaresAgentSettings: DefineComponent<{
+  locale?: string;
+  baseUrl?: string;
+  proxyPrefix?: string;
+  env?: HostEnv;
+  request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
+}>;

package/src/index.js

@@ -0,0 +1,4 @@
+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";

package/src/preview/Preview.vue

@@ -0,0 +1,220 @@
+<template>
+  <Teleport to="body">
+    <div class="lares-preview" role="dialog" aria-modal="true" :aria-label="t('preview')">
+      <header class="lares-preview__bar">
+        <button type="button" class="lares-preview__back" @click="$emit('close')">{{ t("chat") }}</button>
+        <strong class="lares-preview__name" :title="path">{{ name }}</strong>
+        <a
+          v-if="downloadHref"
+          class="lares-preview__link"
+          :href="downloadHref"
+          download
+        >{{ t("download") }}</a>
+      </header>
+      <div v-if="status === 'loading'" class="lares-preview__hint">{{ t("loading") }}</div>
+      <div v-else-if="status === 'error'" class="lares-preview__hint">
+        <p>{{ failText }}</p>
+        <button type="button" class="lares-preview__link" @click="$emit('retry')">{{ t("retry") }}</button>
+      </div>
+      <div v-else-if="data?.kind === 'image'" class="lares-preview__media">
+        <img :src="mediaSrc" :alt="name" />
+      </div>
+      <div v-else-if="data?.kind === 'video'" class="lares-preview__media">
+        <video :src="mediaSrc" controls playsinline />
+      </div>
+      <div v-else-if="data?.kind === 'audio'" class="lares-preview__media">
+        <audio :src="mediaSrc" controls />
+      </div>
+      <iframe
+        v-else-if="data?.kind === 'pdf'"
+        class="lares-preview__pdf"
+        :src="mediaSrc"
+        :title="name"
+      />
+      <div
+        v-else-if="data?.kind === 'markdown'"
+        class="lares-preview__markdown"
+        v-html="markdownHtml"
+        @click="onMarkdownClick"
+      />
+      <pre v-else-if="data?.kind === 'text'" class="lares-preview__text">{{ data.text }}</pre>
+      <div v-else class="lares-preview__hint">
+        <p>{{ t("unsupportedTitle") }}</p>
+        <p>{{ t("unsupported") }}</p>
+      </div>
+      <p v-if="data?.truncated" class="lares-preview__hint">{{ t("truncated") }}</p>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { fileName, workspaceLinkClickPath } from "@olares/lares-core/files/preview-workspace";
+import { rewriteWorkspaceTargets } from "@olares/lares-core/files/markdown";
+import { messageFromCode } from "@olares/lares-core/i18n/t";
+import { renderMarkdown } from "../chat/markdown.js";
+
+export default {
+  name: "LaresPreview",
+  props: {
+    path: { type: String, required: true },
+    sessionId: { type: String, default: "" },
+    status: { type: String, default: "loading" },
+    data: { type: Object, default: null },
+    error: { type: String, default: "" },
+    mediaSrc: { type: String, default: "" },
+    downloadHref: { type: String, default: "" },
+    hrefFor: { type: Function, default: null },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "retry", "open"],
+  computed: {
+    name() {
+      return this.data?.name || fileName(this.path);
+    },
+    failText() {
+      return messageFromCode(this.t, this.error, "failed");
+    },
+    markdownHtml() {
+      const text = this.data?.text ?? "";
+      const rewritten = this.hrefFor
+        ? rewriteWorkspaceTargets(text, this.data?.path ?? this.path, this.hrefFor)
+        : text;
+      return renderMarkdown(rewritten);
+    },
+  },
+  methods: {
+    onMarkdownClick(event) {
+      if (!this.sessionId) return;
+      const path = workspaceLinkClickPath(this.sessionId, event);
+      if (path === null) return;
+      event.preventDefault();
+      this.$emit("open", path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-preview {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--q-background-1);
+  color: var(--q-ink-1);
+}
+
+.lares-preview__bar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+  height: 56px;
+  padding: 0 12px;
+}
+
+.lares-preview__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.lares-preview__back,
+.lares-preview__link {
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--q-blue-default);
+  text-decoration: none;
+}
+
+.lares-preview__hint,
+.lares-preview__text,
+.lares-preview__markdown {
+  margin: 0;
+  padding: 12px 20px;
+  font-size: 14px;
+  color: var(--q-ink-2);
+}
+
+.lares-preview__text,
+.lares-preview__markdown {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  color: var(--q-ink-1);
+}
+
+.lares-preview__text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.lares-preview__markdown :deep(p),
+.lares-preview__markdown :deep(pre) {
+  margin: 0 0 10px;
+}
+
+.lares-preview__markdown :deep(ul),
+.lares-preview__markdown :deep(ol) {
+  margin: 4px 0 12px;
+  padding: 0 0 0 1.35em;
+}
+
+.lares-preview__markdown :deep(ul) {
+  list-style: disc outside;
+}
+
+.lares-preview__markdown :deep(ol) {
+  list-style: decimal outside;
+}
+
+.lares-preview__markdown :deep(li + li) {
+  margin-top: 6px;
+}
+
+.lares-preview__markdown :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.lares-preview__media {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  place-items: center;
+  overflow: auto;
+  padding: 16px 20px;
+}
+
+.lares-preview__media img,
+.lares-preview__media video {
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  min-height: 0;
+  border-radius: 10px;
+  object-fit: contain;
+}
+
+.lares-preview__pdf {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border: 0;
+}
+
+.lares-preview__media audio {
+  width: min(100%, 520px);
+}
+</style>

package/src/runtime.js

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