@flytedan/flytebot-design-system 0.71.7 → 0.72.0

package/dist/index.cjs

@@ -2083,7 +2083,7 @@ function Collapsible({
 var React6 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function Drawer({ open: open2 = true, title, onClose, footer, children, className = "", ...rest }) {
+function Drawer({ open: open2 = true, title, onClose, footer, bare = false, children, className = "", ...rest }) {
   const asideRef = React6.useRef(null);
   const [closing, setClosing] = React6.useState(false);
   const close2 = React6.useCallback(() => {
@@ -2097,12 +2097,12 @@ function Drawer({ open: open2 = true, title, onClose, footer, children, classNam
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StackedLayerProvider, { layer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-scrim" + (closing ? " is-closing" : ""), style: { display: "block", zIndex: zIndex - LAYER_STEP }, onClick: close2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { ref: asideRef, className: ["fd-drawer", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", ...rest, style: { zIndex }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { ref: asideRef, className: ["fd-drawer", bare ? "is-bare" : "", closing ? "is-closing" : "", className].filter(Boolean).join(" "), role: "dialog", "aria-modal": "true", "aria-label": bare && typeof title === "string" ? title : void 0, ...rest, style: { zIndex }, children: [
+        bare ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fd-card-head", style: { flex: "none" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fd-card-head-title", title: truncationTitle(title), children: title }),
           onClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Close", onClick: close2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "ph ph-x" }) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: bare ? { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" } : { flex: "1 1 auto", minHeight: 0, overflow: "auto", padding: 20 }, children: typeof children === "function" ? children(close2) : children }),
         footer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fd-card-foot", style: { flex: "none" }, children: typeof footer === "function" ? footer(close2) : footer }) : null
       ] })
     ] }),
@@ -7070,7 +7070,8 @@ function StepList({
   onToggle,
   showDurations = true,
   dense = false,
-  className = ""
+  className = "",
+  active = false
 }) {
   const [openState, setOpenState] = React39.useState(defaultOpen);
   const open2 = openProp == null ? openState : openProp;
@@ -7080,15 +7081,15 @@ function StepList({
   const failed = steps.filter((s) => s.status === "error").length;
   const total = steps.reduce((n, s) => n + (s.durationMs || 0), 0);
   const current2 = steps.filter((s) => s.status === "running").slice(-1)[0];
-  const summary = label || (running ? current2 ? current2.label : "Working" : total ? "Worked for " + formatDuration(total) : "Steps");
+  const summary = label || (running ? current2 ? current2.label : "Working" : active ? "Steps so far" : total ? "Worked for " + formatDuration(total) : "Steps");
   const toggle = () => {
     const next = !open2;
     if (openProp == null) setOpenState(next);
     onToggle && onToggle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: ["fd-steps", dense ? "is-dense" : "", active ? "is-active" : "", open2 ? "is-open" : "", className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", className: "fd-steps-head", onClick: toggle, "aria-expanded": open2, children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : "check-circle"), "aria-hidden": "true" }),
+      running ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-spin", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("i", { className: "ph ph-" + (failed ? "warning-circle" : active ? "list-checks" : "check-circle"), "aria-hidden": "true" }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "fd-steps-title", title: truncationTitle(summary), children: summary }),
       /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "fd-steps-count fd-tabular", children: [
         steps.length,
@@ -13605,6 +13606,20 @@ function jobBucket(status) {
   if (JOB_SUCCESS.indexOf(s) !== -1) return "success";
   return "failure";
 }
+function defaultDescribeWaiting(pending) {
+  return "Waiting on " + pending.length + " background " + (pending.length === 1 ? "task" : "tasks");
+}
+function withWaiting(list, describe) {
+  const pending = list.filter((m) => m.taskPending);
+  let turn = -1;
+  list.forEach((m, i) => {
+    if (m.working) turn = i;
+  });
+  return list.map((m, i) => {
+    const want = i === turn && pending.length ? describe(pending) : void 0;
+    return m.waitingFor === want ? m : Object.assign({}, m, { waitingFor: want });
+  });
+}
 function useChatEngine(opts) {
   const {
     contextType,
@@ -13614,6 +13629,7 @@ function useChatEngine(opts) {
     threadId: threadIdProp,
     pollIntervalMs = 1500,
     pendingTimeoutMs = 18e4,
+    describeWaiting = defaultDescribeWaiting,
     store = safeStore,
     onPacket,
     onThreadReady,
@@ -13648,9 +13664,12 @@ function useChatEngine(opts) {
       mounted.current = false;
     };
   }, []);
+  const describeWaitingRef = React70.useRef(describeWaiting);
+  describeWaitingRef.current = describeWaiting;
   const commit = (next) => {
-    listRef.current = next;
-    if (mounted.current) setMessages(next);
+    const derived = withWaiting(next, (pending) => describeWaitingRef.current(pending));
+    listRef.current = derived;
+    if (mounted.current) setMessages(derived);
   };
   const patch = (id, p) => commit(listRef.current.map((m) => m.id === id ? Object.assign({}, m, typeof p === "function" ? p(m) : p) : m));
   const push = (...msgs) => commit(listRef.current.concat(msgs));
@@ -14127,7 +14146,7 @@ function MessageBody({ message: m, ctx }) {
   const showMd = ctx.markdown && !isUser;
   return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-body", children: [
     m.thinking && ctx.showThinking ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(ThinkingBlock, { text: m.thinking, durationMs: m.thinkingMs, streaming: m.streaming && !m.text }) : null,
-    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), dense: true }) : null,
+    m.steps && m.steps.length && ctx.showSteps ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(StepList, { steps: m.steps, defaultOpen: m.steps.some((s) => s.status === "running"), active: !!m.working, dense: true }) : null,
     body ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-text" + (isUser ? " is-user" : ""), children: [
       showMd ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Markdown, { source: body, headingOffset: 2, codeProps: { collapseAfter: 22 }, renderCitation: ctx.renderCitation }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "fdc-plain", children: body }),
       m.streaming ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "fdc-caret", "aria-hidden": "true" }) : null
@@ -14159,8 +14178,8 @@ function MessageBody({ message: m, ctx }) {
         /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", {})
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-label", children: [
-        m.resumed ? "Resuming" : "Working",
-        m.job && m.job.status ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-job", children: [
+        m.waitingFor || (m.resumed ? "Resuming" : "Working"),
+        !m.waitingFor && m.job && m.job.status ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "fdc-working-job", children: [
           " \xB7 ",
           m.job.status
         ] }) : null,
@@ -14168,8 +14187,7 @@ function MessageBody({ message: m, ctx }) {
           " \xB7 ",
           m.job.detail
         ] }) : null
-      ] }),
-      m.jobId ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "fdc-working-id fd-mono", children: String(m.jobId).slice(0, 12) }) : null
+      ] })
     ] }) : null,
     m.stopped ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "fdc-stopped", children: [
       /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("i", { className: "ph ph-stop-circle", "aria-hidden": "true" }),
@@ -14866,6 +14884,7 @@ function AgentChatPanel({
   packetRenderers,
   onApplyPacket,
   pendingTimeoutMs,
+  describeWaiting,
   onOpenAttachment,
   errorCopy,
   /* composer */
@@ -14928,6 +14947,7 @@ function AgentChatPanel({
     initialMessage,
     threadId,
     pendingTimeoutMs,
+    describeWaiting,
     onPacket,
     onThreadReady,
     onError,