@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.713

package/dist/chunk-KBJJQFYU.js

@@ -0,0 +1,1122 @@
+"use client";
+import {
+  AvatarStack,
+  resolveIcon
+} from "./chunk-JHQ334WS.js";
+import {
+  Tag,
+  VIEWER_TIMEZONE,
+  formatDateWithTimezone
+} from "./chunk-IYVFSLWJ.js";
+import {
+  ViewportBreakpoints
+} from "./chunk-KEKCQENI.js";
+import {
+  Send01Icon,
+  StopCircleIcon,
+  XmarkIcon
+} from "./chunk-NCPTID44.js";
+import {
+  Button
+} from "./chunk-YDPKUAP4.js";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/components/ui/modal-v2.tsx
+import { createContext, forwardRef, useContext, useRef, useEffect, useState } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ANIMATION_DURATION = 200;
+var ModalContext = createContext({});
+var MODAL_V2_SIZE_CLASSES = {
+  default: "max-w-[min(28rem,calc(100vw-2rem))]",
+  medium: "max-w-[min(42rem,calc(100vw-2rem))]",
+  wide: "max-w-[min(1400px,calc(100vw-2rem))]"
+};
+var modalStack = [];
+var isInPortaledLayer = (node) => node instanceof Element && node.closest('[data-radix-popper-content-wrapper], [role="listbox"], [role="menu"]') !== null;
+var Modal = forwardRef(
+  ({ isOpen, onClose, children, className, size = "default" }, ref) => {
+    const [isMounted, setIsMounted] = useState(isOpen);
+    const panelRef = useRef(null);
+    const restoreFocusRef = useRef(null);
+    const stackIdRef = useRef(/* @__PURE__ */ Symbol("modal"));
+    useEffect(() => {
+      if (!isOpen) return void 0;
+      const stackId = stackIdRef.current;
+      modalStack.push(stackId);
+      restoreFocusRef.current = document.activeElement;
+      const raf = requestAnimationFrame(() => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        if (panel.contains(document.activeElement)) return;
+        panel.focus();
+      });
+      const containFocus = (event) => {
+        if (modalStack[modalStack.length - 1] !== stackId) return;
+        const panel = panelRef.current;
+        if (!panel) return;
+        const target = event.target;
+        if (target && (panel.contains(target) || isInPortaledLayer(target))) return;
+        panel.focus();
+      };
+      document.addEventListener("focusin", containFocus);
+      const reasserts = [80, 240, 500].map(
+        (ms) => setTimeout(() => {
+          if (modalStack[modalStack.length - 1] !== stackId) return;
+          const panel = panelRef.current;
+          if (!panel) return;
+          if (!panel.contains(document.activeElement) && !isInPortaledLayer(document.activeElement)) panel.focus();
+        }, ms)
+      );
+      return () => {
+        cancelAnimationFrame(raf);
+        reasserts.forEach(clearTimeout);
+        document.removeEventListener("focusin", containFocus);
+        const idx = modalStack.lastIndexOf(stackId);
+        if (idx !== -1) modalStack.splice(idx, 1);
+        restoreFocusRef.current?.focus?.();
+      };
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return void 0;
+      const handleTab = (event) => {
+        if (event.key !== "Tab") return;
+        const panel = panelRef.current;
+        if (!panel) return;
+        if (isInPortaledLayer(document.activeElement)) return;
+        const focusables = Array.from(
+          panel.querySelectorAll(
+            'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+          )
+        ).filter((el) => el.getAttribute("aria-hidden") !== "true" && el.offsetParent !== null);
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey) {
+          if (active === first || !panel.contains(active)) {
+            event.preventDefault();
+            last.focus();
+          }
+        } else if (active === last || !panel.contains(active)) {
+          event.preventDefault();
+          first.focus();
+        }
+      };
+      document.addEventListener("keydown", handleTab);
+      return () => document.removeEventListener("keydown", handleTab);
+    }, [isOpen]);
+    useEffect(() => {
+      if (isOpen) {
+        setIsMounted(true);
+        return void 0;
+      }
+      const timeout = setTimeout(() => setIsMounted(false), ANIMATION_DURATION);
+      return () => clearTimeout(timeout);
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return void 0;
+      const handleKeyDown = (event) => {
+        if (event.key === "Escape" && !event.defaultPrevented && modalStack[modalStack.length - 1] === stackIdRef.current) {
+          onClose();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+    if (!isMounted) return null;
+    const state = isOpen ? "open" : "closed";
+    return (
+      // `forwardProps` — RemoveScroll's default is to WRAP its children in a
+      // plain <div>. That wrapper is in normal flow, so a modal rendered inside
+      // a `flex`/`grid` container with a `gap` became an extra (zero-height)
+      // track the moment it opened, shifting every sibling below it down by one
+      // gap. Cloning onto the child instead leaves only the `fixed` overlay,
+      // which is out of flow and therefore not a flex/grid item at all.
+      // The child must stay a single element for `Children.only`.
+      /* @__PURE__ */ jsx(RemoveScroll, { enabled: isOpen, removeScrollBar: false, forwardProps: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "ods-viewport-layer fixed inset-0 z-[1300] flex items-end justify-center transition-[padding] duration-200 md:items-center",
+          style: { paddingBottom: "var(--of-keyboard-inset, 0px)" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-state": state,
+                className: cn(
+                  "absolute inset-0 bg-ods-overlay backdrop-blur-[2px] md:backdrop-blur-none",
+                  "duration-200 fill-mode-forwards",
+                  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                  // Hold the hidden end-state until unmount so the backdrop doesn't
+                  // flash back to full opacity when the animation finishes a frame
+                  // before the unmount timeout fires.
+                  "data-[state=closed]:fill-mode-forwards"
+                ),
+                onClick: onClose,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (node) => {
+                  panelRef.current = node;
+                  if (typeof ref === "function") ref(node);
+                  else if (ref) ref.current = node;
+                },
+                tabIndex: -1,
+                "data-state": state,
+                className: cn(
+                  // A single base utility per size (not md:max-w-*) so consumer
+                  // max-w-* overrides via className still win at every breakpoint.
+                  "relative z-10 flex w-full min-w-0 flex-col",
+                  // The panel is a focus TARGET (tabIndex -1), not a control: focus
+                  // moves here on open so the dialog owns the keyboard, and the UA
+                  // then paints its default ring around the whole modal. Opening by
+                  // click hides it via :focus-visible heuristics, but a modal opened
+                  // from a URL on page load has no preceding pointer event, so the
+                  // ring showed on every refresh. Fields inside keep their own rings.
+                  "outline-none",
+                  MODAL_V2_SIZE_CLASSES[size],
+                  "mx-4 mb-4 md:mb-0",
+                  // dvh, not vh: vh ignores a mobile browser's retracting URL bar, so
+                  // 90vh already overflowed behind Safari's toolbar. The `100%-2rem`
+                  // arm resolves against the keyboard-padded wrapper above and caps
+                  // the panel to what's left of it, less the 1rem `mb-4` and a
+                  // matching 1rem of breathing room at the top — header and footer
+                  // stay pinned, ModalV2Content scrolls. min() picks 90dvh on any
+                  // viewport over 320px tall, so desktop is untouched.
+                  "max-h-[min(90dvh,100%-2rem)]",
+                  // `wide` also FIXES the desktop height rather than only capping it:
+                  // its columns scroll independently, and a height that tracks
+                  // content makes the panel jump as an entity hydrates in. Mobile
+                  // keeps the bottom-sheet's content-sized height.
+                  size === "wide" && "md:h-[min(90dvh,100%-2rem)]",
+                  "bg-ods-bg md:bg-ods-card",
+                  "rounded-md border border-ods-border shadow-xl",
+                  "gap-[var(--spacing-system-l)] p-[var(--spacing-system-xl)]",
+                  "duration-200 fill-mode-forwards",
+                  "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                  "data-[state=open]:slide-in-from-bottom-4 md:data-[state=open]:zoom-in-95 md:data-[state=open]:slide-in-from-bottom-0",
+                  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                  "data-[state=closed]:slide-out-to-bottom-4 md:data-[state=closed]:zoom-out-95 md:data-[state=closed]:slide-out-to-bottom-0",
+                  // Hold the hidden end-state until unmount so the panel doesn't snap
+                  // back to opacity/scale 1 for a frame before it unmounts.
+                  "data-[state=closed]:fill-mode-forwards",
+                  className
+                ),
+                role: "dialog",
+                "aria-modal": "true",
+                children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx(ViewportBreakpoints, { children }) })
+              }
+            )
+          ]
+        }
+      ) })
+    );
+  }
+);
+Modal.displayName = "ModalV2";
+var ModalContent = forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("min-h-0 flex-1 overflow-y-auto", className), children }));
+ModalContent.displayName = "ModalV2Content";
+var ModalTwoColumn = forwardRef(({ left, right, className }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("min-h-0 flex-1 overflow-y-auto lg:overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:h-full lg:min-h-0 lg:grid-cols-2 lg:grid-rows-[minmax(0,1fr)]", children: [
+  /* @__PURE__ */ jsx("div", { className: "min-h-0 space-y-[var(--spacing-system-lf)] lg:overflow-y-auto lg:pr-[var(--spacing-system-sf)]", children: left }),
+  /* @__PURE__ */ jsx("div", { className: "min-h-0 space-y-[var(--spacing-system-lf)] lg:overflow-y-auto lg:pr-[var(--spacing-system-sf)]", children: right })
+] }) }));
+ModalTwoColumn.displayName = "ModalV2TwoColumn";
+var ModalHeader = forwardRef(({ children, className }, ref) => {
+  const { onClose } = useContext(ModalContext);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center gap-[var(--spacing-system-sf)]", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children }),
+    onClose && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "hidden shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary md:flex",
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx(XmarkIcon, { className: "size-6" })
+      }
+    )
+  ] });
+});
+ModalHeader.displayName = "ModalV2Header";
+var ModalTitle = forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: cn("text-ods-text-primary text-h2", className), children }));
+ModalTitle.displayName = "ModalV2Title";
+var ModalFooter = forwardRef(({ children, className }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex gap-4", className), children }));
+ModalFooter.displayName = "ModalV2Footer";
+
+// src/components/chat/types/chat.types.ts
+var CHAT_TYPE = {
+  CLIENT: "CLIENT_CHAT",
+  ADMIN: "ADMIN_AI_CHAT"
+};
+var OWNER_TYPE = {
+  CLIENT: "CLIENT",
+  ADMIN: "ADMIN",
+  ASSISTANT: "ASSISTANT"
+};
+var MESSAGE_ROLE = {
+  USER: "user",
+  ASSISTANT: "assistant",
+  ERROR: "error",
+  SYSTEM: "system"
+};
+var ASSISTANT_TYPE = {
+  FAE: "fae",
+  MINGO: "mingo"
+};
+var AUTHOR_TYPE = {
+  USER: "user",
+  ADMIN: "admin",
+  FAE: "fae",
+  MINGO: "mingo",
+  SYSTEM: "system"
+};
+var APPROVAL_STATUS = {
+  PENDING: "pending",
+  APPROVED: "approved",
+  REJECTED: "rejected",
+  CANCELLED: "cancelled"
+};
+var APPROVAL_BLOCK_VARIANT = {
+  ADMIN: "admin",
+  CLIENT: "client"
+};
+var CHAT_APPEARANCE = {
+  CLASSIC: "classic",
+  V2: "v2"
+};
+var CONNECTION_STATUS = {
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  DISCONNECTED: "disconnected",
+  RECONNECTING: "reconnecting",
+  CLOSED: "closed",
+  ERROR: "error"
+};
+function isStructuredContent(content) {
+  return Array.isArray(content);
+}
+function normalizeContent(content) {
+  if (typeof content === "string") {
+    return content ? [{ type: "text", text: content }] : [];
+  }
+  return content;
+}
+
+// src/components/chat/chat-typing-indicator.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChatTypingIndicator = forwardRef2(
+  ({ className, size = "md", showText = false, dotClassName, ...props }, ref) => {
+    const dotSizeClasses = {
+      sm: "w-1 h-1",
+      md: "w-1.5 h-1.5",
+      lg: "w-2 h-2"
+    };
+    const containerSizeClasses = {
+      sm: "h-4",
+      md: "h-6",
+      lg: "h-8"
+    };
+    return /* @__PURE__ */ jsxs2("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: [
+      showText && /* @__PURE__ */ jsx2("span", { className: "text-ods-text-secondary text-h6", children: "Assistant is typing" }),
+      /* @__PURE__ */ jsxs2("div", { className: cn("inline-flex items-center justify-center gap-1", containerSizeClasses[size]), children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              dotSizeClasses[size],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "0ms" }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              dotSizeClasses[size],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "200ms" }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              dotSizeClasses[size],
+              "animate-dot-pulse rounded-full",
+              dotClassName || "bg-ods-text-primary"
+            ),
+            style: { animationDelay: "400ms" }
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ChatTypingIndicator.displayName = "ChatTypingIndicator";
+
+// src/components/chat/mingo-onboarding-card.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MingoOnboardingCard({
+  icon,
+  title,
+  slashCommand,
+  description,
+  actions,
+  onClick,
+  className
+}) {
+  const hasActions = !!actions && actions.length > 0;
+  const isInteractive = !hasActions && !!onClick;
+  const body = /* @__PURE__ */ jsxs3("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xxs)]", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex w-full items-center gap-[var(--spacing-system-xxs)]", children: [
+      icon ? (
+        // Icon slot — monochrome `ods-text-secondary` (≈ #888) so
+        // consumers can drop any `icons-v2-generated` glyph (they use
+        // `currentColor`) without per-card styling. Brand multi-color
+        // SVGs ignore this color.
+        /* @__PURE__ */ jsx3("span", { className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary", children: icon })
+      ) : null,
+      /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h6", children: title }),
+      slashCommand ? /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap text-ods-text-secondary text-h6", children: slashCommand }) : null
+    ] }),
+    description ? /* @__PURE__ */ jsx3("p", { className: "w-full text-ods-text-secondary text-h6", children: description }) : null,
+    hasActions ? /* @__PURE__ */ jsx3("div", { className: "mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]", children: actions.map((action) => /* @__PURE__ */ jsx3(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "small",
+        onClick: (e) => {
+          e.stopPropagation();
+          action.onClick(e);
+        },
+        children: action.label
+      },
+      action.id
+    )) }) : null
+  ] });
+  const baseClass = cn(
+    "flex w-full items-start border-b border-ods-border bg-ods-card p-[var(--spacing-system-s)] text-left last:border-b-0",
+    isInteractive && "cursor-pointer transition-colors hover:bg-ods-bg-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent",
+    className
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx3("button", { type: "button", onClick, className: baseClass, children: body });
+  }
+  return /* @__PURE__ */ jsx3("div", { className: baseClass, children: body });
+}
+
+// src/components/chat/slash-command-suggestions.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SlashCommandSuggestions({
+  commands,
+  highlightedIdx,
+  onHover,
+  onSelect,
+  resolveSourceIcon,
+  onAction,
+  className
+}) {
+  if (commands.length === 0) return null;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "menu",
+      "aria-label": "Slash command suggestions",
+      className: cn(
+        "absolute bottom-full left-0 right-0 z-50 mb-2 max-h-96 overflow-y-auto overscroll-contain",
+        "rounded-md border border-ods-border bg-ods-card shadow-lg",
+        className
+      ),
+      children: commands.map((cmd, idx) => {
+        const Icon = resolveIcon(cmd.iconName);
+        const legacyMeta = !cmd.iconName && cmd.primarySourceId && resolveSourceIcon ? resolveSourceIcon(cmd.primarySourceId) : void 0;
+        const LegacyIcon = legacyMeta?.Icon;
+        const title = cmd.label ?? legacyMeta?.label ?? cmd.id;
+        const isHighlighted = idx === highlightedIdx;
+        const slashLabel = cmd.argumentHint ? `/${cmd.id} ${cmd.argumentHint}` : `/${cmd.id}`;
+        const cardActions = onAction && cmd.actions.length > 0 ? cmd.actions.map((action) => ({
+          id: action.id,
+          label: action.label,
+          onClick: (e) => {
+            e.stopPropagation();
+            onAction(cmd, action.id);
+          }
+        })) : void 0;
+        return /* @__PURE__ */ jsx4(
+          "div",
+          {
+            role: "menuitem",
+            "aria-current": isHighlighted ? "true" : void 0,
+            tabIndex: -1,
+            onMouseEnter: () => onHover(idx),
+            onClick: () => onSelect(cmd),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(cmd);
+              }
+            },
+            className: "cursor-pointer outline-none",
+            children: /* @__PURE__ */ jsx4(
+              MingoOnboardingCard,
+              {
+                icon: LegacyIcon ? /* @__PURE__ */ jsx4(LegacyIcon, { className: "size-4" }) : /* @__PURE__ */ jsx4(Icon, { size: 16 }),
+                title,
+                slashCommand: slashLabel,
+                description: cmd.description,
+                actions: cardActions,
+                className: cn("transition-colors", isHighlighted && "bg-ods-bg-hover")
+              }
+            )
+          },
+          cmd.id
+        );
+      })
+    }
+  );
+}
+
+// src/components/chat/chat-input.tsx
+import {
+  useState as useState2,
+  useRef as useRef2,
+  useImperativeHandle,
+  forwardRef as forwardRef3,
+  useCallback,
+  useEffect as useEffect2,
+  useMemo
+} from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SLASH_INPUT_TRIGGER = /^\/([a-z][a-z0-9-]*)?$/;
+var MENTION_GLOBAL = /@[A-Za-z0-9_.+/=-]+:[A-Za-z0-9_.+/=-]+/g;
+var MENTION_TRIGGER_AT_END = /(^|\s)@([\w.-]*)$/;
+function parseSegments(value, meta) {
+  const segs = [];
+  let last = 0;
+  MENTION_GLOBAL.lastIndex = 0;
+  let m;
+  while ((m = MENTION_GLOBAL.exec(value)) !== null) {
+    if (m.index > last) segs.push({ kind: "text", text: value.slice(last, m.index) });
+    const token = m[0].slice(1);
+    const info = meta.get(token);
+    segs.push({ kind: "mention", token, label: info?.label ?? token.slice(token.indexOf(":") + 1), icon: info?.icon });
+    last = m.index + m[0].length;
+  }
+  if (last < value.length) segs.push({ kind: "text", text: value.slice(last) });
+  return segs;
+}
+var isChip = (n) => n.nodeType === 1 && n.dataset?.token !== void 0;
+function serialize(el) {
+  let out = "";
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) out += node.textContent ?? "";
+    else if (isChip(node)) out += `@${node.dataset.token}`;
+    else if (node.tagName === "BR") continue;
+    else out += node.textContent ?? "";
+  }
+  return out;
+}
+function buildChipEl(token, label, icon) {
+  const span = document.createElement("span");
+  span.dataset.token = token;
+  span.setAttribute("contenteditable", "false");
+  span.className = "mx-0.5 inline-flex h-9 items-center select-none align-top";
+  span.innerHTML = renderToStaticMarkup(
+    /* @__PURE__ */ jsx5(
+      Tag,
+      {
+        as: "span",
+        variant: "badge",
+        icon,
+        label,
+        onClose: () => {
+        },
+        className: "max-w-[16rem] hover:border-ods-border [&_svg]:text-ods-text-secondary"
+      }
+    )
+  );
+  return span;
+}
+function rebuildDom(el, value, meta) {
+  el.replaceChildren();
+  for (const seg of parseSegments(value, meta)) {
+    if (seg.kind === "text") el.appendChild(document.createTextNode(seg.text));
+    else el.appendChild(buildChipEl(seg.token, seg.label, seg.icon));
+  }
+}
+function placeCaretAtEnd(el) {
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (!sel) return;
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+function placeCaretAtOffset(el, offset) {
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (!sel) return;
+  const node = el.firstChild;
+  const range = document.createRange();
+  if (node && node.nodeType === Node.TEXT_NODE) {
+    range.setStart(node, Math.max(0, Math.min(offset, node.textContent?.length ?? 0)));
+    range.collapse(true);
+  } else {
+    range.selectNodeContents(el);
+    range.collapse(false);
+  }
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+function insertTextAtCaret(text) {
+  const sel = typeof window !== "undefined" ? window.getSelection() : null;
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  range.deleteContents();
+  const tn = document.createTextNode(text);
+  range.insertNode(tn);
+  range.setStartAfter(tn);
+  range.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+var ChatInput = forwardRef3((allProps, ref) => {
+  const { slashCommands, ...rest } = allProps;
+  const {
+    className,
+    onSend,
+    onStop,
+    sending = false,
+    awaitingResponse = false,
+    awaitingTeam,
+    awaitingTeamCount,
+    appearance = CHAT_APPEARANCE.CLASSIC,
+    placeholder = "Enter your Request...",
+    reserveAvatarOffset: _reserveAvatarOffset,
+    disabled = false,
+    disabledPlaceholder = "Connection lost. Waiting to reconnect...",
+    autoFocus = false,
+    fullWidth = false,
+    allowEmptySend = false,
+    onMentionQueryChange,
+    onValueChange,
+    startIcon,
+    hideBorder,
+    previewText
+    // Remaining textarea-only attrs are intentionally dropped — the editor is a
+    // contenteditable div, not a <textarea>, so spreading them would warn.
+  } = rest;
+  const [value, setValue] = useState2("");
+  const [hasChips, setHasChips] = useState2(false);
+  const [focused, setFocused] = useState2(false);
+  const [isStopping, setIsStopping] = useState2(false);
+  const [previewDismissed, setPreviewDismissed] = useState2(false);
+  const editorRef = useRef2(null);
+  const shouldRefocusRef = useRef2(false);
+  const prevSendingRef = useRef2(sending);
+  const prevAwaitingResponseRef = useRef2(awaitingResponse);
+  const isComposingRef = useRef2(false);
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  const metaRef = useRef2(/* @__PURE__ */ new Map());
+  const focusEditor = useCallback(() => {
+    if (disabled) return;
+    editorRef.current?.focus({ preventScroll: true });
+  }, [disabled]);
+  useEffect2(() => {
+    if (autoFocus) focusEditor();
+  }, [autoFocus, focusEditor]);
+  useEffect2(() => {
+    onValueChange?.(value);
+  }, [value, onValueChange]);
+  const previewTextRef = useRef2(previewText);
+  useEffect2(() => {
+    previewTextRef.current = previewText;
+  });
+  useEffect2(() => {
+    setPreviewDismissed(false);
+  }, [previewText]);
+  useEffect2(() => {
+    if (previewTextRef.current) setPreviewDismissed(true);
+  }, [value]);
+  const applyValue = useCallback((next, caret = "end") => {
+    const el = editorRef.current;
+    if (el) {
+      rebuildDom(el, next, metaRef.current);
+      if (document.activeElement === el || caret === "end") {
+        if (typeof caret === "number") placeCaretAtOffset(el, caret);
+        else placeCaretAtEnd(el);
+      }
+      setHasChips(el.querySelector("[data-token]") !== null);
+    }
+    valueRef.current = next;
+    setValue(next);
+  }, []);
+  const fire = useCallback(
+    (message) => {
+      const can = (message.length > 0 || allowEmptySend) && !sending && !disabled;
+      if (!can || !onSend) return;
+      const sentMeta = metaRef.current;
+      metaRef.current = /* @__PURE__ */ new Map();
+      applyValue("");
+      shouldRefocusRef.current = true;
+      focusEditor();
+      const restore = () => {
+        if (valueRef.current.length > 0) return;
+        metaRef.current = sentMeta;
+        applyValue(message);
+      };
+      const result = onSend(message);
+      if (result instanceof Promise) {
+        void result.then((ok) => {
+          if (ok === false) restore();
+        });
+      } else if (result === false) {
+        restore();
+      }
+    },
+    [allowEmptySend, sending, disabled, onSend, focusEditor, applyValue]
+  );
+  const handleSubmit = useCallback(() => {
+    fire(valueRef.current.trim());
+  }, [fire]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => focusEditor(),
+      blur: () => editorRef.current?.blur(),
+      clear: () => {
+        metaRef.current = /* @__PURE__ */ new Map();
+        applyValue("");
+      },
+      setValue: (next) => {
+        applyValue(next);
+        requestAnimationFrame(() => focusEditor());
+      },
+      setValueAndCursor: (next, cursorOffset) => {
+        applyValue(next, Math.max(0, Math.min(cursorOffset, next.length)));
+        requestAnimationFrame(() => focusEditor());
+      },
+      submit: (next) => fire(next.trim()),
+      getValue: () => valueRef.current,
+      removeMentionTrigger: () => {
+        applyValue(valueRef.current.replace(MENTION_TRIGGER_AT_END, "$1"));
+      },
+      commitMention: (token, meta) => {
+        if (meta) metaRef.current = new Map(metaRef.current).set(token, meta);
+        const v = valueRef.current;
+        const next = MENTION_TRIGGER_AT_END.test(v) ? v.replace(MENTION_TRIGGER_AT_END, `$1@${token} `) : `${v}${v.length > 0 && !v.endsWith(" ") ? " " : ""}@${token} `;
+        applyValue(next);
+        requestAnimationFrame(() => focusEditor());
+      }
+    }),
+    [focusEditor, fire, applyValue]
+  );
+  const mentionEnabled = !!onMentionQueryChange;
+  const mentionQuery = useMemo(() => {
+    if (!mentionEnabled) return null;
+    const m = value.match(MENTION_TRIGGER_AT_END);
+    return m ? m[2] ?? "" : null;
+  }, [value, mentionEnabled]);
+  useEffect2(() => {
+    if (mentionEnabled) onMentionQueryChange?.(mentionQuery);
+  }, [mentionEnabled, mentionQuery, onMentionQueryChange]);
+  const slashMatch = useMemo(() => slashCommands ? value.match(SLASH_INPUT_TRIGGER) : null, [value, slashCommands]);
+  const slashPrefix = slashMatch ? slashMatch[1] ?? "" : null;
+  const [slashSuggestions, setSlashSuggestions] = useState2([]);
+  const [highlightedIdx, setHighlightedIdx] = useState2(0);
+  useEffect2(() => {
+    if (slashPrefix == null || !slashCommands) {
+      setSlashSuggestions([]);
+      return void 0;
+    }
+    let cancelled = false;
+    const ctrl = new AbortController();
+    const runFetch = async () => {
+      try {
+        const next = await slashCommands.fetchCommands(slashPrefix, ctrl.signal);
+        if (!cancelled) {
+          setSlashSuggestions(next);
+          setHighlightedIdx(0);
+        }
+      } catch (err) {
+        if (!cancelled && err?.name !== "AbortError") {
+          console.warn("[chat-input] slash-command fetch failed:", err);
+        }
+      }
+    };
+    const handle = setTimeout(() => {
+      runFetch().catch((err) => {
+        console.warn("[chat-input] slash-command fetch threw unexpectedly:", err);
+      });
+    }, 150);
+    return () => {
+      cancelled = true;
+      ctrl.abort();
+      clearTimeout(handle);
+    };
+  }, [slashPrefix, slashCommands]);
+  const acceptSuggestion = useCallback(
+    (cmd) => {
+      metaRef.current = /* @__PURE__ */ new Map();
+      const next = `/${cmd.id} `;
+      applyValue(next, next.length);
+      setSlashSuggestions([]);
+      requestAnimationFrame(() => focusEditor());
+    },
+    [applyValue, focusEditor]
+  );
+  const syncFromDom = useCallback(() => {
+    const el = editorRef.current;
+    if (!el) return;
+    setHasChips(el.querySelector("[data-token]") !== null);
+    setValue(serialize(el));
+  }, []);
+  const handleInput = useCallback(() => {
+    if (isComposingRef.current) return;
+    syncFromDom();
+  }, [syncFromDom]);
+  const handlePaste = useCallback(
+    (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain");
+      if (!text) return;
+      insertTextAtCaret(text);
+      syncFromDom();
+    },
+    [syncFromDom]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (slashSuggestions.length > 0 && slashPrefix !== null) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          setSlashSuggestions([]);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setHighlightedIdx((i) => (i + 1) % slashSuggestions.length);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setHighlightedIdx((i) => (i - 1 + slashSuggestions.length) % slashSuggestions.length);
+          return;
+        }
+        if (e.key === "Tab" || e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          const sel = slashSuggestions[highlightedIdx];
+          if (sel) acceptSuggestion(sel);
+          return;
+        }
+      }
+      if (mentionQuery !== null) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          applyValue(valueRef.current.replace(MENTION_TRIGGER_AT_END, "$1"));
+          return;
+        }
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          return;
+        }
+      }
+      if (e.key === "Enter") {
+        if (e.shiftKey) {
+          e.preventDefault();
+          insertTextAtCaret("\n");
+          syncFromDom();
+        } else {
+          e.preventDefault();
+          handleSubmit();
+        }
+      }
+    },
+    [
+      slashSuggestions,
+      slashPrefix,
+      highlightedIdx,
+      acceptSuggestion,
+      handleSubmit,
+      mentionQuery,
+      applyValue,
+      syncFromDom
+    ]
+  );
+  const handleEditorMouseDown = useCallback(
+    (e) => {
+      const target = e.target;
+      const chip = target.closest("[data-token]");
+      if (!chip || !target.closest("button")) return;
+      e.preventDefault();
+      const token = chip.dataset.token ?? "";
+      const next = valueRef.current.replace(`@${token} `, "").replace(`@${token}`, "").replace(/[^\S\n]{2,}/g, " ").replace(/^[^\S\n]+/, "");
+      applyValue(next);
+      requestAnimationFrame(() => focusEditor());
+    },
+    [applyValue, focusEditor]
+  );
+  useEffect2(() => {
+    if (!sending) setIsStopping(false);
+  }, [sending]);
+  useEffect2(() => {
+    const wasSending = prevSendingRef.current;
+    prevSendingRef.current = sending;
+    if (wasSending && !sending && shouldRefocusRef.current && !awaitingResponse && !disabled) {
+      shouldRefocusRef.current = false;
+      focusEditor();
+    }
+  }, [sending, awaitingResponse, disabled, focusEditor]);
+  useEffect2(() => {
+    const wasAwaiting = prevAwaitingResponseRef.current;
+    prevAwaitingResponseRef.current = awaitingResponse;
+    if (!wasAwaiting || awaitingResponse || !shouldRefocusRef.current || disabled) return void 0;
+    shouldRefocusRef.current = false;
+    const id = requestAnimationFrame(() => focusEditor());
+    return () => cancelAnimationFrame(id);
+  }, [awaitingResponse, disabled, focusEditor]);
+  const handleStop = useCallback(async () => {
+    if (!onStop || isStopping) return;
+    setIsStopping(true);
+    try {
+      await onStop();
+    } catch {
+      setIsStopping(false);
+    }
+  }, [onStop, isStopping]);
+  const isStopMode = sending && !!onStop;
+  const hasContent = value.trim().length > 0 || allowEmptySend;
+  const sendDisabled = sending || disabled || !hasContent;
+  const isEmpty = value.length === 0;
+  const showPreview = !sending && !disabled && !!previewText && !previewDismissed;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        fullWidth ? "w-full flex-shrink-0" : "mx-auto w-full max-w-ods-content-narrow flex-shrink-0",
+        className
+      ),
+      children: awaitingResponse && appearance === CHAT_APPEARANCE.CLASSIC ? /* @__PURE__ */ jsxs4("div", { className: "relative flex items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] transition-colors", children: [
+        /* @__PURE__ */ jsx5(ChatTypingIndicator, { size: "sm", dotClassName: "bg-ods-text-primary" }),
+        /* @__PURE__ */ jsx5("p", { className: "text-ods-text-secondary text-h4", children: "Waiting for Technician Response" })
+      ] }) : awaitingResponse ? (
+        // Hand-off bar (fae chat v2): who has the conversation now, and that a
+        // reply is on its way. Same 48px height as the editor row it replaces,
+        // so the thread above does not jump when the chat is handed off.
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            role: "status",
+            className: "flex min-h-11 w-full items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] md:min-h-12",
+            children: [
+              awaitingTeam && awaitingTeam.length > 0 && /* @__PURE__ */ jsx5(
+                AvatarStack,
+                {
+                  people: awaitingTeam,
+                  total: awaitingTeamCount,
+                  size: "xs",
+                  ringClassName: "ring-ods-bg",
+                  label: "Technicians"
+                }
+              ),
+              /* @__PURE__ */ jsx5("p", { className: "min-w-0 truncate text-ods-text-primary text-h4", children: "Handed off to your technical support team" }),
+              /* @__PURE__ */ jsx5(ChatTypingIndicator, { size: "sm", dotClassName: "bg-ods-text-secondary" })
+            ]
+          }
+        )
+      ) : /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx5(
+          SlashCommandSuggestions,
+          {
+            commands: slashPrefix !== null ? slashSuggestions : [],
+            highlightedIdx,
+            onHover: setHighlightedIdx,
+            onSelect: acceptSuggestion,
+            resolveSourceIcon: slashCommands?.resolveSourceIcon,
+            onAction: slashCommands?.onAction
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            onMouseDown: (e) => {
+              if (e.target === e.currentTarget) {
+                e.preventDefault();
+                focusEditor();
+              }
+            },
+            className: cn(
+              // `items-center` keeps the empty single-line text AND a mention chip
+              // vertically centered the same way. With a chip in the box, `py-1.5`
+              // (6px) pairs with the editor's `leading-9` (36px) → that row is
+              // 36 + 2*6 = 48px. The 36px line box is just barely above the 32px
+              // chip (incl. its ~3.5px vertical-align overhead), so there's almost
+              // no slack for the chip to drift in → it reads as centered.
+              // A chipless row is shorter than its content box and the `min-h-*`
+              // here is what sets its height: 48px from `md` up, 44px below.
+              "group flex min-h-11 w-full cursor-text items-center gap-2 px-3 py-1.5 transition-colors duration-200 md:min-h-12",
+              !hideBorder && "rounded-[6px] border border-ods-border bg-ods-card",
+              !hideBorder && (focused ? "border-ods-accent" : !disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover"),
+              !hideBorder && disabled && "!cursor-not-allowed bg-ods-bg",
+              hideBorder && "bg-transparent"
+            ),
+            children: [
+              startIcon && /* @__PURE__ */ jsx5("span", { className: "flex h-6 shrink-0 items-center", children: startIcon }),
+              /* @__PURE__ */ jsxs4("div", { className: "relative min-w-0 flex-1", children: [
+                isEmpty && !showPreview && /* @__PURE__ */ jsx5(
+                  "span",
+                  {
+                    "data-editor-ghost": true,
+                    className: cn(
+                      // One line, clipped with an ellipsis (Figma 954:28455): the
+                      // disabled copy is a sentence, and the panel's narrowest
+                      // width does not fit it — wrapped, it ran under the row.
+                      "pointer-events-none absolute left-0 top-0 w-full select-none truncate text-h4",
+                      // Disabled reads as disabled (Figma 954:28455): the copy says
+                      // why, and the colour says it is not an invitation to type.
+                      disabled ? "text-ods-text-disabled" : "text-ods-text-secondary"
+                    ),
+                    children: disabled ? disabledPlaceholder : placeholder
+                  }
+                ),
+                showPreview && /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    "data-editor-ghost": true,
+                    className: cn(
+                      "pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-ods-text-secondary text-h4",
+                      hasChips && "!leading-9"
+                    ),
+                    children: previewText
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "div",
+                  {
+                    ref: editorRef,
+                    "data-editor": true,
+                    role: "textbox",
+                    "aria-multiline": "true",
+                    "aria-label": disabled ? disabledPlaceholder : typeof placeholder === "string" ? placeholder : "Message",
+                    contentEditable: !disabled,
+                    suppressContentEditableWarning: true,
+                    spellCheck: true,
+                    onInput: handleInput,
+                    onKeyDown: handleKeyDown,
+                    onPaste: handlePaste,
+                    onMouseDown: handleEditorMouseDown,
+                    onCompositionStart: () => {
+                      isComposingRef.current = true;
+                    },
+                    onCompositionEnd: () => {
+                      isComposingRef.current = false;
+                      syncFromDom();
+                    },
+                    onFocus: () => setFocused(true),
+                    onBlur: () => setFocused(false),
+                    className: cn(
+                      "max-h-[160px] overflow-y-auto overscroll-contain whitespace-pre-wrap break-words outline-none",
+                      // While a ghost preview shows, the editor stays IN FLOW (it
+                      // alone drives the row height, which must NOT change on hover —
+                      // see the preview comment above) and is only made transparent;
+                      // the absolutely-positioned single-line preview paints over it.
+                      showPreview && "opacity-0",
+                      // WITH chips, `leading-9` (36px) sits just above the 32px chip's
+                      // line-box need (~35.5px incl. vertical-align overhead): the LINE
+                      // drives row height (deterministic 48px, no overflow) AND the
+                      // near-zero slack keeps the chip centered against the `align-top`
+                      // `h-9` wrapper `buildChipEl` gives it. ~4px gap between wrapped
+                      // chip rows.
+                      // WITHOUT chips there is nothing tall to center, and forcing the
+                      // same 36px box on 14px phone text (`text-h4`) put a blank line's
+                      // worth of air between every wrapped row — so plain drafts keep
+                      // `text-h4`'s own responsive line-height (20px / 24px at md).
+                      // `min-h-*` pins the single-line box even when EMPTY: a
+                      // non-editable (`contentEditable=false`, i.e. `disabled`) empty div
+                      // would otherwise collapse to 0px, and `items-center` would
+                      // re-center the shorter wrapper in the row — dropping the `top-0`
+                      // placeholder down.
+                      "text-ods-text-primary text-h4",
+                      hasChips ? "min-h-9 !leading-9" : "min-h-[var(--font-line-space-h4-body)]",
+                      "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
+                      disabled && "cursor-not-allowed"
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": isStopMode ? "Stop generation" : "Send message",
+                  onClick: isStopMode ? handleStop : handleSubmit,
+                  disabled: isStopMode ? isStopping : sendDisabled,
+                  className: cn(
+                    "flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200",
+                    // Focus accent applies to the SEND icon only. Stop stays neutral
+                    // regardless of where focus sits — otherwise it reads yellow after
+                    // an Enter-send (editor keeps focus) but gray after an approve
+                    // click (focus moved to the card button).
+                    focused && !isStopMode && "text-ods-accent",
+                    "[&_svg]:size-4 md:[&_svg]:size-6",
+                    "cursor-pointer hover:text-ods-text-primary",
+                    "focus-visible:text-ods-accent focus-visible:outline-none",
+                    "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary"
+                  ),
+                  children: isStopMode ? /* @__PURE__ */ jsx5(StopCircleIcon, { size: 20 }) : /* @__PURE__ */ jsx5(Send01Icon, { size: 20 })
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+});
+ChatInput.displayName = "ChatInput";
+
+// src/utils/format-date.ts
+var INVALID_DATE_PLACEHOLDER = "\u2014";
+var render = (input, fields) => formatDateWithTimezone(input, VIEWER_TIMEZONE, fields, { viewerLocale: true }) || INVALID_DATE_PLACEHOLDER;
+var formatDate = (input) => render(input, { dateStyle: "short" });
+var formatTime = (input) => render(input, { timeStyle: "short" });
+
+export {
+  Modal,
+  ModalContent,
+  ModalTwoColumn,
+  ModalHeader,
+  ModalTitle,
+  ModalFooter,
+  CHAT_TYPE,
+  OWNER_TYPE,
+  MESSAGE_ROLE,
+  ASSISTANT_TYPE,
+  AUTHOR_TYPE,
+  APPROVAL_STATUS,
+  APPROVAL_BLOCK_VARIANT,
+  CHAT_APPEARANCE,
+  CONNECTION_STATUS,
+  isStructuredContent,
+  normalizeContent,
+  formatDate,
+  formatTime,
+  ChatTypingIndicator,
+  MingoOnboardingCard,
+  SlashCommandSuggestions,
+  ChatInput
+};