vanilla-agent 1.12.0 → 1.14.0

package/dist/widget.css

@@ -861,3 +861,80 @@ form:focus-within textarea {
   color: inherit;
   text-decoration: underline;
 }
+
+/* Markdown paragraph styles */
+.vanilla-message-bubble p {
+  margin: 0;
+}
+
+.vanilla-message-bubble p + p {
+  margin-top: 0.75rem;
+}
+
+/* Markdown list styles */
+.vanilla-message-bubble ul,
+.vanilla-message-bubble ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.vanilla-message-bubble ul {
+  list-style-type: disc;
+}
+
+.vanilla-message-bubble ol {
+  list-style-type: decimal;
+}
+
+.vanilla-message-bubble li {
+  margin: 0.25rem 0;
+  padding-left: 0.25rem;
+}
+
+/* Nested lists */
+.vanilla-message-bubble ul ul,
+.vanilla-message-bubble ol ul {
+  list-style-type: circle;
+  margin: 0.25rem 0;
+}
+
+.vanilla-message-bubble ul ul ul,
+.vanilla-message-bubble ol ul ul,
+.vanilla-message-bubble ul ol ul,
+.vanilla-message-bubble ol ol ul {
+  list-style-type: square;
+}
+
+.vanilla-message-bubble ul ol,
+.vanilla-message-bubble ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.25rem 0;
+}
+
+/* Ensure user message paragraphs and lists have proper styling too */
+.vanilla-message-user-bubble p {
+  margin: 0;
+}
+
+.vanilla-message-user-bubble p + p {
+  margin-top: 0.75rem;
+}
+
+.vanilla-message-user-bubble ul,
+.vanilla-message-user-bubble ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.vanilla-message-user-bubble ul {
+  list-style-type: disc;
+}
+
+.vanilla-message-user-bubble ol {
+  list-style-type: decimal;
+}
+
+.vanilla-message-user-bubble li {
+  margin: 0.25rem 0;
+  padding-left: 0.25rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.12.0",
+  "version": "1.14.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/client.ts

@@ -876,6 +876,7 @@ export class AgentWidgetClient {
               // Try to extract text from final structured content
               const parser = streamParsers.get(assistant.id);
               let extractedText: string | null = null;
+              let asyncPending = false;
               
               if (parser) {
                 // First check if parser already has extracted text
@@ -890,6 +891,7 @@ export class AgentWidgetClient {
                   // Try parser.processChunk as last resort
                   const parsedResult = parser.processChunk(contentToProcess);
                   if (parsedResult instanceof Promise) {
+                    asyncPending = true;
                     parsedResult.then((result) => {
                       // Extract text from result (could be string or object)
                       const text = typeof result === 'string' ? result : result?.text ?? null;
@@ -898,6 +900,9 @@ export class AgentWidgetClient {
                         if (currentAssistant && currentAssistant.id === assistant.id) {
                           currentAssistant.content = text;
                           currentAssistant.streaming = false;
+                          // Clean up
+                          streamParsers.delete(currentAssistant.id);
+                          rawContentBuffers.delete(currentAssistant.id);
                           emitMessage(currentAssistant);
                         }
                       }
@@ -909,26 +914,29 @@ export class AgentWidgetClient {
                 }
               }
               
-            // Set content: use extracted text if available, otherwise use raw content
-            if (extractedText !== null && extractedText.trim() !== "") {
-              assistant.content = extractedText;
-            } else if (!rawContentBuffers.has(assistant.id)) {
-              // Only use raw final content if we didn't accumulate chunks
-              assistant.content = ensureStringContent(finalContent);
-            }
-              
-              // Clean up parser and buffer
-              const parserToClose = streamParsers.get(assistant.id);
-              if (parserToClose) {
-                const closeResult = parserToClose.close?.();
-                if (closeResult instanceof Promise) {
-                  closeResult.catch(() => {});
+              // Skip sync emit if we're waiting on async parser
+              if (!asyncPending) {
+                // Set content: use extracted text if available, otherwise use raw content
+                if (extractedText !== null && extractedText.trim() !== "") {
+                  assistant.content = extractedText;
+                } else if (!rawContentBuffers.has(assistant.id)) {
+                  // Only use raw final content if we didn't accumulate chunks
+                  assistant.content = ensureStringContent(finalContent);
                 }
-                streamParsers.delete(assistant.id);
+                
+                // Clean up parser and buffer
+                const parserToClose = streamParsers.get(assistant.id);
+                if (parserToClose) {
+                  const closeResult = parserToClose.close?.();
+                  if (closeResult instanceof Promise) {
+                    closeResult.catch(() => {});
+                  }
+                  streamParsers.delete(assistant.id);
+                }
+                rawContentBuffers.delete(assistant.id);
+                assistant.streaming = false;
+                emitMessage(assistant);
               }
-              rawContentBuffers.delete(assistant.id);
-              assistant.streaming = false;
-              emitMessage(assistant);
             }
           }
         } else if (payloadType === "step_complete") {
@@ -945,6 +953,7 @@ export class AgentWidgetClient {
             // Check if we already have extracted text from streaming
             const parser = streamParsers.get(assistant.id);
             let hasExtractedText = false;
+            let asyncPending = false;
             
             if (parser) {
               // First check if parser already extracted text during streaming
@@ -971,6 +980,7 @@ export class AgentWidgetClient {
                   // Try parser
                   const parsedResult = parser.processChunk(contentToProcess);
                   if (parsedResult instanceof Promise) {
+                    asyncPending = true;
                     parsedResult.then((result) => {
                       // Extract text from result (could be string or object)
                       const text = typeof result === 'string' ? result : result?.text ?? null;
@@ -980,22 +990,27 @@ export class AgentWidgetClient {
                         if (currentAssistant && currentAssistant.id === assistant.id) {
                           currentAssistant.content = text;
                           currentAssistant.streaming = false;
+                          // Clean up
+                          streamParsers.delete(currentAssistant.id);
+                          rawContentBuffers.delete(currentAssistant.id);
                           emitMessage(currentAssistant);
                         }
                       } else {
                         // No extracted text - check if we should show raw content
                         const finalExtractedText = parser.getExtractedText();
-                        if (finalExtractedText === null || finalExtractedText.trim() === "") {
-                          // No extracted text available - show raw content only if no streaming happened
-                          const currentAssistant = assistantMessage;
-                          if (currentAssistant && currentAssistant.id === assistant.id) {
+                        const currentAssistant = assistantMessage;
+                        if (currentAssistant && currentAssistant.id === assistant.id) {
+                          if (finalExtractedText !== null && finalExtractedText.trim() !== "") {
+                            currentAssistant.content = finalExtractedText;
+                          } else if (!rawContentBuffers.has(currentAssistant.id)) {
                             // Only show raw content if we never had any extracted text
-                            if (!rawContentBuffers.has(assistant.id)) {
-                              currentAssistant.content = ensureStringContent(finalContent);
-                            }
-                            currentAssistant.streaming = false;
-                            emitMessage(currentAssistant);
+                            currentAssistant.content = ensureStringContent(finalContent);
                           }
+                          currentAssistant.streaming = false;
+                          // Clean up
+                          streamParsers.delete(currentAssistant.id);
+                          rawContentBuffers.delete(currentAssistant.id);
+                          emitMessage(currentAssistant);
                         }
                       }
                     });
@@ -1019,29 +1034,32 @@ export class AgentWidgetClient {
               }
             }
             
-            // Ensure rawContent is set even if there's no parser (for action parsing)
-            if (!assistant.rawContent) {
-              const rawBuffer = rawContentBuffers.get(assistant.id);
-              assistant.rawContent = rawBuffer ?? ensureStringContent(finalContent);
-            }
-            
-            // Only show raw content if we never extracted any text and no buffer was used
-            if (!hasExtractedText && !rawContentBuffers.has(assistant.id)) {
-              // No extracted text and no streaming happened - show raw content
-              assistant.content = ensureStringContent(finalContent);
-            }
-            
-            // Clean up parser and buffer
-            if (parser) {
-              const closeResult = parser.close?.();
-              if (closeResult instanceof Promise) {
-                closeResult.catch(() => {});
+            // Skip sync emit if we're waiting on async parser
+            if (!asyncPending) {
+              // Ensure rawContent is set even if there's no parser (for action parsing)
+              if (!assistant.rawContent) {
+                const rawBuffer = rawContentBuffers.get(assistant.id);
+                assistant.rawContent = rawBuffer ?? ensureStringContent(finalContent);
               }
+              
+              // Only show raw content if we never extracted any text and no buffer was used
+              if (!hasExtractedText && !rawContentBuffers.has(assistant.id)) {
+                // No extracted text and no streaming happened - show raw content
+                assistant.content = ensureStringContent(finalContent);
+              }
+              
+              // Clean up parser and buffer
+              if (parser) {
+                const closeResult = parser.close?.();
+                if (closeResult instanceof Promise) {
+                  closeResult.catch(() => {});
+                }
+              }
+              streamParsers.delete(assistant.id);
+              rawContentBuffers.delete(assistant.id);
+              assistant.streaming = false;
+              emitMessage(assistant);
             }
-            streamParsers.delete(assistant.id);
-            rawContentBuffers.delete(assistant.id);
-            assistant.streaming = false;
-            emitMessage(assistant);
           } else {
             // No final content, just mark as complete and clean up
             streamParsers.delete(assistant.id);
@@ -1090,12 +1108,20 @@ export class AgentWidgetClient {
             // Clean up parser and buffer
             streamParsers.delete(assistant.id);
             rawContentBuffers.delete(assistant.id);
-            if (displayContent !== assistant.content) {
+            
+            // Only emit if something actually changed to avoid flicker
+            const contentChanged = displayContent !== assistant.content;
+            const streamingChanged = assistant.streaming !== false;
+            
+            if (contentChanged) {
               assistant.content = displayContent;
-              emitMessage(assistant);
             }
             assistant.streaming = false;
-            emitMessage(assistant);
+            
+            // Only emit if content or streaming state changed
+            if (contentChanged || streamingChanged) {
+              emitMessage(assistant);
+            }
           } else {
             // No final content, just mark as complete and clean up
             if (assistantMessage !== null) {
@@ -1104,8 +1130,12 @@ export class AgentWidgetClient {
               const msg: AgentWidgetMessage = assistantMessage;
               streamParsers.delete(msg.id);
               rawContentBuffers.delete(msg.id);
-              msg.streaming = false;
-              emitMessage(msg);
+              
+              // Only emit if streaming state changed
+              if (msg.streaming !== false) {
+                msg.streaming = false;
+                emitMessage(msg);
+              }
             }
           }
           onEvent({ type: "status", status: "idle" });

package/src/styles/widget.css

@@ -861,3 +861,80 @@ form:focus-within textarea {
   color: inherit;
   text-decoration: underline;
 }
+
+/* Markdown paragraph styles */
+.vanilla-message-bubble p {
+  margin: 0;
+}
+
+.vanilla-message-bubble p + p {
+  margin-top: 0.75rem;
+}
+
+/* Markdown list styles */
+.vanilla-message-bubble ul,
+.vanilla-message-bubble ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.vanilla-message-bubble ul {
+  list-style-type: disc;
+}
+
+.vanilla-message-bubble ol {
+  list-style-type: decimal;
+}
+
+.vanilla-message-bubble li {
+  margin: 0.25rem 0;
+  padding-left: 0.25rem;
+}
+
+/* Nested lists */
+.vanilla-message-bubble ul ul,
+.vanilla-message-bubble ol ul {
+  list-style-type: circle;
+  margin: 0.25rem 0;
+}
+
+.vanilla-message-bubble ul ul ul,
+.vanilla-message-bubble ol ul ul,
+.vanilla-message-bubble ul ol ul,
+.vanilla-message-bubble ol ol ul {
+  list-style-type: square;
+}
+
+.vanilla-message-bubble ul ol,
+.vanilla-message-bubble ol ol {
+  list-style-type: lower-alpha;
+  margin: 0.25rem 0;
+}
+
+/* Ensure user message paragraphs and lists have proper styling too */
+.vanilla-message-user-bubble p {
+  margin: 0;
+}
+
+.vanilla-message-user-bubble p + p {
+  margin-top: 0.75rem;
+}
+
+.vanilla-message-user-bubble ul,
+.vanilla-message-user-bubble ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.vanilla-message-user-bubble ul {
+  list-style-type: disc;
+}
+
+.vanilla-message-user-bubble ol {
+  list-style-type: decimal;
+}
+
+.vanilla-message-user-bubble li {
+  margin: 0.25rem 0;
+  padding-left: 0.25rem;
+}

package/src/ui.ts

@@ -764,8 +764,8 @@ export const createAgentExperience = (
   };
 
 
-  // Message rendering with plugin support
-  const renderMessagesWithPlugins = (
+  // Message rendering with plugin support (implementation)
+  const renderMessagesWithPluginsImpl = (
     container: HTMLElement,
     messages: AgentWidgetMessage[],
     transform: MessageTransform
@@ -915,8 +915,13 @@ export const createAgentExperience = (
     const hasStreamingAssistantMessage = messages.some(
       (msg) => msg.role === "assistant" && msg.streaming
     );
+    
+    // Also check if there's a recently completed assistant message (streaming just ended)
+    // This prevents flicker when the message completes but isStreaming hasn't updated yet
+    const lastMessage = messages[messages.length - 1];
+    const hasRecentAssistantResponse = lastMessage?.role === "assistant" && !lastMessage.streaming;
 
-    if (isStreaming && messages.some((msg) => msg.role === "user") && !hasStreamingAssistantMessage) {
+    if (isStreaming && messages.some((msg) => msg.role === "user") && !hasStreamingAssistantMessage && !hasRecentAssistantResponse) {
       const typingIndicator = createTypingIndicator();
 
       // Create a bubble wrapper for the typing indicator (similar to assistant messages)
@@ -956,6 +961,9 @@ export const createAgentExperience = (
     });
   };
 
+  // Alias for clarity - the implementation handles flicker prevention via typing indicator logic
+  const renderMessagesWithPlugins = renderMessagesWithPluginsImpl;
+
   const updateOpenState = () => {
     if (!launcherEnabled) return;
     if (open) {
@@ -1017,7 +1025,8 @@ export const createAgentExperience = (
   };
 
   const setComposerDisabled = (disabled: boolean) => {
-    textarea.disabled = disabled;
+    // Keep textarea always enabled so users can type while streaming
+    // Only disable submit controls to prevent sending during streaming
     sendButton.disabled = disabled;
     if (micButton) {
       micButton.disabled = disabled;

package/src/utils/code-generators.ts

@@ -792,6 +792,7 @@ function generateScriptInstallerCode(config: any): string {
     lines.push(`      debug: ${config.debug},`);
   }
 
+  lines.push("      postprocessMessage: ({ text }) => window.AgentWidget.markdownPostprocessor(text)");
   lines.push("    }");
   lines.push("  };");
   lines.push("</script>");
@@ -925,6 +926,7 @@ function generateScriptManualCode(config: any): string {
     lines.push(`      debug: ${config.debug},`);
   }
 
+  lines.push("      postprocessMessage: ({ text }) => window.AgentWidget.markdownPostprocessor(text)");
   lines.push("    }");
   lines.push("  });");
   lines.push("</script>");
@@ -1181,7 +1183,8 @@ function generateScriptAdvancedCode(config: any): string {
   lines.push("      requestMiddleware: ({ payload }) => ({");
   lines.push("        ...payload,");
   lines.push("        metadata: domContextProvider()");
-  lines.push("      })");
+  lines.push("      }),");
+  lines.push("      postprocessMessage: ({ text }) => agentWidget.markdownPostprocessor(text)");
   lines.push("    });");
   lines.push("");
   lines.push("    // Initialize widget when DOM is loaded");
@@ -1208,6 +1211,7 @@ function generateScriptAdvancedCode(config: any): string {
   lines.push("      // Initialize widget with DOM context");
   lines.push("      const handle = agentWidget.initAgentWidget({");
   lines.push("        target: 'body',");
+  lines.push("        useShadowDom: false,");
   lines.push("        config: widgetConfig");
   lines.push("      });");
   lines.push("");

package/src/utils/formatting.ts

@@ -1,6 +1,19 @@
 import { AgentWidgetReasoning, AgentWidgetToolCall, AgentWidgetStreamParser, AgentWidgetStreamParserResult } from "../types";
 import { parse as parsePartialJson, STR, OBJ } from "partial-json";
 
+/**
+ * Unescapes JSON string escape sequences that LLMs often double-escape.
+ * Converts literal \n, \r, \t sequences to actual control characters.
+ */
+const unescapeJsonString = (str: string): string => {
+  return str
+    .replace(/\\n/g, '\n')
+    .replace(/\\r/g, '\r')
+    .replace(/\\t/g, '\t')
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, '\\');
+};
+
 export const formatUnknownValue = (value: unknown): string => {
   if (value === null) return "null";
   if (value === undefined) return "";
@@ -277,7 +290,7 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
           // Check for component directives - extract text if present for combined text+component
           if (parsed.component && typeof parsed.component === "string") {
             // For component directives, extract text if present, otherwise empty
-            extractedText = typeof parsed.text === "string" ? parsed.text : "";
+            extractedText = typeof parsed.text === "string" ? unescapeJsonString(parsed.text) : "";
           }
           // Check for form directives - these also don't have text fields
           else if (parsed.type === "init" && parsed.form) {
@@ -286,7 +299,7 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
           }
           // Extract text field if available
           else if (typeof parsed.text === "string") {
-            extractedText = parsed.text;
+            extractedText = unescapeJsonString(parsed.text);
           }
         }
       } catch (error) {
@@ -332,10 +345,15 @@ export const createFlexibleJsonStreamParser = (
   const defaultExtractor = (parsed: any): string | null => {
     if (!parsed || typeof parsed !== "object") return null;
 
+    // Helper to safely extract and unescape text
+    const getText = (value: any): string | null => {
+      return typeof value === "string" ? unescapeJsonString(value) : null;
+    };
+
     // Check for component directives - extract text if present for combined text+component
     if (parsed.component && typeof parsed.component === "string") {
       // For component directives, extract text if present, otherwise empty
-      return typeof parsed.text === "string" ? parsed.text : "";
+      return typeof parsed.text === "string" ? unescapeJsonString(parsed.text) : "";
     }
     
     // Check for form directives - these also don't have text fields
@@ -348,18 +366,18 @@ export const createFlexibleJsonStreamParser = (
     if (parsed.action) {
       switch (parsed.action) {
         case 'nav_then_click':
-          return parsed.on_load_text || parsed.text || null;
+          return getText(parsed.on_load_text) || getText(parsed.text) || null;
         case 'message':
         case 'message_and_click':
         case 'checkout':
-          return parsed.text || null;
+          return getText(parsed.text) || null;
         default:
-          return parsed.text || parsed.display_text || parsed.message || null;
+          return getText(parsed.text) || getText(parsed.display_text) || getText(parsed.message) || null;
       }
     }
     
     // Fallback to common text field names
-    return parsed.text || parsed.display_text || parsed.message || parsed.content || null;
+    return getText(parsed.text) || getText(parsed.display_text) || getText(parsed.message) || getText(parsed.content) || null;
   };
   
   const extractText = textExtractor || defaultExtractor;