@xinghunm/ai-chat 1.0.2 → 1.1.1

package/dist/index.mjs

@@ -21,6 +21,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
   retryButton: "Retry",
+  scrollToLatest: "Jump to latest",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -42,7 +43,10 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireSubmitting: "Submitting...",
   questionnaireSubmitted: "Selection submitted. Waiting for the plan to continue...",
   questionnaireValidationPrefix: "Please complete:",
-  questionnaireSubmitFailed: "Failed to submit. Please try again."
+  questionnaireSubmitFailed: "Failed to submit. Please try again.",
+  questionnaireMultiSelectHint: "Multiple choice",
+  questionnaireOtherOptionLabel: "Other",
+  questionnaireOtherPlaceholder: "Other"
 };
 
 // src/store/chat-store.ts
@@ -695,7 +699,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -1485,31 +1489,126 @@ var Value = styled3.span`
 `;
 
 // src/components/chat-thread/components/questionnaire-card.tsx
-import { useState as useState2 } from "react";
+import {
+  useEffect as useEffect3,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
 import styled4 from "@emotion/styled";
-import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { InputField } from "@xinghunm/compass-ui";
+
+// src/components/chat-thread/components/questionnaire-card-helpers.ts
 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 ?? {}
-});
+var getQuestionnaireQuestion = (questionnaire) => questionnaire.question;
 var getMultiSelectAnswerValues = (answer) => Array.isArray(answer) ? answer : [];
