@mgamadeus/ddd-agents 0.1.0-alpha.22 → 0.1.0-alpha.23

package/dist/chunks/index-7Qc_3GbG.js

@@ -0,0 +1,1046 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useSyncExternalStore, useMemo, useState, useContext, createContext } from "react";
+import { A as AgentsConversationClientProvider } from "./AgentsConversationClientContext-C4T7g_Qk.js";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+const SLICE_NAME = "widgetHydrationSlice";
+const emptyMemory = () => {
+  return {
+    data: null,
+    status: "idle",
+    error: null,
+    loadingInstanceId: null,
+    inFlight: false,
+    requestId: 0,
+    lastLoadedAt: null
+  };
+};
+const initialState = {
+  widgets: {}
+};
+const readMemory = (state, key) => state.widgets[key] ?? emptyMemory();
+const withMemory = (state, key, memory) => ({
+  ...state,
+  widgets: { ...state.widgets, [key]: memory }
+});
+const isCurrentRequest = (memory, requestId) => memory.requestId === 0 || memory.requestId === requestId;
+const actionType = (name) => `${SLICE_NAME}/${name}`;
+const WidgetHydrationSlice = {
+  memoryEnsured: (payload) => ({ type: actionType("memoryEnsured"), payload }),
+  instanceAttached: (payload) => ({
+    type: actionType("instanceAttached"),
+    payload
+  }),
+  hydrationStarted: (payload) => ({
+    type: actionType("hydrationStarted"),
+    payload
+  }),
+  hydrationSucceeded: (payload) => ({
+    type: actionType("hydrationSucceeded"),
+    payload
+  }),
+  hydrationFailed: (payload) => ({
+    type: actionType("hydrationFailed"),
+    payload
+  }),
+  widgetReset: (payload) => ({ type: actionType("widgetReset"), payload }),
+  allWidgetsReset: () => ({ type: actionType("allWidgetsReset") })
+};
+const WidgetHydrationReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case actionType("memoryEnsured"): {
+      const { key } = action.payload;
+      return state.widgets[key] ? state : withMemory(state, key, emptyMemory());
+    }
+    case actionType("instanceAttached"): {
+      const { key, instanceId } = action.payload;
+      return withMemory(state, key, { ...readMemory(state, key), loadingInstanceId: instanceId });
+    }
+    case actionType("hydrationStarted"): {
+      const { key, instanceId, requestId } = action.payload;
+      return withMemory(state, key, {
+        ...readMemory(state, key),
+        status: "loading",
+        error: null,
+        inFlight: true,
+        loadingInstanceId: instanceId,
+        requestId
+      });
+    }
+    case actionType("hydrationSucceeded"): {
+      const { key, requestId, data } = action.payload;
+      const memory = readMemory(state, key);
+      if (!isCurrentRequest(memory, requestId)) return state.widgets[key] ? state : withMemory(state, key, memory);
+      return withMemory(state, key, {
+        ...memory,
+        status: "success",
+        error: null,
+        inFlight: false,
+        data,
+        loadingInstanceId: null,
+        requestId,
+        lastLoadedAt: Date.now()
+      });
+    }
+    case actionType("hydrationFailed"): {
+      const { key, requestId, error } = action.payload;
+      const memory = readMemory(state, key);
+      if (!isCurrentRequest(memory, requestId)) return state.widgets[key] ? state : withMemory(state, key, memory);
+      return withMemory(state, key, {
+        ...memory,
+        status: "error",
+        error,
+        inFlight: false,
+        loadingInstanceId: null,
+        requestId
+      });
+    }
+    case actionType("widgetReset"): {
+      const { key } = action.payload;
+      if (!(key in state.widgets)) return state;
+      const { [key]: removedMemory, ...remainingWidgets } = state.widgets;
+      return { ...state, widgets: remainingWidgets };
+    }
+    case actionType("allWidgetsReset"):
+      return { ...state, widgets: {} };
+    default:
+      return state;
+  }
+};
+class AgentsWidgetHydrationStateContainer {
+  constructor() {
+    this.state = {
+      AIExtensionsWidgetHydration: WidgetHydrationReducer(void 0, { type: "agents/widgetHydrationStoreCreated" })
+    };
+    this.listeners = /* @__PURE__ */ new Set();
+    this.getState = () => this.state;
+    this.subscribe = (listener) => {
+      this.listeners.add(listener);
+      return () => {
+        this.listeners.delete(listener);
+      };
+    };
+    this.dispatch = (action) => {
+      const nextHydrationState = WidgetHydrationReducer(this.state.AIExtensionsWidgetHydration, action);
+      if (nextHydrationState === this.state.AIExtensionsWidgetHydration) return action;
+      this.state = { AIExtensionsWidgetHydration: nextHydrationState };
+      for (const notifyListener of [...this.listeners]) notifyListener();
+      return action;
+    };
+    this.useSelector = (selector) => {
+      const readSelectedValue = () => selector(this.state);
+      return useSyncExternalStore(this.subscribe, readSelectedValue, readSelectedValue);
+    };
+    this.useDispatch = () => this.dispatch;
+  }
+}
+const createAgentsWidgetHydrationStateStore = () => new AgentsWidgetHydrationStateContainer();
+let defaultStateStore = null;
+const getDefaultAgentsStateStore = () => {
+  defaultStateStore ??= createAgentsWidgetHydrationStateStore();
+  return defaultStateStore;
+};
+const readClassNamesOfValue = (value) => {
+  if (typeof value === "string") return value.length > 0 ? [value] : [];
+  if (!value) return [];
+  return Object.keys(value).filter((className) => className.length > 0 && Boolean(value[className]));
+};
+const classNames = (...args) => args.flatMap(readClassNamesOfValue).join(" ");
+const TEXT_ELEMENT_BY_ROLE = {
+  title: "h4",
+  intro: "p",
+  body: "span",
+  help: "span",
+  caption: "span"
+};
+const readCssColor = (color) => color?.startsWith("--") ? `var(${color})` : color;
+const readPlainReplacements = (replacements) => {
+  const plainReplacements = {};
+  for (const [name, value] of Object.entries(replacements ?? {})) {
+    if (typeof value === "string" || typeof value === "number") plainReplacements[name] = value;
+  }
+  return plainReplacements;
+};
+const useTranslatedText = (text, translate = true, replacements, context) => {
+  const texts = useAgentsTexts();
+  if (text === void 0) return void 0;
+  return translate ? texts.translate(text, readPlainReplacements(replacements), context) : text;
+};
+const DefaultText = (props) => {
+  const {
+    children,
+    role = "body",
+    weight,
+    color,
+    translate = true,
+    replacements,
+    context,
+    ellipsis,
+    display,
+    textAlign,
+    textWrap,
+    allowNewLines,
+    headingLevel,
+    ariaHidden,
+    className,
+    testId
+  } = props;
+  const texts = useAgentsTexts();
+  const Element = TEXT_ELEMENT_BY_ROLE[role];
+  const content = typeof children === "string" && translate ? texts.translate(children, readPlainReplacements(replacements), context) : children;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-testid": testId,
+      role: headingLevel ? "heading" : void 0,
+      "aria-level": headingLevel,
+      "aria-hidden": ariaHidden || void 0,
+      className: classNames(
+        "agents-text",
+        `agents-text--${role}`,
+        weight && `agents-text--weight-${weight}`,
+        ellipsis && "agents-text--ellipsis",
+        allowNewLines && "agents-text--new-lines",
+        className
+      ),
+      style: {
+        color: readCssColor(color),
+        display,
+        textAlign,
+        whiteSpace: textWrap === "nowrap" || ellipsis ? "nowrap" : allowNewLines ? "pre-line" : void 0
+      },
+      children: content
+    }
+  );
+};
+const DefaultIcon = (props) => {
+  const { name, hostIconName, size, pixelSize, color, className, style } = props;
+  const iconName = name ?? hostIconName;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-icon": iconName,
+      className: classNames("agents-icon", size && `agents-icon--${size}`, className),
+      style: { color: readCssColor(color), ...pixelSize ? { width: pixelSize, height: pixelSize } : null, ...style }
+    }
+  );
+};
+const DefaultButton = (props) => {
+  const {
+    children,
+    variant = "primary",
+    size = "medium",
+    onClick,
+    disabled,
+    isLoading,
+    rounded,
+    pressed,
+    onDark,
+    blurred,
+    inverted,
+    icon,
+    iconPosition = "left",
+    htmlType = "button",
+    fullWidth,
+    wrapsLabel,
+    translate,
+    replacements,
+    className,
+    testId,
+    ariaLabel
+  } = props;
+  const label = useTranslatedText(children, translate, replacements);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: htmlType,
+      "aria-label": ariaLabel,
+      "aria-pressed": pressed,
+      "aria-busy": isLoading || void 0,
+      disabled: disabled || isLoading,
+      "data-testid": testId,
+      onClick,
+      className: classNames(
+        "agents-button",
+        `agents-button--${variant}`,
+        `agents-button--${size}`,
+        rounded && "agents-button--rounded",
+        pressed && "agents-button--pressed",
+        onDark && "agents-button--on-dark",
+        blurred && "agents-button--blurred",
+        inverted && "agents-button--inverted",
+        fullWidth && "agents-button--full-width",
+        wrapsLabel && "agents-button--wraps-label",
+        className
+      ),
+      children: [
+        icon && iconPosition === "left" ? /* @__PURE__ */ jsx(DefaultIcon, { name: icon, size: "small" }) : null,
+        label,
+        icon && iconPosition === "right" ? /* @__PURE__ */ jsx(DefaultIcon, { name: icon, size: "small" }) : null
+      ]
+    }
+  );
+};
+const DefaultInteractiveSurface = (props) => {
+  const { children, hoverable, className, style, testId } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": testId,
+      className: classNames("agents-interactive-surface", hoverable && "agents-interactive-surface--hoverable", className),
+      style,
+      children
+    }
+  );
+};
+const DefaultSkeleton = (props) => {
+  const { width, height, borderRadius = 4, className, style } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: classNames("agents-skeleton", className),
+      style: { width, height, borderRadius, ...style }
+    }
+  );
+};
+const DefaultLoadingSpinner = (_props) => /* @__PURE__ */ jsx("span", { role: "progressbar", "aria-busy": true, className: "agents-loading-spinner" });
+const DefaultTooltip = (props) => {
+  const { children, text, replacements, placement = "top", dark } = props;
+  const [isShown, setIsShown] = useState(false);
+  const shownText = useTranslatedText(text, true, replacements);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "agents-tooltip",
+      style: { position: "relative", display: "inline-flex" },
+      onMouseEnter: () => setIsShown(true),
+      onMouseLeave: () => setIsShown(false),
+      onFocus: () => setIsShown(true),
+      onBlur: () => setIsShown(false),
+      children: [
+        children,
+        shownText && isShown ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: "tooltip",
+            className: classNames("agents-tooltip__panel", `agents-tooltip__panel--${placement}`, dark && "agents-tooltip__panel--dark"),
+            style: { position: "absolute", bottom: "100%", left: "50%", transform: "translateX(-50%)" },
+            children: shownText
+          }
+        ) : null
+      ]
+    }
+  );
+};
+const DefaultGlowFrame = (props) => {
+  const { children, className, color, borderRadius, borderWidth } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames("agents-glow-frame", className),
+      style: { borderRadius, borderWidth, borderStyle: borderWidth ? "solid" : void 0, borderColor: color },
+      children
+    }
+  );
+};
+const DefaultProgressBar = (props) => {
+  const { value, height, color, indeterminate } = props;
+  return /* @__PURE__ */ jsx(
+    "progress",
+    {
+      className: "agents-progress-bar",
+      max: 100,
+      value: indeterminate ? void 0 : value,
+      style: { height, accentColor: color, width: "100%" }
+    }
+  );
+};
+const DefaultSplitView = (props) => {
+  const { isSideOpen, main, side, sideToggle } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "agents-split-view", style: { display: "flex", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "agents-split-view__main",
+        style: { width: isSideOpen ? main.narrowedWidth ?? main.width : main.width, background: main.background },
+        children: main.content
+      }
+    ),
+    sideToggle ? /* @__PURE__ */ jsx("button", { type: "button", className: "agents-split-view__toggle", onClick: sideToggle.onToggle, "aria-expanded": isSideOpen }) : null,
+    isSideOpen ? /* @__PURE__ */ jsx("div", { className: "agents-split-view__side", style: { width: side.narrowedWidth ?? side.width, background: side.background }, children: side.content }) : null
+  ] });
+};
+const DefaultTrendDelta = (props) => {
+  const { current, previous = 0, higherIsBetter = true, format } = props;
+  const change = current - previous;
+  const magnitude = Math.abs(change);
+  const isGood = change === 0 ? void 0 : change > 0 === higherIsBetter;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: classNames(
+        "agents-trend-delta",
+        isGood === true && "agents-trend-delta--good",
+        isGood === false && "agents-trend-delta--bad"
+      ),
+      children: [
+        change > 0 ? "▲ " : change < 0 ? "▼ " : "",
+        format ? format(magnitude) : String(magnitude)
+      ]
+    }
+  );
+};
+const DefaultCheckbox = (props) => {
+  const { checked, disabled, label, translate, onChange, testId } = props;
+  const translatedLabel = useTranslatedText(typeof label === "string" ? label : void 0, translate);
+  return /* @__PURE__ */ jsxs("label", { className: "agents-checkbox", "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: checked ?? false, disabled, onChange }),
+    typeof label === "string" ? translatedLabel : label
+  ] });
+};
+const DefaultTextInput = (props) => {
+  const { id, value, type = "text", label, placeholder, maxLength, onChange, testId } = props;
+  const translatedLabel = useTranslatedText(label);
+  return /* @__PURE__ */ jsxs("label", { className: "agents-text-input", children: [
+    translatedLabel ? /* @__PURE__ */ jsx("span", { className: "agents-text-input__label", children: translatedLabel }) : null,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type,
+        value: value ?? "",
+        placeholder,
+        maxLength,
+        "data-testid": testId,
+        onChange: (event) => onChange?.(event.target.value)
+      }
+    )
+  ] });
+};
+const DefaultTextArea = (props) => {
+  const { id, value, label, placeholder, maxLength, rows, minRows, showsCounter, autoFocus, onChange, testId } = props;
+  const translatedLabel = useTranslatedText(label);
+  return /* @__PURE__ */ jsxs("label", { className: "agents-text-area", children: [
+    translatedLabel ? /* @__PURE__ */ jsx("span", { className: "agents-text-area__label", children: translatedLabel }) : null,
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        value: value ?? "",
+        placeholder,
+        maxLength,
+        rows: rows ?? minRows,
+        autoFocus,
+        "data-testid": testId,
+        onChange: (event) => onChange?.(event.target.value)
+      }
+    ),
+    showsCounter && maxLength ? /* @__PURE__ */ jsx("span", { className: "agents-text-area__counter", children: `${(value ?? "").length} / ${maxLength}` }) : null
+  ] });
+};
+const DefaultRangeSlider = (props) => {
+  const { value, min, max, step, onMove, onRelease } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      className: "agents-range-slider",
+      value,
+      min,
+      max,
+      step,
+      onChange: (event) => onMove?.(Number(event.target.value)),
+      onPointerUp: (event) => onRelease?.(Number(event.currentTarget.value)),
+      onKeyUp: (event) => onRelease?.(Number(event.currentTarget.value))
+    }
+  );
+};
+const toIsoDay = (timestamp) => {
+  if (timestamp === void 0) return void 0;
+  const day = new Date(timestamp);
+  const month = String(day.getMonth() + 1).padStart(2, "0");
+  const dayOfMonth = String(day.getDate()).padStart(2, "0");
+  return `${day.getFullYear()}-${month}-${dayOfMonth}`;
+};
+const DefaultDateInput = (props) => {
+  const { value, minDate, maxDate, onChange } = props;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "date",
+      className: "agents-date-input",
+      value: toIsoDay(value) ?? "",
+      min: toIsoDay(minDate),
+      max: toIsoDay(maxDate),
+      onChange: (event) => {
+        const [year, month, day] = event.target.value.split("-").map(Number);
+        onChange?.(event.target.value ? new Date(year, month - 1, day).getTime() : null);
+      }
+    }
+  );
+};
+const DefaultRadioGroup = (props) => {
+  const { name, value, options, direction = "column", onChange } = props;
+  return /* @__PURE__ */ jsx("div", { className: "agents-radio-group", style: { display: "flex", flexDirection: direction }, children: options.map((option) => /* @__PURE__ */ jsxs("label", { className: "agents-radio-group__option", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        name,
+        value: option.value,
+        checked: option.value === value,
+        disabled: option.disabled,
+        onChange: () => onChange(option.value)
+      }
+    ),
+    option.label
+  ] }, option.value)) });
+};
+const DefaultSelect = (props) => {
+  const { id, value, options, placeholder, onChange, testId } = props;
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      id,
+      className: "agents-select",
+      value,
+      "data-testid": testId,
+      onChange: (event) => onChange(event.target.value),
+      children: [
+        placeholder !== void 0 ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }) : null,
+        options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, title: option.description, children: option.label }, option.value))
+      ]
+    }
+  );
+};
+const DefaultTabs = (props) => {
+  const { options, value, onChange, ariaLabel } = props;
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "agents-tabs", children: options.filter((option) => !option.disabled).map((option) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": option.value === value,
+      "data-testid": option.testId,
+      className: classNames("agents-tabs__tab", option.value === value && "agents-tabs__tab--selected"),
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+};
+const DefaultStatusBadge = (props) => {
+  const { status, text, translate, size, className } = props;
+  const shownText = useTranslatedText(text, translate);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames(
+        "agents-status-badge",
+        `agents-status-badge--${status}`,
+        size && `agents-status-badge--${size}`,
+        className
+      ),
+      children: shownText
+    }
+  );
+};
+const DefaultMap = (props) => {
+  const { className, testId } = props;
+  const noMapText = useTranslatedText("No map available.");
+  return /* @__PURE__ */ jsx("div", { className: classNames("agents-map-placeholder", className), "data-testid": testId, "data-map": "none", children: noMapText });
+};
+const DefaultMapMarker = (_props) => null;
+const DefaultModalLayer = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const DefaultHeroRow = (props) => {
+  const { children, className } = props;
+  return /* @__PURE__ */ jsx("div", { "data-hero-row": "", className: classNames("agents-hero-row", className), children });
+};
+const DefaultHeroValue = (props) => {
+  const { children, color } = props;
+  return /* @__PURE__ */ jsx("span", { "data-hero": "", "data-hero-value": "", className: "agents-hero-value", style: { color: readCssColor(color) }, children });
+};
+const DefaultWidgetText = (props) => {
+  const {
+    children,
+    variant = "inherit",
+    tone,
+    color,
+    weight,
+    uppercase,
+    tabular,
+    strikethrough,
+    inline = variant === "inherit",
+    translate = typeof children === "string",
+    context,
+    replacements,
+    className,
+    testId
+  } = props;
+  const texts = useAgentsTexts();
+  const plainReplacements = {};
+  for (const [name, value] of Object.entries(replacements ?? {})) {
+    if (value !== null && value !== void 0) plainReplacements[name] = value;
+  }
+  const content = typeof children === "string" && translate ? texts.translate(children, plainReplacements, context) : children;
+  const Element = inline ? "span" : "div";
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-testid": testId,
+      className: classNames(
+        "agents-widget-text",
+        `agents-widget-text--${variant}`,
+        tone && !color && `agents-widget-text--${tone}`,
+        weight && `agents-widget-text--weight-${weight}`,
+        uppercase && "agents-widget-text--uppercase",
+        tabular && "agents-widget-text--tabular",
+        strikethrough && "agents-widget-text--strikethrough",
+        className
+      ),
+      style: color ? { color: readCssColor(color) } : void 0,
+      children: content
+    }
+  );
+};
+const DefaultSkeletonText = (props) => {
+  const { width = "4.5em", height = "1em", className } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: classNames("agents-skeleton", className),
+      style: { display: "inline-block", width, height, borderRadius: 999 }
+    }
+  );
+};
+const STATUS_BADGE_STATUS_BY_CHIP_TONE = {
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  neutral: "neutral",
+  info: "info",
+  error: "danger"
+};
+const DefaultStatusChip = (props) => {
+  const { tone = "neutral", children, compact = false, translate = true } = props;
+  return /* @__PURE__ */ jsx(
+    DefaultStatusBadge,
+    {
+      status: STATUS_BADGE_STATUS_BY_CHIP_TONE[tone],
+      text: children,
+      translate,
+      size: "small",
+      hideIcon: compact || tone !== "error"
+    }
+  );
+};
+const DefaultSegmentBar = (props) => {
+  const { segments, height = 6, className, loading = false, testId } = props;
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames("agents-segment-bar", className),
+      style: { display: "flex", height, borderRadius: height, overflow: "hidden" },
+      "data-segment-bar": "",
+      "data-testid": testId,
+      children: total > 0 || loading ? segments.map((segment, segmentIndex) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: loading ? `${100 / segments.length}%` : `${Math.max(0, segment.value) / total * 100}%`,
+            background: segment.color,
+            opacity: segment.muted || loading ? 0.5 : void 0
+          }
+        },
+        segmentIndex
+      )) : null
+    }
+  );
+};
+const NO_MARKDOWN_PLUGINS = [];
+const MarkdownImage = (imageProps) => {
+  const { src, node, ...otherProps } = imageProps;
+  return src ? /* @__PURE__ */ jsx("img", { src, ...otherProps }) : null;
+};
+const DefaultMarkdown = (props) => {
+  const { markdown, color, remarkPlugins = NO_MARKDOWN_PLUGINS, rehypePlugins = NO_MARKDOWN_PLUGINS, components } = props;
+  const markdownComponents = useMemo(() => ({ img: MarkdownImage, ...components }), [components]);
+  const markdownRemarkPlugins = useMemo(() => [remarkGfm, ...remarkPlugins], [remarkPlugins]);
+  return /* @__PURE__ */ jsx("div", { style: { color }, className: "agents-markdown", "data-markdown-blocks-root": true, children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: markdownRemarkPlugins,
+      rehypePlugins,
+      components: markdownComponents,
+      children: markdown
+    }
+  ) });
+};
+const DefaultWidgetFeatureGate = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const DefaultConversationSearchResultsList = (props) => {
+  const { groups, onOpenConversation } = props;
+  return /* @__PURE__ */ jsx("ul", { className: "agents-conversation-search-results", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("li", { className: "agents-conversation-search-results__group", children: [
+    /* @__PURE__ */ jsx(DefaultText, { role: "body", weight: "bold", translate: false, children: group.title ?? "" }),
+    group.hits.map((hit, hitIndex) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "agents-conversation-search-results__hit",
+        onClick: () => {
+          if (group.conversationId !== void 0) onOpenConversation(group.conversationId, hit.messageId);
+        },
+        children: /* @__PURE__ */ jsx(DefaultText, { role: "help", translate: false, children: hit.excerpt ?? "" })
+      },
+      hit.messageId ?? hitIndex
+    ))
+  ] }, group.conversationId ?? groupIndex)) });
+};
+const DEFAULT_AGENTS_COMPONENTS = {
+  Text: DefaultText,
+  Button: DefaultButton,
+  Icon: DefaultIcon,
+  InteractiveSurface: DefaultInteractiveSurface,
+  Skeleton: DefaultSkeleton,
+  LoadingSpinner: DefaultLoadingSpinner,
+  Tooltip: DefaultTooltip,
+  GlowFrame: DefaultGlowFrame,
+  ProgressBar: DefaultProgressBar,
+  SplitView: DefaultSplitView,
+  TrendDelta: DefaultTrendDelta,
+  Checkbox: DefaultCheckbox,
+  TextInput: DefaultTextInput,
+  TextArea: DefaultTextArea,
+  RangeSlider: DefaultRangeSlider,
+  DateInput: DefaultDateInput,
+  RadioGroup: DefaultRadioGroup,
+  Select: DefaultSelect,
+  Tabs: DefaultTabs,
+  StatusBadge: DefaultStatusBadge,
+  Map: DefaultMap,
+  MapMarker: DefaultMapMarker,
+  ModalLayer: DefaultModalLayer,
+  HeroRow: DefaultHeroRow,
+  HeroValue: DefaultHeroValue,
+  WidgetText: DefaultWidgetText,
+  SkeletonText: DefaultSkeletonText,
+  StatusChip: DefaultStatusChip,
+  SegmentBar: DefaultSegmentBar,
+  Markdown: DefaultMarkdown,
+  WidgetFeatureGate: DefaultWidgetFeatureGate,
+  ConversationSearchResultsList: DefaultConversationSearchResultsList
+};
+let appEnvironment = {};
+const environmentListeners = /* @__PURE__ */ new Set();
+const setAgentsEnvironment = (environment) => {
+  appEnvironment = environment;
+  for (const notifyListener of environmentListeners) notifyListener();
+};
+const getAgentsEnvironment = () => appEnvironment;
+const subscribeToAgentsEnvironment = (listener) => {
+  environmentListeners.add(listener);
+  return () => {
+    environmentListeners.delete(listener);
+  };
+};
+const substitutePlaceholders = (key, replacements) => replacements ? key.replace(
+  /%([A-Za-z0-9_]+)%/g,
+  (placeholder, name) => name in replacements ? String(replacements[name]) : placeholder
+) : key;
+const DEFAULT_AGENTS_TEXTS = { translate: substitutePlaceholders };
+const translateText = (key, replacements, context) => (appEnvironment.texts ?? DEFAULT_AGENTS_TEXTS).translate(key, replacements, context);
+const escapePlainTextForText = (text) => appEnvironment.escapePlainTextForText ? appEnvironment.escapePlainTextForText(text) : text;
+const openImageGallery = (images, startIndex) => {
+  if (appEnvironment.openImageGallery) {
+    appEnvironment.openImageGallery(images, startIndex);
+    return;
+  }
+  const startImage = images[startIndex];
+  if (startImage) window.open(startImage.url, "_blank", "noopener,noreferrer");
+};
+const DEFAULT_WIDGET_SELF_HYDRATION_KEY_FIELD_NAME = "agentSpaceId";
+const getWidgetSelfHydrationKeyFieldName = () => appEnvironment.widgetSelfHydrationKeyFieldName ?? DEFAULT_WIDGET_SELF_HYDRATION_KEY_FIELD_NAME;
+const appendAnotherAgentSpaceToOwnerText = (ownerText, anotherAgentSpaceKey) => appEnvironment.appendAnotherAgentSpaceToOwnerText ? appEnvironment.appendAnotherAgentSpaceToOwnerText(ownerText, anotherAgentSpaceKey) : ownerText;
+const buildUnnamedAgentSpaceLabel = (agentSpaceKey) => appEnvironment.buildUnnamedAgentSpaceLabel ? appEnvironment.buildUnnamedAgentSpaceLabel(agentSpaceKey) : `#${agentSpaceKey}`;
+const buildWidgetOfAnotherAgentSpaceExplanation = (agentSpaceLabel) => appEnvironment.buildWidgetOfAnotherAgentSpaceExplanation ? appEnvironment.buildWidgetOfAnotherAgentSpaceExplanation(agentSpaceLabel) : translateText("This widget shows data for %label%, not for what you currently have selected.", {
+  label: agentSpaceLabel
+});
+const getSandboxLegacyAliases = () => appEnvironment.sandboxLegacyAliases ?? {};
+const DEFAULT_WIDGET_IMAGE_CAPTURE_READ_PATH_PREFIX = "/api/";
+const getWidgetImageCaptureReadPathPrefix = () => appEnvironment.widgetImageCaptureReadPathPrefix ?? DEFAULT_WIDGET_IMAGE_CAPTURE_READ_PATH_PREFIX;
+const getGoogleMapWidgetNames = () => appEnvironment.googleMapWidgetNames ?? [];
+const getFurtherWidgetClickSignalSources = () => appEnvironment.furtherWidgetClickSignalSources ?? [];
+const getFurtherCanvasBehaviours = () => appEnvironment.furtherCanvasBehaviours ?? {};
+const getAgentDisplayName = () => appEnvironment.agentDisplayName ?? translateText("the assistant");
+const reportRunningTurn = () => appEnvironment.reportRunningTurn?.();
+const reportWidgetCrash = (widgetName, error, errorInfo) => {
+  appEnvironment.reportWidgetCrash?.(widgetName, error, errorInfo);
+};
+const AgentsEnvironmentContext = createContext(null);
+const NO_SUBTREE_ENVIRONMENT = {};
+const AgentsProvider = (props) => {
+  const { environment = NO_SUBTREE_ENVIRONMENT, client, children } = props;
+  const environmentTree = /* @__PURE__ */ jsx(AgentsEnvironmentContext.Provider, { value: environment, children });
+  return client ? /* @__PURE__ */ jsx(AgentsConversationClientProvider, { client, children: environmentTree }) : environmentTree;
+};
+const useAppEnvironment = () => useSyncExternalStore(subscribeToAgentsEnvironment, getAgentsEnvironment, getAgentsEnvironment);
+const useAgentsComponents = () => {
+  const subtreeEnvironment = useContext(AgentsEnvironmentContext);
+  const appEnvironment2 = useAppEnvironment();
+  return useMemo(
+    () => ({ ...DEFAULT_AGENTS_COMPONENTS, ...appEnvironment2.components, ...subtreeEnvironment?.components }),
+    [appEnvironment2, subtreeEnvironment]
+  );
+};
+const useAgentsTexts = () => {
+  const subtreeEnvironment = useContext(AgentsEnvironmentContext);
+  const appEnvironment2 = useAppEnvironment();
+  return subtreeEnvironment?.texts ?? appEnvironment2.texts ?? DEFAULT_AGENTS_TEXTS;
+};
+const useAgentsEnvironment = () => {
+  const subtreeEnvironment = useContext(AgentsEnvironmentContext);
+  const appEnvironment2 = useAppEnvironment();
+  return useMemo(
+    () => subtreeEnvironment ? { ...appEnvironment2, ...subtreeEnvironment } : appEnvironment2,
+    [appEnvironment2, subtreeEnvironment]
+  );
+};
+const readStateStore = (environment) => environment.stateStore ?? getDefaultAgentsStateStore();
+const useAgentsStateSelector = (selector) => readStateStore(useAgentsEnvironment()).useSelector(selector);
+const useAgentsStateDispatch = () => readStateStore(useAgentsEnvironment()).useDispatch();
+const NO_OWNER_SETTINGS = {};
+const useNoOwnerSettings = () => NO_OWNER_SETTINGS;
+const useAgentsOwnerSettings = () => {
+  const useOwnerSettings = useAgentsEnvironment().useOwnerSettings ?? useNoOwnerSettings;
+  return useOwnerSettings();
+};
+const useNoActiveAgentSpaceKey = () => void 0;
+const useAgentsActiveAgentSpaceKey = () => {
+  const useActiveAgentSpaceKey = useAgentsEnvironment().useActiveAgentSpaceKey ?? useNoActiveAgentSpaceKey;
+  return useActiveAgentSpaceKey();
+};
+const NO_MAPS = {
+  isLoaded: false,
+  loadError: new Error("The agents environment has no maps loader."),
+  languageCode: void 0
+};
+const useNoMapsLoader = () => NO_MAPS;
+const useAgentsMapsLoader = () => {
+  const useMapsLoader = useAgentsEnvironment().useMapsLoader ?? useNoMapsLoader;
+  return useMapsLoader();
+};
+const NO_BUDGET_UPGRADE = { canUpgrade: false, openUpgrade: () => void 0, showsFairUseWording: false };
+const useNoBudgetLimit = () => NO_BUDGET_UPGRADE;
+const useAgentsBudgetLimit = () => {
+  const useBudgetLimit = useAgentsEnvironment().useBudgetLimit ?? useNoBudgetLimit;
+  return useBudgetLimit();
+};
+const Text = (props) => {
+  const { Text: TextComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TextComponent, { ...props });
+};
+const Button = (props) => {
+  const { Button: ButtonComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(ButtonComponent, { ...props });
+};
+const Icon = (props) => {
+  const { Icon: IconComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(IconComponent, { ...props });
+};
+const InteractiveSurface = (props) => {
+  const { InteractiveSurface: InteractiveSurfaceComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(InteractiveSurfaceComponent, { ...props });
+};
+const Skeleton = (props) => {
+  const { Skeleton: SkeletonComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(SkeletonComponent, { ...props });
+};
+const LoadingSpinner = (props) => {
+  const { LoadingSpinner: LoadingSpinnerComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(LoadingSpinnerComponent, { ...props });
+};
+const Tooltip = (props) => {
+  const { Tooltip: TooltipComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TooltipComponent, { ...props });
+};
+const GlowFrame = (props) => {
+  const { GlowFrame: GlowFrameComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(GlowFrameComponent, { ...props });
+};
+const ProgressBar = (props) => {
+  const { ProgressBar: ProgressBarComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(ProgressBarComponent, { ...props });
+};
+const SplitView = (props) => {
+  const { SplitView: SplitViewComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(SplitViewComponent, { ...props });
+};
+const TrendDelta = (props) => {
+  const { TrendDelta: TrendDeltaComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TrendDeltaComponent, { ...props });
+};
+const Checkbox = (props) => {
+  const { Checkbox: CheckboxComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(CheckboxComponent, { ...props });
+};
+const TextInput = (props) => {
+  const { TextInput: TextInputComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TextInputComponent, { ...props });
+};
+const TextArea = (props) => {
+  const { TextArea: TextAreaComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TextAreaComponent, { ...props });
+};
+const RangeSlider = (props) => {
+  const { RangeSlider: RangeSliderComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(RangeSliderComponent, { ...props });
+};
+const DateInput = (props) => {
+  const { DateInput: DateInputComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(DateInputComponent, { ...props });
+};
+const RadioGroup = (props) => {
+  const { RadioGroup: RadioGroupComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(RadioGroupComponent, { ...props });
+};
+const Select = (props) => {
+  const { Select: SelectComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(SelectComponent, { ...props });
+};
+const Tabs = (props) => {
+  const { Tabs: TabsComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(TabsComponent, { ...props });
+};
+const StatusBadge = (props) => {
+  const { StatusBadge: StatusBadgeComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(StatusBadgeComponent, { ...props });
+};
+const Map = (props) => {
+  const { Map: MapComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(MapComponent, { ...props });
+};
+const MapMarker = (props) => {
+  const { MapMarker: MapMarkerComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(MapMarkerComponent, { ...props });
+};
+const ModalLayer = (props) => {
+  const { ModalLayer: ModalLayerComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(ModalLayerComponent, { ...props });
+};
+const HeroRow = (props) => {
+  const { HeroRow: HeroRowComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(HeroRowComponent, { ...props });
+};
+const HeroValue = (props) => {
+  const { HeroValue: HeroValueComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(HeroValueComponent, { ...props });
+};
+const WidgetText = (props) => {
+  const { WidgetText: WidgetTextComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(WidgetTextComponent, { ...props });
+};
+const SkeletonText = (props) => {
+  const { SkeletonText: SkeletonTextComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(SkeletonTextComponent, { ...props });
+};
+const StatusChip = (props) => {
+  const { StatusChip: StatusChipComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(StatusChipComponent, { ...props });
+};
+const SegmentBar = (props) => {
+  const { SegmentBar: SegmentBarComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(SegmentBarComponent, { ...props });
+};
+const Markdown = (props) => {
+  const { Markdown: MarkdownComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(MarkdownComponent, { ...props });
+};
+const WidgetFeatureGate = (props) => {
+  const { WidgetFeatureGate: WidgetFeatureGateComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(WidgetFeatureGateComponent, { ...props });
+};
+const ConversationSearchResultsList = (props) => {
+  const { ConversationSearchResultsList: ConversationSearchResultsListComponent } = useAgentsComponents();
+  return /* @__PURE__ */ jsx(ConversationSearchResultsListComponent, { ...props });
+};
+export {
+  translateText as $,
+  AgentsProvider as A,
+  Button as B,
+  Checkbox as C,
+  DEFAULT_AGENTS_TEXTS as D,
+  escapePlainTextForText as E,
+  getAgentDisplayName as F,
+  GlowFrame as G,
+  HeroRow as H,
+  Icon as I,
+  getAgentsEnvironment as J,
+  getFurtherCanvasBehaviours as K,
+  LoadingSpinner as L,
+  Map as M,
+  getFurtherWidgetClickSignalSources as N,
+  getGoogleMapWidgetNames as O,
+  ProgressBar as P,
+  getSandboxLegacyAliases as Q,
+  RadioGroup as R,
+  SegmentBar as S,
+  Tabs as T,
+  getWidgetImageCaptureReadPathPrefix as U,
+  getWidgetSelfHydrationKeyFieldName as V,
+  WidgetFeatureGate as W,
+  openImageGallery as X,
+  reportRunningTurn as Y,
+  reportWidgetCrash as Z,
+  setAgentsEnvironment as _,
+  ConversationSearchResultsList as a,
+  useAgentsActiveAgentSpaceKey as a0,
+  useAgentsBudgetLimit as a1,
+  useAgentsComponents as a2,
+  useAgentsEnvironment as a3,
+  useAgentsMapsLoader as a4,
+  useAgentsOwnerSettings as a5,
+  useAgentsStateDispatch as a6,
+  useAgentsStateSelector as a7,
+  useAgentsTexts as a8,
+  AgentsWidgetHydrationStateContainer as a9,
+  WidgetHydrationReducer as aa,
+  WidgetHydrationSlice as ab,
+  createAgentsWidgetHydrationStateStore as ac,
+  getDefaultAgentsStateStore as ad,
+  DEFAULT_WIDGET_IMAGE_CAPTURE_READ_PATH_PREFIX as b,
+  DEFAULT_WIDGET_SELF_HYDRATION_KEY_FIELD_NAME as c,
+  DateInput as d,
+  HeroValue as e,
+  InteractiveSurface as f,
+  MapMarker as g,
+  Markdown as h,
+  ModalLayer as i,
+  RangeSlider as j,
+  Select as k,
+  Skeleton as l,
+  SkeletonText as m,
+  SplitView as n,
+  StatusBadge as o,
+  StatusChip as p,
+  Text as q,
+  TextArea as r,
+  TextInput as s,
+  Tooltip as t,
+  TrendDelta as u,
+  WidgetText as v,
+  appendAnotherAgentSpaceToOwnerText as w,
+  buildUnnamedAgentSpaceLabel as x,
+  buildWidgetOfAnotherAgentSpaceExplanation as y,
+  classNames as z
+};
+//# sourceMappingURL=index-7Qc_3GbG.js.map