@longline/aqua-ui 1.0.196 → 1.0.198

package/hooks/useOpenAIStream/useOpenAIStream.js

@@ -0,0 +1,159 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useRef } from 'react';
+/**
+ * Hook to stream OpenAI responses via a backend endpoint that acts as a proxy.
+ *
+ * @returns `stream`: a function that takes a prompt and streaming callback.
+ */
+var useOpenAIStream = function (url) {
+    var abortRef = useRef(null);
+    /**
+     * Streams a prompt to a backend AI endpoint and handles streamed chunks.
+     *
+     * @param prompt - The input prompt to send.
+     * @param onText - A callback invoked for each streamed text chunk.
+     */
+    var stream = useCallback(function (prompt_1, onText_1) {
+        var args_1 = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args_1[_i - 2] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([prompt_1, onText_1], args_1, true), void 0, function (prompt, onText, options) {
+            var controller, response, reader, decoder, buffer, isDone, _a, done, value, parts, _b, parts_1, part, jsonStr, data, content, err_1;
+            var _c, _d, _e;
+            if (options === void 0) { options = { temperature: 0, top_p: 0 }; }
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        controller = new AbortController();
+                        abortRef.current = controller;
+                        return [4 /*yield*/, fetch(url, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'Accept': 'text/event-stream',
+                                    'Connection': 'keep-alive',
+                                    'Cache-Control': 'no-cache, no-transform'
+                                },
+                                body: JSON.stringify({
+                                    input: prompt,
+                                    temperature: options.temperature || 0,
+                                    top_p: options.top_p || 0
+                                }),
+                                signal: controller.signal
+                            })];
+                    case 1:
+                        response = _f.sent();
+                        if (!response.ok) {
+                            console.error("OpenAI stream request failed: ".concat(response.statusText));
+                            return [2 /*return*/];
+                        }
+                        if (!response.body) {
+                            console.error('No response body (ReadableStream) found.');
+                            return [2 /*return*/];
+                        }
+                        reader = response.body.getReader();
+                        decoder = new TextDecoder('utf-8');
+                        buffer = '';
+                        isDone = false;
+                        _f.label = 2;
+                    case 2:
+                        if (!!isDone) return [3 /*break*/, 11];
+                        return [4 /*yield*/, reader.read()];
+                    case 3:
+                        _a = _f.sent(), done = _a.done, value = _a.value;
+                        if (done)
+                            return [3 /*break*/, 11];
+                        buffer += decoder.decode(value, { stream: true });
+                        parts = buffer.split('\n\n');
+                        buffer = parts.pop(); // Keep partial data for next chunk
+                        _b = 0, parts_1 = parts;
+                        _f.label = 4;
+                    case 4:
+                        if (!(_b < parts_1.length)) return [3 /*break*/, 10];
+                        part = parts_1[_b];
+                        if (!part.startsWith('data: ')) return [3 /*break*/, 9];
+                        jsonStr = part.slice(6).trim();
+                        if (jsonStr === '[DONE]') {
+                            isDone = true;
+                            return [3 /*break*/, 10];
+                        }
+                        _f.label = 5;
+                    case 5:
+                        _f.trys.push([5, 8, , 9]);
+                        data = JSON.parse(jsonStr);
+                        content = (_e = (_d = (_c = data.choices) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.delta) === null || _e === void 0 ? void 0 : _e.content;
+                        if (!content) return [3 /*break*/, 7];
+                        return [4 /*yield*/, onText(content)];
+                    case 6:
+                        _f.sent();
+                        _f.label = 7;
+                    case 7: return [3 /*break*/, 9];
+                    case 8:
+                        err_1 = _f.sent();
+                        console.error('Failed to parse chunk:', jsonStr);
+                        return [3 /*break*/, 9];
+                    case 9:
+                        _b++;
+                        return [3 /*break*/, 4];
+                    case 10: return [3 /*break*/, 2];
+                    case 11: return [2 /*return*/];
+                }
+            });
+        });
+    }, [url]);
+    /**
+     * Cancels any ongoing stream.
+     */
+    var cancel = useCallback(function () {
+        var _a;
+        (_a = abortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+        abortRef.current = null;
+    }, []);
+    return { stream: stream, cancel: cancel };
+};
+export { useOpenAIStream };

