vanilla-agent 1.19.0 → 1.21.0

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/launcher.ts

@@ -158,10 +158,19 @@ export const createLauncherButton = (
         ? positionMap[launcher.position]
         : positionMap["bottom-right"];
 
+    // Removed hardcoded border/shadow classes (tvw-shadow-lg, tvw-border, tvw-border-gray-200)
+    // These are now applied via inline styles from config
     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 tvw-z-50";
+      "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-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer tvw-z-50";
 
     button.className = `${base} ${positionClass}`;
+    
+    // Apply launcher border and shadow from config (with defaults matching previous Tailwind classes)
+    const defaultBorder = "1px solid #e5e7eb";
+    const defaultShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+    
+    button.style.border = launcher.border ?? defaultBorder;
+    button.style.boxShadow = launcher.shadow ?? defaultShadow;
   };
 
   const destroy = () => {

package/src/defaults.ts

@@ -48,6 +48,7 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     agentIconText: "💬",
     position: "bottom-right",
     width: "min(400px, calc(100vw - 24px))",
+    heightOffset: 0,
     autoExpand: false,
     callToActionIconHidden: false,
     agentIconSize: "40px",
@@ -75,6 +76,8 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       paddingY: "0px",
     },
     headerIconHidden: false,
+    border: "1px solid #e5e7eb",
+    shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
   },
   copy: {
     welcomeTitle: "Hello 👋",
@@ -158,6 +161,13 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     },
     slots: {},
   },
+  markdown: {
+    options: {
+      gfm: true,
+      breaks: true,
+    },
+    disableDefaultStyles: false,
+  },
   debug: false,
 };
 
@@ -234,5 +244,13 @@ export function mergeWithDefaults(
         ...config.layout?.slots,
       },
     },
+    markdown: {
+      ...DEFAULT_WIDGET_CONFIG.markdown,
+      ...config.markdown,
+      options: {
+        ...DEFAULT_WIDGET_CONFIG.markdown?.options,
+        ...config.markdown?.options,
+      },
+    },
   };
 }

package/src/index.ts

