@blocklet/editor-lite 2.6.0

package/lib/ext/AITranslationPlugin/utils.js

@@ -0,0 +1,343 @@
+import { $isParagraphNode, $createTextNode, $getNodeByKey, $isElementNode, $copyNode, } from 'lexical';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $isListNode, $isListItemNode } from '@lexical/list';
+import { $dfs, $findMatchingParent } from '@lexical/utils';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { joinURL } from 'ufo';
+import { getCSRFToken } from '@blocklet/js-sdk';
+import { blockletExists, getBlockletMountPointInfo, isValidUrl } from '../utils';
+import { $getDepth } from '../../lexical-utils';
+import { $htmlToNodes, $nodeToHtml, $hasValidTextNode, $isValidTextNode } from '../translation/translation-utils';
+const REGEX_INVALID_SEQUENCE = /^[#$%^&*()_+\-=\\[\]{};':"\\|,.<>/?]+$/;
+export const defaultTranslateAPI = async ({ texts, sourceLanguage, targetLanguage }, onData) => {
+    if (!blockletExists('did-comments')) {
+        throw new Error('Discuss Kit component must be installed.');
+    }
+    if (!texts || !Object.keys(texts)?.length) {
+        return;
+    }
+    const total = Object.keys(texts).length;
+    let done = 0;
+    try {
+        await fetchEventSource(joinURL(getBlockletMountPointInfo('did-comments').mountPoint, '/api/ai/translate'), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'x-csrf-token': getCSRFToken() },
+            body: JSON.stringify({ texts, sourceLanguage, targetLanguage }),
+            // @see: https://github.com/Azure/fetch-event-source/issues/36
+            openWhenHidden: true,
+            onmessage: (ev) => {
+                const { error, ...parsed } = JSON.parse(ev.data);
+                const data = {
+                    data: parsed,
+                    progress: Number((++done / total).toFixed(2)) * 100,
+                    error,
+                };
+                // eslint-disable-next-line no-console
+                console.log('onmessage: ', ev, data);
+                onData(data);
+            },
+            onerror(e) {
+                console.error('fetchEventSource#onerror', e);
+                throw e;
+            },
+        });
+    }
+    catch (e) {
+        console.error(e);
+        throw e;
+    }
+};
+// @see: https://github.com/facebook/lexical/pull/4230
+export function $copyNodeDeep(node) {
+    const nodeCopy = $copyNode(node);
+    const stack = [[node, nodeCopy]];
+    let stackLength;
+    // eslint-disable-next-line no-cond-assign
+    while ((stackLength = stack.length) > 0) {
+        for (let i = 0; i < stackLength; i++) {
+            const tuple = stack.shift();
+            if (tuple !== undefined) {
+                const [currentNode, currentNodeCopy] = tuple;
+                if ($isElementNode(currentNode) && $isElementNode(currentNodeCopy)) {
+                    const children = currentNode.getChildren();
+                    for (const child of children) {
+                        const childCopy = $copyNode(child);
+                        currentNodeCopy.append(childCopy);
+                        stack.push([child, childCopy]);
+                    }
+                }
+            }
+        }
+    }
+    return nodeCopy;
+}
+export const insertNodesAfter = (node, nodesToInsert) => {
+    let currentNode = node;
+    nodesToInsert.forEach((item) => {
+        currentNode.insertAfter(item);
+        currentNode = item;
+    });
+};
+/**
+ * 遍历顶层结点，获取需要翻译的结点列表
+ * - HeadingNode
+ * - ParagraphNode
+ * - ListItemNode
+ * - QuoteNode
+ */
+export const $extractTranslationNodes = (topLevelNodes) => {
+    const results = [];
+    topLevelNodes.forEach((node) => {
+        if ($isHeadingNode(node) || $isParagraphNode(node) || $isQuoteNode(node) || $isListItemNode(node)) {
+            results.push(node);
+        }
+        else if ($isListNode(node)) {
+            const listItemNodes = node.getChildren().filter((child) => $isListItemNode(child));
+            results.push(...listItemNodes);
+        }
+    });
+    return results.filter($hasValidTextNode);
+};
+/**
+ * 以下 node 符合 translation node:
+ * - heading node
+ * - paragraph node
+ * - list item node
+ * - quote node
+ */
+export const $extractTextContentFromTranslationNode = (translationNode, selectedNodes) => {
+    const selectedNodeKeys = new Set(selectedNodes?.map((item) => item.getKey()));
+    const isValidTextNode = (node) => $isValidTextNode(node) && (selectedNodes ? selectedNodeKeys.has(node.getKey()) : true);
+    const children = translationNode.getChildren();
+    const hasText = children.some((item) => $isValidTextNode(item) && !!item.getTextContent().trim());
+    if (!hasText) {
+        return '';
+    }
+    let text = '';
+    children.forEach((item) => {
+        if (isValidTextNode(item)) {
+            // 内容 trim 后若为空则忽略该 node
+            if (item.getTextContent().trim()) {
+                text += item.getTextContent();
+            }
+        }
+        else {
+            // 非 TextNode, 作为 ###<key>### 拼接到文本中
+            text += ` ###${item.getKey()}### `;
+        }
+    });
+    return text;
+};
+// translation nodes => translation blocks (若未传入 nodes, 默认为 editor 内所有的顶层结点)
+export const $extractTranslationBlocks = (editor, translationNodes) => {
+    const _translationNodes = translationNodes ||
+        $extractTranslationNodes($dfs()
+            .map((x) => x.node)
+            .filter((x) => $isElementNode(x)));
+    return _translationNodes
+        .map((node) => {
+        const text = $nodeToHtml(editor, node);
+        return { key: node.getKey(), text };
+    })
+        .filter((item) => {
+        const trim = item.text?.trim();
+        // 如果为空或 url, 则不翻译
+        if (!trim || isValidUrl(trim) || REGEX_INVALID_SEQUENCE.test(trim)) {
+            return false;
+        }
+        return true;
+    });
+};
+/**
+ * 处理带有 `###key###` 的文本, 将普通文本转成 TextNode, 将 `###key###` 替换成 key 对应的 Node
+ * @param {string} text - 如: "a ###1### b ###20### c"
+ * @param {NonTextNodeMatch[]} matches - 如: [{key: 1, index: 2, length: 7}, {key: 20, index: 12, length: 8}]
+ * @returns LexicalNode 数组, 如: [<text-node "a">, <node-key-1>, <text-node "b">, <node-key-20>, <text-node "c">, ]
+ */
+export const rearrangeNodes = (text, matches) => {
+    let cursor = 0;
+    const nodes = matches.reduce((acc, cur) => {
+        const { key, index, length } = cur;
+        const textBeforeNode = text.substring(cursor, index);
+        const node = $getNodeByKey(key);
+        if (textBeforeNode) {
+            acc.push($createTextNode(textBeforeNode));
+        }
+        if (node) {
+            acc.push(node);
+        }
+        cursor = index + length;
+        return acc;
+    }, []);
+    const lastText = text.substring(cursor);
+    if (lastText) {
+        nodes.push($createTextNode(lastText));
+    }
+    return nodes;
+};
+/**
+ * 处理带有 `###key###` 的文本 (对应一个 translation node 的文本), 解析文本中 `###key###` 的信息,
+ * 包括 Node Key, 在文本中的 index, 自身字符长度
+ * 比如: "a ###1### b ###20### c" => [{key: 1, index: 2, length: 7}, {key: 20, index: 12, length: 8}]
+ */
+export const matchNonTextNodes = (text) => {
+    const re = /###\d+###/g;
+    const matches = [];
+    let match = re.exec(text);
+    while (match) {
+        matches.push({ key: match[0].slice(3, -3), index: match.index, length: match[0].length });
+        match = re.exec(text);
+    }
+    return matches;
+};
+export const $replaceTranslation = (translationBlock, editor) => {
+    try {
+        const { text, key } = translationBlock;
+        const blockNode = $getNodeByKey(key);
+        if ($isElementNode(blockNode)) {
+            // 清除所有 children
+            blockNode.getChildren().forEach((child) => child.remove());
+            const nodes = $htmlToNodes(editor, text);
+            if (nodes.length === 1) {
+                const node = nodes[0];
+                if ($isElementNode(node)) {
+                    blockNode.append(...node.getChildren());
+                }
+                else {
+                    blockNode.append(node);
+                }
+            }
+            else {
+                blockNode.append(...nodes);
+            }
+        }
+        return blockNode;
+    }
+    catch (e) {
+        console.error(e);
+        return null;
+    }
+};
+export const $replaceTranslations = (editor, translationBlocks) => {
+    return translationBlocks.map((item) => $replaceTranslation(item, editor));
+};
+export const $insertTranslations = (translationBlocks, selection) => {
+    const nodes = translationBlocks
+        .map((translationBlock) => {
+        const { text, key } = translationBlock;
+        const matches = matchNonTextNodes(text);
+        const newNodes = rearrangeNodes(text, matches);
+        const blockNode = $getNodeByKey(key);
+        if ($isElementNode(blockNode)) {
+            const copied = $copyNode(blockNode);
+            const clonedNodes = newNodes.map((node) => $copyNodeDeep(node));
+            copied.append(...clonedNodes);
+            return copied;
+        }
+        return null;
+    })
+        .filter((item) => !!item);
+    const insertPoint = selection.isBackward() ? selection.anchor : selection.focus;
+    const topLevelNodeOfInsertPoint = insertPoint.getNode().getTopLevelElement();
+    if (topLevelNodeOfInsertPoint) {
+        insertNodesAfter(topLevelNodeOfInsertPoint, nodes);
+    }
+};
+export const $preview = (translationBlocks) => {
+    const result = translationBlocks.map((item) => {
+        const { text = '', key } = item;
+        const replaced = text
+            .replace(/###(\d+)###/g, (match, p1) => {
+            const node = $getNodeByKey(p1);
+            return node?.getTextContent() || '';
+        })
+            .trim();
+        const translationNode = $getNodeByKey(key);
+        if ($isHeadingNode(translationNode)) {
+            const tags = { h1: '#', h2: '##', h3: '###', h4: '####', h5: '#####', h6: '######' };
+            return `${tags[translationNode.getTag()]} ${replaced}`;
+        }
+        if ($isListItemNode(translationNode)) {
+            return `- ${replaced}`;
+        }
+        if ($isQuoteNode(translationNode)) {
+            return `> ${replaced}`;
+        }
+        return replaced;
+    });
+    return result.join('\n');
+};
+/**
+ * TODO: 剥除未选中的部分
+ */
+export const $extractTranslationBlockWithSelection = (translationNode, point, backward) => {
+    const pointNode = point.getNode();
+    // anchor/focus 可能对应着更深层的结点, 比如选中 link, anchor/focus 对应的是其内部的 text node
+    const thirdLevelParentNodeOfPointNode = $findMatchingParent(pointNode, (_node) => $getDepth(_node) === 2);
+    const subNodes = translationNode.getChildren();
+    const pointNodeIndex = subNodes.findIndex((item) => {
+        return item.getKey() === pointNode.getKey() || item.getKey() === thirdLevelParentNodeOfPointNode?.getKey();
+    });
+    let selectedNodes = [];
+    if (backward) {
+        selectedNodes = new Array(pointNodeIndex + 1).fill(null).map((_, index) => subNodes[index]);
+    }
+    else {
+        selectedNodes = new Array(subNodes.length - pointNodeIndex)
+            .fill(null)
+            .map((_, index) => subNodes[pointNodeIndex + index]);
+    }
+    selectedNodes = selectedNodes.filter(Boolean);
+    const text = $extractTextContentFromTranslationNode(translationNode, selectedNodes);
+    if (!text.trim()) {
+        return null;
+    }
+    return {
+        key: translationNode.getKey(),
+        text,
+        nodes: selectedNodes,
+        point,
+        // remainingText: ['', xxx],
+    };
+};
+export const getTopLevelNodesFromSelection = (selection) => {
+    const keys = new Set();
+    const topLevelNodes = [];
+    selection.getNodes().forEach((node) => {
+        const topLevelElement = node.getTopLevelElement();
+        if ($isElementNode(topLevelElement) && !keys.has(topLevelElement.getKey())) {
+            topLevelNodes.push(topLevelElement);
+            keys.add(topLevelElement.getKey());
+        }
+    });
+    return topLevelNodes;
+};
+// TODO: 选中非首个 list item 进行翻译时, firstTranslationNode 为首个 list item
+// TODO: topLevelNode 内的简单选择, 比如只选择了一个段落或 list item 中的一个词语
+export const $extractTranslationBlocksFromSelection = (editor, selection) => {
+    const topLevelNodes = getTopLevelNodesFromSelection(selection);
+    const translationNodes = $extractTranslationNodes(topLevelNodes);
+    const startPoint = selection.isBackward() ? selection.focus : selection.anchor;
+    const endPoint = selection.isBackward() ? selection.anchor : selection.focus;
+    // console.log('$extractTranslationBlocksFromSelection:', {
+    //   topLevelNodes,
+    //   translationNodes,
+    //   anchor: startPoint,
+    //   focus: endPoint,
+    // });
+    if (translationNodes.length === 0) {
+        return [];
+    }
+    const firstNode = translationNodes[0];
+    const firstTranslationBlock = $extractTranslationBlockWithSelection(firstNode, startPoint);
+    if (translationNodes.length === 1) {
+        return [firstTranslationBlock].filter((item) => !!item?.text);
+    }
+    // nodes length > 1
+    const lastNode = translationNodes[translationNodes.length - 1];
+    const lastTranslationBlock = $extractTranslationBlockWithSelection(lastNode, endPoint, true);
+    // 去掉首尾 node
+    const blocks = $extractTranslationBlocks(editor, translationNodes.slice(1, -1));
+    // console.log({ firstTranslationBlock, blocks, lastTranslationBlock });
+    return [firstTranslationBlock, ...blocks, lastTranslationBlock].filter((item) => !!item?.text);
+};

