@flozy/editor 3.7.7 → 3.7.9

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor } from 'slate';
+import { createEditor, Transforms } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -26,7 +26,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     needLayout = false,
     toolBar = true,
     onSave,
-    onsubmit
+    onsubmit,
+    onBlur = () => {}
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
@@ -36,6 +37,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [value, setValue] = useState(convertedContent);
   const [loadedValue] = useState(value);
   const [deboundedValue] = useDebounce(value, 500);
+  const [isExternalUpdate, setIsExternalUpdate] = useState(false);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
       needLayout
@@ -46,17 +48,60 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     emojiClick: emoji => {
       if (editor) {
         insertEmoji(editor, emoji?.native, editor.selection);
+        if (editor.selection) {
+          // const path = editor.selection.anchor.path;
+          // const offset = editor.selection.anchor.offset + emoji?.native.length;
+          const position = {
+            anchor: {
+              path: [0],
+              offset: 0
+            },
+            focus: {
+              path: [0],
+              offset: 0
+            }
+          };
+          // Create a new selection
+          Transforms.select(editor, position);
+        }
         ReactEditor.focus(editor);
       }
     },
+    setContent: newContent => {
+      setIsExternalUpdate(true);
+      setValue(newContent);
+      ReactEditor.focus(editor);
+    },
     // Focus enable
-    enableFocus: () => {
-      if (editor) {
-        ReactEditor.focus(editor);
+    //     enableFocus: () => {
+    //     if (editor) {
+    //         const position = {
+    //             anchor: { path: [0], offset: 0 },
+    //             focus: { path: [0], offset: 0 },
+    //         };
+    //         Transforms.select(editor, position);
+    //         ReactEditor.focus(editor);
+    //     }
+    // },
+
+    clearAll: () => {
+      if (!editor) return;
+      while (editor.children.length > 0) {
+        Transforms.removeNodes(editor, {
+          at: [0]
+        });
       }
+      Transforms.insertNodes(editor, {
+        type: 'paragraph',
+        children: [{
+          text: ''
+        }]
+      });
+      ReactEditor.focus(editor);
     }
   }));
   useEffect(() => {
+    setIsExternalUpdate(true);
     setValue(draftToSlate({
       data: content
     }));
@@ -123,9 +168,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    setValue(newValue);
-    if (!isInteracted) {
-      setIsInteracted(true);
+    if (isExternalUpdate) {
+      setIsExternalUpdate(false);
+      return;
+    } else {
+      setValue(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
+      }
     }
   };
   const Element = props => {
@@ -162,18 +212,36 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         event,
         editor
       });
-    } else if (event.key === "Enter" && !event.shiftKey) {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(value);
-      onsubmit(false, {
-        strVal,
-        restVal
-      });
+    } else if (event.key === "Enter") {
+      const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
+      if (isEmpty) {
+        event.preventDefault();
+        return;
+      }
+      if (!event.shiftKey) {
+        const {
+          value: strVal,
+          ...restVal
+        } = getOnSaveData(value);
+        onsubmit(false, {
+          strVal,
+          restVal
+        });
+        event.preventDefault();
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const handleClose = () => {};
+  const handleBlur = () => {
+    const {
+      value: strVal,
+      ...restVal
+    } = getOnSaveData(value);
+    onBlur({
+      strVal,
+      restVal
+    });
+  };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -192,6 +260,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         autoFocus: true,
+        onBlur: handleBlur,
         onKeyDown: onKeyDown
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,

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

@@ -11,6 +11,8 @@ import CustomSelect from "./CustomSelect";
 import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
 import useClickOutside from "../../hooks/useClickOutside";
 import { useEditorContext } from "../../hooks/useMouseMove";
+// import { VoiceToText } from "./VoiceToText";
+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,12 +38,13 @@ function getProps(openAI, generatedText) {
 }
 function AIInput({
   onSend,
-  loading,
   generatedText,
   openAI,
   inputValue,
   onInputChange,
-  onClickOutside
+  onClickOutside,
+  startRecording,
+  ...rest
 }, ref) {
   const {
     theme
@@ -67,6 +70,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";
@@ -132,18 +136,25 @@ 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, {

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

@@ -8,6 +8,7 @@ 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 = () => {
@@ -178,6 +179,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;
@@ -188,7 +194,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;
@@ -267,15 +273,19 @@ function PopoverAIInput({
       component: "div",
       sx: classes.mobileAIInputWrapper,
       ref: targetRef,
-      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
+        })
       })
     }) : /*#__PURE__*/_jsx(Popper, {
       open: Boolean(openAI),
@@ -296,15 +306,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,167 @@
+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]);
+  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: [transcription ? /*#__PURE__*/_jsx(Grid, {
+          xs: 12,
+          sx: classes.TranscriptionContainer,
+          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: !transcription,
+              style: !transcription ? {
+                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;

package/dist/Editor/Elements/Button/EditorButton.js

@@ -232,13 +232,15 @@ const EditorButton = props => {
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
-            }
+            },
+            props: customProps
           }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
             iconName: buttonIcon,
             style: {
               paddingLeft: "4px",
               paddingRight: "4px"
-            }
+            },
+            props: customProps
           })]
         }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
           className: "workflow-icon-btn",

