@optilogic/chat 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/index.d.ts

@@ -155,6 +155,57 @@ interface GenericWebSocketMessage {
  */
 declare const initialAgentResponseState: AgentResponseState;
 
+/**
+ * HITLQuestionPanel — Human-in-the-Loop clarifying question panel.
+ *
+ * Renders in the input area (replacing UserPromptInput) when the agent asks a
+ * clarifying question via the HumanInTheLoop tool. Shows the question details
+ * and lets the user respond via option buttons or free-form text.
+ *
+ * Option clicks select/toggle rather than immediately submitting. The "Send
+ * response" button enables once all questions have a selected option OR the
+ * textarea has text. On submit, selected options and free-form text are
+ * combined into a single formatted string for the backend.
+ */
+
+interface HITLQuestion {
+    reason: string;
+    questions: string[];
+    options: Record<string, string[]> | null;
+    context: string | null;
+    timeoutSeconds: number;
+    receivedAt: number;
+}
+interface HITLQuestionPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+    question: HITLQuestion;
+    onSubmit: (response: string) => void;
+    onStop: () => void;
+}
+/**
+ * Build a single response string from selected options and optional free-form text.
+ * Format is designed to be easily parsed by the LLM consuming the response.
+ */
+declare function buildResponseString(questions: string[], selectedOptions: Record<string, string>, freeformText: string): string;
+declare const HITLQuestionPanel: React.ForwardRefExoticComponent<HITLQuestionPanelProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * HITLInteractionRecord — Displays a completed HITL Q&A interaction
+ * in the chat message history.
+ *
+ * Rendered below AgentResponse in the agent message block. Shows the full detail
+ * of each clarifying question the agent asked and the user's response.
+ */
+
+interface HITLInteraction {
+    question: HITLQuestion;
+    response: string;
+    respondedAt: number;
+}
+interface HITLInteractionRecordProps extends React.HTMLAttributes<HTMLDivElement> {
+    interaction: HITLInteraction;
+}
+declare const HITLInteractionRecord: React.ForwardRefExoticComponent<HITLInteractionRecordProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * AgentResponse Component
  *
@@ -180,6 +231,15 @@ interface AgentResponseProps extends React.HTMLAttributes<HTMLDivElement> {
     onThinkingExpandedChange?: (expanded: boolean) => void;
     /** Action bar visibility mode */
     actionsVisible?: boolean | "hover";
+    /**
+     * Optional HITL (Human-in-the-Loop) interactions to display as a
+     * collapsible section within the response. When provided, a "Clarifying
+     * Questions" section appears between the thinking/metadata area and
+     * the response content.
+     */
+    hitlInteractions?: HITLInteraction[];
+    /** Whether the HITL section starts expanded (default: false) */
+    defaultHITLExpanded?: boolean;
     /**
      * Custom markdown renderer for the response content.
      * If not provided, the response will be rendered as plain text.
@@ -392,6 +452,26 @@ interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * HITL Section Component
+ *
+ * Collapsible section for displaying completed HITL (Human-in-the-Loop)
+ * interactions within an AgentResponse. Follows the same pattern as
+ * ThinkingSection for consistent UX.
+ */
+
+interface HITLSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The HITL interactions to display */
+    interactions: HITLInteraction[];
+    /** Whether the section starts expanded (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** Whether the section is expanded (controlled) */
+    isExpanded?: boolean;
+    /** Callback when expansion state changes (controlled) */
+    onExpandedChange?: (expanded: boolean) => void;
+}
+declare const HITLSection: React.ForwardRefExoticComponent<HITLSectionProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * useThinkingTimer Hook
  *
@@ -558,4 +638,4 @@ interface UserPromptInputRef {
  */
 declare const UserPromptInput: React.ForwardRefExoticComponent<UserPromptInputProps & React.RefAttributes<UserPromptInputRef>>;
 
-export { ActionBar, type ActionBarProps, ActivityIndicators, type ActivityIndicatorsProps, type AgentMessage, AgentResponse, type AgentResponseProps, type AgentResponseState, type AgentResponseStatus, type FeedbackValue, type GenericWebSocketMessage, 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, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };
+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 };

package/dist/index.js