package/lib/ext/Aide/Aide.d.ts

@@ -0,0 +1,4 @@
+interface Props {
+}
+export declare function Aide(props: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/Aide/Aide.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, ClickAwayListener } from '@mui/material';
+import { useAideContext } from './context';
+import Input from './Input';
+import Output from './Output';
+import Templates from './Templates';
+import Menu from './Menu';
+import ExternalTemplates from './external-templates';
+import { useSafeArea } from '../SafeAreaPlugin';
+export function Aide(props) {
+    const { status, mode, reset, available } = useAideContext();
+    const handleClickAway = (e) => {
+        reset();
+    };
+    useSafeArea({ enabled: available && status !== 'initial', size: '360px' });
+    if (!available || status === 'initial') {
+        return null;
+    }
+    if (mode === 'templates') {
+        return _jsx(ExternalTemplates, {});
+    }
+    return (_jsx(ClickAwayListener, { onClickAway: handleClickAway, children: _jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: 320,
+                fontSize: 14,
+                pointerEvents: 'none',
+                zIndex: 1201,
+            }, ...props, children: [(status === 'activated' || status === 'waiting') && _jsx(Input, {}), _jsx(Templates, {}), status === 'completed' && (_jsxs(Box, { children: [_jsx(Output, {}), _jsx(Menu, {})] }))] }) }));
+}

