@surf-kit/agent 0.1.1 → 0.2.1

package/dist/streaming/index.cjs

@@ -0,0 +1,531 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/streaming/index.ts
+var streaming_exports = {};
+__export(streaming_exports, {
+  RetrievalProgress: () => RetrievalProgress,
+  StreamingList: () => StreamingList,
+  StreamingMessage: () => StreamingMessage,
+  StreamingStructure: () => StreamingStructure,
+  TextGlimmer: () => TextGlimmer,
+  ThinkingIndicator: () => ThinkingIndicator,
+  ToolExecution: () => ToolExecution,
+  TypewriterText: () => TypewriterText,
+  TypingIndicator: () => TypingIndicator,
+  VerificationProgress: () => VerificationProgress
+});
+module.exports = __toCommonJS(streaming_exports);
+
+// src/streaming/StreamingMessage/StreamingMessage.tsx
+var import_react2 = require("react");
+var import_core = require("@surf-kit/core");
+
+// src/hooks/useCharacterDrain.ts
+var import_react = require("react");
+function useCharacterDrain(target, msPerChar = 15) {
+  const [displayed, setDisplayed] = (0, import_react.useState)("");
+  const indexRef = (0, import_react.useRef)(0);
+  const lastTimeRef = (0, import_react.useRef)(0);
+  const rafRef = (0, import_react.useRef)(null);
+  const drainTargetRef = (0, import_react.useRef)("");
+  const msPerCharRef = (0, import_react.useRef)(msPerChar);
+  msPerCharRef.current = msPerChar;
+  if (target !== "") {
+    drainTargetRef.current = target;
+  }
+  const drainTarget = drainTargetRef.current;
+  const isDraining = displayed.length < drainTarget.length;
+  const tickRef = (0, import_react.useRef)(() => {
+  });
+  tickRef.current = (now) => {
+    const currentTarget = drainTargetRef.current;
+    if (currentTarget === "") {
+      rafRef.current = null;
+      return;
+    }
+    if (lastTimeRef.current === 0) lastTimeRef.current = now;
+    const elapsed = now - lastTimeRef.current;
+    const charsToAdvance = Math.floor(elapsed / msPerCharRef.current);
+    if (charsToAdvance > 0 && indexRef.current < currentTarget.length) {
+      const nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
+      indexRef.current = nextIndex;
+      lastTimeRef.current = now;
+      setDisplayed(currentTarget.slice(0, nextIndex));
+    }
+    if (indexRef.current < currentTarget.length) {
+      rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
+    } else {
+      rafRef.current = null;
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (drainTargetRef.current !== "" && indexRef.current < drainTargetRef.current.length && rafRef.current === null) {
+      rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
+    }
+  }, [drainTarget]);
+  (0, import_react.useEffect)(() => {
+    if (target === "" && !isDraining && displayed !== "") {
+      indexRef.current = 0;
+      lastTimeRef.current = 0;
+      drainTargetRef.current = "";
+      setDisplayed("");
+    }
+  }, [target, isDraining, displayed]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return { displayed, isDraining };
+}
+
+// src/streaming/StreamingMessage/StreamingMessage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var phaseLabels = {
+  idle: "",
+  waiting: "Waiting...",
+  thinking: "Thinking...",
+  retrieving: "Searching...",
+  generating: "Writing...",
+  verifying: "Verifying..."
+};
+function StreamingMessage({
+  stream,
+  onComplete,
+  showPhases = true,
+  className
+}) {
+  const onCompleteRef = (0, import_react2.useRef)(onComplete);
+  onCompleteRef.current = onComplete;
+  const wasActiveRef = (0, import_react2.useRef)(stream.active);
+  (0, import_react2.useEffect)(() => {
+    if (wasActiveRef.current && !stream.active) {
+      onCompleteRef.current?.();
+    }
+    wasActiveRef.current = stream.active;
+  }, [stream.active]);
+  const phaseLabel = phaseLabels[stream.phase];
+  const { displayed: displayedContent } = useCharacterDrain(stream.content);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, "data-testid": "streaming-message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-live": "assertive", className: "sr-only", children: [
+      stream.active && stream.phase !== "idle" && "Response started",
+      !stream.active && stream.content && "Response complete"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
+      showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
+          "data-testid": "phase-indicator",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spinner, { size: "sm" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: phaseLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
+        displayedContent,
+        stream.active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5",
+            "aria-hidden": "true",
+            "data-testid": "streaming-cursor"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/streaming/ThinkingIndicator/ThinkingIndicator.tsx
+var import_hooks = require("@surf-kit/hooks");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ThinkingIndicator({ label = "Thinking...", className }) {
+  const reducedMotion = (0, import_hooks.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "span",
+    {
+      role: "status",
+      className: `inline-flex items-center gap-2 text-sm motion-safe:animate-fadeSlideUpSm ${className ?? ""}`,
+      "data-testid": "thinking-indicator",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-text-secondary", children: label }),
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex gap-1", "aria-hidden": "true", "data-testid": "animated-dots", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/streaming/ToolExecution/ToolExecution.tsx
+var import_core2 = require("@surf-kit/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultLabels = {
+  search: "Searching knowledge base...",
+  retrieve: "Retrieving documents...",
+  calculate: "Calculating..."
+};
+function ToolExecution({ tool, label, className }) {
+  const displayLabel = label ?? defaultLabels[tool] ?? `Running ${tool}...`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `flex items-center gap-2 text-sm text-text-secondary ${className ?? ""}`,
+      role: "status",
+      "data-testid": "tool-execution",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+
+// src/streaming/RetrievalProgress/RetrievalProgress.tsx
+var import_core3 = require("@surf-kit/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RetrievalProgress({ sources, isActive, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `space-y-2 ${className ?? ""}`,
+      role: "status",
+      "aria-label": isActive ? `Retrieving sources, ${sources.length} found so far` : `${sources.length} sources found`,
+      "data-testid": "retrieval-progress",
+      children: [
+        isActive && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Spinner, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Retrieving sources..." })
+        ] }),
+        sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "li",
+          {
+            className: "text-sm text-text-secondary flex items-center gap-2 animate-in fade-in slide-in-from-left-2",
+            style: { animationDelay: `${index * 100}ms`, animationFillMode: "both" },
+            "data-testid": "retrieval-source-item",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: source.title })
+            ]
+          },
+          source.document_id
+        )) })
+      ]
+    }
+  );
+}
+
+// src/streaming/VerificationProgress/VerificationProgress.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function VerificationProgress({
+  isActive,
+  label = "Checking accuracy...",
+  className
+}) {
+  if (!isActive) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `flex items-center gap-2 text-sm ${className ?? ""}`,
+      role: "status",
+      "data-testid": "verification-progress",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "svg",
+          {
+            className: "w-4 h-4 animate-spin text-accent",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-accent animate-pulse", children: label })
+      ]
+    }
+  );
+}
+
+// src/streaming/TypewriterText/TypewriterText.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function TypewriterText({
+  text,
+  speed = 30,
+  delay = 0,
+  onComplete,
+  className = "",
+  showCursor = true
+}) {
+  const [displayedText, setDisplayedText] = (0, import_react3.useState)("");
+  const [isComplete, setIsComplete] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setDisplayedText("");
+    setIsComplete(false);
+    let index = 0;
+    let interval;
+    const timeout = setTimeout(() => {
+      interval = setInterval(() => {
+        if (index < text.length) {
+          setDisplayedText(text.slice(0, index + 1));
+          index++;
+        } else {
+          clearInterval(interval);
+          setIsComplete(true);
+          onComplete?.();
+        }
+      }, speed);
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      clearInterval(interval);
+    };
+  }, [text, speed, delay, onComplete]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className, children: [
+    displayedText,
+    showCursor && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "typewriter-cursor", "aria-hidden": "true" })
+  ] });
+}
+
+// src/streaming/TypingIndicator/TypingIndicator.tsx
+var import_tailwind_merge = require("tailwind-merge");
+var import_hooks2 = require("@surf-kit/hooks");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var bounceKeyframes = `
+@keyframes typing-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-6px); }
+}
+`;
+function TypingIndicator({
+  label,
+  dotCount = 3,
+  className
+}) {
+  const reducedMotion = (0, import_hooks2.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "span",
+    {
+      role: "status",
+      "aria-label": label ?? "typing",
+      className: (0, import_tailwind_merge.twMerge)("inline-flex items-center gap-2", className),
+      "data-testid": "typing-indicator",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: bounceKeyframes }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: "w-2 h-2 rounded-full bg-text-secondary",
+            style: reducedMotion ? void 0 : {
+              animation: "typing-bounce 1.4s infinite ease-in-out",
+              animationDelay: `${i * 160}ms`
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/streaming/TextGlimmer/TextGlimmer.tsx
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_hooks3 = require("@surf-kit/hooks");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var shimmerKeyframes = `
+@keyframes text-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+`;
+var widthPattern = ["100%", "90%", "60%"];
+function TextGlimmer({ lines = 3, className }) {
+  const reducedMotion = (0, import_hooks3.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: (0, import_tailwind_merge2.twMerge)("flex flex-col gap-2", className),
+      "data-testid": "text-glimmer",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: shimmerKeyframes }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "h-3 rounded bg-surface-raised",
+            style: {
+              width: widthPattern[i % widthPattern.length],
+              ...reducedMotion ? void 0 : {
+                backgroundImage: "linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)",
+                backgroundSize: "200% 100%",
+                animation: "text-shimmer 1.5s infinite ease-in-out"
+              }
+            },
+            "data-testid": "glimmer-line"
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingList/StreamingList.tsx
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_hooks4 = require("@surf-kit/hooks");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var fadeSlideInKeyframes = `
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+function StreamingList({
+  items,
+  renderItem,
+  isStreaming = false,
+  className,
+  emptyMessage
+}) {
+  const reducedMotion = (0, import_hooks4.useReducedMotion)();
+  if (items.length === 0 && !isStreaming) {
+    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_tailwind_merge3.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "ul",
+    {
+      "aria-live": "polite",
+      className: (0, import_tailwind_merge3.twMerge)("list-none p-0 m-0", className),
+      "data-testid": "streaming-list",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: fadeSlideInKeyframes }),
+        items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "li",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-list-item",
+            children: renderItem(item, index)
+          },
+          index
+        )),
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TypingIndicator, {}) })
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingStructure/StreamingStructure.tsx
+var import_tailwind_merge4 = require("tailwind-merge");
+var import_hooks5 = require("@surf-kit/hooks");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var fadeSlideInKeyframes2 = `
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+function renderValue(value, reducedMotion) {
+  if (value === null) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "italic text-text-secondary", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "italic text-text-secondary", children: "undefined" });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
+  }
+  if (typeof value === "object") {
+    return renderNestedDl(value, reducedMotion);
+  }
+  return String(value);
+}
+function renderNestedDl(data, reducedMotion) {
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+      ]
+    },
+    key
+  )) });
+}
+function StreamingStructure({
+  data,
+  isStreaming = false,
+  className
+}) {
+  const reducedMotion = (0, import_hooks5.useReducedMotion)();
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "dl",
+    {
+      "aria-live": "polite",
+      className: (0, import_tailwind_merge4.twMerge)("m-0", className),
+      "data-testid": "streaming-structure",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: fadeSlideInKeyframes2 }),
+        entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-structure-entry",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+            ]
+          },
+          key
+        )),
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextGlimmer, { lines: 1 }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RetrievalProgress,
+  StreamingList,
+  StreamingMessage,
+  StreamingStructure,
+  TextGlimmer,
+  ThinkingIndicator,
+  ToolExecution,
+  TypewriterText,
+  TypingIndicator,
+  VerificationProgress
+});
+//# sourceMappingURL=index.cjs.map

