{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "chat-input-demo-mentions",
	"type": "registry:example",
	"registryDependencies": ["@simple-ai/chat-input"],
	"files": [
		{
			"path": "./src/registry/examples/chat-input-demo-mentions.tsx",
			"content": "\"use client\";\n\nimport { FileIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { highlightCode } from \"@/lib/highlight-code\";\nimport {\n\tChatInput,\n\tChatInputEditor,\n\tChatInputGroupAddon,\n\tChatInputMention,\n\tChatInputMentionButton,\n\tChatInputSubmitButton,\n\tcreateMentionConfig,\n\tuseChatInput,\n} from \"@/registry/ui/chat-input\";\n\ntype MemberItem = {\n\tid: string;\n\tname: string;\n\timage?: string;\n\ttype: string;\n};\n\ntype FileItem = {\n\tid: string;\n\tname: string;\n};\n\nconst members: MemberItem[] = [\n\t{ id: \"1\", name: \"Alice\", image: \"/avatar-1.png\", type: \"agent\" },\n\t{ id: \"2\", name: \"Bob\", type: \"user\" },\n\t{ id: \"3\", name: \"Charlie\", image: \"/avatar-2.png\", type: \"bot\" },\n\t{ id: \"4\", name: \"Dave\", type: \"user\" },\n];\n\nconst files: FileItem[] = [\n\t{ id: \"f1\", name: \"report.pdf\" },\n\t{ id: \"f2\", name: \"image.png\" },\n\t{ id: \"f3\", name: \"notes.txt\" },\n];\n\nexport default function ChatInputWithMentions() {\n\tconst [highlightedOutput, setHighlightedOutput] = useState<string>(\"\");\n\n\tconst { value, onChange, parsed, handleSubmit, mentionConfigs } =\n\t\tuseChatInput({\n\t\t\tmentions: {\n\t\t\t\tmember: createMentionConfig<MemberItem>({\n\t\t\t\t\ttype: \"member\",\n\t\t\t\t\ttrigger: \"@\",\n\t\t\t\t\titems: members,\n\t\t\t\t}),\n\t\t\t\tfile: createMentionConfig<FileItem>({\n\t\t\t\t\ttype: \"file\",\n\t\t\t\t\ttrigger: \"/\",\n\t\t\t\t\titems: files,\n\t\t\t\t}),\n\t\t\t},\n\t\t\tonSubmit: (parsedValue) => {\n\t\t\t\tconsole.log(\"Submitted parsed:\", parsedValue);\n\t\t\t\tconsole.log(\"Members mentioned:\", parsedValue.member);\n\t\t\t\tconsole.log(\"Files mentioned:\", parsedValue.file);\n\t\t\t},\n\t\t});\n\n\tuseEffect(() => {\n\t\thighlightCode(JSON.stringify(parsed, null, 2), \"json\").then(\n\t\t\tsetHighlightedOutput,\n\t\t);\n\t}, [parsed]);\n\n\treturn (\n\t\t<div className=\"w-full h-full flex justify-center items-center\">\n\t\t\t<div className=\"w-full max-w-md space-y-4\">\n\t\t\t\t<ChatInput\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t>\n\t\t\t\t\t<ChatInputMention\n\t\t\t\t\t\ttype={mentionConfigs.member.type}\n\t\t\t\t\t\ttrigger={mentionConfigs.member.trigger}\n\t\t\t\t\t\titems={mentionConfigs.member.items}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(item) => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Avatar className=\"h-6 w-6\">\n\t\t\t\t\t\t\t\t\t<AvatarImage\n\t\t\t\t\t\t\t\t\t\tsrc={item.image ?? \"/placeholder.jpg\"}\n\t\t\t\t\t\t\t\t\t\talt={item.name}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<AvatarFallback>\n\t\t\t\t\t\t\t\t\t\t{item.name[0].toUpperCase()}\n\t\t\t\t\t\t\t\t\t</AvatarFallback>\n\t\t\t\t\t\t\t\t</Avatar>\n\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm font-medium truncate max-w-[120px]\"\n\t\t\t\t\t\t\t\t\ttitle={item.name}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.name}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className=\"ml-auto\">\n\t\t\t\t\t\t\t\t\t{item.type}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChatInputMention>\n\t\t\t\t\t<ChatInputMention\n\t\t\t\t\t\ttype={mentionConfigs.file.type}\n\t\t\t\t\t\ttrigger={mentionConfigs.file.trigger}\n\t\t\t\t\t\titems={mentionConfigs.file.items}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(item) => (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<FileIcon className=\"h-4 w-4 text-muted-foreground\" />\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm font-medium truncate max-w-[200px]\"\n\t\t\t\t\t\t\t\t\ttitle={item.name}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.name}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChatInputMention>\n\t\t\t\t\t<ChatInputEditor placeholder=\"Type @ for agents, / for files...\" />\n\t\t\t\t\t<ChatInputGroupAddon align=\"block-end\">\n\t\t\t\t\t\t<ChatInputMentionButton />\n\t\t\t\t\t\t<ChatInputSubmitButton className=\"ml-auto\" />\n\t\t\t\t\t</ChatInputGroupAddon>\n\t\t\t\t</ChatInput>\n\n\t\t\t\t{/* Debug output */}\n\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h4 className=\"font-semibold mb-2 text-sm\">\n\t\t\t\t\t\t\tParsed Output:\n\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t<div className=\"bg-code rounded-lg border border-border p-0 text-sm max-h-32 overflow-y-auto\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t__html: highlightedOutput,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}