@flozy/editor 3.8.2 → 3.8.4

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/Accordion/Accordion.js

@@ -9,6 +9,55 @@ import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const accordionBtnStyleKeys = {
+  accordionTextColor: "textColor",
+  accordionBgColor: "bgColor",
+  accordionBorderColor: "borderColor"
+};
+const getAccordionData = updateData => {
+  const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
+  const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
+
+  Object.entries(updateData).forEach(([key, value]) => {
+    const accordionBtnStyleKey = accordionBtnStyleKeys[key];
+    if (accordionBtnStyleKey) {
+      // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
+      accordionBtnStyle[accordionBtnStyleKey] = value;
+      return;
+    }
+    accordionTitleStyle[key] = value;
+  });
+  return {
+    accordionBtnStyle,
+    accordionTitleStyle
+  };
+};
+const convertAccordionBtnStyleKeys = (data = {}) => {
+  const style = {
+    ...data
+  };
+  Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
+    const val = data[value];
+    if (val) {
+      // deleting the existing style key in node e.g: textColor
+      delete style[value];
+
+      // convertint into new key in element props e.g: accordionTextColor
+      style[key] = val;
+    }
+  });
+  return style;
+};
+const getElementProps = element => {
+  const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
+
+  // joining accordion title and button styles
+  const elementProps = {
+    ...accordionSummary,
+    ...convertAccordionBtnStyleKeys(element)
+  };
+  return elementProps;
+};
 const Accordion = props => {
   const {
     attributes,
@@ -69,16 +118,34 @@ const Accordion = props => {
       at: path
     });
   };
+  const setNodes = (data, path) => {
+    Transforms.setNodes(editor, data, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
+    const {
+      accordionBtnStyle,
+      accordionTitleStyle
+    } = getAccordionData(updateData);
+
+    // applying accordion title style
+    const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
+    const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
+    setNodes({
+      ...accordionTitleStyle,
+      type: "accordion-summary",
+      children: accordionSummary.children
+    }, accordionSummaryPath);
+
+    // applying accordion button style
+    delete accordionBtnStyle.children;
+    setNodes({
+      ...accordionBtnStyle
+    }, path);
     onClose();
   };
   const onClose = () => {
@@ -123,7 +190,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: element,
+      element: getElementProps(element),
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
+import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionBtnPopup = props => {
   const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Collapse Button",
+    title: "Accordion Settings",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: accordionTitleBtnStyle,
+    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
     customProps: customProps
   });
 };

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -1,68 +1,17 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import AccordionTitlePopup from "./AccordionTitlePopup";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element,
-    customProps
+    element
   } = props;
-  const {
-    readOnly
-  } = customProps;
-  const [openSetttings, setOpenSettings] = useState(false);
-  const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
-  const selected = useSelected();
-  const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
     bgColor,
     borderColor
   } = element;
-  const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        top: "-42px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
@@ -72,12 +21,7 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
-    }) : null]
+    children: children
   });
 };
 export default AccordionSummary;

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -62,6 +62,11 @@ function AppHeader(props) {
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState);
   };
