vanilla-agent 1.19.0 → 1.21.0

package/src/styles/widget.css

@@ -6,6 +6,16 @@
   all: initial;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   line-height: 1.5;
+  
+  /* Theme-aware markdown variables - inherit from theme colors set by JavaScript */
+  --cw-md-code-block-bg: var(--cw-container, #f3f4f6);
+  --cw-md-code-block-border-color: var(--cw-border, #e5e7eb);
+  --cw-md-inline-code-bg: var(--cw-container, #f3f4f6);
+  --cw-md-table-border-color: var(--cw-border, #e5e7eb);
+  --cw-md-table-header-bg: var(--cw-container, #f8fafc);
+  --cw-md-hr-color: var(--cw-divider, #e5e7eb);
+  --cw-md-blockquote-border-color: var(--cw-accent, #3b82f6);
+  --cw-md-blockquote-text-color: var(--cw-muted, #6b7280);
 }
 
 #vanilla-agent-root * {
@@ -86,6 +96,71 @@
   --cw-radius-lg: 1.5rem;
   --cw-launcher-radius: 9999px;
   --cw-button-radius: 9999px;
+
+  /* Markdown Header Variables */
+  --cw-md-h1-size: 1.5rem;
+  --cw-md-h1-weight: 700;
+  --cw-md-h1-margin: 1rem 0 0.5rem;
+  --cw-md-h1-line-height: 1.25;
+  --cw-md-h2-size: 1.25rem;
+  --cw-md-h2-weight: 700;
+  --cw-md-h2-margin: 0.875rem 0 0.5rem;
+  --cw-md-h2-line-height: 1.3;
+  --cw-md-h3-size: 1.125rem;
+  --cw-md-h3-weight: 600;
+  --cw-md-h3-margin: 0.75rem 0 0.375rem;
+  --cw-md-h3-line-height: 1.4;
+  --cw-md-h4-size: 1rem;
+  --cw-md-h4-weight: 600;
+  --cw-md-h4-margin: 0.625rem 0 0.25rem;
+  --cw-md-h4-line-height: 1.5;
+  --cw-md-h5-size: 0.875rem;
+  --cw-md-h5-weight: 600;
+  --cw-md-h5-margin: 0.5rem 0 0.25rem;
+  --cw-md-h5-line-height: 1.5;
+  --cw-md-h6-size: 0.75rem;
+  --cw-md-h6-weight: 600;
+  --cw-md-h6-margin: 0.5rem 0 0.25rem;
+  --cw-md-h6-line-height: 1.5;
+
+  /* Markdown Table Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-table-border-color: #e5e7eb;
+  --cw-md-table-header-bg: #f8fafc;
+  --cw-md-table-header-weight: 600;
+  --cw-md-table-cell-padding: 0.5rem 0.75rem;
+  --cw-md-table-border-radius: 0.375rem;
+
+  /* Markdown Horizontal Rule Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-hr-color: #e5e7eb;
+  --cw-md-hr-height: 1px;
+  --cw-md-hr-margin: 1rem 0;
+
+  /* Markdown Blockquote Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-blockquote-border-color: #3b82f6;
+  --cw-md-blockquote-border-width: 3px;
+  --cw-md-blockquote-padding: 0.5rem 1rem;
+  --cw-md-blockquote-margin: 0.5rem 0;
+  --cw-md-blockquote-bg: transparent;
+  --cw-md-blockquote-text-color: #6b7280;
+  --cw-md-blockquote-font-style: italic;
+
+  /* Markdown Code Block Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-code-block-bg: #f3f4f6;
+  --cw-md-code-block-border-color: #e5e7eb;
+  --cw-md-code-block-text-color: inherit;
+  --cw-md-code-block-padding: 0.75rem;
+  --cw-md-code-block-border-radius: 0.375rem;
+  --cw-md-code-block-font-size: 0.875rem;
+
+  /* Markdown Inline Code Variables (defaults - theme-aware values set on #vanilla-agent-root) */
+  --cw-md-inline-code-bg: #f3f4f6;
+  --cw-md-inline-code-padding: 0.125rem 0.375rem;
+  --cw-md-inline-code-border-radius: 0.25rem;
+  --cw-md-inline-code-font-size: 0.875em;
+
+  /* Markdown Strong/Em Variables */
+  --cw-md-strong-weight: 600;
+  --cw-md-em-style: italic;
 }
 
 .tvw-rounded-xl {
@@ -803,13 +878,14 @@ form:focus-within textarea {
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
-  background-color: #f3f4f6;
-  padding: 0.75rem;
-  border-radius: 0.375rem;
+  background-color: var(--cw-md-code-block-bg);
+  color: var(--cw-md-code-block-text-color);
+  padding: var(--cw-md-code-block-padding);
+  border-radius: var(--cw-md-code-block-border-radius);
   margin: 0.5rem 0;
-  font-size: 0.875rem;
+  font-size: var(--cw-md-code-block-font-size);
   line-height: 1.5;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--cw-md-code-block-border-color);
 }
 
 .vanilla-message-bubble code {
@@ -938,3 +1014,204 @@ form:focus-within textarea {
   margin: 0.25rem 0;
   padding-left: 0.25rem;
 }
+
+/* ============================================
+   Markdown Header Styles
+   ============================================ */
+.vanilla-message-bubble h1 {
+  font-size: var(--cw-md-h1-size);
+  font-weight: var(--cw-md-h1-weight);
+  margin: var(--cw-md-h1-margin);
+  line-height: var(--cw-md-h1-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h2 {
+  font-size: var(--cw-md-h2-size);
+  font-weight: var(--cw-md-h2-weight);
+  margin: var(--cw-md-h2-margin);
+  line-height: var(--cw-md-h2-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h3 {
+  font-size: var(--cw-md-h3-size);
+  font-weight: var(--cw-md-h3-weight);
+  margin: var(--cw-md-h3-margin);
+  line-height: var(--cw-md-h3-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h4 {
+  font-size: var(--cw-md-h4-size);
+  font-weight: var(--cw-md-h4-weight);
+  margin: var(--cw-md-h4-margin);
+  line-height: var(--cw-md-h4-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h5 {
+  font-size: var(--cw-md-h5-size);
+  font-weight: var(--cw-md-h5-weight);
+  margin: var(--cw-md-h5-margin);
+  line-height: var(--cw-md-h5-line-height);
+  color: inherit;
+}
+
+.vanilla-message-bubble h6 {
+  font-size: var(--cw-md-h6-size);
+  font-weight: var(--cw-md-h6-weight);
+  margin: var(--cw-md-h6-margin);
+  line-height: var(--cw-md-h6-line-height);
+  color: inherit;
+}
+
+/* Remove top margin on first heading */
+.vanilla-message-bubble h1:first-child,
+.vanilla-message-bubble h2:first-child,
+.vanilla-message-bubble h3:first-child,
+.vanilla-message-bubble h4:first-child,
+.vanilla-message-bubble h5:first-child,
+.vanilla-message-bubble h6:first-child {
+  margin-top: 0;
+}
+
+/* ============================================
+   Markdown Table Styles
+   ============================================ */
+.vanilla-message-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  overflow: hidden;
+  border-radius: var(--cw-md-table-border-radius);
+  border: 1px solid var(--cw-md-table-border-color);
+}
+
+.vanilla-message-bubble thead {
+  background-color: var(--cw-md-table-header-bg);
+}
+
+.vanilla-message-bubble th {
+  font-weight: var(--cw-md-table-header-weight);
+  text-align: left;
+  padding: var(--cw-md-table-cell-padding);
+  border-bottom: 1px solid var(--cw-md-table-border-color);
+}
+
+.vanilla-message-bubble td {
+  padding: var(--cw-md-table-cell-padding);
+  border-bottom: 1px solid var(--cw-md-table-border-color);
+  text-align: left;
+}
+
+.vanilla-message-bubble tr:last-child td {
+  border-bottom: none;
+}
+
+.vanilla-message-bubble tbody tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* ============================================
+   Markdown Horizontal Rule Styles
+   ============================================ */
+.vanilla-message-bubble hr {
+  border: none;
+  height: var(--cw-md-hr-height);
+  background-color: var(--cw-md-hr-color);
+  margin: var(--cw-md-hr-margin);
+}
+
+/* ============================================
+   Markdown Blockquote Styles
+   ============================================ */
+.vanilla-message-bubble blockquote {
+  border-left: var(--cw-md-blockquote-border-width) solid var(--cw-md-blockquote-border-color);
+  padding: var(--cw-md-blockquote-padding);
+  margin: var(--cw-md-blockquote-margin);
+  background-color: var(--cw-md-blockquote-bg);
+  color: var(--cw-md-blockquote-text-color);
+  font-style: var(--cw-md-blockquote-font-style);
+}
+
+.vanilla-message-bubble blockquote p {
+  margin: 0;
+}
+
+.vanilla-message-bubble blockquote p + p {
+  margin-top: 0.5rem;
+}
+
+/* Nested blockquotes */
+.vanilla-message-bubble blockquote blockquote {
+  margin-left: 0.5rem;
+}
+
+/* ============================================
+   Markdown Inline Code Styles (not in pre)
+   ============================================ */
+.vanilla-message-bubble code:not(pre code) {
+  background-color: var(--cw-md-inline-code-bg);
+  padding: var(--cw-md-inline-code-padding);
+  border-radius: var(--cw-md-inline-code-border-radius);
+  font-size: var(--cw-md-inline-code-font-size);
+}
+
+/* ============================================
+   Markdown Strong/Emphasis Styles
+   ============================================ */
+.vanilla-message-bubble strong,
+.vanilla-message-bubble b {
+  font-weight: var(--cw-md-strong-weight);
+}
+
+.vanilla-message-bubble em,
+.vanilla-message-bubble i {
+  font-style: var(--cw-md-em-style);
+}
+
+/* ============================================
+   User Message Markdown Overrides
+   Ensure styles work in user bubbles too
+   ============================================ */
+.vanilla-message-user-bubble h1,
+.vanilla-message-user-bubble h2,
+.vanilla-message-user-bubble h3,
+.vanilla-message-user-bubble h4,
+.vanilla-message-user-bubble h5,
+.vanilla-message-user-bubble h6 {
+  color: inherit;
+}
+
+.vanilla-message-user-bubble table {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble th,
+.vanilla-message-user-bubble td {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble thead {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vanilla-message-user-bubble tbody tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.vanilla-message-user-bubble hr {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.vanilla-message-user-bubble blockquote {
+  border-left-color: rgba(255, 255, 255, 0.5);
+  color: inherit;
+  opacity: 0.9;
+}
+
+.vanilla-message-user-bubble code:not(pre code) {
+  background-color: rgba(255, 255, 255, 0.2);
+}

package/src/types.ts

@@ -217,6 +217,14 @@ export type AgentWidgetLauncherConfig = {
    * @default "420px"
    */
   sidebarWidth?: string;
+  /**
+   * Offset (in pixels) to subtract from the calculated panel height.
+   * Useful for adjusting the panel height when there are other fixed elements on the page.
+   * Only applies when not in fullHeight or sidebarMode.
+   * 
+   * @default 0
+   */
+  heightOffset?: number;
   callToActionIconText?: string;
   callToActionIconName?: string;
   callToActionIconColor?: string;
@@ -242,6 +250,18 @@ export type AgentWidgetLauncherConfig = {
   closeButtonTooltipText?: string;
   closeButtonShowTooltip?: boolean;
   clearChat?: AgentWidgetClearChatConfig;
+  /**
+   * Border style for the launcher button.
+   * @example "1px solid #e5e7eb" | "2px solid #3b82f6" | "none"
+   * @default "1px solid #e5e7eb"
+   */
+  border?: string;
+  /**
+   * Box shadow for the launcher button.
+   * @example "0 10px 15px -3px rgba(0,0,0,0.1)" | "none"
+   * @default "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
+   */
+  shadow?: string;
 };
 
 export type AgentWidgetSendButtonConfig = {
@@ -602,6 +622,271 @@ export type AgentWidgetLayoutConfig = {
   slots?: Partial<Record<WidgetLayoutSlot, SlotRenderer>>;
 };
 
+// ============================================================================
+// Markdown Configuration Types
+// ============================================================================
+
+/**
+ * Token types for marked renderer methods
+ */
+export type AgentWidgetMarkdownHeadingToken = {
+  type: "heading";
+  raw: string;
+  depth: 1 | 2 | 3 | 4 | 5 | 6;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownCodeToken = {
+  type: "code";
+  raw: string;
+  text: string;
+  lang?: string;
+  escaped?: boolean;
+};
+
+export type AgentWidgetMarkdownBlockquoteToken = {
+  type: "blockquote";
+  raw: string;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownTableToken = {
+  type: "table";
+  raw: string;
+  header: Array<{ text: string; tokens: unknown[] }>;
+  rows: Array<Array<{ text: string; tokens: unknown[] }>>;
+  align: Array<"left" | "center" | "right" | null>;
+};
+
+export type AgentWidgetMarkdownLinkToken = {
+  type: "link";
+  raw: string;
+  href: string;
+  title: string | null;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownImageToken = {
+  type: "image";
+  raw: string;
+  href: string;
+  title: string | null;
+  text: string;
+};
+
+export type AgentWidgetMarkdownListToken = {
+  type: "list";
+  raw: string;
+  ordered: boolean;
+  start: number | "";
+  loose: boolean;
+  items: unknown[];
+};
+
+export type AgentWidgetMarkdownListItemToken = {
+  type: "list_item";
+  raw: string;
+  task: boolean;
+  checked?: boolean;
+  loose: boolean;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownParagraphToken = {
+  type: "paragraph";
+  raw: string;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownCodespanToken = {
+  type: "codespan";
+  raw: string;
+  text: string;
+};
+
+export type AgentWidgetMarkdownStrongToken = {
+  type: "strong";
+  raw: string;
+  text: string;
+  tokens: unknown[];
+};
+
+export type AgentWidgetMarkdownEmToken = {
+  type: "em";
+  raw: string;
+  text: string;
+  tokens: unknown[];
+};
+
+/**
+ * Custom renderer overrides for markdown elements.
+ * Each method receives the token and should return an HTML string.
+ * Return `false` to use the default renderer.
+ * 
+ * @example
+ * ```typescript
+ * renderer: {
+ *   heading(token) {
+ *     return `<h${token.depth} class="custom-heading">${token.text}</h${token.depth}>`;
+ *   },
+ *   link(token) {
+ *     return `<a href="${token.href}" target="_blank" rel="noopener">${token.text}</a>`;
+ *   }
+ * }
+ * ```
+ */
+export type AgentWidgetMarkdownRendererOverrides = {
+  /** Override heading rendering (h1-h6) */
+  heading?: (token: AgentWidgetMarkdownHeadingToken) => string | false;
+  /** Override code block rendering */
+  code?: (token: AgentWidgetMarkdownCodeToken) => string | false;
+  /** Override blockquote rendering */
+  blockquote?: (token: AgentWidgetMarkdownBlockquoteToken) => string | false;
+  /** Override table rendering */
+  table?: (token: AgentWidgetMarkdownTableToken) => string | false;
+  /** Override link rendering */
+  link?: (token: AgentWidgetMarkdownLinkToken) => string | false;
+  /** Override image rendering */
+  image?: (token: AgentWidgetMarkdownImageToken) => string | false;
+  /** Override list rendering (ul/ol) */
+  list?: (token: AgentWidgetMarkdownListToken) => string | false;
+  /** Override list item rendering */
+  listitem?: (token: AgentWidgetMarkdownListItemToken) => string | false;
+  /** Override paragraph rendering */
+  paragraph?: (token: AgentWidgetMarkdownParagraphToken) => string | false;
+  /** Override inline code rendering */
+  codespan?: (token: AgentWidgetMarkdownCodespanToken) => string | false;
+  /** Override strong/bold rendering */
+  strong?: (token: AgentWidgetMarkdownStrongToken) => string | false;
+  /** Override emphasis/italic rendering */
+  em?: (token: AgentWidgetMarkdownEmToken) => string | false;
+  /** Override horizontal rule rendering */
+  hr?: () => string | false;
+  /** Override line break rendering */
+  br?: () => string | false;
+  /** Override deleted/strikethrough rendering */
+  del?: (token: { type: "del"; raw: string; text: string; tokens: unknown[] }) => string | false;
+  /** Override checkbox rendering (in task lists) */
+  checkbox?: (token: { checked: boolean }) => string | false;
+  /** Override HTML passthrough */
+  html?: (token: { type: "html"; raw: string; text: string }) => string | false;
+  /** Override text rendering */
+  text?: (token: { type: "text"; raw: string; text: string }) => string | false;
+};
+
+/**
+ * Markdown parsing options (subset of marked options)
+ */
+export type AgentWidgetMarkdownOptions = {
+  /** 
+   * Enable GitHub Flavored Markdown (tables, strikethrough, autolinks).
+   * @default true 
+   */
+  gfm?: boolean;
+  /** 
+   * Convert \n in paragraphs into <br>.
+   * @default true 
+   */
+  breaks?: boolean;
+  /** 
+   * Conform to original markdown.pl as much as possible.
+   * @default false 
+   */
+  pedantic?: boolean;
+  /** 
+   * Add id attributes to headings.
+   * @default false 
+   */
+  headerIds?: boolean;
+  /** 
+   * Prefix for heading id attributes.
+   * @default "" 
+   */
+  headerPrefix?: string;
+  /** 
+   * Mangle email addresses for spam protection.
+   * @default true 
+   */
+  mangle?: boolean;
+  /** 
+   * Silent mode - don't throw on parse errors.
+   * @default false 
+   */
+  silent?: boolean;
+};
+
+/**
+ * Markdown configuration for customizing how markdown is rendered in chat messages.
+ * Provides three levels of control:
+ * 
+ * 1. **CSS Variables** - Override styles via `--cw-md-*` CSS custom properties
+ * 2. **Parsing Options** - Configure marked behavior via `options`
+ * 3. **Custom Renderers** - Full control via `renderer` overrides
+ * 
+ * @example
+ * ```typescript
+ * // Level 2: Configure parsing options
+ * config: {
+ *   markdown: {
+ *     options: {
+ *       gfm: true,
+ *       breaks: true,
+ *       headerIds: true
+ *     }
+ *   }
+ * }
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // Level 3: Custom renderers
+ * config: {
+ *   markdown: {
+ *     renderer: {
+ *       heading(token) {
+ *         return `<h${token.depth} class="custom-h${token.depth}">${token.text}</h${token.depth}>`;
+ *       },
+ *       link(token) {
+ *         return `<a href="${token.href}" target="_blank">${token.text}</a>`;
+ *       },
+ *       table(token) {
+ *         // Wrap tables in a scrollable container
+ *         return `<div class="table-scroll">${this.parser.parse(token.tokens)}</div>`;
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export type AgentWidgetMarkdownConfig = {
+  /**
+   * Markdown parsing options.
+   * These are passed directly to the marked parser.
+   */
+  options?: AgentWidgetMarkdownOptions;
+  
+  /**
+   * Custom renderer overrides for specific markdown elements.
+   * Each method receives a token object and should return an HTML string.
+   * Return `false` to fall back to the default renderer.
+   */
+  renderer?: AgentWidgetMarkdownRendererOverrides;
+  
+  /**
+   * Disable default markdown CSS styles.
+   * When true, the widget won't apply any default styles to markdown elements,
+   * allowing you to provide your own CSS.
+   * 
+   * @default false
+   */
+  disableDefaultStyles?: boolean;
+};
+
 export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
@@ -811,6 +1096,32 @@ export type AgentWidgetConfig = {
    * ```
    */
   layout?: AgentWidgetLayoutConfig;
+  
+  /**
+   * Markdown rendering configuration.
+   * Customize how markdown is parsed and rendered in chat messages.
+   * 
+   * Override methods:
+   * 1. **CSS Variables** - Override `--cw-md-*` variables in your stylesheet
+   * 2. **Options** - Configure marked parser behavior
+   * 3. **Renderers** - Custom rendering functions for specific elements
+   * 4. **postprocessMessage** - Complete control over message transformation
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   markdown: {
+   *     options: { breaks: true, gfm: true },
+   *     renderer: {
+   *       link(token) {
+   *         return `<a href="${token.href}" target="_blank">${token.text}</a>`;
+   *       }
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  markdown?: AgentWidgetMarkdownConfig;
 };
 
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";

package/src/ui.ts

@@ -1,4 +1,4 @@
-import { escapeHtml } from "./postprocessors";
+import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
 import {
   AgentWidgetConfig,
@@ -96,6 +96,12 @@ const buildPostprocessor = (
   cfg: AgentWidgetConfig | undefined,
   actionManager?: ReturnType<typeof createActionManager>
 ): MessageTransform => {
+  // Create markdown processor from config if markdown config is provided
+  // This allows users to enable markdown rendering via config.markdown
+  const markdownProcessor = cfg?.markdown 
+    ? createMarkdownProcessorFromConfig(cfg.markdown)
+    : null;
+
   return (context) => {
     let nextText = context.text ?? "";
     const rawPayload = context.message.rawContent ?? null;
@@ -116,6 +122,7 @@ const buildPostprocessor = (
       }
     }
 
+    // Priority: postprocessMessage > markdown config > escapeHtml
     if (cfg?.postprocessMessage) {
       return cfg.postprocessMessage({
         ...context,
@@ -124,6 +131,11 @@ const buildPostprocessor = (
       });
     }
 
+    // Use markdown processor if markdown config is provided
+    if (markdownProcessor) {
+      return markdownProcessor(nextText);
+    }
+
     return escapeHtml(nextText);
   };
 };
@@ -1592,9 +1604,11 @@ export const createAgentExperience = (
     if (!fullHeight) {
       const viewportHeight = window.innerHeight;
       const verticalMargin = 64; // leave space for launcher's offset
+      const heightOffset = config.launcher?.heightOffset ?? 0;
       const available = Math.max(200, viewportHeight - verticalMargin);
       const clamped = Math.min(640, available);
-      panel.style.height = `${clamped}px`;
+      const finalHeight = Math.max(200, clamped - heightOffset);
+      panel.style.height = `${finalHeight}px`;
     }
   };