vanilla-agent 0.1.0

package/src/components/forms.ts

@@ -0,0 +1,165 @@
+import { createElement } from "../utils/dom";
+import { ChatWidgetMessage, ChatWidgetConfig } from "../types";
+import { ChatWidgetSession } from "../session";
+
+export const formDefinitions: Record<
+  string,
+  {
+    title: string;
+    description?: string;
+    fields: Array<{
+      name: string;
+      label: string;
+      placeholder?: string;
+      type?: "text" | "email" | "textarea";
+      required?: boolean;
+    }>;
+    submitLabel?: string;
+  }
+> = {
+  init: {
+    title: "Schedule a Demo",
+    description: "Share the basics and we'll follow up with a confirmation.",
+    fields: [
+      { name: "name", label: "Full name", placeholder: "Jane Doe", required: true },
+      { name: "email", label: "Work email", placeholder: "jane@example.com", type: "email", required: true },
+      { name: "notes", label: "What would you like to cover?", type: "textarea" }
+    ],
+    submitLabel: "Submit details"
+  },
+  followup: {
+    title: "Additional Information",
+    description: "Provide any extra details to tailor the next steps.",
+    fields: [
+      { name: "company", label: "Company", placeholder: "Acme Inc." },
+      { name: "context", label: "Context", type: "textarea", placeholder: "Share more about your use case" }
+    ],
+    submitLabel: "Send"
+  }
+};
+
+export const enhanceWithForms = (
+  bubble: HTMLElement,
+  message: ChatWidgetMessage,
+  config: ChatWidgetConfig,
+  session: ChatWidgetSession
+) => {
+  const placeholders = bubble.querySelectorAll<HTMLElement>("[data-tv-form]");
+  if (placeholders.length) {
+    placeholders.forEach((placeholder) => {
+      if (placeholder.dataset.enhanced === "true") return;
+      const type = placeholder.dataset.tvForm ?? "init";
+      placeholder.dataset.enhanced = "true";
+
+      const definition = formDefinitions[type] ?? formDefinitions.init;
+      placeholder.classList.add("tvw-form-card", "tvw-space-y-4");
+
+      const heading = createElement("div", "tvw-space-y-1");
+      const title = createElement(
+        "h3",
+        "tvw-text-base tvw-font-semibold tvw-text-cw-primary"
+      );
+      title.textContent = definition.title;
+      heading.appendChild(title);
+      if (definition.description) {
+        const desc = createElement(
+          "p",
+          "tvw-text-sm tvw-text-cw-muted"
+        );
+        desc.textContent = definition.description;
+        heading.appendChild(desc);
+      }
+
+      const form = document.createElement("form");
+      form.className = "tvw-form-grid tvw-space-y-3";
+
+      definition.fields.forEach((field) => {
+        const group = createElement("label", "tvw-form-field tvw-flex tvw-flex-col tvw-gap-1");
+        group.htmlFor = `${message.id}-${type}-${field.name}`;
+        const label = createElement("span", "tvw-text-xs tvw-font-medium tvw-text-cw-muted");
+        label.textContent = field.label;
+        group.appendChild(label);
+
+        const inputType = field.type ?? "text";
+        let control: HTMLInputElement | HTMLTextAreaElement;
+        if (inputType === "textarea") {
+          control = document.createElement("textarea");
+          control.rows = 3;
+        } else {
+          control = document.createElement("input");
+          control.type = inputType;
+        }
+        control.className =
+          "tvw-rounded-xl tvw-border tvw-border-gray-200 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-cw-primary";
+        control.id = `${message.id}-${type}-${field.name}`;
+        control.name = field.name;
+        control.placeholder = field.placeholder ?? "";
+        if (field.required) {
+          control.required = true;
+        }
+        group.appendChild(control);
+        form.appendChild(group);
+      });
+
+      const actions = createElement(
+        "div",
+        "tvw-flex tvw-items-center tvw-justify-between tvw-gap-2"
+      );
+      const status = createElement(
+        "div",
+        "tvw-text-xs tvw-text-cw-muted tvw-min-h-[1.5rem]"
+      );
+      const submit = createElement(
+        "button",
+        "tvw-inline-flex tvw-items-center tvw-rounded-full tvw-bg-cw-primary tvw-px-4 tvw-py-2 tvw-text-sm tvw-font-semibold tvw-text-white disabled:tvw-opacity-60 tvw-cursor-pointer"
+      ) as HTMLButtonElement;
+      submit.type = "submit";
+      submit.textContent = definition.submitLabel ?? "Submit";
+      actions.appendChild(status);
+      actions.appendChild(submit);
+      form.appendChild(actions);
+
+      placeholder.replaceChildren(heading, form);
+
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const formEndpoint = config.formEndpoint ?? "/form";
+        const formData = new FormData(form as HTMLFormElement);
+        const payload: Record<string, unknown> = {};
+        formData.forEach((value, key) => {
+          payload[key] = value;
+        });
+        payload["type"] = type;
+
+        submit.disabled = true;
+        status.textContent = "Submitting…";
+
+        try {
+          const response = await fetch(formEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify(payload)
+          });
+          if (!response.ok) {
+            throw new Error(`Form submission failed (${response.status})`);
+          }
+          const data = await response.json();
+          status.textContent = data.message ?? "Thanks! We'll be in touch soon.";
+          if (data.success && data.nextPrompt) {
+            await session.sendMessage(String(data.nextPrompt));
+          }
+        } catch (error) {
+          status.textContent =
+            error instanceof Error ? error.message : "Something went wrong. Please try again.";
+        } finally {
+          submit.disabled = false;
+        }
+      });
+    });
+  }
+};
+
+
+

