Function PromptInput

frontend/src/plugins/ai/react/PromptInput.tsx:39–150

({ disabled = false, onEnter }: Props)

 *     immediately type into a freshly-created conversation.
 */
export function PromptInput({ disabled = false, onEnter }: Props) {
  const { t } = useTranslation();
  const { pendingPreInput, setPendingPreInput, events } = useAIContext();

  const [value, setValue] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);

  // Focus on mount + on `new-conversation` so the user can start typing
  // immediately.
  useEffect(() => {
    textareaRef.current?.focus();
  }, []);
  useEffect(() => {
    const off = events.on("new-conversation", () => {
      textareaRef.current?.focus();
    });
    return () => {
      off();
    };
  }, [events]);

  // Consume `pendingPreInput`: when the provider sets it, copy into
  // local state and clear the trigger. rAF mirrors the Vue version's
  // `flush: "post"` watch — defers to the next paint so any conversation
  // creation that triggered the seed has landed first.
  useEffect(() => {
    if (!pendingPreInput) return;
    const raf = requestAnimationFrame(() => {
      setValue(pendingPreInput);
      setPendingPreInput(undefined);
    });
    return () => cancelAnimationFrame(raf);
  }, [pendingPreInput, setPendingPreInput]);

  // Autosize: after every value change, set height to scrollHeight,
  // clamped to [MIN_ROWS, MAX_ROWS] lines.
  useLayoutEffect(() => {
    const el = textareaRef.current;
    if (!el) return;
    el.style.height = "auto";
    const minHeight = MIN_ROWS * LINE_HEIGHT_PX;
    const maxHeight = MAX_ROWS * LINE_HEIGHT_PX;
    const next = Math.min(maxHeight, Math.max(minHeight, el.scrollHeight));
    el.style.height = `${next}px`;
  }, [value]);

  const applyValue = (raw: string) => {
    setValue("");
    onEnter(raw);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key !== "Enter") return;
    if (e.shiftKey) return; // Shift+Enter → newline
    e.preventDefault();
    if (!value.trim()) return;
    applyValue(value);
  };