@mosetta/editor 0.0.0-stage → 0.0.29

package/tiles/workbench/dictation.ts

@@ -0,0 +1,354 @@
+// DICTATION into the assistant. Where the platform writes speech out (`/__mosetta__/transcribe`, a
+// speech recognition model that hears the language by itself), the browser records what the person
+// says and sends it whole when they stop — the words come a moment later, any language, no switch.
+// Elsewhere (a dev server) the browser's own speech recognition (the Web Speech API) turns speech
+// into text as it is said — on the device where the browser has the language (Chrome's
+// `processLocally`; a language it can fetch is fetched in the background for the next time),
+// through the browser's own service otherwise; its language is the person's choice among the ones
+// their browser names, remembered.
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface ISpeechResult {
+  readonly isFinal: boolean;
+  readonly 0: { readonly transcript: string };
+}
+
+interface ISpeechEvent {
+  readonly resultIndex: number;
+  readonly results: ArrayLike<ISpeechResult>;
+}
+
+interface ISpeechRecognition {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  processLocally?: boolean;
+  onresult: ((event: ISpeechEvent) => void) | null;
+  onerror: ((event: { readonly error: string }) => void) | null;
+  onaudiostart: (() => void) | null;
+  onend: (() => void) | null;
+  start(): void;
+  stop(): void;
+  abort(): void;
+}
+
+type TRecognitionClass = (new () => ISpeechRecognition) & {
+  /** Chrome: whether the language can be recognized on the device (`available`), or fetched for it (`downloadable`) */
+  available?: (options: { langs: string[]; processLocally: boolean }) => Promise<string>;
+  install?: (options: { langs: string[]; processLocally: boolean }) => Promise<boolean>;
+};
+
+/** whether this language is recognized on the device now; one that can be fetched starts fetching for next time */
+async function onDevice(Recognition: TRecognitionClass, lang: string): Promise<boolean> {
+  if (!Recognition.available) return false;
+  try {
+    const state = await Recognition.available({ langs: [lang], processLocally: true });
+    if (state === 'available') return true;
+    if (state === 'downloadable' && Recognition.install) void Recognition.install({ langs: [lang], processLocally: true }).catch(() => false);
+  } catch { /* the browser cannot say — its service then */ }
+  return false;
+}
+
+const recognitionClass = (): TRecognitionClass | null => {
+  if (typeof window === 'undefined') return null;
+  const w = window as unknown as { SpeechRecognition?: TRecognitionClass; webkitSpeechRecognition?: TRecognitionClass };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+};
+
+const LANG_KEY = 'mosetta-assistant-dictation-lang';
+
+/** the languages offered: the browser's own, one per primary language, as it orders them */
+export function dictationLanguages(preferred: readonly string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const tag of preferred) {
+    const primary = tag.split('-')[0].toLowerCase();
+    if (!primary || seen.has(primary)) continue;
+    seen.add(primary);
+    out.push(tag.includes('-') ? tag : primary);
+  }
+  return out.length ? out : ['en-US'];
+}
+
+export interface IDictation {
+  readonly supported: boolean;
+  readonly listening: boolean;
+  /** what was said is being written out — the recording is over */
+  readonly busy: boolean;
+  /** how long the recording runs, in seconds — 0 where the words come as they are said */
+  readonly seconds: number;
+  /** the language to dictate in; null — the platform hears it by itself */
+  readonly lang: string | null;
+  readonly langs: readonly string[];
+  /** a failure worth telling (no microphone allowed, …); null when all is well */
+  readonly problem: string | null;
+  toggle(): void;
+  /** dictation ended and its words written in — the text as it then is */
+  finish(): Promise<string>;
+  nextLang(): void;
+}
+
+/**
+ * Dictation by the browser's own recognition, written into a text as it is said: what was typed
+ * before it began, followed by what has been said so far (the words still being heard included).
+ */
+function useSpeechDictation(onText: (text: string) => void, currentText: () => string): IDictation {
+  const Recognition = recognitionClass();
+  const langs = dictationLanguages(typeof navigator === 'undefined' ? [] : navigator.languages ?? [navigator.language]);
+  const [lang, setLang] = useState<string>(() => {
+    try {
+      const held = window.localStorage.getItem(LANG_KEY);
+      if (held && langs.includes(held)) return held;
+    } catch { /* storage denied */ }
+    return langs[0];
+  });
+  const [listening, setListening] = useState(false);
+  const [problem, setProblem] = useState<string | null>(null);
+  // the recognition running (or starting): one at a time, whatever the clicks
+  const recognition = useRef<ISpeechRecognition | null>(null);
+  const starting = useRef(false);
+  // a language to go on in once the recognition running has ended (the person switched mid-way)
+  const restartIn = useRef<string | null>(null);
+
+  const start = useCallback(async (inLang: string): Promise<void> => {
+    if (!Recognition || recognition.current || starting.current) return;
+    starting.current = true;
+    const base = currentText().replace(/\s+$/, '');
+    setProblem(null);
+    const run = (local: boolean): void => {
+      const heard = new Recognition();
+      heard.lang = inLang;
+      heard.continuous = true;
+      heard.interimResults = true;
+      if (local) heard.processLocally = true;
+      let finals = '';
+      let retry = false;
+      heard.onresult = (event) => {
+        let interim = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) finals += result[0].transcript;
+          else interim += result[0].transcript;
+        }
+        const said = `${finals}${interim}`.trim();
+        onText(base && said ? `${base} ${said}` : base || said);
+      };
+      heard.onaudiostart = () => setListening(true);
+      heard.onerror = (event) => {
+        // the device could not after all: the browser's service takes over at once
+        if (local && (event.error === 'language-not-supported' || event.error === 'service-not-allowed')) retry = true;
+        else if (event.error === 'not-allowed') setProblem('the microphone is not allowed for this site');
+        else if (event.error !== 'aborted' && event.error !== 'no-speech') setProblem(`dictation stopped: ${event.error}`);
+      };
+      heard.onend = () => {
+        if (recognition.current !== heard) return;
+        recognition.current = null;
+        setListening(false);
+        if (retry) run(false);
+        else if (restartIn.current) {
+          const next = restartIn.current;
+          restartIn.current = null;
+          void start(next);
+        }
+      };
+      recognition.current = heard;
+      try {
+        heard.start();
+      } catch (e) {
+        recognition.current = null;
+        setListening(false);
+        setProblem(`dictation could not start: ${(e as Error).message}`);
+      }
+    };
+    try {
+      run(await onDevice(Recognition, inLang));
+    } finally {
+      starting.current = false;
+    }
+  }, [Recognition, currentText, onText]);
+
+  /** the recognition running, ended — at once, and for sure: a browser that never says it ended does not keep the button stuck */
+  const stop = useCallback((): void => {
+    const running = recognition.current;
+    if (!running) return;
+    running.stop();
+    setTimeout(() => {
+      if (recognition.current !== running) return;
+      running.abort();
+      recognition.current = null;
+      setListening(false);
+    }, 1500);
+  }, []);
+
+  useEffect(() => () => recognition.current?.abort(), []);
+
+  return {
+    supported: Recognition !== null,
+    listening,
+    busy: false,
+    seconds: 0,
+    lang,
+    langs,
+    problem,
+    toggle: () => {
+      if (recognition.current) stop();
+      else void start(lang);
+    },
+    finish: () => {
+      stop();
+      return Promise.resolve(currentText());
+    },
+    nextLang: () => {
+      const next = langs[(langs.indexOf(lang) + 1) % langs.length];
+      setLang(next);
+      try {
+        window.localStorage.setItem(LANG_KEY, next);
+      } catch { /* storage denied */ }
+      // switched while dictating: the words from here on are heard in the new language
+      if (recognition.current) {
+        restartIn.current = next;
+        recognition.current.abort();
+      }
+    },
+  };
+}
+
+// ---- recorded, written out by the platform ----
+
+export const TRANSCRIBE_PATH = '/__mosetta__/transcribe';
+/** the longest dictation — it stops by itself then, and is written out */
+export const RECORDING_SECONDS_MAX = 300;
+
+/** the recording format this browser makes: webm/opus in Chrome and Firefox, mp4/aac in Safari */
+function recordingType(): string | undefined {
+  for (const type of ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg;codecs=opus']) {
+    if (MediaRecorder.isTypeSupported(type)) return type;
+  }
+  return undefined;
+}
+
+/** the text with what was said added after it */
+export const withSaid = (text: string, said: string): string => {
+  const base = text.replace(/\s+$/, '');
+  return base && said ? `${base} ${said}` : base || said;
+};
+
+/** dictation the platform writes out: recorded until the person stops, the words added then */
+function useRecordedDictation(onText: (text: string) => void, currentText: () => string, offered: boolean): IDictation {
+  const supported = offered && typeof window !== 'undefined' && typeof window.MediaRecorder !== 'undefined' && Boolean(navigator.mediaDevices?.getUserMedia);
+  const [listening, setListening] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const [problem, setProblem] = useState<string | null>(null);
+  const recorder = useRef<MediaRecorder | null>(null);
+  // from the start of a recording until its words are in: one at a time
+  const done = useRef<Promise<string> | null>(null);
+
+  /** what was recorded, written out and added to the text — the text as it then is */
+  const writeOut = useCallback(async (audio: Blob): Promise<string> => {
+    if (!audio.size) return currentText();
+    setBusy(true);
+    try {
+      const res = await fetch(TRANSCRIBE_PATH, { method: 'POST', headers: { 'content-type': audio.type || 'audio/webm' }, body: audio });
+      const body = (await res.json().catch(() => null)) as { text?: unknown; error?: { message?: string } } | null;
+      if (!res.ok || typeof body?.text !== 'string') {
+        setProblem(body?.error?.message ?? `the speech could not be written out (${res.status})`);
+        return currentText();
+      }
+      const text = withSaid(currentText(), body.text);
+      onText(text);
+      return text;
+    } catch (e) {
+      setProblem(`the speech could not be written out: ${(e as Error).message}`);
+      return currentText();
+    } finally {
+      setBusy(false);
+    }
+  }, [currentText, onText]);
+
+  const start = useCallback((): void => {
+    if (done.current) return;
+    setProblem(null);
+    let stopped: () => void = () => undefined;
+    const over = new Promise<void>((resolve) => {
+      stopped = resolve;
+    });
+    done.current = (async () => {
+      let stream: MediaStream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      } catch (e) {
+        setProblem((e as DOMException).name === 'NotAllowedError' ? 'the microphone is not allowed for this site' : `no microphone: ${(e as Error).message}`);
+        return currentText();
+      }
+      const type = recordingType();
+      const heard = new MediaRecorder(stream, type ? { mimeType: type } : undefined);
+      const chunks: Blob[] = [];
+      heard.ondataavailable = (event) => {
+        if (event.data.size) chunks.push(event.data);
+      };
+      heard.onstop = () => stopped();
+      recorder.current = heard;
+      heard.start();
+      setSeconds(0);
+      setListening(true);
+      await over;
+      for (const track of stream.getTracks()) track.stop();
+      recorder.current = null;
+      setListening(false);
+      return writeOut(new Blob(chunks, { type: heard.mimeType || type || 'audio/webm' }));
+    })().finally(() => {
+      done.current = null;
+    });
+  }, [currentText, writeOut]);
+
+  const finish = useCallback((): Promise<string> => {
+    const running = recorder.current;
+    if (running && running.state !== 'inactive') running.stop();
+    return done.current ?? Promise.resolve(currentText());
+  }, [currentText]);
+
+  // the clock of a recording, and its end when it runs too long
+  useEffect(() => {
+    if (!listening) return undefined;
+    const tick = setInterval(() => setSeconds((s) => s + 1), 1000);
+    return () => clearInterval(tick);
+  }, [listening]);
+  useEffect(() => {
+    if (listening && seconds >= RECORDING_SECONDS_MAX) void finish();
+  }, [finish, listening, seconds]);
+  // leaving mid-way: the microphone is let go, nothing is sent
+  useEffect(() => () => {
+    const running = recorder.current;
+    if (!running) return;
+    running.ondataavailable = null;
+    if (running.state !== 'inactive') running.stop();
+    for (const track of running.stream.getTracks()) track.stop();
+  }, []);
+
+  return {
+    supported,
+    listening,
+    busy,
+    seconds,
+    lang: null,
+    langs: [],
+    problem,
+    toggle: () => {
+      if (recorder.current) void finish();
+      else if (!done.current) start();
+    },
+    finish,
+    nextLang: () => undefined,
+  };
+}
+
+/**
+ * Dictation that writes into a text: `onText` gets the text with what was said added, `currentText`
+ * reads it as it is. `transcription` — the platform writes speech out; else the browser does.
+ */
+export function useDictation(onText: (text: string) => void, currentText: () => string, transcription: boolean): IDictation {
+  const speech = useSpeechDictation(onText, currentText);
+  const recorded = useRecordedDictation(onText, currentText, transcription);
+  return recorded.supported ? recorded : speech;
+}

