@optilogic/chat 1.0.0-beta.8 → 1.0.0

package/src/components/inline-actions/parseResponseSegments.ts

@@ -0,0 +1,66 @@
+import type { ResponseSegment } from "./types";
+
+/**
+ * Regex to match ```json:action fenced code blocks.
+ * Captures the JSON content between the fences.
+ */
+const ACTION_BLOCK_REGEX = /```json:action\s*\n([\s\S]*?)```/g;
+
+/**
+ * Parse response text into interleaved markdown and action segments.
+ *
+ * Finds ```json:action ... ``` fenced code blocks, extracts them as
+ * action segments, and returns the surrounding text as markdown segments.
+ *
+ * Malformed JSON or blocks missing a "type" field are left as markdown
+ * (rendered as raw code blocks) for graceful degradation.
+ */
+export function parseResponseSegments(text: string): ResponseSegment[] {
+  if (!text) return [];
+
+  const segments: ResponseSegment[] = [];
+  let lastIndex = 0;
+
+  // Reset regex state (global regexes are stateful)
+  ACTION_BLOCK_REGEX.lastIndex = 0;
+
+  let match: RegExpExecArray | null;
+  while ((match = ACTION_BLOCK_REGEX.exec(text)) !== null) {
+    // Add markdown segment for text before this match
+    const before = text.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ kind: "markdown", content: before });
+    }
+
+    // Try to parse the JSON content
+    const jsonContent = match[1].trim();
+    let parsed: Record<string, unknown> | null = null;
+    try {
+      parsed = JSON.parse(jsonContent);
+    } catch {
+      // Malformed JSON — fall back to markdown
+    }
+
+    if (parsed && typeof parsed === "object" && typeof parsed.type === "string") {
+      segments.push({
+        kind: "action",
+        actionType: parsed.type as string,
+        payload: parsed,
+      });
+    } else {
+      // Missing "type" field or invalid JSON — render as raw code block
+      const rawBlock = match[0];
+      segments.push({ kind: "markdown", content: rawBlock });
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add trailing markdown segment
+  const trailing = text.slice(lastIndex);
+  if (trailing.trim()) {
+    segments.push({ kind: "markdown", content: trailing });
+  }
+
+  return segments;
+}

package/src/components/inline-actions/prompts.ts

@@ -0,0 +1,41 @@
+/**
+ * System prompt instructions for agents that emit inline action blocks.
+ *
+ * Import and append to your agent's system prompt so it knows the
+ * json:action format. The XML tags ensure clear boundaries for the LLM.
+ *
+ * When adding a new action type, add an entry under "Available action types"
+ * and create the corresponding React component + registry entry.
+ */
+export const INLINE_ACTION_PROMPT = `
+<inline_actions>
+When your response should include interactive components (like query viewers,
+data tables, or executable actions), embed them as fenced code blocks using
+the \`json:action\` language tag:
+
+\`\`\`json:action
+{
+  "type": "action-type-here",
+  ...action-specific fields
+}
+\`\`\`
+
+Rules:
+- Each block must contain valid JSON with a "type" field.
+- The "type" must match a registered action component on the frontend.
+- Multiple action blocks per response are allowed.
+- Surround action blocks with normal markdown text for user context.
+- The action block is rendered as an interactive component in the chat UI.
+- SQL strings inside JSON must be properly escaped (newlines as \\n, quotes as \\").
+
+Available action types:
+
+- "optimap-query": Displays SQL queries with a button to execute them and
+  update the 3D globe map.
+  Required fields:
+    - type: "optimap-query"
+    - locations_sql: string (the validated locations SQL query)
+    - routes_sql: string (the validated routes SQL query)
+    - database_name: string (the target database name)
+</inline_actions>
+`;

package/src/components/inline-actions/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode, ComponentType } from "react";
+
+// --- Segment types (output of parser) ---
+
+export interface MarkdownSegment {
+  kind: "markdown";
+  content: string;
+}
+
+export interface ActionSegment {
+  kind: "action";
+  actionType: string;
+  payload: Record<string, unknown>;
+}
+
+export type ResponseSegment = MarkdownSegment | ActionSegment;
+
+// --- Component props ---
+
+/**
+ * Props passed to every inline action component.
+ * T is the shape of the payload for this specific action type.
+ */
+export interface InlineActionProps<T = Record<string, unknown>> {
+  /** The parsed payload from the json:action block */
+  payload: T;
+  /** Callback to send results back to the page (e.g., map data) */
+  onAction?: (actionType: string, result: unknown) => void;
+  /** True for the most recent agent message; affects button labels */
+  isLatest?: boolean;
+}
+
+// --- Registry ---
+
+/**
+ * Maps action type strings to React components that render them.
+ * The consuming page owns this registry.
+ */
+export type ActionComponentRegistry = Record<
+  string,
+  ComponentType<InlineActionProps<any>>
+>;
+
+// --- Renderer props ---
+
+export interface ActionMarkdownRendererProps {
+  /** The raw response text (may contain json:action blocks) */
+  content: string;
+  /** Registry of action type -> component */
+  registry: ActionComponentRegistry;
+  /** The existing renderMarkdown function for plain markdown segments */
+  renderMarkdown: (content: string) => ReactNode;
+  /** Callback forwarded to action components */
+  onAction?: (actionType: string, result: unknown) => void;
+  /** Whether this is the latest (most recent) agent message */
+  isLatest?: boolean;
+}

