@ash-cloud/ash-ui 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -1742,6 +1742,9 @@ function isToolCallEntry(entry) {
 function isErrorEntry(entry) {
   return entry.type === "error";
 }
+function isWidgetEntry(entry) {
+  return entry.type === "widget";
+}
 var DEFAULT_DISPLAY_CONFIG = {
   mode: "inline",
   breakEveryNToolCalls: 0,
@@ -1797,10 +1800,25 @@ function MessageList({
   streamingContent,
   displayConfig: displayConfigProp,
   onOptionSelect,
+  renderWidget,
+  onWidgetAction,
   className
 }) {
   const contextConfig = useDisplayConfig();
   const config = displayConfigProp || contextConfig;
+  const createWidgetActionHandler = react.useCallback(
+    (entryId, widgetType) => {
+      if (!onWidgetAction) return void 0;
+      return (action) => {
+        onWidgetAction({
+          ...action,
+          entryId,
+          widgetType
+        });
+      };
+    },
+    [onWidgetAction]
+  );
   const groupedEntries = react.useMemo(() => {
     if (config.mode === "inline") {
       return entries.map((entry) => ({
@@ -1814,7 +1832,20 @@ function MessageList({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
     groupedEntries.map((groupedEntry) => {
       if (groupedEntry.type === "single") {
-        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry: groupedEntry.entry, onOptionSelect }, groupedEntry.entry.id);
+        const entry = groupedEntry.entry;
+        if (entry.entryType.type === "widget" && renderWidget) {
+          const widgetEntry = entry.entryType;
+          const widgetContent = renderWidget({
+            entry,
+            widgetType: widgetEntry.widgetType,
+            widgetData: widgetEntry.widgetData,
+            onAction: createWidgetActionHandler(entry.id, widgetEntry.widgetType)
+          });
+          if (widgetContent !== null) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
+          }
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -2942,6 +2973,212 @@ function useFileUpload({
     openFilePicker
   };
 }
+function useAgentChat(options) {
+  const {
+    createStream,
+    initialSessionId,
+    initialEntries = [],
+    onSessionStart,
+    onSessionEnd,
+    onError,
+    onSandboxLog
+  } = options;
+  const [historyEntries, setHistoryEntries] = react.useState(initialEntries);
+  const [streamingEntries, setStreamingEntries] = react.useState([]);
+  const [isStreaming, setIsStreaming] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [sessionId, setSessionId] = react.useState(initialSessionId || null);
+  const abortControllerRef = react.useRef(null);
+  const currentTextRef = react.useRef("");
+  const currentTextIdRef = react.useRef(null);
+  const pendingToolCallsRef = react.useRef(/* @__PURE__ */ new Map());
+  const hadToolCallSinceTextRef = react.useRef(false);
+  const entries = [...historyEntries, ...streamingEntries];
+  const emitStreamingEntries = react.useCallback((newEntries) => {
+    setStreamingEntries([...newEntries]);
+  }, []);
+  const createTextEntry = react.useCallback((id, content) => ({
+    id,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    entryType: { type: "assistant_message" },
+    content
+  }), []);
+  const resetStreamingState = react.useCallback(() => {
+    currentTextRef.current = "";
+    currentTextIdRef.current = null;
+    pendingToolCallsRef.current.clear();
+    hadToolCallSinceTextRef.current = false;
+    setStreamingEntries([]);
+  }, []);
+  const processEvent = react.useCallback((event, streamEntries) => {
+    const newEntries = [...streamEntries];
+    switch (event.type) {
+      case "session_start":
+        if (event.sessionId) {
+          setSessionId(event.sessionId);
+          onSessionStart?.(event.sessionId);
+        }
+        break;
+      case "text_delta":
+        if (event.delta) {
+          if (hadToolCallSinceTextRef.current && currentTextIdRef.current) {
+            currentTextRef.current = "";
+            currentTextIdRef.current = null;
+            hadToolCallSinceTextRef.current = false;
+          }
+          currentTextRef.current += event.delta;
+          if (!currentTextIdRef.current) {
+            currentTextIdRef.current = `text-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            newEntries.push(createTextEntry(currentTextIdRef.current, currentTextRef.current));
+          } else {
+            const entryIndex = newEntries.findIndex((e) => e.id === currentTextIdRef.current);
+            if (entryIndex !== -1) {
+              newEntries[entryIndex] = createTextEntry(currentTextIdRef.current, currentTextRef.current);
+            }
+          }
+        }
+        break;
+      case "tool_use":
+        if (event.toolId && event.toolName) {
+          currentTextRef.current = "";
+          currentTextIdRef.current = null;
+          hadToolCallSinceTextRef.current = true;
+          const toolCall = createToolCall({
+            id: event.toolId,
+            name: event.toolName,
+            input: event.input
+          });
+          const entry = {
+            id: event.toolId,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            entryType: { type: "tool_call", toolCall },
+            content: toolCall.summary
+          };
+          const entryIndex = newEntries.length;
+          newEntries.push(entry);
+          pendingToolCallsRef.current.set(event.toolId, { entryIndex, toolCall });
+        }
+        break;
+      case "tool_result":
+        if (event.toolId) {
+          const pending = pendingToolCallsRef.current.get(event.toolId);
+          if (pending) {
+            const updatedToolCall = updateToolCallWithResult(
+              pending.toolCall,
+              event.toolResult,
+              event.isError
+            );
+            const existingEntry = newEntries[pending.entryIndex];
+            if (existingEntry && existingEntry.entryType.type === "tool_call") {
+              newEntries[pending.entryIndex] = {
+                ...existingEntry,
+                entryType: { type: "tool_call", toolCall: updatedToolCall }
+              };
+            }
+            pendingToolCallsRef.current.delete(event.toolId);
+          }
+        }
+        break;
+      case "sandbox_log":
+        if (event.entry) {
+          onSandboxLog?.(event.entry);
+        }
+        break;
+      case "error":
+        if (event.error) {
+          setError(event.error);
+          onError?.(event.error);
+          newEntries.push({
+            id: `error-${Date.now()}`,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            entryType: { type: "error", message: event.error, code: event.code },
+            content: event.error
+          });
+        }
+        break;
+      case "session_end":
+        onSessionEnd?.(event.sessionId || sessionId || "", event.status || "completed");
+        break;
+      case "complete":
+        if (newEntries.length > 0) {
+          setHistoryEntries((prev) => [...prev, ...newEntries]);
+        }
+        resetStreamingState();
+        return [];
+    }
+    return newEntries;
+  }, [sessionId, onSessionStart, onSessionEnd, onError, onSandboxLog, createTextEntry, resetStreamingState]);
+  const send = react.useCallback(async (prompt) => {
+    if (isStreaming) return;
+    setIsStreaming(true);
+    setError(null);
+    const userEntry = {
+      id: `user-${Date.now()}`,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      entryType: { type: "user_message" },
+      content: prompt
+    };
+    setHistoryEntries((prev) => [...prev, userEntry]);
+    resetStreamingState();
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    let localStreamingEntries = [];
+    try {
+      const stream = createStream(prompt, sessionId || void 0);
+      for await (const event of stream) {
+        if (controller.signal.aborted) break;
+        localStreamingEntries = processEvent(event, localStreamingEntries);
+        emitStreamingEntries(localStreamingEntries);
+      }
+      if (localStreamingEntries.length > 0) {
+        setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
+        setStreamingEntries([]);
+      }
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        const errorMessage = err instanceof Error ? err.message : "Unknown error";
+        setError(errorMessage);
+        onError?.(errorMessage);
+      }
+    } finally {
+      setIsStreaming(false);
+      abortControllerRef.current = null;
+      resetStreamingState();
+    }
+  }, [isStreaming, sessionId, createStream, processEvent, emitStreamingEntries, resetStreamingState, onError]);
+  const stop = react.useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  const clear = react.useCallback(() => {
+    setHistoryEntries([]);
+    resetStreamingState();
+    setSessionId(initialSessionId || null);
+    setError(null);
+  }, [initialSessionId, resetStreamingState]);
+  const setEntries = react.useCallback((newEntries) => {
+    resetStreamingState();
+    setHistoryEntries(newEntries);
+  }, [resetStreamingState]);
+  react.useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+  return {
+    entries,
+    isStreaming,
+    error,
+    sessionId,
+    send,
+    stop,
+    clear,
+    setEntries
+  };
+}
 
 exports.ActionIcon = ActionIcon;
 exports.AlertCircleIcon = AlertCircleIcon;
@@ -3036,6 +3273,7 @@ exports.isTodoWriteAction = isTodoWriteAction;
 exports.isToolCallEntry = isToolCallEntry;
 exports.isWebFetchAction = isWebFetchAction;
 exports.isWebSearchAction = isWebSearchAction;
+exports.isWidgetEntry = isWidgetEntry;
 exports.keyframes = keyframes;
 exports.keyframesCss = keyframesCss;
 exports.mapToolToActionType = mapToolToActionType;
@@ -3050,6 +3288,7 @@ exports.transitions = transitions;
 exports.truncate = truncate;
 exports.typography = typography;
 exports.updateToolCallWithResult = updateToolCallWithResult;
+exports.useAgentChat = useAgentChat;
 exports.useDisplayConfig = useDisplayConfig;
 exports.useDisplayMode = useDisplayMode;
 exports.useFileUpload = useFileUpload;