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

package/README.md

@@ -70,6 +70,77 @@ function ChatInput() {
 }
 ```
 
+### HITLQuestionPanel
+
+Display an interactive panel for human-in-the-loop clarifying questions. Replaces the input area when the agent needs user clarification:
+
+```tsx
+import { HITLQuestionPanel, type HITLQuestion } from '@optilogic/chat';
+
+const question: HITLQuestion = {
+  reason: "I need clarification before proceeding with the data mapping.",
+  questions: [
+    "Which table should I load the shipment data into?",
+    "Should I overwrite existing rows or append?",
+  ],
+  options: {
+    "Which table should I load the shipment data into?": ["Customers", "Demand", "Shipments"],
+    "Should I overwrite existing rows or append?": ["Overwrite", "Append"],
+  },
+  context: "Source file has 1,200 rows with columns: origin, destination, quantity, date",
+  timeoutSeconds: 300,
+  receivedAt: Date.now(),
+};
+
+function ChatInput() {
+  return (
+    <HITLQuestionPanel
+      question={question}
+      onSubmit={(response) => console.log('Response:', response)}
+      onStop={() => console.log('Agent stopped')}
+    />
+  );
+}
+```
+
+### HITLInteractionRecord
+
+Display a completed HITL Q&A interaction in the chat history:
+
+```tsx
+import { HITLInteractionRecord, type HITLInteraction } from '@optilogic/chat';
+
+const interaction: HITLInteraction = {
+  question: { /* HITLQuestion object */ },
+  response: "Q: Which table?\nA: Shipments",
+  respondedAt: Date.now(),
+};
+
+function CompletedInteraction() {
+  return <HITLInteractionRecord interaction={interaction} />;
+}
+```
+
+### AgentResponse with HITL Interactions
+
+HITL interactions can also be displayed as a collapsible section within AgentResponse:
+
+```tsx
+import { AgentResponse, type HITLInteraction } from '@optilogic/chat';
+
+function ChatView() {
+  const hitlInteractions: HITLInteraction[] = [/* completed interactions */];
+
+  return (
+    <AgentResponse
+      state={state}
+      hitlInteractions={hitlInteractions}
+      defaultHITLExpanded={false}
+    />
+  );
+}
+```
+
 ## Components
 
 ### AgentResponse
@@ -79,6 +150,7 @@ Main component for displaying AI agent responses with:
 - Tool call visualization
 - Copy and feedback actions
 - Metadata display (tokens, timing)
+- Optional collapsible HITL interaction history
 
 ### UserPrompt
 Component for displaying user messages in the chat interface.
@@ -86,6 +158,22 @@ Component for displaying user messages in the chat interface.
 ### UserPromptInput
 Input component for composing user messages with tag support.
 
+### HITLQuestionPanel
+Interactive panel for displaying agent clarifying questions with:
+- Predefined option buttons (toggleable selection)
+- Free-form text input
+- Countdown timer with visual warning state
+- Keyboard support (Enter to submit, Shift+Enter for newlines)
+
+### HITLInteractionRecord
+Read-only display of a completed HITL Q&A interaction with:
+- Per-question inline answers
+- Context display
+- Fallback for non-structured response formats
+
+### HITLSection
+Collapsible sub-component for rendering HITL interactions within AgentResponse. Follows the same expand/collapse pattern as ThinkingSection.
+
 ## Hooks
 
 ### useAgentResponseAccumulator
@@ -94,6 +182,11 @@ Manages state for streaming agent responses, handling incremental updates and me
 ### useThinkingTimer
 Tracks elapsed time during agent thinking phases.
 
+## Utilities
+
+### buildResponseString
+Combines selected options and free-form text into a single formatted string for the backend. Used internally by HITLQuestionPanel and can be used to construct responses programmatically.
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React10 = require('react');
 var core = require('@optilogic/core');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -24,10 +24,10 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 
 // src/components/agent-response/AgentResponse.tsx
-var ActivityIndicators = React7__namespace.forwardRef(
+var ActivityIndicators = React10__namespace.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;
@@ -146,7 +146,7 @@ function formatTotalTime(seconds) {
   const minutes = seconds / 60;
   return `${minutes.toFixed(1)}m`;
 }
-var MetadataRow = React7__namespace.forwardRef(
+var MetadataRow = React10__namespace.forwardRef(
   ({
     hasThinking,
     isExpanded,
@@ -213,8 +213,8 @@ var MetadataRow = React7__namespace.forwardRef(
 );
 MetadataRow.displayName = "MetadataRow";
 var ThinkingStepItem = ({ step, renderMarkdown }) => {
-  const [isCollapsed, setIsCollapsed] = React7.useState(step.isCollapsed ?? false);
-  const toggleCollapse = React7.useCallback(() => {
+  const [isCollapsed, setIsCollapsed] = React10.useState(step.isCollapsed ?? false);
+  const toggleCollapse = React10.useCallback(() => {
     setIsCollapsed((prev) => !prev);
   }, []);
   const indentPadding = step.depth * 16;
@@ -241,7 +241,7 @@ var ThinkingStepItem = ({ step, renderMarkdown }) => {
     )
   ] });
 };
-var ThinkingSection = React7__namespace.forwardRef(
+var ThinkingSection = React10__namespace.forwardRef(
   ({ content, isExpanded, renderMarkdown, className, ...props }, ref) => {
     if (!isExpanded || !content || Array.isArray(content) && content.length === 0) {
       return null;
@@ -266,7 +266,7 @@ var ThinkingSection = React7__namespace.forwardRef(
   }
 );
 ThinkingSection.displayName = "ThinkingSection";
-var ActionBar = React7__namespace.forwardRef(
+var ActionBar = React10__namespace.forwardRef(
   ({
     response,
     isVisible,
@@ -277,8 +277,8 @@ var ActionBar = React7__namespace.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [copied, setCopied] = React7.useState(false);
-    const handleCopy = React7.useCallback(async () => {
+    const [copied, setCopied] = React10.useState(false);
+    const handleCopy = React10.useCallback(async () => {
       try {
         await navigator.clipboard.writeText(response);
         setCopied(true);
@@ -288,11 +288,11 @@ var ActionBar = React7__namespace.forwardRef(
         console.error("Failed to copy response:", err);
       }
     }, [response, onResponseCopy]);
-    const handleThumbsUp = React7.useCallback(() => {
+    const handleThumbsUp = React10.useCallback(() => {
       const newValue = feedback === "up" ? null : "up";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
-    const handleThumbsDown = React7.useCallback(() => {
+    const handleThumbsDown = React10.useCallback(() => {
       const newValue = feedback === "down" ? null : "down";
       onFeedbackChange?.(newValue);
     }, [feedback, onFeedbackChange]);
@@ -355,13 +355,300 @@ var ActionBar = React7__namespace.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__namespace.forwardRef(({ question, onSubmit, onStop, className, ...props }, ref) => {
+  const [freeformText, setFreeformText] = React10.useState("");
+  const [selectedOptions, setSelectedOptions] = React10.useState({});
+  const [secondsLeft, setSecondsLeft] = React10.useState(
+    () => Math.max(
+      0,
+      Math.round(
+        question.timeoutSeconds - (Date.now() - question.receivedAt) / 1e3
+      )
+    )
+  );
+  const textareaRef = React10.useRef(null);
+  React10.useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  React10.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 = React10.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 = React10.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 = React10.useCallback(() => {
+    if (!canSubmit) return;
+    const combined = buildResponseString(
+      question.questions,
+      selectedOptions,
+      freeformText
+    );
+    onSubmit(combined);
+  }, [canSubmit, question.questions, selectedOptions, freeformText, onSubmit]);
+  const handleKeyDown = React10.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: core.cn(
+        "rounded-lg border border-border bg-muted p-4 space-y-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: question.reason }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: core.cn(
+                "text-xs font-mono whitespace-nowrap",
+                secondsLeft <= 30 ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: timedOut ? "Timed out" : formatTime2(secondsLeft)
+            }
+          )
+        ] }),
+        question.context && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border max-h-24 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: question.questions.map((q, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              core.Button,
+              {
+                variant: isSelected ? "primary" : "outline",
+                size: "sm",
+                onClick: () => handleOptionClick(q, option),
+                disabled: timedOut,
+                children: option
+              },
+              j
+            );
+          }) })
+        ] }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: onStop,
+              className: "text-destructive hover:text-destructive hover:bg-destructive/10",
+              children: "Stop agent"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.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__namespace.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 } = React10.useMemo(
+    () => parseResponse(response),
+    [response]
+  );
+  const hasParsedAnswers = Object.keys(answers).length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: core.cn(
+        "rounded-lg border border-border bg-muted p-3 space-y-2 text-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-muted-foreground", children: "Clarifying Question" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: timestamp })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground font-medium", children: question.reason }),
+        question.context && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground bg-background rounded p-2 border border-border", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap font-mono", children: question.context }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: question.questions.map((q, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground", children: q }),
+          question.options?.[q] && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground ml-2", children: [
+            "Options: ",
+            question.options[q].join(", ")
+          ] }),
+          hasParsedAnswers && answers[q] && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-foreground ml-2 mt-0.5 bg-background rounded px-2 py-1 border border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Answer: " }),
+            answers[q]
+          ] })
+        ] }, i)) }),
+        hasParsedAnswers && additionalContext && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "Additional context:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mt-0.5", children: additionalContext })
+        ] }),
+        !hasParsedAnswers && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "Response:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mt-0.5", children: response })
+        ] })
+      ]
+    }
+  );
+});
+HITLInteractionRecord.displayName = "HITLInteractionRecord";
+var HITLSection = React10__namespace.forwardRef(
+  ({
+    interactions,
+    defaultExpanded = false,
+    isExpanded: controlledExpanded,
+    onExpandedChange,
+    className,
+    ...props
+  }, ref) => {
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React10.useState(defaultExpanded);
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : uncontrolledExpanded;
+    const toggleExpanded = React10.useCallback(() => {
+      const newValue = !isExpanded;
+      if (isControlled) {
+        onExpandedChange?.(newValue);
+      } else {
+        setUncontrolledExpanded(newValue);
+      }
+    }, [isExpanded, isControlled, onExpandedChange]);
+    if (!interactions || interactions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: core.cn("border-t border-border", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircleQuestion, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground/80", children: [
+                  "Clarifying Questions (",
+                  interactions.length,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-3 space-y-2", children: interactions.map((interaction, i) => /* @__PURE__ */ jsxRuntime.jsx(HITLInteractionRecord, { interaction }, i)) })
+        ]
+      }
+    );
+  }
+);
+HITLSection.displayName = "HITLSection";
 function useThinkingTimer({
   startTime,
   endTime,
   status
 }) {
-  const [elapsed, setElapsed] = React7.useState(0);
-  React7.useEffect(() => {
+  const [elapsed, setElapsed] = React10.useState(0);
+  React10.useEffect(() => {
     if (!startTime) {
       setElapsed(0);
       return;
@@ -398,9 +685,9 @@ var initialAgentResponseState = {
 
 // src/components/agent-response/hooks/useAgentResponseAccumulator.ts
 function useAgentResponseAccumulator(options) {
-  const [state, setState] = React7.useState(initialAgentResponseState);
+  const [state, setState] = React10.useState(initialAgentResponseState);
   const topic = options?.topic;
-  const handleMessage = React7.useCallback(
+  const handleMessage = React10.useCallback(
     (message) => {
       let payload;
       if (topic) {
@@ -539,12 +826,12 @@ function useAgentResponseAccumulator(options) {
     },
     [topic]
   );
-  const reset = React7.useCallback(() => {
+  const reset = React10.useCallback(() => {
     setState(initialAgentResponseState);
   }, []);
   return { state, handleMessage, reset };
 }
-var AgentResponse = React7__namespace.forwardRef(
+var AgentResponse = React10__namespace.forwardRef(
   ({
     state,
     id,
@@ -556,15 +843,17 @@ var AgentResponse = React7__namespace.forwardRef(
     thinkingExpanded: controlledThinkingExpanded,
     onThinkingExpandedChange,
     actionsVisible = "hover",
+    hitlInteractions,
+    defaultHITLExpanded = false,
     renderMarkdown,
     renderThinkingMarkdown,
     className,
     ...props
   }, ref) => {
-    const [uncontrolledExpanded, setUncontrolledExpanded] = React7.useState(defaultThinkingExpanded);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React10.useState(defaultThinkingExpanded);
     const isThinkingControlled = controlledThinkingExpanded !== void 0;
     const thinkingExpanded = isThinkingControlled ? controlledThinkingExpanded : uncontrolledExpanded;
-    const toggleThinking = React7.useCallback(() => {
+    const toggleThinking = React10.useCallback(() => {
       const newValue = !thinkingExpanded;
       if (isThinkingControlled) {
         onThinkingExpandedChange?.(newValue);
@@ -572,18 +861,19 @@ var AgentResponse = React7__namespace.forwardRef(
         setUncontrolledExpanded(newValue);
       }
     }, [thinkingExpanded, isThinkingControlled, onThinkingExpandedChange]);
-    const [isHovered, setIsHovered] = React7.useState(false);
+    const [isHovered, setIsHovered] = React10.useState(false);
     const elapsedTime = useThinkingTimer({
       startTime: state.thinkingStartTime,
       endTime: state.responseCompleteTime,
       status: state.status
     });
-    const totalTimeSeconds = React7.useMemo(() => {
+    const totalTimeSeconds = React10.useMemo(() => {
       if (!state.firstMessageTime || !state.responseCompleteTime) return 0;
       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;
@@ -624,6 +914,13 @@ var AgentResponse = React7__namespace.forwardRef(
                 }
               )
             ] }),
+            hasHITLInteractions && /* @__PURE__ */ jsxRuntime.jsx(
+              HITLSection,
+              {
+                interactions: hitlInteractions,
+                defaultExpanded: defaultHITLExpanded
+              }
+            ),
             state.response && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -652,7 +949,7 @@ var AgentResponse = React7__namespace.forwardRef(
   }
 );
 AgentResponse.displayName = "AgentResponse";
-var UserPrompt = React7__namespace.forwardRef(
+var UserPrompt = React10__namespace.forwardRef(
   ({ content, timestamp, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -751,7 +1048,7 @@ function CodeBlockLeaf({ attributes, children, leaf }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...attributes, children });
 }
-var UserPromptInput = React7__namespace.forwardRef(
+var UserPromptInput = React10__namespace.forwardRef(
   ({
     value = "",
     onChange,
@@ -774,14 +1071,14 @@ var UserPromptInput = React7__namespace.forwardRef(
     className,
     ...props
   }, ref) => {
-    const editorRef = React7__namespace.useRef(null);
-    const [internalValue, setInternalValue] = React7__namespace.useState(value);
-    const prevIsSubmitting = React7__namespace.useRef(isSubmitting);
-    const hasEmittedReady = React7__namespace.useRef(false);
-    React7__namespace.useEffect(() => {
+    const editorRef = React10__namespace.useRef(null);
+    const [internalValue, setInternalValue] = React10__namespace.useState(value);
+    const prevIsSubmitting = React10__namespace.useRef(isSubmitting);
+    const hasEmittedReady = React10__namespace.useRef(false);
+    React10__namespace.useEffect(() => {
       setInternalValue(value);
     }, [value]);
-    React7__namespace.useEffect(() => {
+    React10__namespace.useEffect(() => {
       if (autoFocus) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -790,7 +1087,7 @@ var UserPromptInput = React7__namespace.forwardRef(
         });
       }
     }, [autoFocus]);
-    React7__namespace.useEffect(() => {
+    React10__namespace.useEffect(() => {
       if (!hasEmittedReady.current && onReady) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
@@ -800,7 +1097,7 @@ var UserPromptInput = React7__namespace.forwardRef(
         });
       }
     }, [onReady]);
-    React7__namespace.useEffect(() => {
+    React10__namespace.useEffect(() => {
       if (refocusAfterSubmit && prevIsSubmitting.current && !isSubmitting) {
         requestAnimationFrame(() => {
           editorRef.current?.focus();
@@ -808,7 +1105,7 @@ var UserPromptInput = React7__namespace.forwardRef(
       }
       prevIsSubmitting.current = isSubmitting;
     }, [isSubmitting, refocusAfterSubmit]);
-    React7__namespace.useImperativeHandle(
+    React10__namespace.useImperativeHandle(
       ref,
       () => ({
         focus: () => {
@@ -831,14 +1128,14 @@ var UserPromptInput = React7__namespace.forwardRef(
       }),
       []
     );
-    const handleChange = React7__namespace.useCallback(
+    const handleChange = React10__namespace.useCallback(
       (newValue) => {
         setInternalValue(newValue);
         onChange?.(newValue);
       },
       [onChange]
     );
-    const handleSubmit = React7__namespace.useCallback(
+    const handleSubmit = React10__namespace.useCallback(
       (text) => {
         if (disabled || isSubmitting) return;
         if (!text.trim()) return;
@@ -850,7 +1147,7 @@ var UserPromptInput = React7__namespace.forwardRef(
       },
       [disabled, isSubmitting, onSubmit, clearOnSubmit]
     );
-    const handleSendClick = React7__namespace.useCallback(() => {
+    const handleSendClick = React10__namespace.useCallback(() => {
       const text = editorRef.current?.getText() ?? "";
       handleSubmit(text);
     }, [handleSubmit]);
@@ -918,10 +1215,14 @@ UserPromptInput.displayName = "UserPromptInput";
 exports.ActionBar = ActionBar;
 exports.ActivityIndicators = ActivityIndicators;
 exports.AgentResponse = AgentResponse;
+exports.HITLInteractionRecord = HITLInteractionRecord;
+exports.HITLQuestionPanel = HITLQuestionPanel;
+exports.HITLSection = HITLSection;
 exports.MetadataRow = MetadataRow;
 exports.ThinkingSection = ThinkingSection;
 exports.UserPrompt = UserPrompt;
 exports.UserPromptInput = UserPromptInput;
+exports.buildResponseString = buildResponseString;
 exports.formatTime = formatTime;
 exports.formatTotalTime = formatTotalTime;
 exports.initialAgentResponseState = initialAgentResponseState;