package/src/components/user-prompt-input/UserPromptInput.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Send, Loader2, Square } from "lucide-react";
-import { cn, IconButton } from "@optilogic/core";
+import { cn, IconButton, Tooltip } from "@optilogic/core";
 import {
   SlateEditor,
   Text,
@@ -143,6 +143,8 @@ export const UserPromptInput = React.forwardRef<
       disabled = false,
       isSubmitting = false,
       onStop,
+      stopTooltip,
+      stopClassName,
       disableWhileSubmitting = true,
       autoFocus = false,
       refocusAfterSubmit = false,
@@ -294,13 +296,16 @@ export const UserPromptInput = React.forwardRef<
 
           {/* Send/Stop button */}
           {isSubmitting && onStop ? (
-            <IconButton
-              icon={<Square />}
-              variant="filled"
-              size="sm"
-              aria-label="Stop"
-              onClick={onStop}
-            />
+            <Tooltip content={stopTooltip} disabled={!stopTooltip}>
+              <IconButton
+                icon={<Square />}
+                variant="filled"
+                size="sm"
+                aria-label={stopTooltip || "Stop"}
+                onClick={onStop}
+                className={stopClassName}
+              />
+            </Tooltip>
           ) : (
             <IconButton
               icon={

package/src/components/user-prompt-input/types.ts

@@ -18,6 +18,10 @@ export interface UserPromptInputProps
   isSubmitting?: boolean;
   /** Called when user clicks Stop during submission */
   onStop?: () => void;
+  /** Tooltip text shown on hover over the stop button */
+  stopTooltip?: string;
+  /** Additional CSS class names applied to the stop button */
+  stopClassName?: string;
   /** Whether to disable input while submitting (default: true) */
   disableWhileSubmitting?: boolean;
   /** Auto-focus the editor when mounted (handles Slate initialization timing) */

package/src/index.ts

@@ -15,10 +15,14 @@ export {
   MetadataRow,
   ThinkingSection,
   ActionBar,
+  HITLSection,
+  TruncatedMessage,
   type ActivityIndicatorsProps,
   type MetadataRowProps,
   type ThinkingSectionProps,
   type ActionBarProps,
+  type HITLSectionProps,
+  type TruncatedMessageProps,
 
   // Hooks
   useAgentResponseAccumulator,
@@ -37,6 +41,7 @@ export {
   type StatusItem,
   type ThinkingStep,
   type ThinkingContent,
+  type PotentialResponse,
   type AgentMessage,
   type GenericWebSocketMessage,
 
@@ -46,6 +51,18 @@ export {
   // Utilities
   formatTime,
   formatTotalTime,
+
+  // Agent Timeline (replaces ThinkingSection for rich execution visibility)
+  AgentTimeline,
+  createTimelineUIState,
+  buildTimelineEntries,
+  groupIntoAgentRuns,
+  deduplicateEntries,
+  type TimelineUIState,
+  type TimelineEntry,
+  type TimelineEntryType,
+  type AgentRun,
+  type DisplayEntry,
 } from "./components/agent-response";
 
 // User Prompt - Component for displaying user messages
@@ -57,3 +74,28 @@ export {
   type UserPromptInputProps,
   type UserPromptInputRef,
 } from "./components/user-prompt-input";
+
+// HITL Interactions - Human-in-the-loop question/response components
+export {
+  HITLQuestionPanel,
+  type HITLQuestionPanelProps,
+  HITLInteractionRecord,
+  type HITLInteractionRecordProps,
+  type HITLQuestion,
+  type HITLInteraction,
+  type HITLResponseData,
+  buildResponseString,
+} from "./components/hitl-interactions";
+
+// Inline Actions - Components for rendering interactive actions within markdown
+export {
+  ActionMarkdownRenderer,
+  parseResponseSegments,
+  INLINE_ACTION_PROMPT,
+  type ResponseSegment,
+  type MarkdownSegment,
+  type ActionSegment,
+  type InlineActionProps,
+  type ActionComponentRegistry,
+  type ActionMarkdownRendererProps,
+} from "./components/inline-actions";