package/inputs/Editor/Editor.d.ts

@@ -45,16 +45,26 @@ interface IEditorProps {
      */
     allowFullscreen?: boolean;
     /**
-     * If set, speech recognition will be available (if the browser supports it).
+     * If set, adds code and code block buttons to menu bar.
      */
-    allowSpeechRecognition?: boolean;
+    codeButtons?: boolean;
+    /**
+     * URL for OpenAI requests.
+     * If not present, no OpenAI controls will be available.
+     */
+    openAIurl?: string;
+    /**
+     * URL for AssemblyAI temporary token requests.
+     * If not present, no AssemblyAI controls will be available.
+     */
+    assemblyAIurl?: string;
     /**
      * Listeners are notified whenever the user interacts with the Editor.
      */
     onChange?: (value: any) => void;
 }
 declare const Editor: {
-    ({ fluid, error, disabled, transparent, ghost, allowFullscreen, ...props }: IEditorProps): React.JSX.Element;
+    ({ fluid, error, disabled, transparent, ghost, allowFullscreen, codeButtons, ...props }: IEditorProps): React.JSX.Element;
     displayName: string;
 };
 export { Editor, IEditorProps };

package/inputs/Editor/Editor.js

@@ -25,35 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { MarkElement } from './extensions/MarkElement';
+import { StreamNode } from './extensions/StreamNode';
 import { MenuBar } from './menu/MenuBar';
 import { InputWrapper } from '../Input/InputWrapper';
-import { SpeechRecognizer } from './SpeechRecognizer';
+import { EditorRegistry } from '../../controls/SpeechRecognizer/EditorRegistry';
 // define your extension array
