@springbrand/message-panel 0.2.0-alpha.48 → 0.2.0-alpha.50

package/cloud-os/chat/rich-blocks.tsx

@@ -21,6 +21,7 @@ import {
   CollapsibleTrigger,
 } from "../primitives/collapsible";
 import { Tooltip } from "../primitives/tooltip";
+import { fileMeta, ImagePreview } from "../file-view";
 import { WorkshopButton } from "../primitives/workshop-controls";
 import { MarkdownMessage } from "./markdown-message";
 import { collapsePanel } from "./surfaces";
@@ -144,9 +145,8 @@ export function PlanBlock({
 interface AskQuestion {
   prompt: string;
   options: string[];
-  multi: boolean;
   allowCustom: boolean;
-  kind: "ordinary" | "attachment";
+  responseType: "text" | "single_select" | "multi_select" | "attachment";
 }
 
 function questionsOf(input: Record<string, unknown>): AskQuestion[] {
@@ -158,14 +158,25 @@ function questionsOf(input: Record<string, unknown>): AskQuestion[] {
         typeof option === "string"
       )
       : [];
+    const responseType = question.responseType === "text" ||
+        question.responseType === "single_select" ||
+        question.responseType === "multi_select" ||
+        question.responseType === "attachment"
+      ? question.responseType
+      : question.kind === "attachment"
+      ? "attachment"
+      : options.length === 0
+      ? "text"
+      : question.multiSelect === true
+      ? "multi_select"
+      : "single_select";
     return {
       prompt: typeof question.question === "string"
         ? question.question
         : "Choose an option",
       options,
-      multi: question.multiSelect === true,
-      allowCustom: question.allowCustom === true || options.length === 0,
-      kind: question.kind === "attachment" ? "attachment" : "ordinary",
+      allowCustom: responseType === "text" || question.allowCustom === true,
+      responseType,
     };
   });
 }
@@ -198,13 +209,6 @@ export interface AskUserBlockProps {
   attachmentField?: AskUserAttachmentController;
 }
 
