AI Leaf

1'use client';
2 
3import { AIChatPlugin } from '@platejs/ai/react';
4import {
5  type PlateElementProps,
6  type PlateTextProps,
7  PlateElement,
8  PlateText,
9  usePluginOption,
10} from 'platejs/react';
11 
12import { cn } from '@/lib/utils';
13 
14export function AILeaf(props: PlateTextProps) {
15  const streaming = usePluginOption(AIChatPlugin, 'streaming');
16  const streamingLeaf = props.editor
17    .getApi(AIChatPlugin)
18    .aiChat.node({ streaming: true });
19 
20  const isLast = streamingLeaf?.[0] === props.text;
21 
22  return (
23    <PlateText
24      className={cn(
25        'border-b-2 border-b-purple-100 bg-purple-50 text-purple-800',
26        'transition-all duration-200 ease-in-out',
27        isLast &&
28          streaming &&
29          'after:ml-1.5 after:inline-block after:h-3 after:w-3 after:rounded-full after:bg-primary after:align-middle after:content-[""]'
30      )}
31      {...props}
32    />
33  );
34}
35 
36export function AIAnchorElement(props: PlateElementProps) {
37  return (
38    <PlateElement {...props}>
39      <div className="h-[0.1px]" />
40    </PlateElement>
41  );
42}