@firstlovecenter/ai-chat 0.2.1 → 0.2.3

package/dist/ui/index.cjs

@@ -402,8 +402,22 @@ function sanitiseBlock(input) {
   }
   return { kind: "callout", tone: input.tone, text: input.text };
 }
+function isBlockEmpty(b) {
+  if (b.kind === "paragraph_brief") {
+    if (b.prose && b.prose.trim()) return false;
+    return b.key_facts.length === 0 || b.key_facts.every((f) => !f.trim());
+  }
+  if (b.kind === "list") {
+    return b.items.length === 0 || b.items.every((i) => !i.trim());
+  }
+  if (b.kind === "callout") return !b.text.trim();
+  if (b.kind === "chart") return b.data.length === 0;
+  if (b.kind === "table") return b.rows.length === 0;
+  return false;
+}
 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)) });
+  const visible = blocks.filter((b) => !isBlockEmpty(b));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: visible.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(BlockView, { block: b }, i)) });
 }
 function BlockView({ block }) {
   if (block.kind === "paragraph_brief") {
@@ -544,6 +558,14 @@ function AiLineChart({
     ))
   ] }) }) });
 }
+function formatDuration(ms) {
+  if (ms < 0) ms = 0;
+  const totalSec = Math.round(ms / 1e3);
+  if (totalSec < 60) return `${totalSec}s`;
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return s === 0 ? `${m}m` : `${m}m ${s}s`;
+}
 var PROVIDER_LABELS = {
   claude: "Claude",
   grok: "Grok",
@@ -718,7 +740,7 @@ function AiChat({
       }
       setAnswers((prev) => [
         ...prev,
-        { question: trimmed, blocks: [], done: false }
+        { question: trimmed, blocks: [], done: false, startedAt: Date.now() }
       ]);
       const ac = new AbortController();
       abortRef.current = ac;
@@ -739,6 +761,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "NETWORK", message }
           }))
         );
@@ -750,6 +773,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "NO_BODY", message: "No response stream." }
           }))
         );
@@ -776,6 +800,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "STREAM", message }
           }))
         );
@@ -808,7 +833,7 @@ function AiChat({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
-        "aria-hidden": !sidebarOpen,
+        inert: !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"
@@ -1074,6 +1099,14 @@ function AnswerView({
   }, [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;
+  const [, forceTick] = React.useState(0);
+  React.useEffect(() => {
+    if (answer.done || answer.startedAt == null) return;
+    const id = window.setInterval(() => forceTick((n) => n + 1), 1e3);
+    return () => window.clearInterval(id);
+  }, [answer.done, answer.startedAt]);
+  const liveElapsed = answer.startedAt != null ? Date.now() - answer.startedAt : null;
+  const finalDuration = answer.durationMs;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1092,7 +1125,12 @@ function AnswerView({
           /* @__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.jsxs("p", { className: "flex items-center text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
-            "Thinking\u2026"
+            "Thinking\u2026",
+            liveElapsed != null && liveElapsed >= 1e3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-xs tabular-nums", children: [
+              "(",
+              formatDuration(liveElapsed),
+              ")"
+            ] })
           ] })
         ] }) : /* @__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" }) }),
@@ -1125,6 +1163,14 @@ function AnswerView({
                   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" })
                 }
+              ),
+              finalDuration != null && finalDuration >= 1e3 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "ml-1 text-xs text-muted-foreground tabular-nums",
+                  title: "Time taken to generate this response",
+                  children: formatDuration(finalDuration)
+                }
               )
             ] })
           ] })
@@ -1330,7 +1376,13 @@ function handleEvent(raw, setAnswers) {
       })
     );
   } else if (event === "done") {
-    setAnswers((prev) => updateLast(prev, (a) => ({ ...a, done: true })));
+    setAnswers(
+      (prev) => updateLast(prev, (a) => ({
+        ...a,
+        done: true,
+        durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0
+      }))
+    );
   } else if (event === "error") {
     setAnswers(
       (prev) => updateLast(prev, (a) => ({