tetrons 2.3.24 → 2.3.26

package/dist/components/tetrons/ResizableImage.d.ts

@@ -0,0 +1 @@
+export declare const ResizableImage: import("@tiptap/react").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/tetrons/ResizableImage.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+export const ResizableImage = Image.extend({
+    name: "resizableImage",
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: { default: null }, height: { default: null } });
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { width, height } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
+        const style = [];
+        if (width)
+            style.push(`width: ${width}px`);
+        if (height)
+            style.push(`height: ${height}px`);
+        return [
+            "img",
+            Object.assign(Object.assign({}, rest), { style: style.join("; ") }),
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ResizableImageComponent);
+    },
+});

package/dist/components/tetrons/ResizableImageComponent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ReactNodeViewProps } from "@tiptap/react";
+declare const ResizableImageComponent: React.FC<ReactNodeViewProps<HTMLElement>>;
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, alt, title, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const imgRef = useRef(null);
+    useEffect(() => {
+        const img = imgRef.current;
+        if (!img)
+            return;
+        const observer = new ResizeObserver(() => {
+            const w = Math.round(img.offsetWidth);
+            const h = Math.round(img.offsetHeight);
+            updateAttributes({ width: w, height: h });
+        });
+        observer.observe(img);
+        return () => observer.disconnect();
+    }, [updateAttributes]);
+    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+            resize: "both",
+            overflow: "auto",
+            border: "1px solid #ccc",
+            padding: 2,
+            display: "inline-block",
+            maxWidth: "100%",
+        }}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img ref={imgRef} src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
+            width: width ? `${width}px` : "auto",
+            height: height ? `${height}px` : "auto",
+            display: "block",
+            userSelect: "none",
+            pointerEvents: "auto",
+        }} draggable={false}/>
+    </NodeViewWrapper>);
+};
+export default ResizableImageComponent;

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/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,6 +1,6 @@
 import EditorContent from "./components/tetrons/EditorContent";
 export declare function initializeTetrons(apiKey: string): Promise<void>;
-export declare function getTetronsVersion(): "" | "platinum" | "free" | "pro" | "premium";
+export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
 export declare function isApiKeyValid(): boolean;
 export { EditorContent };
 export default EditorContent;