@runtypelabs/persona 3.4.0 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/ui.ts CHANGED
@@ -2624,6 +2624,20 @@ export const createAgentExperience = (
2624
2624
  "Ask anything about your account or products.";
2625
2625
  textarea.placeholder = config.copy?.inputPlaceholder ?? "How can I help...";
2626
2626
 
2627
+ // Toggle welcome card visibility
2628
+ const introCard = body.querySelector("[data-persona-intro-card]") as HTMLElement | null;
2629
+ if (introCard) {
2630
+ const showCard = config.copy?.showWelcomeCard !== false;
2631
+ introCard.style.display = showCard ? "" : "none";
2632
+ if (showCard) {
2633
+ body.classList.remove("persona-gap-3");
2634
+ body.classList.add("persona-gap-6");
2635
+ } else {
2636
+ body.classList.remove("persona-gap-6");
2637
+ body.classList.add("persona-gap-3");
2638
+ }
2639
+ }
2640
+
2627
2641
  // Only update send button text if NOT using icon mode
2628
2642
  const useIcon = config.sendButton?.useIcon ?? false;
2629
2643
  if (!useIcon) {
@@ -4824,6 +4838,30 @@ export const createAgentExperience = (
4824
4838
  tooltip.style.display = "none";
4825
4839
  }
4826
4840
 
4841
+ // Update contentMaxWidth on messages wrapper and composer
4842
+ const updatedContentMaxWidth = config.layout?.contentMaxWidth;
4843
+ if (updatedContentMaxWidth) {
4844
+ messagesWrapper.style.maxWidth = updatedContentMaxWidth;
4845
+ messagesWrapper.style.marginLeft = "auto";
4846
+ messagesWrapper.style.marginRight = "auto";
4847
+ messagesWrapper.style.width = "100%";
4848
+ if (composerForm) {
4849
+ composerForm.style.maxWidth = updatedContentMaxWidth;
4850
+ composerForm.style.marginLeft = "auto";
4851
+ composerForm.style.marginRight = "auto";
4852
+ }
4853
+ } else {
4854
+ messagesWrapper.style.maxWidth = "";
4855
+ messagesWrapper.style.marginLeft = "";
4856
+ messagesWrapper.style.marginRight = "";
4857
+ messagesWrapper.style.width = "";
4858
+ if (composerForm) {
4859
+ composerForm.style.maxWidth = "";
4860
+ composerForm.style.marginLeft = "";
4861
+ composerForm.style.marginRight = "";
4862
+ }
4863
+ }
4864
+
4827
4865
  // Update status indicator visibility and text
4828
4866
  const statusIndicatorConfig = config.statusIndicator ?? {};
4829
4867
  const isVisible = statusIndicatorConfig.visible ?? true;
@@ -4841,6 +4879,13 @@ export const createAgentExperience = (
4841
4879
  };
4842
4880
  applyStatusToElement(statusText, getCurrentStatusText(currentStatus), statusIndicatorConfig, currentStatus);
4843
4881
  }
4882
+
4883
+ // Update status text alignment
4884
+ statusText.classList.remove("persona-text-left", "persona-text-center", "persona-text-right");
4885
+ const alignClass = statusIndicatorConfig.align === "left" ? "persona-text-left"
4886
+ : statusIndicatorConfig.align === "center" ? "persona-text-center"
4887
+ : "persona-text-right";
4888
+ statusText.classList.add(alignClass);
4844
4889
  },
4845
4890
  open() {
4846
4891
  if (!launcherEnabled) return;