-var getSingleSelectDraftState = (question, answer) => {
+var getQuestionOptionValues = (question) => new Set(question.options.map((option) => option.value));
+var extractSingleSelectOtherDraft = (question, answer) => {
+  if (typeof answer !== "string") {
+    return "";
+  }
+  return getQuestionOptionValues(question).has(answer) ? "" : answer;
+};
+var extractMultiSelectOtherDraft = (question, answer) => {
+  if (!Array.isArray(answer)) {
+    return "";
+  }
+  const optionValues = getQuestionOptionValues(question);
+  const customValue = answer.find(
+    (value) => typeof value === "string" && value !== OTHER_OPTION_VALUE && !optionValues.has(value)
+  );
+  return typeof customValue === "string" ? customValue : "";
+};
+var createInitialAnswers = (questionnaire) => {
+  const initialAnswers = {};
+  const question = getQuestionnaireQuestion(questionnaire);
+  if (!question) {
+    return initialAnswers;
+  }
+  const answer = questionnaire.answers?.[question.id];
+  switch (question.kind) {
+    case "single_select": {
+      if (typeof answer !== "string") {
+        break;
+      }
+      if (getQuestionOptionValues(question).has(answer)) {
+        initialAnswers[question.id] = answer;
+        break;
+      }
+      if (question.allowOther) {
+        initialAnswers[question.id] = OTHER_OPTION_VALUE;
+      }
+      break;
+    }
+    case "multi_select": {
+      if (!Array.isArray(answer)) {
+        break;
+      }
+      const optionValues = getQuestionOptionValues(question);
+      const selectedValues = [];
+      let hasOtherValue = false;
+      for (const value of answer) {
+        if (typeof value !== "string") {
+          continue;
+        }
+        if (optionValues.has(value)) {
+          selectedValues.push(value);
+          continue;
+        }
+        if (question.allowOther && !hasOtherValue) {
+          selectedValues.push(OTHER_OPTION_VALUE);
+          hasOtherValue = true;
+        }
+      }
+      initialAnswers[question.id] = selectedValues;
+      break;
+    }
+    default:
+      initialAnswers[question.id] = answer;
+  }
+  return initialAnswers;
+};
+var createInitialOtherDrafts = (questionnaire) => {
+  const drafts = {};
+  const question = getQuestionnaireQuestion(questionnaire);
+  if (!question) {
+    return drafts;
+  }
+  const answer = questionnaire.answers?.[question.id];
+  switch (question.kind) {
+    case "single_select":
+      if (question.allowOther) {
+        drafts[question.id] = extractSingleSelectOtherDraft(question, answer);
+      }
+      break;
+    case "multi_select":
+      if (question.allowOther) {
+        drafts[question.id] = extractMultiSelectOtherDraft(question, answer);
+      }
+      break;
+    default:
+      break;
+  }
+  return drafts;
+};
+var getMultiSelectDraftState = (question, answer, otherDraft) => {
+  const answerValues = getMultiSelectAnswerValues(answer);
+  return {
+    selectedValues: answerValues,
+    otherValue: otherDraft,
+    hasOtherSelected: question.allowOther === true && answerValues.includes(OTHER_OPTION_VALUE)
+  };
+};
+var getSingleSelectDraftState = (question, answer, otherDraft) => {
   if (typeof answer !== "string") {
     return {
       selectedValue: void 0,
-      otherValue: ""
+      otherValue: otherDraft
     };
   }
-  const matchesOption = question.options.some((option) => option.value === answer);
+  const matchesOption = answer !== OTHER_OPTION_VALUE && question.options.some((option) => option.value === answer);
   return {
     selectedValue: matchesOption ? answer : question.allowOther ? OTHER_OPTION_VALUE : void 0,
-    otherValue: matchesOption ? "" : answer
+    otherValue: otherDraft
   };
 };
 var updateAnswerValue = (current, questionId, value) => ({
@@ -1521,6 +1620,17 @@ var toggleMultiSelectAnswer = (current, questionId, optionValue) => {
   const nextValues = currentValues.includes(optionValue) ? currentValues.filter((value) => value !== optionValue) : [...currentValues, optionValue];
   return updateAnswerValue(current, questionId, nextValues);
 };
+var toggleMultiSelectOtherAnswer = (current, question) => {
+  const currentValues = getMultiSelectAnswerValues(current[question.id]);
+  if (currentValues.includes(OTHER_OPTION_VALUE)) {
+    return updateAnswerValue(
+      current,
+      question.id,
+      currentValues.filter((value) => value !== OTHER_OPTION_VALUE)
+    );
+  }
+  return updateAnswerValue(current, question.id, [...currentValues, OTHER_OPTION_VALUE]);
+};
 var getTextInputValue = (answer) => typeof answer === "string" ? String(answer) : "";
 var getNumberInputValue = (answer) => typeof answer === "number" || typeof answer === "string" ? String(answer) : "";
 var getOptionChoiceLabel = (index) => {
@@ -1529,20 +1639,49 @@ var getOptionChoiceLabel = (index) => {
   }
   return String(index + 1);
 };
-var isMissingRequiredAnswer = (question, answers) => {
-  const answer = answers[question.id];
+var normalizeQuestionAnswer = (question, answer, otherDraft = "") => {
+  if (answer === void 0) {
+    return void 0;
+  }
   switch (question.kind) {
-    case "boolean":
-      return typeof answer !== "boolean";
     case "multi_select":
-      return !Array.isArray(answer) || answer.length === 0;
-    case "number":
-      return typeof answer !== "number" || Number.isNaN(answer);
-    case "text":
+      if (!Array.isArray(answer)) {
+        return void 0;
+      }
+      return (() => {
+        const optionValues = getQuestionOptionValues(question);
+        const normalizedOtherDraft = otherDraft.trim();
+        const normalizedValues = answer.flatMap((value) => {
+          if (typeof value !== "string") {
+            return [];
+          }
+          if (optionValues.has(value)) {
+            return [value];
+          }
+          if (!question.allowOther || value !== OTHER_OPTION_VALUE) {
+            return [];
+          }
+          return normalizedOtherDraft === "" ? [] : [normalizedOtherDraft];
+        });
+        return normalizedValues.length > 0 ? normalizedValues : void 0;
+      })();
     case "single_select":
-      return typeof answer !== "string" || answer.trim() === "";
+      if (answer === OTHER_OPTION_VALUE) {
+        const normalizedOtherDraft = otherDraft.trim();
+        return normalizedOtherDraft === "" ? void 0 : normalizedOtherDraft;
+      }
+      if (typeof answer !== "string" || answer.trim() === "") {
+        return void 0;
+      }
+      return getQuestionOptionValues(question).has(answer) ? answer : void 0;
+    case "text":
+      return typeof answer === "string" && answer.trim() !== "" ? answer : void 0;
+    case "number":
+      return typeof answer === "number" && !Number.isNaN(answer) ? answer : void 0;
+    case "boolean":
+      return typeof answer === "boolean" ? answer : void 0;
     default:
-      return true;
+      return answer;
   }
 };
 var formatQuestionAnswer = (question, answer) => {
@@ -1570,80 +1709,221 @@ var formatQuestionAnswer = (question, answer) => {
       return String(answer);
   }
 };
-var normalizeQuestionAnswer = (question, answer) => {
+var buildQuestionSubmissionDetail = (question, answer) => {
   if (answer === void 0) {
     return void 0;
   }
   switch (question.kind) {
-    case "multi_select":
-      return Array.isArray(answer) && answer.length > 0 ? answer : void 0;
-    case "single_select":
-    case "text":
-      return typeof answer === "string" && answer.trim() !== "" ? answer : void 0;
-    case "number":
-      return typeof answer === "number" && !Number.isNaN(answer) ? answer : void 0;
-    case "boolean":
-      return typeof answer === "boolean" ? answer : void 0;
+    case "single_select": {
+      if (typeof answer !== "string") {
+        return void 0;
+      }
+      const optionValues = getQuestionOptionValues(question);
+      const trimmedAnswer = answer.trim();
+      return {
+        questionId: question.id,
+        kind: question.kind,
+        value: answer,
+        selectedOptionValues: optionValues.has(answer) ? [answer] : [],
+        otherValue: optionValues.has(answer) || trimmedAnswer === "" ? void 0 : trimmedAnswer
+      };
+    }
+    case "multi_select": {
+      if (!Array.isArray(answer)) {
+        return void 0;
+      }
+      const optionValues = getQuestionOptionValues(question);
+      const selectedOptionValues = answer.filter(
+        (value) => typeof value === "string" && optionValues.has(value)
+      );
+      const otherValue = answer.find(
+        (value) => typeof value === "string" && !optionValues.has(value)
+      );
+      return {
+        questionId: question.id,
+        kind: question.kind,
+        value: answer,
+        selectedOptionValues,
+        otherValue: otherValue?.trim() ? otherValue.trim() : void 0
+      };
+    }
     default:
-      return answer;
+      return {
+        questionId: question.id,
+        kind: question.kind,
+        value: answer
+      };
+  }
+};
+var getMissingRequiredQuestions = (questionnaire, answers, otherDrafts) => {
+  const question = getQuestionnaireQuestion(questionnaire);
+  if (!question || !question.required) {
+    return [];
   }
+  return normalizeQuestionAnswer(question, answers[question.id], otherDrafts[question.id]) === void 0 ? [question] : [];
+};
+var prepareQuestionnaireSubmission = (questionnaire, answers, otherDrafts) => {
+  const question = getQuestionnaireQuestion(questionnaire);
+  if (!question) {
+    return {
+      normalizedAnswers: {},
+      submissionDetails: void 0,
+      content: questionnaire.title ?? "Questionnaire responses"
+    };
+  }
+  const value = normalizeQuestionAnswer(question, answers[question.id], otherDrafts[question.id]);
+  const normalizedAnswers = value === void 0 ? {} : { [question.id]: value };
+  const detail = buildQuestionSubmissionDetail(question, normalizedAnswers[question.id]);
+  const submissionDetails = detail === void 0 ? void 0 : { [question.id]: detail };
+  return {
+    normalizedAnswers,
+    submissionDetails,
+    content: [
+      questionnaire.title ?? "Questionnaire responses",
+      ...normalizedAnswers[question.id] === void 0 ? [] : [
+        `- ${question.label}: ${formatQuestionAnswer(question, normalizedAnswers[question.id])}`
+      ]
+    ].join("\n")
+  };
+};
+var getQuestionnaireStateKey = (questionnaire) => JSON.stringify([
+  questionnaire.questionnaireId,
+  questionnaire.blockKey,
+  questionnaire.question,
+  questionnaire.status,
+  questionnaire.statusMessage
+]);
+
+// src/components/chat-thread/components/questionnaire-card.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+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.",
+  multiSelectHint: "Multiple choice",
+  otherOptionLabel: "Other",
+  otherPlaceholder: "Other"
+};
+var stopInputClickPropagation = (event) => {
+  event.stopPropagation();
+};
+var stopInputKeyPropagation = (event) => {
+  event.stopPropagation();
 };
+var OptionChoice = ({
+  questionId,
+  optionLabel,
+  index,
+  isSelected,
+  isInteractionLocked,
+  onClick,
+  inlineInput,
+  tone = "default"
+}) => /* @__PURE__ */ jsxs3(
+  OptionChoiceItem,
+  {
+    role: "button",
+    tabIndex: isInteractionLocked ? -1 : 0,
+    "aria-pressed": isSelected,
+    "data-selected": isSelected,
+    "data-tone": tone,
+    "data-testid": `question-option-${questionId}-${index}`,
+    onClick: (event) => {
+      if (isInteractionLocked) {
+        return;
+      }
+      if (event.target instanceof HTMLElement && event.target.closest("input")) {
+        return;
+      }
+      onClick();
+    },
+    onKeyDown: (event) => {
+      if (isInteractionLocked) {
+        return;
+      }
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    children: [
+      /* @__PURE__ */ jsx5(OptionChoiceMarker, { "data-selected": isSelected, children: getOptionChoiceLabel(index) }),
+      /* @__PURE__ */ jsxs3(OptionChoiceContent, { children: [
+        inlineInput ? null : /* @__PURE__ */ jsx5(OptionChoiceLabel, { children: optionLabel }),
+        inlineInput
+      ] })
+    ]
+  }
+);
 var QuestionnaireCardInner = ({
   questionnaire,
   interactive = false,
   onSubmit,
   labels
 }) => {
+  const questionnaireRef = useRef3(questionnaire);
+  const otherInputRefs = useRef3({});
   const [answers, setAnswers] = useState2(
     () => createInitialAnswers(questionnaire)
   );
+  const [otherDrafts, setOtherDrafts] = useState2(
+    () => createInitialOtherDrafts(questionnaire)
+  );
   const [errorMessage, setErrorMessage] = useState2(null);
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const [isSubmitted, setIsSubmitted] = useState2(false);
+  const [pendingFocusQuestionId, setPendingFocusQuestionId] = useState2(null);
   const resolvedLabels = {
     ...DEFAULT_QUESTIONNAIRE_CARD_LABELS,
     ...labels
   };
   const hasExternalFailureStatus = questionnaire.status === "expired" || questionnaire.status === "failed";
+  const question = getQuestionnaireQuestion(questionnaire);
   const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
   const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
+  questionnaireRef.current = questionnaire;
+  useEffect3(() => {
+    setAnswers(createInitialAnswers(questionnaireRef.current));
+    setOtherDrafts(createInitialOtherDrafts(questionnaireRef.current));
+  }, [questionnaire.answers]);
+  useEffect3(() => {
+    if (!pendingFocusQuestionId || isInteractionLocked) {
+      return;
+    }
+    const inputElement = otherInputRefs.current[pendingFocusQuestionId];
+    if (!inputElement) {
+      return;
+    }
+    inputElement.focus();
+    setPendingFocusQuestionId(null);
+  }, [isInteractionLocked, pendingFocusQuestionId]);
   const handleSubmit = async () => {
     if (isSubmitting || isSubmitted) {
       return;
     }
-    const missingQuestions = questionnaire.questions.filter(
-      (question) => question.required && isMissingRequiredAnswer(question, answers)
-    );
+    const missingQuestions = getMissingRequiredQuestions(questionnaire, answers, otherDrafts);
     if (missingQuestions.length > 0) {
       setErrorMessage(
-        `${resolvedLabels.validationPrefix} ${missingQuestions.map((question) => question.label).join(", ")}`
+        `${resolvedLabels.validationPrefix} ${missingQuestions.map((question2) => question2.label).join(", ")}`
       );
       return;
     }
     setErrorMessage(null);
     setIsSubmitting(true);
-    const normalizedAnswers = Object.fromEntries(
-      questionnaire.questions.flatMap((question) => {
-        const value = normalizeQuestionAnswer(question, answers[question.id]);
-        return value === void 0 ? [] : [[question.id, value]];
-      })
+    const { normalizedAnswers, submissionDetails, content } = prepareQuestionnaireSubmission(
+      questionnaire,
+      answers,
+      otherDrafts
     );
-    const contentLines = [
-      questionnaire.title ?? "Questionnaire responses",
-      ...questionnaire.questions.flatMap((question) => {
-        const value = normalizedAnswers[question.id];
-        if (value === void 0) {
-          return [];
-        }
-        return [`- ${question.label}: ${formatQuestionAnswer(question, value)}`];
-      })
-    ];
     try {
       await onSubmit?.({
         questionnaireId: questionnaire.questionnaireId,
         ...questionnaire.blockKey ? { blockKey: questionnaire.blockKey } : {},
         answers: normalizedAnswers,
-        content: contentLines.join("\n")
+        details: submissionDetails,
+        content
       });
       setIsSubmitted(true);
     } catch (error) {
@@ -1652,125 +1932,156 @@ var QuestionnaireCardInner = ({
       setIsSubmitting(false);
     }
   };
-  const renderQuestion = (question) => {
-    const renderOptionChoice = ({
-      questionId,
-      optionLabel,
-      index,
-      isSelected,
-      onClick,
-      inlineInput,
-      tone = "default"
-    }) => /* @__PURE__ */ jsxs3(
-      OptionChoiceItem,
-      {
-        role: "button",
-        tabIndex: isInteractionLocked ? -1 : 0,
-        "aria-pressed": isSelected,
-        "data-selected": isSelected,
-        "data-tone": tone,
-        "data-testid": `question-option-${questionId}-${index}`,
-        onClick: (event) => {
-          if (isInteractionLocked) {
-            return;
-          }
-          if (event.target instanceof HTMLElement && event.target.closest("input")) {
-            return;
-          }
-          onClick();
-        },
-        onKeyDown: (event) => {
-          if (isInteractionLocked) {
-            return;
-          }
-          if (event.key !== "Enter" && event.key !== " ") {
-            return;
-          }
-          event.preventDefault();
-          onClick();
-        },
-        children: [
-          /* @__PURE__ */ jsx5(OptionChoiceMarker, { "data-selected": isSelected, children: getOptionChoiceLabel(index) }),
-          /* @__PURE__ */ jsxs3(OptionChoiceContent, { children: [
-            inlineInput ? null : /* @__PURE__ */ jsx5(OptionChoiceLabel, { children: optionLabel }),
-            inlineInput
-          ] })
-        ]
-      },
-      `${questionId}-${optionLabel}`
-    );
-    switch (question.kind) {
-      case "multi_select":
-        return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsx5(OptionList, { children: question.options.map((option, index) => {
-          const selectedValues = getMultiSelectAnswerValues(answers[question.id]);
-          const isSelected = selectedValues.includes(option.value);
-          return renderOptionChoice({
-            questionId: question.id,
-            optionLabel: option.label,
-            index,
-            isSelected,
-            onClick: () => setAnswers(
-              (current) => toggleMultiSelectAnswer(current, question.id, option.value)
-            )
-          });
-        }) }) });
+  if (!question) {
+    return null;
+  }
+  const renderQuestion = (questionToRender) => {
+    switch (questionToRender.kind) {
+      case "multi_select": {
+        const multiSelectDraft = getMultiSelectDraftState(
+          questionToRender,
+          answers[questionToRender.id],
+          otherDrafts[questionToRender.id] ?? ""
+        );
+        return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsxs3(OptionList, { children: [
+          questionToRender.options.map((option, index) => {
+            const isSelected = multiSelectDraft.selectedValues.includes(option.value);
+            return /* @__PURE__ */ jsx5(
+              OptionChoice,
+              {
+                questionId: questionToRender.id,
+                optionLabel: option.label,
+                index,
+                isSelected,
+                isInteractionLocked,
+                onClick: () => setAnswers(
+                  (current) => toggleMultiSelectAnswer(current, questionToRender.id, option.value)
+                )
+              },
+              option.value
+            );
+          }),
+          questionToRender.allowOther ? /* @__PURE__ */ jsx5(
+            OptionChoice,
+            {
+              questionId: questionToRender.id,
+              optionLabel: resolvedLabels.otherOptionLabel,
+              index: questionToRender.options.length,
+              isSelected: multiSelectDraft.hasOtherSelected,
+              isInteractionLocked,
+              tone: "other",
+              onClick: () => {
+                if (!multiSelectDraft.hasOtherSelected) {
+                  setPendingFocusQuestionId(questionToRender.id);
+                }
+                setAnswers((current) => toggleMultiSelectOtherAnswer(current, questionToRender));
+              },
+              inlineInput: multiSelectDraft.hasOtherSelected ? /* @__PURE__ */ jsx5(
+                InlineOtherInput,
+                {
+                  ref: (node) => {
+                    otherInputRefs.current[questionToRender.id] = node;
+                  },
+                  "data-testid": `question-input-${questionToRender.id}`,
+                  type: "text",
+                  value: multiSelectDraft.otherValue,
+                  placeholder: resolvedLabels.otherPlaceholder,
+                  readOnly: isInteractionLocked,
+                  onClick: stopInputClickPropagation,
+                  onKeyDown: stopInputKeyPropagation,
+                  onChange: (event) => {
+                    setOtherDrafts((current) => ({
+                      ...current,
+                      [questionToRender.id]: event.target.value
+                    }));
+                  }
+                }
+              ) : null
+            },
+            `${questionToRender.id}-other`
+          ) : null
+        ] }) });
+      }
       case "single_select": {
-        const singleSelectDraft = getSingleSelectDraftState(question, answers[question.id]);
+        const singleSelectDraft = getSingleSelectDraftState(
+          questionToRender,
+          answers[questionToRender.id],
+          otherDrafts[questionToRender.id] ?? ""
+        );
         return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsxs3(OptionList, { children: [
-          question.options.map((option, index) => {
+          questionToRender.options.map((option, index) => {
             const isSelected = singleSelectDraft.selectedValue === option.value;
-            return renderOptionChoice({
-              questionId: question.id,
-              optionLabel: option.label,
-              index,
-              isSelected,
-              onClick: () => setAnswers((current) => updateAnswerValue(current, question.id, option.value))
-            });
-          }),
-          question.allowOther ? renderOptionChoice({
-            questionId: question.id,
-            optionLabel: "Other",
-            index: question.options.length,
-            isSelected: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE,
-            tone: "other",
-            onClick: () => setAnswers(
-              (current) => updateAnswerValue(current, question.id, singleSelectDraft.otherValue)
-            ),
-            inlineInput: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE ? /* @__PURE__ */ jsx5(
-              InlineOtherInput,
+            return /* @__PURE__ */ jsx5(
+              OptionChoice,
               {
-                "data-testid": `question-input-${question.id}`,
-                type: "text",
-                value: singleSelectDraft.otherValue,
-                placeholder: "Other",
-                readOnly: isInteractionLocked,
-                onClick: (event) => {
-                  event.stopPropagation();
-                },
-                onKeyDown: (event) => {
-                  event.stopPropagation();
-                },
-                onChange: (event) => {
-                  setAnswers(
-                    (current) => updateAnswerValue(current, question.id, event.target.value)
-                  );
+                questionId: questionToRender.id,
+                optionLabel: option.label,
+                index,
+                isSelected,
+                isInteractionLocked,
+                onClick: () => setAnswers(
+                  (current) => updateAnswerValue(current, questionToRender.id, option.value)
+                )
+              },
+              option.value
+            );
+          }),
+          questionToRender.allowOther ? /* @__PURE__ */ jsx5(
+            OptionChoice,
+            {
+              questionId: questionToRender.id,
+              optionLabel: resolvedLabels.otherOptionLabel,
+              index: questionToRender.options.length,
+              isSelected: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE,
+              isInteractionLocked,
+              tone: "other",
+              onClick: () => {
+                if (singleSelectDraft.selectedValue !== OTHER_OPTION_VALUE) {
+                  setPendingFocusQuestionId(questionToRender.id);
                 }
-              }
-            ) : null
-          }) : null
+                setAnswers(
+                  (current) => updateAnswerValue(current, questionToRender.id, OTHER_OPTION_VALUE)
+                );
+              },
+              inlineInput: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE ? /* @__PURE__ */ jsx5(
+                InlineOtherInput,
+                {
+                  ref: (node) => {
+                    otherInputRefs.current[questionToRender.id] = node;
+                  },
+                  "data-testid": `question-input-${questionToRender.id}`,
+                  type: "text",
+                  value: singleSelectDraft.otherValue,
+                  placeholder: resolvedLabels.otherPlaceholder,
+                  readOnly: isInteractionLocked,
+                  onClick: stopInputClickPropagation,
+                  onKeyDown: stopInputKeyPropagation,
+                  onChange: (event) => {
+                    setOtherDrafts((current) => ({
+                      ...current,
+                      [questionToRender.id]: event.target.value
+                    }));
+                  }
+                }
+              ) : null
+            },
+            `${questionToRender.id}-other`
+          ) : null
         ] }) });
       }
       case "text":
         return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsx5(
           TextInput,
           {
-            "data-testid": `question-input-${question.id}`,
+            "data-testid": `question-input-${questionToRender.id}`,
             type: "text",
-            value: getTextInputValue(answers[question.id]),
-            placeholder: question.placeholder,
+            value: getTextInputValue(answers[questionToRender.id]),
+            placeholder: questionToRender.placeholder,
             readOnly: isInteractionLocked,
             onChange: (event) => {
-              setAnswers((current) => updateAnswerValue(current, question.id, event.target.value));
+              setAnswers(
+                (current) => updateAnswerValue(current, questionToRender.id, event.target.value)
+              );
             }
           }
         ) });
@@ -1779,55 +2090,63 @@ var QuestionnaireCardInner = ({
           /* @__PURE__ */ jsx5(
             TextInput,
             {
-              "data-testid": `question-input-${question.id}`,
+              "data-testid": `question-input-${questionToRender.id}`,
               type: "number",
-              value: getNumberInputValue(answers[question.id]),
-              placeholder: question.placeholder,
+              value: getNumberInputValue(answers[questionToRender.id]),
+              placeholder: questionToRender.placeholder,
               readOnly: isInteractionLocked,
               onChange: (event) => {
                 setAnswers(
                   (current) => updateAnswerValue(
                     current,
-                    question.id,
+                    questionToRender.id,
                     event.target.value === "" ? void 0 : Number(event.target.value)
                   )
                 );
               }
             }
           ),
-          question.unit ? /* @__PURE__ */ jsx5(Unit, { children: question.unit }) : null
+          questionToRender.unit ? /* @__PURE__ */ jsx5(Unit, { children: questionToRender.unit }) : null
         ] }) });
       case "boolean":
         return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsxs3(OptionList, { children: [
-          renderOptionChoice({
-            questionId: question.id,
-            optionLabel: question.trueLabel ?? "Yes",
-            index: 0,
-            isSelected: answers[question.id] === true,
-            onClick: () => setAnswers((current) => updateAnswerValue(current, question.id, true))
-          }),
-          renderOptionChoice({
-            questionId: question.id,
-            optionLabel: question.falseLabel ?? "No",
-            index: 1,
-            isSelected: answers[question.id] === false,
-            onClick: () => setAnswers((current) => updateAnswerValue(current, question.id, false))
-          })
+          /* @__PURE__ */ jsx5(
+            OptionChoice,
+            {
+              questionId: questionToRender.id,
+              optionLabel: questionToRender.trueLabel ?? "Yes",
+              index: 0,
+              isSelected: answers[questionToRender.id] === true,
+              isInteractionLocked,
+              onClick: () => setAnswers((current) => updateAnswerValue(current, questionToRender.id, true))
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            OptionChoice,
+            {
+              questionId: questionToRender.id,
+              optionLabel: questionToRender.falseLabel ?? "No",
+              index: 1,
+              isSelected: answers[questionToRender.id] === false,
+              isInteractionLocked,
+              onClick: () => setAnswers((current) => updateAnswerValue(current, questionToRender.id, false))
+            }
+          )
         ] }) });
       default:
         return null;
     }
   };
   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: [
+    /* @__PURE__ */ jsx5(QuestionList, { children: /* @__PURE__ */ jsxs3(QuestionCard, { children: [
       /* @__PURE__ */ jsxs3(QuestionLabel, { children: [
         question.label,
         question.required ? /* @__PURE__ */ jsx5(Required, { children: "*" }) : null
       ] }),
+      question.kind === "multi_select" ? /* @__PURE__ */ jsx5(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
       renderQuestion(question)
-    ] }, question.id)) }),
+    ] }, question.id) }),
     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,
