@surf-kit/agent 0.3.0 → 0.4.0

package/dist/chat/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ChatMessage, A as Attachment, b as ConversationSummary } from '../chat-BIIDOGrD.js';
+import { a as ChatMessage, A as Attachment, b as ConversationSummary } from '../chat-CcKc6OAR.js';
 import React from 'react';
 import '../agent-BNSmiexZ.js';
 
@@ -47,11 +47,12 @@ declare function MessageBubble({ message, showAgent, showSources, showConfidence
 
 type MessageComposerProps = {
     onSend: (content: string, attachments?: Attachment[]) => void;
+    onStop?: () => void;
     isLoading?: boolean;
     placeholder?: string;
     className?: string;
 };
-declare function MessageComposer({ onSend, isLoading, placeholder, className, }: MessageComposerProps): react_jsx_runtime.JSX.Element;
+declare function MessageComposer({ onSend, onStop, isLoading, placeholder, className, }: MessageComposerProps): react_jsx_runtime.JSX.Element;
 
 type WelcomeScreenProps = {
     title?: string;

package/dist/chat/index.js

@@ -34,6 +34,8 @@ function reducer(state, action) {
       return { ...state, streamPhase: action.phase };
     case "STREAM_CONTENT":
       return { ...state, streamingContent: state.streamingContent + action.content };
+    case "STREAM_CONTENT_RESET":
+      return { ...state, streamingContent: "" };
     case "STREAM_AGENT":
       return { ...state, streamingAgent: action.agent };
     case "SEND_SUCCESS":
@@ -79,6 +81,7 @@ function useAgentChat(config) {
   configRef.current = config;
   const lastUserMessageRef = useRef(null);
   const lastUserAttachmentsRef = useRef(void 0);
+  const abortControllerRef = useRef(null);
   const sendMessage = useCallback(
     async (content, attachments) => {
       const { apiUrl, streamPath = "/chat/stream", headers: headersOrFn, timeout = 3e4, bodyExtra } = configRef.current;
@@ -94,7 +97,15 @@ function useAgentChat(config) {
       };
       dispatch({ type: "SEND_START", message: userMessage });
       const controller = new AbortController();
+      abortControllerRef.current = controller;
       const timeoutId = setTimeout(() => controller.abort(), timeout);
+      const ctx = {
+        accumulatedContent: "",
+        agentResponse: null,
+        capturedAgent: null,
+        capturedConversationId: null,
+        hadStreamError: false
+      };
       try {
         const url = `${apiUrl}${streamPath}`;
         const mergedHeaders = {
@@ -115,13 +126,6 @@ function useAgentChat(config) {
           }));
         }
         const body = JSON.stringify(requestBody);
-        const ctx = {
-          accumulatedContent: "",
-          agentResponse: null,
-          capturedAgent: null,
-          capturedConversationId: null,
-          hadStreamError: false
-        };
         const handleEvent = (event) => {
           switch (event.type) {
             case "agent":
@@ -135,6 +139,10 @@ function useAgentChat(config) {
               ctx.accumulatedContent += event.content;
               dispatch({ type: "STREAM_CONTENT", content: event.content });
               break;
+            case "delta_reset":
+              ctx.accumulatedContent = "";
+              dispatch({ type: "STREAM_CONTENT_RESET" });
+              break;
             case "done":
               ctx.agentResponse = event.response;
               ctx.capturedConversationId = event.conversation_id ?? null;
@@ -218,10 +226,26 @@ function useAgentChat(config) {
       } catch (err) {
         clearTimeout(timeoutId);
         if (err.name === "AbortError") {
-          dispatch({
-            type: "SEND_ERROR",
-            error: { code: "TIMEOUT", message: "Request timed out", retryable: true }
-          });
+          if (ctx.accumulatedContent) {
+            const partialMessage = {
+              id: generateMessageId(),
+              role: "assistant",
+              content: ctx.accumulatedContent,
+              agent: ctx.capturedAgent ?? void 0,
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            dispatch({
+              type: "SEND_SUCCESS",
+              message: partialMessage,
+              streamingContent: ctx.accumulatedContent,
+              conversationId: ctx.capturedConversationId
+            });
+          } else {
+            dispatch({
+              type: "SEND_ERROR",
+              error: { code: "ABORTED", message: "Request stopped", retryable: true }
+            });
+          }
         } else {
           dispatch({
             type: "SEND_ERROR",
@@ -232,6 +256,8 @@ function useAgentChat(config) {
             }
           });
         }
+      } finally {
+        abortControllerRef.current = null;
       }
     },
     [state.conversationId]
@@ -259,6 +285,9 @@ function useAgentChat(config) {
       await sendMessage(lastUserMessageRef.current, lastUserAttachmentsRef.current);
     }
   }, [sendMessage]);
+  const stop = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
   const reset = useCallback(() => {
     dispatch({ type: "RESET" });
     lastUserMessageRef.current = null;
@@ -270,6 +299,7 @@ function useAgentChat(config) {
     loadConversation,
     submitFeedback,
     retry,
+    stop,
     reset
   };
   return { state, actions };
@@ -289,6 +319,7 @@ import { Badge as Badge2 } from "@surf-kit/core";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
 import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
 function normalizeMarkdownLists(content) {
@@ -313,6 +344,10 @@ function ResponseMessage({ content, className }) {
         "[&_pre]:bg-surface-raised [&_pre]:border [&_pre]:border-border [&_pre]:rounded-xl [&_pre]:p-4 [&_pre]:overflow-x-auto",
         "[&_hr]:my-3 [&_hr]:border-border",
         "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-4 [&_blockquote]:text-text-secondary",
+        "[&_table]:w-full [&_table]:text-sm [&_table]:border-collapse [&_table]:my-2",
+        "[&_thead]:border-b [&_thead]:border-border",
+        "[&_th]:text-left [&_th]:px-2 [&_th]:py-1.5 [&_th]:font-semibold",
+        "[&_td]:px-2 [&_td]:py-1.5 [&_td]:border-t [&_td]:border-border/50",
         "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
         className
       ),
@@ -320,6 +355,7 @@ function ResponseMessage({ content, className }) {
       children: /* @__PURE__ */ jsx(
         ReactMarkdown,
         {
+          remarkPlugins: [remarkGfm],
           rehypePlugins: [rehypeSanitize],
           components: {
             script: () => null,
@@ -345,7 +381,11 @@ function ResponseMessage({ content, className }) {
             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 }),
             hr: () => /* @__PURE__ */ jsx("hr", { className: "my-3 border-border" }),
-            code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
+            code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children }),
+            table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-2", children: /* @__PURE__ */ jsx("table", { className: "w-full text-sm border-collapse", children }) }),
+            thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "border-b border-border", children }),
+            th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "text-left px-2 py-1.5 font-semibold", children }),
+            td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 border-t border-border/50", children })
           },
           children: normalizeMarkdownLists(content)
         }
@@ -355,7 +395,9 @@ function ResponseMessage({ content, className }) {
 }
 
 // src/response/StructuredResponse/StructuredResponse.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import ReactMarkdown2 from "react-markdown";
+import rehypeSanitize2 from "rehype-sanitize";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function tryParse(value) {
   if (value === void 0 || value === null) return null;
   if (typeof value === "string") {
@@ -367,6 +409,25 @@ function tryParse(value) {
   }
   return value;
 }
+function InlineMarkdown({ text }) {
+  return /* @__PURE__ */ jsx2(
+    ReactMarkdown2,
+    {
+      rehypePlugins: [rehypeSanitize2],
+      components: {
+        // Unwrap block-level <p> so content stays inline within its parent
+        p: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }),
+        strong: ({ children }) => /* @__PURE__ */ jsx2("strong", { className: "font-semibold", children }),
+        em: ({ children }) => /* @__PURE__ */ jsx2("em", { className: "italic", children }),
+        code: ({ children }) => /* @__PURE__ */ jsx2("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children }),
+        // Prevent block elements that would break layout
+        script: () => null,
+        iframe: () => null
+      },
+      children: text
+    }
+  );
+}
 function renderSteps(data) {
   const steps = tryParse(data.steps);
   if (!steps || !Array.isArray(steps)) return null;
@@ -379,7 +440,7 @@ function renderSteps(data) {
         children: i + 1
       }
     ),
-    /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary leading-relaxed", children: step })
+    /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ jsx2(InlineMarkdown, { text: step }) })
   ] }, i)) });
 }
 function renderTable(data) {
@@ -445,7 +506,7 @@ function renderList(data) {
     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 })
