@memori.ai/memori-react 8.45.4 → 8.45.6

package/esm/components/PositionPopover/PositionPopover.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Popover, Tooltip } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
+import { MapPin, Pencil } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { getUncertaintyByViewport } from '../../helpers/venue';
+import { useDebounceFn } from '../../helpers/utils';
+import { VenueCombobox, VenueMapPreview, getPlaceName, } from '../VenueWidget/VenueWidget';
+import cx from 'classnames';
+const GEOCODE_TIMEOUT_MS = 8000;
+function hasShareableCoords(v) {
+    return !!((v === null || v === void 0 ? void 0 : v.latitude) && (v === null || v === void 0 ? void 0 : v.longitude));
+}
+export const PositionPopoverContent = ({ venue, setVenue, autoStartGeolocation = false, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const [geolocationLoading, setGeolocationLoading] = useState(false);
+    const [editingLocation, setEditingLocation] = useState(false);
+    const [permissionDeniedMessage, setPermissionDeniedMessage] = useState(null);
+    const [geocodingError, setGeocodingError] = useState(null);
+    const [fetching, setFetching] = useState(false);
+    const [query, setQuery] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const geoGenRef = useRef(0);
+    const autocompleteInputRef = useRef(null);
+    const autoStartedRef = useRef(false);
+    const sharingActive = geolocationLoading || hasShareableCoords(venue);
+    const handleSearch = useDebounceFn(async (value) => {
+        setFetching(true);
+        try {
+            const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(value)}&format=jsonv2&limit=5&addressdetails=1`);
+            const data = await response.json();
+            setSuggestions(data);
+        }
+        catch (_a) {
+            setGeocodingError(String(t('widget.geocodingFailed')));
+        }
+        finally {
+            setFetching(false);
+        }
+    }, 1000);
+    const onQueryChange = useCallback((value, opts) => {
+        setQuery(value);
+        if (opts === null || opts === void 0 ? void 0 : opts.skipSearch)
+            return;
+        if (!value.trim()) {
+            setSuggestions([]);
+            return;
+        }
+        handleSearch(value);
+    }, [handleSearch]);
+    const handleAutocompletePick = useCallback((value) => {
+        const placeName = getPlaceName(value);
+        setVenue({
+            latitude: value.lat,
+            longitude: value.lon,
+            placeName,
+            uncertainty: (value === null || value === void 0 ? void 0 : value.boundingbox)
+                ? getUncertaintyByViewport(value.boundingbox)
+                : 2,
+        });
+        setEditingLocation(false);
+        setQuery('');
+        setSuggestions([]);
+        setGeocodingError(null);
+        setPermissionDeniedMessage(null);
+    }, [setVenue, t]);
+    const startGeolocation = useCallback(() => {
+        const gen = ++geoGenRef.current;
+        setPermissionDeniedMessage(null);
+        setGeocodingError(null);
+        if (!navigator.geolocation) {
+            setGeolocationLoading(false);
+            setPermissionDeniedMessage(String(t('widget.positionUnavailableManual')));
+            setEditingLocation(true);
+            return;
+        }
+        setGeolocationLoading(true);
+        navigator.geolocation.getCurrentPosition(pos => {
+            if (gen !== geoGenRef.current)
+                return;
+            const next = {
+                latitude: pos.coords.latitude,
+                longitude: pos.coords.longitude,
+                placeName: '',
+                uncertainty: pos.coords.accuracy / 1000,
+            };
+            setVenue(next);
+            setGeolocationLoading(false);
+            const controller = new AbortController();
+            const timeoutId = window.setTimeout(() => controller.abort(), GEOCODE_TIMEOUT_MS);
+            void (async () => {
+                try {
+                    const result = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&format=jsonv2&addressdetails=1`, { signal: controller.signal });
+                    if (gen !== geoGenRef.current)
+                        return;
+                    const response = (await result.json());
+                    const placeName = getPlaceName(response);
+                    setVenue({
+                        ...next,
+                        placeName,
+                    });
+                }
+                catch (e) {
+                    if (gen !== geoGenRef.current)
+                        return;
+                    if (e.name === 'AbortError')
+                        return;
+                    console.error('[PositionPopover] reverse geocode failed', e);
+                    setGeocodingError(String(t('widget.geocodingFailed')));
+                }
+                finally {
+                    window.clearTimeout(timeoutId);
+                }
+            })();
+        }, err => {
+            if (gen !== geoGenRef.current)
+                return;
+            setGeolocationLoading(false);
+            setVenue(undefined);
+            const code = err.code;
+            if (code === 1) {
+                setPermissionDeniedMessage(String(t('widget.positionUnavailableManual')));
+                setEditingLocation(true);
+            }
+            else {
+                setGeocodingError(String(t('widget.geocodingFailed')));
+            }
+        }, { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 });
+    }, [setVenue, t]);
+    const toggleSharing = useCallback(() => {
+        setPermissionDeniedMessage(null);
+        setGeocodingError(null);
+        if (sharingActive && !geolocationLoading) {
+            geoGenRef.current += 1;
+            setVenue({
+                latitude: 0,
+                longitude: 0,
+                placeName: '',
+                uncertainty: 0,
+            });
+            setEditingLocation(false);
+            setQuery('');
+            setSuggestions([]);
+            return;
+        }
+        if (geolocationLoading) {
+            geoGenRef.current += 1;
+            setGeolocationLoading(false);
+            setVenue(undefined);
+            return;
+        }
+        startGeolocation();
+    }, [geolocationLoading, setVenue, sharingActive, startGeolocation]);
+    useEffect(() => {
+        if (!autoStartGeolocation) {
+            autoStartedRef.current = false;
+            return;
+        }
+        if (autoStartedRef.current)
+            return;
+        if (hasShareableCoords(venue) || geolocationLoading)
+            return;
+        autoStartedRef.current = true;
+        startGeolocation();
+    }, [autoStartGeolocation, geolocationLoading, startGeolocation, venue]);
+    useEffect(() => {
+        if (!editingLocation)
+            return;
+        const id = requestAnimationFrame(() => {
+            var _a;
+            (_a = autocompleteInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        return () => cancelAnimationFrame(id);
+    }, [editingLocation]);
+    const inlineError = permissionDeniedMessage || geocodingError;
+    const shareLocationHint = t('widget.shareLocationHint') || 'Get answers tailored to where you are';
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "memori-position-popover__row memori-position-popover__switch-row", children: _jsxs("button", { type: "button", className: "memori-dropdown--auth-row", onClick: () => {
+                        toggleSharing();
+                    }, children: [_jsx("span", { className: "memori-dropdown--auth-icon-wrap", children: _jsx(MapPin, { size: 16 }) }), _jsxs("span", { className: "memori-dropdown--auth-copy", children: [_jsx("span", { className: "memori-dropdown--auth-title", children: t('widget.shareLocation') || 'Share my location' }), _jsx(Tooltip, { title: shareLocationHint, placement: "top", children: _jsx("span", { className: "memori-dropdown--auth-subtitle", children: shareLocationHint }) })] }), _jsx("span", { className: cx('memori-dropdown--switch', sharingActive && 'memori-dropdown--switch--on'), "aria-hidden": true })] }) }), (sharingActive || geolocationLoading || editingLocation) && (_jsx("div", { className: "memori-position-popover__tag-block", children: geolocationLoading ? (_jsxs("div", { className: "memori-position-popover__tag memori-position-popover__tag--loading", "aria-busy": "true", "aria-live": "polite", children: [_jsx("span", { className: "memori-position-popover__spinner", "aria-hidden": true }), _jsx("span", { className: "memori-position-popover__tag-skeleton" })] })) : editingLocation ? (_jsx("div", { className: "memori-position-popover__autocomplete-wrap", children: _jsx(VenueCombobox, { venue: venue, query: query, fetching: fetching, suggestions: suggestions, onQueryChange: onQueryChange, onChange: handleAutocompletePick, getPlaceName: getPlaceName, t: t, autocompleteRootId: "memori-position-popover-venue-search", inputRef: autocompleteInputRef }) })) : (_jsxs("div", { className: "memori-position-popover__tag", children: [_jsx("span", { className: "memori-position-popover__tag-text", children: ((_a = venue === null || venue === void 0 ? void 0 : venue.placeName) === null || _a === void 0 ? void 0 : _a.trim())
+                                ? venue.placeName
+                                : t('widget.positionResolving') }), _jsx(Button, { type: "button", variant: "ghost", icon: _jsx(Pencil, { size: 16, strokeWidth: 2, "aria-hidden": true }), size: "sm", className: "memori-position-popover__tag-edit", "aria-label": String(t('widget.editPositionAria')), onClick: () => {
+                                setEditingLocation(true);
+                                setPermissionDeniedMessage(null);
+                            } })] })) })), inlineError && (_jsx("p", { className: "memori-position-popover__error", role: "alert", children: inlineError })), hasShareableCoords(venue) && !geolocationLoading && (_jsx("div", { className: "memori-position-popover__map", children: _jsx(VenueMapPreview, { venue: venue }) }))] }));
+};
+const PositionPopover = ({ venue, setVenue, open, onOpenChange, triggerClassName, triggerButtonVariant = 'toolbar', triggerAriaLabel, positionerClassName, autoStartGeolocation = false, }) => {
+    const sharingActive = hasShareableCoords(venue);
+    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange, modal: false, closable: false, placement: "bottom-end", sideOffset: 8, contentClassName: "memori-position-popover__popup", slotProps: {
+            trigger: {
+                className: triggerClassName,
+                render: (props) => {
+                    return (_jsx(IconButton, { ...props, type: "button", variant: triggerButtonVariant, active: open, className: cx('memori-header--button', 'memori-header--button--position', sharingActive && 'memori-header--button--position--active', triggerClassName), "aria-label": triggerAriaLabel, "aria-expanded": open, icon: _jsx(MapPin, { "aria-hidden": true }) }));
+                },
+            },
+            positioner: {
+                className: cx('memori-position-popover__positioner', positionerClassName),
+            },
+        }, content: _jsx(PositionPopoverContent, { venue: venue, setVenue: setVenue, autoStartGeolocation: open && autoStartGeolocation }), children: null }));
+};
+export default PositionPopover;
+//# sourceMappingURL=PositionPopover.js.map

