@xinghunm/ai-chat 1.0.2 → 1.1.1

package/dist/index.js

@@ -47,7 +47,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
 var import_styled17 = __toESM(require("@emotion/styled"));
-var import_compass_ui4 = require("@xinghunm/compass-ui");
+var import_compass_ui5 = require("@xinghunm/compass-ui");
 
 // src/components/ai-chat-provider/index.tsx
 var import_react2 = require("react");
@@ -68,6 +68,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
   retryButton: "Retry",
+  scrollToLatest: "Jump to latest",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -89,7 +90,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
@@ -1534,29 +1538,120 @@ var Value = import_styled3.default.span`
 // 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 import_compass_ui = require("@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) => ({
@@ -1568,6 +1663,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) => {
@@ -1576,20 +1682,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) => {
@@ -1617,80 +1752,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
+var import_jsx_runtime5 = require("@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__ */ (0, import_jsx_runtime5.jsxs)(
+  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__ */ (0, import_jsx_runtime5.jsx)(OptionChoiceMarker, { "data-selected": isSelected, children: getOptionChoiceLabel(index) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OptionChoiceContent, { children: [
+        inlineInput ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OptionChoiceLabel, { children: optionLabel }),
+        inlineInput
+      ] })
+    ]
+  }
+);
 var QuestionnaireCardInner = ({
   questionnaire,
   interactive = false,
   onSubmit,
   labels
 }) => {
+  const questionnaireRef = (0, import_react7.useRef)(questionnaire);
+  const otherInputRefs = (0, import_react7.useRef)({});
   const [answers, setAnswers] = (0, import_react7.useState)(
     () => createInitialAnswers(questionnaire)
   );
+  const [otherDrafts, setOtherDrafts] = (0, import_react7.useState)(
+    () => createInitialOtherDrafts(questionnaire)
+  );
   const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
   const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
   const [isSubmitted, setIsSubmitted] = (0, import_react7.useState)(false);
+  const [pendingFocusQuestionId, setPendingFocusQuestionId] = (0, import_react7.useState)(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;
+  (0, import_react7.useEffect)(() => {
+    setAnswers(createInitialAnswers(questionnaireRef.current));
+    setOtherDrafts(createInitialOtherDrafts(questionnaireRef.current));
+  }, [questionnaire.answers]);
+  (0, import_react7.useEffect)(() => {
+    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) {
@@ -1699,125 +1975,156 @@ var QuestionnaireCardInner = ({
       setIsSubmitting(false);
     }
   };
-  const renderQuestion = (question) => {
-    const renderOptionChoice = ({
-      questionId,
-      optionLabel,
-      index,
-      isSelected,
-      onClick,
-      inlineInput,
-      tone = "default"
-    }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      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__ */ (0, import_jsx_runtime5.jsx)(OptionChoiceMarker, { "data-selected": isSelected, children: getOptionChoiceLabel(index) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OptionChoiceContent, { children: [
-            inlineInput ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OptionChoiceLabel, { children: optionLabel }),
-            inlineInput
-          ] })
-        ]
-      },
-      `${questionId}-${optionLabel}`
-    );
-    switch (question.kind) {
-      case "multi_select":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OptionList, { children: [
+          questionToRender.options.map((option, index) => {
+            const isSelected = multiSelectDraft.selectedValues.includes(option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              OptionChoice,
+              {
+                questionId: questionToRender.id,
+                optionLabel: option.label,
+                index,
+                isSelected,
+                isInteractionLocked,
+                onClick: () => setAnswers(
+                  (current) => toggleMultiSelectAnswer(current, questionToRender.id, option.value)
+                )
+              },
+              option.value
+            );
+          }),
+          questionToRender.allowOther ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.jsx)(
+                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__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(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__ */ (0, import_jsx_runtime5.jsx)(
-              InlineOtherInput,
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              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__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.jsx)(
+                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__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           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)
+              );
             }
           }
         ) });
@@ -1826,55 +2133,63 @@ var QuestionnaireCardInner = ({
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             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__ */ (0, import_jsx_runtime5.jsx)(Unit, { children: question.unit }) : null
+          questionToRender.unit ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Unit, { children: questionToRender.unit }) : null
         ] }) });
       case "boolean":
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionBody, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(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__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (0, import_jsx_runtime5.jsx)(
+            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__ */ (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: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionList, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionCard, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionLabel, { children: [
         question.label,
         question.required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Required, { children: "*" }) : null
       ] }),
+      question.kind === "multi_select" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
       renderQuestion(question)
-    ] }, question.id)) }),
+    ] }, question.id) }),
     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,
@@ -1890,12 +2205,6 @@ var QuestionnaireCardInner = ({
     ) : null
   ] });
 };
-var getQuestionnaireStateKey = (questionnaire) => JSON.stringify([
-  questionnaire.questionnaireId,
-  questionnaire.questions,
-  questionnaire.status,
-  questionnaire.statusMessage
-]);
 var QuestionnaireCard = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = import_styled4.default.section`
   display: grid;
