@athenaintel/react 0.22.4 → 0.23.0

package/dist/chat/WaitingOnYouBanner.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@assistant-ui/react");
+require("../packages/agent-runtime/src/generated/runconfig-contract.cjs");
+const react$1 = require("react");
+require("@assistant-ui/tap");
+require("statewire");
+require("../packages/agent-runtime/src/statewire-suspended.cjs");
+require("../packages/agent-runtime/src/conversation-list.cjs");
+require("@tanstack/react-query");
+const interrupts = require("../packages/agent-runtime/src/interrupts.cjs");
+require("../packages/agent-runtime/src/messages.cjs");
+require("../packages/agent-runtime/src/statewire-state.cjs");
+const threadExtras = require("../packages/agent-runtime/src/thread-extras.cjs");
+require("@assistant-ui/store");
+require("../packages/agent-runtime/src/quota-safe-local-storage-session.cjs");
+require("../packages/agent-runtime/src/statewire-attach-observer.cjs");
+require("../packages/agent-runtime/src/thread-status.cjs");
+require("@assistant-ui/react-statewire");
+require("@assistant-ui/core");
+require("../packages/agent-runtime/src/thread-handoff.cjs");
+const lucideReact = require("lucide-react");
+const statewireHistoryEdge = require("../chat-ui/thread/statewire-history-edge.cjs");
+const useAthenaSessionAttention = require("../threads/use-athena-session-attention.cjs");
+const useStatewireApprovalRequest = require("./use-statewire-approval-request.cjs");
+const cnfast = require("cnfast");
+const APPROVAL_CARD_SELECTOR = ".aui-approval-card";
+const WaitingOnYouBanner = (props) => {
+  const extras = react.useAuiState((s) => s.thread.extras);
+  const attention = useAthenaSessionAttention.useAthenaSessionAttention();
+  if (!threadExtras.hasStatewireThreadExtras(extras)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(WaitingOnYouBannerView, { attention, approvalSummary: null, ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(WaitingOnYouBannerWithApproval, { attention, ...props });
+};
+const WaitingOnYouBannerWithApproval = ({ attention, fallbackMessage, ...props }) => {
+  var _a, _b, _c;
+  const { request, hitl, liveHitl } = useStatewireApprovalRequest.useStatewireApprovalRequest();
+  const pending = request !== void 0 || liveHitl !== null;
+  const payload = hitl ?? liveHitl;
+  const toolName = ((_a = payload == null ? void 0 : payload.context) == null ? void 0 : _a.tool_name) ?? ((_b = payload == null ? void 0 : payload.context) == null ? void 0 : _b.tool_id);
+  const pendingCount = ((_c = payload == null ? void 0 : payload.context) == null ? void 0 : _c.pending_action_count) ?? 1;
+  const approvalSummary = !pending ? null : payload && pendingCount === 1 && toolName ? `${toolName} requires approval before it runs.` : interrupts.readInterruptMessage(request ? request.payload : liveHitl, fallbackMessage);
+  return /* @__PURE__ */ jsxRuntime.jsx(WaitingOnYouBannerView, { attention, approvalSummary, ...props });
+};
+const WaitingOnYouBannerView = ({
+  attention,
+  approvalSummary,
+  className
+}) => {
+  var _a;
+  const rootRef = react$1.useRef(null);
+  const scrollToApproval = react$1.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    let scope = root.parentElement;
+    while (scope && scope.querySelector(`[${statewireHistoryEdge.THREAD_VIEWPORT_ATTR}]`) === null) {
+      scope = scope.parentElement;
+    }
+    const container = scope ?? root.ownerDocument;
+    const card = container.querySelector(APPROVAL_CARD_SELECTOR);
+    if (card) {
+      card.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      return;
+    }
+    const viewport = container.querySelector(`[${statewireHistoryEdge.THREAD_VIEWPORT_ATTR}]`);
+    viewport == null ? void 0 : viewport.scrollTo({ top: viewport.scrollHeight, behavior: "smooth" });
+  }, []);
+  const needsYou = (attention == null ? void 0 : attention.attention) === "needs_you";
+  const pending = approvalSummary !== null;
+  if (!needsYou && !pending) return null;
+  const text = ((_a = attention == null ? void 0 : attention.nextAction) == null ? void 0 : _a.trim()) || approvalSummary || "This session is waiting on you.";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: cnfast.cn("aui-waiting-on-you", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "data-testid": "waiting-on-you-banner",
+      "data-pending-approval": pending || void 0,
+      className: "mx-auto w-full max-w-(--thread-max-width) rounded-xl border border-amber-300 bg-amber-50 text-amber-900",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToApproval,
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-amber-100/70",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HandIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-semibold", children: "Waiting on you" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-amber-800", children: text }),
+            pending ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium underline-offset-2 hover:underline", children: "Review" }) : null
+          ]
+        }
+      )
+    }
+  ) });
+};
+exports.WaitingOnYouBanner = WaitingOnYouBanner;
+exports.WaitingOnYouBannerView = WaitingOnYouBannerView;
+//# sourceMappingURL=WaitingOnYouBanner.cjs.map