package/tiles/workbench/projectInfo.ts

@@ -0,0 +1,72 @@
+// What the shell knows about the PROJECT and the PERSON: the platform's Worker describes the
+// project at /__mosetta__/project (its host, the origin the public sees it under, its published
+// routes, who is signed in). A dev server has no such door — the shell then knows the host from
+// the address bar alone, and nobody is signed in.
+import { useEffect, useState } from 'react';
+
+export const PROJECT_INFO_PATH = '/__mosetta__/project';
+
+export interface IProjectInfo {
+  readonly host: string;
+  /** the public origin the project is served under (a client's own domain), or null */
+  readonly publicOrigin: string | null;
+  /** the published routes */
+  readonly pages: readonly { readonly pattern: string; readonly name: string; readonly rev: number }[];
+  readonly signedIn: { readonly via: string; readonly login: string } | null;
+  /** the platform's sign-in service — where signing out happens; null on a dev server */
+  readonly authOrigin: string | null;
+  /** the platform's own site (the projects list) — the way back from a project; null on a dev server */
+  readonly platformOrigin: string | null;
+  /** the distributions the project disconnected (by namespace) — the editor offers them no more */
+  readonly disabledDistributions: readonly string[];
+  /** the platform's assistant is there for this site (`/__mosetta__/assistant`) */
+  readonly assistant: boolean;
+  /** the platform writes dictation out (`/__mosetta__/transcribe`) */
+  readonly transcription: boolean;
+  /** the description came from the platform (false: made up from the address bar) */
+  readonly described: boolean;
+}
+
+const fromLocation = (): IProjectInfo => ({
+  host: typeof window === 'undefined' ? '' : window.location.host,
+  publicOrigin: null,
+  pages: [],
+  signedIn: null,
+  authOrigin: null,
+  platformOrigin: null,
+  disabledDistributions: [],
+  assistant: false,
+  transcription: false,
+  described: false,
+});
+
+/** the description, asked once; until it arrives — and where there is none — the address bar's */
+export function useProjectInfo(): IProjectInfo {
+  const [info, setInfo] = useState<IProjectInfo>(fromLocation);
+  useEffect(() => {
+    let alive = true;
+    fetch(PROJECT_INFO_PATH, { headers: { accept: 'application/json' } })
+      .then(async (res) => {
+        if (!alive || !res.ok) return;
+        const body = (await res.json()) as Partial<IProjectInfo>;
+        if (!alive || typeof body.host !== 'string') return;
+        setInfo({
+          host: body.host,
+          publicOrigin: typeof body.publicOrigin === 'string' ? body.publicOrigin : null,
+          pages: Array.isArray(body.pages) ? body.pages : [],
+          signedIn: body.signedIn && typeof body.signedIn.login === 'string' ? body.signedIn : null,
+          authOrigin: typeof body.authOrigin === 'string' ? body.authOrigin : null,
+          platformOrigin: typeof body.platformOrigin === 'string' ? body.platformOrigin : null,
+          disabledDistributions: Array.isArray(body.disabledDistributions) ? body.disabledDistributions.filter((n): n is string => typeof n === 'string') : [],
+          assistant: body.assistant === true,
+          transcription: body.transcription === true,
+          described: true,
+        });
+      })
+      .catch(() => undefined); // no platform behind this host: the address bar's words stand
+    return () => {
+      alive = false;
+    };
+  }, []);
+  return info;
+}

