@flozy/editor 3.8.9 → 3.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (194) hide show
  1. package/dist/Editor/ChatEditor.js +55 -45
  2. package/dist/Editor/CommonEditor.js +175 -168
  3. package/dist/Editor/DialogWrapper.js +3 -4
  4. package/dist/Editor/Editor.css +7 -4
  5. package/dist/Editor/Elements/AI/AIInput.js +17 -18
  6. package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
  7. package/dist/Editor/Elements/AI/PopoverAIInput.js +58 -74
  8. package/dist/Editor/Elements/AI/Styles.js +2 -1
  9. package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
  10. package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
  11. package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
  12. package/dist/Editor/Elements/AppHeader/AppHeader.js +49 -40
  13. package/dist/Editor/Elements/Button/EditorButton.js +38 -33
  14. package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
  15. package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
  16. package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
  17. package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
  18. package/dist/Editor/Elements/Embed/Image.js +14 -15
  19. package/dist/Editor/Elements/Embed/Video.js +8 -12
  20. package/dist/Editor/Elements/Emoji/EmojiButton.js +7 -11
  21. package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
  22. package/dist/Editor/Elements/Form/Form.js +1 -1
  23. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
  24. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
  25. package/dist/Editor/Elements/Grid/Grid.js +34 -14
  26. package/dist/Editor/Elements/Grid/GridItem.js +23 -31
  27. package/dist/Editor/Elements/Link/Link.js +6 -1
  28. package/dist/Editor/Elements/Link/LinkButton.js +4 -2
  29. package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
  30. package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
  31. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +8 -4
  32. package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
  33. package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
  34. package/dist/Editor/Elements/SimpleText/index.js +8 -9
  35. package/dist/Editor/Elements/SimpleText/style.js +0 -37
  36. package/dist/Editor/Elements/Table/Styles.js +23 -1
  37. package/dist/Editor/Elements/Table/Table.js +2 -1
  38. package/dist/Editor/Elements/Table/TableCell.js +69 -7
  39. package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
  40. package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
  41. package/dist/Editor/MiniEditor.js +3 -1
  42. package/dist/Editor/Styles/EditorStyles.js +1 -24
  43. package/dist/Editor/Toolbar/Basic/index.js +4 -2
  44. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
  45. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  46. package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
  47. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +29 -3
  48. package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
  49. package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
  50. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
  51. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
  52. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
  53. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
  54. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -8
  55. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
  56. package/dist/Editor/Toolbar/PopupTool/index.js +7 -25
  57. package/dist/Editor/Toolbar/Toolbar.js +0 -7
  58. package/dist/Editor/Toolbar/toolbarGroups.js +48 -11
  59. package/dist/Editor/assets/svg/AIIcons.js +153 -1
  60. package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
  61. package/dist/Editor/assets/svg/RedoIcon.js +27 -0
  62. package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
  63. package/dist/Editor/assets/svg/TextIcon.js +8 -5
  64. package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
  65. package/dist/Editor/assets/svg/UndoIcon.js +27 -0
  66. package/dist/Editor/common/ColorPickerButton.js +25 -9
  67. package/dist/Editor/common/CustomColorPicker/index.js +106 -0
  68. package/dist/Editor/common/CustomColorPicker/style.js +53 -0
  69. package/dist/Editor/common/CustomDialog/index.js +94 -0
  70. package/dist/Editor/common/CustomDialog/style.js +67 -0
  71. package/dist/Editor/common/CustomSelect.js +33 -0
  72. package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
  73. package/dist/Editor/common/Icon.js +41 -8
  74. package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
  75. package/dist/Editor/common/LinkSettings/index.js +4 -2
  76. package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
  77. package/dist/Editor/common/LinkSettings/style.js +11 -8
  78. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
  79. package/dist/Editor/common/MentionsPopup/index.js +8 -12
  80. package/dist/Editor/common/Section/index.js +69 -28
  81. package/dist/Editor/common/Section/styles.js +12 -6
  82. package/dist/Editor/common/Shorthands/elements.js +54 -12
  83. package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
  84. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +19 -16
  85. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
  86. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
  87. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +2 -4
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
  92. package/dist/Editor/common/StyleBuilder/index.js +1 -1
  93. package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -13
  94. package/dist/Editor/common/iconslist.js +0 -31
  95. package/dist/Editor/helper/index.js +0 -139
  96. package/dist/Editor/helper/theme.js +185 -48
  97. package/dist/Editor/hooks/useEditorTheme.js +139 -0
  98. package/dist/Editor/hooks/useMouseMove.js +12 -37
  99. package/dist/Editor/hooks/useWindowMessage.js +10 -7
  100. package/dist/Editor/hooks/withCommon.js +1 -2
  101. package/dist/Editor/plugins/withEmbeds.js +1 -1
  102. package/dist/Editor/plugins/withHTML.js +1 -1
  103. package/dist/Editor/plugins/withTable.js +1 -1
  104. package/dist/Editor/theme/ThemeList.js +50 -173
  105. package/dist/Editor/theme/index.js +144 -0
  106. package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
  107. package/dist/Editor/themeSettings/buttons/index.js +290 -0
  108. package/dist/Editor/themeSettings/buttons/style.js +21 -0
  109. package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
  110. package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
  111. package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
  112. package/dist/Editor/themeSettings/fonts/index.js +213 -0
  113. package/dist/Editor/themeSettings/fonts/style.js +44 -0
  114. package/dist/Editor/themeSettings/icons.js +60 -0
  115. package/dist/Editor/themeSettings/index.js +320 -0
  116. package/dist/Editor/themeSettings/style.js +152 -0
  117. package/dist/Editor/themeSettingsAI/icons.js +96 -0
  118. package/dist/Editor/themeSettingsAI/index.js +356 -0
  119. package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
  120. package/dist/Editor/themeSettingsAI/style.js +247 -0
  121. package/dist/Editor/utils/SlateUtilityFunctions.js +163 -47
  122. package/dist/Editor/utils/button.js +1 -17
  123. package/dist/Editor/utils/draftToSlate.js +1 -1
  124. package/dist/Editor/utils/events.js +54 -7
  125. package/dist/Editor/utils/font.js +40 -37
  126. package/dist/Editor/utils/helper.js +31 -31
  127. package/dist/Editor/utils/table.js +51 -43
  128. package/package.json +4 -6
  129. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -391
  130. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -193
  131. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +0 -23
  132. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -184
  133. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -36
  134. package/dist/Editor/Elements/FreeGrid/Options/More.js +0 -24
  135. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +0 -47
  136. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +0 -11
  137. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +0 -75
  138. package/dist/Editor/Elements/FreeGrid/styles.js +0 -159
  139. package/dist/Editor/ErrorBoundary.js +0 -30
  140. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +0 -105
  141. package/dist/Editor/common/RnD/ContextMenu/index.js +0 -38
  142. package/dist/Editor/common/RnD/ContextMenu/styles.js +0 -21
  143. package/dist/Editor/common/RnD/DragInfo/index.js +0 -31
  144. package/dist/Editor/common/RnD/DragInfo/styles.js +0 -15
  145. package/dist/Editor/common/RnD/DragOver/index.js +0 -46
  146. package/dist/Editor/common/RnD/DragOver/styles.js +0 -23
  147. package/dist/Editor/common/RnD/ElementOptions/Actions.js +0 -82
  148. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -26
  149. package/dist/Editor/common/RnD/ElementOptions/index.js +0 -93
  150. package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -41
  151. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +0 -153
  152. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +0 -58
  153. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +0 -7
  154. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +0 -46
  155. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +0 -46
  156. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +0 -46
  157. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -30
  158. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +0 -46
  159. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +0 -13
  160. package/dist/Editor/common/RnD/ElementSettings/index.js +0 -17
  161. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +0 -14
  162. package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -76
  163. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +0 -52
  164. package/dist/Editor/common/RnD/GuideLines/index.js +0 -33
  165. package/dist/Editor/common/RnD/GuideLines/styles.js +0 -60
  166. package/dist/Editor/common/RnD/OptionsPopup/index.js +0 -50
  167. package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -36
  168. package/dist/Editor/common/RnD/RnDCopy.js +0 -23
  169. package/dist/Editor/common/RnD/ShadowElement.js +0 -34
  170. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -40
  171. package/dist/Editor/common/RnD/SwitchViewport/styles.js +0 -24
  172. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +0 -63
  173. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +0 -19
  174. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +0 -13
  175. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +0 -18
  176. package/dist/Editor/common/RnD/TransformHandles/index.js +0 -62
  177. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +0 -26
  178. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +0 -98
  179. package/dist/Editor/common/RnD/Utils/collisionDetection.js +0 -52
  180. package/dist/Editor/common/RnD/Utils/gridDropItem.js +0 -148
  181. package/dist/Editor/common/RnD/Utils/index.js +0 -251
  182. package/dist/Editor/common/RnD/VirtualElement/index.js +0 -76
  183. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -27
  184. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +0 -28
  185. package/dist/Editor/common/RnD/index.js +0 -503
  186. package/dist/Editor/common/RnD/styles.js +0 -4
  187. package/dist/Editor/common/StyleBuilder/boxStyle.js +0 -30
  188. package/dist/Editor/helper/RnD/focusOnNewItem.js +0 -39
  189. package/dist/Editor/helper/RnD/scrollToNewSection.js +0 -24
  190. package/dist/Editor/helper/breakpoint.js +0 -5
  191. package/dist/Editor/hooks/useBreakpoints.js +0 -34
  192. package/dist/Editor/hooks/withErrorHandling.js +0 -14
  193. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +0 -168
  194. package/dist/Editor/utils/freegrid.js +0 -49