package/src/components/launcher.ts

@@ -0,0 +1,184 @@
+import { createElement } from "../utils/dom";
+import { ChatWidgetConfig } from "../types";
+import { positionMap } from "../utils/positioning";
+import { renderLucideIcon } from "../utils/icons";
+
+export interface LauncherButton {
+  element: HTMLButtonElement;
+  update: (config: ChatWidgetConfig) => void;
+  destroy: () => void;
+}
+
+export const createLauncherButton = (
+  config: ChatWidgetConfig | undefined,
+  onToggle: () => void
+): LauncherButton => {
+  const button = createElement("button") as HTMLButtonElement;
+  button.type = "button";
+  button.innerHTML = `
+    <span class="tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-bg-cw-primary tvw-text-white" data-role="launcher-icon">💬</span>
+    <img data-role="launcher-image" class="tvw-rounded-full tvw-object-cover" alt="" style="display:none" />
+    <span class="tvw-flex tvw-flex-col tvw-items-start tvw-text-left">
+      <span class="tvw-text-sm tvw-font-semibold tvw-text-cw-primary" data-role="launcher-title"></span>
+      <span class="tvw-text-xs tvw-text-cw-muted" data-role="launcher-subtitle"></span>
+    </span>
+    <span class="tvw-ml-2 tvw-grid tvw-place-items-center tvw-rounded-full tvw-bg-cw-primary tvw-text-cw-call-to-action" data-role="launcher-call-to-action-icon">↗</span>
+  `;
+  button.addEventListener("click", onToggle);
+
+  const update = (newConfig: ChatWidgetConfig) => {
+    const launcher = newConfig.launcher ?? {};
+
+    const titleEl = button.querySelector("[data-role='launcher-title']");
+    if (titleEl) {
+      titleEl.textContent = launcher.title ?? "Chat Assistant";
+    }
+
+    const subtitleEl = button.querySelector("[data-role='launcher-subtitle']");
+    if (subtitleEl) {
+      subtitleEl.textContent = launcher.subtitle ?? "Get answers fast";
+    }
+
+    // Hide/show text container
+    const textContainer = button.querySelector(".tvw-flex-col");
+    if (textContainer) {
+      if (launcher.textHidden) {
+        (textContainer as HTMLElement).style.display = "none";
+      } else {
+        (textContainer as HTMLElement).style.display = "";
+      }
+    }
+
+    const icon = button.querySelector<HTMLSpanElement>("[data-role='launcher-icon']");
+    if (icon) {
+      if (launcher.agentIconHidden) {
+        icon.style.display = "none";
+      } else {
+        const iconSize = launcher.agentIconSize ?? "40px";
+        icon.style.height = iconSize;
+        icon.style.width = iconSize;
+        
+        // Clear existing content
+        icon.innerHTML = "";
+        
+        // Render icon based on priority: Lucide icon > iconUrl > agentIconText
+        if (launcher.agentIconName) {
+          // Use Lucide icon
+          const iconSizeNum = parseFloat(iconSize) || 24;
+          const iconSvg = renderLucideIcon(launcher.agentIconName, iconSizeNum * 0.6, "#ffffff", 2);
+          if (iconSvg) {
+            icon.appendChild(iconSvg);
+            icon.style.display = "";
+          } else {
+            // Fallback to agentIconText if Lucide icon fails
+            icon.textContent = launcher.agentIconText ?? "💬";
+            icon.style.display = "";
+          }
+        } else if (launcher.iconUrl) {
+          // Use image URL - hide icon span and show img
+          icon.style.display = "none";
+        } else {
+          // Use text/emoji
+          icon.textContent = launcher.agentIconText ?? "💬";
+          icon.style.display = "";
+        }
+      }
+    }
+
+    const img = button.querySelector<HTMLImageElement>("[data-role='launcher-image']");
+    if (img) {
+      const iconSize = launcher.agentIconSize ?? "40px";
+      img.style.height = iconSize;
+      img.style.width = iconSize;
+      if (launcher.iconUrl && !launcher.agentIconName && !launcher.agentIconHidden) {
+        // Only show image if not using Lucide icon and not hidden
+        img.src = launcher.iconUrl;
+        img.style.display = "block";
+      } else {
+        img.style.display = "none";
+      }
+    }
+
+    const callToActionIconEl = button.querySelector<HTMLSpanElement>("[data-role='launcher-call-to-action-icon']");
+    if (callToActionIconEl) {
+      const callToActionIconSize = launcher.callToActionIconSize ?? "32px";
+      callToActionIconEl.style.height = callToActionIconSize;
+      callToActionIconEl.style.width = callToActionIconSize;
+      
+      // Apply background color if configured
+      if (launcher.callToActionIconBackgroundColor) {
+        callToActionIconEl.style.backgroundColor = launcher.callToActionIconBackgroundColor;
+        callToActionIconEl.classList.remove("tvw-bg-cw-primary");
+      } else {
+        callToActionIconEl.style.backgroundColor = "";
+        callToActionIconEl.classList.add("tvw-bg-cw-primary");
+      }
+      
+      // Calculate padding to adjust icon size
+      let paddingTotal = 0;
+      if (launcher.callToActionIconPadding) {
+        callToActionIconEl.style.boxSizing = "border-box";
+        callToActionIconEl.style.padding = launcher.callToActionIconPadding;
+        // Parse padding value to calculate total padding (padding applies to both sides)
+        const paddingValue = parseFloat(launcher.callToActionIconPadding) || 0;
+        paddingTotal = paddingValue * 2; // padding on both sides
+      } else {
+        callToActionIconEl.style.boxSizing = "";
+        callToActionIconEl.style.padding = "";
+      }
+      
+      if (launcher.callToActionIconHidden) {
+        callToActionIconEl.style.display = "none";
+      } else {
+        callToActionIconEl.style.display = "";
+        
+        // Clear existing content
+        callToActionIconEl.innerHTML = "";
+        
+        // Use Lucide icon if provided, otherwise fall back to text
+        if (launcher.callToActionIconName) {
+          // Calculate actual icon size by subtracting padding
+          const containerSize = parseFloat(callToActionIconSize) || 24;
+          const iconSize = Math.max(containerSize - paddingTotal, 8); // Ensure minimum size of 8px
+          const iconSvg = renderLucideIcon(launcher.callToActionIconName, iconSize, "currentColor", 2);
+          if (iconSvg) {
+            callToActionIconEl.appendChild(iconSvg);
+          } else {
+            // Fallback to text if icon fails to render
+            callToActionIconEl.textContent = launcher.callToActionIconText ?? "↗";
+          }
+        } else {
+          callToActionIconEl.textContent = launcher.callToActionIconText ?? "↗";
+        }
+      }
+    }
+
+    const positionClass =
+      launcher.position && positionMap[launcher.position]
+        ? positionMap[launcher.position]
+        : positionMap["bottom-right"];
+
+    const base =
+      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-shadow-lg tvw-border tvw-border-gray-200 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer";
+
+    button.className = `${base} ${positionClass}`;
+  };
+
+  const destroy = () => {
+    button.removeEventListener("click", onToggle);
+    button.remove();
+  };
+
+  // Initial update
+  if (config) {
+    update(config);
+  }
+
+  return {
+    element: button,
+    update,
+    destroy
+  };
+};
+
+

