@erdoai/ui 0.1.6 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import React__default from 'react';
4
- import { ErdoClient, ContentItem, SSEEvent, InvokeResult, InvokeParams } from '@erdoai/types';
4
+ import { ErdoClient, ContentItem, LogEntry, ToolGroup, InvocationStatus as InvocationStatus$1, SSEEvent, InvokeResult, InvokeParams } from '@erdoai/types';
5
5
  export { ContentItem } from '@erdoai/types';
6
6
  import * as RechartsPrimitive from 'recharts';
7
7
  import { UseQueryResult } from '@tanstack/react-query';
@@ -280,6 +280,100 @@ declare class ErrorBoundary extends React__default.Component<{
280
280
  render(): React__default.ReactNode;
281
281
  }
282
282
 
283
+ /** Props passed to all content components */
284
+ interface ContentComponentProps {
285
+ content: ContentItem;
286
+ className?: string;
287
+ }
288
+ interface ContentProps {
289
+ content: ContentItem;
290
+ className?: string;
291
+ /**
292
+ * Override renderers for specific content types.
293
+ * Key is the content_type or ui_content_type string.
294
+ * Component receives { content, className, ...otherProps } props.
295
+ * Components can accept additional props beyond ContentComponentProps.
296
+ *
297
+ * @example
298
+ * ```tsx
299
+ * <Content
300
+ * content={contentItem}
301
+ * components={{
302
+ * 'bot_invocation': MyBotInvocation,
303
+ * 'authorize_integration': AuthorizeIntegration,
304
+ * 'my_custom_type': MyCustomRenderer,
305
+ * }}
306
+ * />
307
+ * ```
308
+ */
309
+ components?: Record<string, React__default.ComponentType<any>>;
310
+ }
311
+ /**
312
+ * Routes content to the appropriate renderer based on content_type and ui_content_type.
313
+ *
314
+ * This is the main entry point for rendering content items from Erdo bot invocations.
315
+ * It checks for custom component overrides first, then falls back to built-in renderers.
316
+ *
317
+ * @example
318
+ * ```tsx
319
+ * // Basic usage - uses built-in renderers
320
+ * <Content content={contentItem} />
321
+ *
322
+ * // With custom overrides
323
+ * <Content
324
+ * content={contentItem}
325
+ * components={{
326
+ * 'bot_invocation': MyBotInvocation,
327
+ * 'authorize_integration': AuthorizeIntegration,
328
+ * }}
329
+ * />
330
+ * ```
331
+ */
332
+ declare function Content({ content, className, components }: ContentProps): react_jsx_runtime.JSX.Element | null;
333
+
334
+ interface TextContentProps {
335
+ content: string;
336
+ className?: string;
337
+ }
338
+ declare function TextContent({ content, className }: TextContentProps): react_jsx_runtime.JSX.Element | null;
339
+
340
+ interface JsonContentProps {
341
+ content: unknown;
342
+ className?: string;
343
+ }
344
+ declare function JsonContent({ content, className }: JsonContentProps): react_jsx_runtime.JSX.Element | null;
345
+
346
+ interface MarkdownContentProps {
347
+ /** The markdown content to render */
348
+ content: string;
349
+ /** Additional CSS class names */
350
+ className?: string;
351
+ }
352
+ /**
353
+ * Renders markdown content with GitHub Flavored Markdown support.
354
+ *
355
+ * @example
356
+ * ```tsx
357
+ * <MarkdownContent content="# Hello\n\nThis is **bold** text." />
358
+ * ```
359
+ */
360
+ declare function MarkdownContent({ content, className }: MarkdownContentProps): react_jsx_runtime.JSX.Element | null;
361
+
362
+ interface TableColumn {
363
+ column_name: string;
364
+ key: string;
365
+ format?: string;
366
+ value_type?: 'number' | 'category' | 'date';
367
+ }
368
+ interface TableContentProps {
369
+ title?: string;
370
+ columns: TableColumn[];
371
+ data: any[];
372
+ className?: string;
373
+ maxRows?: number;
374
+ }
375
+ declare function TableContent({ title, columns, data, className, maxRows }: TableContentProps): react_jsx_runtime.JSX.Element;
376
+
283
377
  interface Axis {
284
378
  axis_label: string;
285
379
  key: string;
@@ -325,78 +419,227 @@ interface ChartContentProps {
325
419
  }
326
420
  declare function ChartContent({ config, data, className }: ChartContentProps): react_jsx_runtime.JSX.Element;
327
421
 
328
- interface ContentProps {
422
+ interface ThinkingContentProps {
329
423
  item: ContentItem;
330
424
  className?: string;
331
- components?: Partial<{
332
- text: React__default.ComponentType<{
333
- content: string;
334
- className?: string;
335
- }>;
336
- json: React__default.ComponentType<{
337
- content: string | object;
338
- className?: string;
339
- }>;
340
- chart: React__default.ComponentType<{
341
- config: ContentChartConfig;
342
- data: any[];
343
- className?: string;
344
- }>;
345
- table: React__default.ComponentType<{
346
- title?: string;
347
- columns: any[];
348
- data: any[];
349
- className?: string;
350
- }>;
351
- }>;
352
425
  }
353
426
  /**
354
- * Routes content to the appropriate renderer based on content_type and ui_content_type.
427
+ * Renders Claude's thinking/reasoning content in a collapsible panel.
428
+ * Handles both regular thinking and redacted (encrypted) thinking.
355
429
  */
356
- 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;
430
+ declare function ThinkingContent({ item, className }: ThinkingContentProps): react_jsx_runtime.JSX.Element;
357
431
 
358
- interface TextContentProps {
359
- content: string;
432
+ interface LogContentProps {
433
+ item: ContentItem;
360
434
  className?: string;
361
435
  }
362
- declare function TextContent({ content, className }: TextContentProps): react_jsx_runtime.JSX.Element | null;
436
+ interface LogProps {
437
+ log: LogEntry;
438
+ }
439
+ declare function Log({ log }: LogProps): react_jsx_runtime.JSX.Element;
440
+ /**
441
+ * Renders log entries with level-based styling (info, error, requires_info).
442
+ */
443
+ declare function LogContent({ item, className }: LogContentProps): react_jsx_runtime.JSX.Element;
363
444
 
364
- interface JsonContentProps {
365
- content: string | object;
445
+ interface WebSearchContentProps {
446
+ item: ContentItem;
366
447
  className?: string;
367
448
  }
368
- declare function JsonContent({ content, className }: JsonContentProps): react_jsx_runtime.JSX.Element | null;
449
+ /**
450
+ * Renders web search results as a list of clickable cards.
451
+ */
452
+ declare function WebSearchContent({ item, className }: WebSearchContentProps): react_jsx_runtime.JSX.Element | null;
369
453
 
370
- interface MarkdownContentProps {
371
- /** The markdown text to render */
372
- text: string;
373
- /** Additional CSS class names */
454
+ interface WebParseContentProps {
455
+ item: ContentItem;
374
456
  className?: string;
375
457
  }
376
458
  /**
377
- * Renders markdown content with GitHub Flavored Markdown support.
378
- *
379
- * @example
380
- * ```tsx
381
- * <MarkdownContent text="# Hello\n\nThis is **bold** text." />
382
- * ```
459
+ * Renders parsed web page content with title, description, and markdown body.
383
460
  */
384
- declare function MarkdownContent({ text, className }: MarkdownContentProps): react_jsx_runtime.JSX.Element | null;
461
+ declare function WebParseContent({ item, className }: WebParseContentProps): react_jsx_runtime.JSX.Element | null;
385
462
 
386
- interface TableColumn {
387
- column_name: string;
388
- key: string;
389
- format?: string;
390
- value_type?: 'number' | 'category' | 'date';
463
+ type WrapperType = 'standard' | 'info' | 'warning';
464
+ interface ExpandableOutputContentProps {
465
+ children: React__default.ReactNode;
466
+ defaultOpen?: boolean;
467
+ wrapperType?: WrapperType;
468
+ compact?: boolean;
469
+ className?: string;
391
470
  }
392
- interface TableContentProps {
471
+ /**
472
+ * An expandable container for code output with max-height and scroll.
473
+ */
474
+ declare function ExpandableOutputContent({ children, defaultOpen, wrapperType, compact, className, }: ExpandableOutputContentProps): react_jsx_runtime.JSX.Element;
475
+ interface OutputLineProps {
476
+ children: React__default.ReactNode;
477
+ timestamp?: string;
478
+ }
479
+ /**
480
+ * Standard output text line with optional timestamp.
481
+ */
482
+ declare function StdoutText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
483
+ /**
484
+ * Error/stderr output text line with info styling.
485
+ */
486
+ declare function StderrText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
487
+ /**
488
+ * Warning output text line with warning styling.
489
+ */
490
+ declare function StdwarnText({ children, timestamp }: OutputLineProps): react_jsx_runtime.JSX.Element;
491
+
492
+ interface CollapsibleCodeBlockProps {
493
+ language: string;
494
+ value: string;
495
+ defaultOpen?: boolean;
393
496
  title?: string;
394
- columns: TableColumn[];
395
- data: any[];
497
+ closeTitle?: string;
396
498
  className?: string;
397
- maxRows?: number;
499
+ /** Theme: 'dark' | 'light' | 'auto'. Auto uses prefers-color-scheme. Default: 'auto' */
500
+ theme?: 'dark' | 'light' | 'auto';
398
501
  }
399
- declare function TableContent({ title, columns, data, className, maxRows }: TableContentProps): react_jsx_runtime.JSX.Element;
502
+ /**
503
+ * A collapsible code block with syntax highlighting.
504
+ */
505
+ declare function CollapsibleCodeBlock({ language, value, defaultOpen, title, closeTitle, className, theme, }: CollapsibleCodeBlockProps): react_jsx_runtime.JSX.Element;
506
+
507
+ interface SqlContentProps {
508
+ item: ContentItem;
509
+ className?: string;
510
+ }
511
+ /**
512
+ * Renders SQL generation content with thinking text and collapsible SQL code.
513
+ */
514
+ declare function SqlContent({ item, className }: SqlContentProps): react_jsx_runtime.JSX.Element | null;
515
+
516
+ interface CodegenContentProps {
517
+ item: ContentItem;
518
+ className?: string;
519
+ }
520
+ /**
521
+ * Renders code generation content with step-by-step explanation, code, and warnings.
522
+ */
523
+ declare function CodegenContent({ item, className }: CodegenContentProps): react_jsx_runtime.JSX.Element | null;
524
+
525
+ interface CodeexecContentProps {
526
+ item: ContentItem;
527
+ className?: string;
528
+ }
529
+ /**
530
+ * Renders code execution output (stdout, stderr, warnings).
531
+ */
532
+ declare function CodeexecContent({ item, className }: CodeexecContentProps): react_jsx_runtime.JSX.Element | null;
533
+
534
+ interface ToolGroupContentProps {
535
+ /** The tool group data */
536
+ toolGroup: ToolGroup;
537
+ /** Optional Content component for rendering nested results (avoids circular imports) */
538
+ ContentComponent?: React__default.ComponentType<{
539
+ content: ContentItem;
540
+ className?: string;
541
+ }>;
542
+ className?: string;
543
+ }
544
+ /**
545
+ * Renders tool invocations and their results in a collapsible format.
546
+ */
547
+ declare function ToolGroupContent({ toolGroup, ContentComponent, className, }: ToolGroupContentProps): react_jsx_runtime.JSX.Element;
548
+
549
+ /** Content data for a bot invocation (passed in ContentItem.content) */
550
+ interface BotInvocationContentData {
551
+ /** Unique invocation ID */
552
+ invocation_id: string;
553
+ /** Bot ID */
554
+ bot_id: string;
555
+ /** Bot display name */
556
+ bot_name: string;
557
+ /** Whether this invocation is transparent (embedded) */
558
+ transparent?: boolean;
559
+ }
560
+ /** Status information for a bot invocation */
561
+ interface BotInvocationStatusInfo {
562
+ /** Current status of the invocation */
563
+ status: InvocationStatus$1 | string;
564
+ /** Optional status message */
565
+ message?: string | {
566
+ Valid: boolean;
567
+ String: string;
568
+ };
569
+ }
570
+ /** Event within a bot invocation */
571
+ interface BotInvocationEventInfo {
572
+ /** Unique event ID */
573
+ id: string;
574
+ /** Event type (output, step, etc.) */
575
+ type: string;
576
+ /** When the event was created */
577
+ created_at?: string;
578
+ /** Event data - structure depends on type */
579
+ data?: unknown;
580
+ }
581
+ /** Resolved bot invocation with status and events */
582
+ interface ResolvedBotInvocation {
583
+ /** Current status of the invocation */
584
+ currentStatus?: BotInvocationStatusInfo | null;
585
+ /** Map of events by ID */
586
+ eventsByID?: Record<string, BotInvocationEventInfo>;
587
+ /** Additional invocation details */
588
+ [key: string]: unknown;
589
+ }
590
+ interface BotInvocationContentProps {
591
+ /** The content data containing invocation_id, bot_id, bot_name */
592
+ content: BotInvocationContentData;
593
+ /** Resolved bot invocation data with events and status */
594
+ botInvocation?: ResolvedBotInvocation | null;
595
+ /** Whether the invocation is still loading */
596
+ isLoading?: boolean;
597
+ /** Whether this should be open by default */
598
+ defaultOpen?: boolean;
599
+ /** Optional admin link href (e.g., to agent designer) */
600
+ adminLinkHref?: string;
601
+ /** Optional admin link text */
602
+ adminLinkText?: string;
603
+ /** Whether to show the admin link */
604
+ showAdminLink?: boolean;
605
+ /** Callback when admin link is clicked */
606
+ onAdminClick?: (invocationId: string, botId: string) => void;
607
+ /** Callback when invocation is expanded */
608
+ onExpand?: (invocationId: string, botId: string, botName: string) => void;
609
+ /** Component for rendering nested events */
610
+ EventsComponent?: React__default.ComponentType<{
611
+ eventsByID: Record<string, BotInvocationEventInfo>;
612
+ defaultOpen?: boolean;
613
+ }>;
614
+ /** Component for rendering individual content items */
615
+ ContentComponent?: React__default.ComponentType<{
616
+ content: ContentItem;
617
+ className?: string;
618
+ }>;
619
+ className?: string;
620
+ }
621
+ /**
622
+ * Renders a bot invocation with status, collapsible events, and optional admin link.
623
+ *
624
+ * This component is designed to receive already-processed invocation data.
625
+ * Data fetching should be handled by the consuming application.
626
+ */
627
+ declare function BotInvocationContent({ content, botInvocation, isLoading, defaultOpen, adminLinkHref, adminLinkText, showAdminLink, onAdminClick, onExpand, EventsComponent, ContentComponent: _ContentComponent, className, }: BotInvocationContentProps): react_jsx_runtime.JSX.Element | null;
628
+
629
+ type SpinnerStatus = 'loading' | 'finished' | 'failed';
630
+ interface StatusSpinnerProps {
631
+ status: SpinnerStatus;
632
+ /** Icon color - if not provided, auto-detects from theme (white for dark, black for light) */
633
+ color?: string;
634
+ /** Size in pixels - defaults to 16 */
635
+ size?: number;
636
+ className?: string;
637
+ }
638
+ /**
639
+ * Animated status spinner using Lordicon/Lottie animations.
640
+ * Shows a spinning loader when loading, checkmark when finished, and alert when failed.
641
+ */
642
+ declare function StatusSpinner({ status, color, size, className }: StatusSpinnerProps): react_jsx_runtime.JSX.Element;
400
643
 
401
644
  interface ZoomState {
402
645
  refAreaLeft: number | null;
@@ -928,4 +1171,4 @@ declare function handleIncrementalMixedJsonParsing(outputContent: MessageContent
928
1171
  */
929
1172
  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;
930
1173
 
931
- 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 };
1174
+ 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 };