-var extensions = [StarterKit];
+var extensions = [StarterKit, MarkElement, StreamNode];
 var EditorBase = function (props) {
     // Ref to wrapper; used for fullscreen mode.
     var wrapperRef = React.useRef(null);
+    // Ref to actual editor div (with contentEditable).
+    var contentEditableRef = React.useRef(null);
     var _a = React.useState(false), fullscreen = _a[0], setFullscreen = _a[1];
-    var _b = React.useState(false), recording = _b[0], setRecording = _b[1];
-    // Clicking anywhere will cancel recording.
-    var handleMousedown = function (e) {
-        e.stopPropagation();
-        setRecording(false);
-    };
-    React.useEffect(function () {
-        document.addEventListener('click', handleMousedown);
-        return function () { return document.removeEventListener('click', handleMousedown); };
-    }, [recording]);
     var handleUpdate = function (p) {
         if (props.onChange)
             props.onChange(p.editor.getHTML());
     };
-    var handleTranscript = function (transcript) {
-        editor.commands.insertContent(transcript);
-    };
     var handleFullscreenChange = function () {
         setFullscreen(document.fullscreenElement != null);
     };
@@ -78,19 +69,31 @@ var EditorBase = function (props) {
     React.useEffect(function () {
         editor.commands.setContent(props.value, true, { preserveWhitespace: "full" });
     }, [props.value]);
+    // Upon creation, an editor's contentEditable div is added to the 
+    // EditorRegistry.
+    var setRef = function (r) {
+        if (r == null || r == contentEditableRef.current)
+            return;
+        contentEditableRef.current = r.querySelector('.tiptap');
+        EditorRegistry.addEditor(contentEditableRef.current, editor);
+    };
+    // Upon unmount, an editor is removed from the EditorRegistry.
+    React.useEffect(function () { return function () {
+        EditorRegistry.removeEditor(contentEditableRef.current);
+    }; }, []);
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
         React.createElement("div", { className: props.className, ref: wrapperRef },
-            !props.disabled && !props.ghost &&
-                React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, allowSpeechRecognition: props.allowSpeechRecognition, recording: recording, onRecord: function () { return setRecording(!recording); } }),
             React.createElement(Wrapper, { className: fullscreen ? 'fullscreen' : '' },
-                React.createElement(EditorContent, { editor: editor }),
-                recording && React.createElement(SpeechRecognizer, { onTranscript: handleTranscript })))));
+                !props.disabled && !props.ghost &&
+                    React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, openAIurl: props.openAIurl, assemblyAIurl: props.assemblyAIurl }),
+                React.createElement(EditorContent, { editor: editor, ref: setRef })))));
 };
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n  }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; });
-var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"], ["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n  overflow-y: scroll;\n\n  // When a menu bar is displayed, allow space for it.\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    height: 100%; \n  "], ["\n    height: 100%; \n  "]))); }, function (p) { return !p.disabled && !p.ghost && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", " {\n      margin-top: 30px;\n    }\n  "], ["\n    ", " {\n      margin-top: 30px;\n    }\n  "])), Wrapper); });
+var pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: .15;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: .15;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n\n    // The 'mark' is used to show a small animated circle inside the last\n    // element being rendered from AI input.\n    mark {\n      display: inline-block;\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      color: transparent;\n      background-color: ", ";\n      animation: ", " 1s infinite alternate ease-in-out;\n      vertical-align: middle;\n      margin-left: 4px;\n      margin-right: 4px;\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: scroll;\n\n  &.fullscreen {\n    padding: 32px 32px 32px 32px;\n  }\n\n  .tiptap {\n    border: none;\n    outline: none;\n    // Define colors for placeholder text.\n    ::placeholder {\n      color: rgb(from ", " r g b / 50%);\n      opacity: 1 !important; /* Firefox applies opacity */\n    }\n    // Define colors for selected text.\n    ::selection {\n      background-color: ", ";\n      color: ", ";\n    }      \n  }\n\n  // Content styles:\n  .tiptap {\n    code {\n      background-color: ", ";\n      color: ", ";\n      outline: solid 1px ", ";\n      border-radius: 4px;\n      padding: 0 4px 0px 4px;\n    }\n\n    pre {\n      background-color: ", ";\n      border-radius: 4px;\n      color: ", ";\n      outline: solid 1px ", ";\n      padding: 8px 12px 8px 12px;\n      code {\n        background-color: transparent;\n        outline: none;\n        border-radius: none;\n        padding: 0 0 0 0;\n      }\n    }\n\n    // The 'mark' is used to show a small animated circle inside the last\n    // element being rendered from AI input.\n    mark {\n      display: inline-block;\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      color: transparent;\n      background-color: ", ";\n      animation: ", " 1s infinite alternate ease-in-out;\n      vertical-align: middle;\n      margin-left: 4px;\n      margin-right: 4px;\n    }\n  }\n"])), function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[1]; }, pulse);
+var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n"], ["\n  position:         relative;\n  box-sizing:       border-box;\n  width:            100%;\n  background-color: ", ";\n\n  // Editor has a fixed height, unless it flexes; then it will fill its \n  // container vertically.\n  height: 120px;\n  ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    height: 100%; \n  "], ["\n    height: 100%; \n  "]))); });
 var Editor = function (_a) {
-    var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, _g = _a.allowFullscreen, allowFullscreen = _g === void 0 ? false : _g, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost", "allowFullscreen"]);
-    return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost, allowFullscreen: allowFullscreen }, props));
+    var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, _g = _a.allowFullscreen, allowFullscreen = _g === void 0 ? false : _g, _h = _a.codeButtons, codeButtons = _h === void 0 ? false : _h, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost", "allowFullscreen", "codeButtons"]);
+    return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost, allowFullscreen: allowFullscreen, codeButtons: codeButtons }, props));
 };
 Editor.displayName = 'Editor';
 export { Editor };

