vanilla-agent 0.1.0

package/src/runtime/init.ts

@@ -0,0 +1,116 @@
+import { createChatExperience, ChatWidgetController } from "../ui";
+import { ChatWidgetConfig, ChatWidgetInitOptions } from "../types";
+
+const ensureTarget = (target: string | HTMLElement): HTMLElement => {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error("Chat widget can only be mounted in a browser environment");
+  }
+
+  if (typeof target === "string") {
+    const element = document.querySelector<HTMLElement>(target);
+    if (!element) {
+      throw new Error(`Chat widget target "${target}" was not found`);
+    }
+    return element;
+  }
+
+  return target;
+};
+
+const widgetCssHref = (): string | null => {
+  try {
+    // This works in ESM builds but not in IIFE builds
+    if (typeof import.meta !== "undefined" && import.meta.url) {
+      return new URL("../widget.css", import.meta.url).href;
+    }
+  } catch {
+    // Fallback for IIFE builds where CSS should be loaded separately
+  }
+  return null;
+};
+
+const mountStyles = (root: ShadowRoot | HTMLElement) => {
+  const href = widgetCssHref();
+
+  if (root instanceof ShadowRoot) {
+    // For shadow DOM, we need to load CSS into the shadow root
+    if (href) {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      link.setAttribute("data-vanilla-agent", "true");
+      root.insertBefore(link, root.firstChild);
+    }
+    // If href is null (IIFE build), CSS should already be loaded globally
+  } else {
+    // For non-shadow DOM, check if CSS is already loaded
+    const existing = document.head.querySelector<HTMLLinkElement>(
+      "link[data-vanilla-agent]"
+    );
+    if (!existing) {
+      if (href) {
+        // ESM build - load CSS dynamically
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = href;
+        link.setAttribute("data-vanilla-agent", "true");
+        document.head.appendChild(link);
+      }
+      // IIFE build - CSS should be loaded via <link> tag before script
+      // If not found, we'll assume it's loaded globally or warn in dev
+    }
+  }
+};
+
+export type ChatWidgetInitHandle = ChatWidgetController & { host: HTMLElement };
+
+export const initChatWidget = (
+  options: ChatWidgetInitOptions
+): ChatWidgetInitHandle => {
+  const target = ensureTarget(options.target);
+  const host = document.createElement("div");
+  host.className = "vanilla-agent-host";
+  target.appendChild(host);
+
+  const useShadow = options.useShadowDom !== false;
+  let mount: HTMLElement;
+  let root: ShadowRoot | HTMLElement;
+
+  if (useShadow) {
+    const shadowRoot = host.attachShadow({ mode: "open" });
+    root = shadowRoot;
+    mount = document.createElement("div");
+    mount.id = "vanilla-agent-root";
+    shadowRoot.appendChild(mount);
+    mountStyles(shadowRoot);
+  } else {
+    root = host;
+    mount = document.createElement("div");
+    mount.id = "vanilla-agent-root";
+    host.appendChild(mount);
+    mountStyles(host);
+  }
+
+  let controller = createChatExperience(mount, options.config);
+  options.onReady?.();
+
+  return {
+    host,
+    update(nextConfig: ChatWidgetConfig) {
+      controller.update(nextConfig);
+    },
+    open() {
+      controller.open();
+    },
+    close() {
+      controller.close();
+    },
+    toggle() {
+      controller.toggle();
+    },
+    destroy() {
+      controller.destroy();
+      host.remove();
+    }
+  };
+};

package/src/session.ts

