62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { MessageCircle, X } from "lucide-react";
|
|
import { AssistantPanel } from "./assistant-panel";
|
|
|
|
type Props = {
|
|
configured: boolean;
|
|
userId: string;
|
|
assistantName: string;
|
|
assistantModel: string | null;
|
|
};
|
|
|
|
export function AssistantBubble({ configured, userId, assistantName, assistantModel }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="assistant-bubble" data-open={open ? "true" : "false"}>
|
|
{open ? (
|
|
<div
|
|
className="assistant-bubble-panel"
|
|
role="dialog"
|
|
aria-label={assistantName}
|
|
aria-modal="false"
|
|
>
|
|
<div className="assistant-bubble-header">
|
|
<div>
|
|
<div className="serif text-[15px] font-medium tracking-tight">{assistantName}</div>
|
|
<div className="muted text-[11px]">Household helper</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="assistant-bubble-close"
|
|
aria-label={`Close ${assistantName}`}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
<AssistantPanel
|
|
key={userId}
|
|
configured={configured}
|
|
userId={userId}
|
|
assistantName={assistantName}
|
|
assistantModel={assistantModel}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
<button
|
|
type="button"
|
|
className="assistant-bubble-trigger"
|
|
aria-label={open ? `Close ${assistantName}` : `Open ${assistantName}`}
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((current) => !current)}
|
|
>
|
|
{open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|