Bring AI commands similar to https://novel.sh/

[kkcoms]

The plate editor would benefit significantly from being able to run AI commands in the editor

[zbeyens]

A notion ai template is coming soon

[sewellstephens]

Hi @zbeyens @kkcoms I actually have an AI plugin for anyone interested

[sewellstephens]

i made it myself to meet the requiirements of my current app krastie ai

[kkcoms]

nice @sewellstephens ! - I would be happy to try it.

[sewellstephens]

here the code

ai-toolbar.tsx

import { useEffect, useState } from 'react';
import cookies from 'next-cookies';
import { cn } from '@udecode/cn';
import { buttonVariants } from './button';
import { inputVariants } from './input';
import { popoverVariants } from './popover';
import { Icons } from '../icons';
import { useEditorRef } from '@udecode/plate-common';
import { isHidden } from './custom-plugins/ai/toggleToolbar';
import { Button } from './button';
import { set } from 'date-fns';
import { insertNodes } from '@udecode/plate-common';
import { deserializeMd } from '@udecode/plate-markdown';

export function AiToolbar() {

  const [value, setValue] = useState('');
  const [button, setButton] = useState('Generate AI');
  const editor = useEditorRef();
  const hidden = isHidden();
  
  const handleSubmit = (e: any) => {
    e.preventDefault();
    setButton('Generating...');

    let model

    if (localStorage.getItem("aiModel")) {
      model = localStorage.getItem("aiModel");
    }
    else {
      model = "gpt-4o";
    }

    fetch(`${process.env.NEXT_PUBLIC_API || 'https://api.krastie.ai'}/pages/generateAI` , {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'Cookie': cookies('token')
            },
            body: JSON.stringify({
              text: value, 
              model: model
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log(data);
            setButton('Generate AI');
            const nodes = deserializeMd(
              editor as unknown,
              data.data
          )
          
          // Add mark here ?
          insertNodes(editor, nodes)
          
          editor.move()
        })
  };


    console.log(hidden);

    if (hidden) return null;

  return (
        <div
        className={cn(
          'flex w-[300px] rounded-md ml-4 z-50 whitespace-nowrap border border-slate-200 bg-white px-1 opacity-100 shadow-md print:hidden dark:border-slate-800 dark:bg-slate-950'
        )}
        >
        <div className='flex items-center pl-3 text-slate-500 dark:text-slate-400'>
          <Icons.ai className='size-4' />
        </div>

        <input
          className={inputVariants({ h: 'sm', variant: 'ghost' })}
          placeholder='Enter prompt'
          onChange={(e) => setValue(e.target.value)}
        />
        <button
          className={cn(buttonVariants({ size: 'sm', variant: 'ghost' }))}
          onClick={(e) => handleSubmit(e)}
        >
          {button}
        </button>
    </div>
  );
}

toggleToolbar.tsx

let hidden = true;

export function isHidden() {
    return hidden;
}

export function toolbarToggle(state: boolean) {
    hidden = state;
}