package/dist/Editor/Elements/ChipText/ChipText.js

@@ -89,7 +89,8 @@ const ChipText = props => {
         display: "inline-block",
         verticalAlign: "middle"
       },
-      onClick: handleStyle
+      onClick: handleStyle,
+      props: customProps
     }), /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       style: {

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/Table/Table.js

@@ -183,7 +183,7 @@ const Table = props => {
     children: [/*#__PURE__*/_jsx(TableComp, {
       sx: classes.table,
       style: {
-        backgroundColor: bgColor,
+        background: bgColor,
         border: `1px solid ${borderColor}`,
         width: "auto"
       },

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Popper, Fade, Paper } from "@mui/material";
+import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate, useFocused } from "slate-react";
+import { useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -9,7 +9,6 @@ import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
@@ -24,7 +23,6 @@ const PopupTool = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
-  const inFocus = useFocused();
   const {
     selection
   } = editor;
@@ -32,11 +30,6 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
-  useEffect(() => {
-    if (!inFocus) {
-      setAnchorEl(null);
-    }
-  }, [inFocus]);
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -53,7 +46,7 @@ const PopupTool = props => {
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
@@ -84,7 +77,14 @@ const PopupTool = props => {
     setOpen(false);
     setPopupType("");
   };
-  return open && !openAI ? /*#__PURE__*/_jsx(_Fragment, {
+  return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: e => {
+      // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
+      if (e.target !== document.body) {
+        // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close
+        handleClose();
+      }
+    },
     children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
       className: "mobileMiniTextWrapper",
       children: /*#__PURE__*/_jsx(MiniTextFormat, {

package/dist/Editor/assets/svg/AIIcons.js

@@ -435,4 +435,156 @@ export function DeleteIcon(props) {
       strokeLinejoin: "round"
     })]
   });
-}
+}
+export const PauseRecordingIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "15",
+    cy: "15",
+    r: "14.5",
+    fill: "white",
+    stroke: "url(#paint0_linear_29403_449555)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M13.6916 21.125H10.8817C10.5953 21.125 10.3447 20.8744 10.3447 20.5881V9.84943C10.3447 9.54517 10.5953 9.3125 10.8817 9.3125H13.6916C13.932 9.3125 14.2285 9.54517 14.2285 9.84943V20.5881C14.2285 20.8744 13.932 21.125 13.6916 21.125Z",
+    fill: "url(#paint1_linear_29403_449555)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M20.1346 21.125H17.3426C17.0383 21.125 16.8057 20.8744 16.8057 20.5881V9.84943C16.8057 9.54517 17.0383 9.3125 17.3426 9.3125H20.1525C20.4568 9.3125 20.6895 9.54517 20.6895 9.84943V20.5881C20.6716 20.8744 20.4389 21.125 20.1346 21.125Z",
+    fill: "url(#paint2_linear_29403_449555)"
+  }), /*#__PURE__*/_jsxs("defs", {
+    children: [/*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint0_linear_29403_449555",
+      x1: "15",
+      y1: "0",
+      x2: "15",
+      y2: "30",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8061FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2C64ED"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint1_linear_29403_449555",
+      x1: "12.2866",
+      y1: "9.3125",
+      x2: "12.2866",
+      y2: "21.125",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8161FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2A64EC"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint2_linear_29403_449555",
+      x1: "18.7476",
+      y1: "9.3125",
+      x2: "18.7476",
+      y2: "21.125",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8161FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2A64EC"
+      })]
+    })]
+  })]
+});
+export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "30",
+    height: "30",
+    rx: "15",
+    fill: "#DAE4ED"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19.1245 10.875L10.8749 19.1246",
+    stroke: "#2563EB",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.875 10.875L19.1246 19.1246",
+    stroke: "#2563EB",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const TickBlueCircle = () => /*#__PURE__*/_jsxs("svg", {
+  width: "30",
+  height: "30",
+  viewBox: "0 0 30 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "30",
+    height: "30",
+    rx: "15",
+    fill: "url(#paint0_linear_30220_64249)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 15L13.0011 19L21 11",
+    stroke: "white",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("defs", {
+    children: /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint0_linear_30220_64249",
+      x1: "15",
+      y1: "0",
+      x2: "15",
+      y2: "30",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#8360FD"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "1",
+        stopColor: "#2563EB"
+      })]
+    })
+  })]
+});
+export const ChatMicIcon = props => /*#__PURE__*/_jsxs("svg", {
+  width: "26",
+  height: "26",
+  viewBox: "0 0 26 26",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13 19.3194C15.9882 19.3194 18.4166 16.8909 18.4166 13.9028V9.38887C18.4166 6.40067 15.9882 3.9722 13 3.9722C10.0118 3.9722 7.58331 6.40067 7.58331 9.38887V13.9028C7.58331 16.8909 10.0118 19.3194 13 19.3194Z",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4.875 12.0972V13.9028C4.875 18.3896 8.51319 22.0278 13 22.0278C17.4868 22.0278 21.125 18.3896 21.125 13.9028V12.0972",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.3913 8.91914C11.9982 8.33233 13.7496 8.33233 15.3565 8.91914",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.2218 11.6295C12.3051 11.3316 13.4516 11.3316 14.535 11.6295",
+    stroke: "#94A3B8",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});