package/dist/chat/WaitingOnYouBanner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitingOnYouBanner.cjs","sources":["../../src/chat/WaitingOnYouBanner.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { hasStatewireThreadExtras, readInterruptMessage } from '@athenaintel/agent-runtime';\nimport { HandIcon } from 'lucide-react';\nimport { type FC, useCallback, useRef } from 'react';\nimport { THREAD_VIEWPORT_ATTR } from '../chat-ui/thread/statewire-history-edge';\nimport { cn } from '../lib/utils';\nimport {\n  type AthenaSessionAttention,\n  useAthenaSessionAttention,\n} from '../threads/use-athena-session-attention';\nimport { useStatewireApprovalRequest } from './use-statewire-approval-request';\n\n/** The CSS class `StatewireApprovalCard` puts on its section; the banner scrolls to it. */\nconst APPROVAL_CARD_SELECTOR = '.aui-approval-card';\n\nexport interface WaitingOnYouBannerProps {\n  /** Applied to the outer wrapper (host padding); the banner itself is width-capped inside it. */\n  className?: string;\n  /** Copy shown when a parked interrupt carries no message. */\n  fallbackMessage?: string;\n}\n\n/**\n * Persistent top-of-thread banner for a session that is waiting on the\n * viewer: shown while the active thread's attention is `needs_you` (from the\n * thread list) or while the approval hook reports a pending request. The text\n * is the server's next action, else a summary of the pending request; a\n * click scrolls to the approval card (or to the composer when there is no\n * card). It never duplicates the card's decision buttons — the card stays the\n * one place a request is answered. Renders nothing otherwise.\n */\nexport const WaitingOnYouBanner: FC<WaitingOnYouBannerProps> = (props) => {\n  const extras = useAuiState((s) => s.thread.extras);\n  const attention = useAthenaSessionAttention();\n  // `useStatewireApprovalRequest` needs a statewire aui scope (it throws\n  // outside one), so the approval leg mounts only once the thread extras are.\n  if (!hasStatewireThreadExtras(extras)) {\n    return <WaitingOnYouBannerView attention={attention} approvalSummary={null} {...props} />;\n  }\n  return <WaitingOnYouBannerWithApproval attention={attention} {...props} />;\n};\n\nconst WaitingOnYouBannerWithApproval: FC<\n  WaitingOnYouBannerProps & { attention: AthenaSessionAttention | null }\n> = ({ attention, fallbackMessage, ...props }) => {\n  const { request, hitl, liveHitl } = useStatewireApprovalRequest();\n  const pending = request !== undefined || liveHitl !== null;\n  const payload = hitl ?? liveHitl;\n  const toolName = payload?.context?.tool_name ?? payload?.context?.tool_id;\n  const pendingCount = payload?.context?.pending_action_count ?? 1;\n  const approvalSummary = !pending\n    ? null\n    : payload && pendingCount === 1 && toolName\n      ? `${toolName} requires approval before it runs.`\n      : readInterruptMessage(request ? request.payload : liveHitl, fallbackMessage);\n  return <WaitingOnYouBannerView attention={attention} approvalSummary={approvalSummary} {...props} />;\n};\n\nexport interface WaitingOnYouBannerViewProps {\n  attention: Pick<AthenaSessionAttention, 'attention' | 'nextAction'> | null;\n  /** Summary of the pending approval, or `null` when nothing is parked. */\n  approvalSummary: string | null;\n  className?: string;\n}\n\n/**\n * The banner itself, over already-resolved inputs — the pure presenter\n * `WaitingOnYouBanner` binds to the thread list and the approval hook.\n */\nexport const WaitingOnYouBannerView: FC<WaitingOnYouBannerViewProps> = ({\n  attention,\n  approvalSummary,\n  className,\n}) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const scrollToApproval = useCallback(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    // The nearest ancestor that holds the thread viewport is the chat panel;\n    // the card lives in that viewport's sticky footer.\n    let scope: HTMLElement | null = root.parentElement;\n    while (scope && scope.querySelector(`[${THREAD_VIEWPORT_ATTR}]`) === null) {\n      scope = scope.parentElement;\n    }\n    const container: ParentNode = scope ?? root.ownerDocument;\n    const card = container.querySelector<HTMLElement>(APPROVAL_CARD_SELECTOR);\n    if (card) {\n      card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      return;\n    }\n    const viewport = container.querySelector<HTMLElement>(`[${THREAD_VIEWPORT_ATTR}]`);\n    viewport?.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });\n  }, []);\n\n  const needsYou = attention?.attention === 'needs_you';\n  const pending = approvalSummary !== null;\n  if (!needsYou && !pending) return null;\n  const text =\n    attention?.nextAction?.trim() || approvalSummary || 'This session is waiting on you.';\n\n  return (\n    <div ref={rootRef} className={cn('aui-waiting-on-you', className)}>\n      <div\n        role=\"status\"\n        data-testid=\"waiting-on-you-banner\"\n        data-pending-approval={pending || undefined}\n        className=\"mx-auto w-full max-w-(--thread-max-width) rounded-xl border border-amber-300 bg-amber-50 text-amber-900\"\n      >\n        <button\n          type=\"button\"\n          onClick={scrollToApproval}\n          className=\"flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-amber-100/70\"\n        >\n          <HandIcon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"shrink-0 font-semibold\">Waiting on you</span>\n          <span className=\"min-w-0 flex-1 truncate text-amber-800\">{text}</span>\n          {pending ? (\n            <span className=\"shrink-0 font-medium underline-offset-2 hover:underline\">\n              Review\n            </span>\n          ) : null}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"names":["useAuiState","useAthenaSessionAttention","hasStatewireThreadExtras","jsx","useStatewireApprovalRequest","readInterruptMessage","useRef","useCallback","THREAD_VIEWPORT_ATTR","cn","jsxs","HandIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,yBAAyB;AAkBxB,MAAM,qBAAkD,CAAC,UAAU;AACxE,QAAM,SAASA,MAAAA,YAAY,CAAC,MAAM,EAAE,OAAO,MAAM;AACjD,QAAM,YAAYC,0BAAAA,0BAAA;AAGlB,MAAI,CAACC,aAAAA,yBAAyB,MAAM,GAAG;AACrC,0CAAQ,wBAAA,EAAuB,WAAsB,iBAAiB,MAAO,GAAG,OAAO;AAAA,EACzF;AACA,SAAOC,2BAAAA,IAAC,gCAAA,EAA+B,WAAuB,GAAG,MAAA,CAAO;AAC1E;AAEA,MAAM,iCAEF,CAAC,EAAE,WAAW,iBAAiB,GAAG,YAAY;;AAChD,QAAM,EAAE,SAAS,MAAM,SAAA,IAAaC,4BAAAA,4BAAA;AACpC,QAAM,UAAU,YAAY,UAAa,aAAa;AACtD,QAAM,UAAU,QAAQ;AACxB,QAAM,aAAW,wCAAS,YAAT,mBAAkB,gBAAa,wCAAS,YAAT,mBAAkB;AAClE,QAAM,iBAAe,wCAAS,YAAT,mBAAkB,yBAAwB;AAC/D,QAAM,kBAAkB,CAAC,UACrB,OACA,WAAW,iBAAiB,KAAK,WAC/B,GAAG,QAAQ,uCACXC,gCAAqB,UAAU,QAAQ,UAAU,UAAU,eAAe;AAChF,SAAOF,2BAAAA,IAAC,wBAAA,EAAuB,WAAsB,iBAAmC,GAAG,OAAO;AACpG;AAaO,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AACF,MAAM;;AACJ,QAAM,UAAUG,QAAAA,OAAuB,IAAI;AAC3C,QAAM,mBAAmBC,QAAAA,YAAY,MAAM;AACzC,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AAGX,QAAI,QAA4B,KAAK;AACrC,WAAO,SAAS,MAAM,cAAc,IAAIC,yCAAoB,GAAG,MAAM,MAAM;AACzE,cAAQ,MAAM;AAAA,IAChB;AACA,UAAM,YAAwB,SAAS,KAAK;AAC5C,UAAM,OAAO,UAAU,cAA2B,sBAAsB;AACxE,QAAI,MAAM;AACR,WAAK,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW;AAC5D;AAAA,IACF;AACA,UAAM,WAAW,UAAU,cAA2B,IAAIA,qBAAAA,oBAAoB,GAAG;AACjF,yCAAU,SAAS,EAAE,KAAK,SAAS,cAAc,UAAU;EAC7D,GAAG,CAAA,CAAE;AAEL,QAAM,YAAW,uCAAW,eAAc;AAC1C,QAAM,UAAU,oBAAoB;AACpC,MAAI,CAAC,YAAY,CAAC,QAAS,QAAO;AAClC,QAAM,SACJ,4CAAW,eAAX,mBAAuB,WAAU,mBAAmB;AAEtD,SACEL,+BAAC,SAAI,KAAK,SAAS,WAAWM,OAAAA,GAAG,sBAAsB,SAAS,GAC9D,UAAAN,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,yBAAuB,WAAW;AAAA,MAClC,WAAU;AAAA,MAEV,UAAAO,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,UAAA;AAAA,YAAAP,2BAAAA,IAACQ,YAAAA,UAAA,EAAS,WAAU,mBAAkB,eAAY,QAAO;AAAA,YACzDR,2BAAAA,IAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,kBAAc;AAAA,YACvDA,2BAAAA,IAAC,QAAA,EAAK,WAAU,0CAA0C,UAAA,MAAK;AAAA,YAC9D,UACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,2DAA0D,oBAE1E,IACE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEJ;AAEJ;;;"}

package/dist/chat/WaitingOnYouBanner.d.ts

@@ -0,0 +1,29 @@
+import { type FC } from 'react';
+import { type AthenaSessionAttention } from '../threads/use-athena-session-attention';
+export interface WaitingOnYouBannerProps {
+    /** Applied to the outer wrapper (host padding); the banner itself is width-capped inside it. */
+    className?: string;
+    /** Copy shown when a parked interrupt carries no message. */
+    fallbackMessage?: string;
+}
+/**
+ * Persistent top-of-thread banner for a session that is waiting on the
+ * viewer: shown while the active thread's attention is `needs_you` (from the
+ * thread list) or while the approval hook reports a pending request. The text
+ * is the server's next action, else a summary of the pending request; a
+ * click scrolls to the approval card (or to the composer when there is no
+ * card). It never duplicates the card's decision buttons — the card stays the
+ * one place a request is answered. Renders nothing otherwise.
+ */
+export declare const WaitingOnYouBanner: FC<WaitingOnYouBannerProps>;
+export interface WaitingOnYouBannerViewProps {
+    attention: Pick<AthenaSessionAttention, 'attention' | 'nextAction'> | null;
+    /** Summary of the pending approval, or `null` when nothing is parked. */
+    approvalSummary: string | null;
+    className?: string;
+}
+/**
+ * The banner itself, over already-resolved inputs — the pure presenter
+ * `WaitingOnYouBanner` binds to the thread list and the approval hook.
+ */
+export declare const WaitingOnYouBannerView: FC<WaitingOnYouBannerViewProps>;

package/dist/chat/WaitingOnYouBanner.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAuiState } from "@assistant-ui/react";
+import "../packages/agent-runtime/src/generated/runconfig-contract.js";
+import { useRef, useCallback } from "react";
+import "@assistant-ui/tap";
+import "statewire";
+import "../packages/agent-runtime/src/statewire-suspended.js";
+import "../packages/agent-runtime/src/conversation-list.js";
+import "@tanstack/react-query";
+import { readInterruptMessage } from "../packages/agent-runtime/src/interrupts.js";
+import "../packages/agent-runtime/src/messages.js";
+import "../packages/agent-runtime/src/statewire-state.js";
+import { hasStatewireThreadExtras } from "../packages/agent-runtime/src/thread-extras.js";
+import "@assistant-ui/store";
+import "../packages/agent-runtime/src/quota-safe-local-storage-session.js";
+import "../packages/agent-runtime/src/statewire-attach-observer.js";
+import "../packages/agent-runtime/src/thread-status.js";
+import "@assistant-ui/react-statewire";
+import "@assistant-ui/core";
+import "../packages/agent-runtime/src/thread-handoff.js";
+import { HandIcon } from "lucide-react";
+import { THREAD_VIEWPORT_ATTR } from "../chat-ui/thread/statewire-history-edge.js";
+import { useAthenaSessionAttention } from "../threads/use-athena-session-attention.js";
+import { useStatewireApprovalRequest } from "./use-statewire-approval-request.js";
+import { cn } from "cnfast";
+const APPROVAL_CARD_SELECTOR = ".aui-approval-card";
+const WaitingOnYouBanner = (props) => {
+  const extras = useAuiState((s) => s.thread.extras);
+  const attention = useAthenaSessionAttention();
+  if (!hasStatewireThreadExtras(extras)) {
+    return /* @__PURE__ */ jsx(WaitingOnYouBannerView, { attention, approvalSummary: null, ...props });
+  }
+  return /* @__PURE__ */ jsx(WaitingOnYouBannerWithApproval, { attention, ...props });
+};
+const WaitingOnYouBannerWithApproval = ({ attention, fallbackMessage, ...props }) => {
+  var _a, _b, _c;
+  const { request, hitl, liveHitl } = useStatewireApprovalRequest();
+  const pending = request !== void 0 || liveHitl !== null;
+  const payload = hitl ?? liveHitl;
+  const toolName = ((_a = payload == null ? void 0 : payload.context) == null ? void 0 : _a.tool_name) ?? ((_b = payload == null ? void 0 : payload.context) == null ? void 0 : _b.tool_id);
+  const pendingCount = ((_c = payload == null ? void 0 : payload.context) == null ? void 0 : _c.pending_action_count) ?? 1;
+  const approvalSummary = !pending ? null : payload && pendingCount === 1 && toolName ? `${toolName} requires approval before it runs.` : readInterruptMessage(request ? request.payload : liveHitl, fallbackMessage);
+  return /* @__PURE__ */ jsx(WaitingOnYouBannerView, { attention, approvalSummary, ...props });
+};
+const WaitingOnYouBannerView = ({
+  attention,
+  approvalSummary,
+  className
+}) => {
+  var _a;
+  const rootRef = useRef(null);
+  const scrollToApproval = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    let scope = root.parentElement;
+    while (scope && scope.querySelector(`[${THREAD_VIEWPORT_ATTR}]`) === null) {
+      scope = scope.parentElement;
+    }
+    const container = scope ?? root.ownerDocument;
+    const card = container.querySelector(APPROVAL_CARD_SELECTOR);
+    if (card) {
+      card.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      return;
+    }
+    const viewport = container.querySelector(`[${THREAD_VIEWPORT_ATTR}]`);
+    viewport == null ? void 0 : viewport.scrollTo({ top: viewport.scrollHeight, behavior: "smooth" });
+  }, []);
+  const needsYou = (attention == null ? void 0 : attention.attention) === "needs_you";
+  const pending = approvalSummary !== null;
+  if (!needsYou && !pending) return null;
+  const text = ((_a = attention == null ? void 0 : attention.nextAction) == null ? void 0 : _a.trim()) || approvalSummary || "This session is waiting on you.";
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: cn("aui-waiting-on-you", className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "data-testid": "waiting-on-you-banner",
+      "data-pending-approval": pending || void 0,
+      className: "mx-auto w-full max-w-(--thread-max-width) rounded-xl border border-amber-300 bg-amber-50 text-amber-900",
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: scrollToApproval,
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-amber-100/70",
+          children: [
+            /* @__PURE__ */ jsx(HandIcon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold", children: "Waiting on you" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-amber-800", children: text }),
+            pending ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium underline-offset-2 hover:underline", children: "Review" }) : null
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  WaitingOnYouBanner,
+  WaitingOnYouBannerView
+};
+//# sourceMappingURL=WaitingOnYouBanner.js.map

