@erdoai/ui 0.1.5 → 0.1.9

package/README.md

@@ -18,16 +18,13 @@ npm install react react-dom @tanstack/react-query
 
 ### 1. Set up the Provider
 
+**Important**: Never expose your API key to the browser. Keep it server-side only.
+
 ```tsx
 import { ErdoProvider } from '@erdoai/ui';
-import { ErdoClient } from '@erdoai/server';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient();
-const erdoClient = new ErdoClient({
-  endpoint: 'https://api.erdo.ai',
-  authToken: process.env.ERDO_API_KEY,
-});
 
 function App() {
   return (
@@ -35,7 +32,7 @@ function App() {
       <ErdoProvider
         config={{
           baseUrl: 'https://api.erdo.ai',
-          client: erdoClient,
+          sessionToken: 'user-session-token', // Short-lived token from your server
         }}
       >
         <YourApp />
@@ -45,32 +42,72 @@ function App() {
 }
 ```
 
-### 2. Invoke Agents and Render Results
+### 2. Invoke Agents (Server-Side) and Render Results
+
+Agent invocations must happen on your server to keep your API key secret:
 
 ```tsx
-import { useInvocation, Content } from '@erdoai/ui';
+// app/api/analyze/route.ts (SERVER SIDE)
+import { ErdoClient } from '@erdoai/server';
 
-function ChatInterface() {
-  const { result, isStreaming, invoke } = useInvocation();
+const client = new ErdoClient({
+  authToken: process.env.ERDO_API_KEY, // Secret - never exposed to browser
+});
 
-  const handleSubmit = async (query: string) => {
-    await invoke('data-analyst', { query });
+export async function POST(request: Request) {
+  const { query } = await request.json();
+
+  const encoder = new TextEncoder();
+  const stream = new ReadableStream({
+    async start(controller) {
+      for await (const event of client.invokeStream('data-analyst', {
+        messages: [{ role: 'user', content: query }],
+      })) {
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(stream, {
+    headers: { 'Content-Type': 'text/event-stream' },
+  });
+}
+```
+
+```tsx
+// components/chat-interface.tsx (CLIENT SIDE)
+import { useState } from 'react';
+import { Content, type ContentItem } from '@erdoai/ui';
+
+function ChatInterface() {
+  const [contents, setContents] = useState<ContentItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const query = new FormData(e.currentTarget).get('query') as string;
+    setIsLoading(true);
+
+    const response = await fetch('/api/analyze', {
+      method: 'POST',
+      body: JSON.stringify({ query }),
+    });
+    // Parse SSE stream and update contents...
+    setIsLoading(false);
   };
 
   return (
     <div>
-      <form onSubmit={(e) => {
-        e.preventDefault();
-        handleSubmit(e.target.query.value);
-      }}>
+      <form onSubmit={handleSubmit}>
         <input name="query" placeholder="Ask a question..." />
-        <button type="submit" disabled={isStreaming}>
-          {isStreaming ? 'Analyzing...' : 'Send'}
+        <button type="submit" disabled={isLoading}>
+          {isLoading ? 'Analyzing...' : 'Send'}
         </button>
       </form>
 
-      {result?.contents.map((content) => (
-        <Content key={content.id} item={content} />
+      {contents.map((content) => (
+        <Content key={content.id} content={content} />
       ))}
     </div>
   );
@@ -86,9 +123,20 @@ Automatically renders the appropriate component based on content type:
 ```tsx
 import { Content } from '@erdoai/ui';
 
-<Content item={contentItem} />
+<Content content={contentItem} />
+
+// Override specific content type renderers
+<Content
+  content={contentItem}
+  components={{
+    'bot_invocation': MyBotInvocationComponent,
+    'my_custom_type': MyCustomRenderer,
+  }}
+/>
 ```
 
+The `components` prop lets you override how specific content types are rendered. The component receives `{ content, className }` props.
+
 ### Individual Renderers
 
 ```tsx
@@ -234,41 +282,31 @@ const { zoomDomain, setZoomDomain, resetZoom } = useChartZoom();
 
 ## Provider Configuration
 
-### Standard Configuration (REST API)
+> **Security**: Never use `authToken` on the client side. Your API key must stay server-side only.
 
-```tsx
-<ErdoProvider
-  config={{
-    baseUrl: 'https://api.erdo.ai',
-    authToken: 'your-api-key',
-  }}
->
-```
+### With Session Token (Recommended for B2B2C)
 
