@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/activity.css

@@ -0,0 +1,365 @@
+@property --belt-pitch {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 9px;
+}
+
+@property --belt-sway {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --belt-hue {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: currentcolor;
+}
+
+@property --wick-fill {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --wick-drift {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
+.session-working {
+  --belt-pitch: 9px;
+  --belt-sway: 0;
+  --wick-fill: 0;
+  --wick-drift: 1;
+  --belt-hue: var(--positive1);
+}
+
+.session-initializing {
+  --belt-pitch: 9px;
+  --belt-sway: 0;
+  --wick-fill: 0;
+  --wick-drift: 1;
+  --belt-hue: var(--warning1);
+}
+
+.session-ready {
+  --belt-pitch: 0px;
+  --belt-sway: 1;
+  --wick-fill: 1;
+  --wick-drift: 0;
+  --belt-hue: var(--accent3);
+}
+
+.session-belt {
+  --belt-beat: 1.4s;
+
+  transition:
+    --belt-pitch 700ms cubic-bezier(0.4, 0, 0.2, 1),
+    --belt-sway 700ms cubic-bezier(0.4, 0, 0.2, 1),
+    --belt-hue 520ms ease;
+}
+
+.session-belt {
+  position: absolute;
+  inset-block: 4px;
+  left: 3px;
+  width: 6px;
+  overflow: hidden;
+  mask: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
+}
+
+.session-belt-sway {
+  position: absolute;
+  inset: 0;
+  animation: session-belt-sway calc(var(--belt-beat) * 4) ease-in-out infinite;
+}
+
+.session-belt-sway i {
+  position: absolute;
+  top: calc(var(--belt-k) * 9px - 9px);
+  left: 50%;
+  width: 2px;
+  height: 6px;
+  margin-left: -1px;
+  border-radius: 999px;
+  background: var(--belt-hue);
+  animation: session-belt-flow calc(var(--belt-beat) * 0.9) linear infinite;
+}
+
+.session-belt-sway i:nth-child(1) {
+  --belt-k: 0;
+}
+
+.session-belt-sway i:nth-child(2) {
+  --belt-k: 1;
+}
+
+.session-belt-sway i:nth-child(3) {
+  --belt-k: 2;
+}
+
+.session-belt-sway i:nth-child(4) {
+  --belt-k: 3;
+}
+
+.session-belt-sway i:nth-child(5) {
+  --belt-k: 4;
+}
+
+@keyframes session-belt-flow {
+  to {
+    transform: translateY(var(--belt-pitch));
+  }
+}
+
+@keyframes session-belt-sway {
+  0%,
+  100% {
+    transform: translateY(calc(-3px * var(--belt-sway)));
+  }
+
+  50% {
+    transform: translateY(calc(3px * var(--belt-sway)));
+  }
+}
+
+@property --wick-a {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.5;
+}
+
+@property --wick-b {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.5;
+}
+
+@property --wick-c {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.5;
+}
+
+.session-wick {
+  --belt-beat: 1.4s;
+  --wick-phase: 0s;
+
+  --wick-hot: white;
+  --wick-lit: 1;
+  --wick-halo: 0.26;
+
+  position: absolute;
+
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+
+  animation:
+    session-wick-a 5.2s ease-in-out calc(-1.2s + var(--wick-phase)) infinite,
+    session-wick-b 6.8s ease-in-out calc(-4.7s + var(--wick-phase)) infinite,
+    session-wick-c 8.6s ease-in-out calc(-6.3s + var(--wick-phase)) infinite,
+    session-wick-breathe calc(var(--belt-beat) * 4) ease-in-out var(--wick-phase) infinite;
+  transition:
+    --wick-fill 700ms cubic-bezier(0.4, 0, 0.2, 1),
+    --wick-drift 700ms cubic-bezier(0.4, 0, 0.2, 1),
+    --belt-sway 700ms cubic-bezier(0.4, 0, 0.2, 1),
+    --belt-hue 520ms ease;
+}
+
+.session-wick::before,
+.session-wick::after {
+  --wick-ka: calc((var(--wick-a) - 0.5) * var(--wick-drift));
+  --wick-kb: calc((var(--wick-b) - 0.5) * var(--wick-drift));
+  --wick-kc: calc((var(--wick-c) - 0.5) * var(--wick-drift));
+
+  --wick-beam:
+    radial-gradient(
+      ellipse calc(30% * (1 + 0.5 * var(--wick-ka))) calc(11% * (1 + 0.4 * var(--wick-ka))) at
+        calc(27% + var(--wick-ka) * 58px) 0%,
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 62%, var(--belt-hue)) calc(92% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(26% * (1 + 0.5 * var(--wick-kb))) calc(8% * (1 + 0.4 * var(--wick-kb))) at
+        calc(72% + var(--wick-kb) * 52px) 0%,
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 45%, var(--belt-hue)) calc(62% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(7% * (1 + 0.5 * var(--wick-kc))) calc(26% * (1 + 0.4 * var(--wick-kc))) at 100%
+        calc(34% + var(--wick-kc) * 44px),
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 55%, var(--belt-hue)) calc(82% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(6% * (1 + 0.5 * var(--wick-ka))) calc(20% * (1 + 0.4 * var(--wick-ka))) at 100%
+        calc(74% + var(--wick-ka) * 38px),
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 40%, var(--belt-hue)) calc(58% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(31% * (1 + 0.5 * var(--wick-kb))) calc(9% * (1 + 0.4 * var(--wick-kb))) at
+        calc(66% + var(--wick-kb) * 58px) 100%,
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 58%, var(--belt-hue)) calc(88% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(22% * (1 + 0.5 * var(--wick-kc))) calc(7% * (1 + 0.4 * var(--wick-kc))) at
+        calc(24% + var(--wick-kc) * 48px) 100%,
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 42%, var(--belt-hue)) calc(55% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(7% * (1 + 0.5 * var(--wick-kc))) calc(23% * (1 + 0.4 * var(--wick-kc))) at 0%
+        calc(62% + var(--wick-kc) * 42px),
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 50%, var(--belt-hue)) calc(78% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    ),
+    radial-gradient(
+      ellipse calc(6% * (1 + 0.5 * var(--wick-kb))) calc(17% * (1 + 0.4 * var(--wick-kb))) at 0%
+        calc(28% + var(--wick-kb) * 38px),
+      color-mix(
+        in oklab,
+        color-mix(in oklab, var(--wick-hot) 38%, var(--belt-hue)) calc(52% * var(--wick-lit)),
+        transparent
+      ),
+      transparent
+    );
+}
+
+.session-wick::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background:
+    var(--wick-beam),
+    linear-gradient(
+      color-mix(in oklab, var(--belt-hue) calc(var(--wick-fill) * 62% * var(--wick-lit)), transparent) 0 0
+    ),
+    linear-gradient(color-mix(in oklab, var(--border1) 50%, transparent) 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+.session-wick::before {
+  --wick-drift: 0;
+
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border-radius: inherit;
+  background: var(--wick-beam);
+  opacity: var(--wick-halo);
+  filter: blur(9px);
+}
+
+html.light .session-wick {
+  --wick-hot: color-mix(in oklab, black 30%, var(--belt-hue));
+  --wick-lit: 1.15;
+  --wick-halo: 0.16;
+}
+
+:nth-child(2n) > .session-wick {
+  --wick-phase: -1.7s;
+}
+
+:nth-child(3n) > .session-wick {
+  --wick-phase: -3.4s;
+}
+
+:nth-child(5n) > .session-wick {
+  --wick-phase: -0.9s;
+}
+
+@keyframes session-wick-a {
+  0%,
+  100% {
+    --wick-a: 0;
+  }
+
+  50% {
+    --wick-a: 1;
+  }
+}
+
+@keyframes session-wick-b {
+  0%,
+  100% {
+    --wick-b: 0;
+  }
+
+  50% {
+    --wick-b: 1;
+  }
+}
+
+@keyframes session-wick-c {
+  0%,
+  100% {
+    --wick-c: 0;
+  }
+
+  50% {
+    --wick-c: 1;
+  }
+}
+
+@keyframes session-wick-breathe {
+  0%,
+  100% {
+    opacity: calc(1 - 0.5 * var(--belt-sway));
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-wick,
+  .session-belt,
+  .session-belt-sway,
+  .session-belt-sway i {
+    transition: none;
+    animation: none;
+  }
+
+  .session-wick.session-initializing {
+    --wick-fill: 0.4;
+  }
+}

package/dist/arrival-CormfVRZ.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const useWatched = require('./use-watched-BixmYWp0.cjs');
+const utils_cn = require('./cn-BuHW7Wrt.cjs');
+
+function ArrivalScope({ children }) {
+  const settled = React.useRef(false);
+  React.useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(useWatched.SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useWatched.useArriving();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(arriving, className), children: /* @__PURE__ */ jsxRuntime.jsx(ArrivalScope, { children }) });
+}
+
+exports.ArrivalScope = ArrivalScope;
+exports.Arriving = Arriving;
+//# sourceMappingURL=arrival-CormfVRZ.cjs.map

package/dist/arrival-CormfVRZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-CormfVRZ.cjs","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsx","SettledContext","useArriving","cn"],"mappings":";;;;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAUA,aAAO,KAAK,CAAA;AAC5B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAOC,cAAA,CAACC,yBAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAWC,sBAAA,EAAY;AAE7B,EAAA,uBACEF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,WAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAAH,cAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;AAEJ;;;;;"}

package/dist/arrival-DPVjCnNy.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { S as SettledContext, u as useArriving } from './use-watched-CG9KoWl3.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+function ArrivalScope({ children }) {
+  const settled = useRef(false);
+  useEffect(() => {
+    settled.current = true;
+  }, []);
+  return /* @__PURE__ */ jsx(SettledContext, { value: settled, children });
+}
+function Arriving({ children, className }) {
+  const arriving = useArriving();
+  return /* @__PURE__ */ jsx("div", { className: cn(arriving, className), children: /* @__PURE__ */ jsx(ArrivalScope, { children }) });
+}
+
+export { ArrivalScope as A, Arriving as a };
+//# sourceMappingURL=arrival-DPVjCnNy.js.map

package/dist/arrival-DPVjCnNy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrival-DPVjCnNy.js","sources":["../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAmBO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAS,EAA4B;AAClE,EAAA,MAAM,OAAA,GAAU,OAAO,KAAK,CAAA;AAC5B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,EACpB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS,CAAA;AACnD;AAGO,SAAS,QAAA,CAAS,EAAE,QAAA,EAAU,SAAA,EAAU,EAAgD;AAC7F,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAc,QAAA,EAAS,CAAA,EAC1B,CAAA;AAEJ;;;;"}

package/dist/ask-user-DCWLWOBI.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { useId, useState } from 'react';
+import { B as Badge } from './Badge-BCwBpIc7.js';
+import { B as Button } from './Button-DS6O6fvU.js';
+import { I as Input } from './input-kU7nI6V5.js';
+import { c as cn } from './cn-C6s2yXwM.js';
+
+const AskUserContainer = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border border-border1 bg-surface2 p-3 text-ui-md", className), ...props });
+const AskUserQuestion = ({ className, ...props }) => /* @__PURE__ */ jsx("legend", { className: cn("mb-3 font-medium text-neutral6", className), ...props });
+const AskUserOptionDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("block text-ui-xs font-normal text-neutral3", className), ...props });
+const AskUserOptionControl = ({ type, label, description, className, ...props }) => /* @__PURE__ */ jsxs(
+  "label",
+  {
+    className: cn(
+      "flex cursor-pointer items-start gap-2 rounded-md border border-border1 bg-surface3 px-3 py-2 text-neutral5 transition-colors hover:bg-surface4 has-[:checked]:border-border2 has-[:checked]:bg-surface4 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("input", { type, className: "mt-0.5 accent-current", ...props }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "block", children: label }),
+        description ? /* @__PURE__ */ jsx(AskUserOptionDescription, { children: description }) : null
+      ] })
+    ]
+  }
+);
+const AskUserSubmit = ({ children = "Submit answer", ...props }) => /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Check, {}), type: "button", size: "sm", variant: "primary", ...props, children });
+const AskUserPending = ({ children = "Submitting…", className, ...props }) => /* @__PURE__ */ jsx("span", { role: "status", className: cn("text-ui-xs text-neutral3", className), ...props, children });
+const AskUserOutput = ({ result, className, ...props }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    role: result.isError ? "alert" : "status",
+    className: cn("space-y-2 rounded-md bg-surface3 p-3 text-neutral5", result.isError && "text-error", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Badge, { size: "xs", variant: result.isError ? "red" : "green", children: result.isError ? "Error" : "Answered" }),
+      /* @__PURE__ */ jsx("p", { children: result.content })
+    ]
+  }
+);
+const validOptions = (options) => options?.filter(
+  (option) => Boolean(option && typeof option.label === "string" && option.label)
+) ?? [];
+const AskUserInput = ({
+  payload,
+  options,
+  result,
+  isAnswered = false,
+  isSubmitting = false,
+  onSubmit,
+  footer,
+  ...props
+}) => {
+  const inputId = useId();
+  const [text, setText] = useState("");
+  const [selected, setSelected] = useState([]);
+  if (result || isAnswered) {
+    return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsx("p", { className: "text-neutral6 mb-2 font-medium", children: payload.question }),
+      result ? /* @__PURE__ */ jsx(AskUserOutput, { result }) : /* @__PURE__ */ jsx(Badge, { variant: "green", children: "Answered" })
+    ] });
+  }
+  const submitText = () => {
+    const answer = text.trim();
+    if (answer && !isSubmitting) onSubmit(answer);
+  };
+  const handleTextKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitText();
+    }
+  };
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsxs(AskUserContainer, { "data-testid": "ask-user", ...props, children: [
+      /* @__PURE__ */ jsx("label", { className: "text-neutral6 mb-2 block font-medium", htmlFor: inputId, children: payload.question }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            value: text,
+            onChange: (event) => setText(event.target.value),
+            onKeyDown: handleTextKeyDown,
+            placeholder: "Type your answer...",
+            disabled: isSubmitting,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsx(AskUserSubmit, { "aria-label": "Submit answer", disabled: isSubmitting || !text.trim(), onClick: submitText, children: "Submit" })
+      ] }),
+      isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, { className: "mt-2 block" }) : null,
+      footer
+    ] });
+  }
+  const isMulti = payload.selectionMode === "multi_select";
+  return /* @__PURE__ */ jsx(AskUserContainer, { "data-testid": "ask-user", ...props, children: /* @__PURE__ */ jsxs("fieldset", { disabled: isSubmitting, className: "space-y-2", children: [
+    /* @__PURE__ */ jsx(AskUserQuestion, { children: payload.question }),
+    options.map((option) => {
+      const checked = selected.includes(option.label);
+      return /* @__PURE__ */ jsx(
+        AskUserOptionControl,
+        {
+          type: isMulti ? "checkbox" : "radio",
+          name: inputId,
+          label: option.label,
+          description: option.description,
+          disabled: isSubmitting,
+          checked,
+          onChange: () => {
+            if (isSubmitting) return;
+            if (!isMulti) {
+              setSelected([option.label]);
+              onSubmit(option.label);
+              return;
+            }
+            setSelected(
+              (current) => current.includes(option.label) ? current.filter((selectedLabel) => selectedLabel !== option.label) : [...current, option.label]
+            );
+          }
+        },
+        option.label
+      );
+    }),
+    isMulti ? /* @__PURE__ */ jsx(AskUserSubmit, { disabled: isSubmitting || selected.length === 0, onClick: () => onSubmit(selected), children: "Submit answer" }) : null,
+    isSubmitting ? /* @__PURE__ */ jsx(AskUserPending, {}) : null,
+    footer
+  ] }) });
+};
+const AskUser = ({ payload, ...props }) => {
+  const options = validOptions(payload.options);
+  const payloadKey = JSON.stringify([payload.question, options.map((option) => option.label), payload.selectionMode]);
+  return /* @__PURE__ */ jsx(AskUserInput, { payload, options, ...props }, payloadKey);
+};
+
+export { AskUser as A, AskUserContainer as a, AskUserOptionControl as b, AskUserOptionDescription as c, AskUserOutput as d, AskUserPending as e, AskUserQuestion as f, AskUserSubmit as g };
+//# sourceMappingURL=ask-user-DCWLWOBI.js.map

