AI Toolbar Button

1'use client';
2 
3import * as React from 'react';
4 
5import { AIChatPlugin } from '@platejs/ai/react';
6import { useEditorPlugin } from 'platejs/react';
7 
8import { ToolbarButton } from './toolbar';
9 
10export function AIToolbarButton(
11  props: React.ComponentProps<typeof ToolbarButton>
12) {
13  const { api } = useEditorPlugin(AIChatPlugin);
14 
15  return (
16    <ToolbarButton
17      {...props}
18      onClick={() => {
19        api.aiChat.show();
20      }}
21      onMouseDown={(e) => {
22        e.preventDefault();
23      }}
24    />
25  );
26}