package/inputs/Editor/buttons/CodeBlockButton.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { MenuButton } from '../menu/MenuButton';
 import { SVG } from '../../../svg';
 var CodeBlockButton = function (props) {
-    return (React.createElement(MenuButton, { editor: props.editor, hint: "Code", keys: ["Ctrl", "Alt", "C"], onClick: function () { return props.editor.chain().focus().toggleCodeBlock().run(); }, active: props.editor.isActive('codeBlock'), icon: SVG.Editor.CodeBlock }));
+    return (React.createElement(MenuButton, { editor: props.editor, hint: "Code block", keys: ["Ctrl", "Alt", "C"], onClick: function () { return props.editor.chain().focus().toggleCodeBlock().run(); }, active: props.editor.isActive('codeBlock'), icon: SVG.Editor.CodeBlock }));
 };
 export { CodeBlockButton };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Editor } from '@tiptap/react';
+interface IProps {
+    editor: Editor;
+    /**
+     * URL for AI requests.
+     */
+    url: string;
+}
+/**
+ * `AIButton` provides a menu button that allows the user to run various
+ * AI-powered transformations on selected editor content.
+ *
+ * Available transformations include:
+ * - Telling a joke
+ * - Summarizing selected content
+ * - Extracting key points
+ * - Translating to Portuguese
+ *
+ * When triggered, the selected content is cut, sent to OpenAI, and replaced
+ * with the transformed version. Streaming support allows real-time insertion
+ * with animated progress.
+ */
+declare const OpenAIButton: (props: IProps) => React.JSX.Element;
+export { OpenAIButton };

package/inputs/Editor/buttons/OpenAIButton.js

