@flozy/editor 3.9.0 → 3.9.1

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;

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

@@ -1,6 +1,4 @@
 import React from "react";
-import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -11,27 +9,18 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
-    sx: {
+    style: {
       width: "100%",
       position: "relative",
       backgroundColor: bgColor,
       border: `1px solid ${borderColor}`,
-      color: textColor,
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      }
+      color: textColor
     },
-    component: "div",
     children: children
   });
 };

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: {

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -1,11 +1,15 @@
-import React, { useState } from "react";
-import { Box, IconButton, Popover } from "@mui/material";
+import React, { useContext, useState } from "react";
+import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
+import { ThemeContext } from "../../CommonEditor";
+import { useSlateStatic } from "slate-react";
+import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
@@ -31,9 +35,7 @@ const SingleColorButton = ({
     style: {
       width: "100%",
       display: "flex",
-      alignItems: "center",
-      padding: padding || "8px",
-      justifyContent: "center"
+      padding: padding || "8px"
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
       onClick: handleSelect(m),
@@ -109,11 +111,17 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick
+    onColorPickerClick,
+    disableEditTheme
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const theme = useTheme();
+  const editor = useSlateStatic();
+  const {
+    setOpenTheme
+  } = useContext(ThemeContext);
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -126,6 +134,7 @@ const ColorButtons = props => {
   const handleSelect = color => () => {
     onSelect(color);
   };
+  const colorVars = theme?.vars?.colors || {};
   return /*#__PURE__*/_jsxs(Box, {
     component: "span",
     sx: classes.colorButtons,
@@ -142,7 +151,7 @@ const ColorButtons = props => {
           activeColor: activeColor
         }, `si_btn_row1_${m}_${i}`);
       })
-    }), /*#__PURE__*/_jsxs(Popover, {
+    }), /*#__PURE__*/_jsx(Popover, {
       open: open || openColorTool,
       anchorEl: anchorEl || openColorTool,
       onClose: handleClose,
@@ -156,9 +165,39 @@ const ColorButtons = props => {
       },
       sx: classes.colorPopper,
       className: "colorPopper",
-      children: [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         sx: classes.colorButtonsInner,
-        children: restRows.map((m, i) => {
+        children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(Box, {
+            component: "div",
+            className: "singleColorTitleWrapper",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "subtitle2",
+              children: "Theme colour"
+            }), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
+              className: "editBtn",
+              onClick: () => {
+                Transforms.deselect(editor, {
+                  at: editor.selection
+                });
+                setOpenTheme("editThemeColor");
+              },
+              children: "Edit"
+            })]
+          }), /*#__PURE__*/_jsx(SingleColorButton, {
+            crs: Object.values(colorVars),
+            handleSelect: handleSelect,
+            classes: classes,
+            activeColor: activeColor
+          })]
+        }) : null, /*#__PURE__*/_jsx(Box, {
+          component: "div",
+          className: "singleColorTitleWrapper",
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: "subtitle2",
+            children: "Custom colour"
+          })
+        }), restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
             id: `p2_${id}`,
             crs: m,
@@ -167,14 +206,18 @@ const ColorButtons = props => {
             classes: classes,
             activeColor: activeColor
           }, `si_btn_${m}_${i}`);
-        })
-      }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
-        onClick: onColorPickerClick,
-        children: /*#__PURE__*/_jsx("img", {
-          src: ColorPicker,
-          alt: "color wheel"
-        })
-      }) : null]
+        }), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
+          onClick: onColorPickerClick,
+          style: {
+            alignSelf: "start",
+            margin: "6px"
+          },
+          children: /*#__PURE__*/_jsx("img", {
+            src: ColorPicker,
+            alt: "color wheel"
+          })
+        }) : null]
+      })
     })]
   });
 };

package/dist/Editor/Elements/Color Picker/ColorPicker.css

@@ -60,4 +60,28 @@
   padding: 0 15px !important;
   width: 60px !important;
   flex-shrink: 0;
-}
+}
+
+
+.singleColorTitleWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+  border-bottom: 1px solid #DCE4EC;
+}
+
+.singleColorTitleWrapper .MuiTypography-root {
+  font-weight: 600;
+}
+
+.singleColorTitleWrapper .editBtn {
+  text-transform: none;
+  color: #2563EB;
+  text-decoration: underline;
+  padding: 0px;
+  min-width: unset;
+  cursor: pointer;
+  font-size: 14px;
+}