@longline/aqua-ui 1.0.196 → 1.0.198

package/inputs/Editor/extensions/MarkElement.js

@@ -0,0 +1,35 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+/**
+ * Custom TipTap extension. This supports the `<mark>` element.
+ */
+var MarkElement = Mark.create({
+    name: 'mark',
+    addOptions: function () {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    parseHTML: function () {
+        return [
+            {
+                tag: 'mark',
+            },
+        ];
+    },
+    renderHTML: function (_a) {
+        var HTMLAttributes = _a.HTMLAttributes;
+        return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addAttributes: function () {
+        return {
+            class: {
+                default: null,
+            },
+            style: {
+                default: null,
+            },
+            // Add any other supported attributes here
+        };
+    },
+});
+export { MarkElement };

package/inputs/Editor/extensions/StreamNode.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const StreamNode: Node<any, any>;
+export { StreamNode };

package/inputs/Editor/extensions/StreamNode.js

@@ -0,0 +1,33 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+var StreamNode = Node.create({
+    name: 'stream', // <stream>
+    group: 'block',
+    content: 'inline*',
+    atom: false, // allow updating content
+    selectable: true,
+    addAttributes: function () {
+        return {
+            streamId: {
+                default: null,
+                parseHTML: function (element) { return element.getAttribute('data-stream-id'); },
+                renderHTML: function (attributes) {
+                    return attributes.streamId
+                        ? { 'data-stream-id': attributes.streamId }
+                        : {};
+                },
+            },
+        };
+    },
+    parseHTML: function () {
+        return [
+            {
+                tag: 'div[data-stream-id]',
+            },
+        ];
+    },
+    renderHTML: function (_a) {
+        var HTMLAttributes = _a.HTMLAttributes;
+        return ['div', mergeAttributes(HTMLAttributes), 0];
+    },
+});
+export { StreamNode };

package/inputs/Editor/menu/MenuBar.d.ts

@@ -11,11 +11,22 @@ interface IProps {
     allowFullscreen?: boolean;
     /** Is editor currently fullscreen? This will affect toolbar positioning. */
     fullscreen?: boolean;
+    /**
+     * If set, adds code and code block buttons to MenuBar.
+     */
+    codeButtons?: boolean;
+    /**
+     * URL for OpenAI requests.
+     * If not present, no AI controls will be available.
+     */
+    openAIurl?: string;
+    /**
+     * URL for AssemblyAI requests.
+     * If not present, no AI controls will be available.
+     */
+    assemblyAIurl?: string;
     /** Fired when fullscreen mode must be toggled. */
     onToggleFullscreen: () => void;
-    allowSpeechRecognition: boolean;
-    recording: boolean;
-    onRecord: () => void;
 }
 declare const MenuBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { MenuBar };

package/inputs/Editor/menu/MenuBar.js

@@ -13,9 +13,8 @@ import { OrderedListButton } from '../buttons/OrderedListButton';
 import { BulletListButton } from '../buttons/BulletListButton';
 import { CodeBlockButton } from '../buttons/CodeBlockButton';
 import { FullscreenButton } from '../buttons/FullscreenButton';
-import { RecordButton } from '../buttons/RecordButton';
-import { SpeechRecognizer } from '../SpeechRecognizer';
-import { AudioVisualizer } from '../AudioVisualizer';
+import { OpenAIButton } from '../buttons/OpenAIButton';
+import { SpeechButton } from '../buttons/SpeechButton';
 var MenuBarBase = function (props) {
     if (!props.editor) {
         return null;
@@ -28,19 +27,19 @@ var MenuBarBase = function (props) {
             React.createElement(MenuSeparator, null),
             React.createElement(OrderedListButton, { editor: props.editor }),
             React.createElement(BulletListButton, { editor: props.editor }),
-            React.createElement(MenuSeparator, null),
-            React.createElement(CodeButton, { editor: props.editor }),
-            React.createElement(CodeBlockButton, { editor: props.editor }),
-            props.allowFullscreen && React.createElement(React.Fragment, null,
-                React.createElement(MenuSeparator, null),
-                React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen })),
-            props.allowSpeechRecognition && SpeechRecognizer.isAvailable() && React.createElement(React.Fragment, null,
+            props.codeButtons && React.createElement(React.Fragment, null,
                 React.createElement(MenuSeparator, null),
-                React.createElement(RecordButton, { editor: props.editor, recording: props.recording, onRecord: props.onRecord })),
-            props.recording && React.createElement("div", null,
-                React.createElement(AudioVisualizer, null)))));
+                React.createElement(CodeButton, { editor: props.editor }),
+                React.createElement(CodeBlockButton, { editor: props.editor })),
+            (props.openAIurl || props.allowFullscreen) && React.createElement(MenuSeparator, null),
+            props.openAIurl &&
+                React.createElement(OpenAIButton, { url: props.openAIurl, editor: props.editor }),
+            props.assemblyAIurl &&
+                React.createElement(SpeechButton, { url: props.assemblyAIurl, editor: props.editor }),
+            props.allowFullscreen &&
+                React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen }))));
 };