@@ -0,0 +1,208 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState } from 'react';
+import { marked } from 'marked';
+import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';
+import { useOpenAIStream } from '../../../hooks/useOpenAIStream';
+import { OpenAIMenu } from './OpenAIMenu';
+/**
+ * `AIButton` provides a menu button that allows the user to run various
+ * AI-powered transformations on selected editor content.
+ *
+ * Available transformations include:
+ * - Telling a joke
+ * - Summarizing selected content
+ * - Extracting key points
+ * - Translating to Portuguese
+ *
+ * When triggered, the selected content is cut, sent to OpenAI, and replaced
+ * with the transformed version. Streaming support allows real-time insertion
+ * with animated progress.
+ */
+var OpenAIButton = function (props) {
+    var streamOpenAI = useOpenAIStream(props.url).stream;
+    var _a = useState(false), streaming = _a[0], setStreaming = _a[1];
+    // The DOM parser is only created once, then used many times as content
+    // is streamed in.
+    var domParser = new DOMParser();
+    /**
+     * Copy the selected content, then remove it. The selection may be empty.
+     * @returns {string} The plain text that was selected and removed.
+     */
+    var cutEditorSelection = function () {
+        var _a = props.editor, state = _a.state, view = _a.view;
+        var selection = state.selection;
+        var slice = selection.content();
+        var text = slice.content.textBetween(0, slice.content.size, '\n');
+        view.dispatch(state.tr.deleteSelection());
+        return text;
+    };
+    /**
+     * Converts Markdown to HTML, optionally appending a `<mark>` element at the
+     * end to signal a live streaming update.
+     *
+     * TipTap requires HTML nodes to have content or they will be stripped out,
+     * so a dummy `"x"` is added to `<mark>`.
+     *
+     * @param text - The markdown text to convert.
+     * @param withMark - Whether to add an animated marker to the last element.
+     * @returns A parsed HTML Document containing the rendered result.
+     */
+    var markdownToHTML = function (text, withMark) { return __awaiter(void 0, void 0, void 0, function () {
+        var parsedText, html, lastChild, mark, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, marked.parse(text)];
+                case 1:
+                    parsedText = _a.sent();
+                    html = domParser.parseFromString(parsedText, 'text/html');
+                    lastChild = html.querySelector("body *:last-child");
+                    if (withMark && lastChild) {
+                        mark = html.createElement('mark');
+                        mark.innerHTML = "x"; // Mark must have content or TipTap will remove it.
+                        lastChild.appendChild(mark);
+                    }
+                    return [2 /*return*/, html];
+                case 2:
+                    error_1 = _a.sent();
+                    return [2 /*return*/, domParser.parseFromString("<p>Error parsing markdown.</p>", "text/html")];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var addNode = function (id, text, marker) { return __awaiter(void 0, void 0, void 0, function () {
+        var initialContent, initialContentNode, _a, state, view, from, node, tr;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, markdownToHTML(text, marker)];
+                case 1:
+                    initialContent = _b.sent();
+                    initialContentNode = ProseMirrorDOMParser.fromSchema(props.editor.schema).parse(initialContent.body);
+                    _a = props.editor, state = _a.state, view = _a.view;
+                    from = state.selection.from;
+                    node = state.schema.nodes.stream.create({ streamId: id }, initialContentNode.content);
+                    tr = state.tr.insert(from, node);
+                    view.dispatch(tr);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var removeNode = function (id) {
+        // Find the node with the ID:
+        var nodePos = null;
+        props.editor.state.doc.descendants(function (node, pos) {
+            if (node.type.name === 'stream' && node.attrs.streamId === id) {
+                nodePos = pos;
+                return false; // stop iteration
+            }
+            return true;
+        });
+        // Abort if not found.
+        if (nodePos == null)
+            return;
+        // Remove the node from the document.
+        var _a = props.editor, state = _a.state, view = _a.view;
+        var node = state.doc.nodeAt(nodePos);
+        var tr = state.tr.delete(nodePos, nodePos + node.nodeSize);
+        view.dispatch(tr);
+    };
+    var stream = function (prompt) { return __awaiter(void 0, void 0, void 0, function () {
+        var id, text;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    id = "stream-".concat(Date.now());
+                    // Create initial node.
+                    return [4 /*yield*/, addNode(id, "...", true)];
+                case 1:
+                    // Create initial node.
+                    _a.sent();
+                    text = "";
+                    return [4 /*yield*/, streamOpenAI(prompt, function (chunk) { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        text += chunk;
+                                        removeNode(id);
+                                        return [4 /*yield*/, addNode(id, text, true)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    // Replace the node one more time, this time without a blinking <mark>
+                    // cursor.
+                    removeNode(id);
+                    return [4 /*yield*/, addNode(id, text, false)];
+                case 3:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Performs a streamed AI transformation.
+     * Replaces the selected text with streamed output in real-time.
+     *
+     * The editor is disabled while the transformation runs to prevent user
+     * interference.
+     *
+     * @param promptFn - A function that generates the prompt based on selected
+     * content.
+     */
+    var transformStream = function (promptFn) {
+        // Disable the editor
+        props.editor.setOptions({ editable: false });
+        // Copy the selected content, then remove it.
+        // Feed it into prompt.
+        var prompt = promptFn(cutEditorSelection());
+        setStreaming(true);
+        stream(prompt)
+            .finally(function () {
+            setStreaming(false);
+            // Re-enable the editor:
+            props.editor.setOptions({ editable: true });
+        });
+    };
+    return (React.createElement(OpenAIMenu, { editor: props.editor, onClick: function (p) { return transformStream(p); }, animated: streaming }));
+};
+export { OpenAIButton };

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

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

package/inputs/Editor/buttons/OpenAIMenu.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Openable } from '../../../containers/Openable';
+import { MenuButton } from '../menu/MenuButton';
+import { List, ListRow } from '../../../containers/List';
+import { SVG } from '../../../svg';
+import { Icon } from '../../../controls/Icon';
+var OpenAIMenu = function (props) {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var _b = React.useState(false), langOpen = _b[0], setLangOpen = _b[1];
+    // With an empty selection, some AI commands cannot work, because they
+    // need a source text.  
+    var selectionIsEmpty = props.editor.state.selection.empty;
+    var handleClick = function (promptFn) {
+        setOpen(false);
+        props.onClick(promptFn);
+    };
+    React.useEffect(function () {
+        if (!open)
+            setLangOpen(false);
+    }, [open]);
+    var languages = ["US English", "UK English", "Portuguese", "Spanish", "French", "German", "Dutch", "Simplified Chinese"];
+    return (React.createElement(Openable, { width: 300, toggle: React.createElement(MenuButton, { editor: props.editor, onClick: function () { return setOpen(!open); }, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "OpenAI functions"), icon: { url: SVG.Editor.AI, animated: props.animated } }), content: React.createElement("div", { style: { display: 'flex', gap: '8px' } },
+            React.createElement("div", { style: { minWidth: '150px' } },
+                React.createElement(List, { maxItems: 4, contract: true },
+                    React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
+                            return "Produce a list of the key points in the following text, returning only the result: \n\n".concat(text);
+                        }); } }, "Summarize"),
+                    React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
+                            return "Produce a list of the key points in the following text, returning only the result: \n\n".concat(text);
+                        }); } }, "Key points"),
+                    React.createElement(ListRow, { disabled: selectionIsEmpty, onClick: function () { return setLangOpen(!langOpen); } },
+                        "Translate ",
+                        React.createElement(Icon, { color: "#333", disabled: true, rotated: -90, url: SVG.Icons.Caret })))),
+            langOpen &&
+                React.createElement("div", { style: { minWidth: '150px' } },
+                    React.createElement(List, { maxItems: 4, contract: true }, languages.map(function (lang) {
+                        return React.createElement(ListRow, { key: lang, disabled: selectionIsEmpty, onClick: function () { return handleClick(function (text) {
+                                return "Translate this text to ".concat(lang, ", returning only the result: \n\n").concat(text);
+                            }); } }, lang);
+                    })))), open: open, onClose: function () { return setOpen(false); } }));
+};
+export { OpenAIMenu };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Editor } from '@tiptap/react';
+interface IProps {
+    editor: Editor;
+    url: string;
+}
+declare const SpeechButton: (props: IProps) => React.JSX.Element;
+export { SpeechButton };

