@xinghunm/ai-chat 0.4.0 → 1.0.0

package/dist/index.js

@@ -78,10 +78,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
@@ -97,6 +105,24 @@ var resolveSessionTitleFromMessage = (message) => {
   }
   return DEFAULT_CHAT_SESSION_TITLE;
 };
+var mergeStreamingBlocks = (existingBlocks, incomingBlocks) => {
+  const nextBlocks = [...existingBlocks ?? []];
+  incomingBlocks.forEach((incomingBlock) => {
+    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(
@@ -286,10 +312,15 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
     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 } : {}
+        }
       }
     });
   },
@@ -509,9 +540,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,
@@ -522,6 +571,10 @@ var createDefaultChatTransport = ({
     ...DEFAULT_CHAT_TRANSPORT_ENDPOINTS,
     ...endpoints
   };
+  const resolvedStreamHeaders = {
+    ...createToolExecutionHeaders(toolExecutionPolicy),
+    ...streamHeaders
+  };
   return {
     getModels: () => getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
@@ -535,12 +588,16 @@ var createDefaultChatTransport = ({
       onDone,
       onError
     }) => {
+      const requestHeaders = {
+        ...createModeDefaultHeaders(mode),
+        ...resolvedStreamHeaders
+      };
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
-        requestHeaders: streamHeaders,
+        requestHeaders,
         model,
         mode,
         content,
@@ -569,6 +626,8 @@ var AiChatProvider = (props) => {
     defaultMode,
     labels,
     renderMessageBlock,
+    handleQuestionnaireSubmit,
+    handleConfirmationSubmit,
     messageRenderOrder,
     enableImageAttachments = true,
     children
@@ -624,6 +683,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      handleQuestionnaireSubmit,
+      handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
@@ -634,6 +695,8 @@ var AiChatProvider = (props) => {
       defaultAuthToken,
       defaultTransformStreamPacket,
       enableImageAttachments,
+      handleConfirmationSubmit,
+      handleQuestionnaireSubmit,
       labels,
       messageRenderOrder,
       renderMessageBlock,
@@ -943,7 +1006,7 @@ 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":
@@ -1235,21 +1298,21 @@ var useTimelineBlockAnchors = ({
   };
 };
 
-// src/components/chat-thread/components/pde-ai-execution-confirmation-card.tsx
+// src/components/chat-thread/components/execution-confirmation-card.tsx
 var import_styled = __toESM(require("@emotion/styled"));
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
-var PDEAIExecutionConfirmationCard = ({
+var ExecutionConfirmationCard = ({
   proposal,
   interactive = false,
   onApply,
   onConfirm,
   onRevise
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Card, { "data-testid": "pde-ai-execution-confirmation-card", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Card, { "data-testid": "execution-confirmation-card", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Header, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Eyebrow, { children: "Execution Proposal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Title, { children: proposal.equationName }),
-      proposal.solverName ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Subtitle, { children: proposal.solverName }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Title, { children: proposal.resourceName }),
+      proposal.executorName ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Subtitle, { children: proposal.executorName }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SummaryList, { children: proposal.parameterSummary.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(SummaryItem, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SummaryLabel, { children: item.label }),
@@ -1257,21 +1320,13 @@ var PDEAIExecutionConfirmationCard = ({
     ] }, `${item.fieldPath ?? item.label}-${item.value}`)) }),
     proposal.warnings?.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Warnings, { children: proposal.warnings.map((warning) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Warning, { children: warning }, warning)) }) : null,
     interactive ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Actions, { children: [
-      onApply && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionButton, { type: "button", "data-testid": "pde-ai-confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
-      onConfirm && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        ActionButton,
-        {
-          type: "button",
-          "data-testid": "pde-ai-confirmation-confirm",
-          onClick: onConfirm,
-          children: "Confirm Execution"
-        }
-      ),
+      onApply && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionButton, { type: "button", "data-testid": "confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
+      onConfirm && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionButton, { type: "button", "data-testid": "confirmation-confirm", onClick: onConfirm, children: "Confirm Execution" }),
       onRevise && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         SecondaryActionButton,
         {
           type: "button",
-          "data-testid": "pde-ai-confirmation-revise",
+          "data-testid": "confirmation-revise",
           onClick: onRevise,
           children: "Revise Plan"
         }
@@ -1368,10 +1423,10 @@ var SecondaryActionButton = (0, import_styled.default)(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
 var import_styled2 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
-var PDEAINoticeCard = ({ text, tone }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Card2, { "data-testid": "pde-ai-notice-card", "data-tone": tone, children: text });
+var NoticeCard = ({ text, tone }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Card2, { "data-testid": "notice-card", "data-tone": tone, children: text });
 var Card2 = import_styled2.default.div`
   padding: 12px 14px;
   border-radius: 16px;
@@ -1397,10 +1452,10 @@ var Card2 = import_styled2.default.div`
   }
 `;
 
-// src/components/chat-thread/components/pde-ai-parameter-summary-card.tsx
+// src/components/chat-thread/components/parameter-summary-card.tsx
 var import_styled3 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
-var PDEAIParameterSummaryCard = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card3, { "data-testid": "pde-ai-parameter-summary-card", children: [
+var ParameterSummaryCard = ({ items }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card3, { "data-testid": "parameter-summary-card", children: [
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Title2, { children: "Parameter Summary" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(List, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ListItem, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { children: item.label }),
@@ -1444,11 +1499,17 @@ var Value = import_styled3.default.span`
   text-align: right;
 `;
 
-// src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
+// src/components/chat-thread/components/questionnaire-card.tsx
 var import_react7 = require("react");
 var import_styled4 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime5 = require("@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 ?? {}
 });
@@ -1542,26 +1603,40 @@ var normalizeQuestionAnswer = (question, answer) => {
       return answer;
   }
 };
-var PDEAIQuestionnaireCardInner = ({
+var QuestionnaireCardInner = ({
   questionnaire,
   interactive = false,
-  onSubmit
+  onSubmit,
+  labels
 }) => {
   const [answers, setAnswers] = (0, import_react7.useState)(
     () => createInitialAnswers(questionnaire)
   );
   const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
-  const handleSubmit = () => {
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react7.useState)(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]);
@@ -1578,11 +1653,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 = ({
@@ -1597,13 +1679,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")) {
@@ -1612,7 +1694,7 @@ var PDEAIQuestionnaireCardInner = ({
           onClick();
         },
         onKeyDown: (event) => {
-          if (!interactive) {
+          if (isInteractionLocked) {
             return;
           }
           if (event.key !== "Enter" && event.key !== " ") {
@@ -1671,11 +1753,11 @@ var PDEAIQuestionnaireCardInner = ({
             inlineInput: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               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();
                 },
@@ -1696,11 +1778,11 @@ var PDEAIQuestionnaireCardInner = ({
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           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));
             }
@@ -1711,11 +1793,11 @@ var PDEAIQuestionnaireCardInner = ({
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             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(
@@ -1750,7 +1832,7 @@ var PDEAIQuestionnaireCardInner = ({
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card4, { "data-testid": "pde-ai-questionnaire-card", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card4, { "data-testid": "questionnaire-card", children: [
     questionnaire.title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title3, { children: questionnaire.title }) : null,
     questionnaire.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Description, { children: questionnaire.description }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionList, { children: questionnaire.questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionCard, { children: [
@@ -1760,24 +1842,28 @@ var PDEAIQuestionnaireCardInner = ({
       ] }),
       renderQuestion(question)
     ] }, question.id)) }),
-    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { "data-testid": "pde-ai-questionnaire-error", children: errorMessage }) : null,
-    interactive ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    visibleErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
+    isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : interactive && !hasExternalFailureStatus ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       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__ */ (0, import_jsx_runtime5.jsx)(PDEAIQuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
+var QuestionnaireCard = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = import_styled4.default.section`
   display: grid;
   gap: 14px;
@@ -1925,6 +2011,10 @@ var ErrorMessage = import_styled4.default.div`
   color: rgba(255, 145, 145, 0.96);
   font-size: 12px;
 `;
+var SuccessMessage = import_styled4.default.div`
+  color: rgba(164, 255, 210, 0.96);
+  font-size: 12px;
+`;
 var SubmitButton = import_styled4.default.button`
   justify-self: flex-start;
   border: none;
@@ -1935,12 +2025,17 @@ var SubmitButton = import_styled4.default.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
 var import_styled5 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
-var PDEAIResultSummaryCard = ({ summary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card5, { "data-testid": "pde-ai-result-summary-card", "data-status": summary.status, children: [
+var ResultSummaryCard = ({ summary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card5, { "data-testid": "result-summary-card", "data-status": summary.status, children: [
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Eyebrow2, { children: summary.status }),
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Headline, { children: summary.headline }),
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Details, { children: summary.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Detail, { children: detail }, detail)) })
@@ -2036,6 +2131,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
 var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 var MARKDOWN_REMARK_PLUGINS = [import_remark_gfm.default, import_remark_math.default];
 var MARKDOWN_REHYPE_PLUGINS = [import_rehype_katex.default];
+var USER_MESSAGE_COLLAPSE_HEIGHT_PX = 120;
 var MARKDOWN_COMPONENTS = {
   table: ({ node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("table", { ...props }) })
 };
@@ -2048,10 +2144,101 @@ var renderMarkdownContent = (content) => /* @__PURE__ */ (0, import_jsx_runtime8
     children: content
   }
 );
+var renderPlainTextContent = (content) => content;
+var CollapseIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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] = (0, import_react9.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react9.useState)(false);
+  const [bodyStackElement, setBodyStackElement] = (0, import_react9.useState)(null);
+  const syncCollapseState = (0, import_react9.useCallback)(
+    (element) => {
+      const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
+      setIsCollapsible(nextCollapsible);
+      if (!nextCollapsible) {
+        setIsExpanded(false);
+      }
+    },
+    [enabled]
+  );
+  const bodyStackRef = (0, import_react9.useCallback)(
+    (node) => {
+      setBodyStackElement(node);
+      syncCollapseState(node);
+    },
+    [syncCollapseState]
+  );
+  (0, import_react9.useLayoutEffect)(() => {
+    if (!bodyStackElement) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => {
+      syncCollapseState(bodyStackElement);
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [
+    blocks,
+    bodyStackElement,
+    displayedBlocks,
+    displayedContent,
+    enabled,
+    freshContent,
+    settledContent,
+    syncCollapseState
+  ]);
+  (0, import_react9.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) => {
@@ -2073,10 +2260,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)) {
@@ -2117,7 +2304,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) => {
@@ -2198,6 +2385,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;
@@ -2214,6 +2403,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":
@@ -2222,17 +2426,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__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
       case "parameter_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
       case "confirmation_card":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          PDEAIExecutionConfirmationCard,
+          ExecutionConfirmationCard,
           {
             proposal: block.proposal,
             interactive: isPlanMode,
@@ -2244,13 +2449,19 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index}`);
       case "result_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
       case "questionnaire":
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          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
@@ -2283,14 +2494,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__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsx)(
+        ContentBlock,
+        {
+          "data-testid": "chat-message-settled-block",
+          "data-block-tone": "settled",
+          "data-render-mode": messageRenderMode,
+          children: renderMessageContent(textContent)
+        }
+      ) : null
     ] });
   };
-  const renderStaticTextSegment = (content) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(content) });
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    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" }];
@@ -2348,21 +2576,40 @@ var ChatMessageItemView = ({
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Role, { children: message.role === "user" ? labels.userRoleLabel : labels.assistantRoleLabel }),
+        isUserMessageCollapsible ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          CollapseToggle,
+          {
+            type: "button",
+            "data-testid": "chat-message-collapse-toggle",
+            "aria-label": isUserMessageExpanded ? labels.collapseMessageAriaLabel : labels.expandMessageAriaLabel,
+            "aria-expanded": isUserMessageExpanded,
+            onClick: toggleUserMessageExpanded,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CollapseIcon, { expanded: isUserMessageExpanded })
+          }
+        ) : null,
         isStoppedAssistant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          ContentSegment,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)(
+              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__ */ (0, import_jsx_runtime8.jsx)(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           AttachmentButton,
           {
@@ -2447,6 +2694,29 @@ var StatusTag = import_styled7.default.span`
   letter-spacing: 0.02em;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 `;
+var CollapseToggle = import_styled7.default.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 = import_styled7.default.div`
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.6;
@@ -2491,6 +2761,11 @@ var ContentStack = import_styled7.default.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  &[data-collapsed='true'] {
+    max-height: ${USER_MESSAGE_COLLAPSE_HEIGHT_PX}px;
+    overflow: hidden;
+  }
 `;
 var ContentSegment = import_styled7.default.div`
   min-width: 0;
@@ -2504,6 +2779,11 @@ var ContentBlock = import_styled7.default.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);
@@ -2911,7 +3191,14 @@ 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 {
+    sendRef,
+    retryRef,
+    renderMessageBlock,
+    handleQuestionnaireSubmit: customQuestionnaireSubmit,
+    handleConfirmationSubmit: customConfirmationSubmit,
+    labels
+  } = useChatContext();
   const handleRetry = (0, import_react11.useCallback)(() => {
     if (!activeSessionId)
       return;
@@ -2919,7 +3206,25 @@ var ChatThread = () => {
     void retryRef.current();
   }, [activeSessionId, clearSessionError, retryRef]);
   const handleQuestionnaireSubmit = (0, import_react11.useCallback)(
-    (submission) => {
+    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,
@@ -2928,15 +3233,23 @@ var ChatThread = () => {
           submission.answers
         );
       }
-      void sendRef.current(submission.content);
     },
-    [activeSessionId, updateQA, sendRef]
+    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
   );
-  const handleConfirmationSubmit = (0, import_react11.useCallback)(
-    (submission) => {
-      void sendRef.current(submission.content);
+  const handleConfirmation = (0, import_react11.useCallback)(
+    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__ */ (0, import_jsx_runtime10.jsx)(ChatThreadEmptyState, {});
@@ -2950,7 +3263,7 @@ var ChatThread = () => {
       error,
       retryButtonLabel: labels.retryButton,
       onRetry: handleRetry,
-      onConfirmationSubmit: handleConfirmationSubmit,
+      onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
     }
@@ -2964,6 +3277,7 @@ var Container = import_styled9.default.div`
   min-height: 0;
   overflow: auto;
   padding: 24px;
+  margin-bottom: 24px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -4043,6 +4357,27 @@ var StopSpinner = import_styled13.default.span`
 
 // src/components/chat-composer/index.tsx
 var import_jsx_runtime15 = require("@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__ */ (0, import_jsx_runtime15.jsx)(
   "svg",
   {
@@ -4055,6 +4390,36 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
+var ComposerExpandIcon = ({ expanded }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "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__ */ (0, import_jsx_runtime15.jsx)(
+      "path",
+      {
+        d: "M14 6h-4V2M10 6l4-4M2 10h4v4M6 10l-4 4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "path",
+      {
+        d: "M10 2h4v4M14 2L9 7M6 14H2v-4M2 14l5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
 var ChatComposerView = ({
   value,
   placeholder,
@@ -4071,6 +4436,8 @@ var ChatComposerView = ({
   isStopping,
   enableImageAttachments,
   modeLabels,
+  expandComposerAriaLabel,
+  collapseComposerAriaLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -4082,6 +4449,9 @@ var ChatComposerView = ({
   onSend
 }) => {
   const imageInputRef = (0, import_react15.useRef)(null);
+  const inputRef = (0, import_react15.useRef)(null);
+  const [isComposerExpandable, setIsComposerExpandable] = (0, import_react15.useState)(false);
+  const [isComposerExpanded, setIsComposerExpanded] = (0, import_react15.useState)(false);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -4089,6 +4459,26 @@ var ChatComposerView = ({
     isModelsError,
     hasModels
   });
+  (0, import_react15.useLayoutEffect)(() => {
+    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();
@@ -4098,7 +4488,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)
@@ -4133,60 +4523,77 @@ var ChatComposerView = ({
       }
     ),
     attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      Input,
-      {
-        "data-testid": "chat-composer-input",
-        value,
-        onChange: (event) => onValueChange(event.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: enableImageAttachments ? handlePaste : void 0,
-        placeholder
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        AttachButton,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(InputArea, { "data-testid": "chat-composer-input-area", children: [
+      isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ComposerExpandButton,
         {
           type: "button",
-          "data-testid": "chat-composer-attach-image",
-          "aria-label": "Attach image",
-          onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlusIcon, {})
+          "data-testid": "chat-composer-expand-toggle",
+          "aria-label": isComposerExpanded ? collapseComposerAriaLabel : expandComposerAriaLabel,
+          "aria-expanded": isComposerExpanded,
+          onClick: () => setIsComposerExpanded((current) => !current),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComposerExpandIcon, { expanded: isComposerExpanded })
         }
       ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        ChatModeControl,
-        {
-          value: selectedMode,
-          disabled: isStreaming,
-          labels: modeLabels,
-          onChange: onSelectedModeChange
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        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__ */ (0, import_jsx_runtime15.jsx)(
-        ChatSendActions,
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Footer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        AttachButton,
         {
-          canSend,
-          isStreaming,
-          isStopping,
-          onStop,
-          onSend
+          type: "button",
+          "data-testid": "chat-composer-attach-image",
+          "aria-label": "Attach image",
+          onClick: () => imageInputRef.current?.click(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlusIcon, {})
         }
-      )
-    ] }) })
+      ) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ChatModeControl,
+          {
+            value: selectedMode,
+            disabled: isStreaming,
+            labels: modeLabels,
+            onChange: onSelectedModeChange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ChatModelControl,
+          {
+            selectedModel,
+            availableModels,
+            isModelsLoading,
+            isModelsError,
+            hasModels,
+            onSelectedModelChange,
+            onReloadModels
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ChatSendActions,
+          {
+            canSend,
+            isStreaming,
+            isStopping,
+            onStop,
+            onSend: handleSend
+          }
+        )
+      ] })
+    ] })
   ] }) });
 };
 var ChatComposer = () => {
@@ -4222,6 +4629,8 @@ var ChatComposer = () => {
       isStopping: state.isStopping,
       enableImageAttachments,
       modeLabels,
+      expandComposerAriaLabel: labels.expandComposerAriaLabel,
+      collapseComposerAriaLabel: labels.collapseComposerAriaLabel,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -4238,6 +4647,16 @@ var Container2 = import_styled14.default.div`
   padding: 0 16px 16px;
 `;
 var Surface = import_styled14.default.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);
@@ -4247,6 +4666,7 @@ var Surface = import_styled14.default.div`
   backdrop-filter: blur(10px);
 `;
 var AttachmentNotice = import_styled14.default.div`
+  grid-area: notice;
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -4256,19 +4676,45 @@ var AttachmentNotice = import_styled14.default.div`
   font-size: 12px;
   line-height: 1.4;
 `;
+var InputArea = import_styled14.default.div`
+  grid-area: input;
+  position: relative;
+`;
 var Input = import_styled14.default.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);
@@ -4277,19 +4723,50 @@ var Input = import_styled14.default.textarea`
   &::-webkit-resizer {
     display: none;
   }
+
+  &[data-expanded='true'] {
+    max-height: var(--textarea-expanded-max-height);
+  }
+`;
+var ComposerExpandButton = import_styled14.default.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 = import_styled14.default.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 = import_styled14.default.div`
+var LeadingActions = import_styled14.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  min-width: 0;
+`;
+var TrailingActions = import_styled14.default.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  width: 100%;
   min-width: 0;
   justify-content: flex-end;
   gap: 8px;