@firstlovecenter/ai-chat 0.1.0

package/dist/ui/index.cjs

@@ -0,0 +1,1388 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+var RechartsPrimitive = require('recharts');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
+
+// src/ui/_shared/cn.ts
+function cn(...args) {
+  const out = [];
+  for (const a of args) {
+    if (!a) continue;
+    if (typeof a === "string") {
+      out.push(a);
+    } else if (Array.isArray(a)) {
+      const inner = cn(...a);
+      if (inner) out.push(inner);
+    } else if (typeof a === "object") {
+      for (const [k, v] of Object.entries(a)) {
+        if (v) out.push(k);
+      }
+    }
+  }
+  return out.join(" ");
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.DropdownMenu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ChartCard({
+  title,
+  subtitle,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold leading-none tracking-tight", children: title }),
+          subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 pt-0", children })
+      ]
+    }
+  );
+}
+var THEMES = { light: "", dark: ".dark" };
+var INITIAL_DIMENSION = { width: 320, height: 200 };
+var ChartContext = React__namespace.createContext(null);
+function useChart() {
+  const context = React__namespace.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}) {
+  const uniqueId = React__namespace.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RechartsPrimitive__namespace.ResponsiveContainer,
+          {
+            initialDimension,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme ?? config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive__namespace.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React__namespace.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color ?? item.payload?.fill ?? item.color;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive__namespace.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.filter((item) => item.type !== "none").map((item, index) => {
+        const key = `${nameKey ?? item.dataKey ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsxRuntime.jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var AI_CHART_PALETTE = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+function aiChartConfig(keys) {
+  const out = {};
+  keys.forEach((key, idx) => {
+    out[key] = {
+      label: key,
+      color: AI_CHART_PALETTE[idx % AI_CHART_PALETTE.length]
+    };
+  });
+  return out;
+}
+function sanitiseBlock(input) {
+  if (input.kind === "paragraph_brief") {
+    return {
+      kind: "paragraph_brief",
+      topic: input.topic,
+      key_facts: input.key_facts,
+      prose: ""
+    };
+  }
+  if (input.kind === "list") {
+    return { kind: "list", style: input.style, items: input.items, title: input.title };
+  }
+  if (input.kind === "chart") {
+    return { kind: "chart", title: input.title, spec: input.spec, data: input.data };
+  }
+  if (input.kind === "table") {
+    return {
+      kind: "table",
+      title: input.title,
+      columns: input.columns,
+      rows: input.rows
+    };
+  }
+  return { kind: "callout", tone: input.tone, text: input.text };
+}
+function AnswerBlocks({ blocks }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: blocks.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(BlockView, { block: b }, i)) });
+}
+function BlockView({ block }) {
+  if (block.kind === "paragraph_brief") {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap text-sm leading-6 text-foreground", children: block.prose || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+      block.key_facts.join(". "),
+      "\u2026"
+    ] }) });
+  }
+  if (block.kind === "list") {
+    const Tag = block.style === "numbered" ? "ol" : "ul";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      block.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-sm font-medium", children: block.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: block.style === "numbered" ? "list-decimal pl-6" : "list-disc pl-6", children: block.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm leading-6", children: it }, i)) })
+    ] });
+  }
+  if (block.kind === "chart") {
+    return /* @__PURE__ */ jsxRuntime.jsx(AiChartBlock, { block });
+  }
+  if (block.kind === "table") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-x-auto rounded border border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-b border-border px-3 py-2 text-sm font-medium", children: block.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-muted/40", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: block.columns.map((c) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-medium text-muted-foreground", children: c }, c)) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: block.rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-t border-border", children: row.map((cell, j) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground", children: cell == null ? "\u2014" : String(cell) }, j)) }, i)) })
+      ] })
+    ] });
+  }
+  if (block.kind === "callout") {
+    const cls = block.tone === "warn" ? "border-amber-300 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 text-amber-900 dark:text-amber-100" : block.tone === "success" ? "border-emerald-300 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-900 dark:text-emerald-100" : "border-sky-300 bg-sky-50 text-sky-900";
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded border p-3 text-sm ${cls}`, children: block.text });
+  }
+  return null;
+}
+function AiChartBlock({ block }) {
+  const yKeys = Array.isArray(block.spec.y) ? block.spec.y : [block.spec.y];
+  if (block.spec.type === "pie") {
+    return /* @__PURE__ */ jsxRuntime.jsx(AiPieChart, { block, valueKey: yKeys[0] });
+  }
+  if (block.spec.type === "bar" || block.spec.type === "stacked_bar") {
+    return /* @__PURE__ */ jsxRuntime.jsx(AiBarChart, { block, yKeys, stacked: block.spec.type === "stacked_bar" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AiLineChart, { block, yKeys });
+}
+function AiPieChart({
+  block,
+  valueKey
+}) {
+  const config = React.useMemo(
+    () => aiChartConfig(block.data.map((row) => String(row[block.spec.x] ?? ""))),
+    [block.data, block.spec.x]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartCard, { title: block.title, children: /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { config, className: "h-72 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.PieChart, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, { hideLabel: true }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      RechartsPrimitive.Pie,
+      {
+        data: block.data,
+        dataKey: valueKey,
+        nameKey: block.spec.x,
+        innerRadius: 60,
+        strokeWidth: 2,
+        children: [
+          block.data.map((row, idx) => {
+            const sliceKey = String(row[block.spec.x] ?? "");
+            return /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.Cell, { fill: `var(--color-${sliceKey})` }, sliceKey || idx);
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RechartsPrimitive.Label,
+            {
+              content: ({ viewBox }) => {
+                if (!viewBox || !("cx" in viewBox)) return null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: viewBox.cx,
+                    y: viewBox.cy,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    className: "fill-foreground text-sm font-medium",
+                    children: valueKey
+                  }
+                );
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, { nameKey: block.spec.x }) })
+  ] }) }) });
+}
+function AiBarChart({
+  block,
+  yKeys,
+  stacked
+}) {
+  const config = React.useMemo(() => aiChartConfig(yKeys), [yKeys]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartCard, { title: block.title, children: /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { config, className: "h-72 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.BarChart, { data: block.data, margin: { left: 12, right: 12, top: 4 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: block.spec.x, tickLine: false, axisLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tickLine: false, axisLine: false, tickMargin: 8, width: 64 }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) }),
+    yKeys.map((k) => /* @__PURE__ */ jsxRuntime.jsx(
+      RechartsPrimitive.Bar,
+      {
+        dataKey: k,
+        stackId: stacked ? "stack" : void 0,
+        fill: `var(--color-${k})`,
+        radius: stacked ? [2, 2, 0, 0] : [4, 4, 0, 0]
+      },
+      k
+    ))
+  ] }) }) });
+}
+function AiLineChart({
+  block,
+  yKeys
+}) {
+  const config = React.useMemo(() => aiChartConfig(yKeys), [yKeys]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartCard, { title: block.title, children: /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { config, className: "h-72 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.LineChart, { data: block.data, margin: { left: 12, right: 12, top: 4 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.XAxis, { dataKey: block.spec.x, tickLine: false, axisLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(RechartsPrimitive.YAxis, { tickLine: false, axisLine: false, tickMargin: 8, width: 64 }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) }),
+    yKeys.map((k) => /* @__PURE__ */ jsxRuntime.jsx(
+      RechartsPrimitive.Line,
+      {
+        type: "monotone",
+        dataKey: k,
+        stroke: `var(--color-${k})`,
+        strokeWidth: 2,
+        dot: false,
+        activeDot: { r: 4 }
+      },
+      k
+    ))
+  ] }) }) });
+}
+var PROVIDER_LABELS = {
+  claude: "Claude",
+  grok: "Grok",
+  gemini: "Gemini"
+};
+var TEXTAREA_MAX_PX = 176;
+var PROVIDER_DESCRIPTIONS = {
+  claude: "Anthropic Claude on Vertex AI",
+  grok: "xAI Grok on Vertex AI",
+  gemini: "Google Gemini on Vertex AI"
+};
+function AiChat({
+  userFirstName,
+  scopeLabel,
+  initialProvider
+}) {
+  const [sessions, setSessions] = React.useState([]);
+  const [activeSessionId, setActiveSessionId] = React.useState(null);
+  const [answers, setAnswers] = React.useState([]);
+  const [pending, setPending] = React.useState(false);
+  const [question, setQuestion] = React.useState("");
+  const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [loadingSession, setLoadingSession] = React.useState(false);
+  const [provider, setProvider] = React.useState(initialProvider);
+  const [providerSaving, setProviderSaving] = React.useState(false);
+  const [editingSidebarId, setEditingSidebarId] = React.useState(null);
+  const abortRef = React.useRef(null);
+  const threadRef = React.useRef(null);
+  const textareaRef = React.useRef(null);
+  const lastAnswerRef = React.useRef(null);
+  const prevAnswersLen = React.useRef(0);
+  React.useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "0px";
+    const next = Math.min(el.scrollHeight, TEXTAREA_MAX_PX);
+    el.style.height = `${next}px`;
+  }, [question]);
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const res = await fetch("/api/chat/sessions", { cache: "no-store" });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!cancelled) setSessions(data.sessions ?? []);
+      } catch {
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  React.useEffect(() => {
+    if (answers.length > prevAnswersLen.current && lastAnswerRef.current) {
+      lastAnswerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+    prevAnswersLen.current = answers.length;
+  }, [answers.length]);
+  const refreshSessions = React.useCallback(async () => {
+    try {
+      const res = await fetch("/api/chat/sessions", { cache: "no-store" });
+      if (!res.ok) return;
+      const data = await res.json();
+      setSessions(data.sessions ?? []);
+    } catch {
+    }
+  }, []);
+  const newChat = React.useCallback(() => {
+    setActiveSessionId(null);
+    setAnswers([]);
+    setQuestion("");
+  }, []);
+  const changeProvider = React.useCallback(
+    async (next) => {
+      if (next === provider || providerSaving) return;
+      setProvider(next);
+      setProviderSaving(true);
+      try {
+        const res = await fetch("/api/settings/me", {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ narrative_provider: next })
+        });
+        if (!res.ok) {
+          setProvider((curr) => curr === next ? provider : curr);
+        }
+      } catch {
+        setProvider((curr) => curr === next ? provider : curr);
+      } finally {
+        setProviderSaving(false);
+      }
+    },
+    [provider, providerSaving]
+  );
+  const openSession = React.useCallback(async (id) => {
+    setLoadingSession(true);
+    setActiveSessionId(id);
+    try {
+      const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
+      if (!res.ok) {
+        setAnswers([]);
+        return;
+      }
+      const data = await res.json();
+      setAnswers(messagesToAnswers(data.messages ?? []));
+    } catch {
+      setAnswers([]);
+    } finally {
+      setLoadingSession(false);
+    }
+  }, []);
+  const persistTitle = React.useCallback(
+    async (id, title) => {
+      const trimmed = title.trim();
+      if (!trimmed) return;
+      const res = await fetch(`/api/chat/sessions/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: trimmed })
+      });
+      if (res.ok) {
+        setSessions(
+          (prev) => prev.map((s) => s.id === id ? { ...s, title: trimmed } : s)
+        );
+      }
+    },
+    []
+  );
+  const startSidebarRename = React.useCallback((id) => {
+    setEditingSidebarId(id);
+  }, []);
+  const deleteSession = React.useCallback(
+    async (id) => {
+      if (!window.confirm("Delete this chat? This cannot be undone.")) return;
+      const res = await fetch(`/api/chat/sessions/${id}`, { method: "DELETE" });
+      if (!res.ok) return;
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      if (activeSessionId === id) {
+        setActiveSessionId(null);
+        setAnswers([]);
+      }
+    },
+    [activeSessionId]
+  );
+  const submit = React.useCallback(
+    async (q) => {
+      const trimmed = q.trim();
+      if (!trimmed || pending) return;
+      setPending(true);
+      setQuestion("");
+      let sessionId = activeSessionId;
+      if (sessionId == null) {
+        try {
+          const create = await fetch("/api/chat/sessions", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({})
+          });
+          if (create.ok) {
+            const data = await create.json();
+            sessionId = data.session.id;
+            setActiveSessionId(sessionId);
+            setSessions((prev) => [
+              { id: data.session.id, title: data.session.title, updatedAt: null },
+              ...prev
+            ]);
+          }
+        } catch {
+        }
+      }
+      setAnswers((prev) => [
+        ...prev,
+        { question: trimmed, blocks: [], done: false }
+      ]);
+      const ac = new AbortController();
+      abortRef.current = ac;
+      let res;
+      try {
+        res = await fetch("/api/agent", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            question: trimmed,
+            chatSessionId: sessionId
+          }),
+          signal: ac.signal
+        });
+      } catch (e) {
+        const message = e.message ?? "Request failed";
+        setAnswers(
+          (prev) => updateLast(prev, (a) => ({
+            ...a,
+            done: true,
+            error: { code: "NETWORK", message }
+          }))
+        );
+        setPending(false);
+        return;
+      }
+      if (!res.body) {
+        setAnswers(
+          (prev) => updateLast(prev, (a) => ({
+            ...a,
+            done: true,
+            error: { code: "NO_BODY", message: "No response stream." }
+          }))
+        );
+        setPending(false);
+        return;
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      try {
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const events = buffer.split("\n\n");
+          buffer = events.pop() ?? "";
+          for (const raw of events) {
+            handleEvent(raw, setAnswers);
+          }
+        }
+      } catch (e) {
+        const message = e.message ?? "Stream interrupted";
+        setAnswers(
+          (prev) => updateLast(prev, (a) => ({
+            ...a,
+            done: true,
+            error: { code: "STREAM", message }
+          }))
+        );
+      } finally {
+        setPending(false);
+        abortRef.current = null;
+        void refreshSessions();
+      }
+    },
+    [activeSessionId, pending, refreshSessions]
+  );
+  const heroVisible = answers.length === 0 && !loadingSession;
+  const greeting = React.useMemo(
+    () => `Hi ${userFirstName || "there"}${userFirstName.endsWith("s") ? "" : ""},`,
+    [userFirstName]
+  );
+  const activeTitle = activeSessionId ? sessions.find((s) => s.id === activeSessionId)?.title ?? "Chat" : "New chat";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full min-h-0 w-full overflow-hidden rounded-lg border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: () => setSidebarOpen(false),
+        "aria-hidden": "true",
+        className: cn(
+          "absolute inset-0 z-10 bg-background/60 backdrop-blur-sm transition-opacity duration-200",
+          sidebarOpen ? "opacity-100" : "pointer-events-none opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        "aria-hidden": !sidebarOpen,
+        className: cn(
+          "absolute inset-y-0 left-0 z-20 flex w-72 max-w-[85vw] flex-col border-r border-border bg-sidebar text-sidebar-foreground shadow-lg transition-transform duration-200 ease-out",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-sidebar-border p-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSidebarOpen(false),
+                className: "inline-flex size-8 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground",
+                "aria-label": "Close sidebar",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  newChat();
+                  setSidebarOpen(false);
+                },
+                className: "ml-auto inline-flex items-center gap-1.5 rounded-full border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-xs font-medium text-sidebar-accent-foreground hover:bg-sidebar-accent/80",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3.5" }),
+                  "New chat"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-3 text-xs text-sidebar-foreground/60", children: "No chats yet. Ask something below to start." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: sessions.map((s) => {
+            const active = s.id === activeSessionId;
+            const editing = s.id === editingSidebarId;
+            if (editing) {
+              return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarTitleEditor,
+                {
+                  initial: s.title,
+                  onCancel: () => setEditingSidebarId(null),
+                  onSave: (next) => {
+                    setEditingSidebarId(null);
+                    void persistTitle(s.id, next);
+                  }
+                }
+              ) }, s.id);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    void openSession(s.id);
+                    setSidebarOpen(false);
+                  },
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
+                    active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"
+                  ),
+                  title: s.title,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: s.title })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 group-hover:flex", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      startSidebarRename(s.id);
+                    },
+                    "aria-label": "Rename",
+                    className: "inline-flex size-6 items-center justify-center rounded text-sidebar-foreground/60 hover:bg-sidebar hover:text-sidebar-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      void deleteSession(s.id);
+                    },
+                    "aria-label": "Delete",
+                    className: "inline-flex size-6 items-center justify-center rounded text-sidebar-foreground/60 hover:bg-sidebar hover:text-destructive",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3" })
+                  }
+                )
+              ] })
+            ] }, s.id);
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "relative flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 px-3 py-3 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSidebarOpen(true),
+            "aria-label": "Open chat history",
+            className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4 text-primary" }),
+        activeSessionId != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          EditableTitle,
+          {
+            title: activeTitle,
+            onSave: (next) => void persistTitle(activeSessionId, next)
+          },
+          activeSessionId
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: activeTitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: threadRef,
+          className: "min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-2",
+          children: loadingSession ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 size-4 animate-spin" }),
+            " Loading conversation\u2026"
+          ] }) : heroVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-medium tracking-tight text-foreground sm:text-3xl", children: greeting }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-2xl font-light tracking-tight text-muted-foreground sm:text-3xl", children: "What's on your mind?" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: [
+            answers.map((a, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              AnswerView,
+              {
+                answer: a,
+                onRetry: () => void submit(a.question),
+                forwardRef: idx === answers.length - 1 ? lastAnswerRef : void 0,
+                isLast: idx === answers.length - 1
+              },
+              idx
+            )),
+            pending && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
+              "Thinking\u2026"
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-4 pb-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "form",
+        {
+          className: "mx-auto w-full max-w-3xl",
+          onSubmit: (e) => {
+            e.preventDefault();
+            void submit(question);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-3xl border border-border bg-background px-4 py-3 shadow-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: question,
+                  onChange: (e) => setQuestion(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      void submit(question);
+                    }
+                  },
+                  placeholder: "Ask AI...",
+                  rows: 1,
+                  disabled: pending,
+                  style: { maxHeight: TEXTAREA_MAX_PX },
+                  className: "w-full resize-none overflow-y-auto border-0 bg-transparent py-1 text-sm leading-6 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:opacity-60"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex max-w-[60%] items-center gap-1.5 truncate rounded-full border border-border bg-muted/40 px-2.5 py-1 text-xs font-medium text-muted-foreground",
+                    title: `Scope: ${scopeLabel}`,
+                    children: [
+                      "Scope: ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", children: scopeLabel })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
+                        "aria-label": "Choose model",
+                        children: [
+                          PROVIDER_LABELS[provider],
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "w-56", children: ["claude", "grok", "gemini"].map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      DropdownMenuItem,
+                      {
+                        onSelect: () => void changeProvider(p),
+                        className: "flex items-start gap-2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.Check,
+                            {
+                              className: cn(
+                                "mt-0.5 size-4",
+                                provider === p ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: PROVIDER_LABELS[p] }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: PROVIDER_DESCRIPTIONS[p] })
+                          ] })
+                        ]
+                      },
+                      p
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: pending || !question.trim(),
+                      "aria-label": "Send",
+                      className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors enabled:hover:bg-primary/90 disabled:opacity-40",
+                      children: pending ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: [
+              PROVIDER_LABELS[provider],
+              " is AI and can make mistakes."
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function AnswerView({
+  answer,
+  onRetry,
+  forwardRef,
+  isLast
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = React.useCallback(async () => {
+    const blockText = blocksToPlainText(answer.blocks);
+    const text = blockText || (answer.error ? `${answer.error.code}: ${answer.error.message}` : "");
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  }, [answer.blocks, answer.error]);
+  const showActions = answer.done && (answer.blocks.length > 0 || answer.error != null);
+  const isThinking = !answer.done && answer.blocks.length === 0 && !answer.error;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: forwardRef,
+      className: cn(
+        "flex flex-col gap-4 scroll-mt-2",
+        // Reserve space below the latest turn so the AI response has a
+        // full screen to fill without bouncing the user. Calc subtracts
+        // the chat header (~3rem) and the input pill area (~10rem) from
+        // the dynamic viewport height.
+        isLast && "min-h-[calc(100dvh-13rem)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(UserChip, { text: answer.question }) }),
+        isThinking ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Thinking\u2026" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AnswerBlocks, { blocks: answer.blocks }),
+            answer.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wrap-break-word whitespace-pre-wrap rounded border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100", children: [
+              answer.error.code,
+              ": ",
+              answer.error.message
+            ] }),
+            showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              (answer.blocks.length > 0 || answer.error != null) && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  "aria-label": answer.blocks.length === 0 && answer.error ? "Copy error" : "Copy response",
+                  title: copied ? "Copied" : "Copy",
+                  className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+                  children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRetry,
+                  "aria-label": "Retry",
+                  title: "Retry",
+                  className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function SidebarTitleEditor({
+  initial,
+  onSave,
+  onCancel
+}) {
+  const [draft, setDraft] = React.useState(initial);
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== initial) onSave(trimmed);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      autoFocus: true,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onFocus: (e) => e.currentTarget.select(),
+      onClick: (e) => e.stopPropagation(),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      },
+      maxLength: 200,
+      className: "w-full rounded-md border border-sidebar-border bg-sidebar-accent/40 px-2 py-1.5 text-sm text-sidebar-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+    }
+  );
+}
+function EditableTitle({
+  title,
+  onSave
+}) {
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(title);
+  React.useEffect(() => {
+    if (!editing) setDraft(title);
+  }, [title, editing]);
+  if (!editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setDraft(title);
+          setEditing(true);
+        },
+        className: "w-64 max-w-full min-w-0 truncate rounded px-2 py-0.5 text-left hover:bg-accent hover:text-foreground",
+        title: "Click to rename",
+        children: title
+      }
+    );
+  }
+  const commit = () => {
+    const trimmed = draft.trim();
+    setEditing(false);
+    if (trimmed && trimmed !== title) onSave(trimmed);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      autoFocus: true,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onFocus: (e) => e.currentTarget.select(),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setEditing(false);
+          setDraft(title);
+        }
+      },
+      className: "w-64 max-w-full min-w-0 rounded border border-border bg-background px-2 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+      maxLength: 200
+    }
+  );
+}
+function blocksToPlainText(blocks) {
+  return blocks.map((b) => {
+    if (b.kind === "paragraph_brief") {
+      return b.prose || b.key_facts.join(". ");
+    }
+    if (b.kind === "list") {
+      const lines = b.items.map(
+        (it, i) => b.style === "numbered" ? `${i + 1}. ${it}` : `- ${it}`
+      );
+      return [b.title, ...lines].filter(Boolean).join("\n");
+    }
+    if (b.kind === "chart") {
+      return `${b.title} (chart)`;
+    }
+    if (b.kind === "table") {
+      const header = b.columns.join("	");
+      const rows = b.rows.map(
+        (r) => r.map((c) => c == null ? "\u2014" : String(c)).join("	")
+      );
+      return [b.title, header, ...rows].join("\n");
+    }
+    if (b.kind === "callout") return b.text;
+    return "";
+  }).filter(Boolean).join("\n\n");
+}
+function UserChip({ text }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [overflowing, setOverflowing] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || expanded) return;
+    setOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, [text, expanded]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%] rounded-2xl bg-muted px-4 py-2 text-sm text-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "whitespace-pre-wrap wrap-break-word leading-6",
+            // 3 lines × leading-6 (24px) = 72px → max-h-18.
+            !expanded && "max-h-18 overflow-hidden"
+          ),
+          children: text
+        }
+      ),
+      !expanded && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-muted to-transparent"
+        }
+      )
+    ] }),
+    (overflowing || expanded) && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((v) => !v),
+        className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+        children: expanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-3.5" }),
+          "Show less"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5" }),
+          "Show more"
+        ] })
+      }
+    )
+  ] });
+}
+function handleEvent(raw, setAnswers) {
+  const lines = raw.split("\n");
+  let event = "";
+  let dataStr = "";
+  for (const line of lines) {
+    if (line.startsWith("event: ")) event = line.slice(7).trim();
+    else if (line.startsWith("data: ")) dataStr += line.slice(6);
+  }
+  if (!event) return;
+  let data = {};
+  try {
+    data = JSON.parse(dataStr || "{}");
+  } catch {
+    return;
+  }
+  if (event === "block") {
+    const blockData = data;
+    const block = sanitiseBlock(blockData);
+    setAnswers(
+      (prev) => updateLast(prev, (a) => {
+        const blocks = [...a.blocks];
+        blocks[blockData.index] = block;
+        return { ...a, blocks };
+      })
+    );
+  } else if (event === "prose") {
+    const { block_index, delta } = data;
+    setAnswers(
+      (prev) => updateLast(prev, (a) => {
+        const blocks = [...a.blocks];
+        const target = blocks[block_index];
+        if (target && target.kind === "paragraph_brief") {
+          blocks[block_index] = { ...target, prose: target.prose + delta };
+        }
+        return { ...a, blocks };
+      })
+    );
+  } else if (event === "done") {
+    setAnswers((prev) => updateLast(prev, (a) => ({ ...a, done: true })));
+  } else if (event === "error") {
+    setAnswers(
+      (prev) => updateLast(prev, (a) => ({
+        ...a,
+        error: data
+      }))
+    );
+  }
+}
+function updateLast(prev, updater) {
+  if (prev.length === 0) return prev;
+  const next = [...prev];
+  next[next.length - 1] = updater(next[next.length - 1]);
+  return next;
+}
+function messagesToAnswers(messages) {
+  const out = [];
+  let pendingUser = null;
+  for (const m of messages) {
+    if (m.role === "user") {
+      pendingUser = m.question ?? "";
+    } else if (m.role === "assistant") {
+      const question = pendingUser ?? "";
+      pendingUser = null;
+      const blocks = [];
+      const stored = m.blocks ?? [];
+      stored.forEach((b, i) => {
+        const sanitised = sanitiseBlock({ ...b});
+        if (sanitised.kind === "paragraph_brief") {
+          sanitised.prose = m.prose?.[String(i)] ?? "";
+        }
+        blocks[i] = sanitised;
+      });
+      out.push({
+        question,
+        blocks,
+        done: true,
+        error: m.errorJson ?? void 0
+      });
+    }
+  }
+  if (pendingUser !== null) {
+    out.push({ question: pendingUser, blocks: [], done: true });
+  }
+  return out;
+}
+
+exports.AiChat = AiChat;
+exports.AnswerBlocks = AnswerBlocks;
+exports.sanitiseBlock = sanitiseBlock;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map