@brainpilot/web 0.0.4 → 0.0.6

package/src/components/chat/AutoRetryIndicator.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useState } from "react";
+import { RotateCw, X } from "lucide-react";
+import type { AutoRetryView } from "../../contracts/backend";
+import { autoRetryCountdownSeconds } from "../../contexts/newUiEvents";
+import { useT } from "../../i18n/useT";
+
+interface AutoRetryIndicatorProps {
+  view: AutoRetryView;
+  /** Abort the pending retry (wired to the interrupt / abort path). */
+  onCancel: () => void;
+}
+
+/**
+ * 修正6 — auto-retry countdown + cancel. Surfaces a Pi `auto_retry_start`
+ * (attempt/maxAttempts/delayMs) as a countdown indicator with a Cancel button
+ * that calls the interrupt/abort path.
+ */
+export function AutoRetryIndicator({ view, onCancel }: AutoRetryIndicatorProps) {
+  const t = useT();
+  const cancelled = view.cancelled === true;
+
+  const initialSec = useMemo(() => autoRetryCountdownSeconds(view), [view]);
+  const [secondsLeft, setSecondsLeft] = useState(initialSec);
+
+  useEffect(() => {
+    if (cancelled || initialSec <= 0) return;
+    setSecondsLeft(initialSec);
+    const id = window.setInterval(() => {
+      setSecondsLeft((prev) => {
+        if (prev <= 1) {
+          window.clearInterval(id);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [cancelled, initialSec]);
+
+  return (
+    <div
+      className={`auto-retry${cancelled ? " auto-retry--cancelled" : ""}`}
+      role="status"
+      data-testid="auto-retry"
+    >
+      <RotateCw size={14} className="auto-retry__icon" aria-hidden="true" />
+      <div className="auto-retry__body">
+        <span className="auto-retry__title">{t("chat.retry.title")}</span>
+        <span className="auto-retry__attempt">
+          {t("chat.retry.attempt", { attempt: view.attempt, max: view.maxAttempts })}
+        </span>
+        {cancelled ? (
+          <span className="auto-retry__status">{t("chat.retry.cancelled")}</span>
+        ) : secondsLeft > 0 ? (
+          <span className="auto-retry__countdown">{t("chat.retry.countdown", { sec: secondsLeft })}</span>
+        ) : null}
+      </div>
+      {!cancelled ? (
+        <button
+          type="button"
+          className="auto-retry__cancel"
+          onClick={onCancel}
+          aria-label={t("chat.retry.cancel")}
+        >
+          <X size={13} aria-hidden="true" />
+          {t("chat.retry.cancel")}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/chat/ComposerInput.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from "react";
+import type { KeyboardEvent } from "react";
+import { useDraft } from "../../contexts/draftStore";
+
+interface ComposerInputProps {
+  /** Active session id; drafts are isolated per session. null disables editing. */
+  sessionId: string | null;
+  placeholder: string;
+  /** Aria label for the textarea (sr-only label uses the same text). */
+  ariaLabel: string;
+}
+
+/**
+ * Isolated textarea bound to draftStore[sessionId].
+ *
+ * Splitting this out of PromptComposer is the whole point of the input-lag
+ * fix: keystrokes used to re-render the whole chat subtree because draft state
+ * lived on SessionContext. Now keystrokes only re-render this component (and
+ * its sibling ComposerSendButton, which also subscribes to the same store).
+ *
+ * Form submission is owned by the enclosing <form> in PromptComposer; this
+ * component just handles Enter-to-submit by walking up to the form.
+ */
+export function ComposerInput({ sessionId, placeholder, ariaLabel }: ComposerInputProps) {
+  const [draft, setDraft] = useDraft(sessionId);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  // Grow textarea to fit content. Reading scrollHeight forces a layout — fine
+  // here because only this component re-renders on draft change.
+  const autoResize = () => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+
+  // Resize on draft change (covers store-driven updates: slash menu /
+  // suggestions / switching sessions) and initial mount with a pre-existing
+  // draft (e.g. user typed, switched tabs, switched back).
+  useEffect(() => {
+    autoResize();
+  }, [draft]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    // Shift+Enter inserts a newline; bare Enter submits. Skip while IME is
+    // composing so CJK candidate selection doesn't fire submit.
+    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  };
+
+  return (
+    <>
+      <label className="sr-only" htmlFor="prompt-input">
+        {ariaLabel}
+      </label>
+      <textarea
+        ref={textareaRef}
+        id="prompt-input"
+        rows={1}
+        value={draft}
+        onChange={(event) => {
+          setDraft(event.target.value);
+          autoResize();
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+      />
+    </>
+  );
+}

package/src/components/chat/ComposerSendButton.tsx

@@ -0,0 +1,26 @@
+import { ArrowUp } from "lucide-react";
+import { useDraft } from "../../contexts/draftStore";
+import { IconButton } from "../primitives/IconButton";
+
+interface ComposerSendButtonProps {
+  sessionId: string | null;
+  canSend: boolean;
+  label: string;
+}
+
+/**
+ * Send button that subscribes only to draftStore[sessionId] to compute its
+ * disabled state. Sibling of ComposerInput; lives inside the same <form> in
+ * PromptComposer, so click triggers normal form submission.
+ *
+ * Subscribing here (rather than passing isEmpty down from PromptComposer)
+ * keeps the parent off the keystroke render path entirely.
+ */
+export function ComposerSendButton({ sessionId, canSend, label }: ComposerSendButtonProps) {
+  const [draft] = useDraft(sessionId);
+  return (
+    <IconButton disabled={!canSend || !draft.trim()} label={label} type="submit" variant="strong">
+      <ArrowUp size={18} />
+    </IconButton>
+  );
+}

package/src/components/chat/MarkdownMessage.tsx

@@ -0,0 +1,24 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+
+interface MarkdownMessageProps {
+  content: string;
+}
+
+function MarkdownMessageImpl({ content }: MarkdownMessageProps) {
+  return (
+    <div className="message-card__content">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+// Memoized so re-renders driven by unrelated parent state (e.g. a sibling
+// component changing) don't re-parse markdown for every visible message —
+// `content` is a string so default shallow-equal compare is precise.
+export const MarkdownMessage = memo(MarkdownMessageImpl);
+