package/esm/components/PositionPopover/PositionPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PositionPopover.js","sourceRoot":"","sources":["../../../src/components/PositionPopover/PositionPopover.tsx"],"names":[],"mappings":"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"}

package/esm/components/ReasoningBlock/ReasoningBlock.css

@@ -0,0 +1,156 @@
+.memori-reasoning {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 0;
+}
+
+.memori-reasoning__trigger {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 4px 2px 0;
+    border: 0;
+    border-radius: 6px;
+    margin: 0;
+    background: transparent;
+    color: color-mix(in oklch, var(--memori-text-color) 52%, transparent);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    gap: 4px;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
+    transition: color 0.16s ease;
+}
+
+.memori-reasoning__trigger:hover,
+.memori-reasoning__trigger:focus-visible {
+    color: color-mix(in oklch, var(--memori-text-color) 82%, transparent);
+}
+
+.memori-reasoning__trigger:focus-visible {
+    outline: 2px solid var(--memori-primary, currentColor);
+    outline-offset: 2px;
+}
+
+.memori-reasoning__chevron {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+    opacity: 0.85;
+    transform: rotate(0deg);
+    transform-origin: 50% 50%;
+    transition: transform 0.2s ease;
+}
+
+.memori-reasoning--open .memori-reasoning__chevron {
+    transform: rotate(90deg);
+}
+
+.memori-reasoning__label {
+    min-width: 0;
+}
+
+.memori-reasoning__label--thinking {
+    animation: memori-reasoning-shimmer 1.8s ease-in-out infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(
+        90deg,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 0%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 36%,
+        var(--memori-text-color) 50%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 64%,
+        color-mix(in oklch, var(--memori-text-color) 38%, transparent) 100%
+    );
+    background-size: 220% 100%;
+    color: transparent;
+}
+
+.memori-reasoning__collapsible {
+    display: grid;
+    width: 100%;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+        grid-template-rows 0.22s ease,
+        opacity 0.18s ease;
+}
+
+.memori-reasoning--open .memori-reasoning__collapsible {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.memori-reasoning__clip {
+    overflow: hidden;
+    min-height: 0;
+}
+
+.memori-reasoning__panel {
+    display: grid;
+    width: 100%;
+    padding: 4px 0 8px;
+    grid-template-columns: 12px minmax(0, 1fr);
+}
+
+.memori-reasoning__panel::before {
+    width: 1px;
+    border-radius: 1px;
+    margin: 2px 0;
+    background: color-mix(in oklch, var(--memori-text-color) 16%, transparent);
+    content: '';
+    justify-self: center;
+}
+
+.memori-reasoning__body {
+    min-width: 0;
+    color: color-mix(in oklch, var(--memori-text-color) 62%, transparent);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+}
+
+.memori-reasoning--streaming.memori-reasoning--overflow .memori-reasoning__body {
+    overflow: hidden;
+    max-height: 9.5rem;
+    -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 48%, transparent 100%);
+}
+
+.memori-reasoning--open:not(.memori-reasoning--streaming) .memori-reasoning__body {
+    max-height: min(40vh, 22rem);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+@keyframes memori-reasoning-shimmer {
+    0% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-reasoning__chevron,
+    .memori-reasoning__collapsible {
+        transition: none;
+    }
+
+    .memori-reasoning__label--thinking {
+        animation: none;
+        background: none;
+        color: color-mix(in oklch, var(--memori-text-color) 58%, transparent);
+        -webkit-text-fill-color: unset;
+    }
+}

package/esm/components/ReasoningBlock/ReasoningBlock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ReasoningBlockProps {
+    content: string;
+    complete: boolean;
+}
+declare const ReasoningBlock: React.FC<ReasoningBlockProps>;
+export default ReasoningBlock;

package/esm/components/ReasoningBlock/ReasoningBlock.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState, } from 'react';
+import cx from 'classnames';
+import { ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+const ReasoningBlock = ({ content, complete, }) => {
+    const { t } = useTranslation();
+    const panelId = useId();
+    const userToggled = useRef(false);
+    const startedAt = useRef(null);
+    const bodyRef = useRef(null);
+    const [open, setOpen] = useState(!complete);
+    const [elapsedSeconds, setElapsedSeconds] = useState(null);
+    const [overflowing, setOverflowing] = useState(false);
+    useEffect(() => {
+        if (!complete && startedAt.current == null) {
+            startedAt.current = Date.now();
+        }
+    }, [complete]);
+    useEffect(() => {
+        if (!complete || startedAt.current == null || elapsedSeconds != null) {
+            return;
+        }
+        setElapsedSeconds(Math.max(1, Math.round((Date.now() - startedAt.current) / 1000)));
+    }, [complete, elapsedSeconds]);
+    useEffect(() => {
+        if (userToggled.current)
+            return;
+        setOpen(!complete);
+    }, [complete]);
+    useLayoutEffect(() => {
+        const el = bodyRef.current;
+        if (!el)
+            return;
+        if (open && !complete) {
+            el.scrollTop = el.scrollHeight;
+        }
+        setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    }, [content, open, complete]);
+    const label = !complete
+        ? t('thinking') || 'Thinking'
+        : elapsedSeconds != null
+            ? t('thoughtFor', { count: elapsedSeconds }) ||
+                `Thought for ${elapsedSeconds}s`
+            : t('thought') || 'Thought';
+    return (_jsxs("div", { className: cx('memori-reasoning', {
+            'memori-reasoning--open': open,
+            'memori-reasoning--streaming': !complete,
+            'memori-reasoning--overflow': overflowing,
+        }), children: [_jsxs("button", { type: "button", className: "memori-reasoning__trigger", "aria-expanded": open, "aria-controls": panelId, onClick: () => {
+                    userToggled.current = true;
+                    setOpen(value => !value);
+                }, children: [_jsx(ChevronRight, { className: "memori-reasoning__chevron", "aria-hidden": true, size: 14, strokeWidth: 2.25 }), _jsx("span", { className: cx('memori-reasoning__label', {
+                            'memori-reasoning__label--thinking': !complete,
+                        }), children: label })] }), _jsx("div", { id: panelId, className: "memori-reasoning__collapsible", role: "region", "aria-hidden": !open, children: _jsx("div", { className: "memori-reasoning__clip", children: _jsx("div", { className: "memori-reasoning__panel", children: _jsx("div", { className: "memori-reasoning__body", ref: bodyRef, children: content }) }) }) })] }));
+};
+export default ReasoningBlock;
+//# sourceMappingURL=ReasoningBlock.js.map

package/esm/components/ReasoningBlock/ReasoningBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReasoningBlock.js","sourceRoot":"","sources":["../../../src/components/ReasoningBlock/ReasoningBlock.tsx"],"names":[],"mappings":"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"}

package/esm/components/SideDrawer/SideDrawer.css

@@ -0,0 +1,112 @@
+.memori-side-drawer.memori-drawer {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+}
+
+.memori-side-drawer .memori-drawer__header {
+    align-items: flex-start;
+    gap: var(--memori-spacing-md);
+}
+
+.memori-side-drawer .memori-drawer__header > :first-child {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.memori-side-drawer .memori-drawer__title {
+    font-size: var(--memori-text-size-2xl);
+}
+
+.memori-side-drawer .memori-drawer__description {
+    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
+}
+
+.memori-side-drawer .memori-drawer__body {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 0;
+    padding-bottom: var(--memori-spacing-lg);
+}
+
+.memori-side-drawer__body {
+    display: flex;
+    overflow: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
+    gap: var(--memori-spacing-md);
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar {
+    width: 8px;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 45%, transparent);
+}
+
+.memori-side-drawer__body::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 60%, transparent);
+}
+
+.memori-side-drawer .memori-drawer__footer {
+    display: block;
+    justify-content: stretch;
+    padding: var(--memori-spacing-md) var(--memori-spacing-lg);
+}
+
+.memori-side-drawer .memori-drawer__footer .memori-drawer-footer {
+    width: 100%;
+    padding: 0;
+    border-top: none;
+    box-shadow: none;
+}
+
+.memori-side-drawer-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--memori-spacing-xl) var(--memori-spacing-md);
+    color: var(--memori-text-color);
+    gap: var(--memori-spacing-sm);
+    text-align: center;
+}
+
+.memori-side-drawer-empty__icon {
+    display: inline-flex;
+    width: 3.25rem;
+    height: 3.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--memori-radius-surface);
+    margin-bottom: var(--memori-spacing-xs);
+    background: var(--memori-main-background);
+    color: color-mix(in oklch, var(--memori-text-color) 55%, transparent);
+}
+
+.memori-side-drawer-empty__title {
+    margin: 0;
+    font-size: var(--memori-text-size-lg);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: var(--memori-text-line-tight);
+}
+
+.memori-side-drawer-empty__text {
+    max-width: 22.5rem;
+    margin: 0;
+    color: color-mix(in oklch, var(--memori-text-color) 64%, transparent);
+    font-size: var(--memori-text-size-sm);
+    line-height: var(--memori-text-line-relaxed);
+}

