@blocklet/pages-kit 0.2.285 → 0.2.287

package/lib/esm/builtin/async/ai-runtime/components/LoadingListItemButton.js

@@ -0,0 +1,48 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, ListItemButton } from '@mui/material';
+import { useState } from 'react';
+import { useLocaleContext } from '../../../locale';
+export default function LoadingListItemButton(_a) {
+    var props = __rest(_a, []);
+    const { t } = useLocaleContext();
+    const [clicked, setClicked] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const handleClick = (e) => __awaiter(this, void 0, void 0, function* () {
+        var _b;
+        if (loading)
+            return;
+        if (!clicked) {
+            setClicked(true);
+            return;
+        }
+        try {
+            setLoading(true);
+            yield ((_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props, e));
+        }
+        finally {
+            setClicked(false);
+            setLoading(false);
+        }
+    });
+    return (_jsxs(ListItemButton, Object.assign({}, props, { onClick: handleClick, sx: Object.assign(Object.assign({}, props.sx), { minWidth: 120, display: 'flex', justifyContent: 'space-between', gap: 1 }), children: [clicked ? t('confirmDelete') : t('delete'), loading && _jsx(CircularProgress, { size: 14 })] })));
+}

package/lib/esm/builtin/async/ai-runtime/components/MarkdownRenderer.js

@@ -0,0 +1,129 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, Stack, styled } from '@mui/material';
+import React from 'react';
+import { useLocaleContext } from '../../../locale';
+import MarkdownAsync from '../../react-markdown';
+import ReactSyntaxHighlighterAsync from '../../react-syntax-highlighter';
+import { ActionButton } from './ActionButton';
+const ReactSyntaxHighlighter = React.lazy(() => ReactSyntaxHighlighterAsync().then((m) => ({ default: m.Prism })));
+const Markdown = React.lazy(() => Promise.all([
+    MarkdownAsync(),
+    // @ts-ignore
+    import('https://esm.sh/remark-gfm@4?bundle'),
+]).then(([{ default: Markdown }, remark]) => ({
+    default: (props) => _jsx(Markdown, Object.assign({}, props, { remarkPlugins: [remark.default] })),
+})));
+const MarkdownRenderer = styled((props) => (_jsx(Markdown, Object.assign({}, props, { components: {
+        pre: MarkdownPre,
+        code: (_a) => {
+            var { node, inline, className, children } = _a, props = __rest(_a, ["node", "inline", "className", "children"]);
+            if (!children)
+                return null;
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline ? (_jsx(Box, Object.assign({ component: ReactSyntaxHighlighter, language: match === null || match === void 0 ? void 0 : match[1] }, props, { sx: { borderRadius: 1 }, children: String(children).replace(/\n$/, '') }))) : (_jsx(Box, Object.assign({ component: "code", className: className }, props, { children: children })));
+        },
+        table: ({ className, children }) => {
+            return (_jsx(Box, { sx: { overflow: 'auto', my: 1 }, children: _jsx("table", { className: className, children: children }) }));
+        },
+    } })))) `
+  width: 100%;
+  overflow: hidden;
+  word-break: break-word;
+
+  > * {
+    &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-top: 0;
+    }
+    &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
+      margin-bottom: 0;
+    }
+  }
+
+  pre {
+    overflow: auto;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li p {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    white-space: nowrap;
+
+    th,
+    td {
+      border: 1px solid grey;
+      padding: 4px 8px;
+    }
+  }
+
+  a {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    :hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.writing > *:last-child {
+    &:after {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      height: 1.2em;
+      margin-top: -0.2em;
+      margin-left: 0.1em;
+      border-right: 0.2em solid orange;
+      border-radius: 10px;
+      animation: blink-caret 0.75s step-end infinite;
+
+      @keyframes blink-caret {
+        from,
+        to {
+          border-color: transparent;
+        }
+        50% {
+          border-color: ${({ theme }) => theme.palette.secondary.main};
+        }
+      }
+    }
+  }
+`;
+export default MarkdownRenderer;
+function MarkdownPre({ children }) {
+    const { t } = useLocaleContext();
+    const childrenProps = children === null || children === void 0 ? void 0 : children.props;
+    if (!(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.children))
+        return null;
+    const match = /language-(\w+)/.exec(childrenProps.className || '');
+    const language = match === null || match === void 0 ? void 0 : match[1];
+    return (_jsxs(Box, { component: "div", sx: {
+            fontSize: 14,
+            borderRadius: 1,
+            bgcolor: 'rgb(245, 242, 240)',
+            '> pre': { mt: '0 !important' },
+        }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [_jsx(Box, { children: language }), _jsx(Box, { flex: 1 }), _jsx(ActionButton, { autoReset: true, tip: t('copyToClipboard'), tipSucceed: t('copied'), title: _jsx(Icon, { icon: "tabler:copy" }), titleSucceed: _jsx(Icon, { icon: "tabler:copy-check" }), sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 }, onClick: () => {
+                            window.navigator.clipboard.writeText(childrenProps.children);
+                        } })] }), children] }));
+}