package/src/components/message-bubble.ts

@@ -0,0 +1,52 @@
+import { createElement } from "../utils/dom";
+import { ChatWidgetMessage } from "../types";
+
+export type MessageTransform = (context: {
+  text: string;
+  message: ChatWidgetMessage;
+  streaming: boolean;
+}) => string;
+
+export const createStandardBubble = (
+  message: ChatWidgetMessage,
+  transform: MessageTransform
+): HTMLElement => {
+  const classes = [
+    "tvw-max-w-[85%]",
+    "tvw-rounded-2xl",
+    "tvw-text-sm",
+    "tvw-leading-relaxed",
+    "tvw-shadow-sm"
+  ];
+
+  if (message.role === "user") {
+    classes.push(
+      "tvw-ml-auto",
+      "tvw-bg-cw-accent",
+      "tvw-text-white",
+      "tvw-px-5",
+      "tvw-py-3"
+    );
+  } else {
+    classes.push(
+      "tvw-bg-cw-surface",
+      "tvw-border",
+      "tvw-border-cw-message-border",
+      "tvw-text-cw-primary",
+      "tvw-px-5",
+      "tvw-py-3"
+    );
+  }
+
+  const bubble = createElement("div", classes.join(" "));
+  bubble.innerHTML = transform({
+    text: message.content,
+    message,
+    streaming: Boolean(message.streaming)
+  });
+
+  return bubble;
+};
+
+
+

