@runtypelabs/persona 1.48.0 → 2.1.0

package/src/components/feedback.ts

@@ -72,7 +72,7 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
   } = options;
 
   const container = document.createElement('div');
-  container.className = 'tvw-feedback-container tvw-feedback-csat';
+  container.className = 'persona-feedback-container persona-feedback-csat';
   container.setAttribute('role', 'dialog');
   container.setAttribute('aria-label', 'Customer satisfaction feedback');
 
@@ -80,19 +80,19 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
 
   // Create inner content
   const content = document.createElement('div');
-  content.className = 'tvw-feedback-content';
+  content.className = 'persona-feedback-content';
 
   // Header
   const header = document.createElement('div');
-  header.className = 'tvw-feedback-header';
+  header.className = 'persona-feedback-header';
   
   const titleEl = document.createElement('h3');
-  titleEl.className = 'tvw-feedback-title';
+  titleEl.className = 'persona-feedback-title';
   titleEl.textContent = title;
   header.appendChild(titleEl);
 
   const subtitleEl = document.createElement('p');
-  subtitleEl.className = 'tvw-feedback-subtitle';
+  subtitleEl.className = 'persona-feedback-subtitle';
   subtitleEl.textContent = subtitle;
   header.appendChild(subtitleEl);
 
@@ -100,7 +100,7 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
 
   // Rating buttons (1-5 stars or numbers)
   const ratingContainer = document.createElement('div');
-  ratingContainer.className = 'tvw-feedback-rating tvw-feedback-rating-csat';
+  ratingContainer.className = 'persona-feedback-rating persona-feedback-rating-csat';
   ratingContainer.setAttribute('role', 'radiogroup');
   ratingContainer.setAttribute('aria-label', 'Satisfaction rating from 1 to 5');
 