+      /* @__PURE__ */ jsx2("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ jsx2(InlineMarkdown, { text: item }) })
     ] }, i)) })
   ] });
 }
@@ -884,24 +945,46 @@ function MessageBubble({
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageThread({ messages, streamingSlot, showAgent, showSources, showConfidence, showVerification, hideLastAssistant, userBubbleClassName, className }) {
   const scrollRef = useRef2(null);
-  const isNearBottom = useRef2(true);
-  const isProgrammaticScroll = useRef2(false);
+  const shouldAutoScroll = useRef2(true);
   const hasStreaming = !!streamingSlot;
   const scrollToBottom = useCallback2(() => {
     const el = scrollRef.current;
-    if (el && isNearBottom.current) {
-      isProgrammaticScroll.current = true;
+    if (el && shouldAutoScroll.current) {
       el.scrollTop = el.scrollHeight;
     }
   }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (e.deltaY < 0) {
+        shouldAutoScroll.current = false;
+      }
+    };
+    const onPointerDown = () => {
+      el.dataset.userPointer = "1";
+    };
+    const onPointerUp = () => {
+      delete el.dataset.userPointer;
+    };
+    el.addEventListener("wheel", onWheel, { passive: true });
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointerup", onPointerUp);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+  }, []);
   const handleScroll = useCallback2(() => {
-    if (isProgrammaticScroll.current) {
-      isProgrammaticScroll.current = false;
-      return;
-    }
     const el = scrollRef.current;
     if (!el) return;
-    isNearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+    if (nearBottom) {
+      shouldAutoScroll.current = true;
+    } else if (el.dataset.userPointer) {
+      shouldAutoScroll.current = false;
+    }
   }, []);
   useEffect(scrollToBottom, [messages.length, scrollToBottom]);
   useEffect(() => {
@@ -914,6 +997,11 @@ function MessageThread({ messages, streamingSlot, showAgent, showSources, showCo
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [hasStreaming, scrollToBottom]);
+  useEffect(() => {
+    if (!hasStreaming) {
+      shouldAutoScroll.current = true;
+    }
+  }, [hasStreaming]);
   return /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -1045,6 +1133,7 @@ function AttachmentPreview({
 }
 function MessageComposer({
   onSend,
+  onStop,
   isLoading = false,
   placeholder = "Type a message...",
   className
@@ -1254,16 +1343,16 @@ function MessageComposer({
             "button",
             {
               type: "button",
-              onClick: handleSend,
-              disabled: !canSend,
-              "aria-label": "Send message",
+              onClick: isLoading && onStop ? onStop : handleSend,
+              disabled: !canSend && !isLoading,
+              "aria-label": isLoading ? "Stop generating" : "Send message",
               className: twMerge6(
                 "absolute bottom-3 right-3",
                 "inline-flex items-center justify-center",
                 "w-9 h-9 rounded-full",
                 "transition-all duration-200",
                 "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-                canSend ? "bg-accent text-white hover:bg-accent-hover active:scale-90 shadow-md shadow-accent/25" : isLoading ? "bg-text-muted/20 text-text-secondary hover:bg-text-muted/30" : "bg-transparent text-text-muted/40 cursor-default"
+                canSend ? "bg-accent text-white hover:bg-accent-hover active:scale-90 shadow-md shadow-accent/25" : isLoading ? "bg-text-muted/20 text-text-secondary hover:bg-text-muted/30 cursor-pointer" : "bg-transparent text-text-muted/40 cursor-default"
               ),
               children: isLoading ? /* @__PURE__ */ jsx9(StopIcon, {}) : /* @__PURE__ */ jsx9(ArrowUpIcon, {})
             }
@@ -1419,9 +1508,10 @@ var phaseLabels = {
   verifying: "Verifying..."
 };
 var CURSOR_STYLES = `
-.sk-streaming-cursor > :not(ul,ol,blockquote):last-child::after,
+.sk-streaming-cursor > :not(ul,ol,blockquote,div:has(table)):last-child::after,
 .sk-streaming-cursor > :is(ul,ol):last-child > li:last-child::after,
-.sk-streaming-cursor > blockquote:last-child > p:last-child::after {
+.sk-streaming-cursor > blockquote:last-child > p:last-child::after,
+.sk-streaming-cursor > div:has(table):last-child table tbody tr:last-child td:last-child::after {
   content: "";
   display: inline-block;
   width: 2px;
@@ -1555,7 +1645,7 @@ function AgentChat({
             onQuestionSelect: handleQuestionSelect
           }
         ),
-        /* @__PURE__ */ jsx12(MessageComposer, { onSend: handleSend, isLoading: state.isLoading })
+        /* @__PURE__ */ jsx12(MessageComposer, { onSend: handleSend, onStop: actions.stop, isLoading: state.isLoading })
       ]
     }
   );
@@ -1576,14 +1666,14 @@ function ConversationList({
     "nav",
     {
       "aria-label": "Conversation list",
-      className: twMerge10("flex flex-col h-full bg-canvas", className),
+      className: twMerge10("flex flex-col flex-1 min-h-0", className),
       children: [
-        onNew && /* @__PURE__ */ jsx13("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx13(
+        onNew && /* @__PURE__ */ jsx13("div", { className: "px-5 pt-1 pb-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",
+            className: "w-full px-4 py-2 rounded-lg text-sm font-medium border border-border text-text-secondary hover:text-text-primary hover:bg-surface hover:border-border-strong transition-colors duration-150",
             children: "New conversation"
           }
         ) }),
@@ -1594,9 +1684,9 @@ function ConversationList({
               "li",
               {
                 className: twMerge10(
-                  "flex items-start border-b border-border transition-colors duration-200",
-                  "hover:bg-surface",
-                  isActive && "bg-surface-raised border-l-2 border-l-accent"
+                  "flex items-start transition-colors duration-150",
+                  "hover:bg-surface-raised",
+                  isActive ? "bg-accent-subtlest border-l-[3px] border-l-accent" : "border-l-[3px] border-l-transparent"
                 ),
                 children: [
                   /* @__PURE__ */ jsxs11(
@@ -1605,10 +1695,10 @@ function ConversationList({
                       type: "button",
                       onClick: () => onSelect(conversation.id),
                       "aria-current": isActive ? "true" : void 0,
-                      className: "flex-1 min-w-0 text-left px-4 py-3",
+                      className: "flex-1 min-w-0 text-left px-5 py-2.5",
                       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 })
+                        /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-text-primary truncate", children: conversation.title }),
+                        /* @__PURE__ */ jsx13("div", { className: "text-xs text-text-muted truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
                       ]
                     }
                   ),
@@ -1618,7 +1708,7 @@ function ConversationList({
                       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",
+                      className: "shrink-0 p-1.5 m-2 rounded-lg text-text-muted hover:text-status-error hover:bg-status-error/10 transition-colors duration-150",
                       children: /* @__PURE__ */ jsxs11(
                         "svg",
                         {
@@ -1645,7 +1735,7 @@ function ConversationList({
               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" }) })
+          conversations.length === 0 && /* @__PURE__ */ jsx13("li", { className: "px-5 py-12 text-center", children: /* @__PURE__ */ jsx13("span", { className: "text-sm text-text-muted font-body", children: "No conversations yet" }) })
         ] })
       ]
     }