@flozy/editor 3.8.9 → 3.9.1

package/dist/Editor/Elements/AI/AIInput.js

@@ -6,11 +6,11 @@ import Icon from "../../common/Icon";
 import { IoSend } from "react-icons/io5";
 import React, { forwardRef, useEffect, useRef } from "react";
 import WaveLoading from "../../common/WaveLoading";
-import useWindowResize from "../../hooks/useWindowResize";
 import CustomSelect from "./CustomSelect";
 import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
 import useClickOutside from "../../hooks/useClickOutside";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { ChatMicIcon } from "../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -36,19 +36,19 @@ function getProps(openAI, generatedText) {
 }
 function AIInput({
   onSend,
-  loading,
   generatedText,
   openAI,
   inputValue,
   onInputChange,
-  onClickOutside
+  onClickOutside,
+  startRecording,
+  ...rest
 }, ref) {
   const {
     theme
   } = useEditorContext();
   const classes = Styles(theme);
   const inputRef = useRef();
-  const [size] = useWindowResize();
   const inputWrapperRef = useRef();
   const refs = useClickOutside({
     onClickOutside,
@@ -67,6 +67,7 @@ function AIInput({
       clearTimeout(timeoutId);
     };
   }, [openAI]);
+  const loading = rest?.loading || rest?.isAILoading;
   const isSendBtnDisabled = !inputValue || loading;
   const props = getProps(openAI, generatedText) || {};
   const fromToolBar = openAI === "fromToolBar";
@@ -80,16 +81,7 @@ function AIInput({
     });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [size.device === "xs" ? /*#__PURE__*/_jsx(Box, {
-      component: "div",
-      ref: refs[1],
-      sx: classes.customSelectWrapper,
-      children: /*#__PURE__*/_jsx(CustomSelect, {
-        ...props,
-        onSend: onSend,
-        classes: classes
-      })
-    }) : null, /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
@@ -132,21 +124,28 @@ function AIInput({
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
+        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton
+          // sx={
+          //   isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn
+          // }
+          , {
+            onClick: () => startRecording(),
+            children: /*#__PURE__*/_jsx(ChatMicIcon, {})
+          }), /*#__PURE__*/_jsx(IconButton, {
             sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
             onClick: () => handleSendBtnClick(),
             children: /*#__PURE__*/_jsx(IoSend, {
               color: "#fff",
               size: 14
             })
-          })
+          })]
         })]
       })]
-    }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       component: "div",
       ref: refs[1],
       sx: classes.customSelectWrapper,

package/dist/Editor/Elements/AI/CustomSelect.js