package/lib/ext/Aide/Delayed.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    children: React.ReactElement<any>;
+    delay: number;
+}
+export default function Delayed({ children, delay }: Props): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export {};

package/lib/ext/Aide/Delayed.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+// delayed rendering
+export default function Delayed({ children, delay }) {
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setShow(true);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [delay]);
+    return show ? children : null;
+}

package/lib/ext/Aide/Input.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    prepend?: React.ReactNode;
+}
+export default function Input({ prepend, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/Aide/Input.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button } from '@mui/material';
+import { useAideContext } from './context';
+import { Card } from '../common';
+import AnimateText from '../../components/animateText';
+export default function Input({ prepend, ...rest }) {
+    const { status, input, activeBuiltinTemplate, setInput, sendToAI, stop } = useAideContext();
+    const submit = () => {
+        if (activeBuiltinTemplate || input) {
+            sendToAI(activeBuiltinTemplate || input);
+        }
+    };
+    const handleOnKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            submit();
+        }
+    };
+    // @ts-ignore
+    return (_jsxs(Card, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            flex: '0 0 auto',
+            width: 480,
+            height: 36,
+            lineHeight: 36,
+            overflow: 'hidden',
+        }, ...rest, children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alighItems: 'center',
+                    width: 36,
+                }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "bi:stars", "data-height": "16px", sx: { color: 'grey.600' } }) }), prepend, status === 'activated' && (_jsxs(_Fragment, { children: [_jsx(Box, { component: "input", type: "text", value: input, onChange: (e) => setInput(e.target.value), onKeyDown: handleOnKeyDown, ref: (ref) => {
+                            ref?.focus({ preventScroll: true });
+                        }, sx: {
+                            flex: '1 1 auto',
+                            height: '100%',
+                            border: 0,
+                            outline: 'none',
+                            bgcolor: 'transparent',
+                            color: 'text.primary',
+                        } }), _jsx(Box, { onClick: submit, sx: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alighItems: 'center',
+                            width: 36,
+                            color: input ? 'grey.500' : 'grey.400',
+                            cursor: input ? 'pointer' : 'initial',
+                        }, children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "material-symbols:arrow-circle-up-rounded", "data-height": "20px" }) })] })), status === 'waiting' && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: { flex: '1 1 auto', fontWeight: 'bold' }, children: _jsx(AnimateText, { sentence: "AI is writing ..." }) }), _jsx(Button, { onClick: () => stop(), size: "small", sx: { mr: 1, fontSize: 12, color: 'grey.400', '.MuiButton-startIcon': { mr: 0.5 } }, startIcon: _jsx(Box, { component: "i", className: "iconify", "data-icon": "material-symbols:stop-circle-rounded", "data-height": "18px" }), children: "Stop" })] }))] }));
+}