@@ -1905,11 +2214,6 @@ var Card4 = import_styled4.default.section`
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
 `;
-var Title3 = import_styled4.default.strong`
-  color: rgba(255, 255, 255, 0.94);
-  font-size: 16px;
-  line-height: 1.4;
-`;
 var Description = import_styled4.default.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
@@ -1928,13 +2232,18 @@ var QuestionCard = import_styled4.default.div`
 `;
 var QuestionLabel = import_styled4.default.div`
   color: rgba(255, 255, 255, 0.9);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
 `;
 var Required = import_styled4.default.span`
   margin-left: 4px;
   color: rgba(255, 122, 122, 0.9);
 `;
+var QuestionHint = import_styled4.default.div`
+  color: rgba(132, 180, 255, 0.9);
+  font-size: 12px;
+  line-height: 1.4;
+`;
 var QuestionBody = import_styled4.default.div`
   display: grid;
   gap: 10px;
@@ -1952,7 +2261,7 @@ var OptionChoiceItem = import_styled4.default.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:
@@ -2003,8 +2312,11 @@ var OptionChoiceMarker = import_styled4.default.span`
   }
 `;
 var OptionChoiceContent = import_styled4.default.span`
-  display: grid;
-  gap: 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  min-height: 40px;
   min-width: 0;
   flex: 1;
 `;
@@ -2027,8 +2339,37 @@ var TextInput = import_styled4.default.input`
     color: rgba(255, 255, 255, 0.34);
   }
 `;
-var InlineOtherInput = (0, import_styled4.default)(TextInput)`
+var InlineOtherInput = (0, import_styled4.default)(import_compass_ui.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 = import_styled4.default.div`
   display: flex;
@@ -2337,9 +2678,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;
@@ -2493,7 +2832,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,
@@ -2752,8 +3094,34 @@ var CollapseToggle = import_styled7.default.button`
 `;
 var Content = import_styled7.default.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;
   }
@@ -2765,7 +3133,7 @@ var Content = import_styled7.default.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);
@@ -2789,6 +3157,10 @@ var Content = import_styled7.default.div`
   tbody tr:last-of-type td {
     border-bottom: none;
   }
+  ul,
+  ol {
+    margin: 0 0 8px;
+  }
 `;
 var ContentStack = import_styled7.default.div`
   display: flex;
@@ -2989,6 +3361,8 @@ var HeroSubtitle = import_styled8.default.p`
 
 // src/components/chat-thread/index.tsx
 var import_jsx_runtime10 = require("@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,
@@ -3062,6 +3436,7 @@ var ChatThreadView = ({
   streamingMessage,
   error,
   retryButtonLabel,
+  scrollToLatestLabel,
   onRetry,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
@@ -3075,9 +3450,15 @@ var ChatThreadView = ({
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = (0, import_react11.useRef)(null);
+  const latestHistoryMessage = historyMessages[historyMessages.length - 1];
+  const latestTurnRef = (0, import_react11.useRef)(null);
   const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
+  const isPinnedRef = (0, import_react11.useRef)(true);
+  const lastHistoryMessageIdRef = (0, import_react11.useRef)(latestHistoryMessage?.id);
+  const lastStreamingMessageIdRef = (0, import_react11.useRef)(streamingMessage?.id);
   const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react11.useState)(0);
+  const [isDetached, setIsDetached] = (0, import_react11.useState)(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = (0, import_react11.useState)(0);
   const measureLatestTurnMinHeight = (0, import_react11.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
@@ -3088,26 +3469,86 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = (0, import_react11.useCallback)(() => {
+  const scrollToBottom = (0, import_react11.useCallback)((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 = (0, import_react11.useCallback)(() => {
+    isPinnedRef.current = true;
+    setIsDetached(false);
+    setPendingNewMessageCount(0);
+  }, []);
+  const scrollToBottomAndPin = (0, import_react11.useCallback)(
+    (force = false) => {
+      const didScroll = scrollToBottom(force);
+      if (!didScroll)
+        return;
+      markThreadPinned();
+    },
+    [markThreadPinned, scrollToBottom]
+  );
+  const handleContainerScroll = (0, import_react11.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container)
       return;
+    const nextPinned = isThreadPinnedToBottom(container);
+    isPinnedRef.current = nextPinned;
+    setIsDetached(!nextPinned);
+    if (nextPinned) {
+      setPendingNewMessageCount(0);
     }
-    container.scrollTop = nextScrollTop;
   }, []);
+  (0, import_react11.useLayoutEffect)(() => {
+    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]);
+  (0, import_react11.useLayoutEffect)(() => {
+    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]);
   (0, import_react11.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
@@ -3117,6 +3558,7 @@ var ChatThreadView = ({
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
         setLatestTurnMinHeight((current) => current === 0 ? current : 0);
+        scrollToBottom();
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -3128,7 +3570,7 @@ var ChatThreadView = ({
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
       measureLatestTurnMinHeight();
-      scrollLatestUserMessageToTop();
+      scrollToBottom();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -3136,13 +3578,18 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  }, [latestTurn, latestUserMessageId, error, measureLatestTurnMinHeight, scrollToBottom]);
   (0, import_react11.useLayoutEffect)(() => {
-    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;
@@ -3157,57 +3604,101 @@ var ChatThreadView = ({
       resizeObserver?.disconnect();
       window.removeEventListener("resize", handleResize);
     };
-  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
-    previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
-      turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-        message: turn.userMessage,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }) : null,
-      turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-        message,
-        mode: activeSessionMode,
-        onConfirmationSubmit,
-        onQuestionnaireSubmit,
-        renderMessageBlock
-      }) }, message.id))
-    ] }, turn.id)),
-    latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      ConversationTurn,
+  }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
+  (0, import_react11.useLayoutEffect)(() => {
+    const latestTurnElement = latestTurnRef.current;
+    if (!latestTurnElement || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      scrollToBottom();
+    });
+    observer.observe(latestTurnElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [latestTurn, scrollToBottom]);
+  (0, import_react11.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime10.jsxs)(ThreadViewport, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+        turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+          message: turn.userMessage,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }) : null,
+        turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+          message,
+          mode: activeSessionMode,
+          onConfirmationSubmit,
+          onQuestionnaireSubmit,
+          renderMessageBlock
+        }) }, message.id))
+      ] }, turn.id)),
+      latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        ConversationTurn,
+        {
+          ref: latestTurnRef,
+          "data-testid": "chat-thread-latest-turn",
+          style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+          children: [
+            latestTurn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              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__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(ScrollToLatestOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      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__ */ (0, import_jsx_runtime10.jsx)(
-            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__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
-            message,
-            mode: activeSessionMode,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }) }, message.id)),
-          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+          scrollToLatestLabel,
+          pendingNewMessageCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollToLatestBadge, { "data-testid": "chat-thread-scroll-to-latest-count", children: pendingNewMessageCount }) : null
         ]
       }
-    ) : null,
-    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+    ) }) : null
   ] });
 };
 var EMPTY_MESSAGES = [];
@@ -3295,13 +3786,21 @@ var ChatThread = () => {
       streamingMessage,
       error,
       retryButtonLabel: labels.retryButton,
+      scrollToLatestLabel: labels.scrollToLatest,
       onRetry: handleRetry,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
-    }
+    },
+    activeSessionId ?? "chat-thread-empty"
   );
 };
+var ThreadViewport = import_styled9.default.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+`;
 var Container = import_styled9.default.div`
   display: flex;
   flex: 1;
@@ -3309,8 +3808,7 @@ var Container = import_styled9.default.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px;
-  margin-bottom: 24px;
+  padding: 24px 24px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -3362,6 +3860,48 @@ var RetryButton = import_styled9.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var ScrollToLatestOverlay = import_styled9.default.div`
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+`;
+var ScrollToLatestButton = import_styled9.default.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 = import_styled9.default.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
 var import_react15 = require("react");
@@ -4087,7 +4627,7 @@ var CloseGlyph = import_styled10.default.span`
 
 // src/components/chat-composer/components/chat-model-control.tsx
 var import_styled11 = __toESM(require("@emotion/styled"));
-var import_compass_ui = require("@xinghunm/compass-ui");
+var import_compass_ui2 = require("@xinghunm/compass-ui");
 var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 var ChatModelControl = ({
   selectedModel,
@@ -4188,7 +4728,7 @@ var ModelReloadButton = import_styled11.default.button`
 var ReloadIcon = import_styled11.default.svg`
   flex-shrink: 0;
 `;
-var ModelSelect = (0, import_styled11.default)(import_compass_ui.Select)`
+var ModelSelect = (0, import_styled11.default)(import_compass_ui2.Select)`
   && {
     width: auto;
     min-width: 0;
@@ -4209,7 +4749,7 @@ var ModelSelect = (0, import_styled11.default)(import_compass_ui.Select)`
 
 // src/components/chat-composer/components/chat-mode-control.tsx
 var import_styled12 = __toESM(require("@emotion/styled"));
-var import_compass_ui2 = require("@xinghunm/compass-ui");
+var import_compass_ui3 = require("@xinghunm/compass-ui");
 var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 var ChatModeControl = ({
   value,
@@ -4232,7 +4772,7 @@ var ChatModeControl = ({
     }
   );
 };
-var ModeSelect = (0, import_styled12.default)(import_compass_ui2.Select)`
+var ModeSelect = (0, import_styled12.default)(import_compass_ui3.Select)`
   && {
     flex: 0 1 auto;
     width: auto;
@@ -4254,7 +4794,7 @@ var ModeSelect = (0, import_styled12.default)(import_compass_ui2.Select)`
 
 // src/components/chat-composer/components/chat-send-actions.tsx
 var import_styled13 = __toESM(require("@emotion/styled"));
-var import_compass_ui3 = require("@xinghunm/compass-ui");
+var import_compass_ui4 = require("@xinghunm/compass-ui");
 var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
 var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
@@ -4308,7 +4848,7 @@ var ChatSendActions = ({
     onClick: () => void onSend()
   }
 ) });
-var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
+var PrimaryButton = (0, import_styled13.default)(import_compass_ui4.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -4334,7 +4874,7 @@ var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
     }
   }
 `;
-var StopButton = (0, import_styled13.default)(import_compass_ui3.Button)`
+var StopButton = (0, import_styled13.default)(import_compass_ui4.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -4907,7 +5447,7 @@ var ChatConversationList = () => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Container3, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title3, { children: "Sessions" }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -4936,7 +5476,7 @@ var Toolbar = import_styled16.default.div`
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = import_styled16.default.h2`
+var Title3 = import_styled16.default.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);
@@ -4961,7 +5501,7 @@ var List2 = import_styled16.default.div`
 // src/components/ai-chat/index.tsx
 var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  import_compass_ui4.ConfigProvider,
+  import_compass_ui5.ConfigProvider,
   {
     theme: {
       token: {