PromptInput

Auto-resizing textarea with send button and keyboard shortcut hints. Submits on Enter, newline on Shift+Enter.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

PromptInputAuto-resizing textarea with send button and keyboard shortcut hints. Submits on Enter, newline on Shift+Enter.

"use client";
import { useState, useRef, useEffect } from "react";

type PromptInputProps = {
  placeholder?: string;
  onSubmit?: (value: string) => void;
  maxRows?: number;
};

export function PromptInput({
  placeholder = "Message...",
  onSubmit,
  maxRows = 6,
}: PromptInputProps) {
  const [value, setValue] = useState("");
  const ref = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.style.height = "auto";
    el.style.height = Math.min(el.scrollHeight, 20 * maxRows) + "px";
  }, [value, maxRows]);

  function submit() {
    if (!value.trim()) return;
    onSubmit?.(value);
    setValue("");
  }

  return (
    <div className="pk-input">
      <textarea
        ref={ref}
        className="pk-input-ta"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            submit();
          }
        }}
        placeholder={placeholder}
        rows={1}
      />
      <div className="pk-input-bar">
        <span className="pk-input-hint">⇧↵ newline</span>
        <button
          className="pk-input-send"
          onClick={submit}
          disabled={!value.trim()}
        >
          ↑
        </button>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`placeholder`	`string`	`"Message..."`	Textarea placeholder text
`onSubmit`	`(value: string) => void`	—	Called when the user submits a message
`maxRows`	`number`	`6`	Maximum rows before scrolling