package/dist/chat/WaitingOnYouBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaitingOnYouBanner.js","sources":["../../src/chat/WaitingOnYouBanner.tsx"],"sourcesContent":["import { useAuiState } from '@assistant-ui/react';\nimport { hasStatewireThreadExtras, readInterruptMessage } from '@athenaintel/agent-runtime';\nimport { HandIcon } from 'lucide-react';\nimport { type FC, useCallback, useRef } from 'react';\nimport { THREAD_VIEWPORT_ATTR } from '../chat-ui/thread/statewire-history-edge';\nimport { cn } from '../lib/utils';\nimport {\n  type AthenaSessionAttention,\n  useAthenaSessionAttention,\n} from '../threads/use-athena-session-attention';\nimport { useStatewireApprovalRequest } from './use-statewire-approval-request';\n\n/** The CSS class `StatewireApprovalCard` puts on its section; the banner scrolls to it. */\nconst APPROVAL_CARD_SELECTOR = '.aui-approval-card';\n\nexport interface WaitingOnYouBannerProps {\n  /** Applied to the outer wrapper (host padding); the banner itself is width-capped inside it. */\n  className?: string;\n  /** Copy shown when a parked interrupt carries no message. */\n  fallbackMessage?: string;\n}\n\n/**\n * Persistent top-of-thread banner for a session that is waiting on the\n * viewer: shown while the active thread's attention is `needs_you` (from the\n * thread list) or while the approval hook reports a pending request. The text\n * is the server's next action, else a summary of the pending request; a\n * click scrolls to the approval card (or to the composer when there is no\n * card). It never duplicates the card's decision buttons — the card stays the\n * one place a request is answered. Renders nothing otherwise.\n */\nexport const WaitingOnYouBanner: FC<WaitingOnYouBannerProps> = (props) => {\n  const extras = useAuiState((s) => s.thread.extras);\n  const attention = useAthenaSessionAttention();\n  // `useStatewireApprovalRequest` needs a statewire aui scope (it throws\n  // outside one), so the approval leg mounts only once the thread extras are.\n  if (!hasStatewireThreadExtras(extras)) {\n    return <WaitingOnYouBannerView attention={attention} approvalSummary={null} {...props} />;\n  }\n  return <WaitingOnYouBannerWithApproval attention={attention} {...props} />;\n};\n\nconst WaitingOnYouBannerWithApproval: FC<\n  WaitingOnYouBannerProps & { attention: AthenaSessionAttention | null }\n> = ({ attention, fallbackMessage, ...props }) => {\n  const { request, hitl, liveHitl } = useStatewireApprovalRequest();\n  const pending = request !== undefined || liveHitl !== null;\n  const payload = hitl ?? liveHitl;\n  const toolName = payload?.context?.tool_name ?? payload?.context?.tool_id;\n  const pendingCount = payload?.context?.pending_action_count ?? 1;\n  const approvalSummary = !pending\n    ? null\n    : payload && pendingCount === 1 && toolName\n      ? `${toolName} requires approval before it runs.`\n      : readInterruptMessage(request ? request.payload : liveHitl, fallbackMessage);\n  return <WaitingOnYouBannerView attention={attention} approvalSummary={approvalSummary} {...props} />;\n};\n\nexport interface WaitingOnYouBannerViewProps {\n  attention: Pick<AthenaSessionAttention, 'attention' | 'nextAction'> | null;\n  /** Summary of the pending approval, or `null` when nothing is parked. */\n  approvalSummary: string | null;\n  className?: string;\n}\n\n/**\n * The banner itself, over already-resolved inputs — the pure presenter\n * `WaitingOnYouBanner` binds to the thread list and the approval hook.\n */\nexport const WaitingOnYouBannerView: FC<WaitingOnYouBannerViewProps> = ({\n  attention,\n  approvalSummary,\n  className,\n}) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const scrollToApproval = useCallback(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    // The nearest ancestor that holds the thread viewport is the chat panel;\n    // the card lives in that viewport's sticky footer.\n    let scope: HTMLElement | null = root.parentElement;\n    while (scope && scope.querySelector(`[${THREAD_VIEWPORT_ATTR}]`) === null) {\n      scope = scope.parentElement;\n    }\n    const container: ParentNode = scope ?? root.ownerDocument;\n    const card = container.querySelector<HTMLElement>(APPROVAL_CARD_SELECTOR);\n    if (card) {\n      card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      return;\n    }\n    const viewport = container.querySelector<HTMLElement>(`[${THREAD_VIEWPORT_ATTR}]`);\n    viewport?.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });\n  }, []);\n\n  const needsYou = attention?.attention === 'needs_you';\n  const pending = approvalSummary !== null;\n  if (!needsYou && !pending) return null;\n  const text =\n    attention?.nextAction?.trim() || approvalSummary || 'This session is waiting on you.';\n\n  return (\n    <div ref={rootRef} className={cn('aui-waiting-on-you', className)}>\n      <div\n        role=\"status\"\n        data-testid=\"waiting-on-you-banner\"\n        data-pending-approval={pending || undefined}\n        className=\"mx-auto w-full max-w-(--thread-max-width) rounded-xl border border-amber-300 bg-amber-50 text-amber-900\"\n      >\n        <button\n          type=\"button\"\n          onClick={scrollToApproval}\n          className=\"flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-amber-100/70\"\n        >\n          <HandIcon className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"shrink-0 font-semibold\">Waiting on you</span>\n          <span className=\"min-w-0 flex-1 truncate text-amber-800\">{text}</span>\n          {pending ? (\n            <span className=\"shrink-0 font-medium underline-offset-2 hover:underline\">\n              Review\n            </span>\n          ) : null}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,yBAAyB;AAkBxB,MAAM,qBAAkD,CAAC,UAAU;AACxE,QAAM,SAAS,YAAY,CAAC,MAAM,EAAE,OAAO,MAAM;AACjD,QAAM,YAAY,0BAAA;AAGlB,MAAI,CAAC,yBAAyB,MAAM,GAAG;AACrC,+BAAQ,wBAAA,EAAuB,WAAsB,iBAAiB,MAAO,GAAG,OAAO;AAAA,EACzF;AACA,SAAO,oBAAC,gCAAA,EAA+B,WAAuB,GAAG,MAAA,CAAO;AAC1E;AAEA,MAAM,iCAEF,CAAC,EAAE,WAAW,iBAAiB,GAAG,YAAY;;AAChD,QAAM,EAAE,SAAS,MAAM,SAAA,IAAa,4BAAA;AACpC,QAAM,UAAU,YAAY,UAAa,aAAa;AACtD,QAAM,UAAU,QAAQ;AACxB,QAAM,aAAW,wCAAS,YAAT,mBAAkB,gBAAa,wCAAS,YAAT,mBAAkB;AAClE,QAAM,iBAAe,wCAAS,YAAT,mBAAkB,yBAAwB;AAC/D,QAAM,kBAAkB,CAAC,UACrB,OACA,WAAW,iBAAiB,KAAK,WAC/B,GAAG,QAAQ,uCACX,qBAAqB,UAAU,QAAQ,UAAU,UAAU,eAAe;AAChF,SAAO,oBAAC,wBAAA,EAAuB,WAAsB,iBAAmC,GAAG,OAAO;AACpG;AAaO,MAAM,yBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AACF,MAAM;;AACJ,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AAGX,QAAI,QAA4B,KAAK;AACrC,WAAO,SAAS,MAAM,cAAc,IAAI,oBAAoB,GAAG,MAAM,MAAM;AACzE,cAAQ,MAAM;AAAA,IAChB;AACA,UAAM,YAAwB,SAAS,KAAK;AAC5C,UAAM,OAAO,UAAU,cAA2B,sBAAsB;AACxE,QAAI,MAAM;AACR,WAAK,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW;AAC5D;AAAA,IACF;AACA,UAAM,WAAW,UAAU,cAA2B,IAAI,oBAAoB,GAAG;AACjF,yCAAU,SAAS,EAAE,KAAK,SAAS,cAAc,UAAU;EAC7D,GAAG,CAAA,CAAE;AAEL,QAAM,YAAW,uCAAW,eAAc;AAC1C,QAAM,UAAU,oBAAoB;AACpC,MAAI,CAAC,YAAY,CAAC,QAAS,QAAO;AAClC,QAAM,SACJ,4CAAW,eAAX,mBAAuB,WAAU,mBAAmB;AAEtD,SACE,oBAAC,SAAI,KAAK,SAAS,WAAW,GAAG,sBAAsB,SAAS,GAC9D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,yBAAuB,WAAW;AAAA,MAClC,WAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,WAAU,mBAAkB,eAAY,QAAO;AAAA,YACzD,oBAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA,kBAAc;AAAA,YACvD,oBAAC,QAAA,EAAK,WAAU,0CAA0C,UAAA,MAAK;AAAA,YAC9D,UACC,oBAAC,QAAA,EAAK,WAAU,2DAA0D,oBAE1E,IACE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/chat/athena-chat-welcome.cjs

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const react = require("react");
+const useSendMessage = require("../composer/useSendMessage.cjs");
+const usePrefersReducedMotion = require("../lib/use-prefers-reduced-motion.cjs");
+const cnfast = require("cnfast");
+const DEFAULT_WELCOME_SUGGESTIONS = [
+  {
+    icon: lucideReact.SearchIcon,
+    title: "Research a topic and draft a report",
+    prompt: "Search the web for the latest developments in enterprise AI adoption, then create a document summarizing the key trends, market data, and strategic implications."
+  },
+  {
+    icon: lucideReact.SearchIcon,
+    title: "Compare recent AI model launches",
+    prompt: "Search the web for the latest major AI model launches from OpenAI, Anthropic, and Google, then summarize the release dates, standout capabilities, and practical tradeoffs in a concise comparison table."
+  },
+  {
+    icon: lucideReact.PresentationIcon,
+    title: "Build a presentation from scratch",
+    prompt: "Create a 5-slide investor update presentation covering market opportunity, product traction, key metrics, competitive positioning, and next steps."
+  },
+  {
+    icon: lucideReact.FileTextIcon,
+    title: "Set up a structured spreadsheet",
+    prompt: "Create a project tracking spreadsheet with columns for task name, owner, priority, status, start date, due date, and completion percentage."
+  }
+];
+const WELCOME_GREETING_SUBTEXT_DELAY_MS = 60;
+const WELCOME_SUGGESTION_STAGGER_BASE_MS = 120;
+const WELCOME_SUGGESTION_STAGGER_STEP_MS = 70;
+const WELCOME_COMPOSER_ENTER_DELAY_MS = 360;
+function welcomeSuggestionDelayMs(index) {
+  return WELCOME_SUGGESTION_STAGGER_BASE_MS + index * WELCOME_SUGGESTION_STAGGER_STEP_MS;
+}
+const WELCOME_COMPOSER_AFTER_LAST_CARD_MS = 30;
+function welcomeComposerDelayMs(suggestionCount) {
+  if (suggestionCount <= 0) return WELCOME_COMPOSER_ENTER_DELAY_MS;
+  return Math.max(
+    WELCOME_COMPOSER_ENTER_DELAY_MS,
+    welcomeSuggestionDelayMs(suggestionCount - 1) + WELCOME_COMPOSER_AFTER_LAST_CARD_MS
+  );
+}
+const WELCOME_ENTER_CLASS = "animate-in fade-in slide-in-from-bottom-2 fill-mode-both animation-duration-300";
+function welcomeEntrance(delayMs, reducedMotion) {
+  if (reducedMotion) return { className: void 0, style: void 0 };
+  return { className: WELCOME_ENTER_CLASS, style: { animationDelay: `${delayMs}ms` } };
+}
+const SuggestionCard = ({ suggestion, index, reducedMotion }) => {
+  const Icon = suggestion.icon;
+  const sendMessage = useSendMessage.useSendMessage();
+  const entrance = welcomeEntrance(welcomeSuggestionDelayMs(index), reducedMotion);
+  const handleClick = react.useCallback(() => {
+    void sendMessage(suggestion.prompt);
+  }, [sendMessage, suggestion.prompt]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cnfast.cn(
+        "aui-thread-welcome-suggestion group flex flex-col items-start gap-2.5 rounded-xl border border-border/60 bg-card p-3.5 text-left shadow-sm transition-all duration-150 hover:border-border hover:bg-muted/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+        entrance.className
+      ),
+      style: entrance.style,
+      "data-welcome-suggestion": index,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, { className: "size-3.5 shrink-0 text-muted-foreground/0 transition-all group-hover:text-muted-foreground" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium leading-snug text-foreground", children: suggestion.title })
+      ]
+    }
+  );
+};
+const AthenaChatWelcomeSuggestions = ({
+  suggestions,
+  className
+}) => {
+  const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cnfast.cn(
+        "aui-thread-welcome-suggestions grid w-full auto-rows-fr grid-cols-2 gap-2.5 @min-[40rem]:grid-flow-col @min-[40rem]:auto-cols-fr",
+        className
+      ),
+      "data-testid": "athena-welcome-suggestions",
+      children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        SuggestionCard,
+        {
+          suggestion,
+          index,
+          reducedMotion
+        },
+        suggestion.title
+      ))
+    }
+  );
+};
+const AthenaChatWelcome = ({
+  welcomeMessage,
+  welcomeSubtext
+}) => {
+  const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
+  const greeting = welcomeEntrance(0, reducedMotion);
+  const subtext = welcomeEntrance(WELCOME_GREETING_SUBTEXT_DELAY_MS, reducedMotion);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: cnfast.cn(
+          "aui-thread-welcome-message-inner text-2xl font-semibold text-foreground",
+          greeting.className
+        ),
+        style: greeting.style,
+        children: welcomeMessage
+      }
+    ),
+    welcomeSubtext && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cnfast.cn(
+          "aui-thread-welcome-message-inner text-lg text-muted-foreground",
+          subtext.className
+        ),
+        style: subtext.style,
+        children: welcomeSubtext
+      }
+    )
+  ] }) }) });
+};
+exports.AthenaChatWelcome = AthenaChatWelcome;
+exports.AthenaChatWelcomeSuggestions = AthenaChatWelcomeSuggestions;
+exports.DEFAULT_WELCOME_SUGGESTIONS = DEFAULT_WELCOME_SUGGESTIONS;
+exports.WELCOME_COMPOSER_ENTER_DELAY_MS = WELCOME_COMPOSER_ENTER_DELAY_MS;
+exports.WELCOME_ENTER_CLASS = WELCOME_ENTER_CLASS;
+exports.WELCOME_GREETING_SUBTEXT_DELAY_MS = WELCOME_GREETING_SUBTEXT_DELAY_MS;
+exports.WELCOME_SUGGESTION_STAGGER_BASE_MS = WELCOME_SUGGESTION_STAGGER_BASE_MS;
+exports.WELCOME_SUGGESTION_STAGGER_STEP_MS = WELCOME_SUGGESTION_STAGGER_STEP_MS;
+exports.welcomeComposerDelayMs = welcomeComposerDelayMs;
+exports.welcomeEntrance = welcomeEntrance;
+exports.welcomeSuggestionDelayMs = welcomeSuggestionDelayMs;
+//# sourceMappingURL=athena-chat-welcome.cjs.map