@@ -1,12 +1,12 @@
-import * as React7 from 'react';
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import { cn, Popover, PopoverTrigger, PopoverContent, IconButton, LoadingSpinner } from '@optilogic/core';
-import { Activity, Wrench, Book, HardDrive, Check, Copy, ThumbsUp, ThumbsDown, Square, Loader2, Send, ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
+import * as React10 from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { cn, Popover, PopoverTrigger, PopoverContent, Button, Textarea, IconButton, LoadingSpinner } from '@optilogic/core';
+import { Activity, Wrench, Book, HardDrive, Check, Copy, ThumbsUp, ThumbsDown, ChevronDown, ChevronRight, MessageCircleQuestion, Square, Loader2, Send, ChevronUp } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { SlateEditor, Text } from '@optilogic/editor';
 
 // src/components/agent-response/AgentResponse.tsx
-var ActivityIndicators = React7.forwardRef(
+var ActivityIndicators = React10.forwardRef(
   ({ toolCalls, knowledge, memory, statusUpdates = [], className, ...props }, ref) => {
     const hasAnyActivity = toolCalls.length > 0 || knowledge.length > 0 || memory.length > 0 || statusUpdates.length > 0;
     if (!hasAnyActivity) return null;
@@ -125,7 +125,7 @@ function formatTotalTime(seconds) {
   const minutes = seconds / 60;
   return `${minutes.toFixed(1)}m`;
 }
-var MetadataRow = React7.forwardRef(
+var MetadataRow = React10.forwardRef(
   ({
     hasThinking,
     isExpanded,
@@ -220,7 +220,7 @@ var ThinkingStepItem = ({ step, renderMarkdown }) => {
     )
   ] });
 };
-var ThinkingSection = React7.forwardRef(
+var ThinkingSection = React10.forwardRef(
   ({ content, isExpanded, renderMarkdown, className, ...props }, ref) => {
     if (!isExpanded || !content || Array.isArray(content) && content.length === 0) {
       return null;
@@ -245,7 +245,7 @@ var ThinkingSection = React7.forwardRef(
   }
 );
 ThinkingSection.displayName = "ThinkingSection";
-var ActionBar = React7.forwardRef(
+var ActionBar = React10.forwardRef(
   ({
     response,
     isVisible,
@@ -334,6 +334,293 @@ var ActionBar = React7.forwardRef(
   }
 );
 ActionBar.displayName = "ActionBar";
+function buildResponseString(questions, selectedOptions, freeformText) {
+  const parts = [];
+  for (const q of questions) {
+    const answer = selectedOptions[q];
+    if (answer) {
+      parts.push(`Q: ${q}
+A: ${answer}`);
+    }
+  }
+  const trimmed = freeformText.trim();
+  if (trimmed) {
+    parts.push(`Additional context: ${trimmed}`);
+  }
+  return parts.join("\n\n");
+}
+var HITLQuestionPanel = React10.forwardRef(({ question, onSubmit, onStop, className, ...props }, ref) => {
+  const [freeformText, setFreeformText] = useState("");
+  const [selectedOptions, setSelectedOptions] = useState({});
+  const [secondsLeft, setSecondsLeft] = useState(
+    () => Math.max(
+      0,
+      Math.round(
+        question.timeoutSeconds - (Date.now() - question.receivedAt) / 1e3
+      )
+    )
+  );
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const remaining = Math.max(
+        0,
+        Math.round(
+          question.timeoutSeconds - (Date.now() - question.receivedAt) / 1e3
+        )
+      );
+      setSecondsLeft(remaining);
+      if (remaining <= 0) clearInterval(interval);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [question.timeoutSeconds, question.receivedAt]);
+  const timedOut = secondsLeft <= 0;
+  const questionsWithOptions = useMemo(
+    () => question.questions.filter((q) => question.options?.[q]?.length),
+    [question.questions, question.options]
+  );
+  const allOptionsSelected = questionsWithOptions.length > 0 && questionsWithOptions.every((q) => selectedOptions[q]);
+  const hasFreeformText = freeformText.trim().length > 0;
+  const canSubmit = !timedOut && (allOptionsSelected || hasFreeformText);
+  const handleOptionClick = useCallback(
+    (questionText, option) => {
+      if (timedOut) return;
+      setSelectedOptions((prev) => {
+        if (prev[questionText] === option) {
+          const next = { ...prev };
+          delete next[questionText];
+          return next;
+        }
+        return { ...prev, [questionText]: option };
+      });
+    },
+    [timedOut]
+  );
+  const handleSubmit = useCallback(() => {
+    if (!canSubmit) return;
+    const combined = buildResponseString(
+      question.questions,
+      selectedOptions,
+      freeformText
+    );
+    onSubmit(combined);
+  }, [canSubmit, question.questions, selectedOptions, freeformText, onSubmit]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const formatTime2 = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = s % 60;
+    return `${m}:${sec.toString().padStart(2, "0")}`;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-muted p-4 space-y-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: question.reason }) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs font-mono whitespace-nowrap",
+                secondsLeft <= 30 ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: timedOut ? "Timed out" : formatTime2(secondsLeft)
+            }
+          )
+        ] }),
+        question.context && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border max-h-24 overflow-y-auto", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: question.questions.map((q, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-1.5", children: question.options[q].map((option, j) => {
+            const isSelected = selectedOptions[q] === option;
+            return /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: isSelected ? "primary" : "outline",
+                size: "sm",
+                onClick: () => handleOptionClick(q, option),
+                disabled: timedOut,
+                children: option
+              },
+              j
+            );
+          }) })
+        ] }, i)) }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ref: textareaRef,
+            value: freeformText,
+            onChange: (e) => setFreeformText(e.target.value),
+            onKeyDown: handleKeyDown,
+            disabled: timedOut,
+            placeholder: "Add additional context or type a full response...",
+            rows: 2,
+            className: "resize-none"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onStop,
+              className: "text-destructive hover:text-destructive hover:bg-destructive/10",
+              children: "Stop agent"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              size: "sm",
+              onClick: handleSubmit,
+              disabled: !canSubmit,
+              children: "Send response"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+HITLQuestionPanel.displayName = "HITLQuestionPanel";
+function parseResponse(response) {
+  const answers = {};
+  let additionalContext = null;
+  const blocks = response.split("\n\n");
+  for (const block of blocks) {
+    const qaMatch = block.match(/^Q: (.+)\nA: (.+)$/s);
+    if (qaMatch) {
+      answers[qaMatch[1].trim()] = qaMatch[2].trim();
+    } else if (block.startsWith("Additional context: ")) {
+      additionalContext = block.slice("Additional context: ".length).trim();
+    }
+  }
+  return { answers, additionalContext };
+}
+var HITLInteractionRecord = React10.forwardRef(({ interaction, className, ...props }, ref) => {
+  const { question, response, respondedAt } = interaction;
+  const timestamp = new Date(respondedAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const { answers, additionalContext } = useMemo(
+    () => parseResponse(response),
+    [response]
+  );
+  const hasParsedAnswers = Object.keys(answers).length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-border bg-muted p-3 space-y-2 text-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: "Clarifying Question" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: timestamp })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-foreground font-medium", children: question.reason }),
+        question.context && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border", children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: question.questions.map((q, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground ml-2", children: [
+            "Options: ",
+            question.options[q].join(", ")
+          ] }),
+          hasParsedAnswers && answers[q] && /* @__PURE__ */ jsxs("p", { className: "text-xs text-foreground ml-2 mt-0.5 bg-background rounded px-2 py-1 border border-border", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Answer: " }),
+            answers[q]
+          ] })
+        ] }, i)) }),
+        hasParsedAnswers && additionalContext && /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Additional context:" }),
+          /* @__PURE__ */ jsx("p", { className: "text-foreground mt-0.5", children: additionalContext })
+        ] }),
+        !hasParsedAnswers && /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Response:" }),
+          /* @__PURE__ */ jsx("p", { className: "text-foreground mt-0.5", children: response })
+        ] })
+      ]
+    }
+  );
+});
+HITLInteractionRecord.displayName = "HITLInteractionRecord";
+var HITLSection = React10.forwardRef(
+  ({
+    interactions,
+    defaultExpanded = false,
+    isExpanded: controlledExpanded,
+    onExpandedChange,
+    className,
+    ...props
+  }, ref) => {
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : uncontrolledExpanded;
+    const toggleExpanded = useCallback(() => {
+      const newValue = !isExpanded;
+      if (isControlled) {
+        onExpandedChange?.(newValue);
+      } else {
+        setUncontrolledExpanded(newValue);
+      }
+    }, [isExpanded, isControlled, onExpandedChange]);
+    if (!interactions || interactions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("border-t border-border", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: toggleExpanded,
+              className: "w-full flex items-center gap-2 py-2 px-3 hover:bg-muted/50 transition-colors text-left",
+              children: [
+                isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsx(MessageCircleQuestion, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground/80", children: [
+                  "Clarifying Questions (",
+                  interactions.length,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 space-y-2", children: interactions.map((interaction, i) => /* @__PURE__ */ jsx(HITLInteractionRecord, { interaction }, i)) })
+        ]
+      }
+    );
+  }
+);
+HITLSection.displayName = "HITLSection";
 function useThinkingTimer({
   startTime,
   endTime,
@@ -523,7 +810,7 @@ function useAgentResponseAccumulator(options) {
   }, []);
   return { state, handleMessage, reset };
 }
-var AgentResponse = React7.forwardRef(
+var AgentResponse = React10.forwardRef(
   ({
     state,
     id,
@@ -535,6 +822,8 @@ var AgentResponse = React7.forwardRef(
     thinkingExpanded: controlledThinkingExpanded,
     onThinkingExpandedChange,
     actionsVisible = "hover",
+    hitlInteractions,
+    defaultHITLExpanded = false,
     renderMarkdown,
     renderThinkingMarkdown,
     className,
@@ -562,7 +851,8 @@ var AgentResponse = React7.forwardRef(
       return (state.responseCompleteTime - state.firstMessageTime) / 1e3;
     }, [state.firstMessageTime, state.responseCompleteTime]);
     const hasThinkingContent = !!state.thinking || state.thinkingSteps && state.thinkingSteps.length > 0 || false;
-    const hasAnyContent = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || state.response;
+    const hasHITLInteractions = hitlInteractions && hitlInteractions.length > 0;
+    const hasAnyContent = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || hasHITLInteractions || state.response;
     const showMetadataRow = hasThinkingContent || state.toolCalls.length > 0 || state.knowledge.length > 0 || state.memory.length > 0 || state.statusUpdates.length > 0 || state.status === "processing";
     const showActionBar = state.status === "complete" && state.response;
     const isActionBarVisible = actionsVisible === true || actionsVisible === "hover" && isHovered;
@@ -603,6 +893,13 @@ var AgentResponse = React7.forwardRef(
                 }
               )
             ] }),
+            hasHITLInteractions && /* @__PURE__ */ jsx(
+              HITLSection,
+              {
+                interactions: hitlInteractions,
+                defaultExpanded: defaultHITLExpanded
+              }
+            ),
             state.response && /* @__PURE__ */ jsx(
               "div",
               {
@@ -631,7 +928,7 @@ var AgentResponse = React7.forwardRef(
   }
 );
 AgentResponse.displayName = "AgentResponse";
-var UserPrompt = React7.forwardRef(
+var UserPrompt = React10.forwardRef(
   ({ content, timestamp, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -730,7 +1027,7 @@ function CodeBlockLeaf({ attributes, children, leaf }) {
   }
   return /* @__PURE__ */ jsx("span", { ...attributes, children });
 }
-var UserPromptInput = React7.forwardRef(
+var UserPromptInput = React10.forwardRef(
   ({
     value = "",
     onChange,
@@ -753,14 +1050,14 @@ var UserPromptInput = React7.forwardRef(
     className,
     ...props
   }, ref) => {
-    const editorRef = React7.useRef(null);
-    const [internalValue, setInternalValue] = React7.useState(value);
-    const prevIsSubmitting = React7.useRef(isSubmitting);
-    const hasEmittedReady = React7.useRef(false);
-    React7.useEffect(() => {
+    const editorRef = React10.useRef(null);
+    const [internalValue, setInternalValue] = React10.useState(value);
+    const prevIsSubmitting = React10.useRef(isSubmitting);
+    const hasEmittedReady = React10.useRef(false);
+    React10.useEffect(() => {
       setInternalValue(value);
     }, [value]);
-    React7.useEffect(() => {
+    React10.useEffect(() => {
       if (autoFocus) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -769,7 +1066,7 @@ var UserPromptInput = React7.forwardRef(
         });
       }
     }, [autoFocus]);
-    React7.useEffect(() => {
+    React10.useEffect(() => {
       if (!hasEmittedReady.current && onReady) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -779,7 +1076,7 @@ var UserPromptInput = React7.forwardRef(
         });
       }
     }, [onReady]);
-    React7.useEffect(() => {
+    React10.useEffect(() => {
       if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
         requestAnimationFrame(() => {
           editorRef.current?.focus();
@@ -787,7 +1084,7 @@ var UserPromptInput = React7.forwardRef(
       }
       prevIsSubmitting.current = isSubmitting;
     }, [isSubmitting, refocusAfterSubmit]);
-    React7.useImperativeHandle(
+    React10.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -810,14 +1107,14 @@ var UserPromptInput = React7.forwardRef(
       }),
       []
     );
-    const handleChange = React7.useCallback(
+    const handleChange = React10.useCallback(
       (newValue) => {
         setInternalValue(newValue);
         onChange?.(newValue);
       },
       [onChange]
     );
-    const handleSubmit = React7.useCallback(
+    const handleSubmit = React10.useCallback(
       (text) => {
         if (disabled || isSubmitting) return;
         if (!text.trim()) return;
@@ -829,7 +1126,7 @@ var UserPromptInput = React7.forwardRef(
       },
       [disabled, isSubmitting, onSubmit, clearOnSubmit]
     );
-    const handleSendClick = React7.useCallback(() => {
+    const handleSendClick = React10.useCallback(() => {
       const text = editorRef.current?.getText() ?? "";
       handleSubmit(text);
     }, [handleSubmit]);
@@ -894,6 +1191,6 @@ var UserPromptInput = React7.forwardRef(
 );
 UserPromptInput.displayName = "UserPromptInput";
 
-export { ActionBar, ActivityIndicators, AgentResponse, MetadataRow, ThinkingSection, UserPrompt, UserPromptInput, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };
+export { ActionBar, ActivityIndicators, AgentResponse, HITLInteractionRecord, HITLQuestionPanel, HITLSection, MetadataRow, ThinkingSection, UserPrompt, UserPromptInput, buildResponseString, formatTime, formatTotalTime, initialAgentResponseState, useAgentResponseAccumulator, useThinkingTimer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map