package/esm/components/SideDrawer/SideDrawer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface SideDrawerProps {
+    open?: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    closeLabel?: string;
+}
+declare const SideDrawer: React.FC<SideDrawerProps>;
+export interface SideDrawerEmptyProps {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const SideDrawerEmpty: React.FC<SideDrawerEmptyProps>;
+export default SideDrawer;

package/esm/components/SideDrawer/SideDrawer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Drawer } from '@memori.ai/ui';
+const SideDrawer = ({ open = true, onClose, title, description, footer, children, className, size = 'md', loading, closeLabel, }) => {
+    return (_jsx(Drawer, { open: open, anchor: "right", size: size, loading: loading, closeLabel: closeLabel, className: cx('memori-side-drawer', className), title: title, description: description, footer: footer, onClose: onClose, onOpenChange: nextOpen => {
+            if (!nextOpen)
+                onClose();
+        }, children: _jsx("div", { className: "memori-side-drawer__body", children: children }) }));
+};
+export const SideDrawerEmpty = ({ icon, title, description, children, }) => (_jsxs("div", { className: "memori-side-drawer-empty", role: "status", children: [icon != null && (_jsx("span", { className: "memori-side-drawer-empty__icon", "aria-hidden": true, children: icon })), _jsx("p", { className: "memori-side-drawer-empty__title", children: title }), description != null && (_jsx("p", { className: "memori-side-drawer-empty__text", children: description })), children] }));
+export default SideDrawer;
+//# sourceMappingURL=SideDrawer.js.map

