@surf-kit/agent 0.1.1

package/dist/hooks.cjs

@@ -0,0 +1,652 @@
+"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/hooks.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  useAgentChat: () => useAgentChat,
+  useAgentTheme: () => useAgentTheme,
+  useCharacterDrain: () => useCharacterDrain,
+  useConversation: () => useConversation,
+  useFeedback: () => useFeedback,
+  useStreaming: () => useStreaming
+});
+module.exports = __toCommonJS(hooks_exports);
+
+// src/hooks/useAgentChat.ts
+var import_react = require("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] = (0, import_react.useReducer)(reducer, initialState);
+  const configRef = (0, import_react.useRef)(config);
+  configRef.current = config;
+  const lastUserMessageRef = (0, import_react.useRef)(null);
+  const sendMessage = (0, import_react.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 = (0, import_react.useCallback)((value) => {
+    dispatch({ type: "SET_INPUT", value });
+  }, []);
+  const loadConversation = (0, import_react.useCallback)((conversationId, messages) => {
+    dispatch({ type: "LOAD_CONVERSATION", conversationId, messages });
+  }, []);
+  const submitFeedback = (0, import_react.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 = (0, import_react.useCallback)(async () => {
+    if (lastUserMessageRef.current) {
+      await sendMessage(lastUserMessageRef.current);
+    }
+  }, [sendMessage]);
+  const reset = (0, import_react.useCallback)(() => {
+    dispatch({ type: "RESET" });
+    lastUserMessageRef.current = null;
+  }, []);
+  const actions = {
+    sendMessage,
+    setInputValue,
+    loadConversation,
+    submitFeedback,
+    retry,
+    reset
+  };
+  return { state, actions };
+}
+
+// src/hooks/useStreaming.ts
+var import_react2 = require("react");
+var initialState2 = {
+  active: false,
+  phase: "idle",
+  content: "",
+  sources: [],
+  agent: null,
+  agentLabel: null
+};
+function useStreaming(options) {
+  const { url, headers, onDone, onError } = options;
+  const [state, setState] = (0, import_react2.useState)(initialState2);
+  const abortRef = (0, import_react2.useRef)(null);
+  const optionsRef = (0, import_react2.useRef)(options);
+  optionsRef.current = options;
+  const stop = (0, import_react2.useCallback)(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+  }, []);
+  const start = (0, import_react2.useCallback)(
+    async (body) => {
+      setState({ ...initialState2, active: true, phase: "thinking" });
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream",
+            ...headers
+          },
+          body: JSON.stringify(body),
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          const errorEvent = {
+            type: "error",
+            error: {
+              code: "API_ERROR",
+              message: `HTTP ${response.status}: ${response.statusText}`,
+              retryable: response.status >= 500
+            }
+          };
+          setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+          optionsRef.current.onError?.(errorEvent);
+          return;
+        }
+        const reader = response.body?.getReader();
+        if (!reader) {
+          setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+          return;
+        }
+        const decoder = new TextDecoder();
+        let buffer = "";
+        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);
+              processEvent(event, setState, optionsRef);
+            } catch {
+            }
+          }
+        }
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        const errorEvent = {
+          type: "error",
+          error: {
+            code: "NETWORK_ERROR",
+            message: err.message ?? "Network error",
+            retryable: true
+          }
+        };
+        setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+        optionsRef.current.onError?.(errorEvent);
+      }
+    },
+    [url, headers]
+  );
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, []);
+  return { state, start, stop };
+}
+function processEvent(event, setState, optionsRef) {
+  switch (event.type) {
+    case "phase":
+      setState((prev) => ({ ...prev, phase: event.phase }));
+      break;
+    case "delta":
+      setState((prev) => ({ ...prev, content: prev.content + event.content }));
+      break;
+    case "source":
+      setState((prev) => ({ ...prev, sources: [...prev.sources, event.source] }));
+      break;
+    case "agent":
+      setState((prev) => ({ ...prev, agent: event.agent }));
+      break;
+    case "done":
+      setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+      optionsRef.current.onDone?.(event);
+      break;
+    case "error":
+      setState((prev) => ({ ...prev, active: false, phase: "idle" }));
+      optionsRef.current.onError?.(event);
+      break;
+  }
+}
+
+// src/hooks/useConversation.ts
+var import_react3 = require("react");
+var STORAGE_PREFIX = "surf-kit-conversations";
+function getStorageKey(prefix) {
+  return `${prefix}:list`;
+}
+function loadFromStorage(storageKey) {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(getStorageKey(storageKey));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return parsed.map((c) => ({
+      ...c,
+      createdAt: new Date(c.createdAt),
+      updatedAt: new Date(c.updatedAt),
+      messages: c.messages.map((m) => ({ ...m, timestamp: new Date(m.timestamp) }))
+    }));
+  } catch {
+    return [];
+  }
+}
+function saveToStorage(storageKey, conversations) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(getStorageKey(storageKey), JSON.stringify(conversations));
+  } catch {
+  }
+}
+var idCounter = 0;
+function generateId() {
+  return `conv-${Date.now()}-${++idCounter}`;
+}
+function useConversation(options = {}) {
+  const { persist = false, storageKey = STORAGE_PREFIX } = options;
+  const [conversations, setConversations] = (0, import_react3.useState)(
+    () => persist ? loadFromStorage(storageKey) : []
+  );
+  const [current, setCurrent] = (0, import_react3.useState)(null);
+  const persistIfNeeded = (0, import_react3.useCallback)(
+    (convs) => {
+      if (persist) saveToStorage(storageKey, convs);
+    },
+    [persist, storageKey]
+  );
+  const create = (0, import_react3.useCallback)(
+    (title) => {
+      const now = /* @__PURE__ */ new Date();
+      const conv = {
+        id: generateId(),
+        title: title ?? "New Conversation",
+        messages: [],
+        createdAt: now,
+        updatedAt: now
+      };
+      setConversations((prev) => {
+        const next = [conv, ...prev];
+        persistIfNeeded(next);
+        return next;
+      });
+      setCurrent(conv);
+      return conv;
+    },
+    [persistIfNeeded]
+  );
+  const list = (0, import_react3.useCallback)(() => {
+    return conversations.map((c) => ({
+      id: c.id,
+      title: c.title,
+      lastMessage: c.messages.length > 0 ? c.messages[c.messages.length - 1].content : "",
+      updatedAt: c.updatedAt,
+      messageCount: c.messages.length
+    }));
+  }, [conversations]);
+  const load = (0, import_react3.useCallback)(
+    (id) => {
+      const conv = conversations.find((c) => c.id === id) ?? null;
+      setCurrent(conv);
+      return conv;
+    },
+    [conversations]
+  );
+  const remove = (0, import_react3.useCallback)(
+    (id) => {
+      setConversations((prev) => {
+        const next = prev.filter((c) => c.id !== id);
+        persistIfNeeded(next);
+        return next;
+      });
+      setCurrent((prev) => prev?.id === id ? null : prev);
+    },
+    [persistIfNeeded]
+  );
+  const rename = (0, import_react3.useCallback)(
+    (id, title) => {
+      setConversations((prev) => {
+        const next = prev.map((c) => c.id === id ? { ...c, title, updatedAt: /* @__PURE__ */ new Date() } : c);
+        persistIfNeeded(next);
+        return next;
+      });
+      setCurrent((prev) => prev?.id === id ? { ...prev, title, updatedAt: /* @__PURE__ */ new Date() } : prev);
+    },
+    [persistIfNeeded]
+  );
+  const addMessage = (0, import_react3.useCallback)(
+    (conversationId, message) => {
+      setConversations((prev) => {
+        const next = prev.map(
+          (c) => c.id === conversationId ? { ...c, messages: [...c.messages, message], updatedAt: /* @__PURE__ */ new Date() } : c
+        );
+        persistIfNeeded(next);
+        return next;
+      });
+      setCurrent(
+        (prev) => prev?.id === conversationId ? { ...prev, messages: [...prev.messages, message], updatedAt: /* @__PURE__ */ new Date() } : prev
+      );
+    },
+    [persistIfNeeded]
+  );
+  return {
+    conversations,
+    current,
+    create,
+    list,
+    load,
+    delete: remove,
+    rename,
+    addMessage
+  };
+}
+
+// src/hooks/useFeedback.ts
+var import_react4 = require("react");
+function useFeedback(options) {
+  const { url, headers } = options;
+  const [state, setState] = (0, import_react4.useState)("idle");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const abortRef = (0, import_react4.useRef)(null);
+  const submit = (0, import_react4.useCallback)(
+    async (messageId, rating, comment) => {
+      setState("submitting");
+      setError(null);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...headers
+          },
+          body: JSON.stringify({ messageId, rating, comment }),
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        setState("submitted");
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        setError(err.message ?? "Failed to submit feedback");
+        setState("error");
+      }
+    },
+    [url, headers]
+  );
+  const reset = (0, import_react4.useCallback)(() => {
+    setState("idle");
+    setError(null);
+  }, []);
+  return { state, error, submit, reset };
+}
+
+// src/hooks/useAgentTheme.ts
+var import_react5 = require("react");
+var DEFAULT_ACCENT = "#6366f1";
+var DEFAULT_LABEL = "Agent";
+function useAgentTheme(agentId, agentThemes) {
+  return (0, import_react5.useMemo)(() => {
+    if (!agentId) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL };
+    }
+    const theme = agentThemes?.[agentId];
+    if (!theme) {
+      return { accent: DEFAULT_ACCENT, icon: null, label: agentId };
+    }
+    return {
+      accent: theme.accent ?? DEFAULT_ACCENT,
+      icon: theme.icon ?? null,
+      label: theme.label
+    };
+  }, [agentId, agentThemes]);
+}
+
+// src/hooks/useCharacterDrain.ts
+var import_react6 = require("react");
+function useCharacterDrain(target, msPerChar = 15) {
+  const [displayed, setDisplayed] = (0, import_react6.useState)("");
+  const indexRef = (0, import_react6.useRef)(0);
+  const lastTimeRef = (0, import_react6.useRef)(0);
+  const rafRef = (0, import_react6.useRef)(null);
+  const drainTargetRef = (0, import_react6.useRef)("");
+  const msPerCharRef = (0, import_react6.useRef)(msPerChar);
+  msPerCharRef.current = msPerChar;
+  if (target !== "") {
+    drainTargetRef.current = target;
+  }
+  const drainTarget = drainTargetRef.current;
+  const isDraining = displayed.length < drainTarget.length;
+  const tickRef = (0, import_react6.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_react6.useEffect)(() => {
+    if (drainTargetRef.current !== "" && indexRef.current < drainTargetRef.current.length && rafRef.current === null) {
+      rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
+    }
+  }, [drainTarget]);
+  (0, import_react6.useEffect)(() => {
+    if (target === "" && !isDraining && displayed !== "") {
+      indexRef.current = 0;
+      lastTimeRef.current = 0;
+      drainTargetRef.current = "";
+      setDisplayed("");
+    }
+  }, [target, isDraining, displayed]);
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return { displayed, isDraining };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAgentChat,
+  useAgentTheme,
+  useCharacterDrain,
+  useConversation,
+  useFeedback,
+  useStreaming
+});
+//# sourceMappingURL=hooks.cjs.map