package/lib/ext/Aide/Menu.d.ts

@@ -0,0 +1,4 @@
+interface Props {
+}
+export default function Menu({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/Aide/Menu.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, MenuList, MenuItem, ListItemText, ListItemIcon, Typography } from '@mui/material';
+import { useAideContext } from './context';
+import { Card, MenuWrapper } from '../common';
+export default function Menu({ ...rest }) {
+    const { reset, retry, output, selection, replaceSelection, insertBelow, copy } = useAideContext();
+    const handleDiscard = () => {
+        reset();
+    };
+    const handleReplace = () => {
+        replaceSelection?.(selection, output);
+        reset();
+    };
+    const handleInsert = () => {
+        insertBelow?.(selection, output);
+        reset();
+    };
+    const handleCopy = () => {
+        copy?.(output);
+        reset({}, false, true);
+    };
+    const canReplace = selection && replaceSelection;
+    const canInsertBelow = selection && insertBelow;
+    return (_jsx(Card, { component: MenuWrapper, sx: {
+            flex: '1 1 auto',
+            width: 280,
+            my: 0.5,
+        }, ...rest, children: _jsxs(MenuList, { children: [canReplace && (_jsxs(MenuItem, { onClick: () => handleReplace(), sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "ic:baseline-check", "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, children: "Replace selection" }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] })), canInsertBelow && (_jsxs(MenuItem, { onClick: () => handleInsert(), sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "lucide:list-end", "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, children: "Insert below" }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] })), _jsxs(MenuItem, { onClick: () => retry(), sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "iconoir:redo", "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, children: "Try again" }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] }), _jsxs(MenuItem, { onClick: handleDiscard, sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "ph:trash", "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, children: "Discard" }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] }), _jsxs(MenuItem, { onClick: handleCopy, sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": "ph:copy", "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, children: "Copy" }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] })] }) }));
+}

