First-run state

FirstRunState.tsxThe four lines are props, so the screen cannot ship without them. An example fills the input rather than sending it.Copy

import { useRef, useState } from "react";
import { ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

type Props = {
  /** One line on what the assistant can see. Scope is the thing a viewer
   *  cannot guess, and the reason to use this over a chatbot. */
  scope: string;
  /** Two or three. More than that is a menu, and a menu is a thing to read. */
  examples: string[];
  /** Stated up front. It reads as an apology and prevents the failure that
   *  actually loses people. */
  limitation: string;
  /** What happens to what gets typed. Asked at the moment of first input,
   *  not on a settings page. */
  dataNotice: string;
  onSend: (text: string) => void;
};

export function FirstRunState({ scope, examples, limitation, dataNotice, onSend }: Props) {
  const [draft, setDraft] = useState("");
  const ref = useRef<HTMLTextAreaElement>(null);

  const send = () => {
    const text = draft.trim();
    if (!text) return;
    onSend(text);
    setDraft("");
  };

  // An example fills the input rather than sending. A newcomer is here to
  // learn what a question looks like, and a question they can edit teaches
  // that better than one that fires on click.
  const useExample = (text: string) => {
    setDraft(text);
    ref.current?.focus();
  };

  return (
    <div className="rounded-lg border bg-card p-5 text-center">
      <p className="text-base text-card-foreground">Ask about anything in this workspace</p>
      <p className="mt-1.5 text-xs text-muted-foreground">{scope}</p>

      <div className="mt-4 flex flex-wrap justify-center gap-2">
        {examples.map((e) => (
          <Button key={e} variant="outline" size="sm" className="rounded-full" onClick={() => useExample(e)}>
            {e}
          </Button>
        ))}
      </div>

      {/* The input is the centre. Everything else on this screen has to be
          quieter than it, so a veteran can skip the whole composition. */}
      <div className="mx-auto mt-5 flex w-[464px] max-w-full items-end gap-2 rounded-lg border bg-background p-2">
        <Textarea
          ref={ref}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); send(); }
          }}
          rows={1}
          placeholder="Ask a question"
          aria-label="Ask a question"
          className="min-h-0 resize-none border-0 px-2 py-1.5 text-left shadow-none focus-visible:ring-0"
        />
        <Button size="sm" onClick={send} disabled={!draft.trim()}>
          <ArrowUp className="size-4" /> send
        </Button>
      </div>

      <p className="mt-5 text-xs text-status-warn">{limitation}</p>
      <p className="mt-2.5 text-xs text-muted-foreground">{dataNotice}</p>
    </div>
  );
}

demo.tsxHow it is called: the four lines as props. Send shows what went.Copy

import { useState } from "react";
import { FirstRunState } from "./FirstRunState";

/** The four lines a first run has to state, as props. Send echoes what was sent. */
export default function Demo() {
  const [sent, setSent] = useState<string | null>(null);
  return (
    <div>
      <FirstRunState
        scope="it can read pages you have access to, not the whole company"
        examples={["summarise a page", "find a decision we made", "draft from these notes"]}
        limitation="It gets dates and figures wrong. Check anything you act on."
        dataNotice="Conversations are kept in this workspace and visible to admins."
        onSend={setSent}
      />
      {sent && <p className="mt-3 text-xs text-muted-foreground">sent: “{sent}”</p>}
    </div>
  );
}