package/dist/ask-user-DCWLWOBI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ask-user-DCWLWOBI.js","sources":["../src/ds/components/ai/ask-user/ask-user.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ComponentProps, KeyboardEvent, ReactNode } from 'react';\nimport { Badge } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { Input } from '@/ds/components/Input';\nimport { cn } from '@/lib/utils';\n\nexport type AskUserSelectionMode = 'single_select' | 'multi_select';\nexport type AskUserAnswer = string | string[];\n\nexport interface AskUserOption {\n  label: string;\n  description?: string;\n}\n\nexport interface AskUserPayload {\n  question: string;\n  options?: AskUserOption[];\n  selectionMode?: AskUserSelectionMode;\n}\n\nexport interface AskUserResult {\n  content: string;\n  isError?: boolean;\n}\n\nexport const AskUserContainer = ({ className, ...props }: ComponentProps<'div'>) => (\n  <div className={cn('rounded-lg border border-border1 bg-surface2 p-3 text-ui-md', className)} {...props} />\n);\n\nexport const AskUserQuestion = ({ className, ...props }: ComponentProps<'legend'>) => (\n  <legend className={cn('mb-3 font-medium text-neutral6', className)} {...props} />\n);\n\nexport const AskUserOptionDescription = ({ className, ...props }: ComponentProps<'span'>) => (\n  <span className={cn('block text-ui-xs font-normal text-neutral3', className)} {...props} />\n);\n\ninterface AskUserOptionControlProps extends Omit<ComponentProps<'input'>, 'type'> {\n  type: 'radio' | 'checkbox';\n  label: string;\n  description?: string;\n}\n\nexport const AskUserOptionControl = ({ type, label, description, className, ...props }: AskUserOptionControlProps) => (\n  <label\n    className={cn(\n      'flex cursor-pointer items-start gap-2 rounded-md border border-border1 bg-surface3 px-3 py-2 text-neutral5 transition-colors hover:bg-surface4 has-[:checked]:border-border2 has-[:checked]:bg-surface4 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50',\n      className,\n    )}\n  >\n    <input type={type} className=\"mt-0.5 accent-current\" {...props} />\n    <span>\n      <span className=\"block\">{label}</span>\n      {description ? <AskUserOptionDescription>{description}</AskUserOptionDescription> : null}\n    </span>\n  </label>\n);\n\nexport const AskUserSubmit = ({ children = 'Submit answer', ...props }: ComponentProps<typeof Button>) => (\n  <Button icon={<Check />} type=\"button\" size=\"sm\" variant=\"primary\" {...props}>\n    {children}\n  </Button>\n);\n\nexport const AskUserPending = ({ children = 'Submitting…', className, ...props }: ComponentProps<'span'>) => (\n  <span role=\"status\" className={cn('text-ui-xs text-neutral3', className)} {...props}>\n    {children}\n  </span>\n);\n\nexport interface AskUserOutputProps extends ComponentProps<'div'> {\n  result: AskUserResult;\n}\n\nexport const AskUserOutput = ({ result, className, ...props }: AskUserOutputProps) => (\n  <div\n    role={result.isError ? 'alert' : 'status'}\n    className={cn('space-y-2 rounded-md bg-surface3 p-3 text-neutral5', result.isError && 'text-error', className)}\n    {...props}\n  >\n    <Badge size=\"xs\" variant={result.isError ? 'red' : 'green'}>\n      {result.isError ? 'Error' : 'Answered'}\n    </Badge>\n    <p>{result.content}</p>\n  </div>\n);\n\nexport interface AskUserProps extends Omit<ComponentProps<typeof AskUserContainer>, 'children' | 'onSubmit'> {\n  payload: AskUserPayload;\n  result?: AskUserResult;\n  isAnswered?: boolean;\n  isSubmitting?: boolean;\n  onSubmit: (answer: AskUserAnswer) => void;\n  footer?: ReactNode;\n}\n\nconst validOptions = (options: AskUserPayload['options']): AskUserOption[] =>\n  options?.filter((option): option is AskUserOption =>\n    Boolean(option && typeof option.label === 'string' && option.label),\n  ) ?? [];\n\ninterface AskUserInputProps extends AskUserProps {\n  options: AskUserOption[];\n}\n\nconst AskUserInput = ({\n  payload,\n  options,\n  result,\n  isAnswered = false,\n  isSubmitting = false,\n  onSubmit,\n  footer,\n  ...props\n}: AskUserInputProps) => {\n  const inputId = useId();\n  const [text, setText] = useState('');\n  const [selected, setSelected] = useState<string[]>([]);\n\n  if (result || isAnswered) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <p className=\"text-neutral6 mb-2 font-medium\">{payload.question}</p>\n        {result ? <AskUserOutput result={result} /> : <Badge variant=\"green\">Answered</Badge>}\n      </AskUserContainer>\n    );\n  }\n\n  const submitText = () => {\n    const answer = text.trim();\n    if (answer && !isSubmitting) onSubmit(answer);\n  };\n\n  const handleTextKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      submitText();\n    }\n  };\n\n  if (options.length === 0) {\n    return (\n      <AskUserContainer data-testid=\"ask-user\" {...props}>\n        <label className=\"text-neutral6 mb-2 block font-medium\" htmlFor={inputId}>\n          {payload.question}\n        </label>\n        <div className=\"flex items-center gap-2\">\n          <Input\n            id={inputId}\n            value={text}\n            onChange={event => setText(event.target.value)}\n            onKeyDown={handleTextKeyDown}\n            placeholder=\"Type your answer...\"\n            disabled={isSubmitting}\n            size=\"sm\"\n          />\n          <AskUserSubmit aria-label=\"Submit answer\" disabled={isSubmitting || !text.trim()} onClick={submitText}>\n            Submit\n          </AskUserSubmit>\n        </div>\n        {isSubmitting ? <AskUserPending className=\"mt-2 block\" /> : null}\n        {footer}\n      </AskUserContainer>\n    );\n  }\n\n  const isMulti = payload.selectionMode === 'multi_select';\n  return (\n    <AskUserContainer data-testid=\"ask-user\" {...props}>\n      <fieldset disabled={isSubmitting} className=\"space-y-2\">\n        <AskUserQuestion>{payload.question}</AskUserQuestion>\n        {options.map(option => {\n          const checked = selected.includes(option.label);\n          return (\n            <AskUserOptionControl\n              key={option.label}\n              type={isMulti ? 'checkbox' : 'radio'}\n              name={inputId}\n              label={option.label}\n              description={option.description}\n              disabled={isSubmitting}\n              checked={checked}\n              onChange={() => {\n                if (isSubmitting) return;\n                if (!isMulti) {\n                  setSelected([option.label]);\n                  onSubmit(option.label);\n                  return;\n                }\n                setSelected(current =>\n                  current.includes(option.label)\n                    ? current.filter(selectedLabel => selectedLabel !== option.label)\n                    : [...current, option.label],\n                );\n              }}\n            />\n          );\n        })}\n        {isMulti ? (\n          <AskUserSubmit disabled={isSubmitting || selected.length === 0} onClick={() => onSubmit(selected)}>\n            Submit answer\n          </AskUserSubmit>\n        ) : null}\n        {isSubmitting ? <AskUserPending /> : null}\n        {footer}\n      </fieldset>\n    </AskUserContainer>\n  );\n};\n\nexport const AskUser = ({ payload, ...props }: AskUserProps) => {\n  const options = validOptions(payload.options);\n  const payloadKey = JSON.stringify([payload.question, options.map(option => option.label), payload.selectionMode]);\n\n  return <AskUserInput key={payloadKey} payload={payload} options={options} {...props} />;\n};\n"],"names":[],"mappings":"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"}