@runtypelabs/persona 3.2.2 → 3.3.0

package/src/index.ts

@@ -194,6 +194,14 @@ export type {
   ComboButtonHandle
 } from "./utils/buttons";
 
+// Demo carousel exports
+export { createDemoCarousel } from "./components/demo-carousel";
+export type {
+  DemoCarouselItem,
+  DemoCarouselOptions,
+  DemoCarouselHandle
+} from "./components/demo-carousel";
+
 // Theme system exports
 export {
   createTheme,

package/src/styles/widget.css

@@ -1222,6 +1222,68 @@
   font-size: 0.8125rem;
 }
 
+/* Code block copy button */
+.persona-code-block-wrapper {
+  position: relative;
+  margin: 0.5rem 0;
+}
+
+.persona-code-block-wrapper pre {
+  margin: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.persona-code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--persona-md-code-block-bg, #f3f4f6);
+  border: 1px solid var(--persona-md-code-block-border-color, #e5e7eb);
+  border-bottom: none;
+  border-top-left-radius: var(--persona-md-code-block-border-radius, 0.375rem);
+  border-top-right-radius: var(--persona-md-code-block-border-radius, 0.375rem);
+  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--persona-text-muted, #6b7280);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+.persona-code-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  color: var(--persona-text-muted, #6b7280);
+  font-size: 0.75rem;
+  font-family: inherit;
+  line-height: 1;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.persona-code-copy-btn:hover {
+  color: var(--persona-text, #111827);
+  border-color: var(--persona-md-code-block-border-color, #e5e7eb);
+}
+
+.persona-code-copy-btn.persona-code-copied {
+  color: #16a34a;
+}
+
+.persona-code-copy-btn.persona-code-copy-generating {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.persona-code-copy-btn.persona-code-copy-generating:hover {
+  color: var(--persona-text-muted, #6b7280);
+  border-color: transparent;
+}
+
 /* Ensure all links in chat bubbles have underlines */
 .vanilla-message-bubble a {
   text-decoration: underline;

package/src/types.ts

@@ -884,7 +884,11 @@ export type AgentWidgetClearChatConfig = {
 
 export type AgentWidgetStatusIndicatorConfig = {
   visible?: boolean;
+  /** Text alignment. Default: 'right'. */
+  align?: 'left' | 'center' | 'right';
   idleText?: string;
+  /** URL to open in a new tab when the idle text is clicked. */
+  idleLink?: string;
   connectingText?: string;
   connectedText?: string;
   errorText?: string;

package/src/ui.ts

@@ -604,6 +604,23 @@ export const createAgentExperience = (
     return statusCopy[status];
   };
 
+  /** Update statusText element, rendering a link for idle status when idleLink is configured. */
+  function applyStatusToElement(el: HTMLElement, text: string, statusCfg: typeof statusConfig, status: string): void {
+    if (status === "idle" && statusCfg.idleLink) {
+      el.textContent = "";
+      const link = document.createElement("a");
+      link.href = statusCfg.idleLink;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.textContent = text;
+      link.style.color = "inherit";
+      link.style.textDecoration = "none";
+      el.appendChild(link);
+    } else {
+      el.textContent = text;
+    }
+  }
+
   const { wrapper, panel } = createWrapper(config);
   const panelElements = buildPanel(config, launcherEnabled);
   let {
@@ -2670,14 +2687,14 @@ export const createAgentExperience = (
     },
     onStatusChanged(status) {
       const currentStatusConfig = config.statusIndicator ?? {};
-      const getCurrentStatusText = (status: AgentWidgetSessionStatus): string => {
-        if (status === "idle") return currentStatusConfig.idleText ?? statusCopy.idle;
-        if (status === "connecting") return currentStatusConfig.connectingText ?? statusCopy.connecting;
-        if (status === "connected") return currentStatusConfig.connectedText ?? statusCopy.connected;
-        if (status === "error") return currentStatusConfig.errorText ?? statusCopy.error;
-        return statusCopy[status];
+      const getCurrentStatusText = (s: AgentWidgetSessionStatus): string => {
+        if (s === "idle") return currentStatusConfig.idleText ?? statusCopy.idle;
+        if (s === "connecting") return currentStatusConfig.connectingText ?? statusCopy.connecting;
+        if (s === "connected") return currentStatusConfig.connectedText ?? statusCopy.connected;
+        if (s === "error") return currentStatusConfig.errorText ?? statusCopy.error;
+        return statusCopy[s];
       };
-      statusText.textContent = getCurrentStatusText(status);
+      applyStatusToElement(statusText, getCurrentStatusText(status), currentStatusConfig, status);
     },
     onStreamingChanged(streaming) {
       isStreaming = streaming;
@@ -4815,14 +4832,14 @@ export const createAgentExperience = (
       // Update status text if status is currently set
       if (session) {
         const currentStatus = session.getStatus();
-        const getCurrentStatusText = (status: AgentWidgetSessionStatus): string => {
-          if (status === "idle") return statusIndicatorConfig.idleText ?? statusCopy.idle;
-          if (status === "connecting") return statusIndicatorConfig.connectingText ?? statusCopy.connecting;
-          if (status === "connected") return statusIndicatorConfig.connectedText ?? statusCopy.connected;
-          if (status === "error") return statusIndicatorConfig.errorText ?? statusCopy.error;
-          return statusCopy[status];
+        const getCurrentStatusText = (s: AgentWidgetSessionStatus): string => {
+          if (s === "idle") return statusIndicatorConfig.idleText ?? statusCopy.idle;
+          if (s === "connecting") return statusIndicatorConfig.connectingText ?? statusCopy.connecting;
+          if (s === "connected") return statusIndicatorConfig.connectedText ?? statusCopy.connected;
+          if (s === "error") return statusIndicatorConfig.errorText ?? statusCopy.error;
+          return statusCopy[s];
         };
-        statusText.textContent = getCurrentStatusText(currentStatus);
+        applyStatusToElement(statusText, getCurrentStatusText(currentStatus), statusIndicatorConfig, currentStatus);
       }
     },
     open() {