@@ -0,0 +1,206 @@
+import { ChatWidgetClient } from "./client";
+import {
+  ChatWidgetConfig,
+  ChatWidgetEvent,
+  ChatWidgetMessage
+} from "./types";
+
+export type ChatWidgetSessionStatus =
+  | "idle"
+  | "connecting"
+  | "connected"
+  | "error";
+
+type SessionCallbacks = {
+  onMessagesChanged: (messages: ChatWidgetMessage[]) => void;
+  onStatusChanged: (status: ChatWidgetSessionStatus) => void;
+  onStreamingChanged: (streaming: boolean) => void;
+  onError?: (error: Error) => void;
+};
+
+export class ChatWidgetSession {
+  private client: ChatWidgetClient;
+  private messages: ChatWidgetMessage[];
+  private status: ChatWidgetSessionStatus = "idle";
+  private streaming = false;
+  private abortController: AbortController | null = null;
+  private sequenceCounter = Date.now();
+
+  constructor(
+    private config: ChatWidgetConfig = {},
+    private callbacks: SessionCallbacks
+  ) {
+    this.messages = [...(config.initialMessages ?? [])].map((message) => ({
+      ...message,
+      sequence: message.sequence ?? this.nextSequence()
+    }));
+    this.messages = this.sortMessages(this.messages);
+    this.client = new ChatWidgetClient(config);
+
+    if (this.messages.length) {
+      this.callbacks.onMessagesChanged([...this.messages]);
+    }
+    this.callbacks.onStatusChanged(this.status);
+  }
+
+  public updateConfig(next: ChatWidgetConfig) {
+    this.config = { ...this.config, ...next };
+    this.client = new ChatWidgetClient(this.config);
+  }
+
+  public getMessages() {
+    return [...this.messages];
+  }
+
+  public getStatus() {
+    return this.status;
+  }
+
+  public isStreaming() {
+    return this.streaming;
+  }
+
+  public async sendMessage(rawInput: string) {
+    const input = rawInput.trim();
+    if (!input) return;
+
+    this.abortController?.abort();
+
+    const userMessage: ChatWidgetMessage = {
+      id: `user-${Date.now()}`,
+      role: "user",
+      content: input,
+      createdAt: new Date().toISOString(),
+      sequence: this.nextSequence()
+    };
+
+    this.appendMessage(userMessage);
+    this.setStreaming(true);
+
+    const controller = new AbortController();
+    this.abortController = controller;
+
+    const snapshot = [...this.messages];
+
+    try {
+      await this.client.dispatch(
+        {
+          messages: snapshot,
+          signal: controller.signal
+        },
+        this.handleEvent
+      );
+    } catch (error) {
+      const fallback: ChatWidgetMessage = {
+        id: `assistant-${Date.now()}`,
+        role: "assistant",
+        createdAt: new Date().toISOString(),
+        content:
+          "It looks like the proxy isn't returning a real response yet. Here's a sample message so you can continue testing locally.",
+        sequence: this.nextSequence()
+      };
+
+      this.appendMessage(fallback);
+      this.setStatus("idle");
+      this.setStreaming(false);
+      this.abortController = null;
+      if (error instanceof Error) {
+        this.callbacks.onError?.(error);
+      } else {
+        this.callbacks.onError?.(new Error(String(error)));
+      }
+    }
+  }
+
+  public cancel() {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.setStreaming(false);
+    this.setStatus("idle");
+  }
+
+  private handleEvent = (event: ChatWidgetEvent) => {
+    if (event.type === "message") {
+      this.upsertMessage(event.message);
+    } else if (event.type === "status") {
+      this.setStatus(event.status);
+      if (event.status === "connecting") {
+        this.setStreaming(true);
+      } else if (event.status === "idle" || event.status === "error") {
+        this.setStreaming(false);
+        this.abortController = null;
+      }
+    } else if (event.type === "error") {
+      this.setStatus("error");
+      this.setStreaming(false);
+      this.abortController = null;
+      this.callbacks.onError?.(event.error);
+    }
+  };
+
+  private setStatus(status: ChatWidgetSessionStatus) {
+    if (this.status === status) return;
+    this.status = status;
+    this.callbacks.onStatusChanged(status);
+  }
+
+  private setStreaming(streaming: boolean) {
+    if (this.streaming === streaming) return;
+    this.streaming = streaming;
+    this.callbacks.onStreamingChanged(streaming);
+  }
+
+  private appendMessage(message: ChatWidgetMessage) {
+    const withSequence = this.ensureSequence(message);
+    this.messages = this.sortMessages([...this.messages, withSequence]);
+    this.callbacks.onMessagesChanged([...this.messages]);
+  }
+
+  private upsertMessage(message: ChatWidgetMessage) {
+    const withSequence = this.ensureSequence(message);
+    const index = this.messages.findIndex((m) => m.id === withSequence.id);
+    if (index === -1) {
+      this.appendMessage(withSequence);
+      return;
+    }
+
+    this.messages = this.messages.map((existing, idx) =>
+      idx === index ? { ...existing, ...withSequence } : existing
+    );
+    this.messages = this.sortMessages(this.messages);
+    this.callbacks.onMessagesChanged([...this.messages]);
+  }
+
+  private ensureSequence(message: ChatWidgetMessage): ChatWidgetMessage {
+    if (message.sequence !== undefined) {
+      return { ...message };
+    }
+    return {
+      ...message,
+      sequence: this.nextSequence()
+    };
+  }
+
+  private nextSequence() {
+    return this.sequenceCounter++;
+  }
+
+  private sortMessages(messages: ChatWidgetMessage[]) {
+    return [...messages].sort((a, b) => {
+      // Sort by createdAt timestamp first (chronological order)
+      const timeA = new Date(a.createdAt).getTime();
+      const timeB = new Date(b.createdAt).getTime();
+      if (!Number.isNaN(timeA) && !Number.isNaN(timeB) && timeA !== timeB) {
+        return timeA - timeB;
+      }
+
+      // Fall back to sequence if timestamps are equal or invalid
+      const seqA = a.sequence ?? 0;
+      const seqB = b.sequence ?? 0;
+      if (seqA !== seqB) return seqA - seqB;
+
+      // Final fallback to ID
+      return a.id.localeCompare(b.id);
+    });
+  }
+}

package/src/styles/tailwind.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --travrse-primary: #111827;
+    --travrse-secondary: #4338ca;
+    --travrse-surface: #ffffff;
+    --travrse-muted: #6b7280;
+    --travrse-accent: #1d4ed8;
+  }
+}
+
+@layer components {
+  .tvw-widget-shadow {
+    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
+  }
+}