@xinghunm/ai-chat 0.4.0 → 1.0.1

package/dist/index.mjs

@@ -31,10 +31,18 @@ var DEFAULT_AI_CHAT_LABELS = {
   attachmentLimitNotice: "Images exceeded the limit. Only the first 10 images were kept.",
   userRoleLabel: "User",
   assistantRoleLabel: "Assistant",
+  expandMessageAriaLabel: "Expand message",
+  collapseMessageAriaLabel: "Collapse message",
+  expandComposerAriaLabel: "Expand composer",
+  collapseComposerAriaLabel: "Collapse composer",
   stoppedResponse: "Response stopped",
   assistantStreamingAriaLabel: "assistant streaming",
   networkError: "Network request failed. Please try again.",
-  genericError: "Something went wrong. Please try again."
+  genericError: "Something went wrong. Please try again.",
+  questionnaireSubmitting: "Submitting...",
+  questionnaireSubmitted: "Selection submitted. Waiting for the plan to continue...",
+  questionnaireValidationPrefix: "Please complete:",
+  questionnaireSubmitFailed: "Failed to submit. Please try again."
 };
 
 // src/store/chat-store.ts
@@ -50,6 +58,40 @@ var resolveSessionTitleFromMessage = (message) => {
   }
   return DEFAULT_CHAT_SESSION_TITLE;
 };