-var MenuBar = styled(MenuBarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n"], ["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n"])), function (p) { return p.fullscreen ? 32 : 0; }, function (p) { return p.fullscreen ? 32 : 0; });
-var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"], ["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n"])));
+var MenuBar = styled(MenuBarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: sticky;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n"], ["\n  // Keep MenuBar at top of editor; it must not scroll when the editor\n  // content scrolls.\n  position: sticky;\n  left: ", "px;\n  top: ", "px;\n  z-index: 1;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n"])), function (p) { return p.fullscreen ? 32 : 0; }, function (p) { return p.fullscreen ? 32 : 0; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[80]; });
+var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 4px;\n"], ["\n  border-radius: 4px;\n  padding: 2px;\n\n  // Flex-align buttons and separators:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 4px;\n"])));
 export { MenuBar };
 var templateObject_1, templateObject_2;

package/inputs/Editor/menu/MenuButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Editor } from '@tiptap/react';
+import { IIconProps } from '../../../controls/Icon';
 interface IProps {
     /** @ignore */
     className?: string;
@@ -10,7 +11,7 @@ interface IProps {
     /**
      * URL of icon to show.
      */
-    icon: string;
+    icon: string | IIconProps;
     /**
      * If set, button is disabled.
      * @default false
@@ -21,6 +22,11 @@ interface IProps {
      * @default false
      */
     active?: boolean;
+    /**
+     * If set, button is highlighted.
+     * @default false
+     */
+    highlighted?: boolean;
     /**
      * Optional hint. Can be JSX.
      */

package/inputs/Editor/menu/MenuButton.js

@@ -14,13 +14,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import styled, { css, useTheme } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { usePopper } from 'react-popper';
 import { createPortal } from 'react-dom';
 import { Icon } from '../../../controls/Icon';
 import { MenuButtonHint } from './MenuButtonHint';
 var MenuButtonBase = function (props) {
-    var theme = useTheme();
     var buttonRef = React.useRef(null);
     var hintRef = React.useRef(null);
     var handleMouseEnter = function () {
@@ -48,10 +47,10 @@ var MenuButtonBase = function (props) {
         ]
     }), styles = _a.styles, attributes = _a.attributes, update = _a.update;
     return (React.createElement("button", { className: props.className, disabled: props.disabled, onClick: props.onClick, ref: buttonRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement(Icon, { url: props.icon }),
+        React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         buttonRef.current && createPortal(React.createElement(MenuButtonHint, { keys: props.keys, ref: hintRef, styles: styles, attributes: attributes }, props.hint), buttonRef.current)));
 };
-var MenuButtonStyled = styled(MenuButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[80]; }); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.disabled ? p.theme.colors.neutral[80] : p.theme.colors.neutral[50]; }, function (p) { return !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    svg:hover {\n      fill: ", ";\n    }\n  "], ["\n    svg:hover {\n      fill: ", ";\n    }\n  "])), p.theme.colors.neutral[30]); });
+var MenuButtonStyled = styled(MenuButtonBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  ", "\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  // Size:\n  position: relative;\n  width: 26px;\n  height: 26px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  ", "\n  &:active {\n    background-color: ", ";\n  }\n  ", "\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  svg {\n    fill: ", ";\n  }\n  ", "\n  ", "\n\n  // Content:\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[80]; }); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.disabled ? p.theme.colors.neutral[80] : p.theme.colors.neutral[50]; }, function (p) { return !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    svg:hover {\n      fill: ", ";\n    }\n  "], ["\n    svg:hover {\n      fill: ", ";\n    }\n  "])), p.theme.colors.neutral[30]); }, function (p) { return p.highlighted && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    svg { fill: ", "; }\n    svg:hover { fill: ", "; }\n  "], ["\n    svg { fill: ", "; }\n    svg:hover { fill: ", "; }\n  "])), p.theme.colors.neutral[100], p.theme.colors.neutral[100]); });
 var MenuButton = function (props) { return React.createElement(MenuButtonStyled, __assign({}, props)); };
 export { MenuButton };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/inputs/Editor/menu/MenuSeparator.js

@@ -18,7 +18,7 @@ import styled from 'styled-components';
 var MenuSeparatorBase = function (props) {
     return React.createElement("div", { className: props.className });
 };
-var MenuSeparatorStyled = styled(MenuSeparatorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 0;\n    bottom: 2px;\n    border-left: solid 1px ", ";\n  }\n"], ["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 0;\n    bottom: 2px;\n    border-left: solid 1px ", ";\n  }\n"])), function (p) { return p.theme.colors.neutral[80]; });
+var MenuSeparatorStyled = styled(MenuSeparatorBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 4px;\n    left: 0;\n    bottom: 4px;\n    border-left: solid 1px ", ";\n  }\n"], ["\n  position: relative;\n  width: 1px;\n  margin-left: 2px;\n  margin-right: 2px;  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 4px;\n    left: 0;\n    bottom: 4px;\n    border-left: solid 1px ", ";\n  }\n"])), function (p) { return p.theme.colors.neutral[80]; });
 var MenuSeparator = function (props) { return React.createElement(MenuSeparatorStyled, __assign({}, props)); };
 export { MenuSeparator };
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.196",
+  "version": "1.0.198",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",
@@ -17,8 +17,9 @@
   },
   "scripts": {
     "build": "webpack --config webpack.config.js && tsc --version && tsc",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "storybook": "cross-env OPENAI_RESPONSE_URL=http://api.flow/api/ai/openai/response-stream OPENAI_AUDIO_URL=http://api.flow/api/ai/openai/audio OPENAI_TRANSCRIBE_URL=http://api.flow/api/ai/openai/transcribe ASSEMBLYAI_TOKEN_URL=http://api.flow/api/ai/assemblyai/get-token storybook dev -p 6006",
+    "build-storybook": "cross-env OPENAI_RESPONSE_URL=http://api.flow/api/ai/openai/response-stream OPENAI_AUDIO_URL=http://api.flow/api/ai/openai/audio OPENAI_TRANSCRIBE_URL=http://api.flow/api/ai/openai/transcribe ASSEMBLYAI_TOKEN_URL=http://api.flow/api/ai/assemblyai/get-token storybook build",
+    "build-storybook-gitlab": "cross-env OPENAI_RESPONSE_URL=https://aquarisk.dev.longline.uk/api/ai/openai/response-stream OPENAI_AUDIO_URL=https://aquarisk.dev.longline.uk/api/ai/openai/audio OPENAI_TRANSCRIBE_URL=https://aquarisk.dev.longline.uk/api/ai/openai/transcribe ASSEMBLYAI_TOKEN_URL=https://aquarisk.dev.longline.uk/api/ai/assemblyai/get-token storybook build",
     "tsc": "tsc",
     "pub": "npm version patch && webpack --config webpack.config.js && tsc && cd dist && npm publish"
   },
