vanilla-agent 1.0.0 → 1.2.0

package/dist/widget.css

@@ -783,3 +783,43 @@ form:focus-within textarea {
 .tvw-voice-recording svg {
   animation: voice-recording-pulse 1.5s ease-in-out infinite;
 }
+
+/* Markdown content overflow handling */
+#vanilla-agent-root pre {
+  overflow-x: auto;
+  max-width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  background-color: #f3f4f6;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid #e5e7eb;
+}
+
+#vanilla-agent-root code {
+  word-break: break-word;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.875em;
+}
+
+#vanilla-agent-root pre code {
+  font-size: inherit;
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+
+#vanilla-agent-root img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.5rem 0;
+  border-radius: 0.375rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.0.0",
+  "version": "1.2.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/message-bubble.ts

@@ -7,6 +7,35 @@ export type MessageTransform = (context: {
   streaming: boolean;
 }) => string;
 
+// Create typing indicator element
+export const createTypingIndicator = (): HTMLElement => {
+  const container = document.createElement("div");
+  container.className = "tvw-flex tvw-items-center tvw-space-x-1 tvw-h-5 tvw-mt-2";
+
+  const dot1 = document.createElement("div");
+  dot1.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot1.style.animationDelay = "0ms";
+
+  const dot2 = document.createElement("div");
+  dot2.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot2.style.animationDelay = "250ms";
+
+  const dot3 = document.createElement("div");
+  dot3.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
+  dot3.style.animationDelay = "500ms";
+
+  const srOnly = document.createElement("span");
+  srOnly.className = "tvw-sr-only";
+  srOnly.textContent = "Loading";
+
+  container.appendChild(dot1);
+  container.appendChild(dot2);
+  container.appendChild(dot3);
+  container.appendChild(srOnly);
+
+  return container;
+};
+
 export const createStandardBubble = (
   message: AgentWidgetMessage,
   transform: MessageTransform
@@ -39,11 +68,21 @@ export const createStandardBubble = (
   }
 
   const bubble = createElement("div", classes.join(" "));
-  bubble.innerHTML = transform({
+
+  // Add message content
+  const contentDiv = document.createElement("div");
+  contentDiv.innerHTML = transform({
     text: message.content,
     message,
     streaming: Boolean(message.streaming)
   });
+  bubble.appendChild(contentDiv);
+
+  // Add typing indicator if this is a streaming assistant message with content
+  if (message.streaming && message.role === "assistant" && message.content && message.content.trim()) {
+    const typingIndicator = createTypingIndicator();
+    bubble.appendChild(typingIndicator);
+  }
 
   return bubble;
 };

package/src/runtime/init.ts

@@ -116,7 +116,7 @@ export const initAgentWidget = (
   let controller = createAgentExperience(mount, options.config);
   options.onReady?.();
 
-  return {
+  const handle: AgentWidgetInitHandle = {
     host,
     update(nextConfig: AgentWidgetConfig) {
       controller.update(nextConfig);
@@ -133,9 +133,32 @@ export const initAgentWidget = (
     clearChat() {
       controller.clearChat();
     },
+    setMessage(message: string) {
+      return controller.setMessage(message);
+    },
+    submitMessage(message?: string) {
+      return controller.submitMessage(message);
+    },
+    startVoiceRecognition() {
+      return controller.startVoiceRecognition();
+    },
+    stopVoiceRecognition() {
+      return controller.stopVoiceRecognition();
+    },
     destroy() {
       controller.destroy();
       host.remove();
+      // Clean up window reference if it was set
+      if (options.windowKey && typeof window !== 'undefined') {
+        delete (window as any)[options.windowKey];
+      }
     }
   };
+
+  // Store on window if windowKey is provided
+  if (options.windowKey && typeof window !== 'undefined') {
+    (window as any)[options.windowKey] = handle;
+  }
+
+  return handle;
 };

package/src/styles/widget.css

@@ -783,3 +783,43 @@ form:focus-within textarea {
 .tvw-voice-recording svg {
   animation: voice-recording-pulse 1.5s ease-in-out infinite;
 }
+
+/* Markdown content overflow handling */
+#vanilla-agent-root pre {
+  overflow-x: auto;
+  max-width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  background-color: #f3f4f6;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid #e5e7eb;
+}
+
+#vanilla-agent-root code {
+  word-break: break-word;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.875em;
+}
+
+#vanilla-agent-root pre code {
+  font-size: inherit;
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+
+#vanilla-agent-root img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.5rem 0;
+  border-radius: 0.375rem;
+}

package/src/types.ts

@@ -216,4 +216,5 @@ export type AgentWidgetInitOptions = {
   config?: AgentWidgetConfig;
   useShadowDom?: boolean;
   onReady?: () => void;
+  windowKey?: string; // If provided, stores the controller on window[windowKey] for global access
 };

package/src/ui.ts

@@ -8,7 +8,7 @@ import { statusCopy } from "./utils/constants";
 import { createLauncherButton } from "./components/launcher";
 import { createWrapper, buildPanel } from "./components/panel";
 import { MessageTransform } from "./components/message-bubble";
-import { createStandardBubble } from "./components/message-bubble";
+import { createStandardBubble, createTypingIndicator } from "./components/message-bubble";
 import { createReasoningBubble } from "./components/reasoning-bubble";
 import { createToolBubble } from "./components/tool-bubble";
 import { createSuggestions } from "./components/suggestions";
@@ -23,6 +23,10 @@ type Controller = {
   close: () => void;
   toggle: () => void;
   clearChat: () => void;
+  setMessage: (message: string) => boolean;
+  submitMessage: (message?: string) => boolean;
+  startVoiceRecognition: () => boolean;
+  stopVoiceRecognition: () => boolean;
 };
 
 const buildPostprocessor = (cfg?: AgentWidgetConfig): MessageTransform => {
@@ -148,34 +152,6 @@ export const createAgentExperience = (
     });
   };
 
-  // Create typing indicator element
-  const createTypingIndicator = (): HTMLElement => {
-    const container = document.createElement("div");
-    container.className = "tvw-flex tvw-items-center tvw-space-x-1 tvw-h-5";
-
-    const dot1 = document.createElement("div");
-    dot1.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
-    dot1.style.animationDelay = "0ms";
-
-    const dot2 = document.createElement("div");
-    dot2.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
-    dot2.style.animationDelay = "250ms";
-
-    const dot3 = document.createElement("div");
-    dot3.className = "tvw-bg-cw-primary tvw-animate-typing tvw-rounded-full tvw-h-1.5 tvw-w-1.5";
-    dot3.style.animationDelay = "500ms";
-
-    const srOnly = document.createElement("span");
-    srOnly.className = "tvw-sr-only";
-    srOnly.textContent = "Loading";
-
-    container.appendChild(dot1);
-    container.appendChild(dot2);
-    container.appendChild(dot3);
-    container.appendChild(srOnly);
-
-    return container;
-  };
 
   // Message rendering with plugin support
   const renderMessagesWithPlugins = (
@@ -258,10 +234,15 @@ export const createAgentExperience = (
       fragment.appendChild(wrapper);
     });
 
-    // Add typing indicator if streaming and there's at least one user message
-    if (isStreaming && messages.some((msg) => msg.role === "user")) {
+    // Add standalone typing indicator only if streaming but no assistant message is streaming yet
+    // (This shows while waiting for the stream to start)
+    const hasStreamingAssistantMessage = messages.some(
+      (msg) => msg.role === "assistant" && msg.streaming && msg.content && msg.content.trim()
+    );
+
+    if (isStreaming && messages.some((msg) => msg.role === "user") && !hasStreamingAssistantMessage) {
       const typingIndicator = createTypingIndicator();
-      
+
       // Create a bubble wrapper for the typing indicator (similar to assistant messages)
       const typingBubble = document.createElement("div");
       typingBubble.className = [
@@ -277,9 +258,9 @@ export const createAgentExperience = (
         "tvw-px-5",
         "tvw-py-3"
       ].join(" ");
-      
+
       typingBubble.appendChild(typingIndicator);
-      
+
       const typingWrapper = document.createElement("div");
       typingWrapper.className = "tvw-flex";
       typingWrapper.appendChild(typingBubble);
@@ -1619,6 +1600,55 @@ export const createAgentExperience = (
       });
       window.dispatchEvent(clearEvent);
     },
+    setMessage(message: string): boolean {
+      if (!textarea) return false;
+      if (session.isStreaming()) return false;
+      
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true);
+      }
+      
+      textarea.value = message;
+      // Trigger input event for any listeners
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      return true;
+    },
+    submitMessage(message?: string): boolean {
+      if (session.isStreaming()) return false;
+      
+      const valueToSubmit = message?.trim() || textarea.value.trim();
+      if (!valueToSubmit) return false;
+      
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true);
+      }
+      
+      textarea.value = "";
+      session.sendMessage(valueToSubmit);
+      return true;
+    },
+    startVoiceRecognition(): boolean {
+      if (isRecording || session.isStreaming()) return false;
+      
+      const SpeechRecognitionClass = getSpeechRecognitionClass();
+      if (!SpeechRecognitionClass) return false;
+      
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true);
+      }
+      
+      startVoiceRecognition();
+      return true;
+    },
+    stopVoiceRecognition(): boolean {
+      if (!isRecording) return false;
+      
+      stopVoiceRecognition();
+      return true;
+    },
     destroy() {
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();