@alexkroman1/aai-ui 0.9.0

package/dist/worklets/capture-processor.js

@@ -0,0 +1,57 @@
+//#region worklets/capture-processor.ts
+const script = new Blob([`
+class CaptureProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    this.recording = false;
+    const opts = options.processorOptions || {};
+    this.fromRate = opts.contextRate || sampleRate;
+    this.toRate = opts.sttSampleRate || sampleRate;
+    this.ratio = this.fromRate / this.toRate;
+    this.needsResample = this.fromRate !== this.toRate;
+    this.port.onmessage = (e) => {
+      if (e.data.event === 'start') this.recording = true;
+      else if (e.data.event === 'stop') this.recording = false;
+    };
+  }
+
+  resample(input) {
+    const ratio = this.ratio;
+    const outLen = Math.ceil(input.length / ratio);
+    const out = new Float32Array(outLen);
+    for (let i = 0; i < outLen; i++) {
+      const srcIdx = i * ratio;
+      const idx = srcIdx | 0;
+      const frac = srcIdx - idx;
+      const a = input[idx];
+      const b = idx + 1 < input.length ? input[idx + 1] : a;
+      out[i] = a + frac * (b - a);
+    }
+    return out;
+  }
+
+  process(inputs) {
+    const input = inputs[0];
+    if (!input || !input[0] || !this.recording) return true;
+
+    const raw = input[0];
+    const samples = this.needsResample ? this.resample(raw) : raw;
+
+    // Convert Float32 -> Int16
+    const buffer = new ArrayBuffer(samples.length * 2);
+    const view = new DataView(buffer);
+    for (let i = 0; i < samples.length; i++) {
+      const s = Math.max(-1, Math.min(1, samples[i]));
+      view.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+    }
+
+    this.port.postMessage({ event: 'chunk', buffer }, [buffer]);
+    return true;
+  }
+}
+
+registerProcessor('capture-processor', CaptureProcessor);
+`], { type: "application/javascript" });
+const src = URL.createObjectURL(script);
+//#endregion
+export { src as default };

package/dist/worklets/playback-processor.d.ts

@@ -0,0 +1,2 @@
+declare const src: string;
+export default src;

package/dist/worklets/playback-processor.js

