AIRewordButton.jsx

Go to the documentation of this file.

import React, { useState } from 'react';
import { apiFetch } from '../lib/api';
import './AIRewordButton.css';
 
export default function AIRewordButton({ value, onReword, disabled, style, prompt = 'Rewrite this text to be clear and natural:' }) {
  const [loading, setLoading] = useState(false);
 
  const handleReword = async (e) => {
    e.preventDefault();
    if (!value || loading) return;
    setLoading(true);
    try {
      const res = await apiFetch('/reword', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: value, prompt })
      });
      const data = await res.json();
      if (data.reworded) onReword(data.reworded);
    } catch (err) {
      alert('AI rewording failed.');
    }
    setLoading(false);
  };
 
  return (
    <button
      className="ai-reword-btn"
      onClick={handleReword}
      disabled={disabled || loading || !value}
      type="button"
      style={style}
      title="Reword with AI"
    >
      {loading ? (
        <span className="material-symbols-outlined spinning" style={{ fontSize: 18, margin: 0, padding: 0 }}>progress_activity</span>
      ) : (
        <span className="material-symbols-outlined" style={{ fontSize: 18, margin: 0, padding: 0 }}>auto_awesome</span>
      )}
    </button>
  );
}