+var mergeStreamingBlocks = (existingBlocks, incomingBlocks) => {
+  const nextBlocks = [...existingBlocks ?? []];
+  incomingBlocks.forEach((incomingBlock) => {
+    if (incomingBlock.type === "custom" && incomingBlock.blockKey) {
+      const mergePolicy = incomingBlock.mergePolicy ?? "append";
+      if (mergePolicy !== "append") {
+        const existingIndex2 = nextBlocks.findIndex(
+          (block) => block.type === "custom" && block.blockKey === incomingBlock.blockKey
+        );
+        if (existingIndex2 !== -1) {
+          if (mergePolicy === "replace") {
+            nextBlocks[existingIndex2] = incomingBlock;
+          }
+          return;
+        }
+      }
+      nextBlocks.push(incomingBlock);
+      return;
+    }
+    if (incomingBlock.type !== "questionnaire") {
+      nextBlocks.push(incomingBlock);
+      return;
+    }
+    const existingIndex = nextBlocks.findIndex(
+      (block) => block.type === "questionnaire" && block.questionnaire.questionnaireId === incomingBlock.questionnaire.questionnaireId
+    );
+    if (existingIndex === -1) {
+      nextBlocks.push(incomingBlock);
+      return;
+    }
+    nextBlocks[existingIndex] = incomingBlock;
+  });
+  return nextBlocks;
+};
 var finalizeStreamingMessage = (state, sessionId, status, clearError = false) => {
   const message = state.streamingMessageBySession[sessionId];
   const hasRenderableMessagePayload = Boolean(
@@ -239,10 +281,15 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     const target = state.streamingMessageBySession[sessionId];
     if (!target)
       return;
+    const nextBlocks = patch.blocks !== void 0 ? mergeStreamingBlocks(target.blocks, patch.blocks) : target.blocks;
     set({
       streamingMessageBySession: {
         ...state.streamingMessageBySession,
-        [sessionId]: { ...target, ...patch }
+        [sessionId]: {
+          ...target,
+          ...patch,
+          ...patch.blocks !== void 0 ? { blocks: nextBlocks } : {}
+        }
       }
     });
   },
@@ -462,9 +509,27 @@ var DEFAULT_CHAT_TRANSPORT_ENDPOINTS = {
   completions: "/chat/completions",
   terminate: "/chat/terminate"
 };
+var createToolExecutionHeaders = (policy) => {
+  if (!policy?.enabled) {
+    return {};
+  }
+  return {
+    "X-Tool-Approval-Required": String(Boolean(policy.approvalRequired)),
+    ...typeof policy.approvalTimeoutSec === "number" ? { "X-Tool-Approval-Timeout": String(policy.approvalTimeoutSec) } : {}
+  };
+};
+var createModeDefaultHeaders = (mode) => {
+  if (mode === "ask" || mode === "plan") {
+    return {
+      "X-Tool-Approval-Required": "false"
+    };
+  }
+  return {};
+};
 var createDefaultChatTransport = ({
   apiBaseUrl,
   authToken,
+  toolExecutionPolicy,
   streamHeaders,
   transformStreamPacket,
   endpoints,
@@ -475,6 +540,10 @@ var createDefaultChatTransport = ({
     ...DEFAULT_CHAT_TRANSPORT_ENDPOINTS,
     ...endpoints
   };
+  const resolvedStreamHeaders = {
+    ...createToolExecutionHeaders(toolExecutionPolicy),
+    ...streamHeaders
+  };
   return {
     getModels: () => getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
@@ -488,12 +557,16 @@ var createDefaultChatTransport = ({
       onDone,
       onError
     }) => {
+      const requestHeaders = {
+        ...createModeDefaultHeaders(mode),
+        ...resolvedStreamHeaders
+      };
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
-        requestHeaders: streamHeaders,
+        requestHeaders,
         model,
         mode,
         content,
@@ -522,6 +595,8 @@ var AiChatProvider = (props) => {
     defaultMode,
     labels,
     renderMessageBlock,
+    handleQuestionnaireSubmit,
+    handleConfirmationSubmit,
     messageRenderOrder,
     enableImageAttachments = true,
     children
@@ -577,6 +652,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      handleQuestionnaireSubmit,
+      handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
@@ -587,6 +664,8 @@ var AiChatProvider = (props) => {
       defaultAuthToken,
       defaultTransformStreamPacket,
       enableImageAttachments,
+      handleConfirmationSubmit,
+      handleQuestionnaireSubmit,
       labels,
       messageRenderOrder,
       renderMessageBlock,
@@ -600,7 +679,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -621,7 +700,7 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useState as useState3 } from "react";
+import { Fragment, memo, useCallback as useCallback2, useLayoutEffect, useState as useState3 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -896,11 +975,11 @@ var getTimelineBlockKey = (block, index) => {
     case "confirmation_card":
       return `${index}:confirmation_card:${block.proposal.proposalId}`;
     case "result_summary":
-      return `${index}:result_summary:${block.summary.taskId}:${block.summary.status}`;
+      return `${index}:result_summary:${block.summary.summaryId}:${block.summary.status}`;
     case "questionnaire":
       return `${index}:questionnaire:${block.questionnaire.questionnaireId}`;
     case "custom":
-      return `${index}:custom:${block.kind}:${stringifyTimelineKeyPart(block.data)}`;
+      return block.blockKey ? `custom:${block.blockKey}` : `${index}:custom:${block.kind}:${stringifyTimelineKeyPart(block.data)}`;
     default:
       return null;
   }
@@ -1188,21 +1267,21 @@ var useTimelineBlockAnchors = ({
   };
 };
 
-// src/components/chat-thread/components/pde-ai-execution-confirmation-card.tsx
+// src/components/chat-thread/components/execution-confirmation-card.tsx
 import styled from "@emotion/styled";
 import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
-var PDEAIExecutionConfirmationCard = ({
+var ExecutionConfirmationCard = ({
   proposal,
   interactive = false,
   onApply,
   onConfirm,
   onRevise
 }) => {
-  return /* @__PURE__ */ jsxs(Card, { "data-testid": "pde-ai-execution-confirmation-card", children: [
+  return /* @__PURE__ */ jsxs(Card, { "data-testid": "execution-confirmation-card", children: [
     /* @__PURE__ */ jsxs(Header, { children: [
       /* @__PURE__ */ jsx2(Eyebrow, { children: "Execution Proposal" }),
-      /* @__PURE__ */ jsx2(Title, { children: proposal.equationName }),
-      proposal.solverName ? /* @__PURE__ */ jsx2(Subtitle, { children: proposal.solverName }) : null
+      /* @__PURE__ */ jsx2(Title, { children: proposal.resourceName }),
+      proposal.executorName ? /* @__PURE__ */ jsx2(Subtitle, { children: proposal.executorName }) : null
     ] }),
     /* @__PURE__ */ jsx2(SummaryList, { children: proposal.parameterSummary.map((item) => /* @__PURE__ */ jsxs(SummaryItem, { children: [
       /* @__PURE__ */ jsx2(SummaryLabel, { children: item.label }),
@@ -1210,21 +1289,13 @@ var PDEAIExecutionConfirmationCard = ({
     ] }, `${item.fieldPath ?? item.label}-${item.value}`)) }),
     proposal.warnings?.length ? /* @__PURE__ */ jsx2(Warnings, { children: proposal.warnings.map((warning) => /* @__PURE__ */ jsx2(Warning, { children: warning }, warning)) }) : null,
     interactive ? /* @__PURE__ */ jsxs(Actions, { children: [
-      onApply && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "pde-ai-confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
-      onConfirm && /* @__PURE__ */ jsx2(
-        ActionButton,
-        {
-          type: "button",
-          "data-testid": "pde-ai-confirmation-confirm",
-          onClick: onConfirm,
-          children: "Confirm Execution"
-        }
-      ),
+      onApply && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
+      onConfirm && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "confirmation-confirm", onClick: onConfirm, children: "Confirm Execution" }),
       onRevise && /* @__PURE__ */ jsx2(
         SecondaryActionButton,
         {
           type: "button",
-          "data-testid": "pde-ai-confirmation-revise",
+          "data-testid": "confirmation-revise",
           onClick: onRevise,
           children: "Revise Plan"
         }
@@ -1321,10 +1392,10 @@ var SecondaryActionButton = styled(ActionButton)`
   border: 1px solid rgba(255, 255, 255, 0.14);
 `;
 
-// src/components/chat-thread/components/pde-ai-notice-card.tsx
+// src/components/chat-thread/components/notice-card.tsx
 import styled2 from "@emotion/styled";
 import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
-var PDEAINoticeCard = ({ text, tone }) => /* @__PURE__ */ jsx3(Card2, { "data-testid": "pde-ai-notice-card", "data-tone": tone, children: text });
+var NoticeCard = ({ text, tone }) => /* @__PURE__ */ jsx3(Card2, { "data-testid": "notice-card", "data-tone": tone, children: text });
 var Card2 = styled2.div`
   padding: 12px 14px;
   border-radius: 16px;
@@ -1350,10 +1421,10 @@ var Card2 = styled2.div`
   }
 `;
 
-// src/components/chat-thread/components/pde-ai-parameter-summary-card.tsx
+// src/components/chat-thread/components/parameter-summary-card.tsx
 import styled3 from "@emotion/styled";
 import { jsx as jsx4, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
-var PDEAIParameterSummaryCard = ({ items }) => /* @__PURE__ */ jsxs2(Card3, { "data-testid": "pde-ai-parameter-summary-card", children: [
+var ParameterSummaryCard = ({ items }) => /* @__PURE__ */ jsxs2(Card3, { "data-testid": "parameter-summary-card", children: [
   /* @__PURE__ */ jsx4(Title2, { children: "Parameter Summary" }),
   /* @__PURE__ */ jsx4(List, { children: items.map((item) => /* @__PURE__ */ jsxs2(ListItem, { children: [
     /* @__PURE__ */ jsx4(Label, { children: item.label }),
@@ -1397,11 +1468,17 @@ var Value = styled3.span`
   text-align: right;
 `;
 
-// src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
+// src/components/chat-thread/components/questionnaire-card.tsx
 import { useState as useState2 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
+var DEFAULT_QUESTIONNAIRE_CARD_LABELS = {
+  submitting: "Submitting...",
+  submitted: "Selection submitted. Waiting for the plan to continue...",
+  validationPrefix: "Please complete:",
+  submitFailed: "Failed to submit. Please try again."
+};
 var createInitialAnswers = (questionnaire) => ({
   ...questionnaire.answers ?? {}
 });
@@ -1495,26 +1572,40 @@ var normalizeQuestionAnswer = (question, answer) => {
       return answer;
   }
 };
-var PDEAIQuestionnaireCardInner = ({
+var QuestionnaireCardInner = ({
   questionnaire,
   interactive = false,
-  onSubmit
+  onSubmit,
+  labels
 }) => {
   const [answers, setAnswers] = useState2(
     () => createInitialAnswers(questionnaire)
   );
   const [errorMessage, setErrorMessage] = useState2(null);
-  const handleSubmit = () => {
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isSubmitted, setIsSubmitted] = useState2(false);
+  const resolvedLabels = {
+    ...DEFAULT_QUESTIONNAIRE_CARD_LABELS,
+    ...labels
+  };
+  const hasExternalFailureStatus = questionnaire.status === "expired" || questionnaire.status === "failed";
+  const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
+  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
+  const handleSubmit = async () => {
+    if (isSubmitting || isSubmitted) {
+      return;
+    }
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
     );
     if (missingQuestions.length > 0) {
       setErrorMessage(
-        `Please complete: ${missingQuestions.map((question) => question.label).join(", ")}`
+        `${resolvedLabels.validationPrefix} ${missingQuestions.map((question) => question.label).join(", ")}`
       );
       return;
     }
     setErrorMessage(null);
+    setIsSubmitting(true);
     const normalizedAnswers = Object.fromEntries(
       questionnaire.questions.flatMap((question) => {
         const value = normalizeQuestionAnswer(question, answers[question.id]);
@@ -1531,11 +1622,18 @@ var PDEAIQuestionnaireCardInner = ({
         return [`- ${question.label}: ${formatQuestionAnswer(question, value)}`];
       })
     ];
-    onSubmit?.({
-      questionnaireId: questionnaire.questionnaireId,
-      answers: normalizedAnswers,
-      content: contentLines.join("\n")
-    });
+    try {
+      await onSubmit?.({
+        questionnaireId: questionnaire.questionnaireId,
+        answers: normalizedAnswers,
+        content: contentLines.join("\n")
+      });
+      setIsSubmitted(true);
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : resolvedLabels.submitFailed);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
   const renderQuestion = (question) => {
     const renderOptionChoice = ({
@@ -1550,13 +1648,13 @@ var PDEAIQuestionnaireCardInner = ({
       OptionChoiceItem,
       {
         role: "button",
-        tabIndex: interactive ? 0 : -1,
+        tabIndex: isInteractionLocked ? -1 : 0,
         "aria-pressed": isSelected,
         "data-selected": isSelected,
         "data-tone": tone,
-        "data-testid": `pde-ai-question-option-${questionId}-${index}`,
+        "data-testid": `question-option-${questionId}-${index}`,
         onClick: (event) => {
-          if (!interactive) {
+          if (isInteractionLocked) {
             return;
           }
           if (event.target instanceof HTMLElement && event.target.closest("input")) {
@@ -1565,7 +1663,7 @@ var PDEAIQuestionnaireCardInner = ({
           onClick();
         },
         onKeyDown: (event) => {
-          if (!interactive) {
+          if (isInteractionLocked) {
             return;
           }
           if (event.key !== "Enter" && event.key !== " ") {
@@ -1624,11 +1722,11 @@ var PDEAIQuestionnaireCardInner = ({
             inlineInput: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE ? /* @__PURE__ */ jsx5(
               InlineOtherInput,
               {
-                "data-testid": `pde-ai-question-input-${question.id}`,
+                "data-testid": `question-input-${question.id}`,
                 type: "text",
                 value: singleSelectDraft.otherValue,
                 placeholder: "Other",
-                readOnly: !interactive,
+                readOnly: isInteractionLocked,
                 onClick: (event) => {
                   event.stopPropagation();
                 },
@@ -1649,11 +1747,11 @@ var PDEAIQuestionnaireCardInner = ({
         return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsx5(
           TextInput,
           {
-            "data-testid": `pde-ai-question-input-${question.id}`,
+            "data-testid": `question-input-${question.id}`,
             type: "text",
             value: getTextInputValue(answers[question.id]),
             placeholder: question.placeholder,
-            readOnly: !interactive,
+            readOnly: isInteractionLocked,
             onChange: (event) => {
               setAnswers((current) => updateAnswerValue(current, question.id, event.target.value));
             }
@@ -1664,11 +1762,11 @@ var PDEAIQuestionnaireCardInner = ({
           /* @__PURE__ */ jsx5(
             TextInput,
             {
-              "data-testid": `pde-ai-question-input-${question.id}`,
+              "data-testid": `question-input-${question.id}`,
               type: "number",
               value: getNumberInputValue(answers[question.id]),
               placeholder: question.placeholder,
-              readOnly: !interactive,
+              readOnly: isInteractionLocked,
               onChange: (event) => {
                 setAnswers(
                   (current) => updateAnswerValue(
@@ -1703,7 +1801,7 @@ var PDEAIQuestionnaireCardInner = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs3(Card4, { "data-testid": "pde-ai-questionnaire-card", children: [
+  return /* @__PURE__ */ jsxs3(Card4, { "data-testid": "questionnaire-card", children: [
     questionnaire.title ? /* @__PURE__ */ jsx5(Title3, { children: questionnaire.title }) : null,
     questionnaire.description ? /* @__PURE__ */ jsx5(Description, { children: questionnaire.description }) : null,
     /* @__PURE__ */ jsx5(QuestionList, { children: questionnaire.questions.map((question) => /* @__PURE__ */ jsxs3(QuestionCard, { children: [
@@ -1713,24 +1811,28 @@ var PDEAIQuestionnaireCardInner = ({
       ] }),
       renderQuestion(question)
     ] }, question.id)) }),
-    errorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "pde-ai-questionnaire-error", children: errorMessage }) : null,
-    interactive ? /* @__PURE__ */ jsx5(
+    visibleErrorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
+    isSubmitted ? /* @__PURE__ */ jsx5(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : interactive && !hasExternalFailureStatus ? /* @__PURE__ */ jsx5(
       SubmitButton,
       {
         type: "button",
-        "data-testid": "pde-ai-questionnaire-submit",
-        onClick: handleSubmit,
-        children: questionnaire.submitLabel ?? "Submit"
+        "data-testid": "questionnaire-submit",
+        disabled: isInteractionLocked,
+        onClick: () => {
+          void handleSubmit();
+        },
+        children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
       }
     ) : null
   ] });
 };
 var getQuestionnaireStateKey = (questionnaire) => JSON.stringify([
   questionnaire.questionnaireId,
-  questionnaire.answers ?? {},
-  questionnaire.questions
+  questionnaire.questions,
+  questionnaire.status,
+  questionnaire.statusMessage
 ]);
-var PDEAIQuestionnaireCard = (props) => /* @__PURE__ */ jsx5(PDEAIQuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
+var QuestionnaireCard = (props) => /* @__PURE__ */ jsx5(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = styled4.section`
   display: grid;
   gap: 14px;
@@ -1878,6 +1980,10 @@ var ErrorMessage = styled4.div`
   color: rgba(255, 145, 145, 0.96);
   font-size: 12px;
 `;
+var SuccessMessage = styled4.div`
+  color: rgba(164, 255, 210, 0.96);
+  font-size: 12px;
+`;
 var SubmitButton = styled4.button`
   justify-self: flex-start;
   border: none;
@@ -1888,12 +1994,17 @@ var SubmitButton = styled4.button`
   font-weight: 700;
   padding: 10px 14px;
   cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.72;
+  }
 `;
 
-// src/components/chat-thread/components/pde-ai-result-summary-card.tsx
+// src/components/chat-thread/components/result-summary-card.tsx
 import styled5 from "@emotion/styled";
 import { jsx as jsx6, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var PDEAIResultSummaryCard = ({ summary }) => /* @__PURE__ */ jsxs4(Card5, { "data-testid": "pde-ai-result-summary-card", "data-status": summary.status, children: [
+var ResultSummaryCard = ({ summary }) => /* @__PURE__ */ jsxs4(Card5, { "data-testid": "result-summary-card", "data-status": summary.status, children: [
   /* @__PURE__ */ jsx6(Eyebrow2, { children: summary.status }),
   /* @__PURE__ */ jsx6(Headline, { children: summary.headline }),
   /* @__PURE__ */ jsx6(Details, { children: summary.details.map((detail) => /* @__PURE__ */ jsx6(Detail, { children: detail }, detail)) })
@@ -1989,6 +2100,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var MARKDOWN_REMARK_PLUGINS = [remarkGfm, remarkMath];
 var MARKDOWN_REHYPE_PLUGINS = [rehypeKatex];
+var USER_MESSAGE_COLLAPSE_HEIGHT_PX = 120;
 var MARKDOWN_COMPONENTS = {
   table: ({ node: _node, ...props }) => /* @__PURE__ */ jsx8(TableWrapper, { children: /* @__PURE__ */ jsx8("table", { ...props }) })
 };
@@ -2001,10 +2113,101 @@ var renderMarkdownContent = (content) => /* @__PURE__ */ jsx8(
     children: content
   }
 );
+var renderPlainTextContent = (content) => content;
+var CollapseIcon = ({ expanded }) => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M4 6l4 4 4-4",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        transform: expanded ? "rotate(180 8 8)" : void 0
+      }
+    )
+  }
+);
+var useUserMessageCollapse = ({
+  blocks,
+  displayedBlocks,
+  displayedContent,
+  enabled,
+  freshContent,
+  settledContent
+}) => {
+  const [isCollapsible, setIsCollapsible] = useState3(false);
+  const [isExpanded, setIsExpanded] = useState3(false);
+  const [bodyStackElement, setBodyStackElement] = useState3(null);
+  const syncCollapseState = useCallback2(
+    (element) => {
+      const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
+      setIsCollapsible(nextCollapsible);
+      if (!nextCollapsible) {
+        setIsExpanded(false);
+      }
+    },
+    [enabled]
+  );
+  const bodyStackRef = useCallback2(
+    (node) => {
+      setBodyStackElement(node);
+      syncCollapseState(node);
+    },
+    [syncCollapseState]
+  );
+  useLayoutEffect(() => {
+    if (!bodyStackElement) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => {
+      syncCollapseState(bodyStackElement);
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [
+    blocks,
+    bodyStackElement,
+    displayedBlocks,
+    displayedContent,
+    enabled,
+    freshContent,
+    settledContent,
+    syncCollapseState
+  ]);
+  useLayoutEffect(() => {
+    if (!bodyStackElement || !enabled || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      syncCollapseState(bodyStackElement);
+    });
+    observer.observe(bodyStackElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [bodyStackElement, enabled, syncCollapseState]);
+  return {
+    bodyStackRef,
+    isCollapsed: isCollapsible && !isExpanded,
+    isCollapsible,
+    isExpanded,
+    toggleExpanded: () => setIsExpanded((current) => !current)
+  };
+};
 var createExecutionConfirmationContent = (proposal) => [
   "Execution confirmed",
-  `- Equation: ${proposal.equationName}`,
-  ...proposal.solverName ? [`- Solver: ${proposal.solverName}`] : [],
+  `- Equation: ${proposal.resourceName}`,
+  ...proposal.executorName ? [`- Solver: ${proposal.executorName}`] : [],
   `- Proposal ID: ${proposal.proposalId}`
 ].join("\n");
 var areChatAttachmentsEqual = (previousAttachments, nextAttachments) => {
@@ -2026,10 +2229,10 @@ var areParameterSummaryItemsEqual = (previousItems, nextItems) => previousItems.
   const nextItem = nextItems[index];
   return item.label === nextItem?.label && item.value === nextItem.value && item.fieldPath === nextItem.fieldPath;
 });
-var areExecutionProposalsEqual = (previousProposal, nextProposal) => previousProposal.proposalId === nextProposal.proposalId && previousProposal.equationKey === nextProposal.equationKey && previousProposal.equationName === nextProposal.equationName && previousProposal.solverName === nextProposal.solverName && previousProposal.requiresConfirmation === nextProposal.requiresConfirmation && areParameterSummaryItemsEqual(previousProposal.parameterSummary, nextProposal.parameterSummary) && (previousProposal.warnings ?? []).length === (nextProposal.warnings ?? []).length && (previousProposal.warnings ?? []).every(
+var areExecutionProposalsEqual = (previousProposal, nextProposal) => previousProposal.proposalId === nextProposal.proposalId && previousProposal.resourceKey === nextProposal.resourceKey && previousProposal.resourceName === nextProposal.resourceName && previousProposal.executorName === nextProposal.executorName && previousProposal.requiresConfirmation === nextProposal.requiresConfirmation && areParameterSummaryItemsEqual(previousProposal.parameterSummary, nextProposal.parameterSummary) && (previousProposal.warnings ?? []).length === (nextProposal.warnings ?? []).length && (previousProposal.warnings ?? []).every(
   (warning, index) => warning === nextProposal.warnings?.[index]
 );
-var areResultSummariesEqual = (previousSummary, nextSummary) => previousSummary.taskId === nextSummary.taskId && previousSummary.status === nextSummary.status && previousSummary.headline === nextSummary.headline && previousSummary.details.length === nextSummary.details.length && previousSummary.details.every((detail, index) => detail === nextSummary.details[index]);
+var areResultSummariesEqual = (previousSummary, nextSummary) => previousSummary.summaryId === nextSummary.summaryId && previousSummary.status === nextSummary.status && previousSummary.headline === nextSummary.headline && previousSummary.details.length === nextSummary.details.length && previousSummary.details.every((detail, index) => detail === nextSummary.details[index]);
 var areStringArraysEqual = (previousValues, nextValues) => previousValues.length === nextValues.length && previousValues.every((value, index) => value === nextValues[index]);
 var areQuestionAnswersEqual = (previousAnswer, nextAnswer) => {
   if (Array.isArray(previousAnswer) || Array.isArray(nextAnswer)) {
@@ -2070,7 +2273,7 @@ var arePlanQuestionsEqual = (previousQuestion, nextQuestion) => {
       return false;
   }
 };
-var areQuestionnairesEqual = (previousQuestionnaire, nextQuestionnaire) => previousQuestionnaire.questionnaireId === nextQuestionnaire.questionnaireId && previousQuestionnaire.title === nextQuestionnaire.title && previousQuestionnaire.description === nextQuestionnaire.description && previousQuestionnaire.submitLabel === nextQuestionnaire.submitLabel && previousQuestionnaire.questions.length === nextQuestionnaire.questions.length && previousQuestionnaire.questions.every(
+var areQuestionnairesEqual = (previousQuestionnaire, nextQuestionnaire) => previousQuestionnaire.questionnaireId === nextQuestionnaire.questionnaireId && previousQuestionnaire.title === nextQuestionnaire.title && previousQuestionnaire.description === nextQuestionnaire.description && previousQuestionnaire.submitLabel === nextQuestionnaire.submitLabel && previousQuestionnaire.status === nextQuestionnaire.status && previousQuestionnaire.statusMessage === nextQuestionnaire.statusMessage && previousQuestionnaire.questions.length === nextQuestionnaire.questions.length && previousQuestionnaire.questions.every(
   (question, index) => arePlanQuestionsEqual(question, nextQuestionnaire.questions[index])
 ) && areQuestionAnswerMapsEqual(previousQuestionnaire.answers, nextQuestionnaire.answers);
 var areMessageBlocksEqual = (previousBlocks, nextBlocks) => {
@@ -2151,6 +2354,8 @@ var ChatMessageItemView = ({
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
+  const isUserMessage = message.role === "user";
+  const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
   const timelineConsumedText = messageRenderOrder === "timeline" ? getTimelineConsumedText(blocks) : "";
   const hasConsumedTimelineText = timelineConsumedText.length > 0 && displayedContent.startsWith(timelineConsumedText);
   const timelineDisplayedContent = hasConsumedTimelineText ? displayedContent.slice(timelineConsumedText.length) : displayedContent;
@@ -2167,6 +2372,21 @@ var ChatMessageItemView = ({
     message,
     messageRenderOrder
   });
+  const {
+    bodyStackRef,
+    isCollapsed: isUserMessageCollapsed,
+    isCollapsible: isUserMessageCollapsible,
+    isExpanded: isUserMessageExpanded,
+    toggleExpanded: toggleUserMessageExpanded
+  } = useUserMessageCollapse({
+    blocks,
+    displayedBlocks,
+    displayedContent,
+    enabled: isUserMessage,
+    freshContent,
+    settledContent
+  });
+  const renderMessageContent = (content) => messageRenderMode === "plain-text" ? renderPlainTextContent(content) : renderMarkdownContent(content);
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -2175,17 +2395,18 @@ var ChatMessageItemView = ({
           {
             "data-testid": `chat-message-block-${index}`,
             "data-block-tone": "settled",
-            children: renderMarkdownContent(block.text)
+            "data-render-mode": messageRenderMode,
+            children: renderMessageContent(block.text)
           },
           `markdown-${index}`
         );
       case "notice":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(NoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
       case "parameter_summary":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(ParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
       case "confirmation_card":
         return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(
-          PDEAIExecutionConfirmationCard,
+          ExecutionConfirmationCard,
           {
             proposal: block.proposal,
             interactive: isPlanMode,
@@ -2197,13 +2418,19 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index}`);
       case "result_summary":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(ResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
       case "questionnaire":
         return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(
-          PDEAIQuestionnaireCard,
+          QuestionnaireCard,
           {
             questionnaire: block.questionnaire,
             interactive: canSubmitQuestionnaire,
+            labels: {
+              submitting: labels.questionnaireSubmitting,
+              submitted: labels.questionnaireSubmitted,
+              validationPrefix: labels.questionnaireValidationPrefix,
+              submitFailed: labels.questionnaireSubmitFailed
+            },
             onSubmit: canSubmitQuestionnaire ? (submission) => onQuestionnaireSubmit({
               ...submission,
               sourceMessageId: message.id
@@ -2236,14 +2463,31 @@ var ChatMessageItemView = ({
           "data-testid": block.tone === "fresh" ? "chat-message-fresh-block" : "chat-message-settled-block",
           "data-block-tone": block.tone,
           "data-block-index": index,
-          children: renderMarkdownContent(block.content)
+          "data-render-mode": messageRenderMode,
+          children: renderMessageContent(block.content)
         },
         `${block.tone}-${index}`
       )),
-      !textBlocks.some((block) => block.content) && !settledText && !freshText && Boolean(textContent) ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(textContent) }) : null
+      !textBlocks.some((block) => block.content) && !settledText && !freshText && Boolean(textContent) ? /* @__PURE__ */ jsx8(
+        ContentBlock,
+        {
+          "data-testid": "chat-message-settled-block",
+          "data-block-tone": "settled",
+          "data-render-mode": messageRenderMode,
+          children: renderMessageContent(textContent)
+        }
+      ) : null
     ] });
   };
-  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(content) });
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(
+    ContentBlock,
+    {
+      "data-testid": "chat-message-settled-block",
+      "data-block-tone": "settled",
+      "data-render-mode": messageRenderMode,
+      children: renderMessageContent(content)
+    }
+  );
   const bodySegments = (() => {
     if (!shouldRenderStructuredBlocks && hasTextContent) {
       return [{ type: "text" }];
@@ -2301,21 +2545,40 @@ var ChatMessageItemView = ({
           }
         ) : null,
         /* @__PURE__ */ jsx8(Role, { children: message.role === "user" ? labels.userRoleLabel : labels.assistantRoleLabel }),
+        isUserMessageCollapsible ? /* @__PURE__ */ jsx8(
+          CollapseToggle,
+          {
+            type: "button",
+            "data-testid": "chat-message-collapse-toggle",
+            "aria-label": isUserMessageExpanded ? labels.collapseMessageAriaLabel : labels.expandMessageAriaLabel,
+            "aria-expanded": isUserMessageExpanded,
+            onClick: toggleUserMessageExpanded,
+            children: /* @__PURE__ */ jsx8(CollapseIcon, { expanded: isUserMessageExpanded })
+          }
+        ) : null,
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ jsx8(
-          ContentSegment,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(
+          ContentStack,
           {
-            "data-testid": "chat-message-content-segment",
-            children: segment.type === "block" ? renderChatMessageBlock(segment.block, segment.index) : segment.type === "text" ? segment.content !== void 0 ? segment.useTimelineSegmentation ? renderTextContent({
-              content: segment.content,
-              displayedBlocks: segment.displayedBlocks,
-              useTimelineSegmentation: true
-            }) : renderStaticTextSegment(segment.content) : renderTextContent() : renderStaticTextSegment(segment.content)
-          },
-          segment.type === "text" ? `text-${index}` : segment.type === "markdown" ? `markdown-${index}` : `${segment.block.type}-${segment.index}`
-        )) }) : null,
+            ref: bodyStackRef,
+            "data-testid": "chat-message-body-stack",
+            "data-collapsed": isUserMessageCollapsed,
+            children: bodySegments.map((segment, index) => /* @__PURE__ */ jsx8(
+              ContentSegment,
+              {
+                "data-testid": "chat-message-content-segment",
+                children: segment.type === "block" ? renderChatMessageBlock(segment.block, segment.index) : segment.type === "text" ? segment.content !== void 0 ? segment.useTimelineSegmentation ? renderTextContent({
+                  content: segment.content,
+                  displayedBlocks: segment.displayedBlocks,
+                  useTimelineSegmentation: true
+                }) : renderStaticTextSegment(segment.content) : renderTextContent() : renderStaticTextSegment(segment.content)
+              },
+              segment.type === "text" ? `text-${index}` : segment.type === "markdown" ? `markdown-${index}` : `${segment.block.type}-${segment.index}`
+            ))
+          }
+        ) : null,
         attachments.length ? /* @__PURE__ */ jsx8(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ jsx8(
           AttachmentButton,
           {
@@ -2400,6 +2663,29 @@ var StatusTag = styled7.span`
   letter-spacing: 0.02em;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 `;
+var CollapseToggle = styled7.button`
+  margin-left: auto;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  transition:
+    background 160ms ease-out,
+    border-color 160ms ease-out,
+    color 160ms ease-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.18);
+    color: rgba(255, 255, 255, 0.92);
+  }
+`;
 var Content = styled7.div`
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.6;
@@ -2444,6 +2730,11 @@ var ContentStack = styled7.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  &[data-collapsed='true'] {
+    max-height: ${USER_MESSAGE_COLLAPSE_HEIGHT_PX}px;
+    overflow: hidden;
+  }
 `;
 var ContentSegment = styled7.div`
   min-width: 0;
@@ -2457,6 +2748,11 @@ var ContentBlock = styled7.div`
     margin-top: 16px;
   }
 
+  &[data-render-mode='plain-text'] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
   &[data-block-tone='fresh'] {
     opacity: 0.85;
     filter: brightness(0.82) saturate(0.88);
@@ -2718,7 +3014,7 @@ var ChatThreadView = ({
   const latestUserMessageRef = useRef4(null);
   const reservedSpaceFrameRef = useRef4(null);
   const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
-  const measureLatestTurnMinHeight = useCallback2(() => {
+  const measureLatestTurnMinHeight = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -2728,7 +3024,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = useCallback2(() => {
+  const scrollLatestUserMessageToTop = useCallback3(() => {
     const container = containerRef.current;
     const target = latestUserMessageRef.current;
     if (!container || !target)
@@ -2748,7 +3044,7 @@ var ChatThreadView = ({
     }
     container.scrollTop = nextScrollTop;
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -2777,7 +3073,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!latestUserMessageId)
       return;
     const handleResize = () => {
@@ -2864,15 +3160,40 @@ var ChatThread = () => {
   const error = useChatStore((s) => s.errorBySession[s.activeSessionId ?? ""]);
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
-  const { sendRef, retryRef, renderMessageBlock, labels } = useChatContext();
-  const handleRetry = useCallback2(() => {
+  const {
+    sendRef,
+    retryRef,
+    renderMessageBlock,
+    handleQuestionnaireSubmit: customQuestionnaireSubmit,
+    handleConfirmationSubmit: customConfirmationSubmit,
+    labels
+  } = useChatContext();
+  const handleRetry = useCallback3(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current();
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = useCallback2(
-    (submission) => {
+  const handleQuestionnaireSubmit = useCallback3(
+    async (submission) => {
+      if (customQuestionnaireSubmit) {
+        const handled = await customQuestionnaireSubmit(submission, {
+          sessionId: activeSessionId ?? void 0,
+          mode: activeSessionMode
+        });
+        if (handled !== false) {
+          if (activeSessionId && submission.sourceMessageId) {
+            updateQA(
+              activeSessionId,
+              submission.sourceMessageId,
+              submission.questionnaireId,
+              submission.answers
+            );
+          }
+          return;
+        }
+      }
+      await sendRef.current(submission.content);
       if (activeSessionId && submission.sourceMessageId) {
         updateQA(
           activeSessionId,
@@ -2881,15 +3202,23 @@ var ChatThread = () => {
           submission.answers
         );
       }
-      void sendRef.current(submission.content);
     },
-    [activeSessionId, updateQA, sendRef]
+    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
   );
-  const handleConfirmationSubmit = useCallback2(
-    (submission) => {
-      void sendRef.current(submission.content);
+  const handleConfirmation = useCallback3(
+    async (submission) => {
+      if (customConfirmationSubmit) {
+        const handled = await customConfirmationSubmit(submission, {
+          sessionId: activeSessionId ?? void 0,
+          mode: activeSessionMode
+        });
+        if (handled !== false) {
+          return;
+        }
+      }
+      await sendRef.current(submission.content);
     },
-    [sendRef]
+    [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
@@ -2903,7 +3232,7 @@ var ChatThread = () => {
       error,
       retryButtonLabel: labels.retryButton,
       onRetry: handleRetry,
-      onConfirmationSubmit: handleConfirmationSubmit,
+      onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
     }
@@ -2917,6 +3246,7 @@ var Container = styled9.div`
   min-height: 0;
   overflow: auto;
   padding: 24px;
+  margin-bottom: 24px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -2970,7 +3300,7 @@ var RetryButton = styled9.button`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -3082,7 +3412,7 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
 import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
@@ -3220,7 +3550,7 @@ var useChatComposer = () => {
   const [availableModels, setAvailableModels] = useState6([]);
   const [isModelsLoading, setIsModelsLoading] = useState6(true);
   const [isModelsError, setIsModelsError] = useState6(false);
-  const fetchModels = useCallback3(async () => {
+  const fetchModels = useCallback4(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -3275,7 +3605,7 @@ var useChatComposer = () => {
       stopRequestRef.current.timeoutId = null;
     }
   };
-  const clearStopRequest = useCallback3((sessionId) => {
+  const clearStopRequest = useCallback4((sessionId) => {
     if (!stopRequestRef.current)
       return;
     if (sessionId && stopRequestRef.current.sessionId !== sessionId)
@@ -3283,7 +3613,7 @@ var useChatComposer = () => {
     clearStopTimeout(sessionId);
     stopRequestRef.current = null;
   }, []);
-  const finalizeStop = useCallback3(
+  const finalizeStop = useCallback4(
     (sessionId) => {
       if (stopRequestRef.current?.sessionId === sessionId) {
         if (stopRequestRef.current.finalized)
@@ -3298,7 +3628,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = useCallback3(
+  const runStream = useCallback4(
     async ({
       localSessionId,
       sessionId,
@@ -3387,7 +3717,7 @@ var useChatComposer = () => {
       setSessionError
     ]
   );
-  const send = useCallback3(
+  const send = useCallback4(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
       const hasText = Boolean(content);
@@ -3996,6 +4326,27 @@ var StopSpinner = styled13.span`
 
 // src/components/chat-composer/index.tsx
 import { jsx as jsx15, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var CHAT_COMPOSER_LINE_HEIGHT_PX = 20;
+var CHAT_COMPOSER_MAX_ROWS = 7;
+var CHAT_COMPOSER_PADDING_TOP_PX = 8;
+var CHAT_COMPOSER_PADDING_BOTTOM_PX = 12;
+var CHAT_COMPOSER_PADDING_BLOCK_PX = CHAT_COMPOSER_PADDING_TOP_PX + CHAT_COMPOSER_PADDING_BOTTOM_PX;
+var CHAT_COMPOSER_MIN_ROWS = 4;
+var CHAT_COMPOSER_EXPANDED_MAX_ROWS = 60;
+var CHAT_COMPOSER_EXPANDED_MAX_VIEWPORT_RATIO = 0.7;
+var CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX = 96;
+var CHAT_COMPOSER_MAX_HEIGHT_PX = CHAT_COMPOSER_MAX_ROWS * CHAT_COMPOSER_LINE_HEIGHT_PX + CHAT_COMPOSER_PADDING_BLOCK_PX;
+var CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX = CHAT_COMPOSER_EXPANDED_MAX_ROWS * CHAT_COMPOSER_LINE_HEIGHT_PX + CHAT_COMPOSER_PADDING_BLOCK_PX;
+var getExpandedComposerHeightPx = () => {
+  if (typeof window === "undefined") {
+    return CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX;
+  }
+  const viewportLimitedHeight = window.innerHeight * CHAT_COMPOSER_EXPANDED_MAX_VIEWPORT_RATIO - CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX;
+  return Math.max(
+    CHAT_COMPOSER_MAX_HEIGHT_PX,
+    Math.floor(Math.min(CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX, viewportLimitedHeight))
+  );
+};
 var PlusIcon = () => /* @__PURE__ */ jsx15(
   "svg",
   {
@@ -4008,6 +4359,36 @@ var PlusIcon = () => /* @__PURE__ */ jsx15(
     children: /* @__PURE__ */ jsx15("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
+var ComposerExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx15(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: expanded ? /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: "M14 6h-4V2M10 6l4-4M2 10h4v4M6 10l-4 4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) : /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: "M10 2h4v4M14 2L9 7M6 14H2v-4M2 14l5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
 var ChatComposerView = ({
   value,
   placeholder,
@@ -4024,6 +4405,8 @@ var ChatComposerView = ({
   isStopping,
   enableImageAttachments,
   modeLabels,
+  expandComposerAriaLabel,
+  collapseComposerAriaLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -4035,6 +4418,9 @@ var ChatComposerView = ({
   onSend
 }) => {
   const imageInputRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const [isComposerExpandable, setIsComposerExpandable] = useState8(false);
+  const [isComposerExpanded, setIsComposerExpanded] = useState8(false);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -4042,6 +4428,26 @@ var ChatComposerView = ({
     isModelsError,
     hasModels
   });
+  useLayoutEffect3(() => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+    if (!isComposerExpanded) {
+      element.style.height = "0px";
+    }
+    const scrollHeight = element.scrollHeight;
+    const nextExpandable = scrollHeight > CHAT_COMPOSER_MAX_HEIGHT_PX;
+    const expandedHeight = getExpandedComposerHeightPx();
+    const nextHeight = isComposerExpanded ? expandedHeight : Math.min(scrollHeight, CHAT_COMPOSER_MAX_HEIGHT_PX);
+    setIsComposerExpandable(nextExpandable);
+    element.style.height = `${nextHeight}px`;
+    element.style.overflowY = !isComposerExpanded && scrollHeight > CHAT_COMPOSER_MAX_HEIGHT_PX ? "auto" : "hidden";
+  }, [isComposerExpanded, value]);
+  const handleSend = async () => {
+    setIsComposerExpanded(false);
+    await onSend();
+  };
   const handleKeyDown = (event) => {
     if (shouldStopChatComposer({ key: event.key, shiftKey: event.shiftKey, isStreaming })) {
       event.preventDefault();
@@ -4051,7 +4457,7 @@ var ChatComposerView = ({
     if (!shouldSubmitChatComposer({ key: event.key, shiftKey: event.shiftKey, canSend }))
       return;
     event.preventDefault();
-    void onSend();
+    void handleSend();
   };
   const handlePickImages = (event) => {
     if (event.target.files?.length)
@@ -4086,60 +4492,77 @@ var ChatComposerView = ({
       }
     ),
     attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx15(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ jsx15(
-      Input,
-      {
-        "data-testid": "chat-composer-input",
-        value,
-        onChange: (event) => onValueChange(event.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: enableImageAttachments ? handlePaste : void 0,
-        placeholder
-      }
-    ),
-    /* @__PURE__ */ jsx15(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ jsx15(
-        AttachButton,
+    /* @__PURE__ */ jsxs10(InputArea, { "data-testid": "chat-composer-input-area", children: [
+      isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ jsx15(
+        ComposerExpandButton,
         {
           type: "button",
-          "data-testid": "chat-composer-attach-image",
-          "aria-label": "Attach image",
-          onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ jsx15(PlusIcon, {})
+          "data-testid": "chat-composer-expand-toggle",
+          "aria-label": isComposerExpanded ? collapseComposerAriaLabel : expandComposerAriaLabel,
+          "aria-expanded": isComposerExpanded,
+          onClick: () => setIsComposerExpanded((current) => !current),
+          children: /* @__PURE__ */ jsx15(ComposerExpandIcon, { expanded: isComposerExpanded })
         }
       ) : null,
       /* @__PURE__ */ jsx15(
-        ChatModeControl,
-        {
-          value: selectedMode,
-          disabled: isStreaming,
-          labels: modeLabels,
-          onChange: onSelectedModeChange
-        }
-      ),
-      /* @__PURE__ */ jsx15(
-        ChatModelControl,
+        Input,
         {
-          selectedModel,
-          availableModels,
-          isModelsLoading,
-          isModelsError,
-          hasModels,
-          onSelectedModelChange,
-          onReloadModels
+          ref: inputRef,
+          "data-testid": "chat-composer-input",
+          "data-expanded": isComposerExpanded,
+          value,
+          onChange: (event) => onValueChange(event.target.value),
+          onKeyDown: handleKeyDown,
+          onPaste: enableImageAttachments ? handlePaste : void 0,
+          placeholder
         }
-      ),
-      /* @__PURE__ */ jsx15(
-        ChatSendActions,
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10(Footer, { children: [
+      /* @__PURE__ */ jsx15(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: enableImageAttachments ? /* @__PURE__ */ jsx15(
+        AttachButton,
         {
-          canSend,
-          isStreaming,
-          isStopping,
-          onStop,
-          onSend
+          type: "button",
+          "data-testid": "chat-composer-attach-image",
+          "aria-label": "Attach image",
+          onClick: () => imageInputRef.current?.click(),
+          children: /* @__PURE__ */ jsx15(PlusIcon, {})
         }
-      )
-    ] }) })
+      ) : null }),
+      /* @__PURE__ */ jsxs10(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
+        /* @__PURE__ */ jsx15(
+          ChatModeControl,
+          {
+            value: selectedMode,
+            disabled: isStreaming,
+            labels: modeLabels,
+            onChange: onSelectedModeChange
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          ChatModelControl,
+          {
+            selectedModel,
+            availableModels,
+            isModelsLoading,
+            isModelsError,
+            hasModels,
+            onSelectedModelChange,
+            onReloadModels
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          ChatSendActions,
+          {
+            canSend,
+            isStreaming,
+            isStopping,
+            onStop,
+            onSend: handleSend
+          }
+        )
+      ] })
+    ] })
   ] }) });
 };
 var ChatComposer = () => {
@@ -4175,6 +4598,8 @@ var ChatComposer = () => {
       isStopping: state.isStopping,
       enableImageAttachments,
       modeLabels,
+      expandComposerAriaLabel: labels.expandComposerAriaLabel,
+      collapseComposerAriaLabel: labels.collapseComposerAriaLabel,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -4191,6 +4616,16 @@ var Container2 = styled14.div`
   padding: 0 16px 16px;
 `;
 var Surface = styled14.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'attachments'
+    'notice'
+    'input'
+    'footer';
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -4200,6 +4635,7 @@ var Surface = styled14.div`
   backdrop-filter: blur(10px);
 `;
 var AttachmentNotice = styled14.div`
+  grid-area: notice;
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -4209,19 +4645,45 @@ var AttachmentNotice = styled14.div`
   font-size: 12px;
   line-height: 1.4;
 `;
+var InputArea = styled14.div`
+  grid-area: input;
+  position: relative;
+`;
 var Input = styled14.textarea`
+  --textarea-line-height: ${CHAT_COMPOSER_LINE_HEIGHT_PX}px;
+  --textarea-min-rows: ${CHAT_COMPOSER_MIN_ROWS};
+  --textarea-max-rows: ${CHAT_COMPOSER_MAX_ROWS};
+  --textarea-expanded-max-rows: ${CHAT_COMPOSER_EXPANDED_MAX_ROWS};
+  --textarea-padding-top: ${CHAT_COMPOSER_PADDING_TOP_PX}px;
+  --textarea-padding-bottom: ${CHAT_COMPOSER_PADDING_BOTTOM_PX}px;
+  --textarea-padding-block: calc(var(--textarea-padding-top) + var(--textarea-padding-bottom));
+  --textarea-max-height: calc(
+    var(--textarea-max-rows) * var(--textarea-line-height) + var(--textarea-padding-block)
+  );
+  --textarea-expanded-max-height: min(
+    calc(
+      var(--textarea-expanded-max-rows) * var(--textarea-line-height) +
+        var(--textarea-padding-block)
+    ),
+    calc(70vh - ${CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX}px)
+  );
   width: 100%;
-  min-height: 96px;
+  min-height: calc(
+    var(--textarea-min-rows) * var(--textarea-line-height) + var(--textarea-padding-block)
+  );
+  max-height: var(--textarea-max-height);
+  box-sizing: border-box;
   resize: none;
   appearance: none;
   border: 0;
   outline: 0;
   background: transparent;
-  padding: 8px 12px 12px 12px;
+  padding: var(--textarea-padding-top) 44px var(--textarea-padding-bottom) 12px;
   font-weight: 400;
   font-size: 14px;
   color: var(--text-primary);
-  line-height: 20px;
+  line-height: var(--textarea-line-height);
+  overflow-y: hidden;
 
   &::placeholder {
     color: var(--text-secondary);
@@ -4230,19 +4692,50 @@ var Input = styled14.textarea`
   &::-webkit-resizer {
     display: none;
   }
+
+  &[data-expanded='true'] {
+    max-height: var(--textarea-expanded-max-height);
+  }
+`;
+var ComposerExpandButton = styled14.button`
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  z-index: 1;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.92);
+  }
 `;
 var Footer = styled14.div`
-  display: flex;
+  grid-area: footer;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: flex-end;
-  justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = styled14.div`
+var LeadingActions = styled14.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  min-width: 0;
+`;
+var TrailingActions = styled14.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  width: 100%;
   min-width: 0;
   justify-content: flex-end;
   gap: 8px;