+  const closeDrawer = () => {
+    if (mobileOpen) {
+      handleDrawerToggle();
+    }
+  };
   const onSettings = e => {
     if (!readOnly) {
       e.stopPropagation();
@@ -148,10 +153,27 @@ function AppHeader(props) {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
         const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const onTouchEnd = e => {
+          if (buttonProps?.onTouchEnd) {
+            buttonProps?.onTouchEnd(e);
+            closeDrawer();
+          }
+        };
+        const onClick = e => {
+          if (buttonProps?.onClick) {
+            buttonProps?.onClick(e);
+            closeDrawer();
+          }
+        };
+        const props = {
+          ...buttonProps,
+          onTouchEnd,
+          onClick
+        };
         return /*#__PURE__*/_jsx(ListItem, {
           disablePadding: true,
           children: /*#__PURE__*/_jsx(ListItemButton, {
-            ...buttonProps,
+            ...props,
             sx: {
               textAlign: "center"
             },
@@ -229,7 +251,7 @@ function AppHeader(props) {
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                color: textColor,
+                color: textColor || "#000000",
                 fontSize: logoFontSize,
                 fontFamily: titleFontFamily,
                 justifyContent: isLogoRight ? "end" : "start"
@@ -277,7 +299,7 @@ function AppHeader(props) {
                     fontFamily: fontFamily,
                     textTransform: "none",
                     fontSize: fontSize || "16px",
-                    color: textColor || "#FFF",
+                    color: textColor || "#000",
                     background: bgColor || "none",
                     "& .m-settings": {
                       display: "none",
@@ -292,7 +314,7 @@ function AppHeader(props) {
                       background: "#FFF"
                     },
                     "&:hover": {
-                      color: textColorHover || textColor || "#FFF",
+                      color: textColorHover || textColor || "#000",
                       background: bgColorHover || bgColor || "none",
                       "& .m-settings": {
                         display: "block"

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

@@ -13,6 +13,9 @@ import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
+import { useEditorTheme } from "../../hooks/useEditorTheme";
+import { getTheme } from "../../theme";
+import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -30,6 +33,12 @@ const EditorButton = props => {
   const path = ReactEditor.findPath(editor, element);
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
+  const {
+    theme
+  } = useEditorTheme();
+  const {
+    buttonTheme
+  } = getTheme(theme);
   const {
     label,
     bgColor,
@@ -43,7 +52,7 @@ const EditorButton = props => {
     fontFamily,
     textColorHover,
     bgColorHover,
-    buttonIcon,
+    // buttonIcon,
     iconPosition = "start",
     borderStyle,
     borderWidth,
@@ -62,13 +71,15 @@ const EditorButton = props => {
   } = actionTrigger || {
     options: []
   };
-  const isTrigger = linkType === "actionTrigger";
+  const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
   const refURl = isTrigger ? buttonLink?.url : url;
+  const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
   const BtnIcon = buttonIcon ? buttonIcon : null;
   windowVar.lastButtonProps = element;
   const handleTrigger = async () => {
     if (metadata?.buttonLink?.handler) {
-      metadata.buttonLink.handler("click");
+      const response = isTrigger ? linkType : "click";
+      metadata.buttonLink.handler(response);
     } else if (redirectOnURLResult) {
       // call api and redirect based on api result
       const apiResult = await actionButtonRedirect({}, {
@@ -186,20 +197,9 @@ const EditorButton = props => {
         children: [/*#__PURE__*/_jsxs(Box, {
           sx: {
             textDecoration: "none",
-            background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
-            borderColor: borderColor || "transparent",
             borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
-            borderRadius: {
-              ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-            },
             borderStyle: borderStyle || "solid",
-            padding: {
-              ...getTRBLBreakPoints(bannerSpacing)
-            },
-            color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "inherit",
-            fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
@@ -207,14 +207,26 @@ const EditorButton = props => {
               display: "none"
             },
             "&:hover": {
-              color: `${textColorHover || textColor || "#FFFFFF"}`,
-              background: bgColorHover || bgColor || "rgb(30, 75, 122)",
+              color: `${textColorHover || textColor}`,
+              background: bgColorHover || bgColor,
               "& .element-toolbar": {
                 display: "flex"
               }
+            },
+            color: `${textColor} !important`,
+            fontSize: `${textSize}px !important`,
+            fontFamily: `${fontFamilyMap[fontFamily] || ""}  !important`,
+            background: `${bgColor} !important`,
+            borderColor: `${borderColor} !important`,
+            borderRadius: {
+              ...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
+            },
+            padding: {
+              ...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
             }
           },
           ...buttonProps,
+          className: "button theme-element",
           children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
             iconName: buttonIcon,
             style: {