1"use client";
2
3
18import { Sparkles } from "lucide-react";
19import { WritingActionsList } from "./writing-actions-menu";
20import type { WritingAction } from "@/lib/ai";
21import type { Block } from "@/lib/types";
22
23export interface AskAiSubmenuProps {
24 block: Block;
25
26 onChat: () => void;
27
30 onWritingAction?: (action: WritingAction, blockIds: string[], language?: string) => void;
31}
32
33export function AskAiSubmenu({ block, onChat, onWritingAction }: AskAiSubmenuProps) {
34 return (
35 <>
36 <button
37 type="button"
38 role="menuitem"
39 data-testid="block-ask-ai"
40 onClick={onChat}
41 className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
42 >
43 <span className="inline-flex items-center gap-1.5">
44 <Sparkles className="size-4 shrink-0 text-muted-foreground" aria-hidden />
45 Chat with AI
46 </span>
47 </button>
48
49 {onWritingAction ? (
50 <>
51 <div className="my-1 h-px bg-border" aria-hidden />
52 <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Writing tools</p>
53 <WritingActionsList onPick={(action, language) => onWritingAction(action, [block.id], language)} />
54 </>
55 ) : null}
56 </>
57 );
58}
59