Dialog

import { Button } from '@/ui/button';
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/ui/dialog';

<Dialog>
    <DialogTrigger render={<Button variant="secondary" size="md">Rename chat</Button>} />
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Rename chat</DialogTitle>
            <DialogDescription>Give this chat a name only you can see.</DialogDescription>
        </DialogHeader>
        <DialogBody>…</DialogBody>
        <DialogFooter>
            <DialogClose render={<Button variant="secondary" size="md">Cancel</Button>} />
            <DialogClose render={<Button size="md">Save</Button>} />
        </DialogFooter>
    </DialogContent>
</Dialog>