@firstlovecenter/ai-chat 0.2.0 → 0.2.2

package/dist/ui/index.js

@@ -523,6 +523,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",
@@ -697,7 +705,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;
@@ -718,6 +726,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "NETWORK", message }
           }))
         );
@@ -729,6 +738,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." }
           }))
         );
@@ -755,6 +765,7 @@ function AiChat({
           (prev) => updateLast(prev, (a) => ({
             ...a,
             done: true,
+            durationMs: a.startedAt != null ? Date.now() - a.startedAt : void 0,
             error: { code: "STREAM", message }
           }))
         );
@@ -787,7 +798,7 @@ function AiChat({
     /* @__PURE__ */ 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"
@@ -919,22 +930,16 @@ function AiChat({
           ] }) : heroVisible ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
             /* @__PURE__ */ jsx("h1", { className: "text-2xl font-medium tracking-tight text-foreground sm:text-3xl", children: greeting }),
             /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-light tracking-tight text-muted-foreground sm:text-3xl", children: "What's on your mind?" })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: [
-            answers.map((a, idx) => /* @__PURE__ */ 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__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
-              "Thinking\u2026"
-            ] })
-          ] })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: answers.map((a, idx) => /* @__PURE__ */ jsx(
+            AnswerView,
+            {
+              answer: a,
+              onRetry: () => void submit(a.question),
+              forwardRef: idx === answers.length - 1 ? lastAnswerRef : void 0,
+              isLast: idx === answers.length - 1
+            },
+            idx
+          )) })
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "shrink-0 px-4 pb-4 pt-2", children: /* @__PURE__ */ jsxs(
@@ -1059,6 +1064,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] = useState(0);
+  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__ */ jsxs(
     "div",
     {
@@ -1075,7 +1088,15 @@ function AnswerView({
         /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(UserChip, { text: answer.question }) }),
         isThinking ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Thinking\u2026" })
+          /* @__PURE__ */ jsxs("p", { className: "flex items-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
+            "Thinking\u2026",
+            liveElapsed != null && liveElapsed >= 1e3 && /* @__PURE__ */ jsxs("span", { className: "ml-1 tabular-nums", children: [
+              "(",
+              formatDuration(liveElapsed),
+              ")"
+            ] })
+          ] })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
           /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Sparkles, { className: "size-4" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
@@ -1107,6 +1128,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__ */ jsx(RotateCcw, { className: "size-4" })
                 }
+              ),
+              finalDuration != null && finalDuration >= 1e3 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ml-1 text-xs text-muted-foreground tabular-nums",
+                  title: "Time taken to generate this response",
+                  children: formatDuration(finalDuration)
+                }
               )
             ] })
           ] })
@@ -1312,7 +1341,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) => ({