chat-input-demo-mentions

1"use client";
2 
3import { FileIcon } from "lucide-react";
4import { useEffect, useState } from "react";
5import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
6import { Badge } from "@/components/ui/badge";
7import { highlightCode } from "@/lib/highlight-code";
8import {
9	ChatInput,
10	ChatInputEditor,
11	ChatInputGroupAddon,
12	ChatInputMention,
13	ChatInputMentionButton,
14	ChatInputSubmitButton,
15	createMentionConfig,
16	useChatInput,
17} from "@/registry/ui/chat-input";
18 
19type MemberItem = {
20	id: string;
21	name: string;
22	image?: string;
23	type: string;
24};
25 
26type FileItem = {
27	id: string;
28	name: string;
29};
30 
31const members: MemberItem[] = [
32	{ id: "1", name: "Alice", image: "/avatar-1.png", type: "agent" },
33	{ id: "2", name: "Bob", type: "user" },
34	{ id: "3", name: "Charlie", image: "/avatar-2.png", type: "bot" },
35	{ id: "4", name: "Dave", type: "user" },
36];
37 
38const files: FileItem[] = [
39	{ id: "f1", name: "report.pdf" },
40	{ id: "f2", name: "image.png" },
41	{ id: "f3", name: "notes.txt" },
42];
43 
44export default function ChatInputWithMentions() {
45	const [highlightedOutput, setHighlightedOutput] = useState<string>("");
46 
47	const { value, onChange, parsed, handleSubmit, mentionConfigs } =
48		useChatInput({
49			mentions: {
50				member: createMentionConfig<MemberItem>({
51					type: "member",
52					trigger: "@",
53					items: members,
54				}),
55				file: createMentionConfig<FileItem>({
56					type: "file",
57					trigger: "/",
58					items: files,
59				}),
60			},
61			onSubmit: (parsedValue) => {
62				console.log("Submitted parsed:", parsedValue);
63				console.log("Members mentioned:", parsedValue.member);
64				console.log("Files mentioned:", parsedValue.file);
65			},
66		});
67 
68	useEffect(() => {
69		highlightCode(JSON.stringify(parsed, null, 2), "json").then(
70			setHighlightedOutput,
71		);
72	}, [parsed]);
73 
74	return (
75		<div className="w-full h-full flex justify-center items-center">
76			<div className="w-full max-w-md space-y-4">
77				<ChatInput
78					onSubmit={handleSubmit}
79					value={value}
80					onChange={onChange}
81				>
82					<ChatInputMention
83						type={mentionConfigs.member.type}
84						trigger={mentionConfigs.member.trigger}
85						items={mentionConfigs.member.items}
86					>
87						{(item) => (
88							<>
89								<Avatar className="h-6 w-6">
90									<AvatarImage
91										src={item.image ?? "/placeholder.jpg"}
92										alt={item.name}
93									/>
94									<AvatarFallback>
95										{item.name[0].toUpperCase()}
96									</AvatarFallback>
97								</Avatar>
98 
99								<span
100// … truncated