package/lib/ext/Aide/Output.d.ts

@@ -0,0 +1,4 @@
+interface Props {
+}
+export default function Output({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ext/Aide/Output.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { useAideContext } from './context';
+import { Card } from '../common';
+export default function Output({ ...rest }) {
+    const { output } = useAideContext();
+    return (_jsx(Card, { sx: {
+            width: 480,
+            maxHeight: 300,
+            my: 0.5,
+            p: 1.5,
+            overflowY: 'auto',
+        }, ...rest, children: _jsx(Box, { children: output }) }));
+}

package/lib/ext/Aide/Templates.d.ts

@@ -0,0 +1,4 @@
+interface Props {
+}
+export default function Templates({ ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/ext/Aide/Templates.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, MenuList, MenuItem, ListItemText, ListItemIcon, Typography } from '@mui/material';
+import { useAideContext } from './context';
+import { Card, MenuWrapper, NestedMenuItem } from '../common';
+function TemplateOptions({ template, onSelect }) {
+    return (_jsx(MenuList, { children: template.options.map((option) => {
+            return (_jsx(MenuItem, { onClick: () => onSelect(template, option), children: option }, option));
+        }) }));
+}
+export default function Templates({ ...rest }) {
+    const { status, sendToAI, filteredTemplates, selectionText, activeBuiltinTemplate } = useAideContext();
+    if (status !== 'activated' || filteredTemplates.length === 0) {
+        return null;
+    }
+    const selectOption = (template, option) => {
+        const prompt = template.getPrompt(selectionText, option);
+        sendToAI(prompt);
+    };
+    return (_jsx(Card, { component: MenuWrapper, sx: {
+            flex: '0 1 auto',
+            width: 280,
+            my: 0.5,
+            overflowY: 'auto',
+        }, ...rest, children: _jsx(MenuList, { children: filteredTemplates.map((template) => {
+                if (template.hasOptions()) {
+                    return (_jsxs(NestedMenuItem, { subMenu: _jsx(Card, { sx: { minWidth: 200, maxHeight: 240, overflowY: 'auto' }, children: _jsx(TemplateOptions, { template: template, onSelect: selectOption }) }), children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                        lineHeight: 1.2,
+                                    }, children: template.name }) })] }, template.id));
+                }
+                return (_jsxs(MenuItem, { onClick: () => sendToAI(template), selected: activeBuiltinTemplate?.id === template.id, sx: { '&:hover .aide-templates-item': { display: 'inline-block' } }, children: [_jsx(ListItemIcon, { children: _jsx(Box, { component: "i", className: "iconify", "data-icon": template.icon, "data-height": "16px" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "inherit", noWrap: true, sx: {
+                                    lineHeight: 1.2,
+                                }, children: template.name }) }), _jsx(Box, { component: "i", className: "iconify aide-templates-item", "data-icon": "fluent:arrow-enter-24-regular", "data-height": "14px", sx: { display: 'none', color: 'grey.500' } })] }, template.id));
+            }) }) }));
+}

