@optilogic/chat 1.0.0-beta.9 → 1.0.0

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.
Files changed (31) hide show
  1. package/README.md +43 -0
  2. package/dist/index.cjs +709 -79
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +283 -4
  5. package/dist/index.d.ts +283 -4
  6. package/dist/index.js +674 -53
  7. package/dist/index.js.map +1 -1
  8. package/package.json +3 -3
  9. package/src/components/agent-response/AgentResponse.tsx +59 -13
  10. package/src/components/agent-response/components/MetadataRow.tsx +15 -4
  11. package/src/components/agent-response/components/TruncatedMessage.tsx +52 -0
  12. package/src/components/agent-response/components/index.ts +3 -0
  13. package/src/components/agent-response/hooks/useAgentResponseAccumulator.ts +65 -8
  14. package/src/components/agent-response/index.ts +19 -0
  15. package/src/components/agent-response/types.ts +61 -1
  16. package/src/components/agent-timeline/AgentTimeline.tsx +256 -0
  17. package/src/components/agent-timeline/TimelineAgentBlock.tsx +84 -0
  18. package/src/components/agent-timeline/TimelineItem.tsx +97 -0
  19. package/src/components/agent-timeline/index.ts +14 -0
  20. package/src/components/agent-timeline/types.ts +49 -0
  21. package/src/components/agent-timeline/utils.ts +189 -0
  22. package/src/components/hitl-interactions/HITLQuestionPanel.tsx +35 -21
  23. package/src/components/hitl-interactions/index.ts +1 -1
  24. package/src/components/inline-actions/ActionMarkdownRenderer.tsx +60 -0
  25. package/src/components/inline-actions/index.ts +18 -0
  26. package/src/components/inline-actions/parseResponseSegments.ts +66 -0
  27. package/src/components/inline-actions/prompts.ts +41 -0
  28. package/src/components/inline-actions/types.ts +57 -0
  29. package/src/components/user-prompt-input/UserPromptInput.tsx +13 -8
  30. package/src/components/user-prompt-input/types.ts +4 -0
  31. package/src/index.ts +29 -0
package/dist/index.d.ts CHANGED
@@ -1,10 +1,53 @@
1
1
  import * as React from 'react';
2
+ import { ReactNode, ComponentType } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+
5
+ /** All possible timeline entry types */
6
+ type TimelineEntryType = "thinking" | "tool_call" | "knowledge" | "memory" | "status_update" | "ai_response" | "error";
7
+ /** A single event in the agent execution timeline */
8
+ interface TimelineEntry {
9
+ /** Unique ID for React keys */
10
+ id: string;
11
+ /** Discriminated type for icon and rendering */
12
+ type: TimelineEntryType;
13
+ /** The agent that produced this entry */
14
+ agentName: string | null;
15
+ /** The parent agent (null for root agent) */
16
+ parentAgent: string | null;
17
+ /** Nesting depth (0 = root) */
18
+ depth: number;
19
+ /** Display content (may be long) */
20
+ content: string;
21
+ /** Original title from the WebSocket message */
22
+ title: string | null;
23
+ /** Millisecond timestamp for ordering */
24
+ timestamp: number;
25
+ }
26
+ /** A consecutive run of messages from the same agent */
27
+ interface AgentRun {
28
+ /** Agent name (display label) */
29
+ agentName: string;
30
+ /** Parent agent name (null for root) */
31
+ parentAgent: string | null;
32
+ /** Depth in agent hierarchy */
33
+ depth: number;
34
+ /** The entries belonging to this run, in order, after dedup */
35
+ entries: DisplayEntry[];
36
+ }
37
+ /** After dedup — count > 1 means consecutive identical messages collapsed */
38
+ interface DisplayEntry {
39
+ /** The underlying timeline entry (first of the group if deduped) */
40
+ entry: TimelineEntry;
41
+ /** How many consecutive identical messages were collapsed into this one */
42
+ count: number;
43
+ }
2
44
 
3
45
  /**
4
46
  * Agent Response Component Types
5
47
  *
6
48
  * Type definitions for the library-ready agent response component
7
49
  */
50
+
8
51
  /**
9
52
  * Status of the agent response cycle
10
53
  */
@@ -21,6 +64,12 @@ interface ToolCall {
21
64
  name: string;
22
65
  arguments?: Record<string, unknown>;
23
66
  timestamp: number;
67
+ /** Agent that made this call (multi-agent scenarios) */
68
+ agentName?: string | null;
69
+ /** Parent agent name */
70
+ parentAgent?: string | null;
71
+ /** Nesting depth in agent hierarchy */
72
+ depth?: number;
24
73
  }