@@ -28,7 +29,9 @@
     "@storybook/addon-links": "^9.0.0",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
     "@storybook/react-webpack5": "^9.0.0",
+    "@types/dom-speech-recognition": "^0.0.6",
     "copy-webpack-plugin": "^12.0.2",
+    "cross-env": "^7.0.3",
     "pngjs": "^7.0.0",
     "storybook": "^9.0.0",
     "svg-spritemap-webpack-plugin": "^4.5.1",
@@ -50,8 +53,12 @@
     "@types/react-dom": "^18.3.0",
     "awesome-debounce-promise": "^2.1.0",
     "country-flag-emoji-polyfill": "^0.1.8",
+    "extendable-media-recorder": "^9.2.26",
+    "extendable-media-recorder-wav-encoder": "^7.0.128",
     "gl-matrix": "^3.4.3",
     "mapbox-gl": "^3.9.4",
+    "marked": "^15.0.12",
+    "openai": "^5.0.1",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/svg/editor/index.d.ts

@@ -1,11 +1,11 @@
 export declare enum Editor {
+    AI = "/aquaui-sprites.svg#editor-ai",
     Bold = "/aquaui-sprites.svg#editor-bold",
     BulletList = "/aquaui-sprites.svg#editor-bullet-list",
     Code = "/aquaui-sprites.svg#editor-code",
     CodeBlock = "/aquaui-sprites.svg#editor-code-block",
     Italic = "/aquaui-sprites.svg#editor-italic",
     Link = "/aquaui-sprites.svg#editor-link",
-    Microphone = "/aquaui-sprites.svg#editor-microphone",
     OrderedList = "/aquaui-sprites.svg#editor-ordered-list",
     Strikethrough = "/aquaui-sprites.svg#editor-strikethrough"
 }