-function formatAttachmentSize(size: number | undefined): string {
-  if (size === undefined) return "Ready";
-  if (size < 1_024) return `${size} B`;
-  if (size < 1_024 * 1_024) return `${Math.round(size / 1_024)} KB`;
-  return `${(size / 1_024 / 1_024).toFixed(1)} MB`;
-}
-
 function AttachmentImage({ src }: { src: string }) {
   const [failed, setFailed] = useState(false);
   useEffect(() => setFailed(false), [src]);
@@ -223,8 +227,6 @@ function AttachmentImage({ src }: { src: string }) {
 export function AskUserAttachmentField({
   attachments,
   disabled,
-  busy,
-  hasFailure,
   onFilesSelected,
   onRemove,
   onRetry,
@@ -271,7 +273,7 @@ export function AskUserAttachmentField({
                 addFiles(files);
               }
             }}
-            className="flex min-h-16 w-full items-center justify-center gap-2 rounded-xl border border-dashed border-kumo-line bg-kumo-elevated/50 px-4 py-3 text-[13px] text-kumo-subtle transition-colors hover:border-kumo-brand hover:bg-kumo-tint/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40 disabled:cursor-default disabled:opacity-60"
+            className="flex min-h-16 w-full items-center justify-center gap-2 rounded-xl border border-dashed border-kumo-line bg-kumo-elevated/50 px-4 py-3 text-[13px] text-kumo-subtle transition-colors hover:bg-kumo-tint/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40 disabled:cursor-default disabled:opacity-60"
           >
             <UploadSimple size={18} aria-hidden="true" />
             <span>Drop files here or choose files</span>
@@ -286,7 +288,7 @@ export function AskUserAttachmentField({
               ? `Uploading ${Math.round((attachment.progress ?? 0) * 100)}%`
               : attachment.status === "error"
                 ? "Could not upload this file. Try again."
-                : formatAttachmentSize(attachment.size);
+                : fileMeta({ size: attachment.size });
             const preview = (
               <span
                 className="grid size-10 shrink-0 place-items-center overflow-hidden rounded-lg bg-kumo-control text-kumo-inactive themed-thumbnail-shadow"
@@ -305,17 +307,27 @@ export function AskUserAttachmentField({
                 className="flex min-w-0 items-center gap-3 rounded-xl border border-kumo-line bg-kumo-elevated/55 p-2"
               >
                 {attachment.status === "ready" && attachment.previewUrl
-                  ? (
+                  ? image
+                    ? (
+                      <ImagePreview
+                        src={attachment.previewUrl}
+                        label={label}
+                        placement="assistant-message"
+                      >
+                        {preview}
+                      </ImagePreview>
+                    )
+                    : (
                     <a
                       href={attachment.previewUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      aria-label={`${image ? "Preview" : "Open"} ${label}`}
+                      aria-label={`Open ${label}`}
                       className="rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40"
                     >
                       {preview}
                     </a>
-                  )
+                    )
                   : preview}
                 <span className="flex min-w-0 flex-1 flex-col">
                   <span className="truncate text-[13px] font-medium text-kumo-default">
@@ -354,11 +366,6 @@ export function AskUserAttachmentField({
           })}
         </div>
       )}
-      {(busy || hasFailure) && attachments.length === 0 && (
-        <span role={hasFailure ? "alert" : "status"} className="text-[11px] text-kumo-inactive">
-          {hasFailure ? "Could not upload this file. Try again." : "Uploading"}
-        </span>
-      )}
     </div>
   );
 }
@@ -375,7 +382,7 @@ export function AskUserBlock({
   const [answers, setAnswers] = useState<DraftAnswer[]>([]);
   const answerAt = (index: number): DraftAnswer =>
     answers[index] ?? { selections: [], text: "" };
-  const toggle = (questionIndex: number, option: string, multi: boolean) =>
+  const toggle = (questionIndex: number, option: string) =>
     setAnswers((current) => {
       const next = questions.map((_, index) =>
         current[index] ?? { selections: [], text: "" }
@@ -383,11 +390,11 @@ export function AskUserBlock({
       const answer = next[questionIndex]!;
       next[questionIndex] = {
         ...answer,
-        selections: !multi
-          ? [option]
-          : answer.selections.includes(option)
+        selections: questions[questionIndex]?.responseType === "multi_select"
+          ? answer.selections.includes(option)
             ? answer.selections.filter((value) => value !== option)
-            : [...answer.selections, option],
+            : [...answer.selections, option]
+          : [option],
       };
       return next;
     });
@@ -405,7 +412,7 @@ export function AskUserBlock({
   const outcome = askUserOutcome(call);
   const responseTimerRef = useRef<number | null>(null);
   const hasAttachmentQuestion = questions.some(
-    (question) => question.kind === "attachment",
+    (question) => question.responseType === "attachment",
   );
   const clearResponseTimer = () => {
     if (responseTimerRef.current === null) return;
@@ -419,7 +426,7 @@ export function AskUserBlock({
   const displayAnswerAt = (index: number): DraftAnswer => {
     if (outcome.kind !== "answered") return answerAt(index);
     const answer = outcome.answers[index];
-    if (!answer || !("selections" in answer)) {
+    if (!answer) {
       return { selections: [], text: "" };
     }
     return {
@@ -430,14 +437,17 @@ export function AskUserBlock({
   // 服务端已经结算 = 这张卡永久不可操作，不管结算成什么。
   const resolved = outcome.kind !== "pending" || inFlight;
   const valid = questions.length > 0 && questions.every(
-    (question, index) => question.kind === "attachment"
+    (question, index) => question.responseType === "attachment"
       ? Boolean(
           attachmentField &&
           attachmentField.attachments.length > 0 &&
           !attachmentField.busy &&
           !attachmentField.hasFailure
         )
-      : answerAt(index).selections.length > 0 || Boolean(answerAt(index).text.trim()),
+      : question.responseType === "text"
+      ? Boolean(answerAt(index).text.trim())
+      : answerAt(index).selections.length > 0 ||
+        (question.allowCustom && Boolean(answerAt(index).text.trim())),
   );
   const buttonLabel = inFlight ? "Submitting…" : "Submit";
   const footnote = outcome.kind === "closed"
@@ -452,12 +462,17 @@ export function AskUserBlock({
     try {
       const response = {
         answers: questions.map((question, index) =>
-          question.kind === "attachment"
-            ? { attachments: [...(attachmentField?.getParts() ?? [])] }
-            : {
-                selections: answerAt(index).selections,
-                text: answerAt(index).text.trim(),
-              }
+          ({
+            selections: question.responseType === "attachment"
+              ? []
+              : answerAt(index).selections,
+            text: question.responseType === "attachment"
+              ? ""
+              : answerAt(index).text.trim(),
+            attachments: question.responseType === "attachment"
+              ? [...(attachmentField?.getParts() ?? [])]
+              : [],
+          })
         ),
       };
       setInFlight(true);
@@ -501,6 +516,8 @@ export function AskUserBlock({
           const options = outcome.kind === "answered"
             ? [...new Set([...question.options, ...answer.selections])]
             : question.options;
+          const choice = question.responseType === "single_select" ||
+            question.responseType === "multi_select";
           return (
             <div
               key={`${question.prompt}:${questionIndex}`}
@@ -509,10 +526,10 @@ export function AskUserBlock({
               <p className="m-0 text-[14px] leading-[1.4] font-normal text-kumo-default">
                 {question.prompt}
               </p>
-              {question.kind === "attachment" && (
+              {question.responseType === "attachment" && (
                 <AskUserAttachmentField
                   attachments={
-                    settledAttachmentAnswer && "attachments" in settledAttachmentAnswer
+                    settledAttachmentAnswer
                       ? settledAttachmentAnswer.attachments.map((attachment) => ({
                           id: attachment.attachmentId,
                           filename: attachment.name,
@@ -531,7 +548,7 @@ export function AskUserBlock({
                   onRetry={attachmentField?.onRetry ?? (() => undefined)}
                 />
               )}
-              {question.kind === "ordinary" && options.length > 0 && (
+              {choice && options.length > 0 && (
                 <div className="flex flex-wrap items-center gap-2">
                   {options.map((option) => {
                     const selected = answer.selections.includes(option);
@@ -541,8 +558,7 @@ export function AskUserBlock({
                         type="button"
                         aria-pressed={selected}
                         disabled={resolved || !onRespond}
-                        onClick={() =>
-                          toggle(questionIndex, option, question.multi)}
+                        onClick={() => toggle(questionIndex, option)}
                         style={selected
                           ? {
                               background:
@@ -563,7 +579,8 @@ export function AskUserBlock({
                   })}
                 </div>
               )}
-              {question.kind === "ordinary" && question.allowCustom && (
+              {(question.responseType === "text" ||
+                (choice && question.allowCustom)) && (
                 <label className="flex w-full flex-col gap-2 text-[14px] leading-[1.4] text-kumo-default">
                   <span>{question.options.length > 0 ? "Other" : "Answer"}</span>
                   <input
@@ -581,7 +598,8 @@ export function AskUserBlock({
                   />
                 </label>
               )}
-              {question.kind === "ordinary" && outcome.kind === "answered" &&
+              {question.responseType !== "attachment" &&
+                outcome.kind === "answered" &&
                 !question.allowCustom && answer.text.trim() && (
                 <p className="m-0 text-[14px] leading-[1.4] text-kumo-subtle">
                   {answer.text.trim()}

package/cloud-os/chat/tool-presentation.ts

@@ -503,25 +503,20 @@ export type AskUserOutcome =
   | { kind: "pending" }
   | {
       kind: "answered";
-      answers: Array<
-        | {
-            question: string;
-            selections: string[];
-            text: string;
-          }
-        | {
-            question: string;
-            attachments: Array<{
-              name: string;
-              mediaType: string;
-              size: number;
-              cdnUrl: string;
-              workspacePath: string;
-              attachmentId: string;
-              contentVersion: string;
-            }>;
-          }
-      >;
+      answers: Array<{
+        question: string;
+        selections: string[];
+        text: string;
+        attachments: Array<{
+          name: string;
+          mediaType: string;
+          size: number;
+          cdnUrl: string;
+          workspacePath: string;
+          attachmentId: string;
+          contentVersion: string;
+        }>;
+      }>;
     }
   | { kind: "closed"; reason: "user_replied_freeform" | "other" };
 
@@ -534,47 +529,52 @@ export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
     const answers = record.answers.map(recordOf);
     if (answers.every((answer) => {
       if (typeof answer.question !== "string") return false;
-      if (Array.isArray(answer.attachments)) {
-        return answer.attachments.length > 0 &&
-          answer.attachments.every((value) => {
-            const attachment = recordOf(value);
-            return typeof attachment.name === "string" &&
-              typeof attachment.mediaType === "string" &&
-              typeof attachment.size === "number" &&
-              typeof attachment.cdnUrl === "string" &&
-              typeof attachment.workspacePath === "string" &&
-              typeof attachment.attachmentId === "string" &&
-              typeof attachment.contentVersion === "string";
-          });
+      const selections = answer.selections;
+      const attachments = answer.attachments;
+      if (!Array.isArray(selections) && !Array.isArray(attachments)) return false;
+      if (
+        Array.isArray(selections) &&
+        !selections.every((value) => typeof value === "string")
+      ) return false;
+      if (answer.text !== undefined && typeof answer.text !== "string") return false;
+      if (Array.isArray(attachments)) {
+        if (!Array.isArray(selections) && attachments.length === 0) return false;
+        return attachments.every((value) => {
+          const attachment = recordOf(value);
+          return typeof attachment.name === "string" &&
+            typeof attachment.mediaType === "string" &&
+            typeof attachment.size === "number" &&
+            typeof attachment.cdnUrl === "string" &&
+            typeof attachment.workspacePath === "string" &&
+            typeof attachment.attachmentId === "string" &&
+            typeof attachment.contentVersion === "string";
+        });
       }
-      return Array.isArray(answer.selections) &&
-        answer.selections.every((value) => typeof value === "string") &&
-        (answer.text === undefined || typeof answer.text === "string");
+      return true;
     })) {
       return {
         kind: "answered",
         answers: answers.map((answer) => {
-          if (Array.isArray(answer.attachments)) {
-            return {
-              question: answer.question as string,
-              attachments: answer.attachments.map((value) => {
-                const attachment = recordOf(value);
-                return {
-                  name: attachment.name as string,
-                  mediaType: attachment.mediaType as string,
-                  size: attachment.size as number,
-                  cdnUrl: attachment.cdnUrl as string,
-                  workspacePath: attachment.workspacePath as string,
-                  attachmentId: attachment.attachmentId as string,
-                  contentVersion: attachment.contentVersion as string,
-                };
-              }),
-            };
-          }
           return {
             question: answer.question as string,
-            selections: answer.selections as string[],
+            selections: Array.isArray(answer.selections)
+              ? answer.selections as string[]
+              : [],
             text: typeof answer.text === "string" ? answer.text : "",
+            attachments: Array.isArray(answer.attachments)
+              ? answer.attachments.map((value) => {
+                  const attachment = recordOf(value);
+                  return {
+                    name: attachment.name as string,
+                    mediaType: attachment.mediaType as string,
+                    size: attachment.size as number,
+                    cdnUrl: attachment.cdnUrl as string,
+                    workspacePath: attachment.workspacePath as string,
+                    attachmentId: attachment.attachmentId as string,
+                    contentVersion: attachment.contentVersion as string,
+                  };
+                })
+              : [],
           };
         }),
       };

package/cloud-os/file-view.tsx

@@ -70,7 +70,7 @@ export interface FileViewProps {
 
 export type FileRenderer = ComponentType<FileViewProps>;
 
-function fileMeta(file: FileViewFile): string {
+export function fileMeta(file: FileViewFile): string {
   if (file.size === undefined) return "Ready";
   if (file.size < 1024) return `${file.size} B`;
   if (file.size < 1024 * 1024) return `${Math.round(file.size / 1024)} KB`;
@@ -270,7 +270,7 @@ function ProductFileView({
   );
 }
 
-function ImagePreview({
+export function ImagePreview({
   src,
   label,
   placement,

package/demo/chat-scenarios.ts

@@ -266,25 +266,26 @@ function actionUserMessage(prompt: string): UIMessage {
 }
 
 export interface DemoAskUserResponse {
-  answers: Array<{ selections: string[]; text?: string }>;
+  answers: Array<{ selections: string[]; text: string; attachments: [] }>;
 }
 
 export const demoAskUserResponse: DemoAskUserResponse = {
   answers: [
-    { selections: ["管理层"], text: "" },
-    { selections: ["报告"], text: "" },
+    { selections: ["管理层"], text: "", attachments: [] },
+    { selections: ["报告"], text: "", attachments: [] },
   ],
 };
 
 const askUserQuestions = [
   {
     question: "这份建议优先面向哪个读者？",
+    responseType: "single_select",
     options: ["产品团队", "管理层", "设计团队"],
   },
   {
     question: "需要哪些交付物？",
+    responseType: "multi_select",
     options: ["报告", "演示文稿", "执行清单"],
-    multiSelect: true,
     allowCustom: true,
   },
 ];
@@ -305,7 +306,8 @@ function askUserRequest(response?: DemoAskUserResponse): UIMessage {
                 answers: response.answers.map((answer, index) => ({
                   question: askUserQuestions[index]!.question,
                   selections: answer.selections,
-                  text: answer.text?.trim() ?? "",
+                  text: answer.text.trim(),
+                  attachments: answer.attachments,
                 })),
               },
             }

package/demo/fixtures.ts

@@ -167,12 +167,13 @@ export const allPartsMessage: DemoMessage = {
       questions: [
         {
           question: "报告通过什么渠道发送？",
+          responseType: "single_select",
           options: ["Email", "Slack", "Both"],
         },
         {
           question: "需要包含哪些内容？",
+          responseType: "multi_select",
           options: ["定价", "功能", "动态"],
-          multiSelect: true,
           allowCustom: true,
         },
       ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springbrand/message-panel",
-  "version": "0.2.0-alpha.48",
+  "version": "0.2.0-alpha.50",
   "type": "module",
   "files": [
     "src",

package/src/camel/camel-chat-messages.tsx

@@ -666,6 +666,20 @@ function CamelSchedule({
   );
 }
 
+function askUserResponseType(question: Record<string, unknown>) {
+  if (
+    question.responseType === "text" ||
+    question.responseType === "single_select" ||
+    question.responseType === "multi_select" ||
+    question.responseType === "attachment"
+  ) return question.responseType;
+  if (question.kind === "attachment") return "attachment";
+  if (!Array.isArray(question.options) || question.options.length === 0) {
+    return "text";
+  }
+  return question.multiSelect === true ? "multi_select" : "single_select";
+}
+
 function CamelAskUser({
   part,
   onAnswer,
@@ -689,9 +703,13 @@ function CamelAskUser({
   const answerAt = (index: number) =>
     answers[index] ?? { selections: [], text: "" };
   const resolvedSubmitted = settledAnswers.length > 0;
-  const valid = questions.length > 0 && questions.every((_, index) =>
-    answerAt(index).selections.length > 0 || answerAt(index).text.trim()
-  );
+  const valid = questions.length > 0 && questions.every((question, index) => {
+    const responseType = askUserResponseType(question);
+    if (responseType === "attachment") return false;
+    if (responseType === "text") return Boolean(answerAt(index).text.trim());
+    return answerAt(index).selections.length > 0 ||
+      (question.allowCustom === true && Boolean(answerAt(index).text.trim()));
+  });
 
   return (
     <section
@@ -701,14 +719,18 @@ function CamelAskUser({
     >
       {questions.map((question, questionIndex) => {
         const prompt = String(question.question ?? "Choose an option");
-        const attachmentQuestion = question.kind === "attachment";
+        const responseType = askUserResponseType(question);
+        const attachmentQuestion = responseType === "attachment";
+        const choiceQuestion = responseType === "single_select" ||
+          responseType === "multi_select";
         const options = Array.isArray(question.options)
           ? question.options.filter(
               (option): option is string => typeof option === "string",
             )
           : [];
-        const multi = question.multiSelect === true;
-        const allowCustom = question.allowCustom === true || options.length === 0;
+        const multi = responseType === "multi_select";
+        const allowCustom = responseType === "text" ||
+          (choiceQuestion && question.allowCustom === true);
         const settledAnswer = settledAnswers[questionIndex];
         const settledSelections = Array.isArray(settledAnswer?.selections)
           ? settledAnswer.selections.filter(
@@ -749,7 +771,7 @@ function CamelAskUser({
                 ))}
               </div>
             )}
-            {!attachmentQuestion && <div className="flex flex-wrap gap-2">
+            {choiceQuestion && <div className="flex flex-wrap gap-2">
               {options.map((option) => {
                 const selected = settledAnswer
                   ? settledSelections.includes(option)
@@ -821,13 +843,14 @@ function CamelAskUser({
         type="button"
         size="sm"
         disabled={resolvedSubmitted || !valid || questions.some((question) =>
-          question.kind === "attachment"
+          askUserResponseType(question) === "attachment"
         )}
         onClick={() => {
           onAnswer({
             answers: questions.map((_, index) => ({
               selections: answerAt(index).selections,
               text: answerAt(index).text.trim(),
+              attachments: [],
             })),
           });
         }}

package/src/parts/index.tsx

@@ -834,20 +834,37 @@ export function DashboardPart(data: DashboardData) {
 
 export interface AskQuestion {
   question: string;
+  responseType: "text" | "single_select" | "multi_select" | "attachment";
   options?: string[];
-  multiSelect?: boolean;
   allowCustom?: boolean;
 }
 
+function askQuestionResponseType(question: AskQuestion) {
+  if (question.responseType) return question.responseType;
+  const legacy = question as AskQuestion & {
+    kind?: string;
+    multiSelect?: boolean;
+  };
+  if (legacy.kind === "attachment") return "attachment";
+  if (!question.options?.length) return "text";
+  return legacy.multiSelect ? "multi_select" : "single_select";
+}
+
+interface AskAnswer {
+  selections: string[];
+  text: string;
+  attachments: unknown[];
+}
+
 export function AskUserPart({
   questions,
   submittedAnswers = [],
   onSubmit,
 }: {
   questions: readonly AskQuestion[];
-  submittedAnswers?: ReadonlyArray<{ selections: string[]; text?: string }>;
+  submittedAnswers?: ReadonlyArray<AskAnswer>;
   onSubmit?: (payload: {
-    answers: Array<{ selections: string[]; text: string }>;
+    answers: AskAnswer[];
   }) => void | Promise<void>;
 }) {
   const [answers, setAnswers] = useState<Array<{
@@ -859,8 +876,13 @@ export function AskUserPart({
   const [inFlight, setInFlight] = useState(false);
   const resolvedSubmitted = submittedAnswers.length > 0;
   const valid = questions.length > 0 && questions.every(
-    (_question, index) =>
-      answerAt(index).selections.length > 0 || answerAt(index).text.trim(),
+    (question, index) => {
+      const responseType = askQuestionResponseType(question);
+      if (responseType === "attachment") return false;
+      if (responseType === "text") return Boolean(answerAt(index).text.trim());
+      return answerAt(index).selections.length > 0 ||
+        (question.allowCustom === true && Boolean(answerAt(index).text.trim()));
+    },
   );
   const toggle = (questionIndex: number, option: string) => {
     if (resolvedSubmitted || inFlight || !onSubmit) return;
@@ -871,7 +893,8 @@ export function AskUserPart({
       const answer = next[questionIndex]!;
       next[questionIndex] = {
         ...answer,
-        selections: questions[questionIndex]!.multiSelect
+        selections: askQuestionResponseType(questions[questionIndex]!) ===
+            "multi_select"
           ? answer.selections.includes(option)
             ? answer.selections.filter((item) => item !== option)
             : [...answer.selections, option]
@@ -888,6 +911,7 @@ export function AskUserPart({
         answers: questions.map((_, index) => ({
           selections: answerAt(index).selections,
           text: answerAt(index).text.trim(),
+          attachments: [],
         })),
       });
     } catch {
@@ -900,63 +924,74 @@ export function AskUserPart({
       data-part-type="ask_user"
       data-state={resolvedSubmitted ? "submitted" : "pending"}
     >
-      {questions.map((question, questionIndex) => (
-        <fieldset
-          key={`${questionIndex}:${question.question}`}
-          disabled={resolvedSubmitted || inFlight || !onSubmit}
-        >
-          <legend>{question.question}</legend>
-          <div>
-            {(question.options ?? []).map((option) => {
-              const selected = submittedAnswers[questionIndex]
-                ? submittedAnswers[questionIndex]!.selections.includes(option)
-                : answerAt(questionIndex).selections.includes(option);
-              return (
-                <button
-                  key={option}
-                  type="button"
-                  aria-pressed={selected}
-                  onClick={() => toggle(questionIndex, option)}
-                >
-                  {question.multiSelect && <span>{selected && <CheckIcon size={12} />}</span>}
-                  {selected && !question.multiSelect && <CheckIcon size={14} />}
-                  {option}
-                </button>
-              );
-            })}
-          </div>
-          {!resolvedSubmitted &&
-            (question.allowCustom === true || !question.options?.length) && (
-              <textarea
-                value={answerAt(questionIndex).text}
-                maxLength={2_000}
-                aria-label={`Custom answer: ${question.question}`}
-                onChange={(event) =>
-                  setAnswers((current) => {
-                    const next = questions.map((_, index) =>
-                      current[index] ?? { selections: [], text: "" }
-                    );
-                    next[questionIndex] = {
-                      ...next[questionIndex]!,
-                      text: event.currentTarget.value,
-                    };
-                    return next;
-                  })}
-                placeholder={question.options?.length ? "Other" : "Type your answer"}
-              />
+      {questions.map((question, questionIndex) => {
+        const responseType = askQuestionResponseType(question);
+        const choice = responseType === "single_select" ||
+          responseType === "multi_select";
+        return (
+          <fieldset
+            key={`${questionIndex}:${question.question}`}
+            disabled={resolvedSubmitted || inFlight || !onSubmit}
+          >
+            <legend>{question.question}</legend>
+            <div>
+              {choice && (question.options ?? []).map((option) => {
+                const selected = submittedAnswers[questionIndex]
+                  ? submittedAnswers[questionIndex]!.selections.includes(option)
+                  : answerAt(questionIndex).selections.includes(option);
+                return (
+                  <button
+                    key={option}
+                    type="button"
+                    aria-pressed={selected}
+                    onClick={() => toggle(questionIndex, option)}
+                  >
+                    {responseType === "multi_select" &&
+                      <span>{selected && <CheckIcon size={12} />}</span>}
+                    {selected && responseType === "single_select" &&
+                      <CheckIcon size={14} />}
+                    {option}
+                  </button>
+                );
+              })}
+            </div>
+            {!resolvedSubmitted &&
+              (responseType === "text" || question.allowCustom === true) && (
+                <textarea
+                  value={answerAt(questionIndex).text}
+                  maxLength={2_000}
+                  aria-label={`Custom answer: ${question.question}`}
+                  onChange={(event) =>
+                    setAnswers((current) => {
+                      const next = questions.map((_, index) =>
+                        current[index] ?? { selections: [], text: "" }
+                      );
+                      next[questionIndex] = {
+                        ...next[questionIndex]!,
+                        text: event.currentTarget.value,
+                      };
+                      return next;
+                    })}
+                  placeholder={question.options?.length
+                    ? "Other"
+                    : "Type your answer"}
+                />
+              )}
+            {submittedAnswers[questionIndex] && (
+              <small>
+                {[
+                  ...submittedAnswers[questionIndex]!.selections,
+                  ...(submittedAnswers[questionIndex]!.text?.trim()
+                    ? [submittedAnswers[questionIndex]!.text!.trim()]
+                    : []),
+                ].join(" / ")}
+              </small>
             )}
-          {submittedAnswers[questionIndex] && (
-            <small>
-              {[
-                ...submittedAnswers[questionIndex]!.selections,
-                ...(submittedAnswers[questionIndex]!.text?.trim()
-                  ? [submittedAnswers[questionIndex]!.text!.trim()]
-                  : []),
-              ].join(" / ")}
-            </small>
-          )}
-        </fieldset>
-      ))}
+            {responseType === "attachment" && !resolvedSubmitted &&
+              <small>File upload is unavailable.</small>}
+          </fieldset>
+        );
+      })}
       {resolvedSubmitted ? (
         <div className="sb-ask-user__submitted">
           <CheckIcon size={15} />
@@ -1170,6 +1205,9 @@ export function DefaultPartRenderer({
           return {
             selections: strings(value.selections),
             text: typeof value.text === "string" ? value.text : "",
+            attachments: Array.isArray(value.attachments)
+              ? value.attachments
+              : [],
           };
         })
       : [];