chore: import upstream snapshot with attribution

examples/with-opencode/components/tools/opencode-question-card.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+  type OpenCodeQuestionRequest,
+  type QuestionAnswer,
+  useOpenCodeRuntimeExtras,
+} from "@assistant-ui/react-opencode";
+import {
+  AlertCircleIcon,
+  CheckCircle2Icon,
+  CircleHelpIcon,
+  LoaderIcon,
+  XCircleIcon,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+type PendingQuestionState = {
+  selectedLabels: string[];
+  customAnswer: string;
+};
+
+const buildEmptyQuestionState = (
+  request: OpenCodeQuestionRequest,
+): PendingQuestionState[] =>
+  request.questions.map(() => ({
+    selectedLabels: [],
+    customAnswer: "",
+  }));
+
+const encodeQuestionAnswers = (
+  request: OpenCodeQuestionRequest,
+  formState: PendingQuestionState[],
+): QuestionAnswer[] =>
+  request.questions.map((question, index) => {
+    const current = formState[index];
+    if (!current) return [];
+
+    const answers = [...current.selectedLabels];
+    const customValue = current.customAnswer.trim();
+    const customAllowed = question.custom !== false;
+
+    if (customAllowed && customValue) {
+      answers.push(`Other: ${customValue}`);
+    }
+
+    return answers;
+  });
+
+export const getQuestionSummary = (request?: OpenCodeQuestionRequest) => {
+  if (!request || request.questions.length === 0) return "Waiting for input";
+  if (request.questions.length === 1) {
+    return request.questions[0]?.header || "1 question";
+  }
+  return `${request.questions.length} questions`;
+};
+
+export const OpenCodeQuestionCard = ({
+  request,
+  state,
+  answers,
+}: {
+  request: OpenCodeQuestionRequest;
+  state: "pending" | "answered" | "rejected";
+  answers?: readonly QuestionAnswer[];
+}) => {
+  const { replyToQuestion, rejectQuestion } = useOpenCodeRuntimeExtras();
+  const [formState, setFormState] = useState(() =>
+    buildEmptyQuestionState(request),
+  );
+  const [submissionState, setSubmissionState] = useState<
+    "reply" | "reject" | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+  const isPending = state === "pending";
+
+  const encodedAnswers = useMemo(
+    () => encodeQuestionAnswers(request, formState),
+    [formState, request],
+  );
+
+  const canSubmit =
+    isPending && encodedAnswers.every((answer) => answer.length > 0);
+
+  const updateQuestionState = (
+    index: number,
+    updater: (current: PendingQuestionState) => PendingQuestionState,
+  ) => {
+    setFormState((current) =>
+      current.map((item, itemIndex) =>
+        itemIndex === index ? updater(item) : item,
+      ),
+    );
+  };
+
+  const submitAnswers = async () => {
+    if (!canSubmit) return;
+    setSubmissionState("reply");
+    setError(null);
+
+    try {
+      await replyToQuestion(request.id, encodedAnswers);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to submit answers.",
+      );
+      setSubmissionState(null);
+    }
+  };
+
+  const rejectRequest = async () => {
+    setSubmissionState("reject");
+    setError(null);
+
+    try {
+      await rejectQuestion(request.id);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to reject request.",
+      );
+      setSubmissionState(null);
+    }
+  };
+
+  return (
+    <Card className="gap-4 py-4">
+      <CardHeader className="px-4">
+        <div className="flex items-start gap-3">
+          <div
+            className={cn(
+              "rounded-md p-2",
+              isPending
+                ? "bg-sky-500/10 text-sky-700"
+                : state === "rejected"
+                  ? "bg-muted text-muted-foreground"
+                  : "bg-emerald-500/10 text-emerald-700",
+            )}
+          >
+            {isPending ? (
+              <CircleHelpIcon className="size-4" />
+            ) : state === "rejected" ? (
+              <XCircleIcon className="size-4" />
+            ) : (
+              <CheckCircle2Icon className="size-4" />
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <CardTitle className="text-sm">
+              {isPending
+                ? "Answer required"
+                : state === "rejected"
+                  ? "Question dismissed"
+                  : "Answers submitted"}
+            </CardTitle>
+            <CardDescription className="mt-1 text-xs">
+              {getQuestionSummary(request)}
+            </CardDescription>
+          </div>
+          <Badge variant={isPending ? "secondary" : "outline"}>
+            {request.questions.length === 1
+              ? "1 prompt"
+              : `${request.questions.length} prompts`}
+          </Badge>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 px-4">
+        {request.questions.map((question, index) => {
+          const current = formState[index] ?? {
+            selectedLabels: [],
+            customAnswer: "",
+          };
+          const answeredValues = answers?.[index] ?? [];
+          const customAllowed = question.custom !== false;
+
+          return (
+            <section key={`${request.id}-${index}`} className="space-y-3">
+              <div className="space-y-1">
+                <p className="text-sm font-medium">{question.header}</p>
+                <p className="text-muted-foreground text-xs">
+                  {question.question}
+                </p>
+              </div>
+
+              {isPending ? (
+                <>
+                  {question.options.length > 0 ? (
+                    question.multiple ? (
+                      <div className="space-y-2">
+                        {question.options.map((option) => {
+                          const checked = current.selectedLabels.includes(
+                            option.label,
+                          );
+                          const optionId = `${request.id}-${index}-${option.label}`;
+
+                          return (
+                            <div
+                              key={option.label}
+                              className="flex items-start gap-3 rounded-lg border p-3 text-sm"
+                            >
+                              <Checkbox
+                                id={optionId}
+                                checked={checked}
+                                onCheckedChange={(nextChecked) => {
+                                  updateQuestionState(index, (item) => ({
+                                    ...item,
+                                    selectedLabels:
+                                      nextChecked === true
+                                        ? [...item.selectedLabels, option.label]
+                                        : item.selectedLabels.filter(
+                                            (label) => label !== option.label,
+                                          ),
+                                  }));
+                                }}
+                              />
+                              <div className="space-y-1">
+                                <Label
+                                  htmlFor={optionId}
+                                  className="text-sm font-medium"
+                                >
+                                  {option.label}
+                                </Label>
+                                <p className="text-muted-foreground text-xs">
+                                  {option.description}
+                                </p>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="flex flex-wrap gap-2">
+                        {question.options.map((option) => {
+                          const selected = current.selectedLabels.includes(
+                            option.label,
+                          );
+
+                          return (
+                            <Button
+                              key={option.label}
+                              type="button"
+                              size="sm"
+                              variant={selected ? "default" : "outline"}
+                              onClick={() => {
+                                updateQuestionState(index, (item) => ({
+                                  ...item,
+                                  selectedLabels: [option.label],
+                                  customAnswer: "",
+                                }));
+                              }}
+                            >
+                              {option.label}
+                            </Button>
+                          );
+                        })}
+                      </div>
+                    )
+                  ) : null}
+
+                  {customAllowed ? (
+                    <div className="space-y-2">
+                      <Label htmlFor={`${request.id}-${index}-custom`}>
+                        Other
+                      </Label>
+                      <Textarea
+                        id={`${request.id}-${index}-custom`}
+                        value={current.customAnswer}
+                        onChange={(event) => {
+                          const nextValue = event.target.value;
+                          updateQuestionState(index, (item) => ({
+                            ...item,
+                            customAnswer: nextValue,
+                            selectedLabels:
+                              question.multiple || nextValue.trim().length === 0
+                                ? item.selectedLabels
+                                : [],
+                          }));
+                        }}
+                        placeholder="Add your answer"
+                        rows={3}
+                      />
+                    </div>
+                  ) : null}
+                </>
+              ) : state === "rejected" ? (
+                <p className="text-muted-foreground text-xs">
+                  No answer was submitted.
+                </p>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {answeredValues.map((answer) => (
+                    <Badge key={answer} variant="outline">
+                      {answer}
+                    </Badge>
+                  ))}
+                </div>
+              )}
+            </section>
+          );
+        })}
+      </CardContent>
+
+      {isPending ? (
+        <CardFooter className="flex flex-wrap gap-2 px-4">
+          <Button
+            size="sm"
+            onClick={submitAnswers}
+            disabled={!canSubmit || submissionState !== null}
+          >
+            {submissionState === "reply" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Submit answers
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={rejectRequest}
+            disabled={submissionState !== null}
+          >
+            {submissionState === "reject" && (
+              <LoaderIcon className="size-4 animate-spin" />
+            )}
+            Dismiss
+          </Button>
+          {error ? (
+            <div className="text-destructive flex w-full items-center gap-2 text-xs">
+              <AlertCircleIcon className="size-3.5" />
+              <span>{error}</span>
+            </div>
+          ) : null}
+        </CardFooter>
+      ) : null}
+    </Card>
+  );
+};