"use client";
import { useState, useMemo } from "react";
import { MessageSquare, Search, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
type Template = {
id: string;
title: string;
content: string;
};
const templates: Template[] = [
{
id: "1",
title: "Welcome",
content: "Hi! Thanks for reaching out. How can I help you today?",
},
{
id: "2",
title: "Request info",
content: "Could you please provide your order number and email address?",
},
{
id: "3",
title: "Troubleshooting",
content: "Let me help you troubleshoot this. Could you try the following steps?",
},
{
id: "4",
title: "Refund processed",
content: "I've processed your refund. Please allow 5-7 business days for it to appear.",
},
{
id: "5",
title: "Issue resolved",
content: "I'm glad we could resolve this! Is there anything else I can help with?",
},
{
id: "6",
title: "Follow-up",
content: "I'll follow up with you via email within 24 hours. Thank you for your patience!",
},
];
export const title = "React Dialog Block Quick Reply Templates";
export default function DialogQuickReply() {
const [open, setOpen] = useState(false);
const [search, setSearch] = useState("");
const [selected, setSelected] = useState<string | null>(null);
const filteredTemplates = useMemo(() => {
if (!search) return templates;
const query = search.toLowerCase();
return templates.filter(
(t) =>
t.title.toLowerCase().includes(query) ||
t.content.toLowerCase().includes(query)
);
}, [search]);
const handleInsert = () => {
const template = templates.find((t) => t.id === selected);
if (template) {
console.log("Inserting:", template.content);
}
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<MessageSquare className="mr-2 h-4 w-4" />
Quick Reply
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Quick Reply</DialogTitle>
<DialogDescription>Select a template to insert.</DialogDescription>
</DialogHeader>
<div className="space-y-3 py-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
placeholder="Search..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-9"
/>
</div>
<div className="h-[200px] overflow-y-auto space-y-1">
{filteredTemplates.map((template) => (
<button
key={template.id}
onClick={() => setSelected(template.id)}
className={cn(
"w-full rounded-lg border p-3 text-left transition-colors",
selected === template.id
? "border-primary bg-primary/5"
: "hover:bg-muted"
)}
>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{template.title}</span>
{selected === template.id && (
<Check className="h-4 w-4 text-primary" />
)}
</div>
<p className="text-xs text-muted-foreground mt-1 line-clamp-1">
{template.content}
</p>
</button>
))}
{filteredTemplates.length === 0 && (
<p className="text-sm text-muted-foreground text-center py-8">
No templates found
</p>
)}
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button onClick={handleInsert} disabled={!selected}>
Insert
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}