@flozy/editor 3.8.1 → 3.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +55 -45
- package/dist/Editor/CommonEditor.js +111 -169
- package/dist/Editor/Elements/AI/AIInput.js +5 -16
- package/dist/Editor/Elements/AI/PopoverAIInput.js +17 -31
- package/dist/Editor/Elements/AI/Styles.js +1 -2
- package/dist/Editor/Elements/Accordion/Accordion.js +7 -74
- package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +60 -4
- package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
- package/dist/Editor/Elements/Button/EditorButton.js +16 -28
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Embed/Image.js +20 -28
- package/dist/Editor/Elements/Embed/Video.js +11 -15
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Grid/Grid.js +0 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -3
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +3 -11
- package/dist/Editor/Elements/Table/Table.js +1 -1
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +11 -5
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +13 -20
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +5 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/AIIcons.js +1 -153
- package/dist/Editor/common/ColorPickerButton.js +9 -25
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/Icon.js +2 -30
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +1 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
- package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +7 -7
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +3 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/helper/theme.js +4 -190
- package/dist/Editor/hooks/useMouseMove.js +2 -4
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +5 -47
- package/dist/Editor/plugins/withLayout.js +10 -15
- package/dist/Editor/plugins/withTable.js +2 -2
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +25 -161
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/draftToSlate.js +1 -1
- package/dist/Editor/utils/events.js +4 -11
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +1 -51
- package/package.json +1 -2
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
- package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -167
- package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/common/EditorCmds.js +0 -35
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
|
@@ -7,43 +7,43 @@ export const sizeMap = {
|
|
|
7
7
|
export const fontFamilyMap = {
|
|
8
8
|
PoppinsRegular: "PoppinsRegular",
|
|
9
9
|
PoppinsBold: "PoppinsBold",
|
|
10
|
-
sans:
|
|
11
|
-
serif:
|
|
12
|
-
monospace:
|
|
13
|
-
roboto: "Roboto, sans-serif",
|
|
14
|
-
qwitcher: '
|
|
15
|
-
garamond: '
|
|
16
|
-
anton: "Anton, sans-serif",
|
|
17
|
-
dmserif: '
|
|
18
|
-
inter: "Inter, sans-serif",
|
|
19
|
-
libre: '
|
|
20
|
-
montserrat: "Montserrat, sans-serif",
|
|
21
|
-
opensans: '
|
|
22
|
-
publicsans: '
|
|
23
|
-
raleway: "Raleway, sans-serif",
|
|
24
|
-
spacemono: '
|
|
25
|
-
bulgarian: '
|
|
26
|
-
impact: "Impact, serif",
|
|
27
|
-
redacted: '
|
|
28
|
-
greatVibes: '
|
|
29
|
-
zeyada: "Zeyada, cursive",
|
|
30
|
-
allura: "Allura, cursive",
|
|
31
|
-
pinyon: '
|
|
32
|
-
muellerhoff: '
|
|
33
|
-
dawning: '
|
|
10
|
+
sans: "Helvetica,Arial, sans serif",
|
|
11
|
+
serif: "Georgia, Times New Roaman,serif",
|
|
12
|
+
monospace: "Monaco, Courier New,monospace",
|
|
13
|
+
roboto: "'Roboto', sans-serif",
|
|
14
|
+
qwitcher: "'Qwitcher Grypen', cursive",
|
|
15
|
+
garamond: "'EB Garamond', serif",
|
|
16
|
+
anton: "'Anton', sans-serif",
|
|
17
|
+
dmserif: "'DM Serif Text', serif",
|
|
18
|
+
inter: "'Inter', sans-serif",
|
|
19
|
+
libre: "'Libre Baskerville', serif",
|
|
20
|
+
montserrat: "'Montserrat', sans-serif",
|
|
21
|
+
opensans: "'Open Sans', sans-serif",
|
|
22
|
+
publicsans: "'Public Sans', sans-serif",
|
|
23
|
+
raleway: "'Raleway', sans-serif",
|
|
24
|
+
spacemono: "'Space Mono', sans-serif",
|
|
25
|
+
bulgarian: "'Bulgarian Garamond', monospace",
|
|
26
|
+
impact: "'Impact', serif",
|
|
27
|
+
redacted: "'Redacted Script', cursive",
|
|
28
|
+
greatVibes: "'Great Vibes', cursive",
|
|
29
|
+
zeyada: "'Zeyada', cursive",
|
|
30
|
+
allura: "'Allura', cursive",
|
|
31
|
+
pinyon: "'Pinyon Script', cursive",
|
|
32
|
+
muellerhoff: "'Herr Von Muellerhoff', cursive",
|
|
33
|
+
dawning: "'Dawning of a New Day', cursive",
|
|
34
34
|
// New Font Added for Type Signature
|
|
35
|
-
comingsoon: '
|
|
36
|
-
dancingScript: '
|
|
37
|
-
engagement: "Engagement, cursive",
|
|
38
|
-
gaegu: "Gaegu, cursive",
|
|
39
|
-
ingridDarling: '
|
|
40
|
-
kitaOne: "
|
|
41
|
-
laBelleAurore: '
|
|
42
|
-
lobster: "Lobster, cursive",
|
|
43
|
-
meaCulpa: '
|
|
44
|
-
meddon: "Meddon, cursive",
|
|
45
|
-
merriWeather: "Merriweather, serif",
|
|
46
|
-
theGirlNextDoor: '
|
|
35
|
+
comingsoon: "'Coming Soon', cursive",
|
|
36
|
+
dancingScript: "'Dancing Script', cursive",
|
|
37
|
+
engagement: "'Engagement', cursive",
|
|
38
|
+
gaegu: "'Gaegu', cursive",
|
|
39
|
+
ingridDarling: "'Ingrid Darling', cursive",
|
|
40
|
+
kitaOne: "'Kite One', sans - serif",
|
|
41
|
+
laBelleAurore: "'La Belle Aurore', cursive",
|
|
42
|
+
lobster: "'Lobster', cursive",
|
|
43
|
+
meaCulpa: "'Mea Culpa', cursive",
|
|
44
|
+
meddon: "'Meddon', cursive",
|
|
45
|
+
merriWeather: "'Merriweather', serif",
|
|
46
|
+
theGirlNextDoor: "'The Girl Next Door', cursive"
|
|
47
47
|
};
|
|
48
48
|
export const fontOptions = Object.keys(fontFamilyMap).map(m => {
|
|
49
49
|
return {
|
|
@@ -62,8 +62,5 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
|
|
|
62
62
|
export const headingMap = {
|
|
63
63
|
"headingOne": "32px",
|
|
64
64
|
"headingTwo": "24px",
|
|
65
|
-
"headingThree": "19px"
|
|
66
|
-
"headingFour": "16px",
|
|
67
|
-
"headingFive": "13px",
|
|
68
|
-
"headingSix": "11px"
|
|
65
|
+
"headingThree": "19px"
|
|
69
66
|
};
|
|
@@ -246,8 +246,7 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
|
|
|
246
246
|
props.target = "_blank";
|
|
247
247
|
}
|
|
248
248
|
break;
|
|
249
|
-
case "
|
|
250
|
-
case "prevTrigger":
|
|
249
|
+
case "actionTrigger":
|
|
251
250
|
if (!readOnly) {
|
|
252
251
|
props.component = "button";
|
|
253
252
|
props.onClick = () => {};
|
|
@@ -378,53 +377,4 @@ export const decodeString = str => {
|
|
|
378
377
|
} catch (err) {
|
|
379
378
|
console.log(err);
|
|
380
379
|
}
|
|
381
|
-
};
|
|
382
|
-
export const getContrastColor = color => {
|
|
383
|
-
let r, g, b;
|
|
384
|
-
|
|
385
|
-
// Check if the color is in hex format
|
|
386
|
-
if (color.startsWith("#")) {
|
|
387
|
-
r = parseInt(color.substring(1, 3), 16);
|
|
388
|
-
g = parseInt(color.substring(3, 5), 16);
|
|
389
|
-
b = parseInt(color.substring(5, 7), 16);
|
|
390
|
-
}
|
|
391
|
-
// Check if the color is in RGB/RGBA format
|
|
392
|
-
else if (color.startsWith("rgb")) {
|
|
393
|
-
const rgbValues = color.replace(/^rgba?\(|\s+|\)$/g, "") // Remove the rgb/rgba and spaces
|
|
394
|
-
.split(","); // Split the values into an array
|
|
395
|
-
|
|
396
|
-
r = parseInt(rgbValues[0]);
|
|
397
|
-
g = parseInt(rgbValues[1]);
|
|
398
|
-
b = parseInt(rgbValues[2]);
|
|
399
|
-
} else {
|
|
400
|
-
// If the format is not recognized, default to black text
|
|
401
|
-
return "#000000";
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
// Calculate relative luminance
|
|
405
|
-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
406
|
-
|
|
407
|
-
// Return black for light colors, white for dark colors
|
|
408
|
-
return luminance > 0.5 ? "#000000" : "#FFFFFF";
|
|
409
|
-
};
|
|
410
|
-
export const onDeleteKey = (event, {
|
|
411
|
-
editor
|
|
412
|
-
}) => {
|
|
413
|
-
try {
|
|
414
|
-
const {
|
|
415
|
-
selection
|
|
416
|
-
} = editor;
|
|
417
|
-
if (selection) {
|
|
418
|
-
// If text is selected, delete the selection
|
|
419
|
-
Transforms.delete(editor);
|
|
420
|
-
} else {
|
|
421
|
-
// If no text is selected, handle deleting the next character/element
|
|
422
|
-
Transforms.delete(editor, {
|
|
423
|
-
unit: "character",
|
|
424
|
-
reverse: false
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
} catch (err) {
|
|
428
|
-
console.log(err);
|
|
429
|
-
}
|
|
430
380
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flozy/editor",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.2",
|
|
4
4
|
"description": "An Editor for flozy app brain",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -46,7 +46,6 @@
|
|
|
46
46
|
"slate-react": "^0.98.3",
|
|
47
47
|
"styled-components": "^5.3.11",
|
|
48
48
|
"use-debounce": "^10.0.0",
|
|
49
|
-
"wavesurfer.js": "^7.8.6",
|
|
50
49
|
"web-vitals": "^2.1.4",
|
|
51
50
|
"y-websocket": "^1.5.0",
|
|
52
51
|
"yjs": "^13.6.8"
|
|
@@ -1,73 +0,0 @@
|
|
|
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;
|
|
@@ -1,167 +0,0 @@
|
|
|
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
|
-
return /*#__PURE__*/_jsx(Grid, {
|
|
114
|
-
xs: 12,
|
|
115
|
-
children: /*#__PURE__*/_jsx(Grid, {
|
|
116
|
-
className: classes.SttContainer,
|
|
117
|
-
children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
|
|
118
|
-
xs: 12,
|
|
119
|
-
children: /*#__PURE__*/cloneElement(children, {
|
|
120
|
-
startRecording,
|
|
121
|
-
isAILoading
|
|
122
|
-
})
|
|
123
|
-
}) : /*#__PURE__*/_jsxs(Grid, {
|
|
124
|
-
xs: 12,
|
|
125
|
-
sx: classes.AudioVizualizerContainer,
|
|
126
|
-
children: [transcription ? /*#__PURE__*/_jsx(Grid, {
|
|
127
|
-
xs: 12,
|
|
128
|
-
sx: classes.TranscriptionContainer,
|
|
129
|
-
children: transcription
|
|
130
|
-
}) : null, /*#__PURE__*/_jsxs(Grid, {
|
|
131
|
-
xs: 12,
|
|
132
|
-
sx: classes.AudioVizualizerContent,
|
|
133
|
-
children: [/*#__PURE__*/_jsx(Box, {
|
|
134
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
|
135
|
-
onClick: closeRecording,
|
|
136
|
-
children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
|
|
137
|
-
})
|
|
138
|
-
}), /*#__PURE__*/_jsx(Box, {
|
|
139
|
-
sx: classes.AudioVisualiser,
|
|
140
|
-
children: /*#__PURE__*/_jsx(AudioWave, {
|
|
141
|
-
audioChunks: audioChunks
|
|
142
|
-
})
|
|
143
|
-
}), /*#__PURE__*/_jsx(Box, {
|
|
144
|
-
children: showPause ? /*#__PURE__*/_jsx(IconButton, {
|
|
145
|
-
onClick: stopRecording,
|
|
146
|
-
children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
|
|
147
|
-
}) : /*#__PURE__*/_jsx(IconButton, {
|
|
148
|
-
onClick: sendToInfiniti,
|
|
149
|
-
disabled: !transcription,
|
|
150
|
-
style: !transcription ? {
|
|
151
|
-
opacity: 0.5
|
|
152
|
-
} : {},
|
|
153
|
-
children: /*#__PURE__*/_jsx(TickBlueCircle, {})
|
|
154
|
-
})
|
|
155
|
-
})]
|
|
156
|
-
})]
|
|
157
|
-
})
|
|
158
|
-
})
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
STT.defaultProps = {
|
|
162
|
-
classes: {}
|
|
163
|
-
};
|
|
164
|
-
STT.propTypes = {
|
|
165
|
-
classes: PropTypes.object
|
|
166
|
-
};
|
|
167
|
-
export const VoiceToText = STT;
|
|
@@ -1,40 +0,0 @@
|
|
|
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;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
const LinkPopupStyles = theme => ({
|
|
2
|
-
addLinkField: {
|
|
3
|
-
"& .MuiOutlinedInput-input": {
|
|
4
|
-
fontSize: "12px",
|
|
5
|
-
fontWeight: 500,
|
|
6
|
-
color: `${theme?.palette?.editor?.textColor} !important`
|
|
7
|
-
},
|
|
8
|
-
"& .MuiFormHelperText-root": {
|
|
9
|
-
color: `${theme?.palette?.editor?.textColor} !important`
|
|
10
|
-
},
|
|
11
|
-
"& .MuiOutlinedInput-root": {
|
|
12
|
-
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
|
|
13
|
-
color: `${theme?.palette?.editor?.textColor} !important`,
|
|
14
|
-
borderRadius: "7px",
|
|
15
|
-
"& fieldset": {
|
|
16
|
-
borderColor: "#D8DDE1"
|
|
17
|
-
},
|
|
18
|
-
"&:hover fieldset": {
|
|
19
|
-
borderColor: "#64748B"
|
|
20
|
-
},
|
|
21
|
-
"&.Mui-focused fieldset": {
|
|
22
|
-
borderColor: "#2563EB"
|
|
23
|
-
},
|
|
24
|
-
"& .MuiFormLabel-root": {}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
export default LinkPopupStyles;
|