@runtypelabs/persona 3.2.1 → 3.3.0

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Themeable, pluggable 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/composer-builder.ts

@@ -480,17 +480,33 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
   actionsRow.append(leftActions, rightActions);
   composerForm.append(actionsRow);
 
+  // Apply status indicator config
+  const statusConfig = config?.statusIndicator ?? {};
+  const alignClass =
+    statusConfig.align === "left" ? "persona-text-left"
+    : statusConfig.align === "center" ? "persona-text-center"
+    : "persona-text-right";
   const statusText = createElement(
     "div",
-    "persona-mt-2 persona-text-right persona-text-xs persona-text-persona-muted"
+    `persona-mt-2 ${alignClass} persona-text-xs persona-text-persona-muted`
   );
   statusText.setAttribute("data-persona-composer-status", "");
 
-  // Apply status indicator config
-  const statusConfig = config?.statusIndicator ?? {};
   const isVisible = statusConfig.visible ?? true;
   statusText.style.display = isVisible ? "" : "none";
-  statusText.textContent = statusConfig.idleText ?? "Online";
+  const idleLabel = statusConfig.idleText ?? "Online";
+  if (statusConfig.idleLink) {
+    const link = createElement("a");
+    link.href = statusConfig.idleLink;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = idleLabel;
+    link.style.color = "inherit";
+    link.style.textDecoration = "none";
+    statusText.appendChild(link);
+  } else {
+    statusText.textContent = idleLabel;
+  }
 
   footer.append(suggestions, composerForm, statusText);