package/dist/streaming/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/streaming/index.ts","../../src/streaming/StreamingMessage/StreamingMessage.tsx","../../src/hooks/useCharacterDrain.ts","../../src/streaming/ThinkingIndicator/ThinkingIndicator.tsx","../../src/streaming/ToolExecution/ToolExecution.tsx","../../src/streaming/RetrievalProgress/RetrievalProgress.tsx","../../src/streaming/VerificationProgress/VerificationProgress.tsx","../../src/streaming/TypewriterText/TypewriterText.tsx","../../src/streaming/TypingIndicator/TypingIndicator.tsx","../../src/streaming/TextGlimmer/TextGlimmer.tsx","../../src/streaming/StreamingList/StreamingList.tsx","../../src/streaming/StreamingStructure/StreamingStructure.tsx"],"sourcesContent":["export { StreamingMessage } from './StreamingMessage'\nexport type { StreamingMessageProps } from './StreamingMessage'\n\nexport { ThinkingIndicator } from './ThinkingIndicator'\nexport type { ThinkingIndicatorProps } from './ThinkingIndicator'\n\nexport { ToolExecution } from './ToolExecution'\nexport type { ToolExecutionProps } from './ToolExecution'\n\nexport { RetrievalProgress } from './RetrievalProgress'\nexport type { RetrievalProgressProps } from './RetrievalProgress'\n\nexport { VerificationProgress } from './VerificationProgress'\nexport type { VerificationProgressProps } from './VerificationProgress'\n\nexport { TypewriterText } from './TypewriterText'\nexport type { TypewriterTextProps } from './TypewriterText'\n\nexport { TypingIndicator } from './TypingIndicator'\nexport type { TypingIndicatorProps } from './TypingIndicator'\n\nexport { TextGlimmer } from './TextGlimmer'\nexport type { TextGlimmerProps } from './TextGlimmer'\n\nexport { StreamingList } from './StreamingList'\nexport type { StreamingListProps } from './StreamingList'\n\nexport { StreamingStructure } from './StreamingStructure'\nexport type { StreamingStructureProps } from './StreamingStructure'\n","import React, { useEffect, useRef } from 'react'\nimport { Spinner } from '@surf-kit/core'\nimport type { StreamState } from '../../types/streaming'\nimport { useCharacterDrain } from '../../hooks/useCharacterDrain'\n\ntype StreamingMessageProps = {\n  stream: StreamState\n  onComplete?: () => void\n  showPhases?: boolean\n  className?: string\n}\n\nconst phaseLabels: Record<StreamState['phase'], string> = {\n  idle: '',\n  waiting: 'Waiting...',\n  thinking: 'Thinking...',\n  retrieving: 'Searching...',\n  generating: 'Writing...',\n  verifying: 'Verifying...',\n}\n\nfunction StreamingMessage({\n  stream,\n  onComplete,\n  showPhases = true,\n  className,\n}: StreamingMessageProps) {\n  const onCompleteRef = useRef(onComplete)\n  onCompleteRef.current = onComplete\n  const wasActiveRef = useRef(stream.active)\n\n  useEffect(() => {\n    if (wasActiveRef.current && !stream.active) {\n      onCompleteRef.current?.()\n    }\n    wasActiveRef.current = stream.active\n  }, [stream.active])\n\n  const phaseLabel = phaseLabels[stream.phase]\n  const { displayed: displayedContent } = useCharacterDrain(stream.content)\n\n  return (\n    <div className={className} data-testid=\"streaming-message\">\n      {/* Screen reader announcements */}\n      <div aria-live=\"assertive\" className=\"sr-only\">\n        {stream.active && stream.phase !== 'idle' && 'Response started'}\n        {!stream.active && stream.content && 'Response complete'}\n      </div>\n\n      <div className=\"max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft\">\n        {showPhases && stream.active && stream.phase !== 'idle' && (\n          <div\n            className=\"flex items-center gap-2 mb-2 text-sm text-text-secondary\"\n            data-testid=\"phase-indicator\"\n          >\n            <span aria-hidden=\"true\">\n              <Spinner size=\"sm\" />\n            </span>\n            <span>{phaseLabel}</span>\n          </div>\n        )}\n\n        <div className=\"text-sm leading-relaxed text-text-primary whitespace-pre-wrap\">\n          {displayedContent}\n          {stream.active && (\n            <span\n              className=\"inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5\"\n              aria-hidden=\"true\"\n              data-testid=\"streaming-cursor\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { StreamingMessage }\nexport type { StreamingMessageProps }\n","import { useState, useRef, useEffect } from 'react'\n\nexport interface CharacterDrainResult {\n  displayed: string\n  isDraining: boolean\n}\n\n/**\n * Smoothly drains a growing `target` string character-by-character using\n * `requestAnimationFrame`, decoupling visual rendering from network packet\n * timing so text appears to type out instead of arriving in chunks.\n *\n * When `target` resets to empty (e.g. stream finished), the hook continues\n * draining the previous content to completion before resetting, so the\n * typing animation isn't cut short.\n *\n * Design: the RAF loop is long-lived — it does NOT restart on every delta.\n * The tick function is stored in a ref (updated each render) so the loop\n * always reads the latest drainTarget without being cancelled/restarted.\n * A separate kick-start effect re-fires the loop when it was idle and new\n * content arrives.\n */\nexport function useCharacterDrain(target: string, msPerChar = 15): CharacterDrainResult {\n  const [displayed, setDisplayed] = useState('')\n  const indexRef = useRef(0)\n  const lastTimeRef = useRef(0)\n  const rafRef = useRef<number | null>(null)\n  // Holds the last non-empty target so we can finish draining after source resets\n  const drainTargetRef = useRef('')\n  const msPerCharRef = useRef(msPerChar)\n\n  msPerCharRef.current = msPerChar\n\n  // Update drain target when new content arrives; preserve old value on reset\n  if (target !== '') {\n    drainTargetRef.current = target\n  }\n\n  const drainTarget = drainTargetRef.current\n  const isDraining = displayed.length < drainTarget.length\n\n  // Tick function stored in ref so the long-lived RAF loop always reads the\n  // latest drainTarget and msPerChar without being cancelled/recreated.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const tickRef = useRef<(now: number) => void>(() => {})\n  tickRef.current = (now: number) => {\n    const currentTarget = drainTargetRef.current\n    if (currentTarget === '') {\n      rafRef.current = null\n      return\n    }\n\n    if (lastTimeRef.current === 0) lastTimeRef.current = now\n    const elapsed = now - lastTimeRef.current\n    const charsToAdvance = Math.floor(elapsed / msPerCharRef.current)\n\n    if (charsToAdvance > 0 && indexRef.current < currentTarget.length) {\n      const nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length)\n      indexRef.current = nextIndex\n      lastTimeRef.current = now\n      setDisplayed(currentTarget.slice(0, nextIndex))\n    }\n\n    if (indexRef.current < currentTarget.length) {\n      rafRef.current = requestAnimationFrame((t) => tickRef.current(t))\n    } else {\n      rafRef.current = null\n    }\n  }\n\n  // Kick-start the RAF loop when new content arrives and the loop is idle.\n  // No cleanup here — we intentionally do NOT cancel the running loop when\n  // drainTarget grows; the long-lived tick will pick up new chars automatically.\n  useEffect(() => {\n    if (\n      drainTargetRef.current !== '' &&\n      indexRef.current < drainTargetRef.current.length &&\n      rafRef.current === null\n    ) {\n      rafRef.current = requestAnimationFrame((t) => tickRef.current(t))\n    }\n  }, [drainTarget]) // drainTarget change = new content; check if loop needs kicking\n\n  // Once drain completes and source stream is already done, reset all state\n  useEffect(() => {\n    if (target === '' && !isDraining && displayed !== '') {\n      indexRef.current = 0\n      lastTimeRef.current = 0\n      drainTargetRef.current = ''\n      setDisplayed('')\n    }\n  }, [target, isDraining, displayed])\n\n  // Cancel any pending RAF on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current)\n        rafRef.current = null\n      }\n    }\n  }, [])\n\n  return { displayed, isDraining }\n}\n","import React from 'react'\nimport { useReducedMotion } from '@surf-kit/hooks'\n\ntype ThinkingIndicatorProps = {\n  label?: string\n  className?: string\n}\n\nfunction ThinkingIndicator({ label = 'Thinking...', className }: ThinkingIndicatorProps) {\n  const reducedMotion = useReducedMotion()\n\n  return (\n    <span\n      role=\"status\"\n      className={`inline-flex items-center gap-2 text-sm motion-safe:animate-fadeSlideUpSm ${className ?? ''}`}\n      data-testid=\"thinking-indicator\"\n    >\n      <span className=\"text-text-secondary\">{label}</span>\n      {!reducedMotion && (\n        <span className=\"flex gap-1\" aria-hidden=\"true\" data-testid=\"animated-dots\">\n          <span className=\"w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]\" />\n          <span className=\"w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]\" />\n          <span className=\"w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]\" />\n        </span>\n      )}\n    </span>\n  )\n}\n\nexport { ThinkingIndicator }\nexport type { ThinkingIndicatorProps }\n","import React from 'react'\nimport { Spinner } from '@surf-kit/core'\n\ntype ToolExecutionProps = {\n  tool: string\n  label?: string\n  className?: string\n}\n\nconst defaultLabels: Record<string, string> = {\n  search: 'Searching knowledge base...',\n  retrieve: 'Retrieving documents...',\n  calculate: 'Calculating...',\n}\n\nfunction ToolExecution({ tool, label, className }: ToolExecutionProps) {\n  const displayLabel = label ?? defaultLabels[tool] ?? `Running ${tool}...`\n\n  return (\n    <div\n      className={`flex items-center gap-2 text-sm text-text-secondary ${className ?? ''}`}\n      role=\"status\"\n      data-testid=\"tool-execution\"\n    >\n      <span aria-hidden=\"true\">\n        <Spinner size=\"sm\" />\n      </span>\n      <span>{displayLabel}</span>\n    </div>\n  )\n}\n\nexport { ToolExecution }\nexport type { ToolExecutionProps }\n","import React from 'react'\nimport { Spinner } from '@surf-kit/core'\nimport type { Source } from '../../types/agent'\n\ntype RetrievalProgressProps = {\n  sources: Source[]\n  isActive: boolean\n  className?: string\n}\n\nfunction RetrievalProgress({ sources, isActive, className }: RetrievalProgressProps) {\n  return (\n    <div\n      className={`space-y-2 ${className ?? ''}`}\n      role=\"status\"\n      aria-label={\n        isActive\n          ? `Retrieving sources, ${sources.length} found so far`\n          : `${sources.length} sources found`\n      }\n      data-testid=\"retrieval-progress\"\n    >\n      {isActive && (\n        <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n          <span aria-hidden=\"true\">\n            <Spinner size=\"sm\" />\n          </span>\n          <span>Retrieving sources...</span>\n        </div>\n      )}\n\n      {sources.length > 0 && (\n        <ul className=\"space-y-1\" data-testid=\"source-list\">\n          {sources.map((source, index) => (\n            <li\n              key={source.document_id}\n              className=\"text-sm text-text-secondary flex items-center gap-2 animate-in fade-in slide-in-from-left-2\"\n              style={{ animationDelay: `${index * 100}ms`, animationFillMode: 'both' }}\n              data-testid=\"retrieval-source-item\"\n            >\n              <span className=\"w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0\" aria-hidden=\"true\" />\n              <span className=\"truncate\">{source.title}</span>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nexport { RetrievalProgress }\nexport type { RetrievalProgressProps }\n","import React from 'react'\n\ntype VerificationProgressProps = {\n  isActive: boolean\n  label?: string\n  className?: string\n}\n\nfunction VerificationProgress({\n  isActive,\n  label = 'Checking accuracy...',\n  className,\n}: VerificationProgressProps) {\n  if (!isActive) return null\n\n  return (\n    <div\n      className={`flex items-center gap-2 text-sm ${className ?? ''}`}\n      role=\"status\"\n      data-testid=\"verification-progress\"\n    >\n      <svg\n        className=\"w-4 h-4 animate-spin text-accent\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n        <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" />\n      </svg>\n      <span className=\"text-accent animate-pulse\">{label}</span>\n    </div>\n  )\n}\n\nexport { VerificationProgress }\nexport type { VerificationProgressProps }\n","import React, { useEffect, useState } from 'react'\n\nexport type TypewriterTextProps = {\n  text: string\n  speed?: number          // ms per char, default 30\n  delay?: number          // ms to wait before starting, default 0\n  onComplete?: () => void\n  className?: string\n  showCursor?: boolean    // default true\n}\n\nexport function TypewriterText({\n  text,\n  speed = 30,\n  delay = 0,\n  onComplete,\n  className = '',\n  showCursor = true,\n}: TypewriterTextProps) {\n  const [displayedText, setDisplayedText] = useState('')\n  const [isComplete, setIsComplete] = useState(false)\n\n  useEffect(() => {\n    setDisplayedText('')\n    setIsComplete(false)\n    let index = 0\n    let interval: ReturnType<typeof setInterval>\n    const timeout = setTimeout(() => {\n      interval = setInterval(() => {\n        if (index < text.length) {\n          setDisplayedText(text.slice(0, index + 1))\n          index++\n        } else {\n          clearInterval(interval)\n          setIsComplete(true)\n          onComplete?.()\n        }\n      }, speed)\n    }, delay)\n    return () => {\n      clearTimeout(timeout)\n      clearInterval(interval)\n    }\n  }, [text, speed, delay, onComplete])\n\n  return (\n    <span className={className}>\n      {displayedText}\n      {showCursor && !isComplete && (\n        <span className=\"typewriter-cursor\" aria-hidden=\"true\" />\n      )}\n    </span>\n  )\n}\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { useReducedMotion } from '@surf-kit/hooks'\n\ntype TypingIndicatorProps = {\n  label?: string\n  dotCount?: number\n  className?: string\n}\n\nconst bounceKeyframes = `\n@keyframes typing-bounce {\n  0%, 80%, 100% { transform: translateY(0); }\n  40% { transform: translateY(-6px); }\n}\n`\n\nfunction TypingIndicator({\n  label,\n  dotCount = 3,\n  className,\n}: TypingIndicatorProps) {\n  const reducedMotion = useReducedMotion()\n\n  return (\n    <span\n      role=\"status\"\n      aria-label={label ?? 'typing'}\n      className={twMerge('inline-flex items-center gap-2', className)}\n      data-testid=\"typing-indicator\"\n    >\n      {!reducedMotion && <style>{bounceKeyframes}</style>}\n      {label && (\n        <span className=\"text-sm text-text-secondary\">{label}</span>\n      )}\n      <span className=\"flex gap-1\" data-testid=\"typing-dots\">\n        {Array.from({ length: dotCount }, (_, i) => (\n          <span\n            key={i}\n            className=\"w-2 h-2 rounded-full bg-text-secondary\"\n            style={\n              reducedMotion\n                ? undefined\n                : {\n                    animation: 'typing-bounce 1.4s infinite ease-in-out',\n                    animationDelay: `${i * 160}ms`,\n                  }\n            }\n          />\n        ))}\n      </span>\n    </span>\n  )\n}\n\nexport { TypingIndicator }\nexport type { TypingIndicatorProps }\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { useReducedMotion } from '@surf-kit/hooks'\n\ntype TextGlimmerProps = {\n  lines?: number\n  className?: string\n}\n\nconst shimmerKeyframes = `\n@keyframes text-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n`\n\nconst widthPattern = ['100%', '90%', '60%']\n\nfunction TextGlimmer({ lines = 3, className }: TextGlimmerProps) {\n  const reducedMotion = useReducedMotion()\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={twMerge('flex flex-col gap-2', className)}\n      data-testid=\"text-glimmer\"\n    >\n      {!reducedMotion && <style>{shimmerKeyframes}</style>}\n      {Array.from({ length: lines }, (_, i) => (\n        <div\n          key={i}\n          className=\"h-3 rounded bg-surface-raised\"\n          style={{\n            width: widthPattern[i % widthPattern.length],\n            ...(reducedMotion\n              ? undefined\n              : {\n                  backgroundImage:\n                    'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',\n                  backgroundSize: '200% 100%',\n                  animation: 'text-shimmer 1.5s infinite ease-in-out',\n                }),\n          }}\n          data-testid=\"glimmer-line\"\n        />\n      ))}\n    </div>\n  )\n}\n\nexport { TextGlimmer }\nexport type { TextGlimmerProps }\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { useReducedMotion } from '@surf-kit/hooks'\nimport { TypingIndicator } from '../TypingIndicator'\n\ntype StreamingListProps<T> = {\n  items: T[]\n  renderItem: (item: T, index: number) => React.ReactNode\n  isStreaming?: boolean\n  className?: string\n  emptyMessage?: string\n}\n\nconst fadeSlideInKeyframes = `\n@keyframes fadeSlideIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n`\n\nfunction StreamingList<T>({\n  items,\n  renderItem,\n  isStreaming = false,\n  className,\n  emptyMessage,\n}: StreamingListProps<T>) {\n  const reducedMotion = useReducedMotion()\n\n  if (items.length === 0 && !isStreaming) {\n    return emptyMessage ? (\n      <p className={twMerge('text-sm text-text-secondary', className)} data-testid=\"streaming-list-empty\">\n        {emptyMessage}\n      </p>\n    ) : null\n  }\n\n  return (\n    <ul\n      aria-live=\"polite\"\n      className={twMerge('list-none p-0 m-0', className)}\n      data-testid=\"streaming-list\"\n    >\n      {!reducedMotion && <style>{fadeSlideInKeyframes}</style>}\n      {items.map((item, index) => (\n        <li\n          key={index}\n          style={\n            reducedMotion\n              ? undefined\n              : { animation: 'fadeSlideIn 0.3s ease-out' }\n          }\n          data-testid=\"streaming-list-item\"\n        >\n          {renderItem(item, index)}\n        </li>\n      ))}\n      {isStreaming && (\n        <li data-testid=\"streaming-list-loading\">\n          <TypingIndicator />\n        </li>\n      )}\n    </ul>\n  )\n}\n\nexport { StreamingList }\nexport type { StreamingListProps }\n","import React from 'react'\nimport { twMerge } from 'tailwind-merge'\nimport { useReducedMotion } from '@surf-kit/hooks'\nimport { TextGlimmer } from '../TextGlimmer'\n\ntype StreamingStructureProps = {\n  data: Record<string, unknown>\n  isStreaming?: boolean\n  className?: string\n}\n\nconst fadeSlideInKeyframes = `\n@keyframes fadeSlideIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n`\n\nfunction renderValue(value: unknown, reducedMotion: boolean): React.ReactNode {\n  if (value === null) {\n    return <span className=\"italic text-text-secondary\">null</span>\n  }\n  if (value === undefined) {\n    return <span className=\"italic text-text-secondary\">undefined</span>\n  }\n  if (Array.isArray(value)) {\n    return (\n      <ol className=\"list-decimal pl-4 m-0\">\n        {value.map((item, i) => (\n          <li key={i} className=\"text-text-secondary text-sm\">\n            {renderValue(item, reducedMotion)}\n          </li>\n        ))}\n      </ol>\n    )\n  }\n  if (typeof value === 'object') {\n    return renderNestedDl(value as Record<string, unknown>, reducedMotion)\n  }\n  return String(value)\n}\n\nfunction renderNestedDl(\n  data: Record<string, unknown>,\n  reducedMotion: boolean,\n): React.ReactNode {\n  const entries = Object.entries(data)\n  return (\n    <dl className=\"pl-4 m-0\" data-testid=\"streaming-structure-nested\">\n      {entries.map(([key, value]) => (\n        <div\n          key={key}\n          style={\n            reducedMotion\n              ? undefined\n              : { animation: 'fadeSlideIn 0.3s ease-out' }\n          }\n        >\n          <dt className=\"font-medium text-text-primary text-sm\">{key}</dt>\n          <dd className=\"text-text-secondary text-sm ml-0 mb-3\">\n            {renderValue(value, reducedMotion)}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n\nfunction StreamingStructure({\n  data,\n  isStreaming = false,\n  className,\n}: StreamingStructureProps) {\n  const reducedMotion = useReducedMotion()\n  const entries = Object.entries(data)\n\n  return (\n    <dl\n      aria-live=\"polite\"\n      className={twMerge('m-0', className)}\n      data-testid=\"streaming-structure\"\n    >\n      {!reducedMotion && <style>{fadeSlideInKeyframes}</style>}\n      {entries.map(([key, value]) => (\n        <div\n          key={key}\n          style={\n            reducedMotion\n              ? undefined\n              : { animation: 'fadeSlideIn 0.3s ease-out' }\n          }\n          data-testid=\"streaming-structure-entry\"\n        >\n          <dt className=\"font-medium text-text-primary text-sm\">{key}</dt>\n          <dd className=\"text-text-secondary text-sm ml-0 mb-3\">\n            {renderValue(value, reducedMotion)}\n          </dd>\n        </div>\n      ))}\n      {isStreaming && (\n        <div data-testid=\"streaming-structure-loading\">\n          <TextGlimmer lines={1} />\n        </div>\n      )}\n    </dl>\n  )\n}\n\nexport { StreamingStructure }\nexport type { StreamingStructureProps }\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_core","import_jsx_runtime","import_core","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_hooks","import_jsx_runtime","import_tailwind_merge","import_hooks","import_jsx_runtime","import_tailwind_merge","import_hooks","import_jsx_runtime","import_tailwind_merge","import_hooks","import_jsx_runtime","fadeSlideInKeyframes"]}