-### With ErdoClient
+Session tokens are short-lived tokens created by your server for end users:
 
 ```tsx
-import { ErdoClient } from '@erdoai/server';
-
-const client = new ErdoClient({ authToken: 'your-api-key' });
-
 <ErdoProvider
   config={{
     baseUrl: 'https://api.erdo.ai',
-    client,
+    sessionToken: userSessionToken, // Created by your server
   }}
 >
 ```
 
 ### Custom Data Fetcher
 
-For custom backends or authentication:
+For custom backends or when proxying through your server:
 
 ```tsx
 const customFetcher = {
   fetchDatasetContents: async (slug, invocationId) => {
-    const response = await myCustomClient.getDataset(slug, invocationId);
-    return response.data;
+    // Fetch through your server which adds authentication
+    const response = await fetch(`/api/datasets/${slug}?invocationId=${invocationId}`);
+    return response.json();
   },
 };
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
-import { ErdoClient, ContentItem, SSEEvent, InvokeResult, InvokeParams } from '@erdoai/types';
+import { ErdoClient, ContentItem, LogEntry, ToolGroup, InvocationStatus as InvocationStatus$1, SSEEvent, InvokeResult, InvokeParams } from '@erdoai/types';
 export { ContentItem } from '@erdoai/types';
 import * as RechartsPrimitive from 'recharts';
 import { UseQueryResult } from '@tanstack/react-query';
@@ -280,6 +280,100 @@ declare class ErrorBoundary extends React__default.Component<{
     render(): React__default.ReactNode;
 }
 
+/** Props passed to all content components */
+interface ContentComponentProps {
+    content: ContentItem;
+    className?: string;
+}
+interface ContentProps {
+    content: ContentItem;
+    className?: string;
+    /**
+     * Override renderers for specific content types.
+     * Key is the content_type or ui_content_type string.
+     * Component receives { content, className, ...otherProps } props.
+     * Components can accept additional props beyond ContentComponentProps.
+     *
+     * @example
+     * ```tsx
+     * <Content
+     *   content={contentItem}
+     *   components={{
+     *     'bot_invocation': MyBotInvocation,
+     *     'authorize_integration': AuthorizeIntegration,
+     *     'my_custom_type': MyCustomRenderer,
+     *   }}
+     * />
+     * ```
+     */
+    components?: Record<string, React__default.ComponentType<any>>;
+}
+/**
+ * Routes content to the appropriate renderer based on content_type and ui_content_type.
+ *
+ * This is the main entry point for rendering content items from Erdo bot invocations.
+ * It checks for custom component overrides first, then falls back to built-in renderers.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - uses built-in renderers
+ * <Content content={contentItem} />
+ *
+ * // With custom overrides
+ * <Content
+ *   content={contentItem}
+ *   components={{
+ *     'bot_invocation': MyBotInvocation,
+ *     'authorize_integration': AuthorizeIntegration,
+ *   }}
+ * />
+ * ```
+ */
+declare function Content({ content, className, components }: ContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface TextContentProps {
+    content: string;
+    className?: string;
+}
+declare function TextContent({ content, className }: TextContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface JsonContentProps {
+    content: unknown;
+    className?: string;
+}
+declare function JsonContent({ content, className }: JsonContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface MarkdownContentProps {
+    /** The markdown content to render */
+    content: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * Renders markdown content with GitHub Flavored Markdown support.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownContent content="# Hello\n\nThis is **bold** text." />
+ * ```
+ */
+declare function MarkdownContent({ content, className }: MarkdownContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface TableColumn {
+    column_name: string;
+    key: string;
+    format?: string;
+    value_type?: 'number' | 'category' | 'date';
+}
+interface TableContentProps {
+    title?: string;
+    columns: TableColumn[];
+    data: any[];
+    className?: string;
+    maxRows?: number;
+}
+declare function TableContent({ title, columns, data, className, maxRows }: TableContentProps): react_jsx_runtime.JSX.Element;
+
 interface Axis {
     axis_label: string;
     key: string;
@@ -325,78 +419,227 @@ interface ChartContentProps {
 }
 declare function ChartContent({ config, data, className }: ChartContentProps): react_jsx_runtime.JSX.Element;
 
-interface ContentProps {
+interface ThinkingContentProps {
     item: ContentItem;
     className?: string;
-    components?: Partial<{
-        text: React__default.ComponentType<{
-            content: string;
-            className?: string;
-        }>;
-        json: React__default.ComponentType<{
-            content: string | object;
-            className?: string;
-        }>;
-        chart: React__default.ComponentType<{
-            config: ContentChartConfig;
-            data: any[];
-            className?: string;
-        }>;
-        table: React__default.ComponentType<{
-            title?: string;
-            columns: any[];
-            data: any[];
-            className?: string;
-        }>;
-    }>;
 }
 /**
- * Routes content to the appropriate renderer based on content_type and ui_content_type.
+ * Renders Claude's thinking/reasoning content in a collapsible panel.
+ * Handles both regular thinking and redacted (encrypted) thinking.
  */
-declare function Content({ item, className, components }: ContentProps): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+declare function ThinkingContent({ item, className }: ThinkingContentProps): react_jsx_runtime.JSX.Element;
 
-interface TextContentProps {
-    content: string;
+interface LogContentProps {
+    item: ContentItem;
     className?: string;
 }
-declare function TextContent({ content, className }: TextContentProps): react_jsx_runtime.JSX.Element | null;
+interface LogProps {
+    log: LogEntry;
+}
+declare function Log({ log }: LogProps): react_jsx_runtime.JSX.Element;
+/**
+ * Renders log entries with level-based styling (info, error, requires_info).
+ */
+declare function LogContent({ item, className }: LogContentProps): react_jsx_runtime.JSX.Element;
 
-interface JsonContentProps {
-    content: string | object;
+interface WebSearchContentProps {
+    item: ContentItem;
     className?: string;
 }
-declare function JsonContent({ content, className }: JsonContentProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Renders web search results as a list of clickable cards.
+ */
+declare function WebSearchContent({ item, className }: WebSearchContentProps): react_jsx_runtime.JSX.Element | null;
 
-interface MarkdownContentProps {
-    /** The markdown text to render */
-    text: string;
-    /** Additional CSS class names */
+interface WebParseContentProps {
+    item: ContentItem;
     className?: string;
 }
 /**
- * Renders markdown content with GitHub Flavored Markdown support.
- *
- * @example
- * ```tsx
- * <MarkdownContent text="# Hello\n\nThis is **bold** text." />
- * ```
+ * Renders parsed web page content with title, description, and markdown body.
  */
-declare function MarkdownContent({ text, className }: MarkdownContentProps): react_jsx_runtime.JSX.Element | null;
+declare function WebParseContent({ item, className }: WebParseContentProps): react_jsx_runtime.JSX.Element | null;
 
-interface TableColumn {
-    column_name: string;
-    key: string;
-    format?: string;
-    value_type?: 'number' | 'category' | 'date';
+type WrapperType = 'standard' | 'info' | 'warning';
+interface ExpandableOutputContentProps {
+    children: React__default.ReactNode;
+    defaultOpen?: boolean;
+    wrapperType?: WrapperType;
+    compact?: boolean;
+    className?: string;
 }
-interface TableContentProps {
+/**
+ * An expandable container for code output with max-height and scroll.
+ */
+declare function ExpandableOutputContent({ children, defaultOpen, wrapperType, compact, className, }: ExpandableOutputContentProps): react_jsx_runtime.JSX.Element;
+interface OutputLineProps {
+    children: React__default.ReactNode;
+    timestamp?: string;
+}
+/**
+ * Standard output text line with optional timestamp.
+ */
+declare function StdoutText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
+/**
+ * Error/stderr output text line with info styling.
+ */
+declare function StderrText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
+/**
+ * Warning output text line with warning styling.
+ */
+declare function StdwarnText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleCodeBlockProps {
+    language: string;
+    value: string;
+    defaultOpen?: boolean;
     title?: string;
-    columns: TableColumn[];
-    data: any[];
+    closeTitle?: string;
     className?: string;
-    maxRows?: number;
+    /** Theme: 'dark' | 'light' | 'auto'. Auto uses prefers-color-scheme. Default: 'auto' */
+    theme?: 'dark' | 'light' | 'auto';
 }
-declare function TableContent({ title, columns, data, className, maxRows }: TableContentProps): react_jsx_runtime.JSX.Element;
+/**
+ * A collapsible code block with syntax highlighting.
+ */
+declare function CollapsibleCodeBlock({ language, value, defaultOpen, title, closeTitle, className, theme, }: CollapsibleCodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface SqlContentProps {
+    item: ContentItem;
+    className?: string;
+}
+/**
+ * Renders SQL generation content with thinking text and collapsible SQL code.
+ */
+declare function SqlContent({ item, className }: SqlContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface CodegenContentProps {
+    item: ContentItem;
+    className?: string;
+}
+/**
+ * Renders code generation content with step-by-step explanation, code, and warnings.
+ */
+declare function CodegenContent({ item, className }: CodegenContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface CodeexecContentProps {
+    item: ContentItem;
+    className?: string;
+}
+/**
+ * Renders code execution output (stdout, stderr, warnings).
+ */
+declare function CodeexecContent({ item, className }: CodeexecContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToolGroupContentProps {
+    /** The tool group data */
+    toolGroup: ToolGroup;
+    /** Optional Content component for rendering nested results (avoids circular imports) */
+    ContentComponent?: React__default.ComponentType<{
+        content: ContentItem;
+        className?: string;
+    }>;
+    className?: string;
+}
+/**
+ * Renders tool invocations and their results in a collapsible format.
+ */
+declare function ToolGroupContent({ toolGroup, ContentComponent, className, }: ToolGroupContentProps): react_jsx_runtime.JSX.Element;
+
+/** Content data for a bot invocation (passed in ContentItem.content) */
+interface BotInvocationContentData {
+    /** Unique invocation ID */
+    invocation_id: string;
+    /** Bot ID */
+    bot_id: string;
+    /** Bot display name */
+    bot_name: string;
+    /** Whether this invocation is transparent (embedded) */
+    transparent?: boolean;
+}
+/** Status information for a bot invocation */
+interface BotInvocationStatusInfo {
+    /** Current status of the invocation */
+    status: InvocationStatus$1 | string;
+    /** Optional status message */
+    message?: string | {
+        Valid: boolean;
+        String: string;
+    };
+}
+/** Event within a bot invocation */
+interface BotInvocationEventInfo {
+    /** Unique event ID */
+    id: string;
+    /** Event type (output, step, etc.) */
+    type: string;
+    /** When the event was created */
+    created_at?: string;
+    /** Event data - structure depends on type */
+    data?: unknown;
+}
+/** Resolved bot invocation with status and events */
+interface ResolvedBotInvocation {
+    /** Current status of the invocation */
+    currentStatus?: BotInvocationStatusInfo | null;
+    /** Map of events by ID */
+    eventsByID?: Record<string, BotInvocationEventInfo>;
+    /** Additional invocation details */
+    [key: string]: unknown;
+}
+interface BotInvocationContentProps {
+    /** The content data containing invocation_id, bot_id, bot_name */
+    content: BotInvocationContentData;
+    /** Resolved bot invocation data with events and status */
+    botInvocation?: ResolvedBotInvocation | null;
+    /** Whether the invocation is still loading */
+    isLoading?: boolean;
+    /** Whether this should be open by default */
+    defaultOpen?: boolean;
+    /** Optional admin link href (e.g., to agent designer) */
+    adminLinkHref?: string;
+    /** Optional admin link text */
+    adminLinkText?: string;
+    /** Whether to show the admin link */
+    showAdminLink?: boolean;
+    /** Callback when admin link is clicked */
+    onAdminClick?: (invocationId: string, botId: string) => void;
+    /** Callback when invocation is expanded */
+    onExpand?: (invocationId: string, botId: string, botName: string) => void;
+    /** Component for rendering nested events */
+    EventsComponent?: React__default.ComponentType<{
+        eventsByID: Record<string, BotInvocationEventInfo>;
+        defaultOpen?: boolean;
+    }>;
+    /** Component for rendering individual content items */
+    ContentComponent?: React__default.ComponentType<{
+        content: ContentItem;
+        className?: string;
+    }>;
+    className?: string;
+}
+/**
+ * Renders a bot invocation with status, collapsible events, and optional admin link.
+ *
+ * This component is designed to receive already-processed invocation data.
+ * Data fetching should be handled by the consuming application.
+ */
+declare function BotInvocationContent({ content, botInvocation, isLoading, defaultOpen, adminLinkHref, adminLinkText, showAdminLink, onAdminClick, onExpand, EventsComponent, ContentComponent: _ContentComponent, className, }: BotInvocationContentProps): react_jsx_runtime.JSX.Element | null;
+
+type SpinnerStatus = 'loading' | 'finished' | 'failed';
+interface StatusSpinnerProps {
+    status: SpinnerStatus;
+    /** Icon color - if not provided, auto-detects from theme (white for dark, black for light) */
+    color?: string;
+    /** Size in pixels - defaults to 16 */
+    size?: number;
+    className?: string;
+}
+/**
+ * Animated status spinner using Lordicon/Lottie animations.
+ * Shows a spinning loader when loading, checkmark when finished, and alert when failed.
+ */
+declare function StatusSpinner({ status, color, size, className }: StatusSpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface ZoomState {
     refAreaLeft: number | null;
@@ -928,4 +1171,4 @@ declare function handleIncrementalMixedJsonParsing(outputContent: MessageContent
  */
 declare function handleSSEEvent(eventType: string, event: SSEEventData, path: string[], threadID: string, activeMessagesByID: Record<string, MessageWithContents>, currentEntity?: Entity | null, parents?: Entity[], entityIds?: Record<string, string>): Entity | null;
 
-export { BarChart, type BaseChartProps, type BotInvocation, type BotInvocationData, Chart, type ChartConfig, ChartContainer, ChartContent, type ChartContentProps, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Content, type ContentChartConfig, type ContentChunk, type ContentProps, type ContentType, type DataFetcher, DatasetChart, type DatasetChartProps, type Entity, type EntityType, ErdoProvider, type ErdoProviderConfig, type ErdoProviderProps, ErrorBoundary, ExecutionStatus, HeatmapChart, type InvocationEvent, InvocationStatus, JSONStreamParser, type JSONValue, JsonContent, type JsonContentProps, LineChart, MarkdownContent, type MarkdownContentProps, type Message, type MessageContent, type MessageStreamingState, type MessageWithContents, type Output, type OutputContent, type OutputWithContents, PieChart, type ResultHandler, type SSEEventData, ScatterChart, type Status, type StatusEvent, type Step, TableContent, type TableContentProps, TextContent, type TextContentProps, type UseInvocationOptions, type UseInvocationReturn, cn, formatValue, handleIncrementalMixedJsonParsing, handleSSEEvent, isJsonLike, isParsingComplete, isParsingInProgress, isWhitespaceChar, parseCompleteJson, parseMixedJson, parseToDate, resolveKeyFromData, toSnakeCase, useChartZoom, useDatasetContents, useErdoConfig, useErdoConfigOptional, useInvocation, useMultipleDatasetContents };
+export { BarChart, type BaseChartProps, type BotInvocation, BotInvocationContent, type BotInvocationContentData, type BotInvocationContentProps, type BotInvocationData, type BotInvocationEventInfo, type BotInvocationStatusInfo, Chart, type ChartConfig, ChartContainer, ChartContent, type ChartContentProps, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CodeexecContent, type CodeexecContentProps, CodegenContent, type CodegenContentProps, CollapsibleCodeBlock, type CollapsibleCodeBlockProps, Content, type ContentChartConfig, type ContentChunk, type ContentComponentProps, type ContentProps, type ContentType, type DataFetcher, DatasetChart, type DatasetChartProps, type Entity, type EntityType, ErdoProvider, type ErdoProviderConfig, type ErdoProviderProps, ErrorBoundary, ExecutionStatus, ExpandableOutputContent, type ExpandableOutputContentProps, HeatmapChart, type InvocationEvent, InvocationStatus, JSONStreamParser, type JSONValue, JsonContent, type JsonContentProps, LineChart, Log, LogContent, type LogContentProps, type LogProps, MarkdownContent, type MarkdownContentProps, type Message, type MessageContent, type MessageStreamingState, type MessageWithContents, type Output, type OutputContent, type OutputWithContents, PieChart, type ResolvedBotInvocation, type ResultHandler, type SSEEventData, ScatterChart, type SpinnerStatus, SqlContent, type SqlContentProps, type Status, type StatusEvent, StatusSpinner, type StatusSpinnerProps, StderrText, StdoutText, StdwarnText, type Step, TableContent, type TableContentProps, TextContent, type TextContentProps, ThinkingContent, type ThinkingContentProps, ToolGroupContent, type ToolGroupContentProps, type UseInvocationOptions, type UseInvocationReturn, WebParseContent, type WebParseContentProps, WebSearchContent, type WebSearchContentProps, type WrapperType, cn, formatValue, handleIncrementalMixedJsonParsing, handleSSEEvent, isJsonLike, isParsingComplete, isParsingInProgress, isWhitespaceChar, parseCompleteJson, parseMixedJson, parseToDate, resolveKeyFromData, toSnakeCase, useChartZoom, useDatasetContents, useErdoConfig, useErdoConfigOptional, useInvocation, useMultipleDatasetContents };