package/lib/esm/builtin/async/ai-runtime/components/MenuButton.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material';
+import { Box, IconButton, Menu } from '@mui/material';
+import { useState } from 'react';
+export default function MenuButton({ sx, menus, children }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (_jsxs(Box, { sx: sx, children: [_jsx(IconButton, { onClick: handleClick, children: children || _jsx(MoreHorizIcon, {}) }), _jsx(Menu, { disableScrollLock: true, MenuListProps: {
+                    sx: {
+                        p: 0.5,
+                        '.MuiMenuItem-root': {
+                            minWidth: 120,
+                            fontSize: 14,
+                            lineHeight: 1.5,
+                            fontWeight: 'medium',
+                            borderRadius: 0.5,
+                        },
+                    },
+                }, slotProps: {
+                    paper: {
+                        sx: {
+                            border: 1,
+                            borderColor: 'divider',
+                            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                        },
+                    },
+                }, anchorEl: anchorEl, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, open: open, onClick: handleClose, onClose: handleClose, children: typeof menus === 'function' ? menus() : menus })] }));
+}

package/lib/esm/builtin/async/ai-runtime/components/PoweredBy.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '../../../locale';
+import { useSubscribeLink } from '../hooks/subscribe';
+export default function PoweredBy(_a) {
+    var { assistantId } = _a, props = __rest(_a, ["assistantId"]);
+    const { t } = useLocaleContext();
+    const { subscribeLink } = useSubscribeLink({ assistantId });
+    return (_jsxs(Stack, Object.assign({ py: 0.5 }, props, { children: [subscribeLink && (_jsxs(Box, { className: "ai-chat-require-subscribe-footer", sx: {
+                    px: 2,
+                    fontSize: 12,
+                    lineHeight: '20px',
+                    textAlign: 'center',
+                    color: 'rgba(75, 85, 99, 1)',
+                }, children: [t('requireNewSubscriptionFooter'), _jsx(Link, { href: subscribeLink, sx: { ml: 0.5 }, children: t('subscribeNow') })] })), _jsx(Stack, { className: "ai-chat-powered-by", direction: "row", justifyContent: "center", children: _jsxs(Typography, { variant: "caption", sx: { display: 'inline-flex', alignItems: 'center', a: { display: 'inline-flex', alignItems: 'center' } }, children: [_jsxs(Typography, { component: "span", fontSize: 12, color: "text.poweredBy", children: [t('poweredBy'), ' '] }), "\u00A0", _jsxs(Link, { href: "https://www.arcblock.io", target: "_blank", color: "text.poweredBy", children: [_jsx(Box, { component: "img", src: "https://www.arcblock.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "ArcBlock"] }), "\u00A0\u00B7\u00A0", _jsxs(Link, { href: "https://www.aigne.io", target: "_blank", color: "text.poweredBy", children: [_jsx(Box, { component: "img", src: "https://www.aigne.io/.well-known/service/blocklet/logo", sx: { height: 16, verticalAlign: 'middle', mr: 0.5, borderRadius: 0.5 } }), "AIGNE"] })] }) })] })));
+}

package/lib/esm/builtin/async/ai-runtime/components/RuntimeProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { LocaleProvider, useLocaleContext } from '../../../locale';
+import { translations } from '../locales';
+import GlobalLoading from './GlobalLoading';
+import ThemeProvider from './ThemeProvider';
+export default function RuntimeProvider({ children }) {
+    const { locale } = useLocaleContext();
+    return (_jsx(LocaleProvider, { translations: translations, locale: locale, fallbackLocale: "en", children: _jsx(ThemeProvider, { children: _jsxs(React.Suspense, { children: [_jsx(GlobalLoading, { sx: { position: 'fixed', left: 0, top: 0, width: '100%', zIndex: 'snackbar' } }), children] }) }) }));
+}

package/lib/esm/builtin/async/ai-runtime/components/ScrollView.js

@@ -0,0 +1,101 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import ScrollToBottomAsync from '../../react-scroll-to-bottom';
+const scrollToBottomModuleLoader = {};
+function loadScrollToBottomModule() {
+    var _a;
+    (_a = scrollToBottomModuleLoader.promise) !== null && _a !== void 0 ? _a : (scrollToBottomModuleLoader.promise = ScrollToBottomAsync()
+        .then((mod) => {
+        scrollToBottomModuleLoader.mod = mod;
+        return mod;
+    })
+        .catch((error) => {
+        scrollToBottomModuleLoader.error = error;
+        throw error;
+    }));
+    return scrollToBottomModuleLoader;
+}
+export function useScrollToBottomModule() {
+    const loader = loadScrollToBottomModule();
+    const [mod, setMod] = useState(loader.mod);
+    const [error, setError] = useState(loader.error);
+    useEffect(() => {
+        (() => __awaiter(this, void 0, void 0, function* () {
+            try {
+                yield loader.promise;
+                if (loader.mod)
+                    setMod(loader.mod);
+                else if (loader.error)
+                    setError(loader.error);
+            }
+            catch (error) {
+                setError(error);
+            }
+        }))();
+    }, []);
+    if (mod)
+        return mod;
+    if (error)
+        throw error;
+    throw loader.promise;
+}
+export default function ScrollView(_a) {
+    var { children, initialScrollBehavior } = _a, props = __rest(_a, ["children", "initialScrollBehavior"]);
+    const { Composer } = useScrollToBottomModule();
+    return (_jsx(Composer, { initialScrollBehavior: initialScrollBehavior, children: _jsx(ScrollViewWithinWindow, Object.assign({}, props, { children: children })) }));
+}
+function ScrollViewWithinWindow(_a) {
+    var { children, scroller, component } = _a, props = __rest(_a, ["children", "scroller", "component"]);
+    const { setTarget } = useScrollToBottomModule().useInternalContext();
+    const ele = useFakeScrollElementOfWindow();
+    useEffect(() => {
+        if (scroller === 'window') {
+            setTarget(ele);
+        }
+    }, [scroller]);
+    if (!component)
+        return children;
+    return (_jsx(Box, Object.assign({ component: component }, props, { ref: !scroller ? setTarget : undefined, children: children })));
+}
+function useFakeScrollElementOfWindow() {
+    return useMemo(() => {
+        const e = document.scrollingElement;
+        return new Proxy(e, {
+            get: (_, p) => {
+                if (p === 'offsetHeight')
+                    return window.innerHeight;
+                if (['addEventListener', 'removeEventListener'].includes(p))
+                    return window[p].bind(window);
+                const v = e[p];
+                if (v instanceof Function)
+                    return v.bind(e);
+                return v;
+            },
+            set: (_, p, v) => {
+                e[p] = v;
+                return true;
+            },
+        });
+    }, []);
+}

package/lib/esm/builtin/async/ai-runtime/components/SocialShare.js

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Box, MenuItem, useTheme } from '@mui/material';
+import { useCallback } from 'react';
+import { FacebookIcon, FacebookShareButton, LinkedinIcon, LinkedinShareButton, RedditIcon, RedditShareButton, TelegramIcon, TelegramShareButton, WeiboIcon, WeiboShareButton, XIcon, TwitterShareButton as XShareButton, } from 'react-share';
+import { LocaleProvider, useLocaleContext } from '../../../locale';
+import { translations } from '../locales';
+import { mergeSx } from '../utils';
+import MenuButton from './MenuButton';
+const getFormattedUrl = (url) => {
+    // remove page & sessionId query params
+    const urlObj = new URL(url);
+    urlObj.searchParams.delete('page');
+    urlObj.searchParams.delete('sessionId');
+    return urlObj.toString();
+};
+export default function SocialShare(props) {
+    const { type = 'menu' } = props, restProps = __rest(props, ["type"]);
+    const { locale } = useLocaleContext();
+    const renderContent = useCallback(() => {
+        // @ts-ignore
+        if (type === 'buttons') {
+            return _jsx(SocialShareButtons, Object.assign({}, restProps));
+        }
+        return _jsx(SocialShareMenu, Object.assign({}, restProps));
+    }, [type, restProps]);
+    return (_jsx(LocaleProvider, { translations: translations, locale: locale, fallbackLocale: "en", children: renderContent() }));
+}
+export function SocialShareMenu(_a) {
+    var { url = getFormattedUrl(window.location.href), content } = _a, restProps = __rest(_a, ["url", "content"]);
+    const theme = useTheme();
+    const { t } = useLocaleContext();
+    const itemIconSx = {
+        width: 22,
+        height: 22,
+        border: 1,
+        borderColor: theme.palette.text.secondary,
+        borderRadius: 0.75,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    const buttonSx = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1.5,
+        minWidth: 120,
+        lineHeight: '1!important',
+    };
+    const iconProps = {
+        bgStyle: { fill: '#fff' },
+        iconFillColor: theme.palette.text.secondary,
+        style: {
+            borderRadius: '6px',
+        },
+    };
+    const renderShareIcon = () => {
+        // eslint-disable-next-line react/no-unstable-nested-components
+        return _jsx(Box, Object.assign({ component: () => _jsx(Icon, { icon: "tabler:share" }) }, restProps));
+    };
+    return (_jsx(MenuButton, { menus: [
+            _jsx(MenuItem, { children: _jsxs(Box, { component: XShareButton, url: url, title: content, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: XIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToX') })] }) }, "shareOnX"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: TelegramShareButton, url: url, title: content, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: TelegramIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToTelegram') })] }) }, "shareOnTelegram"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: RedditShareButton, url: url, title: content, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: RedditIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToReddit') })] }) }, "shareOnReddit"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: WeiboShareButton, url: url, title: content, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: WeiboIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToWeibo') })] }) }, "shareOnWeibo"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: FacebookShareButton, url: url, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: FacebookIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToFacebook') })] }) }, "shareOnFacebook"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: LinkedinShareButton, url: url, summary: content, sx: buttonSx, children: [_jsx(Box, Object.assign({ component: LinkedinIcon, sx: itemIconSx, round: true }, iconProps)), _jsx("span", { children: t('socialShare.shareToLinkedin') })] }) }, "shareOnLinkedin"),
+            _jsx(MenuItem, { children: _jsxs(Box, { component: "div", sx: buttonSx, onClick: () => {
+                        window.navigator.clipboard.writeText(url);
+                    }, children: [_jsx(Box, { sx: itemIconSx, round: true, children: _jsx(Icon, Object.assign({ icon: "tabler:link" }, iconProps)) }), _jsx("span", { children: t('socialShare.copyLink') })] }) }, "copyToClipboard"),
+        ], children: renderShareIcon() }));
+}
+export function SocialShareButtons(_a) {
+    var { url = getFormattedUrl(window.location.href), content, sx, itemSx, onClick, bgFill, iconFill } = _a, rest = __rest(_a, ["url", "content", "sx", "itemSx", "onClick", "bgFill", "iconFill"]);
+    const mergedSx = mergeSx({ display: 'flex', alignItems: 'center', gap: 0.5, lineHeight: 1 }, sx);
+    const mergedItemSx = mergeSx({ width: { xs: 24, sm: 28 }, height: { xs: 24, sm: 28 }, borderRadius: 1 }, itemSx);
+    const iconProps = {
+        bgStyle: { fill: bgFill || '#bbb' },
+        iconFillColor: iconFill || '#fff',
+    };
+    return (_jsxs(Box, Object.assign({ sx: mergedSx }, rest, { children: [_jsx(XShareButton, { url: url, title: content, children: _jsx(Box, Object.assign({ component: XIcon, sx: mergedItemSx }, iconProps)) }), _jsx(TelegramShareButton, { url: url, title: content, children: _jsx(Box, Object.assign({ component: TelegramIcon, sx: mergedItemSx }, iconProps)) }), _jsx(RedditShareButton, { url: url, title: content, children: _jsx(Box, Object.assign({ component: RedditIcon, sx: mergedItemSx }, iconProps)) }), _jsx(WeiboShareButton, { url: url, title: content, children: _jsx(Box, Object.assign({ component: WeiboIcon, sx: mergedItemSx }, iconProps)) }), _jsx(FacebookShareButton, { url: url, children: _jsx(Box, Object.assign({ component: FacebookIcon, sx: mergedItemSx }, iconProps)) }), _jsx(LinkedinShareButton, { url: url, summary: content, children: _jsx(Box, Object.assign({ component: LinkedinIcon, sx: mergedItemSx }, iconProps)) })] })));
+}

package/lib/esm/builtin/async/ai-runtime/components/ThemeProvider.js

@@ -0,0 +1,190 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDropDownRounded } from '@mui/icons-material';
+import { GlobalStyles, ThemeProvider as MuiThemeProvider, alpha, createTheme, useTheme, } from '@mui/material';
+import { useMemo } from 'react';
+export default function ThemeProvider({ children, template, transparentHeaderBg, }) {
+    const theme = useTheme();
+    const colors = {
+        default: {
+            color: undefined,
+            bg: '#ffffff',
+            // primary: '#333843',
+            primary: '#3B82F6',
+        },
+        blue: {
+            color: 'white',
+            bg: 'linear-gradient(180deg, #0D60FF 0%, #E2EDFE 100%)',
+            primary: '#0D60FF',
+        },
+        red: {
+            color: 'white',
+            bg: 'linear-gradient(180deg, #F65F84 0%, #817DE6 100%), linear-gradient(180deg, #9300FF 0%, #D900FF 100%)',
+            primary: '#F65F84',
+        },
+        green: {
+            color: 'white',
+            bg: 'linear-gradient(180deg, #149E8C 0%, #35E77D 100%)',
+            primary: '#149E8C',
+        },
+    };
+    const color = colors[template] || colors.default;
+    const newTheme = useMemo(() => {
+        const themeOptions = {
+            components: {
+                MuiSelect: {
+                    defaultProps: { IconComponent: ArrowDropDownRounded },
+                },
+                MuiTextField: {
+                    variants: [
+                        {
+                            props: {},
+                            style: ({ theme }) => theme.unstable_sx({
+                                '.MuiInputBase-root': {
+                                    fieldset: { borderColor: 'rgba(229, 231, 235, 1)' },
+                                    '&:hover': {
+                                        fieldset: {
+                                            border: 'none',
+                                            boxShadow: `0px 0px 0px 4px ${alpha(theme.palette.primary.main, 0.2)}, 0px 0px 0px 1px ${theme.palette.primary.main}`,
+                                        },
+                                    },
+                                    '&.Mui-focused fieldset': {
+                                        border: 'none',
+                                        boxShadow: `0px 0px 0px 4px ${alpha(theme.palette.primary.main, 0.2)}, 0px 0px 0px 1px ${theme.palette.primary.main}`,
+                                    },
+                                },
+                            }),
+                        },
+                        {
+                            props: { select: true },
+                            style: (_a) => {
+                                var { theme } = _a, p = __rest(_a, ["theme"]);
+                                const { placeholder } = p;
+                                return theme.unstable_sx({
+                                    '& .MuiSelect-select .notranslate::after': placeholder
+                                        ? {
+                                            content: `"${placeholder}"`,
+                                            opacity: 0.42,
+                                        }
+                                        : {},
+                                    '& .MuiFormLabel-root:not(.MuiInputLabel-shrink) + .MuiInputBase-root > .MuiSelect-select .notranslate::after': {
+                                        opacity: 0,
+                                    },
+                                });
+                            },
+                        },
+                    ],
+                },
+                MuiListItemButton: {
+                    variants: [
+                        {
+                            props: {},
+                            style: ({ theme }) => theme.unstable_sx({
+                                fontSize: 13,
+                                color: '#010714',
+                            }),
+                        },
+                    ],
+                },
+                MuiDialog: {
+                    variants: [
+                        {
+                            props: {},
+                            style: ({ theme }) => theme.unstable_sx({
+                                '.MuiDialogTitle-root': {
+                                    px: 2.5,
+                                    py: 2,
+                                },
+                                '.MuiDialogContent-root': {
+                                    px: 2.5,
+                                    py: 2,
+                                },
+                                '.MuiDialogActions-root': {
+                                    px: 2.5,
+                                    py: 2,
+                                },
+                            }),
+                        },
+                    ],
+                },
+            },
+        };
+        const paletteTheme = createTheme({
+            palette: {
+                primary: {
+                    main: color.primary,
+                },
+                secondary: {
+                    main: '#010714',
+                },
+                text: {
+                    secondary: '#98A3B1',
+                    // @ts-ignore
+                    poweredBy: 'rgba(209, 213, 219, 1)',
+                },
+                // @ts-ignore custom `black` color
+                black: {
+                    main: '#010714',
+                },
+            },
+        });
+        return createTheme(theme, themeOptions, {
+            palette: {
+                primary: paletteTheme.palette.primary,
+                secondary: paletteTheme.palette.secondary,
+                text: paletteTheme.palette.text,
+                // @ts-ignore
+                black: paletteTheme.palette.black,
+                background: {
+                    default: color.bg,
+                },
+            },
+            shape: {
+                borderRadius: 8,
+            },
+            shadows: [
+                'none',
+                '0px 0px 0px 1px rgba(2, 7, 19, 0.08), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 2px 4px 0px rgba(2, 7, 19, 0.04)',
+                '0px 0px 0px 1px rgba(2, 7, 19, 0.08), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 2px 8px 0px rgba(2, 7, 19, 0.10)',
+                ...paletteTheme.shadows.slice(3),
+            ],
+        });
+    }, [theme]);
+    return (_jsxs(MuiThemeProvider, { theme: newTheme, children: [_jsx(GlobalStyles, { styles: {
+                    '.page-header': transparentHeaderBg
+                        ? {
+                            backgroundColor: 'transparent !important',
+                            color: color.color,
+                            button: {
+                                color: color.color,
+                            },
+                        }
+                        : {
+                            // with border bottom
+                            borderBottom: '1px solid rgba(229, 231, 235, 1)',
+                        },
+                    body: {
+                        background: 'transparent !important',
+                        '&:before': {
+                            content: '""',
+                            position: 'fixed',
+                            left: 0,
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            background: color.bg,
+                            zIndex: -1,
+                        },
+                    },
+                } }), children] }));
+}