tetrons 2.3.23 → 2.3.26

package/dist/components/tetrons/toolbar/AIGroup.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Editor } from "@tiptap/react";
+import { FaMicrophone, FaStop } from "react-icons/fa";
+import { Waveform } from "@uiball/loaders";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function AiGroup({ editor }: { editor: Editor }) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcriptionError, setTranscriptionError] = useState("");
+
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [isLoadingAI, setIsLoadingAI] = useState(false);
+  const [aiError, setAiError] = useState("");
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+
+  const startRecording = async () => {
+    setTranscriptionError("");
+    setAudioBlob(null);
+
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mediaRecorder = new MediaRecorder(stream);
+    mediaRecorderRef.current = mediaRecorder;
+    chunksRef.current = [];
+
+    mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunksRef.current.push(e.data);
+    };
+
+    mediaRecorder.onstop = () => {
+      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+      setAudioBlob(blob);
+      transcribeAudio(blob);
+    };
+
+    mediaRecorder.start();
+    setIsRecording(true);
+  };
+
+  const stopRecording = () => {
+    mediaRecorderRef.current?.stop();
+    setIsRecording(false);
+  };
+
+  const transcribeAudio = async (blob: Blob) => {
+    setIsTranscribing(true);
+    setTranscriptionError("");
+
+    const formData = new FormData();
+    formData.append("file", blob, "voice.webm");
+
+    try {
+      const res = await fetch("/api/transcribe", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (!res.ok || !data.transcript) {
+        throw new Error(data.error || "Failed to transcribe");
+      }
+
+      editor.commands.insertContent(data.transcript);
+    } catch (e) {
+      console.error(e);
+      setTranscriptionError("Transcription failed. Please try again.");
+    } finally {
+      setIsTranscribing(false);
+    }
+  };
+
+  const handleAiClick = () => {
+    setShowPromptInput(true);
+    setPrompt("");
+    setAiError("");
+  };
+
+  const handlePromptSubmit = async () => {
+    if (!prompt.trim()) return;
+    setIsLoadingAI(true);
+    setAiError("");
+
+    try {
+      const res = await fetch("/api/ai-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: prompt }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || !data.response) {
+        throw new Error(data.error || "AI failed to generate content");
+      }
+
+      editor.commands.insertContent(data.response);
+      setShowPromptInput(false);
+    } catch (e) {
+      console.error(e);
+      setAiError("Failed to generate content. Try again.");
+    } finally {
+      setIsLoadingAI(false);
+    }
+  };
+
+  return (
+    <div className="group relative space-y-3">
+      <div className="flex gap-2 items-center">
+        {!isRecording ? (
+          <button
+            type="button"
+            onClick={startRecording}
+            className="icon-btn"
+            title="Start Voice Input"
+          >
+            <FaMicrophone size={18} />
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={stopRecording}
+            className="icon-btn stop-btn"
+            title="Stop Recording"
+          >
+            <FaStop size={18} />
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={handleAiClick}
+          className="ai-button"
+          title="AI Assist"
+        >
+          AI
+        </button>
+      </div>
+
+      {isRecording && (
+        <div className="flex flex-col items-center">
+          <Waveform size={30} lineWeight={3.5} speed={1} color="#4F46E5" />
+          <p className="text-sm mt-1 text-gray-600">Recording...</p>
+        </div>
+      )}
+
+      {isTranscribing && (
+        <p className="text-sm text-gray-500">Transcribing...</p>
+      )}
+
+      {transcriptionError && (
+        <p className="text-sm text-red-600">{transcriptionError}</p>
+      )}
+
+      {audioBlob && (
+        <div className="mt-2">
+          <audio controls src={URL.createObjectURL(audioBlob)} />
+        </div>
+      )}
+
+      <AnimatePresence>
+        {showPromptInput && (
+          <motion.div
+            className="ai-modal-backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <motion.div
+              className="ai-modal-content"
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+            >
+              <h2 className="ai-modal-title">AI Prompt</h2>
+              <textarea
+                className="ai-modal-textarea"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Enter your prompt here..."
+              />
+              {aiError && <p className="ai-modal-error">{aiError}</p>}
+              <div className="ai-modal-actions">
+                <button
+                  onClick={() => setShowPromptInput(false)}
+                  className="ai-cancel-btn"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handlePromptSubmit}
+                  disabled={isLoadingAI}
+                  className="ai-submit-btn"
+                >
+                  {isLoadingAI ? "Generating..." : "Submit"}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/dist/components/tetrons/toolbar/MiscGroup.tsx

@@ -5,9 +5,11 @@ import {
   MdRefresh,
   MdVisibility,
   MdCode,
+  MdSpellcheck,
 } from "react-icons/md";
 import { Editor } from "@tiptap/react";
 import ToolbarButton from "./ToolbarButton";
+import { checkGrammar, GrammarMatch } from "../../../utils/checkGrammar"; 
 
 interface MiscGroupProps {
   editor: Editor;
@@ -34,6 +36,32 @@ export default function MiscGroup({ editor }: MiscGroupProps) {
     }
   };
 
+  const handleGrammarCheck = async () => {
+    const text = editor.getText();
+    try {
+      const issues: GrammarMatch[] = await checkGrammar(text);
+      if (issues.length === 0) {
+        alert("✅ No grammar issues found.");
+        return;
+      }
+
+      let message = "🔎 Grammar Suggestions:\n\n";
+      issues.forEach((issue: GrammarMatch, idx: number) => {
+        const replacements = issue.replacements
+          .map((r: { value: string }) => r.value)
+          .join(", ");
+        message += `${idx + 1}. "${
+          issue.context.text
+        }"\n→ ${replacements}\nReason: ${issue.message}\n\n`;
+      });
+
+      alert(message);
+    } catch (err) {
+      console.error(err);
+      alert("❌ Failed to check grammar. Please try again later.");
+    }
+  };
+
   return (
     <div className="misc-group">
       <ToolbarButton
@@ -66,6 +94,11 @@ export default function MiscGroup({ editor }: MiscGroupProps) {
         label="Preview"
         onClick={handlePreview}
       />
+      <ToolbarButton
+        icon={MdSpellcheck}
+        label="Check Grammar"
+        onClick={handleGrammarCheck}
+      />
     </div>
   );
 }

package/dist/components/tetrons/toolbar/TetronsToolbar.tsx

@@ -10,6 +10,7 @@ import InsertGroup from "./InsertGroup";
 import ListAlignGroup from "./ListAlignGroup";
 import MiscGroup from "./MiscGroup";
 import FileGroup from "./FileGroup";
+import AiGroup from "./AIGroup";
 
 export default function TetronsToolbar({
   editor,
@@ -65,7 +66,12 @@ export default function TetronsToolbar({
           <ActionGroup editor={editor} />
         </>
       )}
-      {version === "platinum" && <MiscGroup editor={editor} />}
+      {version === "platinum" && (
+        <>
+          <MiscGroup editor={editor} />
+          <AiGroup editor={editor} />
+        </>
+      )}
     </div>
   );
 }

package/dist/index.d.ts

@@ -1,12 +1,6 @@
-import React from 'react';
-
-type EditorContentProps = {
-    apiKey: string;
-};
-declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
-
-declare function initializeTetrons(apiKey: string): Promise<void>;
-declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
-declare function isApiKeyValid(): boolean;
-
-export { EditorContent, EditorContent as default, getTetronsVersion, initializeTetrons, isApiKeyValid };
+import EditorContent from "./components/tetrons/EditorContent";
+export declare function initializeTetrons(apiKey: string): Promise<void>;
+export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
+export declare function isApiKeyValid(): boolean;
+export { EditorContent };
+export default EditorContent;