@@ -1843,12 +2162,6 @@ var QuestionnaireCardInner = ({
     ) : null
   ] });
 };
-var getQuestionnaireStateKey = (questionnaire) => JSON.stringify([
-  questionnaire.questionnaireId,
-  questionnaire.questions,
-  questionnaire.status,
-  questionnaire.statusMessage
-]);
 var QuestionnaireCard = (props) => /* @__PURE__ */ jsx5(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = styled4.section`
   display: grid;
@@ -1858,11 +2171,6 @@ var Card4 = styled4.section`
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
 `;
-var Title3 = styled4.strong`
-  color: rgba(255, 255, 255, 0.94);
-  font-size: 16px;
-  line-height: 1.4;
-`;
 var Description = styled4.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
@@ -1881,13 +2189,18 @@ var QuestionCard = styled4.div`
 `;
 var QuestionLabel = styled4.div`
   color: rgba(255, 255, 255, 0.9);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
 `;
 var Required = styled4.span`
   margin-left: 4px;
   color: rgba(255, 122, 122, 0.9);
 `;
+var QuestionHint = styled4.div`
+  color: rgba(132, 180, 255, 0.9);
+  font-size: 12px;
+  line-height: 1.4;
+`;
 var QuestionBody = styled4.div`
   display: grid;
   gap: 10px;
@@ -1905,7 +2218,7 @@ var OptionChoiceItem = styled4.div`
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.03);
-  padding: 12px 14px;
+  padding: 2px 12px;
   color: rgba(255, 255, 255, 0.9);
   cursor: pointer;
   transition:
@@ -1956,8 +2269,11 @@ var OptionChoiceMarker = styled4.span`
   }
 `;
 var OptionChoiceContent = styled4.span`