25
74
  /**
26
75
  * Knowledge retrieval information
@@ -30,6 +79,12 @@ interface KnowledgeItem {
30
79
  source: string;
31
80
  content: string;
32
81
  timestamp: number;
82
+ /** Agent that retrieved this (multi-agent scenarios) */
83
+ agentName?: string | null;
84
+ /** Parent agent name */
85
+ parentAgent?: string | null;
86
+ /** Nesting depth in agent hierarchy */
87
+ depth?: number;
33
88
  }
34
89
  /**
35
90
  * Memory access information
@@ -39,6 +94,23 @@ interface MemoryItem {
39
94
  type: string;
40
95
  content: string;
41
96
  timestamp: number;
97
+ /** Agent that accessed this (multi-agent scenarios) */
98
+ agentName?: string | null;
99
+ /** Parent agent name */
100
+ parentAgent?: string | null;
101
+ /** Nesting depth in agent hierarchy */
102
+ depth?: number;
103
+ }
104
+ /**
105
+ * Potential response (sub-agent intermediate AI response)
106
+ */
107
+ interface PotentialResponse {
108
+ id: string;
109
+ content: string;
110
+ timestamp: number;
111
+ agentName?: string | null;
112
+ parentAgent?: string | null;
113
+ depth?: number;
42
114
  }
43
115
  /**
44
116
  * Status update information from the agent
@@ -49,6 +121,12 @@ interface StatusItem {
49
121
  timestamp: number;
50
122
  /** Optional agent name if in multi-agent scenario */
51
123
  agent?: string;
124
+ /** Agent that produced this (multi-agent scenarios) */
125
+ agentName?: string | null;
126
+ /** Parent agent name */
127
+ parentAgent?: string | null;
128
+ /** Nesting depth in agent hierarchy */
129
+ depth?: number;
52
130
  }
53
131
  /**
54
132
  * A single step in structured thinking content
@@ -64,6 +142,12 @@ interface ThinkingStep {
64
142
  depth: number;
65
143
  /** Whether this step should start collapsed (default: false) */
66
144
  isCollapsed?: boolean;
145
+ /** Timestamp for timeline ordering */
146
+ timestamp?: number;
147
+ /** Agent that produced this (multi-agent scenarios) */
148
+ agentName?: string | null;
149
+ /** Parent agent name */
150
+ parentAgent?: string | null;
67
151
  }
68
152
  /**
69
153
  * Union type for thinking content
@@ -89,8 +173,14 @@ interface AgentResponseState {
89
173
  memory: MemoryItem[];
90
174
  /** Status updates from the agent */
91
175
  statusUpdates: StatusItem[];
176
+ /** Potential responses (sub-agent intermediate AI responses) */
177
+ potentialResponses?: PotentialResponse[];
178
+ /** Custom timeline entries (consumer-provided) */
179
+ customTimelineEntries?: TimelineEntry[];
92
180
  /** Final response text */
93
181
  response: string;
182
+ /** Timeline entries derived from all accumulator arrays (for AgentTimeline) */
183
+ timelineEntries?: TimelineEntry[];
94
184
  /** Timestamp when first thinking message was received (for timer) */
95
185
  thinkingStartTime: number | null;
96
186
  /** Timestamp when response was completed (for final timer display) */
