QuillAIToolbar.js

Go to the documentation of this file.

// QuillAIToolbar.js - AI Toolbar for Quill Editor
import React from 'react';
 
export default function QuillAIToolbar({ quillRef }) {
  const handleAIStream = async (type) => {
    const editor = quillRef.current.getEditor();
    const range = editor.getSelection();
    if (!range) return;
    const selectedText = editor.getText(range.index, range.length);
    const res = await apiFetch(`/ai/stream`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: selectedText, type })
    });
    const reader = res.body.getReader();
    let output = '';
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      output += new TextDecoder().decode(value);
      // Optionally, update editor live here
    }
    editor.deleteText(range.index, range.length);
    editor.insertText(range.index, output);
  };
  return (
    <div className="quill-ai-toolbar">
      <button onClick={() => handleAIStream('rewrite')}>Rewrite (Live)</button>
      <button onClick={() => handleAIStream('summary')}>Summarize (Live)</button>
      <button onClick={() => handleAIStream('expand')}>Expand (Live)</button>
      <button onClick={() => handleAIStream('continue')}>Continue (Live)</button>
    </div>
  );
}