-  display: grid;
-  gap: 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  min-height: 40px;
   min-width: 0;
   flex: 1;
 `;
@@ -1980,8 +2296,37 @@ var TextInput = styled4.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = styled4(TextInput)`
+var InlineOtherInput = styled4(InputField)`
+  width: 100%;
   margin-top: 0;
+
+  .compass-input-field-wrapper {
+    min-height: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    background: rgba(13, 15, 21, 0.55);
+    box-shadow: none;
+    padding: 2px 9px;
+  }
+
+  .compass-input-field-wrapper:hover {
+    border-color: rgba(126, 160, 255, 0.28);
+  }
+
+  .compass-input-field-wrapper:focus-within {
+    border-color: rgba(126, 160, 255, 0.42);
+    box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.14);
+  }
+
+  .compass-input-field-input {
+    color: rgba(255, 255, 255, 0.92);
+    font-size: 13px;
+    line-height: 1.2;
+  }
+
+  .compass-input-field-input::placeholder {
+    color: rgba(255, 255, 255, 0.34);
+  }
 `;
 var NumberInputRow = styled4.div`
   display: flex;
@@ -2067,7 +2412,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -2086,8 +2431,8 @@ var Img = styled6.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = useRef3(null);
-  useEffect3(() => {
+  const overlayRef = useRef4(null);
+  useEffect4(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -2095,7 +2440,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  useEffect3(() => {
+  useEffect4(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -2290,9 +2635,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.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 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 && arePlanQuestionsEqual(previousQuestionnaire.question, nextQuestionnaire.question) && areQuestionAnswerMapsEqual(previousQuestionnaire.answers, nextQuestionnaire.answers);
 var areMessageBlocksEqual = (previousBlocks, nextBlocks) => {
   if (previousBlocks === nextBlocks) {
     return true;
@@ -2446,7 +2789,10 @@ var ChatMessageItemView = ({
               submitting: labels.questionnaireSubmitting,
               submitted: labels.questionnaireSubmitted,
               validationPrefix: labels.questionnaireValidationPrefix,
-              submitFailed: labels.questionnaireSubmitFailed
+              submitFailed: labels.questionnaireSubmitFailed,
+              multiSelectHint: labels.questionnaireMultiSelectHint,
+              otherOptionLabel: labels.questionnaireOtherOptionLabel,
+              otherPlaceholder: labels.questionnaireOtherPlaceholder
             },
             onSubmit: canSubmitQuestionnaire ? (submission) => onQuestionnaireSubmit({
               ...submission,
@@ -2705,8 +3051,34 @@ var CollapseToggle = styled7.button`
 `;
 var Content = styled7.div`
   color: rgba(255, 255, 255, 0.92);
