agent-chat

1"use client";
2 
3import { useRef, useState } from "react";
4import { MessageList } from "./message-list";
5import { InputBar } from "./input-bar";
6import { Suggestions, type SuggestionItem } from "./input/suggestions";
7import { cn } from "./utils/cn";
8import type { AgentChatProps } from "./types";
9 
10export function AgentChat({
11  messages,
12  onSend,
13  status,
14  onStop,
15  error,
16  classNames,
17  slots,
18  toolRenderers,
19  attachments,
20  showCopyToolbar,
21  initialScrollBehavior,
22  enableImagePreview,
23  suggestions,
24  emptyStatePosition = "default",
25  emptySuggestionsPlacement = "input",
26  emptySuggestionsPosition = "top",
27  questionTool,
28  className,
29  style,
30}: AgentChatProps) {
31  const rootRef = useRef<HTMLDivElement>(null);
32  const [draft, setDraft] = useState("");
33 
34  const ResolvedInputBar = slots?.InputBar ?? InputBar;
35  const isEmpty = !error && messages.length === 0;
36  const isCenteredEmptyState = isEmpty && emptyStatePosition === "center";
37 
38  const pendingQuestion = findPendingQuestion(messages, questionTool);
39  const suggestionConfig = resolveSuggestions(suggestions);
40  const showInputSuggestions =
41    emptySuggestionsPlacement === "input" ||
42    emptySuggestionsPlacement === "both";
43  const showEmptySuggestions =
44    isCenteredEmptyState &&
45    (emptySuggestionsPlacement === "empty" ||
46      emptySuggestionsPlacement === "both") &&
47    suggestionConfig.items.length > 0;
48 
49  const handleEmptySuggestionSelect = (item: SuggestionItem) => {
50    setDraft(item.value ?? item.label);
51  };
52 
53  const emptySuggestionsNode = showEmptySuggestions ? (
54    <Suggestions
55      items={suggestionConfig.items}
56      onSelect={handleEmptySuggestionSelect}
57      disabled={status === "streaming" || status === "submitted"}
58      className={cn(
59        "w-full justify-center",
60        emptySuggestionsPosition === "top" ? "mb-3" : "mt-3",
61        suggestionConfig.className,
62      )}
63      itemClassName={cn("h-8 rounded-md px-3", suggestionConfig.itemClassName)}
64    />
65  ) : null;
66 
67  const inputBarNode = (
68    <ResolvedInputBar
69      onSend={onSend}
70      status={status}
71      onStop={onStop}
72      value={draft}
73      onChange={setDraft}
74      placeholder="Send a message..."
75      className={cn(classNames?.inputBar, isCenteredEmptyState && "px-0 pb-0")}
76      onAttach={attachments?.onAttach}
77      attachedImages={attachments?.images}
78      attachedFiles={attachments?.files}
79      onRemoveImage={attachments?.onRemoveImage}
80      onRemoveFile={attachments?.onRemoveFile}
81// … truncated