@@ -1,4 +1,4 @@
-import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
+import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
 import React, { useRef, useState } from "react";
 import { FaChevronRight } from "react-icons/fa";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,9 +49,17 @@ function DisplayOption({
   } = option;
   const [open, setOpen] = useState(false);
   const optionRef = useRef();
+  const openOptions = e => {
+    if (option.options?.length && !open) {
+      setOpen(e.currentTarget);
+      return;
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.optionWrapper,
     ref: optionRef,
+    onMouseEnter: openOptions,
+    onMouseLeave: () => setOpen(null),
     children: [/*#__PURE__*/_jsxs(Button, {
       sx: classes.optionBtn,
       onClick: e => {
@@ -59,7 +67,7 @@ function DisplayOption({
 
         // is having child options
         if (option.options?.length) {
-          setOpen(e.currentTarget);
+          openOptions(e);
           return;
         }
         setOpen(null);
@@ -77,25 +85,24 @@ function DisplayOption({
           size: 12
         })
       })]
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(Popper, {
       open: open && option.options,
       anchorEl: open,
       sx: {
         zIndex: 9001,
         background: "transparent"
       },
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
       onClose: () => {
         setOpen(null);
       },
-      children: /*#__PURE__*/_jsx(CustomSelect, {
-        options: option.options,
-        onSend: onSend,
-        classes: classes,
-        show: open
+      placement: "right-start",
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(CustomSelect, {
+          options: option.options,
+          onSend: onSend,
+          classes: classes,
+          show: open
+        })
       })
     })]
   });

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
-import { Box, Fade, Paper, Popper } from "@mui/material";
+import { Fade, Paper, Popper } from "@mui/material";
 import AIInput from "./AIInput";
 import { ReactEditor, useSlate } from "slate-react";
 import { Editor, Node, Path, Transforms } from "slate";
-import useWindowResize from "../../hooks/useWindowResize";
 import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
+import { VoiceToText } from "./VoiceToText";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const scrollToAIInput = () => {
@@ -51,51 +51,43 @@ const insertAtNextLine = (editor, text) => {
   });
 };
 const getNextLine = editor => {
-  try {
-    const {
-      selection
-    } = editor;
-    const {
-      focus
-    } = selection;
-    if (focus?.path?.length > 0) {
-      const {
-        text = ""
-      } = Node.get(editor, focus.path);
-      let nextLineIndex = 0;
-      let indexOfNextLine = 0;
-      if (text?.length) {
-        // split the text based on caret position
-        const textBeforeCaret = text.substring(0, focus.offset);
-        const textAfterCaret = text.substring(focus.offset);
+  const {
+    selection
+  } = editor;
+  const {
+    focus
+  } = selection;
+  const {
+    text = ""
+  } = Node.get(editor, focus.path);
+  let nextLineIndex = 0;
+  let indexOfNextLine = 0;
+  if (text?.length) {
+    // split the text based on caret position
+    const textBeforeCaret = text.substring(0, focus.offset);
+    const textAfterCaret = text.substring(focus.offset);
 
-        // getting the index of the next line after the caret position
-        indexOfNextLine = textAfterCaret?.indexOf("\n");
-        if (indexOfNextLine >= 0) {
-          // index of next line
-          nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
-        } else {
-          nextLineIndex = text?.length;
-        }
-      }
-      const data = {
-        ...focus,
-        offset: nextLineIndex
-      };
-      const at = {
-        anchor: data,
-        focus: data
-      };
-      return {
-        at,
-        indexOfNextLine
-      };
+    // getting the index of the next line after the caret position
+    indexOfNextLine = textAfterCaret?.indexOf("\n");
+    if (indexOfNextLine >= 0) {
+      // index of next line
+      nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
+    } else {
+      nextLineIndex = text?.length;
     }
-    return null;
-  } catch (err) {
-    console.log(err);
-    return null;
   }
+  const data = {
+    ...focus,
+    offset: nextLineIndex
+  };
+  const at = {
+    anchor: data,
+    focus: data
+  };
+  return {
+    at,
+    indexOfNextLine
+  };
 };
 const updateAnchorEl = (setAnchorEl, editor) => {
   try {
@@ -103,16 +95,14 @@ const updateAnchorEl = (setAnchorEl, editor) => {
       return;
     }
     const selection = window.getSelection();
-    if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
+    if (selection.rangeCount) {
       let caret;
       if (getSelectedText(editor)) {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        const sel = getNextLine(editor);
-        if (sel) {
-          caret = ReactEditor.toDOMRange(editor, sel.at);
-        }
+        const domElement = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
+        caret = domElement?.commonAncestorContainer?.parentElement;
       }
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
@@ -158,7 +148,6 @@ function PopoverAIInput({
   const targetRef = useRef();
   const classes = Styles();
   const editor = useSlate();
-  const [size] = useWindowResize();
   const onClickOutside = () => {
     setAnchorEl(null);
     setOpenAI("");
@@ -189,6 +178,11 @@ function PopoverAIInput({
       onClickOutside();
       return;
     }
+    if (type === "speech_to_text") {
+      Transforms.insertText(editor, option.text);
+      onClickOutside();
+      return;
+    }
     if (type === "try_again") {
       // resetting the previous option and try again
       option = selectedOption;
@@ -199,7 +193,7 @@ function PopoverAIInput({
     setLoading(true);
     const payload = {
       mode: option.mode || 0,
-      query: inputValue
+      query: option?.inputValue || inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
@@ -274,21 +268,7 @@ function PopoverAIInput({
     setInputValue(e.target.value);
   };
   return /*#__PURE__*/_jsxs("div", {
-    children: [size.device === "xs" && openAI ? /*#__PURE__*/_jsx(Box, {
-      component: "div",
-      sx: classes.mobileAIInputWrapper,
-      ref: targetRef,
-      children: /*#__PURE__*/_jsx(AIInput, {
-        loading: loading,
-        onSend: onSend,
-        generatedText: generatedText,
-        anchorEl: anchorEl,
-        openAI: openAI,
-        inputValue: inputValue,
-        onInputChange: onInputChange,
-        onClickOutside: onClickOutside
-      })
-    }) : /*#__PURE__*/_jsx(Popper, {
+    children: [/*#__PURE__*/_jsx(Popper, {
       open: Boolean(openAI),
       anchorEl: anchorEl,
       transition: true,
@@ -307,15 +287,19 @@ function PopoverAIInput({
           sx: getSelectedText(editor) ? {
             marginTop: "6px"
           } : {},
-          children: /*#__PURE__*/_jsx(AIInput, {
-            loading: loading,
+          children: /*#__PURE__*/_jsx(VoiceToText, {
+            otherProps: otherProps,
             onSend: onSend,
-            generatedText: generatedText,
-            anchorEl: anchorEl,
-            openAI: openAI,
-            inputValue: inputValue,
-            onInputChange: onInputChange,
-            onClickOutside: onClickOutside
+            children: /*#__PURE__*/_jsx(AIInput, {
+              loading: loading,
+              onSend: onSend,
+              generatedText: generatedText,
+              anchorEl: anchorEl,
+              openAI: openAI,
+              inputValue: inputValue,
+              onInputChange: onInputChange,
+              onClickOutside: onClickOutside
+            })
           })
         })
       })

package/dist/Editor/Elements/AI/Styles.js

@@ -167,7 +167,8 @@ const Styles = theme => ({
   sendIconContainer: {
     alignSelf: "flex-end",
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    gap: "6px"
   }
 });
 export default Styles;

package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js

@@ -0,0 +1,73 @@
+import { Box } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SoundWave = props => {
+  const {
+    audioChunks = null
+  } = props; // Initialize to null if not provided
+  const waveContent = useRef(null);
+  const wavesurfer = useRef(null);
+  const [playOnce, setPlayOnce] = useState(false);
+  useEffect(() => {
+    if (waveContent.current) {
+      if (wavesurfer.current) {
+        wavesurfer.current.destroy();
+      }
+      wavesurfer.current = WaveSurfer.create({
+        container: waveContent.current,
+        waveColor: "#2563EB",
+        progressColor: "#2563EB",
+        cursorWidth: 0,
+        // Disable the cursor
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 2,
+        scrollParent: false,
+        // Prevent scrolling
+        height: waveContent.current.clientHeight // Set height to fit container
+      });
+
+      // Fit the waveform to the container width
+      const resize = () => {
+        if (wavesurfer.current) {
+          const containerWidth = waveContent.current.clientWidth;
+          const duration = wavesurfer.current.getDuration();
+          if (duration > 0) {
+            const newZoom = containerWidth / duration;
+            wavesurfer.current.zoom(newZoom);
+          }
+        }
+      };
+      window.addEventListener("resize", resize);
+      resize();
+      return () => {
+        window.removeEventListener("resize", resize);
+      };
+    }
+  }, []);
+  useEffect(() => {
+    if (wavesurfer.current && audioChunks) {
+      const audioBlob = new Blob(audioChunks, {
+        type: "audio/webm"
+      });
+      const recordedUrl = URL.createObjectURL(audioBlob);
+      wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
+      if (!playOnce) {
+        setPlayOnce(true);
+      }
+    } else if (wavesurfer.current && !audioChunks) {
+      // Clear the waveform when audioChunks is null
+      wavesurfer.current.empty();
+    }
+  }, [audioChunks, playOnce]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: waveContent,
+    style: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  });
+};
+export const AudioWave = SoundWave;

package/dist/Editor/Elements/AI/VoiceToText/index.js

@@ -0,0 +1,177 @@
+import { useState, useEffect, useRef, cloneElement } from "react";
+import PropTypes from "prop-types";
+import STTStyles from "./style";
+import { Grid, IconButton, Box } from "@mui/material";
+import { AudioWave } from "./AudioWave";
+import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
+import { MODES } from "../helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function STT(props) {
+  const {
+    children,
+    otherProps,
+    onSend
+  } = props;
+  const {
+    services
+  } = otherProps;
+  const classes = STTStyles();
+  const [isRecording, setIsRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState(null);
+  const [audioChunks, setAudioChunks] = useState([]);
+  const [chunkIndex, setChunkIndex] = useState(0);
+  const audioChunksRef = useRef([]);
+  const [transcription, setTranscription] = useState("");
+  const [showPause, setShowPause] = useState(true);
+  const [isAILoading, setAILoading] = useState(false);
+  const setChunk = event => {
+    if (event.data.size > 0) {
+      setAudioChunks(prev => {
+        const updatedChunks = [...prev, event.data];
+        audioChunksRef.current = updatedChunks; // Update ref manually
+        return updatedChunks;
+      });
+    }
+  };
+  const sendChunck = async (isLast = false) => {
+    if (audioChunksRef.current.length > 0) {
+      const audioBlob = new Blob(audioChunksRef.current, {
+        type: "audio/webm"
+      });
+      const formData = new FormData();
+      formData.append("audio", audioBlob, `audio_chunk_${chunkIndex}.wav`);
+      formData.append("chunkIndex", chunkIndex); // Send chunk index to the backend
+      if (isLast) {
+        formData.append("isLastChunk", true); // Send chunk index to the backend
+      } else {
+        formData.append("isLastChunk", false);
+        setChunkIndex(prevIndex => prevIndex + 1);
+      }
+      const result = await services("speechToText", {
+        formData
+      });
+      setTranscription(result?.data);
+      await sendChunck();
+    }
+  };
+  const handleStopRecording = () => {
+    sendChunck(true);
+    setAudioChunks([]);
+  };
+  const startRecording = async () => {
+    setTranscription("");
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true
+    });
+    const recorder = new MediaRecorder(stream);
+    setMediaRecorder(recorder);
+    recorder.ondataavailable = setChunk;
+    recorder.onstop = handleStopRecording;
+    recorder.start(100);
+    setIsRecording(true);
+    setTimeout(() => {
+      sendChunck();
+    }, 2000);
+  };
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+
+      // Stop all tracks to release the microphone
+      if (mediaRecorder.stream) {
+        mediaRecorder.stream.getTracks().forEach(track => track.stop());
+      }
+      setChunkIndex(0);
+      setShowPause(false);
+    }
+  };
+  const sendToInfiniti = async () => {
+    setAILoading(true);
+    setIsRecording(false);
+    const result = await services("infinityAI", {
+      mode: MODES.default,
+      query: transcription
+    });
+    const text = result?.data || "";
+    onSend("speech_to_text", {
+      text
+    });
+    stopRecording();
+    setAILoading(false);
+  };
+  const closeRecording = () => {
+    setAudioChunks([]);
+    stopRecording();
+    setIsRecording(false);
+    setShowPause(true);
+    setTranscription("");
+  };
+  useEffect(() => {
+    audioChunksRef.current = audioChunks;
+  }, [audioChunks]);
+  const transcriptionText = transcription && transcription.replace(/\s+/g, "")?.length; // Remove all whitespace characters like \n \t
+
+  return /*#__PURE__*/_jsx(Grid, {
+    xs: 12,
+    children: /*#__PURE__*/_jsx(Grid, {
+      className: classes.SttContainer,
+      children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
+        xs: 12,
+        children: /*#__PURE__*/cloneElement(children, {
+          startRecording,
+          isAILoading
+        })
+      }) : /*#__PURE__*/_jsxs(Grid, {
+        xs: 12,
+        sx: classes.AudioVizualizerContainer,
+        children: [transcriptionText ? /*#__PURE__*/_jsx(Grid, {
+          xs: 12,
+          sx: classes.TranscriptionContainer,
+          children: /*#__PURE__*/_jsx("pre", {
+            style: {
+              whiteSpace: "pre-wrap",
+              wordWrap: "break-word",
+              fontFamily: "inherit",
+              margin: 0
+            },
+            children: transcription
+          })
+        }) : null, /*#__PURE__*/_jsxs(Grid, {
+          xs: 12,
+          sx: classes.AudioVizualizerContent,
+          children: [/*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: closeRecording,
+              children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            sx: classes.AudioVisualiser,
+            children: /*#__PURE__*/_jsx(AudioWave, {
+              audioChunks: audioChunks
+            })
+          }), /*#__PURE__*/_jsx(Box, {
+            children: showPause ? /*#__PURE__*/_jsx(IconButton, {
+              onClick: stopRecording,
+              children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
+            }) : /*#__PURE__*/_jsx(IconButton, {
+              onClick: sendToInfiniti,
+              disabled: !transcriptionText,
+              style: !transcriptionText ? {
+                opacity: 0.5
+              } : {},
+              children: /*#__PURE__*/_jsx(TickBlueCircle, {})
+            })
+          })]
+        })]
+      })
+    })
+  });
+}
+STT.defaultProps = {
+  classes: {}
+};
+STT.propTypes = {
+  classes: PropTypes.object
+};
+export const VoiceToText = STT;

package/dist/Editor/Elements/AI/VoiceToText/style.js

@@ -0,0 +1,40 @@
+const styles = () => ({
+  SttContainer: {
+    display: "flex",
+    width: "100%",
+    padding: "12px",
+    zIndex: 1
+  },
+  STTInput: {
+    width: "100%",
+    borderRadius: "8px",
+    "&& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#2563EB"
+    },
+    "&& .MuiOutlinedInput-root": {
+      background: "rgba(252, 250, 255, 1)"
+    }
+  },
+  AudioVizualizerContainer: {
+    width: "100%",
+    display: "flex",
+    background: "rgba(252, 250, 255, 1)",
+    borderRadius: "8px",
+    border: "1px solid #2563EB",
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  AudioVizualizerContent: {
+    display: "flex",
+    height: "50px",
+    width: "100%"
+  },
+  AudioVisualiser: {
+    flexGrow: "1",
+    height: "100%"
+  },
+  TranscriptionContainer: {
+    padding: "12px"
+  }
+});
+export default styles;