+  font-size: 14px;
   line-height: 1.6;
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    line-height: 2.5;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 14px;
+  }
+
   p {
     margin: 0;
   }
@@ -2718,7 +3090,7 @@ var Content = styled7.div`
   table {
     width: 100%;
     border-collapse: collapse;
-    margin: 0;
+    margin: 8px 0 0;
     overflow: hidden;
     border-radius: 14px;
     border: 1px solid rgba(255, 255, 255, 0.08);
@@ -2742,6 +3114,10 @@ var Content = styled7.div`
   tbody tr:last-of-type td {
     border-bottom: none;
   }
+  ul,
+  ol {
+    margin: 0 0 8px;
+  }
 `;
 var ContentStack = styled7.div`
   display: flex;
@@ -2942,6 +3318,8 @@ var HeroSubtitle = styled8.p`
 
 // src/components/chat-thread/index.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var CHAT_THREAD_PINNED_THRESHOLD_PX = 32;
+var isThreadPinnedToBottom = (container) => container.scrollHeight - container.clientHeight - container.scrollTop <= CHAT_THREAD_PINNED_THRESHOLD_PX;
 var renderChatMessage = ({
   message,
   mode,
@@ -3015,12 +3393,13 @@ var ChatThreadView = ({
   streamingMessage,
   error,
   retryButtonLabel,
+  scrollToLatestLabel,
   onRetry,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = useRef4(null);
+  const containerRef = useRef5(null);
   const conversationTurns = useMemo4(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
@@ -3028,9 +3407,15 @@ var ChatThreadView = ({
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = useRef4(null);
-  const reservedSpaceFrameRef = useRef4(null);
+  const latestHistoryMessage = historyMessages[historyMessages.length - 1];
+  const latestTurnRef = useRef5(null);
+  const reservedSpaceFrameRef = useRef5(null);
+  const isPinnedRef = useRef5(true);
+  const lastHistoryMessageIdRef = useRef5(latestHistoryMessage?.id);
+  const lastStreamingMessageIdRef = useRef5(streamingMessage?.id);
   const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
+  const [isDetached, setIsDetached] = useState4(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = useState4(0);
   const measureLatestTurnMinHeight = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
@@ -3041,26 +3426,86 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = useCallback3(() => {
+  const scrollToBottom = useCallback3((force = false) => {
     const container = containerRef.current;
-    const target = latestUserMessageRef.current;
-    if (!container || !target)
-      return;
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-    const nextScrollTop = Math.max(
-      0,
-      container.scrollTop + (targetRect.top - containerRect.top) - CHAT_THREAD_SCROLL_TOP_GAP
-    );
+    if (!container)
+      return false;
+    if (!force && !isPinnedRef.current)
+      return false;
+    const nextScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+    container.scrollTop = nextScrollTop;
     if (typeof container.scrollTo === "function") {
       container.scrollTo({
         top: nextScrollTop,
         behavior: "auto"
       });
+    }
+    return true;
+  }, []);
+  const markThreadPinned = useCallback3(() => {
+    isPinnedRef.current = true;
+    setIsDetached(false);
+    setPendingNewMessageCount(0);
+  }, []);
+  const scrollToBottomAndPin = useCallback3(
+    (force = false) => {
+      const didScroll = scrollToBottom(force);
+      if (!didScroll)
+        return;
+      markThreadPinned();
+    },
+    [markThreadPinned, scrollToBottom]
+  );
+  const handleContainerScroll = useCallback3(() => {
+    const container = containerRef.current;
+    if (!container)
       return;
+    const nextPinned = isThreadPinnedToBottom(container);
+    isPinnedRef.current = nextPinned;
+    setIsDetached(!nextPinned);
+    if (nextPinned) {
+      setPendingNewMessageCount(0);
     }
-    container.scrollTop = nextScrollTop;
   }, []);
+  useLayoutEffect2(() => {
+    const nextHistoryMessageId = latestHistoryMessage?.id;
+    if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
+      return;
+    }
+    lastHistoryMessageIdRef.current = nextHistoryMessageId;
+    if (!latestHistoryMessage) {
+      return;
+    }
+    if (latestHistoryMessage.role === "user") {
+      window.requestAnimationFrame(() => {
+        if (!scrollToBottom(true)) {
+          return;
+        }
+        markThreadPinned();
+      });
+      return;
+    }
+    if (!isPinnedRef.current && latestHistoryMessage.role === "assistant" && latestHistoryMessage.id !== lastStreamingMessageIdRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const nextStreamingMessageId = streamingMessage?.id;
+    if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
+      return;
+    }
+    lastStreamingMessageIdRef.current = nextStreamingMessageId;
+    if (!streamingMessage || streamingMessage.role !== "assistant") {
+      return;
+    }
+    if (!isPinnedRef.current) {
+      window.requestAnimationFrame(() => {
+        setPendingNewMessageCount((current) => current + 1);
+      });
+    }
+  }, [streamingMessage]);
   useLayoutEffect2(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
@@ -3070,6 +3515,7 @@ var ChatThreadView = ({
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
         setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -3081,7 +3527,7 @@ var ChatThreadView = ({
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -3089,13 +3535,18 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  }, [latestTurn, latestUserMessageId, error, measureLatestTurnMinHeight, scrollToBottom]);
   useLayoutEffect2(() => {
-    if (!latestUserMessageId)
+    if (!latestTurn)
       return;
     const handleResize = () => {
+      if (!latestUserMessageId) {
+        setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
+        return;
+      }
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     };
     const container = containerRef.current;
     let resizeObserver = null;
@@ -3110,57 +3561,101 @@ var ChatThreadView = ({
       resizeObserver?.disconnect();
       window.removeEventListener("resize", handleResize);
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  return /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
-    previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
-      turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-        message: turn.userMessage,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }) : null,
-      turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-        message,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }, message.id))
-    ] }, turn.id)),
-    latestTurn ? /* @__PURE__ */ jsxs7(
-      ConversationTurn,
+  }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  useLayoutEffect2(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof MutationObserver === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  return /* @__PURE__ */ jsxs7(ThreadViewport, { children: [
+    /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+        turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+          message: turn.userMessage,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }) : null,
+        turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+          message,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }, message.id))
+      ] }, turn.id)),
+      latestTurn ? /* @__PURE__ */ jsxs7(
+        ConversationTurn,
+        {
+          ref: latestTurnRef,
+          "data-testid": "chat-thread-latest-turn",
+          style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+          children: [
+            latestTurn.userMessage ? /* @__PURE__ */ jsx10(
+              MessageSlot,
+              {
+                "data-testid": "chat-latest-user-anchor",
+                style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
+                children: renderChatMessage({
+                  message: latestTurn.userMessage,
+                  mode: activeSessionMode,
+                  onConfirmationSubmit,
+                  onQuestionnaireSubmit,
+                  renderMessageBlock
+                })
+              }
+            ) : null,
+            latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+              message,
+              mode: activeSessionMode,
+              onConfirmationSubmit,
+              onQuestionnaireSubmit,
+              renderMessageBlock
+            }) }, message.id)),
+            error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          ]
+        }
+      ) : null,
+      !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ] }),
+    isDetached ? /* @__PURE__ */ jsx10(ScrollToLatestOverlay, { children: /* @__PURE__ */ jsxs7(
+      ScrollToLatestButton,
       {
-        "data-testid": "chat-thread-latest-turn",
-        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        type: "button",
+        "data-testid": "chat-thread-scroll-to-latest",
+        onClick: () => scrollToBottomAndPin(true),
         children: [
-          latestTurn.userMessage ? /* @__PURE__ */ jsx10(
-            MessageSlot,
-            {
-              ref: latestUserMessageRef,
-              "data-testid": "chat-latest-user-anchor",
-              style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
-              children: renderChatMessage({
-                message: latestTurn.userMessage,
-                mode: activeSessionMode,
-                onConfirmationSubmit,
-                onQuestionnaireSubmit,
-                renderMessageBlock
-              })
-            }
-          ) : null,
-          latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
-            message,
-            mode: activeSessionMode,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }) }, message.id)),
-          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          scrollToLatestLabel,
+          pendingNewMessageCount > 0 ? /* @__PURE__ */ jsx10(ScrollToLatestBadge, { "data-testid": "chat-thread-scroll-to-latest-count", children: pendingNewMessageCount }) : null
         ]
       }
-    ) : null,
-    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ) }) : null
   ] });
 };
 var EMPTY_MESSAGES = [];
@@ -3248,13 +3743,21 @@ var ChatThread = () => {
       streamingMessage,
       error,
       retryButtonLabel: labels.retryButton,
+      scrollToLatestLabel: labels.scrollToLatest,
       onRetry: handleRetry,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
-    }
+    },
+    activeSessionId ?? "chat-thread-empty"
   );
 };
+var ThreadViewport = styled9.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+`;
 var Container = styled9.div`
   display: flex;
   flex: 1;
@@ -3262,8 +3765,7 @@ var Container = styled9.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px;
-  margin-bottom: 24px;
+  padding: 24px 24px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -3315,9 +3817,51 @@ var RetryButton = styled9.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var ScrollToLatestOverlay = styled9.div`
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+`;
+var ScrollToLatestButton = styled9.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(17, 18, 21, 0.92);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  line-height: 1;
+  padding: 10px 14px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+  cursor: pointer;
+  z-index: 1;
+  pointer-events: auto;
+
+  &:hover {
+    background: rgba(28, 30, 36, 0.96);
+  }
+`;
+var ScrollToLatestBadge = styled9.span`
+  display: inline-flex;
+  min-width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(109, 170, 255, 0.2);
+  color: #9ac0ff;
+  font-size: 11px;
+  font-weight: 600;
+`;
 
 // src/components/chat-composer/index.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState8 } from "react";
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -3429,10 +3973,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef7, 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";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
 var SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
 var MAX_COMPOSER_ATTACHMENTS = 10;
 var createObjectUrl = (file) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : "";