package/dist/chat/athena-chat-welcome.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"athena-chat-welcome.cjs","sources":["../../src/chat/athena-chat-welcome.tsx"],"sourcesContent":["import { ArrowRightIcon, FileTextIcon, PresentationIcon, SearchIcon } from 'lucide-react';\nimport { useCallback, type CSSProperties, type FC } from 'react';\nimport { useSendMessage } from '../composer/useSendMessage';\nimport { cn } from '../lib/utils';\nimport { usePrefersReducedMotion } from '../lib/use-prefers-reduced-motion';\n\nexport interface WelcomeSuggestion {\n  icon: React.ElementType;\n  title: string;\n  prompt: string;\n}\n\nexport const DEFAULT_WELCOME_SUGGESTIONS: WelcomeSuggestion[] = [\n  {\n    icon: SearchIcon,\n    title: 'Research a topic and draft a report',\n    prompt:\n      'Search the web for the latest developments in enterprise AI adoption, then create a document summarizing the key trends, market data, and strategic implications.',\n  },\n  {\n    icon: SearchIcon,\n    title: 'Compare recent AI model launches',\n    prompt:\n      'Search the web for the latest major AI model launches from OpenAI, Anthropic, and Google, then summarize the release dates, standout capabilities, and practical tradeoffs in a concise comparison table.',\n  },\n  {\n    icon: PresentationIcon,\n    title: 'Build a presentation from scratch',\n    prompt:\n      'Create a 5-slide investor update presentation covering market opportunity, product traction, key metrics, competitive positioning, and next steps.',\n  },\n  {\n    icon: FileTextIcon,\n    title: 'Set up a structured spreadsheet',\n    prompt:\n      'Create a project tracking spreadsheet with columns for task name, owner, priority, status, start date, due date, and completion percentage.',\n  },\n];\n\n/**\n * The empty state's entrance schedule: the greeting first, the suggestion\n * cards staggered behind it, the composer last. Every value is an inline\n * `animation-delay`, so a host reading the DOM sees the schedule as-is.\n */\nexport const WELCOME_GREETING_SUBTEXT_DELAY_MS = 60;\nexport const WELCOME_SUGGESTION_STAGGER_BASE_MS = 120;\nexport const WELCOME_SUGGESTION_STAGGER_STEP_MS = 70;\nexport const WELCOME_COMPOSER_ENTER_DELAY_MS = 360;\n\nexport function welcomeSuggestionDelayMs(index: number): number {\n  return WELCOME_SUGGESTION_STAGGER_BASE_MS + index * WELCOME_SUGGESTION_STAGGER_STEP_MS;\n}\n\n/** Gap between the last card and the composer, which always arrives last. */\nconst WELCOME_COMPOSER_AFTER_LAST_CARD_MS = 30;\n\n/**\n * When the composer enters: 360 ms behind the default four cards, and behind\n * the last card whenever a host supplies more (`welcomeSuggestions` is\n * unbounded), so the composer is always the final element to arrive.\n */\nexport function welcomeComposerDelayMs(suggestionCount: number): number {\n  if (suggestionCount <= 0) return WELCOME_COMPOSER_ENTER_DELAY_MS;\n  return Math.max(\n    WELCOME_COMPOSER_ENTER_DELAY_MS,\n    welcomeSuggestionDelayMs(suggestionCount - 1) + WELCOME_COMPOSER_AFTER_LAST_CARD_MS,\n  );\n}\n\n/** Fade + short rise; `fill-mode-both` holds the hidden start through a delay. */\nexport const WELCOME_ENTER_CLASS =\n  'animate-in fade-in slide-in-from-bottom-2 fill-mode-both animation-duration-300';\n\n/**\n * Inline entrance schedule for one element, or nothing under reduced motion\n * (no classes, no delay — the element is simply there).\n */\nexport function welcomeEntrance(\n  delayMs: number,\n  reducedMotion: boolean,\n): { className: string | undefined; style: CSSProperties | undefined } {\n  if (reducedMotion) return { className: undefined, style: undefined };\n  return { className: WELCOME_ENTER_CLASS, style: { animationDelay: `${delayMs}ms` } };\n}\n\nconst SuggestionCard: FC<{\n  suggestion: WelcomeSuggestion;\n  index: number;\n  reducedMotion: boolean;\n}> = ({ suggestion, index, reducedMotion }) => {\n  const Icon = suggestion.icon;\n  const sendMessage = useSendMessage();\n  const entrance = welcomeEntrance(welcomeSuggestionDelayMs(index), reducedMotion);\n\n  const handleClick = useCallback(() => {\n    void sendMessage(suggestion.prompt);\n  }, [sendMessage, suggestion.prompt]);\n\n  // Icon row above the title: the card reads the same at a 2-column width\n  // and in the one-row layout, where each card is about a quarter of the\n  // thread and a side-by-side icon would leave the title a few words wide.\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={cn(\n        'aui-thread-welcome-suggestion group flex flex-col items-start gap-2.5 rounded-xl border border-border/60 bg-card p-3.5 text-left shadow-sm transition-all duration-150 hover:border-border hover:bg-muted/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',\n        entrance.className,\n      )}\n      style={entrance.style}\n      data-welcome-suggestion={index}\n    >\n      <span className=\"flex w-full items-center justify-between\">\n        <span className=\"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary\">\n          <Icon className=\"size-4\" />\n        </span>\n        <ArrowRightIcon className=\"size-3.5 shrink-0 text-muted-foreground/0 transition-all group-hover:text-muted-foreground\" />\n      </span>\n      <span className=\"text-[13px] font-medium leading-snug text-foreground\">\n        {suggestion.title}\n      </span>\n    </button>\n  );\n};\n\nexport interface AthenaChatWelcomeSuggestionsProps {\n  suggestions: readonly WelcomeSuggestion[];\n  className?: string;\n}\n\n/**\n * The suggestion cards, docked directly above the composer in the empty\n * state: equal-width in one row once the thread is 40rem wide, a two-column\n * grid below that (a container query on the thread root, so a chat embedded\n * in a narrow pane of a wide window wraps too). Cards stagger in at\n * 120 ms + 70 ms × index; none of it moves under reduced motion.\n */\nexport const AthenaChatWelcomeSuggestions: FC<AthenaChatWelcomeSuggestionsProps> = ({\n  suggestions,\n  className,\n}) => {\n  const reducedMotion = usePrefersReducedMotion();\n  if (suggestions.length === 0) return null;\n  return (\n    <div\n      className={cn(\n        'aui-thread-welcome-suggestions grid w-full auto-rows-fr grid-cols-2 gap-2.5 @min-[40rem]:grid-flow-col @min-[40rem]:auto-cols-fr',\n        className,\n      )}\n      data-testid=\"athena-welcome-suggestions\"\n    >\n      {suggestions.map((suggestion, index) => (\n        <SuggestionCard\n          key={suggestion.title}\n          suggestion={suggestion}\n          index={index}\n          reducedMotion={reducedMotion}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport interface AthenaChatWelcomeProps {\n  welcomeMessage: string;\n  welcomeSubtext?: string;\n}\n\n/**\n * The greeting, centred in the viewport's free space while the thread is\n * empty. Fades and rises in; the subtext follows a beat later.\n */\nexport const AthenaChatWelcome: FC<AthenaChatWelcomeProps> = ({\n  welcomeMessage,\n  welcomeSubtext,\n}) => {\n  const reducedMotion = usePrefersReducedMotion();\n  const greeting = welcomeEntrance(0, reducedMotion);\n  const subtext = welcomeEntrance(WELCOME_GREETING_SUBTEXT_DELAY_MS, reducedMotion);\n  return (\n    <div className=\"aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col\">\n      <div className=\"aui-thread-welcome-center flex w-full grow flex-col items-center justify-center\">\n        <div className=\"aui-thread-welcome-message flex size-full flex-col justify-center px-4\">\n          <h2\n            className={cn(\n              'aui-thread-welcome-message-inner text-2xl font-semibold text-foreground',\n              greeting.className,\n            )}\n            style={greeting.style}\n          >\n            {welcomeMessage}\n          </h2>\n          {welcomeSubtext && (\n            <p\n              className={cn(\n                'aui-thread-welcome-message-inner text-lg text-muted-foreground',\n                subtext.className,\n              )}\n              style={subtext.style}\n            >\n              {welcomeSubtext}\n            </p>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["SearchIcon","PresentationIcon","FileTextIcon","useSendMessage","useCallback","jsxs","cn","jsx","ArrowRightIcon","usePrefersReducedMotion"],"mappings":"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"}

package/dist/chat/athena-chat-welcome.d.ts

@@ -0,0 +1,54 @@
+import { type CSSProperties, type FC } from 'react';
+export interface WelcomeSuggestion {
+    icon: React.ElementType;
+    title: string;
+    prompt: string;
+}
+export declare const DEFAULT_WELCOME_SUGGESTIONS: WelcomeSuggestion[];
+/**
+ * The empty state's entrance schedule: the greeting first, the suggestion
+ * cards staggered behind it, the composer last. Every value is an inline
+ * `animation-delay`, so a host reading the DOM sees the schedule as-is.
+ */
+export declare const WELCOME_GREETING_SUBTEXT_DELAY_MS = 60;
+export declare const WELCOME_SUGGESTION_STAGGER_BASE_MS = 120;
+export declare const WELCOME_SUGGESTION_STAGGER_STEP_MS = 70;
+export declare const WELCOME_COMPOSER_ENTER_DELAY_MS = 360;
+export declare function welcomeSuggestionDelayMs(index: number): number;
+/**
+ * When the composer enters: 360 ms behind the default four cards, and behind
+ * the last card whenever a host supplies more (`welcomeSuggestions` is
+ * unbounded), so the composer is always the final element to arrive.
+ */
+export declare function welcomeComposerDelayMs(suggestionCount: number): number;
+/** Fade + short rise; `fill-mode-both` holds the hidden start through a delay. */
+export declare const WELCOME_ENTER_CLASS = "animate-in fade-in slide-in-from-bottom-2 fill-mode-both animation-duration-300";
+/**
+ * Inline entrance schedule for one element, or nothing under reduced motion
+ * (no classes, no delay — the element is simply there).
+ */
+export declare function welcomeEntrance(delayMs: number, reducedMotion: boolean): {
+    className: string | undefined;
+    style: CSSProperties | undefined;
+};
+export interface AthenaChatWelcomeSuggestionsProps {
+    suggestions: readonly WelcomeSuggestion[];
+    className?: string;
+}
+/**
+ * The suggestion cards, docked directly above the composer in the empty
+ * state: equal-width in one row once the thread is 40rem wide, a two-column
+ * grid below that (a container query on the thread root, so a chat embedded
+ * in a narrow pane of a wide window wraps too). Cards stagger in at
+ * 120 ms + 70 ms × index; none of it moves under reduced motion.
+ */
+export declare const AthenaChatWelcomeSuggestions: FC<AthenaChatWelcomeSuggestionsProps>;
+export interface AthenaChatWelcomeProps {
+    welcomeMessage: string;
+    welcomeSubtext?: string;
+}
+/**
+ * The greeting, centred in the viewport's free space while the thread is
+ * empty. Fades and rises in; the subtext follows a beat later.
+ */
+export declare const AthenaChatWelcome: FC<AthenaChatWelcomeProps>;

package/dist/chat/athena-chat-welcome.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon, PresentationIcon, FileTextIcon, ArrowRightIcon } from "lucide-react";
+import { useCallback } from "react";
+import { useSendMessage } from "../composer/useSendMessage.js";
+import { usePrefersReducedMotion } from "../lib/use-prefers-reduced-motion.js";
+import { cn } from "cnfast";
+const DEFAULT_WELCOME_SUGGESTIONS = [
+  {
+    icon: SearchIcon,
+    title: "Research a topic and draft a report",
+    prompt: "Search the web for the latest developments in enterprise AI adoption, then create a document summarizing the key trends, market data, and strategic implications."
+  },
+  {
+    icon: SearchIcon,
+    title: "Compare recent AI model launches",
+    prompt: "Search the web for the latest major AI model launches from OpenAI, Anthropic, and Google, then summarize the release dates, standout capabilities, and practical tradeoffs in a concise comparison table."
+  },
+  {
+    icon: PresentationIcon,
+    title: "Build a presentation from scratch",
+    prompt: "Create a 5-slide investor update presentation covering market opportunity, product traction, key metrics, competitive positioning, and next steps."
+  },
+  {
+    icon: FileTextIcon,
+    title: "Set up a structured spreadsheet",
+    prompt: "Create a project tracking spreadsheet with columns for task name, owner, priority, status, start date, due date, and completion percentage."
+  }
+];
+const WELCOME_GREETING_SUBTEXT_DELAY_MS = 60;
+const WELCOME_SUGGESTION_STAGGER_BASE_MS = 120;
+const WELCOME_SUGGESTION_STAGGER_STEP_MS = 70;
+const WELCOME_COMPOSER_ENTER_DELAY_MS = 360;
+function welcomeSuggestionDelayMs(index) {
+  return WELCOME_SUGGESTION_STAGGER_BASE_MS + index * WELCOME_SUGGESTION_STAGGER_STEP_MS;
+}
+const WELCOME_COMPOSER_AFTER_LAST_CARD_MS = 30;
+function welcomeComposerDelayMs(suggestionCount) {
+  if (suggestionCount <= 0) return WELCOME_COMPOSER_ENTER_DELAY_MS;
+  return Math.max(
+    WELCOME_COMPOSER_ENTER_DELAY_MS,
+    welcomeSuggestionDelayMs(suggestionCount - 1) + WELCOME_COMPOSER_AFTER_LAST_CARD_MS
+  );
+}
+const WELCOME_ENTER_CLASS = "animate-in fade-in slide-in-from-bottom-2 fill-mode-both animation-duration-300";
+function welcomeEntrance(delayMs, reducedMotion) {
+  if (reducedMotion) return { className: void 0, style: void 0 };
+  return { className: WELCOME_ENTER_CLASS, style: { animationDelay: `${delayMs}ms` } };
+}
+const SuggestionCard = ({ suggestion, index, reducedMotion }) => {
+  const Icon = suggestion.icon;
+  const sendMessage = useSendMessage();
+  const entrance = welcomeEntrance(welcomeSuggestionDelayMs(index), reducedMotion);
+  const handleClick = useCallback(() => {
+    void sendMessage(suggestion.prompt);
+  }, [sendMessage, suggestion.prompt]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "aui-thread-welcome-suggestion group flex flex-col items-start gap-2.5 rounded-xl border border-border/60 bg-card p-3.5 text-left shadow-sm transition-all duration-150 hover:border-border hover:bg-muted/40 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+        entrance.className
+      ),
+      style: entrance.style,
+      "data-welcome-suggestion": index,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+          /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3.5 shrink-0 text-muted-foreground/0 transition-all group-hover:text-muted-foreground" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium leading-snug text-foreground", children: suggestion.title })
+      ]
+    }
+  );
+};
+const AthenaChatWelcomeSuggestions = ({
+  suggestions,
+  className
+}) => {
+  const reducedMotion = usePrefersReducedMotion();
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "aui-thread-welcome-suggestions grid w-full auto-rows-fr grid-cols-2 gap-2.5 @min-[40rem]:grid-flow-col @min-[40rem]:auto-cols-fr",
+        className
+      ),
+      "data-testid": "athena-welcome-suggestions",
+      children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+        SuggestionCard,
+        {
+          suggestion,
+          index,
+          reducedMotion
+        },
+        suggestion.title
+      ))
+    }
+  );
+};
+const AthenaChatWelcome = ({
+  welcomeMessage,
+  welcomeSubtext
+}) => {
+  const reducedMotion = usePrefersReducedMotion();
+  const greeting = welcomeEntrance(0, reducedMotion);
+  const subtext = welcomeEntrance(WELCOME_GREETING_SUBTEXT_DELAY_MS, reducedMotion);
+  return /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col", children: /* @__PURE__ */ jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: cn(
+          "aui-thread-welcome-message-inner text-2xl font-semibold text-foreground",
+          greeting.className
+        ),
+        style: greeting.style,
+        children: welcomeMessage
+      }
+    ),
+    welcomeSubtext && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "aui-thread-welcome-message-inner text-lg text-muted-foreground",
+          subtext.className
+        ),
+        style: subtext.style,
+        children: welcomeSubtext
+      }
+    )
+  ] }) }) });
+};
+export {
+  AthenaChatWelcome,
+  AthenaChatWelcomeSuggestions,
+  DEFAULT_WELCOME_SUGGESTIONS,
+  WELCOME_COMPOSER_ENTER_DELAY_MS,
+  WELCOME_ENTER_CLASS,
+  WELCOME_GREETING_SUBTEXT_DELAY_MS,
+  WELCOME_SUGGESTION_STAGGER_BASE_MS,
+  WELCOME_SUGGESTION_STAGGER_STEP_MS,
+  welcomeComposerDelayMs,
+  welcomeEntrance,
+  welcomeSuggestionDelayMs
+};
+//# sourceMappingURL=athena-chat-welcome.js.map