@@ -102,13 +192,21 @@ interface AgentResponseState {
102
192
  * WebSocket message payload for agent responses
103
193
  */
104
194
  interface AgentMessage {
105
- type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update";
195
+ type: "status" | "thinking" | "tool_call" | "knowledge" | "memory" | "response" | "status_update" | "potential_response";
106
196
  /** Message content - for simple string payloads */
107
197
  message?: string;
108
198
  /** Alternative content field */
109
199
  content?: string;
110
200
  /** For status messages */
111
201
  status?: string;
202
+ /** Agent name (multi-agent scenarios) */
203
+ agentName?: string | null;
204
+ /** Parent agent name (multi-agent scenarios) */
205
+ parentAgent?: string | null;
206
+ /** Agent nesting depth (0 = root) */
207
+ depth?: number;
208
+ /** Title/label for timeline display */
209
+ title?: string | null;
112
210
  /** For tool_call messages */
113
211
  tool?: {
114
212
  id: string;
@@ -173,12 +271,19 @@ interface HITLQuestion {
173
271
  questions: string[];
174
272
  options: Record<string, string[]> | null;
175
273
  context: string | null;
176
- timeoutSeconds: number;
274
+ /** Timeout in seconds. When omitted, no countdown is shown and the panel never times out. */
275
+ timeoutSeconds?: number;
177
276
  receivedAt: number;
178
277
  }
278
+ interface HITLResponseData {
279
+ /** Raw selected option text per question, keyed by question text */
280
+ selectedOptions: Record<string, string>;
281
+ /** Freeform text entered by the user (untrimmed) */
282
+ freeformText: string;
283
+ }
179
284
  interface HITLQuestionPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
180
285
  question: HITLQuestion;
181
- onSubmit: (response: string) => void;
286
+ onSubmit: (response: string, data: HITLResponseData) => void;
182
287
  onStop: () => void;
183
288
  }
184
289
  /**
@@ -240,6 +345,23 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
240
345
  hitlInteractions?: HITLInteraction[];
241
346
  /** Whether the HITL section starts expanded (default: false) */
242
347
  defaultHITLExpanded?: boolean;
348
+ /**
349
+ * Optional content to display in the MetadataRow's middle area,
350
+ * between the thinking toggle (left) and activity indicators (right).
351
+ * Typically used for ephemeral status messages during processing.
352
+ * The parent is responsible for setting and clearing this content.
353
+ *
354
+ * @example
355
+ * <AgentResponse
356
+ * state={state}
357
+ * statusContent={
358
+ * state.status !== 'complete'
359
+ * ? <TruncatedMessage message="Analyzing data..." />
360
+ * : undefined
361
+ * }
362
+ * />
363
+ */
364
+ statusContent?: React.ReactNode;
243
365
  /**
244
366
  * Custom markdown renderer for the response content.
245
367
  * If not provided, the response will be rendered as plain text.
@@ -262,6 +384,11 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
262
384
  * />
263
385
  */
264
386
  renderThinkingMarkdown?: (content: string) => React.ReactNode;
387
+ /**
388
+ * Maximum height of the AgentTimeline scrollable container.
389
+ * Defaults to "300px". Set to "none" to disable the constraint.
390
+ */
391
+ timelineMaxHeight?: string;
265
392
  }
266
393
  /**
267
394
  * AgentResponse Component
@@ -349,6 +476,8 @@ interface MetadataRowProps extends React.HTMLAttributes<HTMLDivElement> {
349
476
  memory: MemoryItem[];
350
477
  /** Status updates to display */
351
478
  statusUpdates?: StatusItem[];
479
+ /** Optional content to display in the middle area between left content and activity indicators */
480
+ statusContent?: React.ReactNode;
352
481
  /** Current response status */
353
482
  status: AgentResponseStatus;
354
483
  /** Elapsed time in seconds */
@@ -472,6 +601,36 @@ interface HITLSectionProps extends React.HTMLAttributes<HTMLDivElement> {
472
601
  }
473
602
  declare const HITLSection: React.ForwardRefExoticComponent<HITLSectionProps & React.RefAttributes<HTMLDivElement>>;
474
603
 
604
+ /**
605
+ * Truncated Message Component
606
+ *
607
+ * Renders a single-line text message with CSS-based truncation (text-overflow: ellipsis).
608
+ * Designed as a standalone utility that can be used anywhere, including as
609
+ * the statusContent slot in MetadataRow.
610
+ */
611
+
612
+ interface TruncatedMessageProps extends React.HTMLAttributes<HTMLDivElement> {
613
+ /** The message string to display (truncated with ellipsis if it overflows) */
614
+ message: string;
615
+ }
616
+ /**
617
+ * TruncatedMessage Component
618
+ *
619
+ * Displays a single-line text message that truncates with an ellipsis when
620
+ * it overflows its container. Uses CSS text-overflow for zero-JS truncation.
621
+ *
622
+ * @example
623
+ * <TruncatedMessage message="Searching the knowledge base for relevant documents..." />
624
+ *
625
+ * @example
626
+ * // Inside MetadataRow's statusContent slot
627
+ * <AgentResponse
628
+ * state={state}
629
+ * statusContent={<TruncatedMessage message="Running analysis..." />}
630
+ * />
631
+ */
632
+ declare const TruncatedMessage: React.ForwardRefExoticComponent<TruncatedMessageProps & React.RefAttributes<HTMLDivElement>>;
633
+
475
634
  /**
476
635
  * useThinkingTimer Hook
477
636
  *
@@ -537,6 +696,49 @@ declare function formatTime(seconds: number, isComplete: boolean): string;
537
696
  */
538
697
  declare function formatTotalTime(seconds: number): string;
539
698
 
699
+ /** Externalized UI state that survives component remounts */
700
+ interface TimelineUIState {
701
+ expandedItems: Set<string>;
702
+ collapsedRuns: Set<string>;
703
+ activeFilters: Set<TimelineEntryType>;
704
+ }
705
+ declare function createTimelineUIState(): TimelineUIState;
706
+ interface AgentTimelineProps {
707
+ entries: TimelineEntry[];
708
+ renderMarkdown?: (content: string) => ReactNode;
709
+ /**
710
+ * External UI state store. When provided, expand/collapse/filter state
711
+ * is read from and written to this object (which should be ref-backed
712
+ * in the parent) so it survives component remounts during streaming.
713
+ */
714
+ uiState?: TimelineUIState;
715
+ /**
716
+ * Maximum height of the scrollable timeline container.
717
+ * Defaults to "300px". Set to "none" to disable.
718
+ */
719
+ maxHeight?: string;
720
+ }
721
+ declare function AgentTimeline({ entries, renderMarkdown, uiState, maxHeight }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
722
+
723
+ /**
724
+ * Build a flat, chronologically sorted array of TimelineEntry from the
725
+ * accumulator state. Maps each typed array (toolCalls, knowledge, etc.)
726
+ * to unified TimelineEntry objects with per-source stable IDs.
727
+ */
728
+ declare function buildTimelineEntries(state: AgentResponseState): TimelineEntry[];
729
+ /**
730
+ * Group a sorted array of timeline entries into consecutive "agent runs".
731
+ * A new run starts whenever the agentName changes.
732
+ * Each run's entries are deduplicated.
733
+ */
734
+ declare function groupIntoAgentRuns(entries: TimelineEntry[]): AgentRun[];
735
+ /**
736
+ * Collapse consecutive entries with identical type AND content into
737
+ * a single DisplayEntry with count > 1.
738
+ * Handles patterns like "Loading documents" appearing 8 times.
739
+ */
740
+ declare function deduplicateEntries(entries: DisplayEntry[]): DisplayEntry[];
741
+
540
742
  interface UserPromptProps extends React.HTMLAttributes<HTMLDivElement> {
541
743
  /** The text content of the user's message */
542
744
  content: string;
@@ -585,6 +787,10 @@ interface UserPromptInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
585
787
  isSubmitting?: boolean;
586
788
  /** Called when user clicks Stop during submission */
587
789
  onStop?: () => void;
790
+ /** Tooltip text shown on hover over the stop button */
791
+ stopTooltip?: string;
792
+ /** Additional CSS class names applied to the stop button */
793
+ stopClassName?: string;
588
794
  /** Whether to disable input while submitting (default: true) */
589
795
  disableWhileSubmitting?: boolean;
590
796
  /** Auto-focus the editor when mounted (handles Slate initialization timing) */
@@ -638,4 +844,77 @@ interface UserPromptInputRef {
638
844
  */
639
845
  declare const UserPromptInput: React.ForwardRefExoticComponent<UserPromptInputProps & React.RefAttributes<UserPromptInputRef>>;
640
846
 
641
- export { ActionBar, type ActionBarProps, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, HITLSection, type HITLSectionProps, type KnowledgeItem, type MemoryItem, MetadataRow, type MetadataRowProps, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type ToolCall, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };
847
+ interface MarkdownSegment {
848
+ kind: "markdown";
849
+ content: string;
850
+ }
851
+ interface ActionSegment {
852
+ kind: "action";
853
+ actionType: string;
854
+ payload: Record<string, unknown>;
855
+ }
856
+ type ResponseSegment = MarkdownSegment | ActionSegment;
857
+ /**
858
+ * Props passed to every inline action component.
859
+ * T is the shape of the payload for this specific action type.
860
+ */
861
+ interface InlineActionProps<T = Record<string, unknown>> {
862
+ /** The parsed payload from the json:action block */
863
+ payload: T;
864
+ /** Callback to send results back to the page (e.g., map data) */
865
+ onAction?: (actionType: string, result: unknown) => void;
866
+ /** True for the most recent agent message; affects button labels */
867
+ isLatest?: boolean;
868
+ }
869
+ /**
870
+ * Maps action type strings to React components that render them.
871
+ * The consuming page owns this registry.
872
+ */
873
+ type ActionComponentRegistry = Record<string, ComponentType<InlineActionProps<any>>>;
874
+ interface ActionMarkdownRendererProps {
875
+ /** The raw response text (may contain json:action blocks) */
876
+ content: string;
877
+ /** Registry of action type -> component */
878
+ registry: ActionComponentRegistry;
879
+ /** The existing renderMarkdown function for plain markdown segments */
880
+ renderMarkdown: (content: string) => ReactNode;
881
+ /** Callback forwarded to action components */
882
+ onAction?: (actionType: string, result: unknown) => void;
883
+ /** Whether this is the latest (most recent) agent message */
884
+ isLatest?: boolean;
885
+ }
886
+
887
+ /**
888
+ * Renders agent response text with inline action components.
889
+ *
890
+ * Parses the response for ```json:action blocks, renders markdown
891
+ * segments via the provided renderMarkdown function, and renders
892
+ * action segments via the component registry.
893
+ *
894
+ * Unknown action types fall back to a raw JSON code block display.
895
+ */
896
+ declare function ActionMarkdownRenderer({ content, registry, renderMarkdown, onAction, isLatest, }: ActionMarkdownRendererProps): react_jsx_runtime.JSX.Element;
897
+
898
+ /**
899
+ * Parse response text into interleaved markdown and action segments.
900
+ *
901
+ * Finds ```json:action ... ``` fenced code blocks, extracts them as
902
+ * action segments, and returns the surrounding text as markdown segments.
903
+ *
904
+ * Malformed JSON or blocks missing a "type" field are left as markdown
905
+ * (rendered as raw code blocks) for graceful degradation.
906
+ */
907
+ declare function parseResponseSegments(text: string): ResponseSegment[];
908
+
909
+ /**
910
+ * System prompt instructions for agents that emit inline action blocks.
911
+ *
912
+ * Import and append to your agent's system prompt so it knows the
913
+ * json:action format. The XML tags ensure clear boundaries for the LLM.
914
+ *
915
+ * When adding a new action type, add an entry under "Available action types"
916
+ * and create the corresponding React component + registry entry.
917
+ */
918
+ declare const INLINE_ACTION_PROMPT = "\n<inline_actions>\nWhen your response should include interactive components (like query viewers,\ndata tables, or executable actions), embed them as fenced code blocks using\nthe `json:action` language tag:\n\n```json:action\n{\n \"type\": \"action-type-here\",\n ...action-specific fields\n}\n```\n\nRules:\n- Each block must contain valid JSON with a \"type\" field.\n- The \"type\" must match a registered action component on the frontend.\n- Multiple action blocks per response are allowed.\n- Surround action blocks with normal markdown text for user context.\n- The action block is rendered as an interactive component in the chat UI.\n- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\\").\n\nAvailable action types:\n\n- \"optimap-query\": Displays SQL queries with a button to execute them and\n update the 3D globe map.\n Required fields:\n - type: \"optimap-query\"\n - locations_sql: string (the validated locations SQL query)\n - routes_sql: string (the validated routes SQL query)\n - database_name: string (the target database name)\n</inline_actions>\n";
919
+
920
+ export { ActionBar, type ActionBarProps, type ActionComponentRegistry, ActionMarkdownRenderer, type ActionMarkdownRendererProps, type ActionSegment, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type AgentRun, AgentTimeline, type DisplayEntry, type FeedbackValue, type GenericWebSocketMessage, type HITLInteraction, HITLInteractionRecord, type HITLInteractionRecordProps, type HITLQuestion, HITLQuestionPanel, type HITLQuestionPanelProps, type HITLResponseData, HITLSection, type HITLSectionProps, INLINE_ACTION_PROMPT, type InlineActionProps, type KnowledgeItem, type MarkdownSegment, type MemoryItem, MetadataRow, type MetadataRowProps, type PotentialResponse, type ResponseSegment, type StatusItem, type ThinkingContent, ThinkingSection, type ThinkingSectionProps, type ThinkingStep, type TimelineEntry, type TimelineEntryType, type TimelineUIState, type ToolCall, TruncatedMessage, type TruncatedMessageProps, type UseAgentResponseAccumulatorOptions, type UseAgentResponseAccumulatorReturn, type UseThinkingTimerOptions, UserPrompt, UserPromptInput, type UserPromptInputProps, type UserPromptInputRef, type UserPromptProps, buildResponseString, buildTimelineEntries, createTimelineUIState, deduplicateEntries, formatTime, formatTotalTime, groupIntoAgentRuns, initialAgentResponseState, parseResponseSegments, useAgentResponseAccumulator, useThinkingTimer };