package/svg/editor/index.js

@@ -1,12 +1,12 @@
 export var Editor;
 (function (Editor) {
+    Editor["AI"] = "/aquaui-sprites.svg#editor-ai";
     Editor["Bold"] = "/aquaui-sprites.svg#editor-bold";
     Editor["BulletList"] = "/aquaui-sprites.svg#editor-bullet-list";
     Editor["Code"] = "/aquaui-sprites.svg#editor-code";
     Editor["CodeBlock"] = "/aquaui-sprites.svg#editor-code-block";
     Editor["Italic"] = "/aquaui-sprites.svg#editor-italic";
     Editor["Link"] = "/aquaui-sprites.svg#editor-link";
-    Editor["Microphone"] = "/aquaui-sprites.svg#editor-microphone";
     Editor["OrderedList"] = "/aquaui-sprites.svg#editor-ordered-list";
     Editor["Strikethrough"] = "/aquaui-sprites.svg#editor-strikethrough";
 })(Editor || (Editor = {}));

package/svg/icons/index.d.ts

@@ -31,6 +31,7 @@ export declare enum Icons {
     Leaf = "/aquaui-sprites.svg#icon-leaf",
     List = "/aquaui-sprites.svg#icon-list",
     Locked = "/aquaui-sprites.svg#icon-locked",
+    Microphone = "/aquaui-sprites.svg#icon-microphone",
     Minus = "/aquaui-sprites.svg#icon-minus",
     Plus = "/aquaui-sprites.svg#icon-plus",
     Reset = "/aquaui-sprites.svg#icon-reset",

package/svg/icons/index.js

@@ -32,6 +32,7 @@ export var Icons;
     Icons["Leaf"] = "/aquaui-sprites.svg#icon-leaf";
     Icons["List"] = "/aquaui-sprites.svg#icon-list";
     Icons["Locked"] = "/aquaui-sprites.svg#icon-locked";
+    Icons["Microphone"] = "/aquaui-sprites.svg#icon-microphone";
     Icons["Minus"] = "/aquaui-sprites.svg#icon-minus";
     Icons["Plus"] = "/aquaui-sprites.svg#icon-plus";
     Icons["Reset"] = "/aquaui-sprites.svg#icon-reset";

package/inputs/Editor/AudioVisualizer.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-}
-declare const AudioVisualizer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export { AudioVisualizer };

package/inputs/Editor/AudioVisualizer.js

