@blade-hq/agent-react 2610.0.0-beta.13 → 2610.0.0-beta.15

package/dist/index.js

@@ -1103,7 +1103,7 @@ function ConnectionBanner({ connection, className }) {
 
 // src/components/MessageList.tsx
 import { isHiddenInternalMessage } from "@blade-hq/agent-client";
-import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef8, useState as useState12 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useRef as useRef9, useState as useState12 } from "react";
 
 // ../../node_modules/.pnpm/use-stick-to-bottom@1.1.3_react@19.2.4/node_modules/use-stick-to-bottom/dist/useStickToBottom.js
 import { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
@@ -1816,8 +1816,37 @@ function Shimmer({ children = "\u6B63\u5728\u601D\u8003...", className }) {
 import { useState as useState9 } from "react";
 
 // src/components/AskUserQuestionBlock.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var CUSTOM_TEXTAREA_MAX_HEIGHT = 160;
+function resizeCustomTextarea(textarea) {
+  textarea.style.height = "auto";
+  textarea.style.height = `${Math.min(textarea.scrollHeight, CUSTOM_TEXTAREA_MAX_HEIGHT)}px`;
+  textarea.style.overflowY = textarea.scrollHeight > CUSTOM_TEXTAREA_MAX_HEIGHT ? "auto" : "hidden";
+}
+function useAutoResizeTextarea(value) {
+  const textareaRef = useRef7(null);
+  useEffect6(() => {
+    const textarea = textareaRef.current;
+    if (textarea?.value === value) resizeCustomTextarea(textarea);
+  }, [value]);
+  useEffect6(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || typeof ResizeObserver === "undefined") return;
+    let previousWidth = textarea.clientWidth;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry || entry.contentRect.width === previousWidth) return;
+      previousWidth = entry.contentRect.width;
+      resizeCustomTextarea(textarea);
+    });
+    observer.observe(textarea);
+    return () => observer.disconnect();
+  }, []);
+  return textareaRef;
+}
+function indentAnswerContinuationLines(answer) {
+  return answer.replaceAll("\n", "\n  ");
+}
 function AskUserQuestionBlock({
   data,
   answered,
@@ -1914,7 +1943,9 @@ function AskUserQuestionBlock({
         Array.from(usingCustom).map((qIdx) => [qIdx, (customTexts.get(qIdx) ?? "").trim()]).filter(([, text2]) => text2.length > 0)
       )
     };
-    const parts = data.questions.map((q, i) => `- ${q.question} -> ${getAnswer(i)}`);
+    const parts = data.questions.map(
+      (q, i) => `- ${q.question} -> ${indentAnswerContinuationLines(getAnswer(i) ?? "")}`
+    );
     const text = `\u5173\u4E8E\u9700\u8981\u786E\u8BA4\u7684\u95EE\u9898\uFF0C\u7528\u6237\u7684\u56DE\u7B54\u5982\u4E0B\uFF1A
 ${parts.join("\n")}`;
     setSubmitted(true);
@@ -1986,6 +2017,7 @@ function QuestionCard({
   onCustomChange
 }) {
   const multi = question.multiSelect ?? false;
+  const customTextareaRef = useAutoResizeTextarea(customText);
   return /* @__PURE__ */ jsxs7("div", { children: [
     /* @__PURE__ */ jsxs7("div", { className: cn("flex items-start gap-2", answered ? "mb-2" : "mb-3"), children: [
       /* @__PURE__ */ jsx9(
@@ -2062,25 +2094,26 @@ function QuestionCard({
         "div",
         {
           className: cn(
-            "flex items-center gap-2 rounded-lg border transition-all",
+            "flex items-start gap-2 rounded-lg border transition-all focus-within:ring-2 focus-within:ring-[hsl(var(--ring)/0.35)]",
             answered ? "px-2.5 py-1.5" : "px-3 py-2.5",
             isCustom ? "border-[hsl(var(--ring)/0.6)] bg-[hsl(var(--accent))]" : "border-[hsl(var(--border))] hover:border-[hsl(var(--ring)/0.3)] hover:bg-[hsl(var(--accent))]",
             answered && "cursor-default opacity-70"
           ),
           children: [
-            /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: "\u5176\u4ED6\uFF1A" }),
+            /* @__PURE__ */ jsx9("span", { className: "shrink-0 pt-1 text-xs text-[hsl(var(--muted-foreground))]", children: "\u5176\u4ED6\uFF1A" }),
             /* @__PURE__ */ jsx9(
-              "input",
+              "textarea",
               {
-                type: "text",
+                ref: customTextareaRef,
+                rows: 2,
                 value: customText,
-                disabled: answered,
+                readOnly: answered,
                 onChange: (e) => onCustomChange(qIdx, e.target.value),
                 onFocus: () => onCustomFocus(qIdx),
                 "aria-label": "\u81EA\u5B9A\u4E49\u56DE\u7B54",
                 placeholder: "\u8F93\u5165\u4F60\u7684\u7B54\u6848...",
                 className: cn(
-                  "min-w-0 flex-1 bg-transparent text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground)/0.5)]",
+                  "min-h-10 min-w-0 flex-1 resize-none bg-transparent leading-5 text-[hsl(var(--foreground))] outline-none placeholder:text-[hsl(var(--muted-foreground)/0.5)]",
                   answered ? "text-xs" : "text-sm"
                 )
               }
@@ -2411,7 +2444,7 @@ var RenderErrorBoundary = class extends Component {
 };
 
 // src/components/PostChatFollowupBlock.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef8, useState as useState11 } from "react";
 import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function emitInteraction(callback, event) {
   try {
@@ -2542,8 +2575,8 @@ function ResultFeedback({
   const [reason, setReason] = useState11(savedFeedback?.reason ?? null);
   const [saving, setSaving] = useState11(false);
   const [saveError, setSaveError] = useState11(false);
-  const reportedShown = useRef7(false);
-  const latestChoice = useRef7(null);
+  const reportedShown = useRef8(false);
+  const latestChoice = useRef8(null);
   const eligible = followup.feedback_eligible === true && Boolean(sessionId) && !isViewer;
   useEffect7(() => {
     if (!eligible || reportedShown.current) return;
@@ -2667,10 +2700,10 @@ function PostChatFollowupBlock({
   onFeedbackSaved
 }) {
   const [expanded, setExpanded] = useState11(false);
-  const adopted = useRef7(/* @__PURE__ */ new Set());
-  const reportedSuggestions = useRef7(false);
-  const reportedArtifacts = useRef7(/* @__PURE__ */ new Set());
-  const openedArtifacts = useRef7(/* @__PURE__ */ new Set());
+  const adopted = useRef8(/* @__PURE__ */ new Set());
+  const reportedSuggestions = useRef8(false);
+  const reportedArtifacts = useRef8(/* @__PURE__ */ new Set());
+  const openedArtifacts = useRef8(/* @__PURE__ */ new Set());
   const artifacts = followup.final_artifacts ?? [];
   const visibleArtifacts = expanded ? artifacts : artifacts.slice(0, 3);
   useEffect7(() => {
@@ -3047,7 +3080,7 @@ function MessageList({
 }
 function AutoScrollOnUserSend({ userMessageCount }) {
   const { scrollToBottom } = useStickToBottomContext();
-  const previousCountRef = useRef8(userMessageCount);
+  const previousCountRef = useRef9(userMessageCount);
   useEffect8(() => {
     if (userMessageCount > previousCountRef.current) {
       scrollToBottom("instant");
@@ -3059,7 +3092,7 @@ function AutoScrollOnUserSend({ userMessageCount }) {
 function ScrollToBottomButton() {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
   const [visible, setVisible] = useState12(false);
-  const hideTimerRef = useRef8(null);
+  const hideTimerRef = useRef9(null);
   useEffect8(() => {
     if (isAtBottom) {
       if (!hideTimerRef.current) {