24 lines
1.8 KiB
TypeScript
24 lines
1.8 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
import { Bell } from "lucide-preact";
|
|
import { Button } from "@/components/ui/button";
|
|
import { disableAgentBrowserPush, enableAgentBrowserPush, getAgentPushState, observeAgentPush, refreshAgentBrowserPush } from "@/lib/agent-push-browser";
|
|
|
|
export function AgentNotifications({ onLogout }: { onLogout: () => Promise<void> }) {
|
|
const [state, setState] = useState(getAgentPushState), [signingOut, setSigningOut] = useState(false);
|
|
useEffect(() => observeAgentPush(setState), []);
|
|
return <details className="shrink-0 border-t border-violet-300/15 px-3 py-2 text-xs text-violet-100/75">
|
|
<summary className="flex cursor-pointer items-center gap-2 rounded py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"><Bell className="h-4 w-4" />Agent notifications</summary>
|
|
<div className="space-y-2 pb-1 pt-2">
|
|
<p>Notifications include Agent message text and may appear on your lock screen.</p>
|
|
<p role="status">{state.message}</p>
|
|
{state.error ? <p role="alert" className="text-rose-300">{state.error}</p> : null}
|
|
<div className="flex flex-wrap gap-2">
|
|
{state.enabled ? <Button className="h-8 text-xs" variant="secondary" disabled={state.busy} onClick={() => void disableAgentBrowserPush()}>Turn off notifications</Button>
|
|
: <Button className="h-8 text-xs" variant="secondary" disabled={!state.canEnable} onClick={() => void enableAgentBrowserPush()}>Enable notifications</Button>}
|
|
<Button className="h-8 text-xs" variant="ghost" disabled={state.busy} onClick={() => void refreshAgentBrowserPush()}>Refresh</Button>
|
|
<Button className="h-8 text-xs" variant="ghost" disabled={signingOut} onClick={() => { setSigningOut(true); void onLogout().finally(() => setSigningOut(false)); }}>Sign out</Button>
|
|
</div>
|
|
</div>
|
|
</details>;
|
|
}
|