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

package/cloud-os/chat/cloud-os-chat-messages.tsx

@@ -32,6 +32,7 @@ import {
 import {
   ApprovalBlock,
   AskUserBlock,
+  type AskUserBlockProps,
   ErrorBlock,
   ParallelBlock,
   PlanBlock,
@@ -96,6 +97,8 @@ export interface CloudOsChatMessagesProps {
     input: Record<string, unknown>;
     disabled: boolean;
   }) => ReactNode;
+  /** Lets the Host add its upload lifecycle while retaining AskUserBlock presentation. */
+  renderAskUser?: (props: AskUserBlockProps) => ReactNode;
   /** 接管消息里的文件视图；未提供时使用包内 FileView。 */
   renderFile?: FileRenderer;
   /** 把消息里的 `sandbox:/workspace/...` 之类地址翻译成可访问 URL。 */
@@ -382,6 +385,7 @@ export function CloudOsChatMessages({
   approvalIdOf,
   approvalsDisabled = false,
   renderApproval,
+  renderAskUser,
   renderFile,
   resolveUrl,
   resolveArtifactId,
@@ -822,11 +826,17 @@ export function CloudOsChatMessages({
                         );
                       case "askUser":
                         return (
-                          <AskUserBlock
-                            key={block.key}
-                            call={block.call}
-                            onRespond={onRespond}
-                          />
+                          <Fragment key={block.key}>
+                            {renderAskUser?.({
+                              call: block.call,
+                              onRespond,
+                            }) ?? (
+                              <AskUserBlock
+                                call={block.call}
+                                onRespond={onRespond}
+                              />
+                            )}
+                          </Fragment>
                         );
                       case "suggestions":
                         return null;

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

@@ -7,10 +7,14 @@ import {
   Clock,
   Key,
   ListChecks,
+  File as FileIcon,
+  Image as ImageIcon,
+  UploadSimple,
   UsersThree,
   WarningCircle,
 } from "@phosphor-icons/react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { FileUIPart } from "ai";
 import {
   Collapsible,
   CollapsibleContent,
@@ -30,6 +34,7 @@ import type {
   PlanStep,
   SubAgentView,
 } from "./transcript-model";
+import type { CloudOsAttachmentView } from "../composer/cloud-os-chat-input";
 import {
   askUserOutcome,
   humanizeToolName,
@@ -141,6 +146,7 @@ interface AskQuestion {
   options: string[];
   multi: boolean;
   allowCustom: boolean;
+  kind: "ordinary" | "attachment";
 }
 
 function questionsOf(input: Record<string, unknown>): AskQuestion[] {
@@ -159,6 +165,7 @@ function questionsOf(input: Record<string, unknown>): AskQuestion[] {
       options,
       multi: question.multiSelect === true,
       allowCustom: question.allowCustom === true || options.length === 0,
+      kind: question.kind === "attachment" ? "attachment" : "ordinary",
     };
   });
 }
@@ -168,14 +175,199 @@ interface DraftAnswer {
   text: string;
 }
 
+export interface AskUserAttachmentFieldProps {
+  attachments: readonly CloudOsAttachmentView[];
+  disabled: boolean;
+  busy: boolean;
+  hasFailure: boolean;
+  onFilesSelected: (files: readonly File[]) => void;
+  onRemove: (id: string) => void;
+  onRetry: (id: string) => void;
+}
+
+export interface AskUserAttachmentController
+  extends Omit<AskUserAttachmentFieldProps, "disabled"> {
+  getParts: () => readonly FileUIPart[];
+}
+
+export interface AskUserBlockProps {
+  call: CloudOsToolCall;
+  /** 缺省（宿主没接）时选项不可点。 */
+  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
+  /** Host-owned upload lifecycle for the single Attachment question. */
+  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]);
+  return failed
+    ? <ImageIcon size={18} aria-hidden="true" />
+    : (
+      <img
+        src={src}
+        alt=""
+        className="size-10 object-cover"
+        onError={() => setFailed(true)}
+      />
+    );
+}
+
+export function AskUserAttachmentField({
+  attachments,
+  disabled,
+  busy,
+  hasFailure,
+  onFilesSelected,
+  onRemove,
+  onRetry,
+}: AskUserAttachmentFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const addFiles = (files: FileList | readonly File[]) => {
+    if (!disabled && files.length > 0) onFilesSelected(Array.from(files));
+  };
+
+  return (
+    <div className="flex w-full flex-col gap-2.5">
+      <>
+          <input
+            ref={inputRef}
+            type="file"
+            multiple
+            disabled={disabled}
+            className="sr-only"
+            aria-label="Choose files"
+            onChange={(event) => {
+              if (event.currentTarget.files) addFiles(event.currentTarget.files);
+              event.currentTarget.value = "";
+            }}
+          />
+          <button
+            type="button"
+            aria-label="Choose files"
+            disabled={disabled}
+            onClick={() => inputRef.current?.click()}
+            onDragOver={(event) => {
+              event.preventDefault();
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              addFiles(event.dataTransfer.files);
+            }}
+            onPaste={(event) => {
+              const files = Array.from(event.clipboardData.items)
+                .filter((item) => item.kind === "file")
+                .map((item) => item.getAsFile())
+                .filter((file): file is File => file !== null);
+              if (files.length > 0) {
+                event.preventDefault();
+                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"
+          >
+            <UploadSimple size={18} aria-hidden="true" />
+            <span>Drop files here or choose files</span>
+          </button>
+      </>
+      {attachments.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {attachments.map((attachment) => {
+            const image = attachment.mediaType?.startsWith("image/") === true;
+            const label = attachment.filename ?? "Attachment";
+            const status = attachment.status === "uploading"
+              ? `Uploading ${Math.round((attachment.progress ?? 0) * 100)}%`
+              : attachment.status === "error"
+                ? "Could not upload this file. Try again."
+                : formatAttachmentSize(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"
+                data-attachment-kind={image ? "image" : "file"}
+              >
+                {image && attachment.previewUrl
+                  ? <AttachmentImage src={attachment.previewUrl} />
+                  : image
+                    ? <ImageIcon size={18} aria-hidden="true" />
+                    : <FileIcon size={18} aria-hidden="true" />}
+              </span>
+            );
+            return (
+              <div
+                key={attachment.id}
+                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
+                  ? (
+                    <a
+                      href={attachment.previewUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={`${image ? "Preview" : "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">
+                    {label}
+                  </span>
+                  <span
+                    className={attachment.status === "error"
+                      ? "text-[11px] text-kumo-danger"
+                      : "text-[11px] text-kumo-inactive"}
+                    role={attachment.status === "error" ? "alert" : "status"}
+                  >
+                    {status}
+                  </span>
+                </span>
+                {attachment.status === "error" && (
+                  <button
+                    type="button"
+                    disabled={disabled}
+                    onClick={() => onRetry(attachment.id)}
+                    className="rounded-lg px-2 py-1 text-[12px] text-kumo-danger hover:bg-kumo-tint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40 disabled:opacity-50"
+                  >
+                    Retry
+                  </button>
+                )}
+                <button
+                  type="button"
+                  disabled={disabled}
+                  aria-label={`Remove ${label}`}
+                  onClick={() => onRemove(attachment.id)}
+                  className="rounded-lg px-2 py-1 text-[12px] text-kumo-inactive hover:bg-kumo-tint hover:text-kumo-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kumo-brand/40 disabled:opacity-50"
+                >
+                  Remove
+                </button>
+              </div>
+            );
+          })}
+        </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>
+  );
+}
+
 export function AskUserBlock({
   call,
   onRespond,
-}: {
-  call: CloudOsToolCall;
-  /** 缺省（宿主没接）时选项不可点 —— 形状对齐 ScheduleBlock 的 onOpen。 */
-  onRespond?: (toolCallId: string, response: unknown) => Promise<boolean>;
-}) {
+  attachmentField,
+}: AskUserBlockProps) {
   const questions = questionsOf(call.input);
   // 不能用 `useState(() => questions.map(...))` 初始化:工具入参是**流式**到达的,
   // 首帧 questions 往往还是空数组,那之后每次 setAnswers 都在空数组上 map,
@@ -209,10 +401,27 @@ export function AskUserBlock({
     });
   // 在途只用于按钮转圈；权威状态永远是 part 的 state。
   const [inFlight, setInFlight] = useState(false);
+  const [submissionError, setSubmissionError] = useState(false);
   const outcome = askUserOutcome(call);
+  const responseTimerRef = useRef<number | null>(null);
+  const hasAttachmentQuestion = questions.some(
+    (question) => question.kind === "attachment",
+  );
+  const clearResponseTimer = () => {
+    if (responseTimerRef.current === null) return;
+    window.clearTimeout(responseTimerRef.current);
+    responseTimerRef.current = null;
+  };
+  useEffect(() => () => clearResponseTimer(), []);
+  useEffect(() => {
+    if (outcome.kind !== "pending") clearResponseTimer();
+  }, [outcome.kind]);
   const displayAnswerAt = (index: number): DraftAnswer => {
     if (outcome.kind !== "answered") return answerAt(index);
     const answer = outcome.answers[index];
+    if (!answer || !("selections" in answer)) {
+      return { selections: [], text: "" };
+    }
     return {
       selections: answer?.selections ?? [],
       text: answer?.text ?? "",
@@ -221,8 +430,14 @@ export function AskUserBlock({
   // 服务端已经结算 = 这张卡永久不可操作，不管结算成什么。
   const resolved = outcome.kind !== "pending" || inFlight;
   const valid = questions.length > 0 && questions.every(
-    (_question, index) =>
-      answerAt(index).selections.length > 0 || answerAt(index).text.trim(),
+    (question, index) => question.kind === "attachment"
+      ? Boolean(
+          attachmentField &&
+          attachmentField.attachments.length > 0 &&
+          !attachmentField.busy &&
+          !attachmentField.hasFailure
+        )
+      : answerAt(index).selections.length > 0 || Boolean(answerAt(index).text.trim()),
   );
   const buttonLabel = inFlight ? "Submitting…" : "Submit";
   const footnote = outcome.kind === "closed"
@@ -233,16 +448,42 @@ export function AskUserBlock({
 
   const submit = () => {
     if (!onRespond) return;
-    setInFlight(true);
-    // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
-    void onRespond(call.toolCallId, {
-      answers: questions.map((_, index) => ({
-        selections: answerAt(index).selections,
-        text: answerAt(index).text.trim(),
-      })),
-    }).then((ok) => {
-      if (!ok) setInFlight(false);
-    }, () => setInFlight(false));
+    setSubmissionError(false);
+    try {
+      const response = {
+        answers: questions.map((question, index) =>
+          question.kind === "attachment"
+            ? { attachments: [...(attachmentField?.getParts() ?? [])] }
+            : {
+                selections: answerAt(index).selections,
+                text: answerAt(index).text.trim(),
+              }
+        ),
+      };
+      setInFlight(true);
+      clearResponseTimer();
+      responseTimerRef.current = window.setTimeout(() => {
+        responseTimerRef.current = null;
+        setInFlight(false);
+        setSubmissionError(hasAttachmentQuestion);
+      }, 30_000);
+      // 失败就把按钮放回可点：权威状态由 part 决定，这里只管别把用户锁死。
+      void onRespond(call.toolCallId, response).then((ok) => {
+        if (!ok) {
+          clearResponseTimer();
+          setInFlight(false);
+          setSubmissionError(hasAttachmentQuestion);
+        }
+      }, () => {
+        clearResponseTimer();
+        setInFlight(false);
+        setSubmissionError(hasAttachmentQuestion);
+      });
+    } catch {
+      clearResponseTimer();
+      setInFlight(false);
+      setSubmissionError(hasAttachmentQuestion);
+    }
   };
 
   return (
@@ -254,6 +495,9 @@ export function AskUserBlock({
       <div className="flex flex-col gap-4 py-2.5">
         {outcome.kind !== "closed" && questions.map((question, questionIndex) => {
           const answer = displayAnswerAt(questionIndex);
+          const settledAttachmentAnswer = outcome.kind === "answered"
+            ? outcome.answers[questionIndex]
+            : undefined;
           const options = outcome.kind === "answered"
             ? [...new Set([...question.options, ...answer.selections])]
             : question.options;
@@ -265,7 +509,29 @@ export function AskUserBlock({
               <p className="m-0 text-[14px] leading-[1.4] font-normal text-kumo-default">
                 {question.prompt}
               </p>
-              {options.length > 0 && (
+              {question.kind === "attachment" && (
+                <AskUserAttachmentField
+                  attachments={
+                    settledAttachmentAnswer && "attachments" in settledAttachmentAnswer
+                      ? settledAttachmentAnswer.attachments.map((attachment) => ({
+                          id: attachment.attachmentId,
+                          filename: attachment.name,
+                          mediaType: attachment.mediaType,
+                          size: attachment.size,
+                          previewUrl: attachment.cdnUrl,
+                          status: "ready" as const,
+                        }))
+                      : attachmentField?.attachments ?? []
+                  }
+                  disabled={resolved || !onRespond || !attachmentField}
+                  busy={attachmentField?.busy ?? false}
+                  hasFailure={attachmentField?.hasFailure ?? false}
+                  onFilesSelected={attachmentField?.onFilesSelected ?? (() => undefined)}
+                  onRemove={attachmentField?.onRemove ?? (() => undefined)}
+                  onRetry={attachmentField?.onRetry ?? (() => undefined)}
+                />
+              )}
+              {question.kind === "ordinary" && options.length > 0 && (
                 <div className="flex flex-wrap items-center gap-2">
                   {options.map((option) => {
                     const selected = answer.selections.includes(option);
@@ -297,7 +563,7 @@ export function AskUserBlock({
                   })}
                 </div>
               )}
-              {question.allowCustom && (
+              {question.kind === "ordinary" && 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
@@ -315,7 +581,7 @@ export function AskUserBlock({
                   />
                 </label>
               )}
-              {outcome.kind === "answered" &&
+              {question.kind === "ordinary" && outcome.kind === "answered" &&
                 !question.allowCustom && answer.text.trim() && (
                 <p className="m-0 text-[14px] leading-[1.4] text-kumo-subtle">
                   {answer.text.trim()}
@@ -325,6 +591,7 @@ export function AskUserBlock({
           );
         })}
         {outcome.kind === "pending" && (
+          <>
           <button
             type="button"
             disabled={resolved || !onRespond || !valid}
@@ -333,6 +600,12 @@ export function AskUserBlock({
           >
             {buttonLabel}
           </button>
+          {submissionError && (
+            <p className="m-0 text-[12px] leading-4 text-kumo-danger" role="alert">
+              Could not add these files to the Workspace. Try submitting again.
+            </p>
+          )}
+          </>
         )}
         {outcome.kind === "answered" && (
           <p className="m-0 text-[12px] leading-4 text-kumo-inactive">Submitted</p>

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

@@ -503,11 +503,25 @@ export type AskUserOutcome =
   | { kind: "pending" }
   | {
       kind: "answered";
-      answers: Array<{
-        question: string;
-        selections: string[];
-        text: string;
-      }>;
+      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;
+            }>;
+          }
+      >;
     }
   | { kind: "closed"; reason: "user_replied_freeform" | "other" };
 
@@ -518,19 +532,51 @@ export function askUserOutcome(call: CloudOsToolCall): AskUserOutcome {
   const record = recordOf(call.output);
   if (Array.isArray(record.answers) && record.answers.length > 0) {
     const answers = record.answers.map(recordOf);
-    if (answers.every((answer) =>
-      typeof answer.question === "string" &&
-      Array.isArray(answer.selections) &&
-      answer.selections.every((value) => typeof value === "string") &&
-      (answer.text === undefined || typeof answer.text === "string")
-    )) {
+    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";
+          });
+      }
+      return Array.isArray(answer.selections) &&
+        answer.selections.every((value) => typeof value === "string") &&
+        (answer.text === undefined || typeof answer.text === "string");
+    })) {
       return {
         kind: "answered",
-        answers: answers.map((answer) => ({
-          question: answer.question as string,
-          selections: answer.selections as string[],
-          text: typeof answer.text === "string" ? answer.text : "",
-        })),
+        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[],
+            text: typeof answer.text === "string" ? answer.text : "",
+          };
+        }),
       };
     }
   }

package/cloud-os/index.ts

@@ -84,6 +84,7 @@ export type {
 export {
   ApprovalBlock,
   AskUserBlock,
+  AskUserAttachmentField,
   ErrorBlock,
   ParallelBlock,
   PlanBlock,
@@ -94,6 +95,11 @@ export {
   SuggestionsBlock,
 } from "./chat/rich-blocks";
 export type { ApprovalDecision } from "./chat/rich-blocks";
+export type {
+  AskUserAttachmentController,
+  AskUserAttachmentFieldProps,
+  AskUserBlockProps,
+} from "./chat/rich-blocks";
 
 export { CloudOsActivityIndicator } from "./chat/activity-indicator";
 
@@ -126,6 +132,7 @@ export {
   humanizeToolName,
   toCloudOsToolCall,
   toolNameOfPart,
+  askUserOutcome,
 } from "./chat/tool-presentation";
 export type {
   CloudOsToolCall,

package/package.json

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

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

@@ -701,6 +701,7 @@ function CamelAskUser({
     >
       {questions.map((question, questionIndex) => {
         const prompt = String(question.question ?? "Choose an option");
+        const attachmentQuestion = question.kind === "attachment";
         const options = Array.isArray(question.options)
           ? question.options.filter(
               (option): option is string => typeof option === "string",
@@ -714,10 +715,41 @@ function CamelAskUser({
               (value): value is string => typeof value === "string",
             )
           : [];
+        const settledAttachments = Array.isArray(settledAnswer?.attachments)
+          ? settledAnswer.attachments.map(recordOf).filter((attachment) =>
+              typeof attachment.name === "string" &&
+              typeof attachment.cdnUrl === "string"
+            )
+          : [];
         return (
           <div className="space-y-2" key={`${prompt}:${questionIndex}`}>
             <p className="text-sm text-foreground">{prompt}</p>
-            <div className="flex flex-wrap gap-2">
+            {attachmentQuestion && settledAttachments.length === 0 && (
+              <p className="text-xs text-muted-foreground">
+                File upload is unavailable in this preview.
+              </p>
+            )}
+            {attachmentQuestion && settledAttachments.length > 0 && (
+              <div className="flex flex-col gap-2">
+                {settledAttachments.map((attachment) => (
+                  <a
+                    key={String(attachment.attachmentId ?? attachment.cdnUrl)}
+                    href={attachment.cdnUrl as string}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-lg border border-border px-3 py-2 text-sm text-foreground"
+                    data-attachment-kind={
+                      String(attachment.mediaType ?? "").startsWith("image/")
+                        ? "image"
+                        : "file"
+                    }
+                  >
+                    {attachment.name as string}
+                  </a>
+                ))}
+              </div>
+            )}
+            {!attachmentQuestion && <div className="flex flex-wrap gap-2">
               {options.map((option) => {
                 const selected = settledAnswer
                   ? settledSelections.includes(option)
@@ -751,8 +783,8 @@ function CamelAskUser({
                   </Button>
                 );
               })}
-            </div>
-            {!resolvedSubmitted && allowCustom && (
+            </div>}
+            {!attachmentQuestion && !resolvedSubmitted && allowCustom && (
               <input
                 value={answerAt(questionIndex).text}
                 maxLength={2_000}
@@ -772,7 +804,7 @@ function CamelAskUser({
                 className="h-8 w-full rounded-md border border-input bg-background px-3 text-sm outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
               />
             )}
-            {settledAnswer && (
+            {!attachmentQuestion && settledAnswer && (
               <p className="text-xs text-muted-foreground">
                 Answered: {[
                   ...settledSelections,
@@ -788,7 +820,9 @@ function CamelAskUser({
       <Button
         type="button"
         size="sm"
-        disabled={resolvedSubmitted || !valid}
+        disabled={resolvedSubmitted || !valid || questions.some((question) =>
+          question.kind === "attachment"
+        )}
         onClick={() => {
           onAnswer({
             answers: questions.map((_, index) => ({