@@ -0,0 +1,105 @@
+//#region worklets/playback-processor.ts
+const script = new Blob([`
+class PlaybackProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    this.interrupted = false;
+    this.isDone = false;
+    this.playing = false;
+    const rate = options.processorOptions?.sampleRate ?? 24000;
+    // Wait for ~400ms of audio before starting.
+    // If 'done' arrives first (short utterance), start immediately.
+    this.jitterSamples = Math.floor(rate * 0.4);
+    // Carry-over byte for split samples across chunks
+    this.carry = null;
+    // Float32 sample buffer — 60s at the context sample rate
+    this.samples = new Float32Array(rate * 60);
+    this.writePos = 0;
+    this.readPos = 0;
+    // Report playback position every ~50ms for word-level text sync
+    this.progressInterval = Math.floor(rate * 0.05);
+    this.samplesSinceProgress = 0;
+
+    this.port.onmessage = (e) => {
+      const d = e.data;
+      if (d.event === 'write') {
+        this.ingestBytes(d.buffer);
+      } else if (d.event === 'interrupt') {
+        this.interrupted = true;
+      } else if (d.event === 'done') {
+        this.isDone = true;
+      }
+    };
+  }
+
+  ingestBytes(uint8) {
+    let bytes = uint8;
+
+    if (this.carry !== null) {
+      const merged = new Uint8Array(1 + bytes.length);
+      merged[0] = this.carry;
+      merged.set(bytes, 1);
+      bytes = merged;
+      this.carry = null;
+    }
+
+    if (bytes.length % 2 !== 0) {
+      this.carry = bytes[bytes.length - 1];
+      bytes = bytes.subarray(0, bytes.length - 1);
+    }
+
+    if (bytes.length === 0) return;
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.length);
+    const numSamples = bytes.length / 2;
+    for (let i = 0; i < numSamples; i++) {
+      this.samples[this.writePos++] = view.getInt16(i * 2, true) / 0x8000;
+    }
+  }
+
+  process(inputs, outputs) {
+    const out = outputs[0][0];
+    if (this.interrupted) {
+      this.port.postMessage({ event: 'stop' });
+      return false;
+    }
+
+    const avail = this.writePos - this.readPos;
+
+    // Wait for jitter buffer to fill, unless done (short utterance)
+    if (!this.playing) {
+      if (avail >= this.jitterSamples || this.isDone) {
+        this.playing = true;
+      } else {
+        out.fill(0);
+        return true;
+      }
+    }
+
+    if (avail > 0) {
+      const n = Math.min(avail, out.length);
+      out.set(this.samples.subarray(this.readPos, this.readPos + n));
+      this.readPos += n;
+      this.samplesSinceProgress += n;
+      if (this.samplesSinceProgress >= this.progressInterval) {
+        this.port.postMessage({ event: 'progress', readPos: this.readPos });
+        this.samplesSinceProgress = 0;
+      }
+      out.fill(0, n);
+      return true;
+    }
+
+    // No data: output silence, stop only when done
+    out.fill(0);
+    if (this.isDone) {
+      this.port.postMessage({ event: 'stop' });
+      return false;
+    }
+    return true;
+  }
+}
+
+registerProcessor('playback-processor', PlaybackProcessor);
+`], { type: "application/javascript" });
+const src = URL.createObjectURL(script);
+//#endregion
+export { src as default };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@alexkroman1/aai-ui",
+  "version": "0.9.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css",
+    "./session": {
+      "source": "./session.ts",
+      "types": "./dist/session.d.ts",
+      "import": "./dist/session.js"
+    },
+    "./components": {
+      "source": "./components.ts",
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js"
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "@alexkroman1/aai": "0.9.0"
+  },
+  "peerDependencies": {
+    "@preact/signals": "^2.8.2",
+    "preact": "^10.29.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@preact/signals": "^2.8.2",
+    "@testing-library/preact": "^3.2.4",
+    "jsdom": "^29.0.1",
+    "preact": "^10.29.0",
+    "tsdown": "^0.21.4"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsdown && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check ."
+  }
+}

package/styles.css

@@ -0,0 +1,74 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");
+@import "tailwindcss";
+@source "./";
+@source "../dist/ui/";
+
+@theme {
+  --color-aai-bg: #101010;
+  --color-aai-surface: #151515;
+  --color-aai-surface-faint: rgba(255, 255, 255, 0.031);
+  --color-aai-surface-hover: rgba(255, 255, 255, 0.059);
+  --color-aai-border: #282828;
+  --color-aai-primary: #fab283;
+  --color-aai-text: rgba(255, 255, 255, 0.936);
+  --color-aai-text-secondary: rgba(255, 255, 255, 0.618);
+  --color-aai-text-muted: rgba(255, 255, 255, 0.284);
+  --color-aai-text-dim: rgba(255, 255, 255, 0.422);
+  --color-aai-error: #e06c75;
+  --color-aai-ring: #56b6c2;
+  --color-aai-state-disconnected: rgba(255, 255, 255, 0.422);
+  --color-aai-state-connecting: rgba(255, 255, 255, 0.422);
+  --color-aai-state-ready: #7fd88f;
+  --color-aai-state-listening: #56b6c2;
+  --color-aai-state-thinking: #f5a742;
+  --color-aai-state-speaking: #e06c75;
+  --color-aai-state-error: #e06c75;
+  --radius-aai: 6px;
+  --font-aai: "Inter", system-ui, -apple-system, sans-serif;
+  --font-aai-mono: "IBM Plex Mono", monospace;
+}
+
+@layer base {
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    background: var(--color-aai-bg);
+  }
+}
+
+@keyframes aai-bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes aai-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.tool-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-aai-text) 25%,
+    var(--color-aai-text-dim) 50%,
+    var(--color-aai-text) 75%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: aai-shimmer 2s ease-in-out infinite;
+}