package/src/components/messages.ts

@@ -0,0 +1,43 @@
+import { createElement, createFragment } from "../utils/dom";
+import { ChatWidgetMessage } from "../types";
+import { MessageTransform } from "./message-bubble";
+import { createStandardBubble } from "./message-bubble";
+import { createReasoningBubble } from "./reasoning-bubble";
+import { createToolBubble } from "./tool-bubble";
+
+export const renderMessages = (
+  container: HTMLElement,
+  messages: ChatWidgetMessage[],
+  transform: MessageTransform,
+  showReasoning: boolean,
+  showToolCalls: boolean
+) => {
+  container.innerHTML = "";
+  const fragment = createFragment();
+
+  messages.forEach((message) => {
+    let bubble: HTMLElement;
+    if (message.variant === "reasoning" && message.reasoning) {
+      if (!showReasoning) return;
+      bubble = createReasoningBubble(message);
+    } else if (message.variant === "tool" && message.toolCall) {
+      if (!showToolCalls) return;
+      bubble = createToolBubble(message);
+    } else {
+      bubble = createStandardBubble(message, transform);
+    }
+
+    const wrapper = createElement("div", "tvw-flex");
+    if (message.role === "user") {
+      wrapper.classList.add("tvw-justify-end");
+    }
+    wrapper.appendChild(bubble);
+    fragment.appendChild(wrapper);
+  });
+
+  container.appendChild(fragment);
+  container.scrollTop = container.scrollHeight;
+};
+
+
+