@upbound/monarch-blocks 0.1.0

package/dist/chat-interface.js

@@ -0,0 +1,676 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/chat-interface.tsx
+import * as React2 from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/chat-interface.tsx
+import { Badge } from "@upbound/monarch-core";
+import { Bubble, BubbleContent } from "@upbound/monarch-core";
+import { Button } from "@upbound/monarch-core";
+import { Message, MessageContent } from "@upbound/monarch-core";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@upbound/monarch-core";
+import { InputGroup, InputGroupAddon, InputGroupTextarea } from "@upbound/monarch-core";
+import { Item, ItemActions, ItemContent, ItemGroup, ItemTitle } from "@upbound/monarch-core";
+import { Kbd } from "@upbound/monarch-core";
+import {
+  MessageScrollerProvider,
+  MessageScroller,
+  MessageScrollerViewport,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerButton
+} from "@upbound/monarch-core";
+import { Icon } from "@upbound/monarch-core";
+
+// src/section-nav.tsx
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function SectionNav(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("nav", __spreadValues({ "data-slot": "section-nav", className: cn("flex flex-col gap-4", className) }, props));
+}
+function SectionNavList(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("ul", __spreadValues({ "data-slot": "section-nav-list", className: cn("flex flex-col gap-px", className) }, props));
+}
+function SectionNavItem(_a) {
+  var _b = _a, { className, isActive, asChild, children } = _b, props = __objRest(_b, ["className", "isActive", "asChild", "children"]);
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx("li", { "data-slot": "section-nav-item", children: /* @__PURE__ */ jsx(
+    Comp,
+    __spreadProps(__spreadValues({
+      "data-active": isActive || void 0,
+      "aria-current": isActive ? "page" : void 0,
+      className: cn(
+        "group/section-nav-item text-body text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground flex w-full items-center gap-2 rounded-md px-3 py-1.5 font-medium outline-hidden motion-safe:transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default) [&_svg:not([class*='size-'])]:w-(--icon-default)!",
+        className
+      )
+    }, props), {
+      children
+    })
+  ) });
+}
+
+// src/relative-time.tsx
+import * as React from "react";
+
+// src/hooks/use-mounted.ts
+import { useSyncExternalStore } from "react";
+function subscribe() {
+  return () => {
+  };
+}
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/relative-time.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function absoluteTitle(date, locale) {
+  return date.toLocaleString(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  });
+}
+function formatAmPm(date, options, locale) {
+  const parts = new Intl.DateTimeFormat(locale, options).formatToParts(date);
+  let result = "";
+  for (const part of parts) {
+    if (part.type === "dayPeriod") {
+      result += part.value.toLowerCase().replace(/\./g, "");
+    } else {
+      result += part.value;
+    }
+  }
+  return result;
+}
+function formatAbsolute(date, variant, end, locale) {
+  var _a, _b;
+  switch (variant) {
+    case "deadline": {
+      const weekday = date.toLocaleDateString(locale, { weekday: "short" });
+      const datePart = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const timePart = formatAmPm(date, { hour: "numeric", minute: "2-digit" }, locale);
+      const tz = (_a = date.toLocaleTimeString(locale, { timeZoneName: "short" }).split(" ").pop()) != null ? _a : "";
+      return `${weekday}, ${datePart} \xB7 ${timePart} ${tz}`;
+    }
+    case "log": {
+      const datePart = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const timePart = formatAmPm(date, { hour: "numeric", minute: "2-digit" }, locale);
+      const tz = (_b = date.toLocaleTimeString(locale, { timeZoneName: "short" }).split(" ").pop()) != null ? _b : "";
+      return `${datePart}, ${timePart} ${tz}`;
+    }
+    case "range": {
+      if (!end) return date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const startYear = date.getFullYear();
+      const endYear = end.getFullYear();
+      if (startYear === endYear) {
+        const start2 = date.toLocaleDateString(locale, { month: "short", day: "numeric" });
+        const endStr2 = end.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+        return `${start2} \u2013 ${endStr2}`;
+      }
+      const start = date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      const endStr = end.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+      return `${start} \u2013 ${endStr}`;
+    }
+    case "date":
+    default:
+      return date.toLocaleDateString(locale, { month: "short", day: "numeric", year: "numeric" });
+  }
+}
+function AbsoluteTimestamp(_a) {
+  var _b = _a, { date, variant = "date", end, className } = _b, props = __objRest(_b, ["date", "variant", "end", "className"]);
+  const d = React.useMemo(() => new Date(date), [date]);
+  const e = React.useMemo(() => end ? new Date(end) : void 0, [end]);
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  return /* @__PURE__ */ jsx2(
+    "time",
+    __spreadProps(__spreadValues({
+      dateTime: d.toISOString(),
+      title: absoluteTitle(d, locale),
+      className: cn("tabular-nums", className)
+    }, props), {
+      children: formatAbsolute(d, variant, e, locale)
+    })
+  );
+}
+
+// src/chat-interface.tsx
+import { Marker, MarkerContent, MarkerIcon } from "@upbound/monarch-core";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@upbound/monarch-core";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function formatRelativeTime(iso) {
+  const diffMs = Date.now() - new Date(iso).getTime();
+  const s = Math.round(diffMs / 1e3);
+  if (s < 60) return "now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.round(h / 24);
+  if (d < 7) return `${d}d ago`;
+  const w = Math.round(d / 7);
+  if (w < 5) return `${w}w ago`;
+  const mo = Math.round(d / 30);
+  if (mo < 12) return `${mo}mo ago`;
+  const y = Math.round(d / 365);
+  return `${y}y ago`;
+}
+function formatExactTime(iso) {
+  return new Date(iso).toLocaleString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function ChatSessionList({ sessions, activeSessionId, onSelectSession, className }) {
+  return /* @__PURE__ */ jsx3("div", { className: cn("bg-background flex h-full flex-col", className), children: /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx3(ItemGroup, { className: "gap-1 p-2", children: sessions.map((session) => {
+    const isActive = session.id === activeSessionId;
+    return /* @__PURE__ */ jsxs(
+      Item,
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-pressed": isActive,
+        "data-active": isActive || void 0,
+        onClick: () => onSelectSession(session.id),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelectSession(session.id);
+          }
+        },
+        className: cn(
+          "group/session-item hover:bg-muted/50 data-[active=true]:bg-accent data-[active=true]:text-accent-foreground cursor-pointer flex-nowrap"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(ItemContent, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx3(ItemTitle, { className: "truncate", children: session.title }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              session.surface && /* @__PURE__ */ jsx3(Badge, { variant: "outline", className: "text-[10px]", children: session.surface }),
+              session.messageCount != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-[10px]", children: [
+                session.messageCount,
+                " msgs"
+              ] }),
+              session.updatedAt && /* @__PURE__ */ jsx3(
+                AbsoluteTimestamp,
+                {
+                  date: session.updatedAt,
+                  variant: "date",
+                  className: "text-muted-foreground text-[10px]"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3(ItemActions, { className: "opacity-0 group-hover/session-item:opacity-100 has-data-[state=open]:opacity-100 motion-safe:transition-opacity", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+              Button,
+              {
+                variant: "outline",
+                size: "icon-sm",
+                "aria-label": `More actions for ${session.title}`,
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx3(Icon, { name: "ellipsis" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Pin" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Rename" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Share" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Archive" }),
+              /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { variant: "destructive", children: "Delete" })
+            ] })
+          ] }) })
+        ]
+      },
+      session.id
+    );
+  }) }) }) });
+}
+function ChatMessageBubble({
+  message,
+  userName: _userName,
+  assistantName = "Upbound AI"
+}) {
+  const isUser = message.role === "user";
+  const messageFooter = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mt-1 flex items-center gap-1 opacity-0 group-hover/chat-message:opacity-100 motion-safe:transition-opacity",
+        isUser && "justify-end"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-xs",
+              onClick: () => navigator.clipboard.writeText(message.content),
+              "aria-label": "Copy message",
+              children: /* @__PURE__ */ jsx3(Icon, { name: "copy" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx3(TooltipContent, { children: "Copy" })
+        ] }),
+        message.timestamp && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3("span", { className: "text-caption text-muted-foreground", children: formatRelativeTime(message.timestamp) }) }),
+          /* @__PURE__ */ jsx3(TooltipContent, { children: formatExactTime(message.timestamp) })
+        ] })
+      ]
+    }
+  );
+  if (isUser) {
+    return /* @__PURE__ */ jsx3(Message, { align: "end", className: "group/chat-message", children: /* @__PURE__ */ jsxs(MessageContent, { className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsx3(Bubble, { variant: "default", align: "end", children: /* @__PURE__ */ jsx3(BubbleContent, { className: "whitespace-pre-wrap", children: message.content }) }),
+      messageFooter
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx3(Message, { align: "start", className: "group/chat-message", children: /* @__PURE__ */ jsxs(MessageContent, { className: "max-w-2xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-body text-foreground mb-2 flex items-center gap-1.5 font-semibold", children: [
+      /* @__PURE__ */ jsx3(Icon, { name: "sparkles", size: "default", className: "text-primary" }),
+      assistantName
+    ] }),
+    message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx3("div", { className: "mb-3 space-y-1.5", children: message.toolCalls.map((tc, i) => /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 text-body-sm flex items-start gap-2 rounded border px-3 py-2", children: [
+      /* @__PURE__ */ jsx3(Icon, { name: "wrench", size: "sm", className: "text-muted-foreground mt-0.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx3("span", { className: "font-medium", children: tc.name }),
+          tc.isNew && /* @__PURE__ */ jsx3(Badge, { variant: "secondary", className: "text-[10px]", children: "New API" })
+        ] }),
+        tc.description && /* @__PURE__ */ jsx3("div", { className: "text-muted-foreground mt-0.5 font-mono text-[10px]", children: tc.description }),
+        tc.apiUsed && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground mt-0.5", children: [
+          "via ",
+          tc.apiUsed
+        ] })
+      ] })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx3("div", { className: "text-body text-foreground leading-relaxed whitespace-pre-wrap", children: message.content }),
+    messageFooter
+  ] }) });
+}
+function ChatThinkingIndicator() {
+  return /* @__PURE__ */ jsx3(Marker, { children: /* @__PURE__ */ jsx3(MarkerContent, { className: "shimmer", children: "Thinking\u2026" }) });
+}
+function ChatInput({
+  onSend,
+  placeholder = "Ask about your infrastructure...",
+  routines,
+  onSelectRoutine,
+  onManageRoutines,
+  usePageAsContext = false,
+  onUsePageAsContext,
+  onAttach,
+  className
+}) {
+  const [value, setValue] = React2.useState("");
+  function handleSend() {
+    if (!value.trim()) return;
+    onSend == null ? void 0 : onSend(value.trim());
+    setValue("");
+  }
+  return /* @__PURE__ */ jsx3("div", { className: cn("shrink-0 p-3", className), children: /* @__PURE__ */ jsxs(InputGroup, { className: "has-[[data-slot=input-group-control]:focus-visible]:border-input! has-[[data-slot=input-group-control]:focus-visible]:ring-0!", children: [
+    /* @__PURE__ */ jsx3(
+      InputGroupTextarea,
+      {
+        autoFocus: true,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+          }
+        },
+        placeholder,
+        rows: 1
+      }
+    ),
+    /* @__PURE__ */ jsxs(InputGroupAddon, { align: "block-end", children: [
+      routines !== void 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "wand-magic-sparkles", "data-icon": "inline-start" }),
+          "Workflows",
+          /* @__PURE__ */ jsx3(Icon, { name: "chevron-down", "data-icon": "inline-end" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+          /* @__PURE__ */ jsx3("div", { className: "max-h-64 overflow-y-auto", children: routines.length === 0 ? /* @__PURE__ */ jsx3(DropdownMenuItem, { disabled: true, children: "No workflows yet" }) : routines.map((w) => /* @__PURE__ */ jsx3(DropdownMenuItem, { onSelect: () => onSelectRoutine == null ? void 0 : onSelectRoutine(w.id), children: w.name }, w.id)) }),
+          /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onManageRoutines, children: [
+            /* @__PURE__ */ jsx3(Icon, { name: "gear" }),
+            "Manage workflows"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-sm",
+            className: cn(
+              "ml-auto",
+              usePageAsContext && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
+            ),
+            onClick: onUsePageAsContext,
+            "aria-label": "Use page as context",
+            "aria-pressed": usePageAsContext,
+            children: /* @__PURE__ */ jsx3(Icon, { name: "expand" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(TooltipContent, { children: usePageAsContext ? "Using page as context" : "Use page as context" })
+      ] }),
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { variant: "ghost", size: "icon-sm", onClick: onAttach, "aria-label": "Attach image, file, or video", children: /* @__PURE__ */ jsx3(Icon, { name: "paperclip" }) }) }),
+        /* @__PURE__ */ jsx3(TooltipContent, { children: "Attach image, file, or video" })
+      ] }),
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { variant: "outline", size: "icon-sm", onClick: handleSend, "aria-label": "Send message", children: /* @__PURE__ */ jsx3(Icon, { name: "arrow-up" }) }) }),
+        /* @__PURE__ */ jsxs(TooltipContent, { children: [
+          "Send message",
+          /* @__PURE__ */ jsx3(Kbd, { children: "\u23CE" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function ChatThread({
+  messages,
+  onSend,
+  title,
+  subtitle,
+  placeholder,
+  suggestions,
+  assistantName,
+  userName,
+  routines,
+  onSelectRoutine,
+  onManageRoutines,
+  usePageAsContext,
+  onUsePageAsContext,
+  onAttach,
+  callout,
+  headerActions,
+  className,
+  isThinking
+}) {
+  return (
+    // `bg-muted/30` lives on the root so messages area and input area share
+    // the same backdrop — the input then floats on the muted bg instead of
+    // sitting in its own white-bordered footer container.
+    /* @__PURE__ */ jsxs("div", { className: cn("bg-muted/30 flex h-full flex-col", className), children: [
+      (title || headerActions) && /* @__PURE__ */ jsxs("div", { className: "bg-background flex shrink-0 items-center justify-between border-b px-6 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsx3("div", { className: "text-h4 truncate", children: title }),
+          subtitle && /* @__PURE__ */ jsx3("div", { className: "text-body-sm text-muted-foreground truncate", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+          title && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Session actions", children: /* @__PURE__ */ jsx3(Icon, { name: "ellipsis" }) }) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Pin" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Rename" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Share" }),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { children: "Archive" }),
+              /* @__PURE__ */ jsx3(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsx3(DropdownMenuItem, { variant: "destructive", children: "Delete" })
+            ] })
+          ] }),
+          headerActions
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3(MessageScrollerProvider, { autoScroll: true, defaultScrollPosition: "end", children: /* @__PURE__ */ jsxs(MessageScroller, { className: "min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx3(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, { className: "gap-4 px-6 py-4", children: [
+          callout,
+          messages.length === 0 && suggestions && suggestions.length > 0 ? (
+            // Starting state — shown when no messages yet AND suggestions
+            // are provided. Disappears the moment the user sends anything
+            // (either via the input or by clicking a suggestion card).
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 pt-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-h4", children: [
+                  "\u{1F44B} Hi, I'm ",
+                  assistantName != null ? assistantName : "your AI assistant"
+                ] }),
+                /* @__PURE__ */ jsx3("div", { className: "text-body-sm text-muted-foreground", children: "Pick a prompt to get started, or ask me anything." })
+              ] }),
+              /* @__PURE__ */ jsx3("div", { className: "flex flex-col items-start gap-2", children: suggestions.map((s, i) => /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: () => onSend == null ? void 0 : onSend(s),
+                  className: "text-body-sm h-auto max-w-full justify-start py-2 text-left whitespace-normal",
+                  children: s
+                },
+                i
+              )) })
+            ] })
+          ) : null,
+          messages.map((msg) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+            /* @__PURE__ */ jsx3(MessageScrollerItem, { messageId: msg.id, scrollAnchor: msg.role === "user", children: /* @__PURE__ */ jsx3(ChatMessageBubble, { message: msg, userName, assistantName }) }),
+            msg.role === "user" && msg.pageContext && /* @__PURE__ */ jsx3(MessageScrollerItem, { messageId: `${msg.id}-ctx`, children: /* @__PURE__ */ jsxs(Marker, { children: [
+              /* @__PURE__ */ jsx3(MarkerIcon, { children: /* @__PURE__ */ jsx3(Icon, { name: "expand" }) }),
+              /* @__PURE__ */ jsxs(MarkerContent, { children: [
+                "Sent with page context: ",
+                msg.pageContext
+              ] })
+            ] }) })
+          ] }, msg.id)),
+          isThinking && /* @__PURE__ */ jsx3(ChatThinkingIndicator, {})
+        ] }) }),
+        /* @__PURE__ */ jsx3(MessageScrollerButton, { direction: "end", children: /* @__PURE__ */ jsx3(Icon, { name: "arrow-down" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx3(
+        ChatInput,
+        {
+          onSend,
+          placeholder,
+          routines,
+          onSelectRoutine,
+          onManageRoutines,
+          usePageAsContext,
+          onUsePageAsContext,
+          onAttach
+        }
+      )
+    ] })
+  );
+}
+function ChatNavRail({ onNewSession, onOpenRoutines, onOpenConnectors, onOpenCustomize }) {
+  return /* @__PURE__ */ jsx3(SectionNav, { className: "border-b p-3", children: /* @__PURE__ */ jsxs(SectionNavList, { children: [
+    /* @__PURE__ */ jsxs(
+      SectionNavItem,
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onNewSession == null ? void 0 : onNewSession();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "plus" }),
+          "New session"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      SectionNavItem,
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onOpenRoutines == null ? void 0 : onOpenRoutines();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "bolt" }),
+          "Workflows"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      SectionNavItem,
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onOpenConnectors == null ? void 0 : onOpenConnectors();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "plug" }),
+          "Connectors"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      SectionNavItem,
+      {
+        href: "#",
+        onClick: (e) => {
+          e.preventDefault();
+          onOpenCustomize == null ? void 0 : onOpenCustomize();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "toolbox" }),
+          "Customize"
+        ]
+      }
+    )
+  ] }) });
+}
+function ChatInterface(_a) {
+  var _b = _a, {
+    sessions,
+    activeSessionId,
+    onSelectSession,
+    onNewSession,
+    onOpenRoutines,
+    onOpenConnectors,
+    onOpenCustomize,
+    className
+  } = _b, threadProps = __objRest(_b, [
+    "sessions",
+    "activeSessionId",
+    "onSelectSession",
+    "onNewSession",
+    "onOpenRoutines",
+    "onOpenConnectors",
+    "onOpenCustomize",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-background flex w-72 shrink-0 flex-col border-r", children: [
+      /* @__PURE__ */ jsx3(
+        ChatNavRail,
+        {
+          onNewSession,
+          onOpenRoutines,
+          onOpenConnectors,
+          onOpenCustomize
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        ChatSessionList,
+        {
+          sessions,
+          activeSessionId,
+          onSelectSession: onSelectSession != null ? onSelectSession : (() => {
+          }),
+          className: "flex-1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(ChatThread, __spreadProps(__spreadValues({}, threadProps), { className: "flex-1" }))
+  ] });
+}
+export {
+  ChatInput,
+  ChatInterface,
+  ChatMessageBubble,
+  ChatSessionList,
+  ChatThread
+};
+//# sourceMappingURL=chat-interface.js.map