@surf-kit/agent 0.1.1 → 0.2.1

package/dist/chat/index.js

@@ -0,0 +1,1239 @@
+// src/chat/AgentChat/AgentChat.tsx
+import { twMerge as twMerge8 } from "tailwind-merge";
+
+// src/hooks/useAgentChat.ts
+import { useReducer, useCallback, useRef } from "react";
+var initialState = {
+  messages: [],
+  conversationId: null,
+  isLoading: false,
+  error: null,
+  inputValue: "",
+  streamPhase: "idle",
+  streamingContent: ""
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_INPUT":
+      return { ...state, inputValue: action.value };
+    case "SEND_START":
+      return {
+        ...state,
+        messages: [...state.messages, action.message],
+        isLoading: true,
+        error: null,
+        inputValue: "",
+        streamPhase: "thinking",
+        streamingContent: ""
+      };
+    case "STREAM_PHASE":
+      return { ...state, streamPhase: action.phase };
+    case "STREAM_CONTENT":
+      return { ...state, streamingContent: state.streamingContent + action.content };
+    case "SEND_SUCCESS":
+      return {
+        ...state,
+        messages: [...state.messages, action.message],
+        conversationId: action.conversationId ?? state.conversationId,
+        isLoading: false,
+        streamPhase: "idle",
+        streamingContent: ""
+      };
+    case "SEND_ERROR":
+      return {
+        ...state,
+        isLoading: false,
+        error: action.error,
+        streamPhase: "idle",
+        streamingContent: ""
+      };
+    case "LOAD_CONVERSATION":
+      return {
+        ...state,
+        conversationId: action.conversationId,
+        messages: action.messages,
+        error: null
+      };
+    case "RESET":
+      return { ...initialState };
+    case "CLEAR_ERROR":
+      return { ...state, error: null };
+    default:
+      return state;
+  }
+}
+var msgIdCounter = 0;
+function generateMessageId() {
+  return `msg-${Date.now()}-${++msgIdCounter}`;
+}
+function useAgentChat(config) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const configRef = useRef(config);
+  configRef.current = config;
+  const lastUserMessageRef = useRef(null);
+  const sendMessage = useCallback(
+    async (content) => {
+      const { apiUrl, streamPath = "/chat/stream", headers = {}, timeout = 3e4 } = configRef.current;
+      lastUserMessageRef.current = content;
+      const userMessage = {
+        id: generateMessageId(),
+        role: "user",
+        content,
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      dispatch({ type: "SEND_START", message: userMessage });
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+      try {
+        const response = await fetch(`${apiUrl}${streamPath}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream",
+            ...headers
+          },
+          body: JSON.stringify({
+            message: content,
+            conversation_id: state.conversationId
+          }),
+          signal: controller.signal
+        });
+        clearTimeout(timeoutId);
+        if (!response.ok) {
+          dispatch({
+            type: "SEND_ERROR",
+            error: {
+              code: "API_ERROR",
+              message: `HTTP ${response.status}: ${response.statusText}`,
+              retryable: response.status >= 500
+            }
+          });
+          return;
+        }
+        const reader = response.body?.getReader();
+        if (!reader) {
+          dispatch({
+            type: "SEND_ERROR",
+            error: { code: "STREAM_ERROR", message: "No response body", retryable: true }
+          });
+          return;
+        }
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let accumulatedContent = "";
+        let agentResponse = null;
+        let capturedAgent = null;
+        let capturedConversationId = null;
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            const data = line.slice(6).trim();
+            if (data === "[DONE]") continue;
+            try {
+              const event = JSON.parse(data);
+              switch (event.type) {
+                case "agent":
+                  capturedAgent = event.agent;
+                  break;
+                case "phase":
+                  dispatch({ type: "STREAM_PHASE", phase: event.phase });
+                  break;
+                case "delta":
+                  accumulatedContent += event.content;
+                  dispatch({ type: "STREAM_CONTENT", content: event.content });
+                  break;
+                case "done":
+                  agentResponse = event.response;
+                  capturedConversationId = event.conversation_id ?? null;
+                  break;
+                case "error":
+                  dispatch({ type: "SEND_ERROR", error: event.error });
+                  return;
+              }
+            } catch {
+            }
+          }
+        }
+        const assistantMessage = {
+          id: generateMessageId(),
+          role: "assistant",
+          content: agentResponse?.message ?? accumulatedContent,
+          response: agentResponse ?? void 0,
+          agent: capturedAgent ?? void 0,
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        dispatch({
+          type: "SEND_SUCCESS",
+          message: assistantMessage,
+          streamingContent: accumulatedContent,
+          conversationId: capturedConversationId
+        });
+      } catch (err) {
+        clearTimeout(timeoutId);
+        if (err.name === "AbortError") {
+          dispatch({
+            type: "SEND_ERROR",
+            error: { code: "TIMEOUT", message: "Request timed out", retryable: true }
+          });
+        } else {
+          dispatch({
+            type: "SEND_ERROR",
+            error: {
+              code: "NETWORK_ERROR",
+              message: err.message ?? "Network error",
+              retryable: true
+            }
+          });
+        }
+      }
+    },
+    [state.conversationId]
+  );
+  const setInputValue = useCallback((value) => {
+    dispatch({ type: "SET_INPUT", value });
+  }, []);
+  const loadConversation = useCallback((conversationId, messages) => {
+    dispatch({ type: "LOAD_CONVERSATION", conversationId, messages });
+  }, []);
+  const submitFeedback = useCallback(
+    async (messageId, rating, comment) => {
+      const { apiUrl, feedbackPath = "/feedback", headers = {} } = configRef.current;
+      await fetch(`${apiUrl}${feedbackPath}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify({ messageId, rating, comment })
+      });
+    },
+    []
+  );
+  const retry = useCallback(async () => {
+    if (lastUserMessageRef.current) {
+      await sendMessage(lastUserMessageRef.current);
+    }
+  }, [sendMessage]);
+  const reset = useCallback(() => {
+    dispatch({ type: "RESET" });
+    lastUserMessageRef.current = null;
+  }, []);
+  const actions = {
+    sendMessage,
+    setInputValue,
+    loadConversation,
+    submitFeedback,
+    retry,
+    reset
+  };
+  return { state, actions };
+}
+
+// src/chat/MessageThread/MessageThread.tsx
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { useEffect, useRef as useRef2 } from "react";
+
+// src/chat/MessageBubble/MessageBubble.tsx
+import { twMerge as twMerge4 } from "tailwind-merge";
+
+// src/response/AgentResponse/AgentResponse.tsx
+import { Badge as Badge2 } from "@surf-kit/core";
+
+// src/response/ResponseMessage/ResponseMessage.tsx
+import ReactMarkdown from "react-markdown";
+import rehypeSanitize from "rehype-sanitize";
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+function normalizeMarkdownLists(content) {
+  return content.replace(/:\s+-\s+/g, ":\n\n- ");
+}
+function ResponseMessage({ content, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "text-sm leading-relaxed text-text-primary",
+        "[&_p]:my-2",
+        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
+        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6",
+        "[&_li]:my-1",
+        "[&_strong]:text-text-primary [&_strong]:font-semibold",
+        "[&_em]:text-text-secondary",
+        "[&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-text-primary [&_h1]:mt-4 [&_h1]:mb-2",
+        "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-text-primary [&_h2]:mt-3 [&_h2]:mb-1.5",
+        "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-accent [&_h3]:mt-2 [&_h3]:mb-1",
+        "[&_code]:bg-surface-raised [&_code]:text-accent [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",
+        "[&_pre]:bg-surface-raised [&_pre]:border [&_pre]:border-border [&_pre]:rounded-xl [&_pre]:p-4 [&_pre]:overflow-x-auto",
+        "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-4 [&_blockquote]:text-text-secondary",
+        "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
+        className
+      ),
+      "data-testid": "response-message",
+      children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            script: () => null,
+            iframe: () => null,
+            p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "my-2", children }),
+            ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "my-2 list-disc pl-6", children }),
+            ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "my-2 list-decimal pl-6", children }),
+            li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "my-1", children }),
+            strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+            h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-base font-bold mt-4 mb-2", children }),
+            h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
+            h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
+            code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
+          },
+          children: normalizeMarkdownLists(content)
+        }
+      )
+    }
+  );
+}
+
+// src/response/StructuredResponse/StructuredResponse.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function tryParse(value) {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "string") {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  return value;
+}
+function renderSteps(data) {
+  const steps = tryParse(data.steps);
+  if (!steps || !Array.isArray(steps)) return null;
+  return /* @__PURE__ */ jsx2("ol", { className: "flex flex-col gap-2", "data-testid": "structured-steps", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-white",
+        "aria-hidden": "true",
+        children: i + 1
+      }
+    ),
+    /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary leading-relaxed", children: step })
+  ] }, i)) });
+}
+function renderTable(data) {
+  const columns = tryParse(data.columns);
+  const rawRows = tryParse(data.rows);
+  if (columns && rawRows && Array.isArray(columns) && Array.isArray(rawRows)) {
+    return /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto rounded-lg border border-border", "data-testid": "structured-table", children: /* @__PURE__ */ jsxs("table", { role: "table", className: "w-full border-collapse text-sm", children: [
+      /* @__PURE__ */ jsx2("thead", { className: "bg-surface-raised", children: /* @__PURE__ */ jsx2("tr", { children: columns.map((col) => /* @__PURE__ */ jsx2(
+        "th",
+        {
+          className: "text-left px-4 py-2.5 font-semibold text-text-primary border-b border-border",
+          children: col
+        },
+        col
+      )) }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: rawRows.map((row, i) => {
+        const cells = Array.isArray(row) ? row : columns.map((col) => row[col]);
+        return /* @__PURE__ */ jsx2("tr", { className: "even:bg-surface-raised/40", children: cells.map((cell, j) => /* @__PURE__ */ jsx2("td", { className: "px-4 py-2 text-text-secondary border-b border-border", children: String(cell ?? "") }, j)) }, i);
+      }) })
+    ] }) });
+  }
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsx2("div", { className: "overflow-x-auto rounded-lg border border-border", "data-testid": "structured-table", children: /* @__PURE__ */ jsx2("table", { role: "table", className: "w-full border-collapse text-sm", children: /* @__PURE__ */ jsx2("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("tr", { className: "even:bg-surface-raised/40", children: [
+    /* @__PURE__ */ jsx2("td", { className: "px-4 py-2 text-text-primary font-medium border-b border-border w-1/3", children: key }),
+    /* @__PURE__ */ jsx2("td", { className: "px-4 py-2 text-text-secondary border-b border-border", children: typeof value === "object" ? JSON.stringify(value) : String(value ?? "") })
+  ] }, key)) }) }) });
+}
+function renderCard(data) {
+  const title = typeof data.title === "string" ? data.title : null;
+  const body = typeof data.body === "string" ? data.body : null;
+  const link = typeof data.link === "string" ? data.link : null;
+  const linkLabel = typeof data.link_label === "string" ? data.link_label : "Learn more";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-xl border border-border bg-surface-raised p-4 flex flex-col gap-2",
+      "data-testid": "structured-card",
+      children: [
+        title && /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold text-text-primary", children: title }),
+        body && /* @__PURE__ */ jsx2("p", { className: "text-sm text-text-secondary leading-relaxed", children: body }),
+        link && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-accent hover:text-accent/80 underline-offset-2 hover:underline transition-colors",
+            children: [
+              linkLabel,
+              /* @__PURE__ */ jsx2("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function renderList(data) {
+  const items = tryParse(data.items);
+  const title = typeof data.title === "string" ? data.title : null;
+  if (!items || !Array.isArray(items)) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", "data-testid": "structured-list", children: [
+    title && /* @__PURE__ */ jsx2("p", { className: "text-xs font-semibold uppercase tracking-wider text-text-secondary mb-1", children: title }),
+    /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-1.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
+      /* @__PURE__ */ jsx2("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary leading-relaxed", children: item })
+    ] }, i)) })
+  ] });
+}
+function renderWarning(data) {
+  const severity = typeof data.severity === "string" ? data.severity : "medium";
+  const action = typeof data.action === "string" ? data.action : null;
+  const details = typeof data.details === "string" ? data.details : null;
+  const isHigh = severity === "high";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: `rounded-xl border p-4 flex gap-3 ${isHigh ? "border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30" : "border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30"}`,
+      "data-testid": "structured-warning",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            className: `mt-0.5 h-5 w-5 shrink-0 ${isHigh ? "text-red-500" : "text-amber-500"}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          action && /* @__PURE__ */ jsx2("p", { className: `text-sm font-semibold ${isHigh ? "text-red-700 dark:text-red-300" : "text-amber-700 dark:text-amber-300"}`, children: action }),
+          details && /* @__PURE__ */ jsx2("p", { className: `text-sm ${isHigh ? "text-red-600 dark:text-red-400" : "text-amber-600 dark:text-amber-400"}`, children: details })
+        ] })
+      ]
+    }
+  );
+}
+function StructuredResponse({ uiHint, data, className }) {
+  if (!data) return null;
+  let content;
+  switch (uiHint) {
+    case "steps":
+      content = renderSteps(data);
+      break;
+    case "table":
+      content = renderTable(data);
+      break;
+    case "card":
+      content = renderCard(data);
+      break;
+    case "list":
+      content = renderList(data);
+      break;
+    case "warning":
+      content = renderWarning(data);
+      break;
+    case "text":
+      content = typeof data.text === "string" ? /* @__PURE__ */ jsx2("p", { "data-testid": "structured-text", children: data.text }) : null;
+      break;
+    default:
+      content = null;
+  }
+  if (!content) return null;
+  return /* @__PURE__ */ jsx2("div", { className, "data-testid": "structured-response", children: content });
+}
+
+// src/sources/SourceList/SourceList.tsx
+import { useState } from "react";
+
+// src/sources/SourceCard/SourceCard.tsx
+import { Badge } from "@surf-kit/core";
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function getConfidenceIntent(confidence) {
+  if (confidence >= 0.8) return "success";
+  if (confidence >= 0.5) return "warning";
+  return "error";
+}
+function getConfidenceLabel(confidence) {
+  if (confidence >= 0.8) return "High";
+  if (confidence >= 0.5) return "Medium";
+  return "Low";
+}
+function SourceCard({ source, variant = "compact", onNavigate, className }) {
+  const handleClick = () => {
+    if (onNavigate) {
+      onNavigate(source);
+    }
+  };
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: twMerge2(
+        "rounded-xl border transition-all duration-200",
+        "bg-surface border-border",
+        onNavigate && "cursor-pointer hover:border-border-strong",
+        className
+      ),
+      "data-document-id": source.document_id,
+      "data-testid": "source-card",
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: isCompact ? "px-4 py-3" : "px-6 py-4",
+          onClick: handleClick,
+          role: onNavigate ? "button" : void 0,
+          tabIndex: onNavigate ? 0 : void 0,
+          onKeyDown: onNavigate ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleClick();
+            }
+          } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
+                source.section && /* @__PURE__ */ jsx3("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-text-secondary truncate mt-0.5", children: source.section })
+              ] }),
+              /* @__PURE__ */ jsx3(
+                Badge,
+                {
+                  intent: getConfidenceIntent(source.confidence),
+                  size: "sm",
+                  children: getConfidenceLabel(source.confidence)
+                }
+              )
+            ] }),
+            !isCompact && /* @__PURE__ */ jsx3("p", { className: "text-xs text-text-secondary mt-2 line-clamp-3 leading-relaxed", children: source.snippet })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/sources/SourceList/SourceList.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function SourceList({
+  sources,
+  variant = "compact",
+  collapsible = false,
+  defaultExpanded = true,
+  onNavigate,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  if (sources.length === 0) return null;
+  const content = /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1.5", "data-testid": "source-list-items", children: sources.map((source) => /* @__PURE__ */ jsx4(
+    SourceCard,
+    {
+      source,
+      variant,
+      onNavigate
+    },
+    source.document_id
+  )) });
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx4("div", { className, "data-testid": "source-list", children: content });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className, "data-testid": "source-list", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsExpanded((prev) => !prev),
+        "aria-expanded": isExpanded,
+        className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary hover:text-accent mb-2 transition-colors duration-200",
+        children: [
+          /* @__PURE__ */ jsx4(
+            "svg",
+            {
+              className: `w-4 h-4 transition-transform ${isExpanded ? "rotate-180" : ""}`,
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            }
+          ),
+          "Sources (",
+          sources.length,
+          ")"
+        ]
+      }
+    ),
+    isExpanded && content
+  ] });
+}
+
+// src/response/FollowUpChips/FollowUpChips.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function FollowUpChips({ suggestions, onSelect, className }) {
+  if (suggestions.length === 0) return null;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: twMerge3("flex flex-wrap gap-2 py-1", className),
+      role: "group",
+      "aria-label": "Follow-up suggestions",
+      "data-testid": "follow-up-chips",
+      children: suggestions.map((suggestion) => /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(suggestion),
+          className: twMerge3(
+            "px-4 py-1.5 rounded-full text-sm whitespace-nowrap",
+            "border border-border bg-transparent text-text-secondary",
+            "hover:bg-accent/10 hover:border-interactive hover:text-text-primary",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+            "transition-all duration-200"
+          ),
+          children: suggestion
+        },
+        suggestion
+      ))
+    }
+  );
+}
+
+// src/response/AgentResponse/AgentResponse.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function getConfidenceIntent2(overall) {
+  if (overall === "high") return "success";
+  if (overall === "medium") return "warning";
+  return "error";
+}
+function getVerificationIntent(status) {
+  if (status === "passed") return "success";
+  if (status === "flagged") return "warning";
+  return "error";
+}
+function getVerificationLabel(status) {
+  if (status === "passed") return "Verified";
+  if (status === "flagged") return "Flagged";
+  return "Failed";
+}
+function AgentResponse({
+  response,
+  showSources = true,
+  showConfidence = false,
+  showVerification = false,
+  onFollowUp,
+  onNavigateSource,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: `flex flex-col gap-4 ${className ?? ""}`, "data-testid": "agent-response", children: [
+    /* @__PURE__ */ jsx6(ResponseMessage, { content: response.message }),
+    response.ui_hint !== "text" && response.structured_data && /* @__PURE__ */ jsx6(
+      StructuredResponse,
+      {
+        uiHint: response.ui_hint,
+        data: response.structured_data
+      }
+    ),
+    (showConfidence || showVerification) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2 mt-1", "data-testid": "response-meta", children: [
+      showConfidence && /* @__PURE__ */ jsxs4(
+        Badge2,
+        {
+          intent: getConfidenceIntent2(response.confidence.overall),
+          size: "sm",
+          children: [
+            response.confidence.overall,
+            " confidence"
+          ]
+        }
+      ),
+      showVerification && /* @__PURE__ */ jsxs4(
+        Badge2,
+        {
+          intent: getVerificationIntent(response.verification.status),
+          size: "sm",
+          children: [
+            getVerificationLabel(response.verification.status),
+            " (",
+            response.verification.claims_verified,
+            "/",
+            response.verification.claims_checked,
+            ")"
+          ]
+        }
+      )
+    ] }),
+    showSources && response.sources.length > 0 && /* @__PURE__ */ jsx6(
+      SourceList,
+      {
+        sources: response.sources,
+        variant: "compact",
+        collapsible: true,
+        defaultExpanded: false,
+        onNavigate: onNavigateSource
+      }
+    ),
+    response.follow_up_suggestions.length > 0 && onFollowUp && /* @__PURE__ */ jsx6(
+      FollowUpChips,
+      {
+        suggestions: response.follow_up_suggestions,
+        onSelect: onFollowUp
+      }
+    )
+  ] });
+}
+
+// src/chat/MessageBubble/MessageBubble.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function MessageBubble({
+  message,
+  showAgent,
+  showSources = true,
+  showConfidence = true,
+  showVerification = true,
+  animated = true,
+  className
+}) {
+  const isUser = message.role === "user";
+  if (isUser) {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "data-message-id": message.id,
+        className: twMerge4("flex w-full justify-end", className),
+        children: /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: twMerge4(
+              "max-w-[70%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-accent text-brand-cream break-words whitespace-pre-wrap text-sm leading-relaxed",
+              animated && "motion-safe:animate-slideFromRight"
+            ),
+            children: message.content
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-message-id": message.id,
+      className: twMerge4("flex w-full flex-col items-start gap-1.5", className),
+      children: [
+        showAgent && message.agent && /* @__PURE__ */ jsx7("div", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: twMerge4(
+              "max-w-[88%] rounded-[18px] rounded-tl-[4px] px-4 py-3 bg-surface border border-border",
+              animated && "motion-safe:animate-springFromLeft"
+            ),
+            children: message.response ? /* @__PURE__ */ jsx7(
+              AgentResponse,
+              {
+                response: message.response,
+                showSources,
+                showConfidence,
+                showVerification
+              }
+            ) : /* @__PURE__ */ jsx7(ResponseMessage, { content: message.content })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/chat/MessageThread/MessageThread.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function MessageThread({ messages, streamingSlot, showSources, showConfidence, showVerification, className }) {
+  const bottomRef = useRef2(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView?.({ behavior: "smooth" });
+  }, [messages.length, streamingSlot]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      role: "log",
+      "aria-live": "polite",
+      "aria-label": "Message thread",
+      className: twMerge5(
+        "flex flex-col gap-4 overflow-y-auto flex-1 px-4 py-6",
+        className
+      ),
+      children: [
+        messages.map((message) => /* @__PURE__ */ jsx8(
+          MessageBubble,
+          {
+            message,
+            showSources,
+            showConfidence,
+            showVerification
+          },
+          message.id
+        )),
+        streamingSlot,
+        /* @__PURE__ */ jsx8("div", { ref: bottomRef })
+      ]
+    }
+  );
+}
+
+// src/chat/MessageComposer/MessageComposer.tsx
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { useState as useState2, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function MessageComposer({
+  onSend,
+  isLoading = false,
+  placeholder = "Type a message...",
+  className
+}) {
+  const [value, setValue] = useState2("");
+  const textareaRef = useRef3(null);
+  const canSend = value.trim().length > 0 && !isLoading;
+  const resetHeight = useCallback2(() => {
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.overflowY = "hidden";
+    }
+  }, []);
+  const handleSend = useCallback2(() => {
+    if (!canSend) return;
+    onSend(value.trim());
+    setValue("");
+    resetHeight();
+    textareaRef.current?.focus();
+  }, [canSend, onSend, value, resetHeight]);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleChange = useCallback2(
+    (e) => {
+      setValue(e.target.value);
+      const el = e.target;
+      el.style.height = "auto";
+      const capped = Math.min(el.scrollHeight, 128);
+      el.style.height = `${capped}px`;
+      el.style.overflowY = el.scrollHeight > 128 ? "auto" : "hidden";
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: twMerge6(
+        "flex items-end gap-3 shrink-0 border-t border-border px-4 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx9(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            placeholder,
+            rows: 1,
+            disabled: isLoading,
+            className: twMerge6(
+              "flex-1 resize-none rounded-xl border border-border bg-surface/80",
+              "px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted",
+              "focus:border-transparent focus:ring-2 focus:ring-accent/40 focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "overflow-hidden",
+              "transition-all duration-200"
+            ),
+            style: { colorScheme: "dark" },
+            "aria-label": "Message input"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: handleSend,
+            disabled: !value.trim() || isLoading,
+            "aria-label": "Send message",
+            className: twMerge6(
+              "inline-flex items-center justify-center rounded-xl px-5 py-2.5",
+              "text-sm font-semibold text-white shrink-0",
+              "transition-all duration-200",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+              value.trim() && !isLoading ? "bg-accent hover:bg-accent-hover hover:scale-[1.02] hover:shadow-glow-cyan active:scale-[0.98]" : "bg-accent/30 text-text-muted cursor-not-allowed"
+            ),
+            children: "Send"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/chat/WelcomeScreen/WelcomeScreen.tsx
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function WelcomeScreen({
+  title = "Welcome",
+  message = "How can I help you today?",
+  icon,
+  suggestedQuestions = [],
+  onQuestionSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: twMerge7(
+        "flex flex-1 flex-col items-center justify-center gap-8 p-8 text-center motion-safe:animate-fadeUp",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
+            "aria-hidden": "true",
+            children: icon ?? /* @__PURE__ */ jsx10("span", { className: "text-2xl", children: "\u2726" })
+          }
+        ),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
+          title && /* @__PURE__ */ jsx10("h2", { className: "text-3xl font-bold text-text-primary", children: title }),
+          /* @__PURE__ */ jsx10("p", { className: "text-text-secondary text-base leading-relaxed max-w-md", children: message })
+        ] }),
+        suggestedQuestions.length > 0 && /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "flex flex-wrap justify-center gap-2 max-w-md",
+            role: "group",
+            "aria-label": "Suggested questions",
+            children: suggestedQuestions.map((question) => /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                onClick: () => onQuestionSelect?.(question),
+                className: twMerge7(
+                  "px-4 py-2 rounded-full text-sm",
+                  "border border-border bg-transparent text-text-secondary",
+                  "hover:bg-accent/10 hover:border-interactive hover:text-text-primary",
+                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                  "transition-colors duration-200"
+                ),
+                children: question
+              },
+              question
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingMessage/StreamingMessage.tsx
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
+import { Spinner } from "@surf-kit/core";
+
+// src/hooks/useCharacterDrain.ts
+import { useState as useState3, useRef as useRef4, useEffect as useEffect2 } from "react";
+function useCharacterDrain(target, msPerChar = 15) {
+  const [displayed, setDisplayed] = useState3("");
+  const indexRef = useRef4(0);
+  const lastTimeRef = useRef4(0);
+  const rafRef = useRef4(null);
+  const drainTargetRef = useRef4("");
+  const msPerCharRef = useRef4(msPerChar);
+  msPerCharRef.current = msPerChar;
+  if (target !== "") {
+    drainTargetRef.current = target;
+  }
+  const drainTarget = drainTargetRef.current;
+  const isDraining = displayed.length < drainTarget.length;
+  const tickRef = useRef4(() => {
+  });
+  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;
+    }
+  };
+  useEffect2(() => {
+    if (drainTargetRef.current !== "" && indexRef.current < drainTargetRef.current.length && rafRef.current === null) {
+      rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
+    }
+  }, [drainTarget]);
+  useEffect2(() => {
+    if (target === "" && !isDraining && displayed !== "") {
+      indexRef.current = 0;
+      lastTimeRef.current = 0;
+      drainTargetRef.current = "";
+      setDisplayed("");
+    }
+  }, [target, isDraining, displayed]);
+  useEffect2(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return { displayed, isDraining };
+}
+
+// src/streaming/StreamingMessage/StreamingMessage.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "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 = useRef5(onComplete);
+  onCompleteRef.current = onComplete;
+  const wasActiveRef = useRef5(stream.active);
+  useEffect3(() => {
+    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__ */ jsxs9("div", { className, "data-testid": "streaming-message", children: [
+    /* @__PURE__ */ jsxs9("div", { "aria-live": "assertive", className: "sr-only", children: [
+      stream.active && stream.phase !== "idle" && "Response started",
+      !stream.active && stream.content && "Response complete"
+    ] }),
+    /* @__PURE__ */ jsxs9("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__ */ jsxs9(
+        "div",
+        {
+          className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
+          "data-testid": "phase-indicator",
+          children: [
+            /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx11(Spinner, { size: "sm" }) }),
+            /* @__PURE__ */ jsx11("span", { children: phaseLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
+        displayedContent,
+        stream.active && /* @__PURE__ */ jsx11(
+          "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/chat/AgentChat/AgentChat.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function AgentChat({
+  endpoint,
+  title = "Chat",
+  welcomeTitle,
+  welcomeMessage = "How can I help you today?",
+  suggestedQuestions = [],
+  showHeader = true,
+  showWelcomeTitle = true,
+  showSources,
+  showConfidence,
+  showVerification,
+  className
+}) {
+  const { state, actions } = useAgentChat({ apiUrl: endpoint });
+  const hasMessages = state.messages.length > 0;
+  const handleSend = (content) => {
+    void actions.sendMessage(content);
+  };
+  const handleQuestionSelect = (question) => {
+    void actions.sendMessage(question);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: twMerge8(
+        "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
+        className
+      ),
+      children: [
+        showHeader && /* @__PURE__ */ jsx12("div", { className: "flex items-center justify-between border-b border-border px-4 py-3 bg-surface-raised shrink-0", children: /* @__PURE__ */ jsx12("h1", { className: "text-base font-semibold text-text-primary", children: title }) }),
+        hasMessages ? /* @__PURE__ */ jsx12(
+          MessageThread,
+          {
+            messages: state.messages,
+            streamingSlot: state.isLoading ? /* @__PURE__ */ jsx12(
+              StreamingMessage,
+              {
+                stream: {
+                  active: state.isLoading,
+                  phase: state.streamPhase,
+                  content: state.streamingContent,
+                  sources: [],
+                  agent: null,
+                  agentLabel: null
+                }
+              }
+            ) : void 0,
+            showSources,
+            showConfidence,
+            showVerification
+          }
+        ) : /* @__PURE__ */ jsx12(
+          WelcomeScreen,
+          {
+            title: showWelcomeTitle ? welcomeTitle ?? title : "",
+            message: welcomeMessage,
+            suggestedQuestions,
+            onQuestionSelect: handleQuestionSelect
+          }
+        ),
+        /* @__PURE__ */ jsx12(MessageComposer, { onSend: handleSend, isLoading: state.isLoading })
+      ]
+    }
+  );
+}
+
+// src/chat/ConversationList/ConversationList.tsx
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function ConversationList({
+  conversations,
+  activeId,
+  onSelect,
+  onDelete,
+  onNew,
+  className
+}) {
+  return /* @__PURE__ */ jsxs11(
+    "nav",
+    {
+      "aria-label": "Conversation list",
+      className: twMerge9("flex flex-col h-full bg-canvas", className),
+      children: [
+        onNew && /* @__PURE__ */ jsx13("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            onClick: onNew,
+            className: "w-full px-4 py-2.5 rounded-xl text-sm font-semibold bg-accent text-white hover:bg-accent-hover transition-all duration-200",
+            children: "New conversation"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs11("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
+          conversations.map((conversation) => {
+            const isActive = conversation.id === activeId;
+            return /* @__PURE__ */ jsxs11(
+              "li",
+              {
+                className: twMerge9(
+                  "flex items-start border-b border-border transition-colors duration-200",
+                  "hover:bg-surface",
+                  isActive && "bg-surface-raised border-l-2 border-l-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onSelect(conversation.id),
+                      "aria-current": isActive ? "true" : void 0,
+                      className: "flex-1 min-w-0 text-left px-4 py-3",
+                      children: [
+                        /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
+                        /* @__PURE__ */ jsx13("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
+                      ]
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ jsx13(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onDelete(conversation.id),
+                      "aria-label": `Delete ${conversation.title}`,
+                      className: "shrink-0 p-1.5 m-2 rounded-lg text-brand-cream/25 hover:text-brand-watermelon hover:bg-brand-watermelon/10 transition-colors duration-200",
+                      children: /* @__PURE__ */ jsxs11(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ jsx13("polyline", { points: "3 6 5 6 21 6" }),
+                            /* @__PURE__ */ jsx13("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              conversation.id
+            );
+          }),
+          conversations.length === 0 && /* @__PURE__ */ jsx13("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsx13("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  AgentChat,
+  ConversationList,
+  MessageBubble,
+  MessageComposer,
+  MessageThread,
+  WelcomeScreen
+};
+//# sourceMappingURL=index.js.map