@surf-kit/agent 0.3.0 → 0.4.0

package/dist/layouts/index.cjs

@@ -76,6 +76,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":
@@ -121,6 +123,7 @@ function useAgentChat(config) {
   configRef.current = config;
   const lastUserMessageRef = (0, import_react.useRef)(null);
   const lastUserAttachmentsRef = (0, import_react.useRef)(void 0);
+  const abortControllerRef = (0, import_react.useRef)(null);
   const sendMessage = (0, import_react.useCallback)(
     async (content, attachments) => {
       const { apiUrl, streamPath = "/chat/stream", headers: headersOrFn, timeout = 3e4, bodyExtra } = configRef.current;
@@ -136,7 +139,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 = {
@@ -157,13 +168,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":
@@ -177,6 +181,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;
@@ -260,10 +268,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",
@@ -274,6 +298,8 @@ function useAgentChat(config) {
             }
           });
         }
+      } finally {
+        abortControllerRef.current = null;
       }
     },
     [state.conversationId]
@@ -301,6 +327,9 @@ function useAgentChat(config) {
       await sendMessage(lastUserMessageRef.current, lastUserAttachmentsRef.current);
     }
   }, [sendMessage]);
+  const stop = (0, import_react.useCallback)(() => {
+    abortControllerRef.current?.abort();
+  }, []);
   const reset = (0, import_react.useCallback)(() => {
     dispatch({ type: "RESET" });
     lastUserMessageRef.current = null;
@@ -312,6 +341,7 @@ function useAgentChat(config) {
     loadConversation,
     submitFeedback,
     retry,
+    stop,
     reset
   };
   return { state, actions };
@@ -331,6 +361,7 @@ var import_core2 = require("@surf-kit/core");
 var import_react2 = __toESM(require("react"), 1);
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_rehype_sanitize = __toESM(require("rehype-sanitize"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_tailwind_merge = require("tailwind-merge");
 var import_jsx_runtime = require("react/jsx-runtime");
 function normalizeMarkdownLists(content) {
@@ -355,6 +386,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
       ),
@@ -362,6 +397,7 @@ function ResponseMessage({ content, className }) {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_markdown.default,
         {
+          remarkPlugins: [import_remark_gfm.default],
           rehypePlugins: [import_rehype_sanitize.default],
           components: {
             script: () => null,
@@ -387,7 +423,11 @@ function ResponseMessage({ content, className }) {
             h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
             h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
             hr: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-3 border-border" }),
-            code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
+            code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children }),
+            table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto my-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "w-full text-sm border-collapse", children }) }),
+            thead: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "border-b border-border", children }),
+            th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-left px-2 py-1.5 font-semibold", children }),
+            td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-2 py-1.5 border-t border-border/50", children })
           },
           children: normalizeMarkdownLists(content)
         }
@@ -397,6 +437,8 @@ function ResponseMessage({ content, className }) {
 }
 
 // src/response/StructuredResponse/StructuredResponse.tsx
+var import_react_markdown2 = __toESM(require("react-markdown"), 1);
+var import_rehype_sanitize2 = __toESM(require("rehype-sanitize"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function tryParse(value) {
   if (value === void 0 || value === null) return null;
@@ -409,6 +451,25 @@ function tryParse(value) {
   }
   return value;
 }
+function InlineMarkdown({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_markdown2.default,
+    {
+      rehypePlugins: [import_rehype_sanitize2.default],
+      components: {
+        // Unwrap block-level <p> so content stays inline within its parent
+        p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children }),
+        strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold", children }),
+        em: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "italic", children }),
+        code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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;
@@ -421,7 +482,7 @@ function renderSteps(data) {
         children: i + 1
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: step })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineMarkdown, { text: step }) })
   ] }, i)) });
 }
 function renderTable(data) {
@@ -487,7 +548,7 @@ function renderList(data) {
     title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wider text-text-secondary mb-1", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "flex flex-col gap-1.5", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: item })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineMarkdown, { text: item }) })
     ] }, i)) })
   ] });
 }
@@ -926,24 +987,46 @@ function MessageBubble({
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function MessageThread({ messages, streamingSlot, showAgent, showSources, showConfidence, showVerification, hideLastAssistant, userBubbleClassName, className }) {
   const scrollRef = (0, import_react4.useRef)(null);
-  const isNearBottom = (0, import_react4.useRef)(true);
-  const isProgrammaticScroll = (0, import_react4.useRef)(false);
+  const shouldAutoScroll = (0, import_react4.useRef)(true);
   const hasStreaming = !!streamingSlot;
   const scrollToBottom = (0, import_react4.useCallback)(() => {
     const el = scrollRef.current;
-    if (el && isNearBottom.current) {
-      isProgrammaticScroll.current = true;
+    if (el && shouldAutoScroll.current) {
       el.scrollTop = el.scrollHeight;
     }
   }, []);
+  (0, import_react4.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 = (0, import_react4.useCallback)(() => {
-    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;
+    }
   }, []);
   (0, import_react4.useEffect)(scrollToBottom, [messages.length, scrollToBottom]);
   (0, import_react4.useEffect)(() => {
@@ -956,6 +1039,11 @@ function MessageThread({ messages, streamingSlot, showAgent, showSources, showCo
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [hasStreaming, scrollToBottom]);
+  (0, import_react4.useEffect)(() => {
+    if (!hasStreaming) {
+      shouldAutoScroll.current = true;
+    }
+  }, [hasStreaming]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
@@ -1087,6 +1175,7 @@ function AttachmentPreview({
 }
 function MessageComposer({
   onSend,
+  onStop,
   isLoading = false,
   placeholder = "Type a message...",
   className
@@ -1296,16 +1385,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: (0, import_tailwind_merge6.twMerge)(
                 "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__ */ (0, import_jsx_runtime9.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ArrowUpIcon, {})
             }
@@ -1461,9 +1550,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;
@@ -1597,7 +1687,7 @@ function AgentChat({
             onQuestionSelect: handleQuestionSelect
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageComposer, { onSend: handleSend, isLoading: state.isLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageComposer, { onSend: handleSend, onStop: actions.stop, isLoading: state.isLoading })
       ]
     }
   );
@@ -1618,14 +1708,14 @@ function ConversationList({
     "nav",
     {
       "aria-label": "Conversation list",
-      className: (0, import_tailwind_merge10.twMerge)("flex flex-col h-full bg-canvas", className),
+      className: (0, import_tailwind_merge10.twMerge)("flex flex-col flex-1 min-h-0", className),
       children: [
-        onNew && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        onNew && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-5 pt-1 pb-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "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"
           }
         ) }),
@@ -1636,9 +1726,9 @@ function ConversationList({
               "li",
               {
                 className: (0, import_tailwind_merge10.twMerge)(
-                  "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__ */ (0, import_jsx_runtime13.jsxs)(
@@ -1647,10 +1737,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__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-sm font-medium text-text-primary truncate", children: conversation.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-xs text-text-muted truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
                       ]
                     }
                   ),
@@ -1660,7 +1750,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__ */ (0, import_jsx_runtime13.jsxs)(
                         "svg",
                         {
@@ -1687,7 +1777,7 @@ function ConversationList({
               conversation.id
             );
           }),
-          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
+          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { className: "px-5 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm text-text-muted font-body", children: "No conversations yet" }) })
         ] })
       ]
     }