@lapismd/design-core 0.1.0

package/src/shared/ai/speech-recognition.svelte.ts

@@ -0,0 +1,329 @@
+import type {
+  DictationOptions,
+  SpeechRecognitionConstructor,
+  SpeechRecognitionController,
+  SpeechRecognitionOptions,
+  SpeechRecognitionResultEvent,
+} from "./types.js";
+
+type BrowserWindow = Window & {
+  SpeechRecognition?: SpeechRecognitionConstructor;
+  webkitSpeechRecognition?: SpeechRecognitionConstructor;
+};
+
+function browserRecognitionConstructor(): SpeechRecognitionConstructor | null {
+  if (typeof window === "undefined") return null;
+  const browserWindow = window as BrowserWindow;
+  return (
+    browserWindow.SpeechRecognition ??
+    browserWindow.webkitSpeechRecognition ??
+    null
+  );
+}
+
+function defaultGetUserMedia(
+  constraints: MediaStreamConstraints,
+): Promise<MediaStream> {
+  if (
+    typeof navigator === "undefined" ||
+    !navigator.mediaDevices?.getUserMedia
+  ) {
+    return Promise.reject(new Error("Media capture is unavailable"));
+  }
+  return navigator.mediaDevices.getUserMedia(constraints);
+}
+
+function defaultAudioContext(): AudioContext {
+  return new AudioContext();
+}
+
+function defaultRaf(callback: FrameRequestCallback): number {
+  if (typeof requestAnimationFrame === "function") {
+    return requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(Date.now()), 16) as unknown as number;
+}
+
+function defaultCaf(id: number): void {
+  if (typeof cancelAnimationFrame === "function") {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+
+function normalizeBands(data: Uint8Array, count: number): number[] {
+  if (data.length === 0) return Array.from({ length: count }, () => 0);
+  const width = Math.max(1, Math.floor(data.length / count));
+  return Array.from({ length: count }, (_, index) => {
+    const start = index * width;
+    const end =
+      index === count - 1 ? data.length : Math.min(data.length, start + width);
+    let sum = 0;
+    for (let cursor = start; cursor < end; cursor += 1) {
+      sum += data[cursor] ?? 0;
+    }
+    return Math.min(1, sum / Math.max(1, end - start) / 255);
+  });
+}
+
+/**
+ * Progressive Web Speech/Web Audio controller. All browser resources are
+ * capability-detected and released by `cleanup`.
+ */
+export function createSpeechRecognition(
+  options: SpeechRecognitionOptions = {},
+): SpeechRecognitionController {
+  const Recognition =
+    options.recognitionConstructor === undefined
+      ? browserRecognitionConstructor()
+      : options.recognitionConstructor;
+  const getUserMedia =
+    options.getUserMedia === undefined
+      ? defaultGetUserMedia
+      : options.getUserMedia;
+  const createAudioContext =
+    options.createAudioContext === undefined
+      ? defaultAudioContext
+      : options.createAudioContext;
+  const raf = options.requestAnimationFrame ?? defaultRaf;
+  const caf = options.cancelAnimationFrame ?? defaultCaf;
+
+  let recognition: InstanceType<SpeechRecognitionConstructor> | null = null;
+  let stream: MediaStream | null = null;
+  let audioContext: AudioContext | null = null;
+  let analyser: AnalyserNode | null = null;
+  let animationFrame = 0;
+  let starting: Promise<void> | null = null;
+
+  let isListening = $state(false);
+  let isSpeaking = $state(false);
+  let volume = $state(0);
+  let bands = $state<number[]>([0, 0, 0, 0, 0]);
+  let rawBands = $state<number[]>([0, 0, 0, 0, 0]);
+  let interimTranscript = $state("");
+
+  const transform = options.transformTranscript ?? ((value: string) => value);
+
+  function stopMeter(): void {
+    if (animationFrame) {
+      caf(animationFrame);
+      animationFrame = 0;
+    }
+    analyser?.disconnect();
+    analyser = null;
+    stream?.getTracks().forEach((track) => track.stop());
+    stream = null;
+    if (audioContext && audioContext.state !== "closed") {
+      void audioContext.close();
+    }
+    audioContext = null;
+    volume = 0;
+    bands = [0, 0, 0, 0, 0];
+    rawBands = [0, 0, 0, 0, 0];
+  }
+
+  async function startMeter(): Promise<void> {
+    if (!getUserMedia || !createAudioContext) return;
+    try {
+      stream = await getUserMedia({ audio: true });
+      audioContext = createAudioContext();
+      analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      analyser.smoothingTimeConstant = 0.72;
+      audioContext.createMediaStreamSource(stream).connect(analyser);
+      const data = new Uint8Array(analyser.frequencyBinCount);
+
+      const sample = () => {
+        if (!analyser) return;
+        analyser.getByteFrequencyData(data);
+        rawBands = normalizeBands(data, 5);
+        bands = rawBands.map((value, index) =>
+          Math.min(1, value * (1.1 + index * 0.08)),
+        );
+        volume =
+          rawBands.reduce((sum, value) => sum + value, 0) / rawBands.length;
+        animationFrame = raf(sample);
+      };
+      animationFrame = raf(sample);
+    } catch {
+      // Speech recognition remains useful when microphone metering is blocked.
+      stopMeter();
+    }
+  }
+
+  function handleResults(event: SpeechRecognitionResultEvent): void {
+    let interim = "";
+    let final = "";
+    for (
+      let index = event.resultIndex;
+      index < event.results.length;
+      index += 1
+    ) {
+      const result = event.results[index];
+      const transcript = result?.[0]?.transcript ?? "";
+      if (result?.isFinal) final += transcript;
+      else interim += transcript;
+    }
+
+    interimTranscript = transform(interim);
+    if (interimTranscript) {
+      options.onTranscript?.(interimTranscript, false);
+    }
+    if (final) {
+      const transformed = transform(final);
+      interimTranscript = "";
+      options.onTranscript?.(transformed, true);
+      options.onResult?.(transformed);
+    }
+  }
+
+  function ensureRecognition() {
+    if (!Recognition) return null;
+    if (recognition) return recognition;
+    recognition = new Recognition();
+    recognition.lang = options.lang ?? "en-US";
+    recognition.continuous = options.continuous ?? true;
+    recognition.interimResults = options.interimResults ?? true;
+    recognition.onstart = () => {
+      isListening = true;
+      options.onStart?.();
+    };
+    recognition.onend = () => {
+      isListening = false;
+      isSpeaking = false;
+      stopMeter();
+      options.onEnd?.();
+    };
+    recognition.onspeechstart = () => {
+      isSpeaking = true;
+    };
+    recognition.onspeechend = () => {
+      isSpeaking = false;
+    };
+    recognition.onresult = handleResults;
+    recognition.onerror = (error) => {
+      isListening = false;
+      isSpeaking = false;
+      stopMeter();
+      options.onError?.(error);
+    };
+    recognition.onnomatch = () => {
+      interimTranscript = "";
+    };
+    return recognition;
+  }
+
+  async function start(): Promise<void> {
+    const instance = ensureRecognition();
+    if (!instance || isListening) return;
+    if (starting) return starting;
+    starting = (async () => {
+      await startMeter();
+      try {
+        instance.start();
+      } catch (error) {
+        stopMeter();
+        options.onError?.({
+          error: "start-failed",
+          message: error instanceof Error ? error.message : String(error),
+        });
+      } finally {
+        starting = null;
+      }
+    })();
+    return starting;
+  }
+
+  function stop(): void {
+    recognition?.stop();
+  }
+
+  function abort(): void {
+    recognition?.abort();
+    isListening = false;
+    isSpeaking = false;
+    interimTranscript = "";
+    stopMeter();
+  }
+
+  function cleanup(): void {
+    if (recognition) {
+      recognition.onstart = null;
+      recognition.onend = null;
+      recognition.onresult = null;
+      recognition.onspeechstart = null;
+      recognition.onspeechend = null;
+      recognition.onerror = null;
+      recognition.onnomatch = null;
+      recognition.abort();
+      recognition = null;
+    }
+    isListening = false;
+    isSpeaking = false;
+    interimTranscript = "";
+    stopMeter();
+  }
+
+  return {
+    get isSupported() {
+      return Recognition != null;
+    },
+    get isListening() {
+      return isListening;
+    },
+    get isSpeaking() {
+      return isSpeaking;
+    },
+    get volume() {
+      return volume;
+    },
+    get bands() {
+      return bands;
+    },
+    get rawBands() {
+      return rawBands;
+    },
+    get interimTranscript() {
+      return interimTranscript;
+    },
+    start,
+    stop,
+    abort,
+    async toggle() {
+      if (isListening) stop();
+      else await start();
+    },
+    cleanup,
+  };
+}
+
+/**
+ * Composer-aware speech controller. Final transcripts are inserted through the
+ * imperative input handle; consumers still receive every callback.
+ */
+export function createDictation(
+  options: DictationOptions = {},
+): SpeechRecognitionController {
+  const {
+    input,
+    transformFinalTranscript = (value) => value,
+    onTranscript,
+    onResult,
+    ...speechOptions
+  } = options;
+
+  return createSpeechRecognition({
+    ...speechOptions,
+    onTranscript(transcript, isFinal) {
+      onTranscript?.(transcript, isFinal);
+      if (isFinal) {
+        const value = transformFinalTranscript(transcript);
+        input?.insertText(value.endsWith(" ") ? value : `${value} `);
+      }
+    },
+    onResult(transcript) {
+      onResult?.(transcript);
+    },
+  });
+}

package/src/shared/ai/stream-scroll.svelte.ts

@@ -0,0 +1,238 @@
+export type ScrollBehavior = "instant" | "spring";
+
+export type StreamScrollOptions = {
+  enabled?: boolean;
+  lockThreshold?: number;
+  buttonThreshold?: number;
+  damping?: number;
+  stiffness?: number;
+  mass?: number;
+  requestAnimationFrame?: typeof globalThis.requestAnimationFrame;
+  cancelAnimationFrame?: typeof globalThis.cancelAnimationFrame;
+  prefersReducedMotion?: () => boolean;
+};
+
+export type ScrollToBottomOptions = {
+  behavior?: ScrollBehavior;
+};
+
+export type StreamScrollController = {
+  readonly isScrolledUp: boolean;
+  readonly isLocked: boolean;
+  attach: (element: HTMLElement | null) => void;
+  cleanup: () => void;
+  update: () => void;
+  scrollToBottom: (options?: ScrollToBottomOptions) => void;
+  scrollToMessage: (element: HTMLElement) => void;
+  scrollToLastMessage: () => void;
+  scrollIfLocked: () => void;
+  lock: () => void;
+  unlock: () => void;
+};
+
+function reducedMotionDefault(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+function defaultRaf(callback: FrameRequestCallback): number {
+  if (typeof requestAnimationFrame === "function") {
+    return requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(Date.now()), 16) as unknown as number;
+}
+
+function defaultCaf(id: number): void {
+  if (typeof cancelAnimationFrame === "function") {
+    cancelAnimationFrame(id);
+  } else {
+    clearTimeout(id);
+  }
+}
+
+export function createStreamScroll(
+  options: StreamScrollOptions = {},
+): StreamScrollController {
+  const {
+    enabled = true,
+    lockThreshold = 24,
+    buttonThreshold = 80,
+    damping = 26,
+    stiffness = 220,
+    mass = 1,
+    requestAnimationFrame: raf = defaultRaf,
+    cancelAnimationFrame: caf = defaultCaf,
+    prefersReducedMotion = reducedMotionDefault,
+  } = options;
+
+  let element: HTMLElement | null = null;
+  let frame = 0;
+  let lastTime = 0;
+  let velocity = 0;
+  let isLocked = $state(true);
+  let isScrolledUp = $state(false);
+
+  function distanceFromBottom(): number {
+    if (!element) return 0;
+    return Math.max(
+      0,
+      element.scrollHeight - element.clientHeight - element.scrollTop,
+    );
+  }
+
+  function update(): void {
+    if (!element || !enabled) {
+      isScrolledUp = false;
+      return;
+    }
+    const distance = distanceFromBottom();
+    isScrolledUp = distance > buttonThreshold;
+    isLocked = distance <= lockThreshold;
+  }
+
+  function stopAnimation(): void {
+    if (frame) {
+      caf(frame);
+      frame = 0;
+    }
+    velocity = 0;
+    lastTime = 0;
+  }
+
+  function jumpToBottom(): void {
+    if (!element) return;
+    stopAnimation();
+    element.scrollTop = Math.max(
+      0,
+      element.scrollHeight - element.clientHeight,
+    );
+    isLocked = true;
+    isScrolledUp = false;
+  }
+
+  function springToBottom(): void {
+    if (!element) return;
+    stopAnimation();
+
+    const tick = (time: number) => {
+      if (!element) return;
+      const dt = Math.min(
+        0.064,
+        Math.max(0.001, (time - lastTime) / 1000 || 0.016),
+      );
+      lastTime = time;
+      const target = Math.max(0, element.scrollHeight - element.clientHeight);
+      const displacement = target - element.scrollTop;
+      const acceleration =
+        (stiffness * displacement - damping * velocity) / mass;
+      velocity += acceleration * dt;
+      element.scrollTop += velocity * dt;
+
+      if (Math.abs(displacement) < 0.5 && Math.abs(velocity) < 0.5) {
+        element.scrollTop = target;
+        frame = 0;
+        velocity = 0;
+        isLocked = true;
+        isScrolledUp = false;
+        return;
+      }
+      frame = raf(tick);
+    };
+
+    frame = raf(tick);
+  }
+
+  function scrollToBottom({
+    behavior = "spring",
+  }: ScrollToBottomOptions = {}): void {
+    if (!element || !enabled) return;
+    if (behavior === "instant" || prefersReducedMotion()) {
+      jumpToBottom();
+      return;
+    }
+    springToBottom();
+  }
+
+  function handleScroll(): void {
+    update();
+  }
+
+  function handleUserScrollIntent(): void {
+    if (frame) stopAnimation();
+  }
+
+  function attach(next: HTMLElement | null): void {
+    if (element === next) return;
+    cleanup();
+    element = next;
+    element?.addEventListener("scroll", handleScroll, { passive: true });
+    element?.addEventListener("wheel", handleUserScrollIntent, {
+      passive: true,
+    });
+    element?.addEventListener("touchstart", handleUserScrollIntent, {
+      passive: true,
+    });
+    element?.addEventListener("pointerdown", handleUserScrollIntent, {
+      passive: true,
+    });
+    if (element && enabled) {
+      raf(() => {
+        if (element === next) jumpToBottom();
+      });
+    }
+  }
+
+  function cleanup(): void {
+    element?.removeEventListener("scroll", handleScroll);
+    element?.removeEventListener("wheel", handleUserScrollIntent);
+    element?.removeEventListener("touchstart", handleUserScrollIntent);
+    element?.removeEventListener("pointerdown", handleUserScrollIntent);
+    stopAnimation();
+    element = null;
+  }
+
+  return {
+    get isScrolledUp() {
+      return isScrolledUp;
+    },
+    get isLocked() {
+      return isLocked;
+    },
+    attach,
+    cleanup,
+    update,
+    scrollToBottom,
+    scrollToMessage(message) {
+      if (!element) return;
+      stopAnimation();
+      const offset =
+        message.getBoundingClientRect().top -
+        element.getBoundingClientRect().top +
+        element.scrollTop;
+      element.scrollTop = Math.max(0, offset);
+      update();
+    },
+    scrollToLastMessage() {
+      const message = element?.querySelector<HTMLElement>(
+        '[data-ui-component="ai-chat-message"]',
+      );
+      const all = element?.querySelectorAll<HTMLElement>(
+        '[data-ui-component="ai-chat-message"]',
+      );
+      const last = all?.item((all?.length ?? 1) - 1) ?? message;
+      if (last) this.scrollToMessage(last);
+    },
+    scrollIfLocked() {
+      if (isLocked) scrollToBottom({ behavior: "instant" });
+    },
+    lock() {
+      isLocked = true;
+    },
+    unlock() {
+      isLocked = false;
+    },
+  };
+}

package/src/shared/ai/system-message/SystemMessage.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { Separator } from "@lapismd/design-core/shadcn/separator";
+  import "../chat.css";
+
+  let {
+    ref = $bindable(null),
+    variant = "default",
+    icon,
+    children,
+    ...restProps
+  }: HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    variant?: "default" | "divider";
+    icon?: Snippet;
+    children: Snippet;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="ai-chat-system-message"
+  data-ui-part="root"
+  data-variant={variant}
+  role="status"
+>
+  {#if variant === "divider"}
+    <Separator />
+  {/if}
+  {#if icon}
+    <span data-ui-part="icon">
+      {@render icon()}
+    </span>
+  {/if}
+  <span data-ui-part="content">
+    {@render children()}
+  </span>
+  {#if variant === "divider"}
+    <Separator />
+  {/if}
+</div>

package/src/shared/ai/system-message/index.ts

@@ -0,0 +1 @@
+export { default as SystemMessage } from "./SystemMessage.svelte";

package/src/shared/ai/tokenized-text/TokenizedText.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import Token from "../composer-token/ComposerToken.svelte";
+  import type { ComposerToken as ComposerTokenValue } from "../types.js";
+  import "../chat.css";
+
+  let {
+    ref = $bindable(null),
+    text,
+    tokens = [],
+    ...restProps
+  }: HTMLAttributes<HTMLSpanElement> & {
+    ref?: HTMLSpanElement | null;
+    text: string;
+    tokens?: ComposerTokenValue[];
+  } = $props();
+
+  type Part =
+    | { kind: "text"; value: string }
+    | {
+        kind: "token";
+        token: ComposerTokenValue;
+        key: string;
+      };
+
+  function tokenize(value: string, definitions: ComposerTokenValue[]): Part[] {
+    if (!value || definitions.length === 0) {
+      return [{ kind: "text", value }];
+    }
+    const sorted = [...definitions]
+      .filter((token) => token.value.length > 0)
+      .sort((left, right) => right.value.length - left.value.length);
+    const result: Part[] = [];
+    let cursor = 0;
+    while (cursor < value.length) {
+      const match = sorted
+        .map((token) => ({ token, index: value.indexOf(token.value, cursor) }))
+        .filter(({ index }) => index >= 0)
+        .sort((left, right) => left.index - right.index)[0];
+      if (!match) {
+        result.push({ kind: "text", value: value.slice(cursor) });
+        break;
+      }
+      if (match.index > cursor) {
+        result.push({
+          kind: "text",
+          value: value.slice(cursor, match.index),
+        });
+      }
+      result.push({
+        kind: "token",
+        token: match.token,
+        key: `${match.token.value}-${match.index}`,
+      });
+      cursor = match.index + match.token.value.length;
+    }
+    return result;
+  }
+
+  const parts = $derived(tokenize(text, tokens));
+</script>
+
+<span
+  bind:this={ref}
+  {...restProps}
+  data-ui-component="ai-chat-tokenized-text"
+  data-ui-part="root"
+>
+  {#each parts as part, index (part.kind === "token" ? part.key : `text-${index}`)}
+    {#if part.kind === "token"}
+      <Token token={part.token} />
+    {:else}
+      {part.value}
+    {/if}
+  {/each}
+</span>

package/src/shared/ai/tokenized-text/index.ts

@@ -0,0 +1 @@
+export { default as TokenizedText } from "./TokenizedText.svelte";