@@ -6,11 +6,11 @@ import Icon from "../../common/Icon";
6
6
  import { IoSend } from "react-icons/io5";
7
7
  import React, { forwardRef, useEffect, useRef } from "react";
8
8
  import WaveLoading from "../../common/WaveLoading";
9
- import useWindowResize from "../../hooks/useWindowResize";
10
9
  import CustomSelect from "./CustomSelect";
11
10
  import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
12
11
  import useClickOutside from "../../hooks/useClickOutside";
13
12
  import { useEditorContext } from "../../hooks/useMouseMove";
13
+ import { ChatMicIcon } from "../../assets/svg/AIIcons";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
16
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -36,19 +36,19 @@ function getProps(openAI, generatedText) {
36
36
  }
37
37
  function AIInput({
38
38
  onSend,
39
- loading,
40
39
  generatedText,
41
40
  openAI,
42
41
  inputValue,
43
42
  onInputChange,
44
- onClickOutside
43
+ onClickOutside,
44
+ startRecording,
45
+ ...rest
45
46
  }, ref) {
46
47
  const {
47
48
  theme
48
49
  } = useEditorContext();
49
50
  const classes = Styles(theme);
50
51
  const inputRef = useRef();
51
- const [size] = useWindowResize();
52
52
  const inputWrapperRef = useRef();
53
53
  const refs = useClickOutside({
54
54
  onClickOutside,
@@ -67,6 +67,7 @@ function AIInput({
67
67
  clearTimeout(timeoutId);
68
68
  };
69
69
  }, [openAI]);
70
+ const loading = rest?.loading || rest?.isAILoading;
70
71
  const isSendBtnDisabled = !inputValue || loading;
71
72
  const props = getProps(openAI, generatedText) || {};
72
73
  const fromToolBar = openAI === "fromToolBar";
@@ -80,16 +81,7 @@ function AIInput({
80
81
  });
81
82
  };
82
83
  return /*#__PURE__*/_jsxs(_Fragment, {
83
- children: [size.device === "xs" ? /*#__PURE__*/_jsx(Box, {
84
- component: "div",
85
- ref: refs[1],
86
- sx: classes.customSelectWrapper,
87
- children: /*#__PURE__*/_jsx(CustomSelect, {
88
- ...props,
89
- onSend: onSend,
90
- classes: classes
91
- })
92
- }) : null, /*#__PURE__*/_jsxs(Box, {
84
+ children: [/*#__PURE__*/_jsxs(Box, {
93
85
  component: "div",
94
86
  sx: classes.aiContainer,
95
87
  children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
@@ -132,21 +124,28 @@ function AIInput({
132
124
  handleSendBtnClick();
133
125
  }
134
126
  }
135
- }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
127
+ }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
136
128
  component: "div",
137
129
  style: classes.sendIconContainer,
138
130
  className: "icons-elements",
139
- children: /*#__PURE__*/_jsx(IconButton, {
131
+ children: [/*#__PURE__*/_jsx(IconButton
132
+ // sx={
133
+ // isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn
134
+ // }
135
+ , {
136
+ onClick: () => startRecording(),
137
+ children: /*#__PURE__*/_jsx(ChatMicIcon, {})
138
+ }), /*#__PURE__*/_jsx(IconButton, {
140
139
  sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
141
140
  onClick: () => handleSendBtnClick(),
142
141
  children: /*#__PURE__*/_jsx(IoSend, {
143
142
  color: "#fff",
144
143
  size: 14
145
144
  })
146
- })
145
+ })]
147
146
  })]
148
147
  })]
149
- }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
148
+ }), /*#__PURE__*/_jsx(Box, {
150
149
  component: "div",
151
150
  ref: refs[1],
152
151
  sx: classes.customSelectWrapper,
@@ -1,4 +1,4 @@
1
- import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
1
+ import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
2
2
  import React, { useRef, useState } from "react";
3
3
  import { FaChevronRight } from "react-icons/fa";
4
4
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,9 +49,17 @@ function DisplayOption({
49
49
  } = option;
50
50
  const [open, setOpen] = useState(false);
51
51
  const optionRef = useRef();
52
+ const openOptions = e => {
53
+ if (option.options?.length && !open) {
54
+ setOpen(e.currentTarget);
55
+ return;
56
+ }
57
+ };
52
58
  return /*#__PURE__*/_jsxs(Box, {
53
59
  sx: classes.optionWrapper,
54
60
  ref: optionRef,
61
+ onMouseEnter: openOptions,
62
+ onMouseLeave: () => setOpen(null),
55
63
  children: [/*#__PURE__*/_jsxs(Button, {
56
64
  sx: classes.optionBtn,
57
65
  onClick: e => {
@@ -59,7 +67,7 @@ function DisplayOption({
59
67
 
60
68
  // is having child options
61
69
  if (option.options?.length) {
62
- setOpen(e.currentTarget);
70
+ openOptions(e);
63
71
  return;
64
72
  }
65
73
  setOpen(null);
@@ -77,25 +85,24 @@ function DisplayOption({
77
85
  size: 12
78
86
  })
79
87
  })]
80
- }), /*#__PURE__*/_jsx(Popover, {
88
+ }), /*#__PURE__*/_jsx(Popper, {
81
89
  open: open && option.options,
82
90
  anchorEl: open,
83
91
  sx: {
84
92
  zIndex: 9001,
85
93
  background: "transparent"
86
94
  },
87
- anchorOrigin: {
88
- vertical: "top",
89
- horizontal: "right"
90
- },
91
95
  onClose: () => {
92
96
  setOpen(null);
93
97
  },
94
- children: /*#__PURE__*/_jsx(CustomSelect, {
95
- options: option.options,
96
- onSend: onSend,
97
- classes: classes,
98
- show: open
98
+ placement: "right-start",
99
+ children: /*#__PURE__*/_jsx(Box, {
100
+ children: /*#__PURE__*/_jsx(CustomSelect, {
101
+ options: option.options,
102
+ onSend: onSend,
103
+ classes: classes,
104
+ show: open
105
+ })
99
106
  })
100
107
  })]
101
108
  });
@@ -1,13 +1,13 @@
1
1
  import { useEffect, useRef, useState } from "react";
2
2
  import { useEditorContext } from "../../hooks/useMouseMove";
3
3
  import Styles from "./Styles";
4
- import { Box, Fade, Paper, Popper } from "@mui/material";
4
+ import { Fade, Paper, Popper } from "@mui/material";
5
5
  import AIInput from "./AIInput";
6
6
  import { ReactEditor, useSlate } from "slate-react";
7
7
  import { Editor, Node, Path, Transforms } from "slate";
8
- import useWindowResize from "../../hooks/useWindowResize";
9
8
  import { MODES } from "./helper";
10
9
  import { getSelectedText } from "../../utils/helper";
10
+ import { VoiceToText } from "./VoiceToText";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
13
  const scrollToAIInput = () => {
@@ -51,51 +51,43 @@ const insertAtNextLine = (editor, text) => {
51
51
  });
52
52
  };
53
53
  const getNextLine = editor => {
54
- try {
55
- const {
56
- selection
57
- } = editor;
58
- const {
59
- focus
60
- } = selection;
61
- if (focus?.path?.length > 0) {
62
- const {
63
- text = ""
64
- } = Node.get(editor, focus.path);
65
- let nextLineIndex = 0;
66
- let indexOfNextLine = 0;
67
- if (text?.length) {
68
- // split the text based on caret position
69
- const textBeforeCaret = text.substring(0, focus.offset);
70
- const textAfterCaret = text.substring(focus.offset);
54
+ const {
55
+ selection
56
+ } = editor;
57
+ const {
58
+ focus
59
+ } = selection;
60
+ const {
61
+ text = ""
62
+ } = Node.get(editor, focus.path);
63
+ let nextLineIndex = 0;
64
+ let indexOfNextLine = 0;
65
+ if (text?.length) {
66
+ // split the text based on caret position
67
+ const textBeforeCaret = text.substring(0, focus.offset);
68
+ const textAfterCaret = text.substring(focus.offset);
71
69
 
72
- // getting the index of the next line after the caret position
73
- indexOfNextLine = textAfterCaret?.indexOf("\n");
74
- if (indexOfNextLine >= 0) {
75
- // index of next line
76
- nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
77
- } else {
78
- nextLineIndex = text?.length;
79
- }
80
- }
81
- const data = {
82
- ...focus,
83
- offset: nextLineIndex
84
- };
85
- const at = {
86
- anchor: data,
87
- focus: data
88
- };
89
- return {
90
- at,
91
- indexOfNextLine
92
- };
70
+ // getting the index of the next line after the caret position
71
+ indexOfNextLine = textAfterCaret?.indexOf("\n");
72
+ if (indexOfNextLine >= 0) {
73
+ // index of next line
74
+ nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
75
+ } else {
76
+ nextLineIndex = text?.length;
93
77
  }
94
- return null;
95
- } catch (err) {
96
- console.log(err);
97
- return null;
98
78
  }
79
+ const data = {
80
+ ...focus,
81
+ offset: nextLineIndex
82
+ };
83
+ const at = {
84
+ anchor: data,
85
+ focus: data
86
+ };
87
+ return {
88
+ at,
89
+ indexOfNextLine
90
+ };
99
91
  };
100
92
  const updateAnchorEl = (setAnchorEl, editor) => {
101
93
  try {
@@ -103,16 +95,14 @@ const updateAnchorEl = (setAnchorEl, editor) => {
103
95
  return;
104
96
  }
105
97
  const selection = window.getSelection();
106
- if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
98
+ if (selection.rangeCount) {
107
99
  let caret;
108
100
  if (getSelectedText(editor)) {
109
101
  // selected text as caret
110
102
  caret = selection.getRangeAt(0);
111
103
  } else {
112
- const sel = getNextLine(editor);
113
- if (sel) {
114
- caret = ReactEditor.toDOMRange(editor, sel.at);
115
- }
104
+ const domElement = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
105
+ caret = domElement?.commonAncestorContainer?.parentElement;
116
106
  }
117
107
  const getBoundingClientRect = () => {
118
108
  const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
@@ -158,7 +148,6 @@ function PopoverAIInput({
158
148
  const targetRef = useRef();
159
149
  const classes = Styles();
160
150
  const editor = useSlate();
161
- const [size] = useWindowResize();
162
151
  const onClickOutside = () => {
163
152
  setAnchorEl(null);
164
153
  setOpenAI("");
@@ -189,6 +178,11 @@ function PopoverAIInput({
189
178
  onClickOutside();
190
179
  return;
191
180
  }
181
+ if (type === "speech_to_text") {
182
+ Transforms.insertText(editor, option.text);
183
+ onClickOutside();
184
+ return;
185
+ }
192
186
  if (type === "try_again") {
193
187
  // resetting the previous option and try again
194
188
  option = selectedOption;
@@ -199,7 +193,7 @@ function PopoverAIInput({
199
193
  setLoading(true);
200
194
  const payload = {
201
195
  mode: option.mode || 0,
202
- query: inputValue
196
+ query: option?.inputValue || inputValue
203
197
  };
204
198
  if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
205
199
  payload.textOptionInput = type;
@@ -274,21 +268,7 @@ function PopoverAIInput({
274
268
  setInputValue(e.target.value);
275
269
  };
276
270
  return /*#__PURE__*/_jsxs("div", {
277
- children: [size.device === "xs" && openAI ? /*#__PURE__*/_jsx(Box, {
278
- component: "div",
279
- sx: classes.mobileAIInputWrapper,
280
- ref: targetRef,
281
- children: /*#__PURE__*/_jsx(AIInput, {
282
- loading: loading,
283
- onSend: onSend,
284
- generatedText: generatedText,
285
- anchorEl: anchorEl,
286
- openAI: openAI,
287
- inputValue: inputValue,
288
- onInputChange: onInputChange,
289
- onClickOutside: onClickOutside
290
- })
291
- }) : /*#__PURE__*/_jsx(Popper, {
271
+ children: [/*#__PURE__*/_jsx(Popper, {
292
272
  open: Boolean(openAI),
293
273
  anchorEl: anchorEl,
294
274
  transition: true,
@@ -307,15 +287,19 @@ function PopoverAIInput({
307
287
  sx: getSelectedText(editor) ? {
308
288
  marginTop: "6px"
309
289
  } : {},
310
- children: /*#__PURE__*/_jsx(AIInput, {
311
- loading: loading,
290
+ children: /*#__PURE__*/_jsx(VoiceToText, {
291
+ otherProps: otherProps,
312
292
  onSend: onSend,
313
- generatedText: generatedText,
314
- anchorEl: anchorEl,
315
- openAI: openAI,
316
- inputValue: inputValue,
317
- onInputChange: onInputChange,
318
- onClickOutside: onClickOutside
293
+ children: /*#__PURE__*/_jsx(AIInput, {
294
+ loading: loading,
295
+ onSend: onSend,
296
+ generatedText: generatedText,
297
+ anchorEl: anchorEl,
298
+ openAI: openAI,
299
+ inputValue: inputValue,
300
+ onInputChange: onInputChange,
301
+ onClickOutside: onClickOutside
302
+ })
319
303
  })
320
304
  })
321
305
  })
@@ -167,7 +167,8 @@ const Styles = theme => ({
167
167
  sendIconContainer: {
168
168
  alignSelf: "flex-end",
169
169
  display: "flex",
170
- alignItems: "center"
170
+ alignItems: "center",
171
+ gap: "6px"
171
172
  }
172
173
  });
173
174
  export default Styles;
@@ -0,0 +1,73 @@
1
+ import { Box } from "@mui/material";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import WaveSurfer from "wavesurfer.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const SoundWave = props => {
6
+ const {
7
+ audioChunks = null
8
+ } = props; // Initialize to null if not provided
9
+ const waveContent = useRef(null);
10
+ const wavesurfer = useRef(null);
11
+ const [playOnce, setPlayOnce] = useState(false);
12
+ useEffect(() => {
13
+ if (waveContent.current) {
14
+ if (wavesurfer.current) {
15
+ wavesurfer.current.destroy();
16
+ }
17
+ wavesurfer.current = WaveSurfer.create({
18
+ container: waveContent.current,
19
+ waveColor: "#2563EB",
20
+ progressColor: "#2563EB",
21
+ cursorWidth: 0,
22
+ // Disable the cursor
23
+ barWidth: 2,
24
+ barGap: 1,
25
+ barRadius: 2,
26
+ scrollParent: false,
27
+ // Prevent scrolling
28
+ height: waveContent.current.clientHeight // Set height to fit container
29
+ });
30
+
31
+ // Fit the waveform to the container width
32
+ const resize = () => {
33
+ if (wavesurfer.current) {
34
+ const containerWidth = waveContent.current.clientWidth;
35
+ const duration = wavesurfer.current.getDuration();
36
+ if (duration > 0) {
37
+ const newZoom = containerWidth / duration;
38
+ wavesurfer.current.zoom(newZoom);
39
+ }
40
+ }
41
+ };
42
+ window.addEventListener("resize", resize);
43
+ resize();
44
+ return () => {
45
+ window.removeEventListener("resize", resize);
46
+ };
47
+ }
48
+ }, []);
49
+ useEffect(() => {
50
+ if (wavesurfer.current && audioChunks) {
51
+ const audioBlob = new Blob(audioChunks, {
52
+ type: "audio/webm"
53
+ });
54
+ const recordedUrl = URL.createObjectURL(audioBlob);
55
+ wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
56
+ if (!playOnce) {
57
+ setPlayOnce(true);
58
+ }
59
+ } else if (wavesurfer.current && !audioChunks) {
60
+ // Clear the waveform when audioChunks is null
61
+ wavesurfer.current.empty();
62
+ }
63
+ }, [audioChunks, playOnce]);
64
+ return /*#__PURE__*/_jsx(Box, {
65
+ ref: waveContent,
66
+ style: {
67
+ width: "100%",
68
+ height: "100%",
69
+ overflow: "hidden"
70
+ }
71
+ });
72
+ };
73
+ export const AudioWave = SoundWave;
@@ -0,0 +1,177 @@
1
+ import { useState, useEffect, useRef, cloneElement } from "react";
2
+ import PropTypes from "prop-types";
3
+ import STTStyles from "./style";
4
+ import { Grid, IconButton, Box } from "@mui/material";
5
+ import { AudioWave } from "./AudioWave";
6
+ import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
7
+ import { MODES } from "../helper";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ function STT(props) {
11
+ const {
12
+ children,
13
+ otherProps,
14
+ onSend
15
+ } = props;
16
+ const {
17
+ services
18
+ } = otherProps;
19
+ const classes = STTStyles();
20
+ const [isRecording, setIsRecording] = useState(false);
21
+ const [mediaRecorder, setMediaRecorder] = useState(null);
22
+ const [audioChunks, setAudioChunks] = useState([]);
23
+ const [chunkIndex, setChunkIndex] = useState(0);
24
+ const audioChunksRef = useRef([]);
25
+ const [transcription, setTranscription] = useState("");
26
+ const [showPause, setShowPause] = useState(true);
27
+ const [isAILoading, setAILoading] = useState(false);
28
+ const setChunk = event => {
29
+ if (event.data.size > 0) {
30
+ setAudioChunks(prev => {
31
+ const updatedChunks = [...prev, event.data];
32
+ audioChunksRef.current = updatedChunks; // Update ref manually
33
+ return updatedChunks;
34
+ });
35
+ }
36
+ };
37
+ const sendChunck = async (isLast = false) => {
38
+ if (audioChunksRef.current.length > 0) {
39
+ const audioBlob = new Blob(audioChunksRef.current, {
40
+ type: "audio/webm"
41
+ });
42
+ const formData = new FormData();
43
+ formData.append("audio", audioBlob, `audio_chunk_${chunkIndex}.wav`);
44
+ formData.append("chunkIndex", chunkIndex); // Send chunk index to the backend
45
+ if (isLast) {
46
+ formData.append("isLastChunk", true); // Send chunk index to the backend
47
+ } else {
48
+ formData.append("isLastChunk", false);
49
+ setChunkIndex(prevIndex => prevIndex + 1);
50
+ }
51
+ const result = await services("speechToText", {
52
+ formData
53
+ });
54
+ setTranscription(result?.data);
55
+ await sendChunck();
56
+ }
57
+ };
58
+ const handleStopRecording = () => {
59
+ sendChunck(true);
60
+ setAudioChunks([]);
61
+ };
62
+ const startRecording = async () => {
63
+ setTranscription("");
64
+ const stream = await navigator.mediaDevices.getUserMedia({
65
+ audio: true
66
+ });
67
+ const recorder = new MediaRecorder(stream);
68
+ setMediaRecorder(recorder);
69
+ recorder.ondataavailable = setChunk;
70
+ recorder.onstop = handleStopRecording;
71
+ recorder.start(100);
72
+ setIsRecording(true);
73
+ setTimeout(() => {
74
+ sendChunck();
75
+ }, 2000);
76
+ };
77
+ const stopRecording = () => {
78
+ if (mediaRecorder) {
79
+ mediaRecorder.stop();
80
+
81
+ // Stop all tracks to release the microphone
82
+ if (mediaRecorder.stream) {
83
+ mediaRecorder.stream.getTracks().forEach(track => track.stop());
84
+ }
85
+ setChunkIndex(0);
86
+ setShowPause(false);
87
+ }
88
+ };
89
+ const sendToInfiniti = async () => {
90
+ setAILoading(true);
91
+ setIsRecording(false);
92
+ const result = await services("infinityAI", {
93
+ mode: MODES.default,
94
+ query: transcription
95
+ });
96
+ const text = result?.data || "";
97
+ onSend("speech_to_text", {
98
+ text
99
+ });
100
+ stopRecording();
101
+ setAILoading(false);
102
+ };
103
+ const closeRecording = () => {
104
+ setAudioChunks([]);
105
+ stopRecording();
106
+ setIsRecording(false);
107
+ setShowPause(true);
108
+ setTranscription("");
109
+ };
110
+ useEffect(() => {
111
+ audioChunksRef.current = audioChunks;
112
+ }, [audioChunks]);
113
+ const transcriptionText = transcription && transcription.replace(/\s+/g, "")?.length; // Remove all whitespace characters like \n \t
114
+
115
+ return /*#__PURE__*/_jsx(Grid, {
116
+ xs: 12,
117
+ children: /*#__PURE__*/_jsx(Grid, {
118
+ className: classes.SttContainer,
119
+ children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
120
+ xs: 12,
121
+ children: /*#__PURE__*/cloneElement(children, {
122
+ startRecording,
123
+ isAILoading
124
+ })
125
+ }) : /*#__PURE__*/_jsxs(Grid, {
126
+ xs: 12,
127
+ sx: classes.AudioVizualizerContainer,
128
+ children: [transcriptionText ? /*#__PURE__*/_jsx(Grid, {
129
+ xs: 12,
130
+ sx: classes.TranscriptionContainer,
131
+ children: /*#__PURE__*/_jsx("pre", {
132
+ style: {
133
+ whiteSpace: "pre-wrap",
134
+ wordWrap: "break-word",
135
+ fontFamily: "inherit",
136
+ margin: 0
137
+ },
138
+ children: transcription
139
+ })
140
+ }) : null, /*#__PURE__*/_jsxs(Grid, {
141
+ xs: 12,
142
+ sx: classes.AudioVizualizerContent,
143
+ children: [/*#__PURE__*/_jsx(Box, {
144
+ children: /*#__PURE__*/_jsx(IconButton, {
145
+ onClick: closeRecording,
146
+ children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
147
+ })
148
+ }), /*#__PURE__*/_jsx(Box, {
149
+ sx: classes.AudioVisualiser,
150
+ children: /*#__PURE__*/_jsx(AudioWave, {
151
+ audioChunks: audioChunks
152
+ })
153
+ }), /*#__PURE__*/_jsx(Box, {
154
+ children: showPause ? /*#__PURE__*/_jsx(IconButton, {
155
+ onClick: stopRecording,
156
+ children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
157
+ }) : /*#__PURE__*/_jsx(IconButton, {
158
+ onClick: sendToInfiniti,
159
+ disabled: !transcriptionText,
160
+ style: !transcriptionText ? {
161
+ opacity: 0.5
162
+ } : {},
163
+ children: /*#__PURE__*/_jsx(TickBlueCircle, {})
164
+ })
165
+ })]
166
+ })]
167
+ })
168
+ })
169
+ });
170
+ }
171
+ STT.defaultProps = {
172
+ classes: {}
173
+ };
174
+ STT.propTypes = {
175
+ classes: PropTypes.object
176
+ };
177
+ export const VoiceToText = STT;
@@ -0,0 +1,40 @@
1
+ const styles = () => ({
2
+ SttContainer: {
3
+ display: "flex",
4
+ width: "100%",
5
+ padding: "12px",
6
+ zIndex: 1
7
+ },
8
+ STTInput: {
9
+ width: "100%",
10
+ borderRadius: "8px",
11
+ "&& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
12
+ borderColor: "#2563EB"
13
+ },
14
+ "&& .MuiOutlinedInput-root": {
15
+ background: "rgba(252, 250, 255, 1)"
16
+ }
17
+ },
18
+ AudioVizualizerContainer: {
19
+ width: "100%",
20
+ display: "flex",
21
+ background: "rgba(252, 250, 255, 1)",
22
+ borderRadius: "8px",
23
+ border: "1px solid #2563EB",
24
+ alignItems: "center",
25
+ flexWrap: "wrap"
26
+ },
27
+ AudioVizualizerContent: {
28
+ display: "flex",
29
+ height: "50px",
30
+ width: "100%"
31
+ },
32
+ AudioVisualiser: {
33
+ flexGrow: "1",
34
+ height: "100%"
35
+ },
36
+ TranscriptionContainer: {
37
+ padding: "12px"
38
+ }
39
+ });
40
+ export default styles;