@xinghunm/ai-chat 1.0.2 → 1.1.0

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");
@@ -89,7 +89,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 +1537,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 +1662,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 +1681,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 +1751,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 +1974,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 +2132,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 +2204,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 +2213,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 +2231,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 +2260,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 +2311,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 +2338,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 +2677,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 +2831,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 +3093,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 +3132,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 +3156,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;
@@ -4087,7 +4458,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 +4559,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 +4580,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 +4603,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 +4625,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 +4679,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 +4705,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 +5278,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 +5307,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 +5332,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: {