@springbrand/message-panel 0.1.3-alpha.2 → 0.1.3-alpha.22

package/src/parts/index.tsx

@@ -833,59 +833,67 @@ export function DashboardPart(data: DashboardData) {
 }
 
 export interface AskQuestion {
-  prompt: string;
-  kind: "single" | "multi";
-  options: string[];
+  question: string;
+  options?: string[];
+  multiSelect?: boolean;
+  allowCustom?: boolean;
 }
 
 export function AskUserPart({
   questions,
-  freeTextPlaceholder,
-  submittedAnswer,
+  submittedAnswers = [],
   onSubmit,
 }: {
   questions: readonly AskQuestion[];
-  freeTextPlaceholder?: string;
-  submittedAnswer?: string;
-  onSubmit?: (payload: { selections: string[][]; text: string }) => void | Promise<void>;
+  submittedAnswers?: ReadonlyArray<{ selections: string[]; text?: string }>;
+  onSubmit?: (payload: {
+    answers: Array<{ selections: string[]; text: string }>;
+  }) => void | Promise<void>;
 }) {
-  const [selections, setSelections] = useState<string[][]>(() => questions.map(() => []));
-  const [text, setText] = useState("");
-  const [submitted, setSubmitted] = useState(false);
-  const externalAnswer = submittedAnswer?.trim() ?? "";
-  const externalSelections = useMemo(
-    () =>
-      new Set(
-        externalAnswer
-          ? externalAnswer.split("、").map((item) => item.trim()).filter(Boolean)
-          : [],
-      ),
-    [externalAnswer],
-  );
-  const resolvedSubmitted = submitted || Boolean(externalAnswer);
-  const valid = questions.every(
-    (question, index) => question.kind !== "single" || selections[index].length === 1,
+  const [answers, setAnswers] = useState<Array<{
+    selections: string[];
+    text: string;
+  }>>([]);
+  const answerAt = (index: number) =>
+    answers[index] ?? { selections: [], text: "" };
+  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(),
   );
   const toggle = (questionIndex: number, option: string) => {
-    if (resolvedSubmitted) return;
-    setSelections((current) =>
-      current.map((selected, index) => {
-        if (index !== questionIndex) return selected;
-        if (questions[index].kind === "single") return [option];
-        return selected.includes(option)
-          ? selected.filter((item) => item !== option)
-          : [...selected, option];
-      }),
-    );
+    if (resolvedSubmitted || inFlight || !onSubmit) return;
+    setAnswers((current) => {
+      const next = questions.map((_, index) =>
+        current[index] ?? { selections: [], text: "" }
+      );
+      const answer = next[questionIndex]!;
+      next[questionIndex] = {
+        ...answer,
+        selections: questions[questionIndex]!.multiSelect
+          ? answer.selections.includes(option)
+            ? answer.selections.filter((item) => item !== option)
+            : [...answer.selections, option]
+          : [option],
+      };
+      return next;
+    });
   };
   const submit = async () => {
-    if (!valid || resolvedSubmitted) return;
-    await onSubmit?.({ selections, text: text.trim() });
-    setSubmitted(true);
+    if (!valid || resolvedSubmitted || !onSubmit) return;
+    setInFlight(true);
+    try {
+      await onSubmit({
+        answers: questions.map((_, index) => ({
+          selections: answerAt(index).selections,
+          text: answerAt(index).text.trim(),
+        })),
+      });
+    } catch {
+      setInFlight(false);
+    }
   };
-  const resolvedAnswer =
-    externalAnswer ||
-    [...selections.flat(), text.trim()].filter(Boolean).join("、");
   return (
     <section
       className="sb-ask-user"
@@ -894,15 +902,15 @@ export function AskUserPart({
     >
       {questions.map((question, questionIndex) => (
         <fieldset
-          key={`${questionIndex}:${question.prompt}`}
-          disabled={resolvedSubmitted}
+          key={`${questionIndex}:${question.question}`}
+          disabled={resolvedSubmitted || inFlight || !onSubmit}
         >
-          <legend>{question.prompt}</legend>
+          <legend>{question.question}</legend>
           <div>
-            {question.options.map((option) => {
-              const selected = externalAnswer
-                ? externalSelections.has(option)
-                : selections[questionIndex].includes(option);
+            {(question.options ?? []).map((option) => {
+              const selected = submittedAnswers[questionIndex]
+                ? submittedAnswers[questionIndex]!.selections.includes(option)
+                : answerAt(questionIndex).selections.includes(option);
               return (
                 <button
                   key={option}
@@ -910,27 +918,53 @@ export function AskUserPart({
                   aria-pressed={selected}
                   onClick={() => toggle(questionIndex, option)}
                 >
-                  {question.kind === "multi" && <span>{selected && <CheckIcon size={12} />}</span>}
-                  {selected && question.kind === "single" && <CheckIcon size={14} />}
+                  {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"}
+              />
+            )}
+          {submittedAnswers[questionIndex] && (
+            <small>
+              {[
+                ...submittedAnswers[questionIndex]!.selections,
+                ...(submittedAnswers[questionIndex]!.text?.trim()
+                  ? [submittedAnswers[questionIndex]!.text!.trim()]
+                  : []),
+              ].join(" / ")}
+            </small>
+          )}
         </fieldset>
       ))}
-      {freeTextPlaceholder && !resolvedSubmitted && (
-        <textarea value={text} onChange={(event) => setText(event.currentTarget.value)} placeholder={freeTextPlaceholder} />
-      )}
       {resolvedSubmitted ? (
         <div className="sb-ask-user__submitted">
           <CheckIcon size={15} />
           <span>Submitted</span>
-          {resolvedAnswer && <small>{resolvedAnswer}</small>}
         </div>
       ) : (
-        <button type="button" className="sb-button" disabled={!valid} onClick={() => void submit()}>
-          提交<ArrowRightIcon size={15} />
+        <button type="button" className="sb-button" disabled={!valid || inFlight || !onSubmit} onClick={() => void submit()}>
+          {inFlight ? "Submitting…" : "提交"}<ArrowRightIcon size={15} />
         </button>
       )}
     </section>
@@ -1128,17 +1162,22 @@ export function DefaultPartRenderer({
   if (kind === "ask_user") {
     const questions: AskQuestion[] = Array.isArray(data.questions)
       ? data.questions as AskQuestion[]
-      : [{
-          prompt: String(data.question ?? "请选择"),
-          kind: data.multiSelect === true ? "multi" : "single",
-          options: strings(data.options),
-        }];
+      : [];
+    const output = objectOf(record.output);
+    const submittedAnswers = Array.isArray(output.answers)
+      ? output.answers.map((answer) => {
+          const value = objectOf(answer);
+          return {
+            selections: strings(value.selections),
+            text: typeof value.text === "string" ? value.text : "",
+          };
+        })
+      : [];
     return withToolApproval(
       <AskUserPart
         questions={questions}
-        freeTextPlaceholder={typeof data.freeTextPlaceholder === "string" ? data.freeTextPlaceholder : undefined}
-        submittedAnswer={context.replyText}
-        onSubmit={(payload) => context.actions.onAnswer?.(payload)}
+        submittedAnswers={submittedAnswers}
+        onSubmit={context.actions.onAnswer}
       />,
     );
   }

package/src/styles/index.css

@@ -2128,7 +2128,10 @@
   min-height: 120px;
   gap: 0;
   border-radius: 16px;
-  background: #1c1c1a;
+  /* 这里曾写死 #1c1c1a,于是 light 档下输入框还是近黑的。
+     表面色一律走 token:--mp-card → --card(light #fff / dark #1c1c1c)。
+     本节其余几个写死色是状态/图标强调色(琥珀、蓝),两档背景上都读得出来,不在此列。 */
+  background: var(--mp-card);
   box-shadow: none;
 }