@@ -1,81 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-var BUFFERLENGTH = 2048;
-var AudioVisualizerBase = function (props) {
-    var streamRef = React.useRef(null);
-    var mediaRecorderRef = React.useRef(null);
-    var audioContextRef = React.useRef(null);
-    var sourceRef = React.useRef(null);
-    var analyserRef = React.useRef(null);
-    var dataRef = React.useRef(null);
-    var canvasRef = React.useRef(null);
-    var canvasCtxRef = React.useRef(null);
-    var frameRef = React.useRef(null);
-    React.useEffect(function () {
-        // On startup, create a MediaRecorder.
-        navigator.mediaDevices.getUserMedia({ audio: true })
-            .then(function (_stream) {
-            streamRef.current = _stream;
-            mediaRecorderRef.current = new MediaRecorder(_stream);
-            // Get an audiocontext and associated source and analyzer.
-            audioContextRef.current = new AudioContext();
-            sourceRef.current = audioContextRef.current.createMediaStreamSource(_stream);
-            analyserRef.current = audioContextRef.current.createAnalyser();
-            analyserRef.current.fftSize = BUFFERLENGTH;
-            dataRef.current = new Uint8Array(BUFFERLENGTH);
-            sourceRef.current.connect(analyserRef.current);
-            draw();
-        })
-            .catch(function (err) { return console.error("Media", err); });
-        return function () {
-            // Don't draw next frame.
-            if (frameRef.current)
-                cancelAnimationFrame(frameRef.current);
-            if (streamRef.current) {
-                if (sourceRef.current)
-                    sourceRef.current.disconnect();
-                analyserRef.current = null;
-                sourceRef.current = null;
-                audioContextRef.current = null;
-                mediaRecorderRef.current.stop();
-            }
-        };
-    }, []);
-    var draw = function () {
-        var WIDTH = canvasRef.current.width;
-        var HEIGHT = canvasRef.current.height;
-        frameRef.current = requestAnimationFrame(draw);
-        analyserRef.current.getByteTimeDomainData(dataRef.current);
-        if (!canvasCtxRef.current)
-            canvasCtxRef.current = canvasRef.current.getContext("2d");
-        canvasCtxRef.current.fillStyle = "#f0f0f0";
-        canvasCtxRef.current.fillRect(0, 0, WIDTH, HEIGHT);
-        canvasCtxRef.current.lineWidth = 2;
-        canvasCtxRef.current.strokeStyle = "rgb(0, 0, 0)";
-        canvasCtxRef.current.beginPath();
-        var sliceWidth = (WIDTH * 1.0) / BUFFERLENGTH;
-        var x = 0;
-        for (var i = 0; i < BUFFERLENGTH; i++) {
-            var v = dataRef.current[i] / 128.0;
-            var y = (v * HEIGHT) / 2;
-            if (i === 0) {
-                canvasCtxRef.current.moveTo(x, y);
-            }
-            else {
-                canvasCtxRef.current.lineTo(x, y);
-            }
-            x += sliceWidth;
-        }
-        canvasCtxRef.current.lineTo(canvasRef.current.width, canvasRef.current.height / 2);
-        canvasCtxRef.current.stroke();
-    };
-    return (React.createElement("div", { className: props.className },
-        React.createElement("canvas", { ref: canvasRef })));
-};
-var AudioVisualizer = styled(AudioVisualizerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100px;\n  height: 26px;\n  border: none;\n  box-sizing: border-box;\n  background-color: #f0f0f0;\n  border-radius: 4px;\n  overflow: hidden;\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  position: relative;\n  width: 100px;\n  height: 26px;\n  border: none;\n  box-sizing: border-box;\n  background-color: #f0f0f0;\n  border-radius: 4px;\n  overflow: hidden;\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-export { AudioVisualizer };
-var templateObject_1;

package/inputs/Editor/SpeechRecognizer.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    onTranscript: (transcript: string) => void;
-}
-declare const SpeechRecognizer: {
-    (props: IProps): React.ReactNode;
-    isAvailable(): boolean;
-};
-export { SpeechRecognizer };

package/inputs/Editor/SpeechRecognizer.js

@@ -1,39 +0,0 @@
-import * as React from 'react';
-var SpeechRecognition = window['SpeechRecognition'] || window['webkitSpeechRecognition'];
-var SpeechRecognitionEvent = window['SpeechRecognitionEvent'] || window['webkitSpeechRecognitionEvent'];
-var SpeechRecognizer = function (props) {
-    // Cancel if getUserMedia not supported.
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
-        return null;
-    // Cancel if SpeechRecognition not supported.
-    if (!SpeechRecognition)
-        return null;
-    var recognitionRef = React.useRef(null);
-    React.useEffect(function () {
-        // Create a SpeechRecognition.
-        recognitionRef.current = new SpeechRecognition();
-        recognitionRef.current.continuous = true;
-        recognitionRef.current.lang = "en-US";
-        recognitionRef.current.onresult = handleResult;
-        recognitionRef.current.start();
-        return function () {
-            if (recognitionRef.current) {
-                recognitionRef.current.stop();
-                delete recognitionRef.current;
-            }
-        };
-    }, []);
-    var handleResult = function (ev) {
-        var transcript = ev.results[ev.results.length - 1][0].transcript;
-        console.log("Transcript", transcript);
-        props.onTranscript(transcript);
-    };
-    return null;
-};
-SpeechRecognizer.isAvailable = function () {
-    // Cancel if SpeechRecognition not supported.
-    if (!SpeechRecognition)
-        return false;
-    return true;
-};
-export { SpeechRecognizer };

package/inputs/Editor/buttons/RecordButton.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { Editor } from '@tiptap/react';
-interface IProps {
-    editor: Editor;
-    recording: boolean;
-    onRecord: () => void;
-}
-declare const RecordButton: (props: IProps) => React.JSX.Element;
-export { RecordButton };

package/inputs/Editor/buttons/RecordButton.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { MenuButton } from '../menu/MenuButton';
-import { SVG } from '../../../svg';
-var RecordButton = function (props) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuButton, { editor: props.editor, hint: "Record audio", onClick: function (e) { e.stopPropagation(); props.onRecord(); }, active: props.recording, icon: SVG.Editor.Microphone })));
-};
-export { RecordButton };