@@ -109,7 +109,7 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
   for (let i = 1; i <= 5; i++) {
     const ratingButton = document.createElement('button');
     ratingButton.type = 'button';
-    ratingButton.className = 'tvw-feedback-rating-btn tvw-feedback-star-btn';
+    ratingButton.className = 'persona-feedback-rating-btn persona-feedback-star-btn';
     ratingButton.setAttribute('role', 'radio');
     ratingButton.setAttribute('aria-checked', 'false');
     ratingButton.setAttribute('aria-label', `${i} star${i > 1 ? 's' : ''}: ${ratingLabels[i - 1]}`);
@@ -118,7 +118,7 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
 
     // Star icon (filled when selected)
     ratingButton.innerHTML = `
-      <svg class="tvw-feedback-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <svg class="persona-feedback-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
       </svg>
     `;
@@ -142,10 +142,10 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
   let commentTextarea: HTMLTextAreaElement | null = null;
   if (showComment) {
     const commentContainer = document.createElement('div');
-    commentContainer.className = 'tvw-feedback-comment-container';
+    commentContainer.className = 'persona-feedback-comment-container';
     
     commentTextarea = document.createElement('textarea');
-    commentTextarea.className = 'tvw-feedback-comment';
+    commentTextarea.className = 'persona-feedback-comment';
     commentTextarea.placeholder = commentPlaceholder;
     commentTextarea.rows = 3;
     commentTextarea.setAttribute('aria-label', 'Additional comments');
@@ -156,11 +156,11 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
 
   // Action buttons
   const actions = document.createElement('div');
-  actions.className = 'tvw-feedback-actions';
+  actions.className = 'persona-feedback-actions';
 
   const skipButton = document.createElement('button');
   skipButton.type = 'button';
-  skipButton.className = 'tvw-feedback-btn tvw-feedback-btn-skip';
+  skipButton.className = 'persona-feedback-btn persona-feedback-btn-skip';
   skipButton.textContent = skipText;
   skipButton.addEventListener('click', () => {
     onDismiss?.();
@@ -169,13 +169,13 @@ export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
 
   const submitButton = document.createElement('button');
   submitButton.type = 'button';
-  submitButton.className = 'tvw-feedback-btn tvw-feedback-btn-submit';
+  submitButton.className = 'persona-feedback-btn persona-feedback-btn-submit';
   submitButton.textContent = submitText;
   submitButton.addEventListener('click', async () => {
     if (selectedRating === null) {
       // Shake the rating container to indicate selection required
-      ratingContainer.classList.add('tvw-feedback-shake');
-      setTimeout(() => ratingContainer.classList.remove('tvw-feedback-shake'), 500);
+      ratingContainer.classList.add('persona-feedback-shake');
+      setTimeout(() => ratingContainer.classList.remove('persona-feedback-shake'), 500);
       return;
     }
     
@@ -222,7 +222,7 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
   } = options;
 
   const container = document.createElement('div');
-  container.className = 'tvw-feedback-container tvw-feedback-nps';
+  container.className = 'persona-feedback-container persona-feedback-nps';
   container.setAttribute('role', 'dialog');
   container.setAttribute('aria-label', 'Net Promoter Score feedback');
 
@@ -230,19 +230,19 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
 
   // Create inner content
   const content = document.createElement('div');
-  content.className = 'tvw-feedback-content';
+  content.className = 'persona-feedback-content';
 
   // Header
   const header = document.createElement('div');
-  header.className = 'tvw-feedback-header';
+  header.className = 'persona-feedback-header';
   
   const titleEl = document.createElement('h3');
-  titleEl.className = 'tvw-feedback-title';
+  titleEl.className = 'persona-feedback-title';
   titleEl.textContent = title;
   header.appendChild(titleEl);
 
   const subtitleEl = document.createElement('p');
-  subtitleEl.className = 'tvw-feedback-subtitle';
+  subtitleEl.className = 'persona-feedback-subtitle';
   subtitleEl.textContent = subtitle;
   header.appendChild(subtitleEl);
 
@@ -250,20 +250,20 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
 
   // Rating buttons (0-10)
   const ratingContainer = document.createElement('div');
-  ratingContainer.className = 'tvw-feedback-rating tvw-feedback-rating-nps';
+  ratingContainer.className = 'persona-feedback-rating persona-feedback-rating-nps';
   ratingContainer.setAttribute('role', 'radiogroup');
   ratingContainer.setAttribute('aria-label', 'Likelihood rating from 0 to 10');
 
   // Labels row
   const labelsRow = document.createElement('div');
-  labelsRow.className = 'tvw-feedback-labels';
+  labelsRow.className = 'persona-feedback-labels';
   
   const lowLabelEl = document.createElement('span');
-  lowLabelEl.className = 'tvw-feedback-label-low';
+  lowLabelEl.className = 'persona-feedback-label-low';
   lowLabelEl.textContent = lowLabel;
   
   const highLabelEl = document.createElement('span');
-  highLabelEl.className = 'tvw-feedback-label-high';
+  highLabelEl.className = 'persona-feedback-label-high';
   highLabelEl.textContent = highLabel;
   
   labelsRow.appendChild(lowLabelEl);
@@ -271,14 +271,14 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
   
   // Numbers row
   const numbersRow = document.createElement('div');
-  numbersRow.className = 'tvw-feedback-numbers';
+  numbersRow.className = 'persona-feedback-numbers';
 
   const ratingButtons: HTMLButtonElement[] = [];
 
   for (let i = 0; i <= 10; i++) {
     const ratingButton = document.createElement('button');
     ratingButton.type = 'button';
-    ratingButton.className = 'tvw-feedback-rating-btn tvw-feedback-number-btn';
+    ratingButton.className = 'persona-feedback-rating-btn persona-feedback-number-btn';
     ratingButton.setAttribute('role', 'radio');
     ratingButton.setAttribute('aria-checked', 'false');
     ratingButton.setAttribute('aria-label', `Rating ${i} out of 10`);
@@ -287,11 +287,11 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
 
     // Color coding: detractors (0-6), passives (7-8), promoters (9-10)
     if (i <= 6) {
-      ratingButton.classList.add('tvw-feedback-detractor');
+      ratingButton.classList.add('persona-feedback-detractor');
     } else if (i <= 8) {
-      ratingButton.classList.add('tvw-feedback-passive');
+      ratingButton.classList.add('persona-feedback-passive');
     } else {
-      ratingButton.classList.add('tvw-feedback-promoter');
+      ratingButton.classList.add('persona-feedback-promoter');
     }
 
     ratingButton.addEventListener('click', () => {
@@ -314,10 +314,10 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
   let commentTextarea: HTMLTextAreaElement | null = null;
   if (showComment) {
     const commentContainer = document.createElement('div');
-    commentContainer.className = 'tvw-feedback-comment-container';
+    commentContainer.className = 'persona-feedback-comment-container';
     
     commentTextarea = document.createElement('textarea');
-    commentTextarea.className = 'tvw-feedback-comment';
+    commentTextarea.className = 'persona-feedback-comment';
     commentTextarea.placeholder = commentPlaceholder;
     commentTextarea.rows = 3;
     commentTextarea.setAttribute('aria-label', 'Additional comments');
@@ -328,11 +328,11 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
 
   // Action buttons
   const actions = document.createElement('div');
-  actions.className = 'tvw-feedback-actions';
+  actions.className = 'persona-feedback-actions';
 
   const skipButton = document.createElement('button');
   skipButton.type = 'button';
-  skipButton.className = 'tvw-feedback-btn tvw-feedback-btn-skip';
+  skipButton.className = 'persona-feedback-btn persona-feedback-btn-skip';
   skipButton.textContent = skipText;
   skipButton.addEventListener('click', () => {
     onDismiss?.();
@@ -341,13 +341,13 @@ export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
 
   const submitButton = document.createElement('button');
   submitButton.type = 'button';
-  submitButton.className = 'tvw-feedback-btn tvw-feedback-btn-submit';
+  submitButton.className = 'persona-feedback-btn persona-feedback-btn-submit';
   submitButton.textContent = submitText;
   submitButton.addEventListener('click', async () => {
     if (selectedRating === null) {
       // Shake the rating container to indicate selection required
-      numbersRow.classList.add('tvw-feedback-shake');
-      setTimeout(() => numbersRow.classList.remove('tvw-feedback-shake'), 500);
+      numbersRow.classList.add('persona-feedback-shake');
+      setTimeout(() => numbersRow.classList.remove('persona-feedback-shake'), 500);
       return;
     }
     

package/src/components/forms.ts

@@ -52,31 +52,31 @@ export const enhanceWithForms = (
       placeholder.dataset.enhanced = "true";
 
       const definition = formDefinitions[type] ?? formDefinitions.init;
-      placeholder.classList.add("tvw-form-card", "tvw-space-y-4");
+      placeholder.classList.add("persona-form-card", "persona-space-y-4");
 
-      const heading = createElement("div", "tvw-space-y-1");
+      const heading = createElement("div", "persona-space-y-1");
       const title = createElement(
         "h3",
-        "tvw-text-base tvw-font-semibold tvw-text-cw-primary"
+        "persona-text-base persona-font-semibold persona-text-persona-primary"
       );
       title.textContent = definition.title;
       heading.appendChild(title);
       if (definition.description) {
         const desc = createElement(
           "p",
-          "tvw-text-sm tvw-text-cw-muted"
+          "persona-text-sm persona-text-persona-muted"
         );
         desc.textContent = definition.description;
         heading.appendChild(desc);
       }
 
       const form = document.createElement("form");
-      form.className = "tvw-form-grid tvw-space-y-3";
+      form.className = "persona-form-grid persona-space-y-3";
 
       definition.fields.forEach((field) => {
-        const group = createElement("label", "tvw-form-field tvw-flex tvw-flex-col tvw-gap-1");
+        const group = createElement("label", "persona-form-field persona-flex persona-flex-col persona-gap-1");
         group.htmlFor = `${message.id}-${type}-${field.name}`;
-        const label = createElement("span", "tvw-text-xs tvw-font-medium tvw-text-cw-muted");
+        const label = createElement("span", "persona-text-xs persona-font-medium persona-text-persona-muted");
         label.textContent = field.label;
         group.appendChild(label);
 
@@ -90,7 +90,7 @@ export const enhanceWithForms = (
           control.type = inputType;
         }
         control.className =
-          "tvw-rounded-xl tvw-border tvw-border-gray-200 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-cw-primary";
+          "persona-rounded-xl persona-border persona-border-gray-200 persona-bg-white persona-px-3 persona-py-2 persona-text-sm persona-text-persona-primary focus:persona-outline-none focus:persona-border-persona-primary";
         control.id = `${message.id}-${type}-${field.name}`;
         control.name = field.name;
         control.placeholder = field.placeholder ?? "";
@@ -103,15 +103,15 @@ export const enhanceWithForms = (
 
       const actions = createElement(
         "div",
-        "tvw-flex tvw-items-center tvw-justify-between tvw-gap-2"
+        "persona-flex persona-items-center persona-justify-between persona-gap-2"
       );
       const status = createElement(
         "div",
-        "tvw-text-xs tvw-text-cw-muted tvw-min-h-[1.5rem]"
+        "persona-text-xs persona-text-persona-muted persona-min-h-[1.5rem]"
       );
       const submit = createElement(
         "button",
-        "tvw-inline-flex tvw-items-center tvw-rounded-full tvw-bg-cw-primary tvw-px-4 tvw-py-2 tvw-text-sm tvw-font-semibold tvw-text-white disabled:tvw-opacity-60 tvw-cursor-pointer"
+        "persona-inline-flex persona-items-center persona-rounded-full persona-bg-persona-primary persona-px-4 persona-py-2 persona-text-sm persona-font-semibold persona-text-white disabled:persona-opacity-60 persona-cursor-pointer"
       ) as HTMLButtonElement;
       submit.type = "submit";
       submit.textContent = definition.submitLabel ?? "Submit";

package/src/components/header-builder.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { buildHeader } from "./header-builder";
+
+describe("buildHeader tooltips", () => {
+  it("portals the close-button tooltip into the mounted document", () => {
+    const iframeDocument = document.implementation.createHTMLDocument("preview");
+    const { header, closeButton, closeButtonWrapper } = buildHeader({
+      config: {
+        launcher: {
+          clearChat: { enabled: false },
+          closeButtonShowTooltip: true,
+          closeButtonTooltipText: "Close chat"
+        }
+      } as any
+    });
+
+    iframeDocument.body.appendChild(header);
+
+    expect(closeButton.ownerDocument).toBe(iframeDocument);
+
+    closeButtonWrapper.dispatchEvent(new Event("mouseenter"));
+
+    expect(iframeDocument.body.querySelector(".persona-clear-chat-tooltip")).not.toBeNull();
+    expect(document.body.querySelector(".persona-clear-chat-tooltip")).toBeNull();
+
+    closeButtonWrapper.dispatchEvent(new Event("mouseleave"));
+
+    expect(iframeDocument.body.querySelector(".persona-clear-chat-tooltip")).toBeNull();
+  });
+});

package/src/components/header-builder.ts

@@ -1,4 +1,4 @@
-import { createElement } from "../utils/dom";
+import { createElement, createElementInDocument } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
 
@@ -29,8 +29,12 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
 
   const header = createElement(
     "div",
-    "tvw-widget-header tvw-flex tvw-items-center tvw-gap-3 tvw-bg-cw-surface tvw-px-6 tvw-py-5 tvw-border-b-cw-divider"
+    "persona-widget-header persona-flex persona-items-center persona-gap-3 persona-px-6 persona-py-5"
   );
+  header.style.backgroundColor = 'var(--persona-header-bg, var(--persona-surface, #ffffff))';
+  header.style.borderBottomWidth = '1px';
+  header.style.borderBottomStyle = 'solid';
+  header.style.borderBottomColor = 'var(--persona-header-border, var(--persona-divider, #f1f5f9))';
 
   const launcher = config?.launcher ?? {};
   const headerIconSize = launcher.headerIconSize ?? "48px";
@@ -41,7 +45,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
 
   const iconHolder = createElement(
     "div",
-    "tvw-flex tvw-items-center tvw-justify-center tvw-rounded-xl tvw-bg-cw-primary tvw-text-white tvw-text-xl"
+    "persona-flex persona-items-center persona-justify-center persona-rounded-xl persona-bg-persona-primary persona-text-white persona-text-xl"
   );
   iconHolder.style.height = headerIconSize;
   iconHolder.style.width = headerIconSize;
@@ -51,7 +55,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     if (headerIconName) {
       // Use Lucide icon
       const iconSize = parseFloat(headerIconSize) || 24;
-      const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.6, "#ffffff", 1);
+      const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.6, "var(--persona-text-inverse, #ffffff)", 1);
       if (iconSvg) {
         iconHolder.replaceChildren(iconSvg);
       } else {
@@ -63,7 +67,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
       const img = createElement("img") as HTMLImageElement;
       img.src = config.launcher.iconUrl;
       img.alt = "";
-      img.className = "tvw-rounded-xl tvw-object-cover";
+      img.className = "persona-rounded-xl persona-object-cover";
       img.style.height = headerIconSize;
       img.style.width = headerIconSize;
       iconHolder.replaceChildren(img);
@@ -73,10 +77,10 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     }
   }
 
-  const headerCopy = createElement("div", "tvw-flex tvw-flex-col");
-  const title = createElement("span", "tvw-text-base tvw-font-semibold");
+  const headerCopy = createElement("div", "persona-flex persona-flex-col");
+  const title = createElement("span", "persona-text-base persona-font-semibold");
   title.textContent = config?.launcher?.title ?? "Chat Assistant";
-  const subtitle = createElement("span", "tvw-text-xs tvw-text-cw-muted");
+  const subtitle = createElement("span", "persona-text-xs persona-text-persona-muted");
   subtitle.textContent =
     config?.launcher?.subtitle ?? "Here to help you get answers fast";
 
@@ -110,13 +114,13 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     const clearChatShowTooltip = clearChatConfig.showTooltip ?? true;
 
     // Create button wrapper for tooltip - positioned based on placement
-    // Note: Don't use tvw-clear-chat-button-wrapper class for top-right mode as its
+    // Note: Don't use persona-clear-chat-button-wrapper class for top-right mode as its
     // display: inline-flex causes alignment issues with the close button
     clearChatButtonWrapper = createElement(
       "div",
       clearChatPlacement === "top-right"
-        ? "tvw-absolute tvw-top-4 tvw-z-50"
-        : "tvw-relative tvw-ml-auto tvw-clear-chat-button-wrapper"
+        ? "persona-absolute persona-top-4 persona-z-50"
+        : "persona-relative persona-ml-auto persona-clear-chat-button-wrapper"
     );
 
     // Position to the left of the close button (which is at right: 1rem/16px)
@@ -127,7 +131,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
 
     clearChatButton = createElement(
       "button",
-      "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
+      "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
     ) as HTMLButtonElement;
 
     clearChatButton.style.height = clearChatSize;
@@ -149,24 +153,24 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     // Apply styling from config
     if (clearChatIconColor) {
       clearChatButton.style.color = clearChatIconColor;
-      clearChatButton.classList.remove("tvw-text-cw-muted");
+      clearChatButton.classList.remove("persona-text-persona-muted");
     }
 
     if (clearChatBgColor) {
       clearChatButton.style.backgroundColor = clearChatBgColor;
-      clearChatButton.classList.remove("hover:tvw-bg-gray-100");
+      clearChatButton.classList.remove("hover:persona-bg-gray-100");
     }
 
     if (clearChatBorderWidth || clearChatBorderColor) {
       const borderWidth = clearChatBorderWidth || "0px";
       const borderColor = clearChatBorderColor || "transparent";
       clearChatButton.style.border = `${borderWidth} solid ${borderColor}`;
-      clearChatButton.classList.remove("tvw-border-none");
+      clearChatButton.classList.remove("persona-border-none");
     }
 
     if (clearChatBorderRadius) {
       clearChatButton.style.borderRadius = clearChatBorderRadius;
-      clearChatButton.classList.remove("tvw-rounded-full");
+      clearChatButton.classList.remove("persona-rounded-full");
     }
 
     // Apply padding styling
@@ -199,13 +203,21 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
       const showTooltip = () => {
         if (portaledTooltip || !clearChatButton) return; // Already showing or button doesn't exist
 
+        const tooltipDocument = clearChatButton.ownerDocument;
+        const tooltipContainer = tooltipDocument.body;
+        if (!tooltipContainer) return;
+
         // Create tooltip element
-        portaledTooltip = createElement("div", "tvw-clear-chat-tooltip");
+        portaledTooltip = createElementInDocument(
+          tooltipDocument,
+          "div",
+          "persona-clear-chat-tooltip"
+        );
         portaledTooltip.textContent = clearChatTooltipText;
 
         // Add arrow
-        const arrow = createElement("div");
-        arrow.className = "tvw-clear-chat-tooltip-arrow";
+        const arrow = createElementInDocument(tooltipDocument, "div");
+        arrow.className = "persona-clear-chat-tooltip-arrow";
         portaledTooltip.appendChild(arrow);
 
         // Get button position
@@ -218,7 +230,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
         portaledTooltip.style.transform = "translate(-50%, -100%)";
 
         // Append to body
-        document.body.appendChild(portaledTooltip);
+        tooltipContainer.appendChild(portaledTooltip);
       };
 
       const hideTooltip = () => {
@@ -259,16 +271,16 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   const closeButtonWrapper = createElement(
     "div",
     closeButtonPlacement === "top-right"
-      ? "tvw-absolute tvw-top-4 tvw-right-4 tvw-z-50"
+      ? "persona-absolute persona-top-4 persona-right-4 persona-z-50"
       : clearChatEnabled && clearChatPlacement === "inline"
         ? ""
-        : "tvw-ml-auto"
+        : "persona-ml-auto"
   );
 
   // Create close button with base classes
   const closeButton = createElement(
     "button",
-    "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
+    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
   ) as HTMLButtonElement;
   closeButton.style.height = closeButtonSize;
   closeButton.style.width = closeButtonSize;
@@ -301,18 +313,18 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   // Apply close button styling from config
   if (launcher.closeButtonColor) {
     closeButton.style.color = launcher.closeButtonColor;
-    closeButton.classList.remove("tvw-text-cw-muted");
+    closeButton.classList.remove("persona-text-persona-muted");
   } else {
     closeButton.style.color = "";
-    closeButton.classList.add("tvw-text-cw-muted");
+    closeButton.classList.add("persona-text-persona-muted");
   }
 
   if (launcher.closeButtonBackgroundColor) {
     closeButton.style.backgroundColor = launcher.closeButtonBackgroundColor;
-    closeButton.classList.remove("hover:tvw-bg-gray-100");
+    closeButton.classList.remove("hover:persona-bg-gray-100");
   } else {
     closeButton.style.backgroundColor = "";
-    closeButton.classList.add("hover:tvw-bg-gray-100");
+    closeButton.classList.add("hover:persona-bg-gray-100");
   }
 
   // Apply border if width and/or color are provided
@@ -320,18 +332,18 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     const borderWidth = launcher.closeButtonBorderWidth || "0px";
     const borderColor = launcher.closeButtonBorderColor || "transparent";
     closeButton.style.border = `${borderWidth} solid ${borderColor}`;
-    closeButton.classList.remove("tvw-border-none");
+    closeButton.classList.remove("persona-border-none");
   } else {
     closeButton.style.border = "";
-    closeButton.classList.add("tvw-border-none");
+    closeButton.classList.add("persona-border-none");
   }
 
   if (launcher.closeButtonBorderRadius) {
     closeButton.style.borderRadius = launcher.closeButtonBorderRadius;
-    closeButton.classList.remove("tvw-rounded-full");
+    closeButton.classList.remove("persona-rounded-full");
   } else {
     closeButton.style.borderRadius = "";
-    closeButton.classList.add("tvw-rounded-full");
+    closeButton.classList.add("persona-rounded-full");
   }
 
   // Apply padding styling
@@ -359,13 +371,21 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
     const showTooltip = () => {
       if (portaledTooltip) return; // Already showing
 
+      const tooltipDocument = closeButton.ownerDocument;
+      const tooltipContainer = tooltipDocument.body;
+      if (!tooltipContainer) return;
+
       // Create tooltip element
-      portaledTooltip = createElement("div", "tvw-clear-chat-tooltip");
+      portaledTooltip = createElementInDocument(
+        tooltipDocument,
+        "div",
+        "persona-clear-chat-tooltip"
+      );
       portaledTooltip.textContent = closeButtonTooltipText;
 
       // Add arrow
-      const arrow = createElement("div");
-      arrow.className = "tvw-clear-chat-tooltip-arrow";
+      const arrow = createElementInDocument(tooltipDocument, "div");
+      arrow.className = "persona-clear-chat-tooltip-arrow";
       portaledTooltip.appendChild(arrow);
 
       // Get button position
@@ -378,7 +398,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
       portaledTooltip.style.transform = "translate(-50%, -100%)";
 
       // Append to body
-      document.body.appendChild(portaledTooltip);
+      tooltipContainer.appendChild(portaledTooltip);
     };
 
     const hideTooltip = () => {
@@ -452,4 +472,3 @@ export const attachHeaderToContainer = (
   }
 };
 
-