Function Thread

docs/src/components/DocsAssistant/Thread.tsx:20–161

({
  messages,
  streaming,
  error,
  composerRef,
  pendingDraft,
  onPendingDraftConsumed,
  onSend,
  onStop,
  onRetry,
  onFeedback,
}: Props)

}

export function Thread({
  messages,
  streaming,
  error,
  composerRef,
  pendingDraft,
  onPendingDraftConsumed,
  onSend,
  onStop,
  onRetry,
  onFeedback,
}: Props) {
  const [draft, setDraft] = useState('');

  useEffect(() => {
    if (pendingDraft) {
      setDraft(pendingDraft);
      onPendingDraftConsumed?.();
      setTimeout(() => composerRef.current?.focus(), 100);
    }
  }, [pendingDraft]);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [messages, streaming]);

  const submit = () => {
    const text = draft.trim();
    if (!text || streaming) return;
    onSend(text);
    setDraft('');
  };

  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      submit();
    }
  };

  const lastAssistantId = [...messages].reverse().find((m) => m.role === 'assistant')?.id;
  const empty = messages.length === 0;

  return (
    <div className="da-thread">
      <div className="da-scroll" ref={scrollRef}>
        {empty ? (
          <div className="da-welcome">
            <div className="da-welcome-hero">
              <div className="da-welcome-text">
                <h3>{WELCOME.headline}</h3>
                <p>{WELCOME.sub}</p>
              </div>
              <IllustrationWelcome className="da-welcome-illustration" />
            </div>