@@ -3447,11 +3991,11 @@ var releaseComposerAttachments = (attachments) => {
 };
 var useComposerAttachments = () => {
   const [attachments, setAttachments] = useState5([]);
-  const attachmentsRef = useRef5([]);
-  useEffect4(() => {
+  const attachmentsRef = useRef6([]);
+  useEffect5(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect4(
+  useEffect5(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -3579,7 +4123,7 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  useEffect5(() => {
+  useEffect6(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
@@ -3588,22 +4132,22 @@ var useChatComposer = () => {
   const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
   const [attachmentNotice, setAttachmentNotice] = useState6(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = useRef6(null);
-  const stopRequestRef = useRef6(null);
-  const lastRequestRef = useRef6(null);
-  useEffect5(() => {
+  const abortControllerRef = useRef7(null);
+  const stopRequestRef = useRef7(null);
+  const lastRequestRef = useRef7(null);
+  useEffect6(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -4434,8 +4978,8 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = useRef7(null);
-  const inputRef = useRef7(null);
+  const imageInputRef = useRef8(null);
+  const inputRef = useRef8(null);
   const [isComposerExpandable, setIsComposerExpandable] = useState8(false);
   const [isComposerExpanded, setIsComposerExpanded] = useState8(false);
   const canSend = canSendChatMessage({
@@ -4586,7 +5130,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect6(() => {
+  useEffect7(() => {
     sendRef.current = send;
     retryRef.current = async () => {
       retry();
@@ -4860,7 +5404,7 @@ var ChatConversationList = () => {
   };
   return /* @__PURE__ */ jsxs12(Container3, { children: [
     /* @__PURE__ */ jsxs12(Toolbar, { children: [
-      /* @__PURE__ */ jsx17(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ jsx17(Title3, { children: "Sessions" }),
       /* @__PURE__ */ jsx17(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
     /* @__PURE__ */ jsx17(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx17(
@@ -4889,7 +5433,7 @@ var Toolbar = styled16.div`
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = styled16.h2`
+var Title3 = styled16.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);