@springbrand/message-panel 0.1.3-alpha.3 → 0.1.3-alpha.31

package/src/message-panel.tsx

@@ -93,7 +93,6 @@ interface MessageRowProps<T> {
   slots: MessagePanelSlots;
   status: MessagePanelProps<T>["status"];
   latestActivityByKind: ReadonlyMap<string, string>;
-  replyText?: string;
 }
 
 function MessageRow<T>({
@@ -107,7 +106,6 @@ function MessageRow<T>({
   slots,
   status,
   latestActivityByKind,
-  replyText,
 }: MessageRowProps<T>) {
   const role = roleOf(adapter, message);
   const parts = adapter.getParts(message);
@@ -186,7 +184,6 @@ function MessageRow<T>({
                 isLatestOfKind:
                   key === undefined ||
                   latestActivityByKind.get(key) === activityId,
-                replyText,
                 approval: adapter.getToolApproval?.(part),
                 status,
                 actions,
@@ -255,25 +252,6 @@ function MessagePanelInner<T>(
     });
     return latest;
   }, [adapter, ids, messages]);
-  const replyTextByMessageId = useMemo(() => {
-    const replies = new Map<string, string>();
-    messages.forEach((message, messageIndex) => {
-      if (roleOf(adapter, message) !== "assistant") return;
-      for (
-        let replyIndex = messageIndex + 1;
-        replyIndex < messages.length;
-        replyIndex += 1
-      ) {
-        const reply = messages[replyIndex];
-        if (roleOf(adapter, reply) !== "user") continue;
-        const text = messageText(adapter, reply).trim();
-        if (text) replies.set(ids[messageIndex], text);
-        break;
-      }
-    });
-    return replies;
-  }, [adapter, ids, messages]);
-
   return (
     <div
       ref={ref}
@@ -299,7 +277,7 @@ function MessagePanelInner<T>(
           ? slots.error(error)
           : slots.error ?? (
               <PanelStatus kind="error">
-                {error instanceof Error ? error.message : "这一轮出错了，请重试。"}
+                {error instanceof Error ? error.message : "This turn failed. Please try again."}
               </PanelStatus>
             ))}
       <Conversation>
@@ -332,7 +310,6 @@ function MessagePanelInner<T>(
               slots={slots}
               status={status}
               latestActivityByKind={latestActivityByKind}
-              replyText={replyTextByMessageId.get(ids[index])}
             />
           ))}
           {showPending && (

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>
@@ -1081,7 +1115,7 @@ export function DefaultPartRenderer({
     );
   }
   if (kind === "error") {
-    return <ErrorPart title={String(data.title ?? "Error")} body={String(data.body ?? data.message ?? "请求失败")} />;
+    return <ErrorPart title={String(data.title ?? "Error")} body={String(data.body ?? data.message ?? "Request failed")} />;
   }
   if (kind === "image") {
     return <ImagePart src={String(record.src ?? record.url ?? data.src ?? data.url ?? "")} alt={String(record.alt ?? record.filename ?? data.alt ?? data.filename ?? "图片")} onPreview={() => context.actions.onPreview?.(part)} />;
@@ -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}
       />,
     );
   }