@@ -28,7 +28,11 @@ export type {
   SlotRenderer,
   SlotRenderContext,
   HeaderRenderContext,
-  MessageRenderContext
+  MessageRenderContext,
+  // Markdown types
+  AgentWidgetMarkdownConfig,
+  AgentWidgetMarkdownOptions,
+  AgentWidgetMarkdownRendererOverrides
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -50,8 +54,12 @@ export {
 export {
   markdownPostprocessor,
   escapeHtml,
-  directivePostprocessor
+  directivePostprocessor,
+  createMarkdownProcessor,
+  createMarkdownProcessorFromConfig,
+  createDirectivePostprocessor
 } from "./postprocessors";
+export type { MarkdownProcessorOptions } from "./postprocessors";
 export {
   createPlainTextParser,
   createJsonStreamParser,

package/src/postprocessors.ts

@@ -1,13 +1,100 @@
-import { marked } from "marked";
+import { Marked, type RendererObject } from "marked";
+import type { AgentWidgetMarkdownConfig, AgentWidgetMarkdownRendererOverrides, AgentWidgetMarkdownOptions } from "./types";
 
-marked.setOptions({ breaks: true });
+/**
+ * Options for creating a markdown processor
+ */
+export type MarkdownProcessorOptions = {
+  /** Marked parsing options */
+  markedOptions?: AgentWidgetMarkdownOptions;
+  /** Custom renderer overrides */
+  renderer?: AgentWidgetMarkdownRendererOverrides;
+};
+
+/**
+ * Converts AgentWidgetMarkdownRendererOverrides to marked's RendererObject format
+ */
+const convertRendererOverrides = (
+  overrides?: AgentWidgetMarkdownRendererOverrides
+): Partial<RendererObject> | undefined => {
+  if (!overrides) return undefined;
+  
+  // The token-based API in marked v12+ matches our type definitions
+  // We can pass through the overrides directly
+  return overrides as Partial<RendererObject>;
+};
 
 /**
- * Basic markdown renderer. Remember to sanitize the returned HTML if you render
- * untrusted content in your host page.
+ * Creates a configured markdown processor with custom options and renderers.
+ * 
+ * @param options - Configuration options for the markdown processor
+ * @returns A function that converts markdown text to HTML
+ * 
+ * @example
+ * ```typescript
+ * // Basic usage with defaults
+ * const processor = createMarkdownProcessor();
+ * const html = processor("# Hello World");
+ * 
+ * // With custom options
+ * const processor = createMarkdownProcessor({
+ *   markedOptions: { gfm: true, breaks: true },
+ *   renderer: {
+ *     link(token) {
+ *       return `<a href="${token.href}" target="_blank">${token.text}</a>`;
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export const createMarkdownProcessor = (options?: MarkdownProcessorOptions) => {
+  const opts = options?.markedOptions;
+  const markedInstance = new Marked({
+    gfm: opts?.gfm ?? true,
+    breaks: opts?.breaks ?? true,
+    pedantic: opts?.pedantic,
+    silent: opts?.silent,
+  });
+  
+  const rendererOverrides = convertRendererOverrides(options?.renderer);
+  if (rendererOverrides) {
+    markedInstance.use({ renderer: rendererOverrides });
+  }
+  
+  return (text: string): string => {
+    return markedInstance.parse(text) as string;
+  };
+};
+
+/**
+ * Creates a markdown processor from AgentWidgetMarkdownConfig.
+ * This is a convenience function that maps the widget config to processor options.
+ * 
+ * @param config - The markdown configuration from widget config
+ * @returns A function that converts markdown text to HTML
+ */
+export const createMarkdownProcessorFromConfig = (config?: AgentWidgetMarkdownConfig) => {
+  if (!config) {
+    return createMarkdownProcessor();
+  }
+  
+  return createMarkdownProcessor({
+    markedOptions: config.options,
+    renderer: config.renderer,
+  });
+};
+
+// Create default markdown processor instance
+const defaultMarkdownProcessor = createMarkdownProcessor();
+
+/**
+ * Basic markdown renderer using default settings.
+ * Remember to sanitize the returned HTML if you render untrusted content in your host page.
+ * 
+ * For custom configuration, use `createMarkdownProcessor()` or `createMarkdownProcessorFromConfig()`.
  */
 export const markdownPostprocessor = (text: string): string => {
-  return marked.parse(text) as string;
+  return defaultMarkdownProcessor(text);
 };
 
 /**
@@ -54,11 +141,42 @@ const directiveReplacer = (source: string, placeholders: Array<{ token: string;
   return working;
 };
 
+/**
+ * Creates a directive postprocessor with custom markdown configuration.
+ * Converts special directives (either `<Form type="init" />` or
+ * `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
+ * elements that the widget upgrades after render. Remaining text is rendered as
+ * Markdown with the provided configuration.
+ * 
+ * @param markdownConfig - Optional markdown configuration
+ * @returns A function that processes text with directives and markdown
+ */
+export const createDirectivePostprocessor = (markdownConfig?: AgentWidgetMarkdownConfig) => {
+  const processor = createMarkdownProcessorFromConfig(markdownConfig);
+  
+  return (text: string): string => {
+    const placeholders: Array<{ token: string; type: string }> = [];
+    const withTokens = directiveReplacer(text, placeholders);
+    let html = processor(withTokens);
+
+    placeholders.forEach(({ token, type }) => {
+      const tokenRegex = new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+      const safeType = escapeAttribute(type);
+      const replacement = `<div class="tvw-form-directive" data-tv-form="${safeType}"></div>`;
+      html = html.replace(tokenRegex, replacement);
+    });
+
+    return html;
+  };
+};
+
 /**
  * Converts special directives (either `<Form type="init" />` or
  * `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
  * elements that the widget upgrades after render. Remaining text is rendered as
- * Markdown.
+ * Markdown using default settings.
+ * 
+ * For custom markdown configuration, use `createDirectivePostprocessor()`.
  */
 export const directivePostprocessor = (text: string): string => {
   const placeholders: Array<{ token: string; type: string }> = [];