package/tiles/workbench/recent.ts

@@ -0,0 +1,67 @@
+// The RECENT list of the sidebar: the last pages and prefabs opened in this browser — a
+// convenience of this browser (localStorage), never content, newest first, a few at most.
+import type { ContentKind } from '@mosetta/content';
+
+export interface IRecentEntry {
+  readonly kind: ContentKind;
+  /** the page's (or prefab's) storage name — what opens it */
+  readonly page: string;
+  /** the words shown: the route, or the prefab's name */
+  readonly title: string;
+  readonly at: number;
+}
+
+export const RECENT_LIMIT = 8;
+const RECENT_KEY = 'mosetta-workbench-recent';
+/** the window event a write raises: the sidebar (another block) re-reads on it */
+export const RECENT_EVENT = 'mosetta-workbench-recent';
+
+type TRecentHost = Pick<Window, 'localStorage'> & Partial<Pick<Window, 'dispatchEvent' | 'addEventListener' | 'removeEventListener'>>;
+
+const isEntry = (value: unknown): value is IRecentEntry => typeof value === 'object' && value !== null
+  && ((value as IRecentEntry).kind === 'pages' || (value as IRecentEntry).kind === 'prefabs')
+  && typeof (value as IRecentEntry).page === 'string' && typeof (value as IRecentEntry).title === 'string'
+  && typeof (value as IRecentEntry).at === 'number';
+
+export function readRecent(host: Pick<Window, 'localStorage'>): IRecentEntry[] {
+  try {
+    const raw = host.localStorage.getItem(RECENT_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed.filter(isEntry).slice(0, RECENT_LIMIT) : [];
+  } catch {
+    return []; // a document that denies storage, or a list someone mangled by hand
+  }
+}
+
+export function writeRecent(host: TRecentHost, entries: readonly IRecentEntry[]): void {
+  try {
+    host.localStorage.setItem(RECENT_KEY, JSON.stringify(entries.slice(0, RECENT_LIMIT)));
+  } catch {
+    // nothing to do: the list lives for the page only
+  }
+  try {
+    host.dispatchEvent?.(new Event(RECENT_EVENT));
+  } catch {
+    // a host without events: no reader to tell
+  }
+}
+
+/** a document just opened goes first; the same page known before moves up */
+export function noteRecent(host: TRecentHost, entry: IRecentEntry): IRecentEntry[] {
+  const next = [entry, ...readRecent(host).filter((known) => !(known.kind === entry.kind && known.page === entry.page))].slice(0, RECENT_LIMIT);
+  writeRecent(host, next);
+  return next;
+}
+
+/** the entry of a page that is gone, removed; what it was called, for a notice */
+export function forgetRecent(host: TRecentHost, doc: { kind: ContentKind; page: string }): IRecentEntry | null {
+  const known = readRecent(host).find((entry) => entry.kind === doc.kind && entry.page === doc.page) ?? null;
+  if (known) writeRecent(host, readRecent(host).filter((entry) => !(entry.kind === doc.kind && entry.page === doc.page)));
+  return known;
+}
+
+/** the list as a store: `listener` runs on every write in this window; returns the unsubscribe */
+export function subscribeRecent(host: TRecentHost, listener: () => void): () => void {
+  host.addEventListener?.(RECENT_EVENT, listener);
+  return () => host.removeEventListener?.(RECENT_EVENT, listener);
+}