package/lib/ext/Aide/builtin-templates.d.ts

@@ -0,0 +1,3 @@
+import { Template } from './types';
+declare const _default: Template[];
+export default _default;

package/lib/ext/Aide/builtin-templates.js

@@ -0,0 +1,48 @@
+import { Template } from './types';
+const data = [
+    {
+        id: 'content-improver',
+        name: 'Content Improver',
+        icon: 'mingcute:pencil-2-line',
+        data: 'I want you to act as a content improver. I will speak to you in any language and you will detect the language, answer in the corrected and improved version of my text. Keep the meaning same, but make them more literary. I want you to only reply the correction, the improvements and nothing else, do not write explanations. My first content is: {0}.',
+    },
+    {
+        id: 'translate',
+        name: 'Translate',
+        options: ['English', 'Chinese', 'Japanese', 'Korean'],
+        icon: 'material-symbols:g-translate',
+        data: 'Provide the {1} translation for these sentences, just return the translation, do not include any other text: {0}',
+    },
+    {
+        id: 'make-shorter',
+        name: 'Make shorter',
+        icon: 'material-symbols:short-text',
+        data: 'Shorten this text: {0}',
+    },
+    {
+        id: 'make-longer',
+        name: 'Make longer',
+        icon: 'mdi:text-long',
+        data: 'Expand the following sentences by providing more information or detail: {0}',
+    },
+    {
+        id: 'summarize',
+        name: 'Summarize',
+        icon: 'tabler:blockquote',
+        data: 'Summarize the following text with the most unique and helpful points, into a numbered list of key points and takeaways: {0}',
+    },
+    {
+        id: 'change-tone',
+        name: 'Change tone',
+        options: ['Professional', 'Casual', 'Straightforward', 'Confident', 'Friendly'],
+        icon: 'material-symbols:auto-detect-voice-outline-rounded',
+        data: 'Rewrite the following content in a {1} tone: {0}',
+    },
+    {
+        id: 'continue-writing',
+        name: 'Continue writing',
+        icon: 'mingcute:pencil-2-line',
+        data: 'Generate subsequent content based on input, keeping it within two to three sentences and no more than 60 words. The input is: {0}',
+    },
+];
+export default data.map((item) => new Template(item.id, item.name, item.icon, item.data, item.options));

