import { type SVGProps, useEffect, useState } from "react"; import { MessageActionAdvanced } from "@/components/application/messaging/message-action.demo"; import type { Message } from "@/components/application/messaging/messaging"; import { MessageItem } from "@/components/application/messaging/messaging"; import { SlideoutMenu } from "@/components/application/slideout-menus/slideout-menu"; import { Button } from "@/components/base/buttons/button"; import { cx } from "@/utils/cx"; /** * This is a utility hook that automatically reopens the modal after * it's closed. It's used only for demo purposes and can be safely * removed and replaced with a regular `useState` hook. */ const useModalState = (defaultValue: boolean = true) => { const [isOpen, setIsOpen] = useState(defaultValue); useEffect(() => { if (!isOpen) { setTimeout(() => { setIsOpen(true); }, 700); } }, [isOpen]); return [isOpen, setIsOpen] as const; }; const Logo = () => { return ( ); }; const GoogleCalendarIcon = (props: SVGProps) => { return ( ); }; type AssistantMessage = Message & { meetings?: { id: string; title: string; description: string }[]; actions?: { id: string; text: string; type: "primary" | "secondary" }[]; }; const messages: AssistantMessage[] = [ // collapse-start { id: "message-001", text: "Welcome back! How can I help?", }, { id: "message-002", text: "Welcome back! How can I help?", user: { me: true, }, }, { id: "message-003", text: "Okay! Here’s what I recommend:", }, { id: "message-004", meetings: [ { id: "meeting-1", title: "Sync with Rhea", description: "move to 1:30 PM", }, { id: "meeting-2", title: "Strategy session with Sienna", description: "move to Thursday at 3 PM", }, ], }, { id: "message-005", text: "Shall I update your calendar and notify Sienna and the team?", actions: [ { id: "cancel", text: "Cancel", type: "secondary", }, { id: "update", text: "Yes, update", type: "primary", }, ], }, { id: "message-006", text: "Yes, but can we do the strategy session on Friday instead?", user: { me: true, }, }, { id: "message-007", audio: { duration: "00:28", }, user: { me: true, }, }, { id: "typing-indicator", typing: true, }, // collapse-end ]; export const AIAssistantMessageMenu = () => { const [isOpen, setIsOpen] = useModalState(); return (

{msg.meetings.map((meeting) => (

{meeting.title}{" "} {meeting.description}.

))}
{msg.actions.map((action) => ( ))}

; })}

); };

Slideout menu components