@runtypelabs/persona 3.8.1 → 3.8.3

package/dist/theme-editor.cjs

@@ -9585,19 +9585,19 @@ var createTimestamp = (message, timestampConfig) => {
   return timestamp;
 };
 var getBubbleClasses = (role, layout = "bubble") => {
-  const baseClasses = ["vanilla-message-bubble", "persona-max-w-[85%]"];
+  const baseClasses = ["persona-message-bubble", "persona-max-w-[85%]"];
   switch (layout) {
     case "flat":
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-text-persona-primary",
           "persona-py-2"
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-text-persona-primary",
           "persona-py-2"
         );
@@ -9610,7 +9610,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
       );
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-bg-persona-accent",
           "persona-text-white",
@@ -9620,7 +9620,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-bg-persona-surface",
           "persona-text-persona-primary",
           "persona-px-3",
@@ -9639,7 +9639,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
       );
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-bg-persona-accent",
           "persona-text-white",
@@ -9648,7 +9648,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-bg-persona-surface",
           "persona-border",
           "persona-border-persona-message-border",
@@ -9844,8 +9844,8 @@ var createReasoningBubble = (message) => {
   const bubble = createElement(
     "div",
     [
-      "vanilla-message-bubble",
-      "vanilla-reasoning-bubble",
+      "persona-message-bubble",
+      "persona-reasoning-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -9956,8 +9956,8 @@ var createToolBubble = (message, config) => {
   const bubble = createElement(
     "div",
     [
-      "vanilla-message-bubble",
-      "vanilla-tool-bubble",
+      "persona-message-bubble",
+      "persona-tool-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -10179,6 +10179,7 @@ var createApprovalBubble = (message, config) => {
   const bubble = createElement(
     "div",
     [
+      "persona-approval-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -13481,6 +13482,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       selectedModelId: composerCfg == null ? void 0 : composerCfg.selectedModelId,
       onModelChange: (modelId) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
+        if (config.agent) {
+          config.agent = { ...config.agent, model: modelId };
+        }
       },
       onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
         composerVoiceBridge == null ? void 0 : composerVoiceBridge();
@@ -13527,6 +13531,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && suggestions) {
+    suggestions.style.maxWidth = contentMaxWidth;
+    suggestions.style.marginLeft = "auto";
+    suggestions.style.marginRight = "auto";
+  }
   if (contentMaxWidth && attachmentPreviewsContainer) {
     attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
     attachmentPreviewsContainer.style.marginLeft = "auto";
@@ -13624,7 +13633,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const target = event.target;
     const headerButton = target.closest('button[data-expand-header="true"]');
     if (!headerButton) return;
-    const bubble = headerButton.closest(".vanilla-reasoning-bubble, .vanilla-tool-bubble");
+    const bubble = headerButton.closest(".persona-reasoning-bubble, .persona-tool-bubble");
     if (!bubble) return;
     const messageId = bubble.getAttribute("data-message-id");
     if (!messageId) return;
@@ -13644,6 +13653,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       updateToolBubbleUI(messageId, bubble, config);
     }
+    messageCache.delete(messageId);
   };
   messagesWrapper.addEventListener("pointerdown", (event) => {
     const target = event.target;
@@ -13731,7 +13741,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (!approvalButton) return;
     event.preventDefault();
     event.stopPropagation();
-    const approvalBubble = approvalButton.closest(".vanilla-approval-bubble");
+    const approvalBubble = approvalButton.closest(".persona-approval-bubble");
     if (!approvalBubble) return;
     const messageId = approvalBubble.getAttribute("data-message-id");
     if (!messageId) return;
@@ -14631,7 +14641,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               if (wrapChrome) {
                 const componentWrapper = document.createElement("div");
                 componentWrapper.className = [
-                  "vanilla-message-bubble",
+                  "persona-message-bubble",
                   "persona-max-w-[85%]",
                   "persona-rounded-2xl",
                   "persona-bg-persona-surface",
@@ -16729,6 +16739,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "auto";
           composerForm.style.marginRight = "auto";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = updatedContentMaxWidth;
+          suggestions.style.marginLeft = "auto";
+          suggestions.style.marginRight = "auto";
+        }
       } else {
         messagesWrapper.style.maxWidth = "";
         messagesWrapper.style.marginLeft = "";
@@ -16739,6 +16754,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "";
           composerForm.style.marginRight = "";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = "";
+          suggestions.style.marginLeft = "";
+          suggestions.style.marginRight = "";
+        }
       }
       const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
       const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;

package/dist/theme-editor.js

@@ -9480,19 +9480,19 @@ var createTimestamp = (message, timestampConfig) => {
   return timestamp;
 };
 var getBubbleClasses = (role, layout = "bubble") => {
-  const baseClasses = ["vanilla-message-bubble", "persona-max-w-[85%]"];
+  const baseClasses = ["persona-message-bubble", "persona-max-w-[85%]"];
   switch (layout) {
     case "flat":
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-text-persona-primary",
           "persona-py-2"
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-text-persona-primary",
           "persona-py-2"
         );
@@ -9505,7 +9505,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
       );
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-bg-persona-accent",
           "persona-text-white",
@@ -9515,7 +9515,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-bg-persona-surface",
           "persona-text-persona-primary",
           "persona-px-3",
@@ -9534,7 +9534,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
       );
       if (role === "user") {
         baseClasses.push(
-          "vanilla-message-user-bubble",
+          "persona-message-user-bubble",
           "persona-ml-auto",
           "persona-bg-persona-accent",
           "persona-text-white",
@@ -9543,7 +9543,7 @@ var getBubbleClasses = (role, layout = "bubble") => {
         );
       } else {
         baseClasses.push(
-          "vanilla-message-assistant-bubble",
+          "persona-message-assistant-bubble",
           "persona-bg-persona-surface",
           "persona-border",
           "persona-border-persona-message-border",
@@ -9739,8 +9739,8 @@ var createReasoningBubble = (message) => {
   const bubble = createElement(
     "div",
     [
-      "vanilla-message-bubble",
-      "vanilla-reasoning-bubble",
+      "persona-message-bubble",
+      "persona-reasoning-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -9851,8 +9851,8 @@ var createToolBubble = (message, config) => {
   const bubble = createElement(
     "div",
     [
-      "vanilla-message-bubble",
-      "vanilla-tool-bubble",
+      "persona-message-bubble",
+      "persona-tool-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -10074,6 +10074,7 @@ var createApprovalBubble = (message, config) => {
   const bubble = createElement(
     "div",
     [
+      "persona-approval-bubble",
       "persona-w-full",
       "persona-max-w-[85%]",
       "persona-rounded-2xl",
@@ -13376,6 +13377,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       selectedModelId: composerCfg == null ? void 0 : composerCfg.selectedModelId,
       onModelChange: (modelId) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
+        if (config.agent) {
+          config.agent = { ...config.agent, model: modelId };
+        }
       },
       onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
         composerVoiceBridge == null ? void 0 : composerVoiceBridge();
@@ -13422,6 +13426,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && suggestions) {
+    suggestions.style.maxWidth = contentMaxWidth;
+    suggestions.style.marginLeft = "auto";
+    suggestions.style.marginRight = "auto";
+  }
   if (contentMaxWidth && attachmentPreviewsContainer) {
     attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
     attachmentPreviewsContainer.style.marginLeft = "auto";
@@ -13519,7 +13528,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const target = event.target;
     const headerButton = target.closest('button[data-expand-header="true"]');
     if (!headerButton) return;
-    const bubble = headerButton.closest(".vanilla-reasoning-bubble, .vanilla-tool-bubble");
+    const bubble = headerButton.closest(".persona-reasoning-bubble, .persona-tool-bubble");
     if (!bubble) return;
     const messageId = bubble.getAttribute("data-message-id");
     if (!messageId) return;
@@ -13539,6 +13548,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       updateToolBubbleUI(messageId, bubble, config);
     }
+    messageCache.delete(messageId);
   };
   messagesWrapper.addEventListener("pointerdown", (event) => {
     const target = event.target;
@@ -13626,7 +13636,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     if (!approvalButton) return;
     event.preventDefault();
     event.stopPropagation();
-    const approvalBubble = approvalButton.closest(".vanilla-approval-bubble");
+    const approvalBubble = approvalButton.closest(".persona-approval-bubble");
     if (!approvalBubble) return;
     const messageId = approvalBubble.getAttribute("data-message-id");
     if (!messageId) return;
@@ -14526,7 +14536,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
               if (wrapChrome) {
                 const componentWrapper = document.createElement("div");
                 componentWrapper.className = [
-                  "vanilla-message-bubble",
+                  "persona-message-bubble",
                   "persona-max-w-[85%]",
                   "persona-rounded-2xl",
                   "persona-bg-persona-surface",
@@ -16624,6 +16634,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "auto";
           composerForm.style.marginRight = "auto";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = updatedContentMaxWidth;
+          suggestions.style.marginLeft = "auto";
+          suggestions.style.marginRight = "auto";
+        }
       } else {
         messagesWrapper.style.maxWidth = "";
         messagesWrapper.style.marginLeft = "";
@@ -16634,6 +16649,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginLeft = "";
           composerForm.style.marginRight = "";
         }
+        if (suggestions) {
+          suggestions.style.maxWidth = "";
+          suggestions.style.marginLeft = "";
+          suggestions.style.marginRight = "";
+        }
       }
       const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
       const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;