package/lib/ext/Aide/context.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import type { Completions, FetchTemplatesRequest, Mode, ParameterizedTemplate, ParameterizedTemplateCompletionsPayload, Status } from './types';
+import { Template } from './types';
+interface AideProviderProps {
+    children: ReactNode;
+    completions: Completions;
+    replaceSelection?: (selection: any, output: string) => void;
+    insertBelow?: (selection: any, output: string) => void;
+    copy?: (output: string) => void;
+}
+interface AideContextState {
+    status: Status;
+    mode: Mode;
+    templates: Template[];
+    externalTemplates: {
+        templates: ParameterizedTemplate[];
+        hasMore: boolean;
+        tags: string[];
+        tag?: string;
+        loading: boolean;
+    };
+    selection: any;
+    selectionText: string;
+    input: string;
+    output: string;
+}
+interface AideContextType extends AideContextState, Pick<AideProviderProps, 'replaceSelection' | 'insertBelow' | 'completions' | 'copy'> {
+    available: boolean;
+    filteredTemplates: Template[];
+    activeBuiltinTemplate?: Template;
+    activateAI: ({ mode, selectionText, selection, }: {
+        mode: Mode;
+        selectionText: string;
+        selection: any;
+    }) => Promise<void>;
+    setInput: (text: string) => void;
+    sendToAI: (payload: Template | ParameterizedTemplateCompletionsPayload | string) => void;
+    retry: () => void;
+    stop: () => void;
+    reset: (params?: Partial<AideContextState>, keepSelection?: boolean, isCopy?: boolean) => void;
+    loadMoreTemplates: (params?: FetchTemplatesRequest) => Promise<void>;
+    selectionText: string;
+}
+export declare const AideContext: import("react").Context<AideContextType>;
+export declare const useAideContext: () => AideContextType;
+export declare function AideProvider({ completions, replaceSelection, insertBelow, copy, children }: AideProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};