package/inputs/Editor/buttons/SpeechButton.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from 'react';
+import { MenuButton } from '../menu/MenuButton';
+import { SVG } from '../../../svg';
+import { useAssemblyAIRecorder } from '../../../hooks/useAssemblyAIRecorder';
+var SpeechButton = function (props) {
+    var fromRef = useRef(null);
+    var transcriptRef = useRef("");
+    var onTranscript = function (text) {
+        var _a = props.editor, state = _a.state, view = _a.view;
+        var transaction = state.tr
+            .insertText(text, fromRef.current, fromRef.current + transcriptRef.current.length);
+        view.dispatch(transaction);
+        transcriptRef.current = text;
+    };
+    var _a = useAssemblyAIRecorder(props.url, onTranscript), recordingStatus = _a.recordingStatus, toggleRecording = _a.toggleRecording;
+    useEffect(function () {
+        if (recordingStatus == 'recording') {
+            props.editor.setOptions({ editable: false });
+            fromRef.current = props.editor.state.selection.from;
+            transcriptRef.current = "";
+        }
+        if (recordingStatus != 'recording') {
+            props.editor.setOptions({ editable: true });
+        }
+    }, [recordingStatus]);
+    var handleClick = function () {
+        toggleRecording();
+    };
+    return (React.createElement(MenuButton, { editor: props.editor, hint: React.createElement("span", { style: { whiteSpace: "nowrap" } }, "AssemblyAI speech-to-text"), onClick: handleClick, disabled: false, active: recordingStatus == 'connecting', highlighted: recordingStatus == 'recording', icon: { url: SVG.Icons.Microphone } }));
+};
+export { SpeechButton };

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

@@ -0,0 +1,9 @@
+import { Mark } from '@tiptap/core';
+export interface MarkOptions {
+    HTMLAttributes: Record<string, any>;
+}
+/**
+ * Custom TipTap extension. This supports the `<mark>` element.
+ */
+declare const MarkElement: Mark<MarkOptions, any>;
+export { MarkElement };