package/esm/components/SideDrawer/SideDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideDrawer.js","sourceRoot":"","sources":["../../../src/components/SideDrawer/SideDrawer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAoBvC,MAAM,UAAU,GAA8B,CAAC,EAC7C,IAAI,GAAG,IAAI,EACX,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,IAAI,EACX,OAAO,EACP,UAAU,GACX,EAAE,EAAE;IACH,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,OAAO,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,QAAQ,CAAC,EAAE;YACvB,IAAI,CAAC,QAAQ;gBAAE,OAAO,EAAE,CAAC;QAC3B,CAAC,YAED,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,GACnD,CACV,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE,EAAE,CAAC,CACJ,eAAK,SAAS,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,aACpD,IAAI,IAAI,IAAI,IAAI,CACf,eAAM,SAAS,EAAC,gCAAgC,iCAC7C,IAAI,GACA,CACR,EACD,YAAG,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAK,EACzD,WAAW,IAAI,IAAI,IAAI,CACtB,YAAG,SAAS,EAAC,gCAAgC,YAAE,WAAW,GAAK,CAChE,EACA,QAAQ,IACL,CACP,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/components/UploadButton/UploadButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { DialogState } from '@memori.ai/memori-api-client/dist/types';
 interface UploadManagerProps {
     authToken?: string;
     client?: ReturnType<typeof memoriApiClient>;
@@ -19,6 +20,7 @@ interface UploadManagerProps {
     maxDocumentsPerMessage?: number;
     maxDocumentContentLength?: number;
     onUploadLoadingChange?: (loading: boolean, fileCount?: number) => void;
+    onMediumSelectedState?: (state: DialogState) => void;
 }
 declare const UploadButton: React.FC<UploadManagerProps>;
 export default UploadButton;

package/esm/components/UploadButton/UploadButton.js

@@ -8,7 +8,7 @@ import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import { documentConversionExtensions, localTextExtensions, officeNativeExtensions, } from '../../helpers/constants';
-const UploadButton = ({ authToken = '', client, sessionID = '', baseUrl = '', isMediaAccepted = false, setDocumentPreviewFiles, documentPreviewFiles, memoriID = '', maxTotalMessagePayload, maxDocumentsPerMessage = 10, maxDocumentContentLength = 300000, onUploadLoadingChange, }) => {
+const UploadButton = ({ authToken = '', client, sessionID = '', baseUrl = '', isMediaAccepted = false, setDocumentPreviewFiles, documentPreviewFiles, memoriID = '', maxTotalMessagePayload, maxDocumentsPerMessage = 10, maxDocumentContentLength = 300000, onUploadLoadingChange, onMediumSelectedState, }) => {
     var _a, _b;
     const effectivePerDocumentLimit = (_a = maxTotalMessagePayload !== null && maxTotalMessagePayload !== void 0 ? maxTotalMessagePayload : maxDocumentContentLength) !== null && _a !== void 0 ? _a : 300000;
     const [isDocumentLoading, setIsDocumentLoading] = useState(false);
@@ -394,7 +394,7 @@ ${file.textAssetUrl || ''}
                         : 'Ctrl',
                 })) !== null && _b !== void 0 ? _b : 'Upload files (drag & drop)', children: isLoading ? (_jsx(Spin, { spinning: true, className: "memori--upload-icon" })) : (_jsx(UploadIcon, { className: "memori--upload-icon" })) }), currentMediaCount > 0 && (_jsxs("div", { className: cx('memori--document-count', {
                     'memori--document-count-full': hasReachedMediaLimit,
-                }), children: [currentMediaCount, "/", maxDocumentsPerMessage] })), _jsx("div", { className: "memori--hidden-uploader", ref: documentRef, children: _jsx(UploadDocuments, { setDocumentPreviewFiles: handleDocumentFiles, authToken: authToken, client: client, sessionID: sessionID, baseUrl: baseUrl, memoriID: memoriID, maxDocuments: maxDocumentsPerMessage, documentPreviewFiles: documentPreviewFiles, onLoadingChange: handleDocumentLoadingChange, onDocumentError: handleDocumentError, onValidateFile: validateDocumentFile, onValidatePayloadSize: validatePayloadSize }) }), _jsx("div", { className: "memori--hidden-uploader", ref: imageRef, children: _jsx(UploadImages, { authToken: authToken, client: client, setDocumentPreviewFiles: setDocumentPreviewFiles, sessionID: sessionID, documentPreviewFiles: documentPreviewFiles, isMediaAccepted: isMediaAccepted, onLoadingChange: handleImageLoadingChange, maxImages: maxDocumentsPerMessage, memoriID: memoriID, onImageError: handleImageError, onValidateImageFile: validateImageFile }) }), _jsx("div", { className: "memori--error-message-container", children: errors.map((error, index) => (_jsx(Alert, { className: "memori--error-message-alert", open: true, type: error.severity, title: t('upload.uploadNotification', {
+                }), children: [currentMediaCount, "/", maxDocumentsPerMessage] })), _jsx("div", { className: "memori--hidden-uploader", ref: documentRef, children: _jsx(UploadDocuments, { setDocumentPreviewFiles: handleDocumentFiles, authToken: authToken, client: client, sessionID: sessionID, baseUrl: baseUrl, memoriID: memoriID, maxDocuments: maxDocumentsPerMessage, documentPreviewFiles: documentPreviewFiles, onLoadingChange: handleDocumentLoadingChange, onDocumentError: handleDocumentError, onValidateFile: validateDocumentFile, onValidatePayloadSize: validatePayloadSize }) }), _jsx("div", { className: "memori--hidden-uploader", ref: imageRef, children: _jsx(UploadImages, { authToken: authToken, client: client, setDocumentPreviewFiles: setDocumentPreviewFiles, sessionID: sessionID, documentPreviewFiles: documentPreviewFiles, isMediaAccepted: isMediaAccepted, onLoadingChange: handleImageLoadingChange, maxImages: maxDocumentsPerMessage, memoriID: memoriID, onImageError: handleImageError, onValidateImageFile: validateImageFile, onMediumSelectedState: onMediumSelectedState }) }), _jsx("div", { className: "memori--error-message-container", children: errors.map((error, index) => (_jsx(Alert, { className: "memori--error-message-alert", open: true, type: error.severity, title: t('upload.uploadNotification', {
                         defaultValue: 'Upload notification',
                     }), description: error.message, onClose: () => removeError(error.message), width: "350px" }, `${error.message}-${index}`))) })] }));
 };