vanilla-agent 0.1.0

package/src/utils/constants.ts

@@ -0,0 +1,11 @@
+import { ChatWidgetSessionStatus } from "../session";
+
+export const statusCopy: Record<ChatWidgetSessionStatus, string> = {
+  idle: "Online",
+  connecting: "Connecting…",
+  connected: "Streaming…",
+  error: "Offline"
+};
+
+
+

package/src/utils/dom.ts

@@ -0,0 +1,20 @@
+/**
+ * DOM utility functions
+ */
+export const createElement = <K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  className?: string
+): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tag);
+  if (className) {
+    element.className = className;
+  }
+  return element;
+};
+
+export const createFragment = (): DocumentFragment => {
+  return document.createDocumentFragment();
+};
+
+
+

package/src/utils/formatting.ts

@@ -0,0 +1,77 @@
+import { ChatWidgetReasoning, ChatWidgetToolCall } from "../types";
+
+export const formatUnknownValue = (value: unknown): string => {
+  if (value === null) return "null";
+  if (value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (error) {
+    return String(value);
+  }
+};
+
+export const formatReasoningDuration = (reasoning: ChatWidgetReasoning) => {
+  const end = reasoning.completedAt ?? Date.now();
+  const start = reasoning.startedAt ?? end;
+  const durationMs =
+    reasoning.durationMs !== undefined
+      ? reasoning.durationMs
+      : Math.max(0, end - start);
+  const seconds = durationMs / 1000;
+  if (seconds < 0.1) {
+    return "Thought for <0.1 seconds";
+  }
+  const formatted =
+    seconds >= 10
+      ? Math.round(seconds).toString()
+      : seconds.toFixed(1).replace(/\.0$/, "");
+  return `Thought for ${formatted} seconds`;
+};
+
+export const describeReasonStatus = (reasoning: ChatWidgetReasoning) => {
+  if (reasoning.status === "complete") return formatReasoningDuration(reasoning);
+  if (reasoning.status === "pending") return "Waiting";
+  return "";
+};
+
+export const formatToolDuration = (tool: ChatWidgetToolCall) => {
+  const durationMs =
+    typeof tool.duration === "number"
+      ? tool.duration
+      : typeof tool.durationMs === "number"
+        ? tool.durationMs
+        : Math.max(
+            0,
+            (tool.completedAt ?? Date.now()) -
+              (tool.startedAt ?? tool.completedAt ?? Date.now())
+          );
+  const seconds = durationMs / 1000;
+  if (seconds < 0.1) {
+    return "Used tool for <0.1 seconds";
+  }
+  const formatted =
+    seconds >= 10
+      ? Math.round(seconds).toString()
+      : seconds.toFixed(1).replace(/\.0$/, "");
+  return `Used tool for ${formatted} seconds`;
+};
+
+export const describeToolStatus = (status: ChatWidgetToolCall["status"]) => {
+  if (status === "complete") return "";
+  if (status === "pending") return "Starting";
+  return "Running";
+};
+
+export const describeToolTitle = (tool: ChatWidgetToolCall) => {
+  if (tool.status === "complete") {
+    return formatToolDuration(tool);
+  }
+  return "Using tool...";
+};
+
+
+

package/src/utils/icons.ts

@@ -0,0 +1,92 @@
+import { icons } from "lucide";
+import type { IconNode } from "lucide";
+
+/**
+ * Renders a Lucide icon as an inline SVG element
+ * This approach requires no CSS and works on any page
+ * 
+ * @param iconName - The Lucide icon name in kebab-case (e.g., "arrow-up")
+ * @param size - The size of the icon (default: 24)
+ * @param color - The stroke color (default: "currentColor")
+ * @param strokeWidth - The stroke width (default: 2)
+ * @returns SVGElement or null if icon not found
+ */
+export const renderLucideIcon = (
+  iconName: string,
+  size: number | string = 24,
+  color: string = "currentColor",
+  strokeWidth: number = 2
+): SVGElement | null => {
+  try {
+    // Convert kebab-case to PascalCase (e.g., "arrow-up" -> "ArrowUp")
+    const pascalName = iconName
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join("");
+    
+    // Lucide's icons object contains IconNode data directly, not functions
+    const iconData = (icons as Record<string, IconNode>)[pascalName] as IconNode;
+    
+    if (!iconData) {
+      console.warn(`Lucide icon "${iconName}" not found (tried "${pascalName}"). Available icons: https://lucide.dev/icons`);
+      return null;
+    }
+
+    return createSvgFromIconData(iconData, size, color, strokeWidth);
+  } catch (error) {
+    console.warn(`Failed to render Lucide icon "${iconName}":`, error);
+    return null;
+  }
+};
+
+/**
+ * Helper function to create SVG from IconNode data
+ */
+function createSvgFromIconData(
+  iconData: IconNode,
+  size: number | string,
+  color: string,
+  strokeWidth: number
+): SVGElement | null {
+  if (!iconData || !Array.isArray(iconData)) {
+    return null;
+  }
+
+  // Create SVG element
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", color);
+  svg.setAttribute("stroke-width", String(strokeWidth));
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  
+  // Render elements from icon data
+  // IconNode format: [["path", {"d": "..."}], ["rect", {"x": "...", "y": "..."}], ...]
+  iconData.forEach((elementData) => {
+    if (Array.isArray(elementData) && elementData.length >= 2) {
+      const tagName = elementData[0] as string;
+      const attrs = elementData[1] as Record<string, string>;
+      
+      if (attrs) {
+        // Create the appropriate SVG element (path, rect, circle, ellipse, line, etc.)
+        const element = document.createElementNS("http://www.w3.org/2000/svg", tagName);
+        
+        // Apply all attributes, but skip 'stroke' (we want to use the parent SVG's stroke for consistent coloring)
+        Object.entries(attrs).forEach(([key, value]) => {
+          if (key !== "stroke") {
+            element.setAttribute(key, String(value));
+          }
+        });
+        
+        svg.appendChild(element);
+      }
+    }
+  });
+  
+  return svg;
+}
+

package/src/utils/positioning.ts

@@ -0,0 +1,12 @@
+export const positionMap: Record<
+  "bottom-right" | "bottom-left" | "top-right" | "top-left",
+  string
+> = {
+  "bottom-right": "tvw-bottom-6 tvw-right-6",
+  "bottom-left": "tvw-bottom-6 tvw-left-6",
+  "top-right": "tvw-top-6 tvw-right-6",
+  "top-left": "tvw-top-6 tvw-left-6"
+};
+
+
+

package/src/utils/theme.ts

@@ -0,0 +1,20 @@
+import { ChatWidgetConfig } from "../types";
+
+export const applyThemeVariables = (
+  element: HTMLElement,
+  config?: ChatWidgetConfig
+) => {
+  const theme = config?.theme ?? {};
+  Object.entries(theme).forEach(([key, value]) => {
+    // Skip undefined or empty values
+    if (value === undefined || value === null || value === "") {
+      return;
+    }
+    // Convert camelCase to kebab-case (e.g., radiusSm → radius-sm)
+    const kebabKey = key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+    element.style.setProperty(`--cw-${kebabKey}`, String(value));
+  });
+};
+
+
+

package/src/widget.css

@@ -0,0 +1 @@
+@import "./styles/widget.css";

package/widget.css

@@ -0,0 +1 @@
+@import "./src/widget.css";