@memori.ai/memori-react 8.38.5 → 9.0.0-alpha.0

package/esm/components/ShareButton/ShareButton.css

@@ -3,10 +3,256 @@
     display: inline-block;
 }
 
-.memori-share-button--button {
+.memori-share-button--trigger {
+    display: flex;
+    max-width: 2rem;
+    max-height: 2rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.memori-share-button--trigger svg {
+    width: 100%;
+    max-width: 1rem;
+    height: 100%;
+    max-height: 1rem;
+}
+
+.memori-share-button .memori-button.memori-button--active:not(:disabled):not(.memori-button--disabled) {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--memori-primary, #3b82f6) 40%, transparent);
+}
+
+.memori-share-button--trigger-menu-item {
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    justify-content: flex-start;
+}
+
+.memori-share-button--dropdown-item-content{
+    display: inline-flex;
+    width: 100%;
+    min-height: 1.25rem;
+    align-items: center;
+    cursor: pointer;
+}
+
+.memori-share-button--dropdown-menu {
+    min-width: 15.5rem;
+    max-width: 19rem;
+    padding: 0.375rem;
+}
+
+.memori-share-button--dropdown-section {
+    display: grid;
+    gap: 0.125rem;
+}
+
+.memori-share-button--inline-list {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.memori-share-button--inline-item {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: 0.55rem 0.65rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    gap: 0.5rem;
+    text-align: left;
+}
+
+.memori-share-button--inline-item svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--inline-item:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--inline-item:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.memori-share-button--dropdown-divider {
+    height: 1px;
+    margin: 0.375rem 0.125rem;
+    background-color: color-mix(
+        in srgb,
+        var(--memori-text-color, #111827) 12%,
+        transparent
+    );
+}
+
+/* All actionable menu rows: press feedback */
+.memori-share-button--menu-item {
+    position: relative;
+    border-radius: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
+}
+
+.memori-share-button--menu-item:active:not(:disabled) {
+    transform: scale(0.985);
+}
+
+/* Same primary tint as copy success, brief feedback on share / export / social / QR */
+.memori-share-button--menu-item--flash {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--success {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 12%,
+        transparent
+    );
+}
+
+.memori-share-button--copy-item--error {
+    background-color: color-mix(in srgb, #ef4444 10%, transparent);
+}
+
+.memori-share-button--copy-icon {
+    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-icon {
+    animation: memori-share-copy-check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1)
+        both;
+    color: var(--memori-primary, #3b82f6);
+}
+
+.memori-share-button--copy-label {
+    transition: opacity 0.15s ease;
+}
+
+.memori-share-button--copy-item--success .memori-share-button--copy-label {
+    font-weight: 600;
+}
+
+.memori-share-button--copy-item--error .memori-share-button--copy-label {
+    color: #b91c1c;
+}
+
+@keyframes memori-share-copy-check-pop {
+    0% {
+        opacity: 0.85;
+        transform: scale(0.6) rotate(-12deg);
+    }
+
+    60% {
+        transform: scale(1.08) rotate(4deg);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+.memori-share-button--qr-download {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 0.5rem;
+    margin-top: 0.25rem;
+    background: transparent;
+    color: var(--memori-primary, #3b82f6);
     cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    gap: 0.5rem;
+    transition:
+        background-color 0.2s ease,
+        transform 0.12s ease;
 }
 
+.memori-share-button--qr-download svg {
+    width: 1rem;
+    max-width: 1rem;
+    height: 1rem;
+    max-height: 1rem;
+    flex-shrink: 0;
+}
+
+.memori-share-button--qr-download:hover {
+    background-color: color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 10%,
+        transparent
+    );
+}
+
+.memori-share-button--qr-download:focus-visible {
+    outline: 2px solid color-mix(
+        in srgb,
+        var(--memori-primary, #3b82f6) 55%,
+        transparent
+    );
+    outline-offset: 2px;
+}
+
+.memori-share-button--qr-item {
+    display: flex;
+    justify-content: center;
+    padding: 0.625rem;
+}
+
+.memori-share-button--qr-content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.memori-share-button--qr-download:active {
+    transform: scale(0.985);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-share-button--menu-item,
+    .memori-share-button--copy-item,
+    .memori-share-button--copy-icon,
+    .memori-share-button--copy-label,
+    .memori-share-button--qr-download {
+        animation: none;
+        transition: none;
+    }
+
+    .memori-share-button--menu-item:active:not(:disabled),
+    .memori-share-button--qr-download:active {
+        transform: none;
+    }
+}
+
+
 .memori-share-button--overlay {
     position: absolute;
     right: auto;
@@ -16,12 +262,12 @@
     flex-direction: column;
     padding: 0.5rem 0;
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 0.375rem;
+    border-radius: var(--memori-radius-box);
     margin: 0;
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     background-color: #fff;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
-    color: #000;
+    color: var(--memori-text-color);
     list-style: none;
     outline: none;
     transform-origin: top right;
@@ -50,24 +296,24 @@ a.memori-share-button--link {
 }
 
 .memori-share-button--li-qr-code {
-    margin-top: 0.5rem;
+    margin-top: var(--memori-spacing-sm);
     text-align: center;
 }
 
 .memori-share-button--li-qr-code button {
     background: #fff;
-    color: #333;
+    color: var(--memori-text-color);
     cursor: pointer;
 }
 
 .memori-share-button--li-qr-code button:hover,
 .memori-share-button--li-qr-code button:focus {
     background: #fff;
-    color: #000;
+    color: var(--memori-text-color);
 }
 
 .memori-share-button--li-shared {
     padding-bottom: 0.25rem;
     border-bottom: 1px solid var(--memori-primary);
-    margin-bottom: 0.5rem;
+    margin-bottom: var(--memori-spacing-sm);
 }

package/esm/components/ShareButton/ShareButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '@memori.ai/ui';
 import { Tenant, Memori, Message } from '@memori.ai/memori-api-client/dist/types';
 export interface Props {
     tenant?: Tenant;
@@ -6,12 +7,16 @@ export interface Props {
     sessionID?: string;
     url?: string;
     title?: string;
-    className?: string;
     primary?: boolean;
+    triggerVariant?: React.ComponentProps<typeof Button>['variant'];
+    className?: string;
     baseUrl?: string;
     showQrCode?: boolean;
     align?: 'left' | 'right';
     history?: Message[];
+    triggerMode?: 'icon' | 'menu-item';
+    triggerLabel?: string;
+    renderMode?: 'dropdown' | 'inline';
 }
 declare const ShareButton: React.FC<Props>;
 export default ShareButton;

package/esm/components/ShareButton/ShareButton.js

@@ -1,27 +1,91 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Facebook from '../icons/Facebook';
-import Twitter from '../icons/Twitter';
-import LinkedIn from '../icons/Linkedin';
-import WhatsApp from '../icons/WhatsApp';
-import Mail from '../icons/Mail';
-import Link from '../icons/Link';
-import Share from '../icons/Share';
-import Download from '../icons/Download';
-import Telegram from '../icons/Telegram';
-import FilePdf from '../icons/FilePdf';
+import { Share2, Mail, Link as LinkIcon, Check, Download, FileText, } from 'lucide-react';
 import { QRCodeCanvas } from 'qrcode.react';
-import { Menu } from '@headlessui/react';
-import Button from '../ui/Button';
+import { Button, Dropdown, useAlertManager, createAlertOptions, Tooltip, } from '@memori.ai/ui';
 import cx from 'classnames';
 import { pdfExporter } from '../MemoriArtifactSystem/components/ArtifactActions/utils/PDFExporter';
-import toast from 'react-hot-toast';
 import { formatChatHistoryForPDF, createChatPDFDocument, } from '../../helpers/chatPdfExport';
-const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, baseUrl, primary = true, showQrCode = true, align = 'right', history = [], }) => {
+import FacebookIcon from '../../icons/FacebookIcon';
+import TwitterIcon from '../../icons/TwitterIcon';
+import LinkedinIcon from '../../icons/LinkedinIcon';
+import TelegramIcon from '../../icons/TelegramIcon';
+import WhatsappIcon from '../../icons/WhatsappIcon';
+const COPY_FEEDBACK_MS = 2500;
+const MENU_ACTION_FLASH_MS = 900;
+const ShareButton = ({ tenant, memori, sessionID, url, title = '', baseUrl, showQrCode = true, align = 'right', history = [], className, triggerMode = 'icon', triggerLabel, triggerVariant = 'ghost', renderMode = 'dropdown', }) => {
     const { t, i18n } = useTranslation();
+    const { add } = useAlertManager();
     const [targetUrl, setTargetUrl] = useState(url);
     const [isExportingPDF, setIsExportingPDF] = useState(false);
+    const [isShareMenuOpen, setIsShareMenuOpen] = useState(false);
+    const [copyStatus, setCopyStatus] = useState('idle');
+    const [menuFlashKey, setMenuFlashKey] = useState(null);
+    const copyResetTimeoutRef = useRef(null);
+    const menuFlashTimeoutRef = useRef(null);
+    const shareMenuContainerRef = useRef(null);
+    const clearCopyReset = () => {
+        if (copyResetTimeoutRef.current !== null) {
+            clearTimeout(copyResetTimeoutRef.current);
+            copyResetTimeoutRef.current = null;
+        }
+    };
+    const clearMenuFlash = () => {
+        if (menuFlashTimeoutRef.current !== null) {
+            clearTimeout(menuFlashTimeoutRef.current);
+            menuFlashTimeoutRef.current = null;
+        }
+        setMenuFlashKey(null);
+    };
+    const flashMenuItem = (key) => {
+        clearMenuFlash();
+        setMenuFlashKey(key);
+        menuFlashTimeoutRef.current = setTimeout(() => {
+            setMenuFlashKey(null);
+            menuFlashTimeoutRef.current = null;
+        }, MENU_ACTION_FLASH_MS);
+    };
+    const scheduleCopyReset = () => {
+        clearCopyReset();
+        copyResetTimeoutRef.current = setTimeout(() => {
+            setCopyStatus('idle');
+            copyResetTimeoutRef.current = null;
+        }, COPY_FEEDBACK_MS);
+    };
+    const handleShareMenuOpenChange = (open) => {
+        setIsShareMenuOpen(open);
+        if (!open) {
+            clearCopyReset();
+            clearMenuFlash();
+            setCopyStatus('idle');
+        }
+    };
+    const clearMenuItemFocus = () => {
+        var _a;
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement &&
+            ((_a = shareMenuContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+            activeElement.blur();
+        }
+    };
+    useEffect(() => () => {
+        clearCopyReset();
+        clearMenuFlash();
+    }, []);
+    const handleCopyLink = async () => {
+        if (!targetUrl)
+            return;
+        try {
+            await navigator.clipboard.writeText(targetUrl);
+            setCopyStatus('success');
+            scheduleCopyReset();
+        }
+        catch (_a) {
+            setCopyStatus('error');
+            scheduleCopyReset();
+        }
+    };
     const qrImageURL = useMemo(() => (tenant === null || tenant === void 0 ? void 0 : tenant.theme)
         ? `${baseUrl !== null && baseUrl !== void 0 ? baseUrl : 'https://aisuru.com'}/images/${tenant.theme}/square_logo.png`
         : `${baseUrl !== null && baseUrl !== void 0 ? baseUrl : 'https://aisuru.com'}/images/memori_logo.png`, [tenant, baseUrl]);
@@ -34,31 +98,31 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
             id: 'facebook',
             title: 'Facebook',
             url: `https://www.facebook.com/sharer/sharer.php?u=${targetUrl}`,
-            icon: Facebook,
+            icon: FacebookIcon,
         },
         {
             id: 'twitter',
             title: 'Twitter',
             url: `https://twitter.com/intent/tweet?url=${targetUrl}`,
-            icon: Twitter,
+            icon: TwitterIcon,
         },
         {
             id: 'linkedin',
             title: 'LinkedIn',
             url: `https://www.linkedin.com/shareArticle?mini=true&title=${title}&url=${targetUrl}`,
-            icon: LinkedIn,
+            icon: LinkedinIcon,
         },
         {
             id: 'whatsapp',
             title: 'Whatsapp',
             url: `https://api.whatsapp.com/send?phone=&text=${targetUrl}`,
-            icon: WhatsApp,
+            icon: WhatsappIcon,
         },
         {
             id: 'telegram',
             title: 'Telegram',
             url: `https://t.me/share/url?text=${title}&url=${targetUrl}`,
-            icon: Telegram,
+            icon: TelegramIcon,
         },
         {
             id: 'email',
@@ -78,14 +142,34 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
         link.click();
         document.body.removeChild(link);
     };
+    const handleDownloadQR = () => {
+        downloadQRCode();
+        flashMenuItem('qr-download');
+    };
+    const openShareTarget = (item) => {
+        if (item.id === 'email') {
+            const opened = window.open(item.url, '_self');
+            if (!opened) {
+                window.location.href = item.url;
+            }
+            return;
+        }
+        window.open(item.url, '_blank', 'noopener,noreferrer');
+    };
     const handleExportPDF = async () => {
         if (!history || history.length === 0) {
-            toast.error(t('exportChatHistory.empty') || 'No chat history to export');
+            add(createAlertOptions({
+                description: t('exportChatHistory.empty') || 'No chat history to export',
+                severity: 'error',
+            }));
             return;
         }
         if (!pdfExporter.isSupported()) {
-            toast.error(t('exportChatHistory.pdfNotSupported') ||
-                'PDF export is not supported in this browser');
+            add(createAlertOptions({
+                description: t('exportChatHistory.pdfNotSupported') ||
+                    'PDF export is not supported in this browser',
+                severity: 'error',
+            }));
             return;
         }
         setIsExportingPDF(true);
@@ -108,7 +192,9 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
                     document.querySelector('memori-client') ||
                     document.documentElement;
                 const computedStyle = getComputedStyle(rootElement);
-                primaryColorRgb = computedStyle.getPropertyValue('--memori-primary-rgb').trim();
+                primaryColorRgb = computedStyle
+                    .getPropertyValue('--memori-primary-rgb')
+                    .trim();
                 if (!primaryColorRgb) {
                     primaryColorRgb = getComputedStyle(document.documentElement)
                         .getPropertyValue('--memori-primary-rgb')
@@ -122,7 +208,7 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
                 fontSize: '12pt',
                 fontFamily: 'system-ui, -apple-system, sans-serif',
                 lineHeight: '1.6',
-                color: '#333',
+                color: 'var(--memori-text-color)',
                 backgroundColor: '#fff',
                 primaryColorRgb: primaryColorRgb || undefined,
             };
@@ -145,12 +231,20 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
                     }, 1000);
                 }
             }, 500);
-            toast.success(t('exportChatHistory.success') || 'Chat exported to PDF successfully');
+            add(createAlertOptions({
+                description: t('exportChatHistory.success') ||
+                    'Chat exported to PDF successfully',
+                severity: 'success',
+            }));
+            flashMenuItem('export-pdf');
         }
         catch (error) {
             console.error('PDF export error:', error);
-            toast.error(t('exportChatHistory.error') ||
-                'Failed to export chat to PDF. Please try again.');
+            add(createAlertOptions({
+                description: t('exportChatHistory.error') ||
+                    'Failed to export chat to PDF. Please try again.',
+                severity: 'error',
+            }));
         }
         finally {
             setIsExportingPDF(false);
@@ -165,27 +259,91 @@ const ShareButton = ({ tenant, memori, sessionID, url, title = '', className, ba
         if (memori.exposed) {
             return `${baseUrl !== null && baseUrl !== void 0 ? baseUrl : 'https://www.aisuru.com'}/${i18n.language === 'it' ? 'it' : 'en'}/shared/${memori.ownerUserName}/${memori.name}/${sessionID}`;
         }
+        ``;
         return undefined;
     }, [memori, sessionID, baseUrl, i18n.language]);
-    return (_jsxs(Menu, { as: "div", className: cx('memori-share-button', {
-            'memori-share-button--align-left': align === 'left',
-        }), children: [_jsx(Menu.Button, { className: cx('memori-button', 'memori-button--circle', 'memori-button--icon-only', 'memori-share-button--button', className, {
-                    'memori-button--primary': primary,
-                }), title: t('widget.share') || undefined, children: _jsx("div", { className: "memori-button--icon", children: _jsx(Share, {}) }) }), _jsxs(Menu.Items, { className: "memori-share-button--overlay", as: "ul", children: [memori && sessionID && sharedUrl && (_jsx(Menu.Item, { as: "li", className: "memori-share-button--li memori-share-button--li-shared", children: _jsxs("a", { className: cx('memori-button', 'memori-button--with-icon', 'memori-button--ghost', 'memori-button--padded', 'memori-share-button--link'), href: sharedUrl, target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "memori-button--icon", children: _jsx(Share, {}) }), t('widget.shareChat') || 'Share chat'] }) }, "shared")), history && history.length > 0 && (_jsx(Menu.Item, { as: "li", className: "memori-share-button--li", children: _jsx(Button, { className: "memori-share-button--link", ghost: true, icon: _jsx(FilePdf, {}), onClick: handleExportPDF, disabled: isExportingPDF, children: isExportingPDF
-                                ? t('exportChatHistory.exporting') || 'Exporting...'
-                                : t('exportChatHistory.exportPDF') || 'Export chat as PDF' }) }, "export-pdf")), _jsx(Menu.Item, { as: "li", className: "memori-share-button--li", children: _jsx(Button, { className: "memori-share-button--link", ghost: true, icon: _jsx(Link, {}), onClick: () => {
-                                targetUrl && navigator.clipboard.writeText(targetUrl);
-                            }, children: t('copyToClipboard') || undefined }) }, "copy"), socialShare.map(item => {
-                        var _a;
-                        return (_jsx(Menu.Item, { as: "li", className: "memori-share-button--li", children: _jsxs("a", { className: cx('memori-button', 'memori-button--with-icon', 'memori-button--ghost', 'memori-button--padded', 'memori-share-button--link'), href: (_a = item.url) !== null && _a !== void 0 ? _a : '', target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "memori-button--icon", children: _jsx(item.icon, {}) }), item.title] }) }, item.id));
-                    }), showQrCode && (_jsxs(Menu.Item, { as: "li", className: "memori-share-button--li-qr-code", children: [_jsx(QRCodeCanvas, { id: "qr-canvas", value: targetUrl !== null && targetUrl !== void 0 ? targetUrl : '', size: 128, bgColor: '#ffffff', fgColor: '#000000', level: 'H', includeMargin: false, imageSettings: {
+    const shareMenu = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "memori-share-button--dropdown-section", children: [memori && sessionID && sharedUrl && (_jsxs("button", { type: "button", className: cx('memori-share-button--inline-item', {
+                            'memori-share-button--menu-item--flash': menuFlashKey === 'share-chat',
+                        }), onClick: () => {
+                            window.open(sharedUrl, '_blank');
+                            flashMenuItem('share-chat');
+                        }, children: [_jsx(Share2, {}), _jsx("span", { children: t('widget.shareChat') || 'Share chat' })] })), history && history.length > 0 && (_jsxs("button", { type: "button", className: cx('memori-share-button--inline-item', {
+                            'memori-share-button--menu-item--flash': menuFlashKey === 'export-pdf',
+                        }), onClick: handleExportPDF, disabled: isExportingPDF, children: [_jsx(FileText, {}), _jsx("span", { children: isExportingPDF
+                                    ? t('exportChatHistory.exporting') || 'Exporting...'
+                                    : t('exportChatHistory.exportPDF') || 'Export chat as PDF' })] })), _jsxs("button", { type: "button", className: cx('memori-share-button--inline-item', {
+                            'memori-share-button--copy-item--success': copyStatus === 'success',
+                            'memori-share-button--copy-item--error': copyStatus === 'error',
+                        }), onClick: handleCopyLink, children: [copyStatus === 'success' ? (_jsx(Check, { strokeWidth: 2.5 })) : (_jsx(LinkIcon, {})), _jsx("span", { children: copyStatus === 'success'
+                                    ? t('copied')
+                                    : copyStatus === 'error'
+                                        ? t('copyFailed', { defaultValue: 'Could not copy' })
+                                        : t('copyToClipboard') || undefined })] })] }), _jsx("div", { className: "memori-share-button--dropdown-divider" }), _jsx("div", { className: "memori-share-button--dropdown-section", children: socialShare.map(item => {
+                    const IconComponent = item.icon;
+                    return (_jsxs("button", { type: "button", className: cx('memori-share-button--inline-item', {
+                            'memori-share-button--menu-item--flash': menuFlashKey === item.id,
+                        }), onClick: () => {
+                            openShareTarget(item);
+                            flashMenuItem(item.id);
+                        }, children: [_jsx(IconComponent, { "aria-hidden": true }), _jsx("span", { children: item.title })] }, item.id));
+                }) }), showQrCode && (_jsxs(_Fragment, { children: [_jsx("div", { className: "memori-share-button--dropdown-divider" }), _jsxs("div", { className: "memori-share-button--qr-content", children: [_jsx(QRCodeCanvas, { id: "qr-canvas", value: targetUrl !== null && targetUrl !== void 0 ? targetUrl : '', size: 128, bgColor: '#ffffff', fgColor: '#000000', level: 'H', includeMargin: false, imageSettings: {
                                     src: qrImageURL,
                                     x: undefined,
                                     y: undefined,
                                     height: 32,
                                     width: 32,
                                     excavate: true,
-                                } }), _jsx("div", { children: _jsx(Button, { onClick: downloadQRCode, icon: _jsx(Download, {}), title: "Download QR", children: "Download" }) })] }, "qrcode"))] })] }));
+                                } }), _jsxs("button", { type: "button", className: "memori-share-button--qr-download", onClick: handleDownloadQR, children: [_jsx(Download, { "aria-hidden": true }), _jsx("span", { children: t('widget.downloadQrCode') ||
+                                            t('download', { defaultValue: 'Download' }) })] })] })] }))] }));
+    if (renderMode === 'inline') {
+        return (_jsx("div", { className: cx('memori-share-button--inline-list', className), children: shareMenu }));
+    }
+    return (_jsxs(Dropdown, { onOpenChange: handleShareMenuOpenChange, className: cx('memori-share-button', {
+            'memori-share-button--align-left': align === 'left',
+        }, className), children: [_jsx(Tooltip, { content: t('widget.share') || undefined, placement: "bottom", children: _jsx(Dropdown.Trigger, { showChevron: false, className: "memori-share-button--trigger", render: (props) => (_jsx(Button, { ...props, variant: triggerVariant, "aria-label": String(triggerLabel || t('widget.share') || 'Share'), icon: _jsx(Share2, { "aria-hidden": true }), className: cx({
+                            'memori-share-button--trigger-menu-item': triggerMode === 'menu-item',
+                        }, isShareMenuOpen && 'memori-button--active'), children: triggerMode === 'menu-item'
+                            ? triggerLabel || t('widget.share')
+                            : undefined })) }) }), _jsx(Dropdown.Menu, { className: "memori-share-button--dropdown-menu", children: _jsxs("div", { ref: shareMenuContainerRef, className: "memori-share-button--dropdown-content", onMouseLeave: clearMenuItemFocus, children: [_jsxs("div", { className: "memori-share-button--dropdown-section", children: [memori && sessionID && sharedUrl && (_jsx(Dropdown.Item, { closeOnClick: false, className: cx('memori-share-button--menu-item', {
+                                        'memori-share-button--menu-item--flash': menuFlashKey === 'share-chat',
+                                    }), onClick: () => {
+                                        window.open(sharedUrl, '_blank');
+                                        flashMenuItem('share-chat');
+                                    }, ...{ icon: _jsx(Share2, {}) }, children: _jsx("span", { className: "memori-share-button--dropdown-item-content", children: t('widget.shareChat') || 'Share chat' }) }, "shared")), history && history.length > 0 && (_jsx(Dropdown.Item, { closeOnClick: false, className: cx('memori-share-button--menu-item', {
+                                        'memori-share-button--menu-item--flash': menuFlashKey === 'export-pdf',
+                                    }), onClick: handleExportPDF, disabled: isExportingPDF, ...{ icon: _jsx(FileText, {}) }, children: _jsx("span", { className: "memori-share-button--dropdown-item-content", children: isExportingPDF
+                                            ? t('exportChatHistory.exporting') || 'Exporting...'
+                                            : t('exportChatHistory.exportPDF') || 'Export chat as PDF' }) }, "export-pdf")), _jsx(Dropdown.Item, { closeOnClick: false, className: cx('memori-share-button--menu-item', 'memori-share-button--copy-item', {
+                                        'memori-share-button--copy-item--success': copyStatus === 'success',
+                                        'memori-share-button--copy-item--error': copyStatus === 'error',
+                                    }), onClick: handleCopyLink, ...{
+                                        icon: copyStatus === 'success' ? (_jsx(Check, { className: "memori-share-button--copy-icon", "aria-hidden": true, strokeWidth: 2.5 })) : (_jsx(LinkIcon, { className: "memori-share-button--copy-icon", "aria-hidden": true })),
+                                    }, children: _jsx("span", { className: "memori-share-button--dropdown-item-content memori-share-button--copy-label", "aria-live": "polite", children: copyStatus === 'success'
+                                            ? t('copied')
+                                            : copyStatus === 'error'
+                                                ? t('copyFailed', { defaultValue: 'Could not copy' })
+                                                : t('copyToClipboard') || undefined }) })] }), _jsx("div", { className: "memori-share-button--dropdown-divider" }), _jsx("div", { className: "memori-share-button--dropdown-section", children: socialShare.map(item => {
+                                const IconComponent = item.icon;
+                                return (_jsx(Dropdown.Item, { closeOnClick: false, className: cx('memori-share-button--menu-item', {
+                                        'memori-share-button--menu-item--flash': menuFlashKey === item.id,
+                                    }), onClick: () => {
+                                        openShareTarget(item);
+                                        flashMenuItem(item.id);
+                                    }, ...{ icon: _jsx(IconComponent, {}) }, children: _jsx("span", { className: "memori-share-button--dropdown-item-content", children: item.title }) }, item.id));
+                            }) }), showQrCode && (_jsxs(_Fragment, { children: [_jsx("div", { className: "memori-share-button--dropdown-divider" }), _jsx(Dropdown.Item, { closeOnClick: false, className: cx('memori-share-button--menu-item', 'memori-share-button--qr-item', {
+                                        'memori-share-button--menu-item--flash': menuFlashKey === 'qr-download',
+                                    }), onClick: handleDownloadQR, children: _jsxs("div", { className: "memori-share-button--qr-content", children: [_jsx(QRCodeCanvas, { id: "qr-canvas", value: targetUrl !== null && targetUrl !== void 0 ? targetUrl : '', size: 128, bgColor: '#ffffff', fgColor: '#000000', level: 'H', includeMargin: false, imageSettings: {
+                                                    src: qrImageURL,
+                                                    x: undefined,
+                                                    y: undefined,
+                                                    height: 32,
+                                                    width: 32,
+                                                    excavate: true,
+                                                } }), _jsxs("button", { type: "button", className: "memori-share-button--qr-download", onClick: event => {
+                                                    event.stopPropagation();
+                                                    handleDownloadQR();
+                                                }, children: [_jsx(Download, { "aria-hidden": true }), _jsx("span", { children: String(t('widget.downloadQrCode') ||
+                                                            t('download', { defaultValue: 'Download' })) })] })] }) })] }))] }) })] }));
 };
 export default ShareButton;
 //# sourceMappingURL=ShareButton.js.map