@optilogic/chat 1.0.0-beta.9 → 1.1.0

package/src/components/hitl-interactions/HITLQuestionPanel.tsx

@@ -20,14 +20,22 @@ export interface HITLQuestion {
   questions: string[];
   options: Record<string, string[]> | null;
   context: string | null;
-  timeoutSeconds: number;
+  /** Timeout in seconds. When omitted, no countdown is shown and the panel never times out. */
+  timeoutSeconds?: number;
   receivedAt: number;
 }
 
+export interface HITLResponseData {
+  /** Raw selected option text per question, keyed by question text */
+  selectedOptions: Record<string, string>;
+  /** Freeform text entered by the user (untrimmed) */
+  freeformText: string;
+}
+
 export interface HITLQuestionPanelProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
   question: HITLQuestion;
-  onSubmit: (response: string) => void;
+  onSubmit: (response: string, data: HITLResponseData) => void;
   onStop: () => void;
 }
 
@@ -65,13 +73,16 @@ const HITLQuestionPanel = React.forwardRef<
   const [selectedOptions, setSelectedOptions] = useState<
     Record<string, string>
   >({});
+  const hasTimeout = question.timeoutSeconds != null;
   const [secondsLeft, setSecondsLeft] = useState(() =>
-    Math.max(
-      0,
-      Math.round(
-        question.timeoutSeconds - (Date.now() - question.receivedAt) / 1000
-      )
-    )
+    hasTimeout
+      ? Math.max(
+          0,
+          Math.round(
+            question.timeoutSeconds! - (Date.now() - question.receivedAt) / 1000
+          )
+        )
+      : Infinity
   );
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -80,22 +91,23 @@ const HITLQuestionPanel = React.forwardRef<
     textareaRef.current?.focus();
   }, []);
 
-  // Countdown timer
+  // Countdown timer (only when timeoutSeconds is provided)
   useEffect(() => {
+    if (!hasTimeout) return;
     const interval = setInterval(() => {
       const remaining = Math.max(
         0,
         Math.round(
-          question.timeoutSeconds - (Date.now() - question.receivedAt) / 1000
+          question.timeoutSeconds! - (Date.now() - question.receivedAt) / 1000
         )
       );
       setSecondsLeft(remaining);
       if (remaining <= 0) clearInterval(interval);
     }, 1000);
     return () => clearInterval(interval);
-  }, [question.timeoutSeconds, question.receivedAt]);
+  }, [hasTimeout, question.timeoutSeconds, question.receivedAt]);
 
-  const timedOut = secondsLeft <= 0;
+  const timedOut = hasTimeout && secondsLeft <= 0;
 
   // Which questions have options defined?
   const questionsWithOptions = useMemo(
@@ -134,7 +146,7 @@ const HITLQuestionPanel = React.forwardRef<
       selectedOptions,
       freeformText
     );
-    onSubmit(combined);
+    onSubmit(combined, { selectedOptions, freeformText });
   }, [canSubmit, question.questions, selectedOptions, freeformText, onSubmit]);
 
   const handleKeyDown = useCallback(
@@ -169,14 +181,16 @@ const HITLQuestionPanel = React.forwardRef<
             {question.reason}
           </p>
         </div>
-        <span
-          className={cn(
-            "text-xs font-mono whitespace-nowrap",
-            secondsLeft <= 30 ? "text-destructive" : "text-muted-foreground"
-          )}
-        >
-          {timedOut ? "Timed out" : formatTime(secondsLeft)}
-        </span>
+        {hasTimeout && (
+          <span
+            className={cn(
+              "text-xs font-mono whitespace-nowrap",
+              secondsLeft <= 30 ? "text-destructive" : "text-muted-foreground"
+            )}
+          >
+            {timedOut ? "Timed out" : formatTime(secondsLeft)}
+          </span>
+        )}
       </div>
 
       {/* Context (if provided) */}

package/src/components/hitl-interactions/index.ts

@@ -7,7 +7,7 @@
 
 // Question panel (interactive input area)
 export { HITLQuestionPanel } from "./HITLQuestionPanel";
-export type { HITLQuestionPanelProps, HITLQuestion } from "./HITLQuestionPanel";
+export type { HITLQuestionPanelProps, HITLQuestion, HITLResponseData } from "./HITLQuestionPanel";
 export { buildResponseString } from "./HITLQuestionPanel";
 
 // Interaction record (read-only history display)

package/src/components/inline-actions/ActionMarkdownRenderer.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { parseResponseSegments } from "./parseResponseSegments";
+import type { ActionMarkdownRendererProps } from "./types";
+
+/**
+ * Renders agent response text with inline action components.
+ *
+ * Parses the response for ```json:action blocks, renders markdown
+ * segments via the provided renderMarkdown function, and renders
+ * action segments via the component registry.
+ *
+ * Unknown action types fall back to a raw JSON code block display.
+ */
+export function ActionMarkdownRenderer({
+  content,
+  registry,
+  renderMarkdown,
+  onAction,
+  isLatest,
+}: ActionMarkdownRendererProps) {
+  const segments = useMemo(() => parseResponseSegments(content), [content]);
+
+  // If no action blocks found, render as plain markdown (skip extra wrapper divs)
+  if (segments.length === 1 && segments[0].kind === "markdown") {
+    return <>{renderMarkdown(segments[0].content)}</>;
+  }
+
+  return (
+    <>
+      {segments.map((segment, index) => {
+        if (segment.kind === "markdown") {
+          return <div key={`md-${index}`}>{renderMarkdown(segment.content)}</div>;
+        }
+
+        // Action segment — look up registered component
+        const Component = registry[segment.actionType];
+        if (!Component) {
+          // Fallback: render raw JSON as a styled code block
+          return (
+            <pre
+              key={`action-fallback-${index}`}
+              className="my-4 p-4 rounded-lg border border-border bg-muted text-sm font-mono overflow-x-auto"
+            >
+              <code>{JSON.stringify(segment.payload, null, 2)}</code>
+            </pre>
+          );
+        }
+
+        return (
+          <Component
+            key={`action-${segment.actionType}-${index}`}
+            payload={segment.payload}
+            onAction={onAction}
+            isLatest={isLatest}
+          />
+        );
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+// Components
+export { ActionMarkdownRenderer } from "./ActionMarkdownRenderer";
+
+// Parser
+export { parseResponseSegments } from "./parseResponseSegments";
+
+// Types
+export type {
+  ResponseSegment,
+  MarkdownSegment,
+  ActionSegment,
+  InlineActionProps,
+  ActionComponentRegistry,
+  ActionMarkdownRendererProps,
+} from "./types";
+
+// Prompt template
+export { INLINE_ACTION_PROMPT } from "./prompts";

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

@@ -16,11 +16,13 @@ export {
   ThinkingSection,
   ActionBar,
   HITLSection,
+  TruncatedMessage,
   type ActivityIndicatorsProps,
   type MetadataRowProps,
   type ThinkingSectionProps,
   type ActionBarProps,
   type HITLSectionProps,
+  type TruncatedMessageProps,
 
   // Hooks
   useAgentResponseAccumulator,
@@ -39,6 +41,7 @@ export {
   type StatusItem,
   type ThinkingStep,
   type ThinkingContent,
+  type PotentialResponse,
   type AgentMessage,
   type GenericWebSocketMessage,
 
@@ -48,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
@@ -68,5 +83,19 @@ export {
   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";