package/dist/Editor/common/MUIIcon/index.js

@@ -1,9 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-const iconLoader = async iconName => {
+const iconLoader = async (iconName, ...props) => {
   try {
-    const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
+    const [{
+      props: {
+        ICON_API
+      }
+    }] = props;
+    const iconResponse = await fetch(`${ICON_API}/icon/${iconName}`);
     const icon = await iconResponse.text();
     return icon;
   } catch (error) {
@@ -19,7 +24,7 @@ const DynamicIcon = ({
   const [icon, setIcon] = useState("");
   useEffect(() => {
     let mounted = true;
-    iconLoader(iconName).then(iconHTML => {
+    iconLoader(iconName, props).then(iconHTML => {
       if (mounted) {
         setIcon(iconHTML);
       }

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
   papper: {
     boxShadow: "none",
     width: "300px",
-    height: "auto",
+    maxHeight: "300px",
     overflow: "auto",
     padding: "8px",
     margin: "0px",

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -9,7 +9,8 @@ const Icons = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    customProps
   } = props;
   const {
     key
@@ -74,7 +75,8 @@ const Icons = props => {
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: onRemoveIcon,
               children: /*#__PURE__*/_jsx(MUIIcon, {
-                iconName: value
+                iconName: value,
+                props: customProps
               })
             })
           }) : ""
@@ -96,7 +98,8 @@ const Icons = props => {
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
             children: /*#__PURE__*/_jsx(MUIIcon, {
-              iconName: m
+              iconName: m,
+              props: customProps
             })
           })
         }, `mui_ico_${m}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.7.7",
+  "version": "3.7.9",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -46,6 +46,7 @@
     "slate-react": "^0.98.3",
     "styled-components": "^5.3.11",
     "use-debounce": "^10.0.0",
+    "wavesurfer.js": "^7.8.6",
     "web-vitals": "^2.1.4",
     "y-websocket": "^1.5.0",
     "yjs": "^13.6.8"