@athoscommerce/snap-preact 1.13.1 → 1.13.3-beta.168

package/dist/esm/components/src/components/Organisms/Chat/components/ChatSideChat.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useRef } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../../providers';
+import { mergeProps, mergeStyles } from '../../../../utilities';
+import { useLang } from '../../../../hooks';
+import { Button } from '../../../Atoms/Button';
+import { ChatInspirationResultMessage } from '../../../Molecules/ChatInspirationResultMessage';
+import { ChatProductComparisonMessage, } from '../../../Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage';
+import { ChatProductQueryMessage, } from '../../../Molecules/ChatProductQueryMessage/ChatProductQueryMessage';
+import { useChatGestures } from '../hooks/useChatGestures';
+import { chatDefaultLang, langAttrOf } from '../Chat.lang';
+const defaultStyles = ({ mobile, footerHeight, primaryColorBg }) => {
+    const colorPrimary = primaryColorBg;
+    return css({
+        '@keyframes ss-chat-slide-up': {
+            from: { transform: 'translateY(100%)' },
+            to: { transform: 'translateY(0)' },
+        },
+        ...(mobile
+            ? {
+                width: '100%',
+                maxWidth: '100%',
+                height: `calc(100% - 70px${footerHeight > 0 ? ` - ${footerHeight}px` : ''})`,
+                maxHeight: `calc(100% - 70px${footerHeight > 0 ? ` - ${footerHeight}px` : ''})`,
+            }
+            : { flex: '1 1 0', minWidth: 0, maxWidth: 600, height: '70vh', maxHeight: '70vh' }),
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        ...(mobile
+            ? {
+                position: 'absolute',
+                bottom: footerHeight > 0 ? footerHeight : 0,
+                left: 0,
+                right: 0,
+                zIndex: 10,
+                borderTopLeftRadius: '12px',
+                borderTopRightRadius: '12px',
+                overflow: 'hidden',
+                overscrollBehavior: 'contain',
+                boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
+                background: '#fff',
+                willChange: 'transform',
+                animation: 'ss-chat-slide-up 0.3s ease-out',
+            }
+            : {}),
+        '.ss__chat__secondary__drag-handle': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '10px 0 2px',
+            background: colorPrimary,
+            touchAction: 'none',
+            cursor: 'grab',
+            '.ss__chat__secondary__drag-handle__indicator': {
+                width: '36px',
+                height: '4px',
+                borderRadius: '2px',
+                background: 'rgba(255, 255, 255, 0.4)',
+            },
+        },
+        ...(mobile
+            ? {
+                '.ss__chat__header': {
+                    touchAction: 'none',
+                    cursor: 'grab',
+                },
+            }
+            : {}),
+        '.ss__chat__header__title': {
+            flexDirection: 'column',
+            gap: '2px',
+            '.ss__chat__header__title__primary': {
+                fontWeight: 'bold',
+            },
+            '.ss__chat__header__title__secondary': {
+                fontSize: '80%',
+                opacity: 0.85,
+            },
+        },
+        // double the component class to reliably out-rank the root-level
+        // `.ss__chat__content .ss__chat__messages` background without `!important`
+        '&& .ss__chat__content .ss__chat__messages': {
+            background: '#fff',
+        },
+    });
+};
+export const ChatSideChat = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatSideChat', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, activeMessage, mobile, onDismiss, onProductQuickView, primaryColorBg, primaryColorFg, disableStyles, treePath, } = props;
+    // Ref for the mobile secondary panel — needed for swipe-to-dismiss measurements
+    const secondaryRef = useRef(null);
+    const lang = deepmerge(chatDefaultLang, props.lang || {});
+    const comparisonCount = activeMessage?.searchResults?.length || '';
+    const mergedLang = useLang({
+        sideChatRegionLabel: lang.sideChatRegionLabel,
+        inspirationResultTitle: lang.inspirationResultTitle,
+        inspirationResultSubtitle: lang.inspirationResultSubtitle,
+        productComparisonTitle: lang.productComparisonTitle,
+        productComparisonSubtitle: lang.productComparisonSubtitle,
+    }, { controller, count: comparisonCount }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const { swipeOffset, swipeAnimating, swipeHandlers } = useChatGestures({
+        panelRef: secondaryRef,
+        shouldShowSideChat: true,
+        activeMessageId: activeMessage?.id,
+        onDismiss: () => onDismiss && onDismiss(),
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    if (!activeMessage) {
+        return null;
+    }
+    const subProps = {
+        inspirationResultMessage: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        productComparisonMessage: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        productQueryMessage: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+            primaryColor: primaryColorBg,
+            primaryColorText: primaryColorFg,
+        },
+    };
+    const titleLang = {
+        inspirationResult: mergedLang.inspirationResultTitle,
+        productComparison: mergedLang.productComparisonTitle,
+    };
+    const subtitleLang = {
+        inspirationResult: mergedLang.inspirationResultSubtitle,
+        productComparison: mergedLang.productComparisonSubtitle,
+    };
+    const messageContent = (() => {
+        switch (activeMessage.messageType) {
+            case 'inspirationResult':
+                return (_jsx(ChatInspirationResultMessage, { ...subProps.inspirationResultMessage, chatItem: activeMessage, controller: controller, onProductQuickView: onProductQuickView }));
+            case 'productComparison':
+                return (_jsx(ChatProductComparisonMessage, { ...subProps.productComparisonMessage, chatItem: activeMessage, controller: controller }));
+            case 'productQuery':
+                return (_jsx(ChatProductQueryMessage, { ...subProps.productQueryMessage, chatItem: activeMessage, controller: controller, displayFields: controller.config.settings?.quickview?.displayFields, primaryColor: primaryColorBg, primaryColorText: primaryColorFg }));
+            default:
+                return null;
+        }
+    })();
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ref: secondaryRef, ...styling, className: classnames('ss__chat__secondary', className, internalClassName), role: "region", "aria-label": langAttrOf(lang.sideChatRegionLabel, 'aria-label'), style: mobile
+                ? {
+                    // Touch swipe animations need to be inline to prevent visual jumps
+                    transform: swipeOffset > 0 ? `translateY(${swipeOffset}px)` : undefined,
+                    transition: swipeAnimating ? 'transform 0.3s ease-out' : 'none',
+                }
+                : undefined, children: [mobile && (_jsx("div", { className: "ss__chat__secondary__drag-handle", ...swipeHandlers, children: _jsx("div", { className: "ss__chat__secondary__drag-handle__indicator" }) })), _jsxs("div", { className: 'ss__chat__header', onTouchStart: mobile ? swipeHandlers.onTouchStart : undefined, onTouchMove: mobile ? swipeHandlers.onTouchMove : undefined, onTouchEnd: mobile ? swipeHandlers.onTouchEnd : undefined, children: [_jsxs("div", { className: "ss__chat__header__title", children: [_jsx("div", { className: "ss__chat__header__title__primary", ...titleLang[activeMessage.messageType]?.value }), _jsx("div", { className: "ss__chat__header__title__secondary", ...subtitleLang[activeMessage.messageType]?.value })] }), _jsx("div", { className: "ss__chat__header__buttons", children: _jsx(Button, { className: "ss__chat__header__button--close", "aria-label": langAttrOf(lang.closeChatButton, 'aria-label'), icon: { icon: 'close-rounded', title: langAttrOf(lang.closeChatButton, 'title') }, onClick: () => onDismiss && onDismiss() }) })] }), _jsx("div", { className: "ss__chat__content", children: _jsx("div", { className: 'ss__chat__messages', children: messageContent }) })] }) }));
+});

package/dist/esm/components/src/components/Organisms/Chat/components/ChatTopicDrift.d.ts

@@ -0,0 +1,14 @@
+import type { ChatController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../../types';
+import { ChatLang } from '../Chat.lang';
+export declare const ChatTopicDrift: ((properties: ChatTopicDriftProps) => JSX.Element | null) & {
+    displayName: string;
+};
+export type ChatTopicDriftProps = {
+    controller: ChatController;
+    variant?: 'drift' | 'sessionLimit';
+    lang?: Partial<ChatLang>;
+    primaryColorBg?: string;
+    primaryColorFg?: string;
+} & ComponentProps<ChatTopicDriftProps>;
+//# sourceMappingURL=ChatTopicDrift.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/components/ChatTopicDrift.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTopicDrift.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/components/ChatTopicDrift.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,EAAE,cAAc,EAAe,MAAM,mBAAmB,CAAC;AAKhE,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AAgErE,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,GAAG,CAAC,OAAO,GAAG,IAAI;;CAyH1F,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAC"}

package/dist/esm/components/src/components/Organisms/Chat/components/ChatTopicDrift.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../../providers';
+import { Colour, mergeProps, mergeStyles } from '../../../../utilities';
+import { useLang } from '../../../../hooks';
+import { useA11y } from '../../../../hooks/useA11y';
+import { Button } from '../../../Atoms/Button';
+import { Icon } from '../../../Atoms/Icon';
+import { chatDefaultLang, langAttrOf } from '../Chat.lang';
+const defaultStyles = ({ primaryColorBg, primaryColorFg }) => {
+    const colorPrimary = primaryColorBg;
+    const colorPrimaryText = primaryColorFg;
+    return css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '12px 16px',
+        border: `1px solid ${new Colour(colorPrimary).mixWhite(0.6)}`,
+        borderRadius: '8px',
+        backgroundColor: '#fff',
+        '.ss__chat__topic-drift__icon--info': {
+            flex: '0 0 auto',
+            fill: colorPrimary,
+            stroke: colorPrimary,
+            svg: {
+                fill: colorPrimary,
+                stroke: colorPrimary,
+            },
+        },
+        '.ss__chat__topic-drift__text': {
+            flex: '1 1 0%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2px',
+            'span:first-of-type': {
+                fontWeight: 'bold',
+                color: colorPrimary,
+                fontSize: '14px',
+            },
+            'span:last-of-type': {
+                color: '#6A7282',
+                fontSize: '13px',
+            },
+        },
+        '.ss__chat__topic-drift__button': {
+            flex: '0 0 auto',
+            backgroundColor: colorPrimary,
+            color: colorPrimaryText,
+            borderRadius: '6px',
+            padding: '8px 14px',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+            '&:not(.ss__button--disabled):hover': {
+                background: new Colour(colorPrimary).mixBlack(),
+            },
+        },
+        '.ss__chat__topic-drift__icon--close': {
+            flex: '0 0 auto',
+            cursor: 'pointer',
+            fill: '#6A7282',
+            stroke: '#6A7282',
+            svg: {
+                fill: '#6A7282',
+                stroke: '#6A7282',
+            },
+        },
+    });
+};
+export const ChatTopicDrift = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        variant: 'drift',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatTopicDrift', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, variant } = props;
+    const { store } = controller;
+    const lang = deepmerge(chatDefaultLang, props.lang || {});
+    const mergedLang = useLang({
+        highVolumeMessage: lang.highVolumeMessage,
+        highVolumeSubMessage: lang.highVolumeSubMessage,
+        newSessionButton: lang.newSessionButton,
+        topicDriftScopeMessage: lang.topicDriftScopeMessage,
+        topicDriftScopeSubMessage: lang.topicDriftScopeSubMessage,
+        topicDriftMessage: lang.topicDriftMessage,
+        topicDriftSubMessage: lang.topicDriftSubMessage,
+    }, { controller }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    const styling = mergeStyles(props, defaultStyles);
+    if (variant === 'sessionLimit') {
+        if (!store.currentChat?.sessionLimitReached)
+            return null;
+        return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__chat__topic-drift', className, internalClassName), children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { ...mergedLang.highVolumeMessage?.all }), _jsx("span", { ...mergedLang.highVolumeSubMessage?.all })] }), _jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
+                            controller.store.createChat();
+                        }, children: _jsx("span", { ...mergedLang.newSessionButton?.all }) })] }) }));
+    }
+    const drift = store.currentChat?.topicDrift;
+    if (!drift)
+        return null;
+    // recommendedAction is the prescription; driftType is the diagnosis.
+    // Hide the banner when the backend says to keep flowing, or when no drift was detected.
+    if (drift.recommendedAction === 'CONTINUE' || drift.driftType === 'NO_DRIFT')
+        return null;
+    const isScopeRedirect = drift.recommendedAction === 'SCOPE_REDIRECT';
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__chat__topic-drift', className, internalClassName), children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { ...(isScopeRedirect ? mergedLang.topicDriftScopeMessage?.all : mergedLang.topicDriftMessage?.all) }), _jsx("span", { ...(isScopeRedirect ? mergedLang.topicDriftScopeSubMessage?.all : mergedLang.topicDriftSubMessage?.all) })] }), !isScopeRedirect && (_jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
+                        // Capture image attachments from the current chat before handleTopicDrift /
+                        // createChat tear down the conversation — an imageSearch that drifted needs
+                        // the same image attached to the carried-over message in the new session,
+                        // otherwise params would fall back to a `general` request without the image.
+                        const previousImageAttachments = (store.currentChat?.attachments.attached || [])
+                            .filter((item) => item.type === 'image' && item.state !== 'error')
+                            .map((item) => {
+                            const img = item;
+                            return {
+                                type: 'image',
+                                base64: img.base64,
+                                fileName: img.fileName,
+                                imageId: img.imageId,
+                                imageUrl: img.imageUrl,
+                                thumbnailUrl: img.thumbnailUrl,
+                                // Already uploaded — skip the 'loading' default state.
+                                state: 'attached',
+                            };
+                        });
+                        const messageText = store.currentChat?.handleTopicDrift();
+                        if (messageText) {
+                            controller.store.createChat();
+                            previousImageAttachments.forEach((cfg) => {
+                                controller.store.currentChat?.attachments.add(cfg);
+                            });
+                            // partial override — the params getter decides the requestType (e.g. imageSearch
+                            // when an image is re-attached), so only the message is overridden here
+                            controller.search({ data: { message: messageText } });
+                        }
+                    }, children: _jsx("span", { ...mergedLang.newSessionButton?.all }) })), _jsx("span", { role: "button", ref: (e) => useA11y(e), "aria-label": langAttrOf(lang.topicDriftDismissButton, 'aria-label'), onClick: () => {
+                        store.currentChat?.dismissTopicDrift();
+                    }, children: _jsx(Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }) }));
+});

package/dist/esm/components/src/components/Organisms/Chat/components/chatAccentTheme.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '../../../../providers';
+export type ChatAccentColors = {
+    primaryAccentColorBg: string;
+    primaryAccentColorFg: string;
+    secondaryAccentColorBg: string;
+    secondaryAccentColorFg: string;
+};
+/**
+ * Accent styling for buttons living inside child components (ChatResult's cart /
+ * inquire icons and ChatProductQueryMessage's action buttons) — injected through
+ * the theme so each child applies it via its own style pipeline instead of the
+ * organism reaching in with `!important` overrides.
+ */
+export declare const chatAccentThemeComponents: ({ primaryAccentColorBg, primaryAccentColorFg, secondaryAccentColorBg, secondaryAccentColorFg, }: ChatAccentColors) => Theme['components'];
+//# sourceMappingURL=chatAccentTheme.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/components/chatAccentTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chatAccentTheme.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/components/chatAccentTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAG9C,MAAM,MAAM,gBAAgB,GAAG;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,oGAKnC,gBAAgB,KAAG,KAAK,CAAC,YAAY,CAiDvC,CAAC"}

package/dist/esm/components/src/components/Organisms/Chat/components/chatAccentTheme.js

@@ -0,0 +1,56 @@
+import { Colour } from '../../../../utilities';
+/**
+ * Accent styling for buttons living inside child components (ChatResult's cart /
+ * inquire icons and ChatProductQueryMessage's action buttons) — injected through
+ * the theme so each child applies it via its own style pipeline instead of the
+ * organism reaching in with `!important` overrides.
+ */
+export const chatAccentThemeComponents = ({ primaryAccentColorBg, primaryAccentColorFg, secondaryAccentColorBg, secondaryAccentColorFg, }) => {
+    return {
+        chatResult: {
+            style: {
+                '.ss__chat-result__image__icons': {
+                    '.ss__button.ss__chat-result__image__icons__icon--cart': {
+                        backgroundColor: primaryAccentColorBg,
+                        svg: {
+                            fill: primaryAccentColorFg,
+                            stroke: primaryAccentColorFg,
+                        },
+                    },
+                    '.ss__button.ss__chat-result__image__icons__icon--inquire': {
+                        backgroundColor: secondaryAccentColorBg,
+                        svg: {
+                            fill: secondaryAccentColorFg,
+                            stroke: secondaryAccentColorFg,
+                        },
+                    },
+                },
+            },
+        },
+        chatProductQueryMessage: {
+            style: {
+                '.ss__chat-product-query-message__header__product__actions': {
+                    '.ss__chat-product-query-message__header__product__actions__add-to-cart .ss__button': {
+                        background: primaryAccentColorBg,
+                        color: primaryAccentColorFg,
+                        svg: {
+                            fill: primaryAccentColorFg,
+                            stroke: primaryAccentColorFg,
+                        },
+                        '&:not(.ss__button--disabled):hover': {
+                            background: new Colour(primaryAccentColorBg).mixBlack(),
+                        },
+                    },
+                    '.ss__chat-product-query-message__header__product__actions__show-similar .ss__button, .ss__chat-product-query-message__header__product__actions__discuss-product .ss__button': {
+                        background: secondaryAccentColorBg,
+                        color: secondaryAccentColorFg,
+                        border: `1px solid ${secondaryAccentColorFg}`,
+                        '&:not(.ss__button--disabled):hover': {
+                            background: new Colour(secondaryAccentColorBg).mixBlack(),
+                        },
+                    },
+                },
+            },
+        },
+    };
+};

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.d.ts

@@ -0,0 +1,32 @@
+import type { RefObject } from 'preact';
+export type UseChatFileUploadOptions = {
+    /**
+     * When false, drag handlers are no-ops and the dragging indicator never activates.
+     */
+    enabled: boolean;
+    /**
+     * Called when image files are dropped onto the footer. Receives a freshly-built
+     * FileList (filtered to only image/* types).
+     */
+    onUpload: (files: FileList) => void | Promise<void>;
+};
+export type UseChatFileUploadResult = {
+    /** Attach to a hidden `<input type="file">` so the upload button can trigger it. */
+    fileInputRef: RefObject<HTMLInputElement>;
+    /** True while the user is actively dragging files over the footer. */
+    isDraggingFile: boolean;
+    /** Spread these onto the drop-zone element. */
+    dragHandlers: {
+        onDragEnter: (e: any) => void;
+        onDragOver: (e: any) => void;
+        onDragLeave: (e: any) => void;
+        onDrop: (e: any) => void;
+    };
+};
+/**
+ * Wires drag-and-drop image upload onto the chat footer plus a ref for the
+ * hidden file input. `dragenter` / `dragleave` fire on every child crossing,
+ * so a counter is kept to know when the pointer has truly left the footer.
+ */
+export declare const useChatFileUpload: ({ enabled, onUpload }: UseChatFileUploadOptions) => UseChatFileUploadResult;
+//# sourceMappingURL=useChatFileUpload.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatFileUpload.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/hooks/useChatFileUpload.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,wBAAwB,GAAG;IACtC;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,oFAAoF;IACpF,YAAY,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC1C,sEAAsE;IACtE,cAAc,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,YAAY,EAAE;QACb,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC7B,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACzB,CAAC;CACF,CAAC;AAIF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,0BAA2B,wBAAwB,KAAG,uBAqDnF,CAAC"}

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatFileUpload.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+const hasFiles = (e) => Array.from(e.dataTransfer?.types || []).includes('Files');
+/**
+ * Wires drag-and-drop image upload onto the chat footer plus a ref for the
+ * hidden file input. `dragenter` / `dragleave` fire on every child crossing,
+ * so a counter is kept to know when the pointer has truly left the footer.
+ */
+export const useChatFileUpload = ({ enabled, onUpload }) => {
+    const fileInputRef = useRef(null);
+    const [isDraggingFile, setIsDraggingFile] = useState(false);
+    const dragCounterRef = useRef(0);
+    // Reset drag state when uploads become disabled mid-drag (e.g. loading starts)
+    // so the drop overlay cannot get stuck on screen.
+    useEffect(() => {
+        if (!enabled) {
+            dragCounterRef.current = 0;
+            setIsDraggingFile(false);
+        }
+    }, [enabled]);
+    const onDragEnter = (e) => {
+        if (!enabled || !hasFiles(e))
+            return;
+        e.preventDefault();
+        dragCounterRef.current += 1;
+        setIsDraggingFile(true);
+    };
+    const onDragOver = (e) => {
+        if (!enabled || !hasFiles(e))
+            return;
+        // Required to allow the drop event to fire
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'copy';
+    };
+    const onDragLeave = (e) => {
+        if (!enabled || !hasFiles(e))
+            return;
+        dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+        if (dragCounterRef.current === 0)
+            setIsDraggingFile(false);
+    };
+    const onDrop = async (e) => {
+        if (!enabled || !hasFiles(e))
+            return;
+        e.preventDefault();
+        dragCounterRef.current = 0;
+        setIsDraggingFile(false);
+        const dropped = Array.from(e.dataTransfer?.files || []);
+        const firstImage = dropped.find((f) => f.type.startsWith('image/'));
+        if (!firstImage)
+            return;
+        // Reconstruct a FileList — consumers (e.g. controller.upload) expect FileList | null
+        const dt = new DataTransfer();
+        dt.items.add(firstImage);
+        await onUpload(dt.files);
+    };
+    return {
+        fileInputRef,
+        isDraggingFile,
+        dragHandlers: { onDragEnter, onDragOver, onDragLeave, onDrop },
+    };
+};

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatGestures.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'preact';
+export type UseChatGesturesOptions = {
+    /**
+     * Ref to the panel that is being dragged (the mobile secondary panel).
+     */
+    panelRef: RefObject<HTMLDivElement>;
+    /**
+     * Whether the side chat is currently visible. Used to reset state when it toggles.
+     */
+    shouldShowSideChat: boolean;
+    /**
+     * Active message id. Used to reset state when the user navigates to a different message.
+     */
+    activeMessageId: string | undefined;
+    /**
+     * Called when the swipe gesture passes the dismiss threshold and finishes animating out.
+     */
+    onDismiss: () => void;
+};
+export type UseChatGesturesResult = {
+    /** Current vertical offset in pixels. */
+    swipeOffset: number;
+    /** Whether a snap-back / dismiss animation is currently running. */
+    swipeAnimating: boolean;
+    /** Spread these onto the panel: `onTouchStart`, `onTouchMove`, `onTouchEnd`. */
+    swipeHandlers: {
+        onTouchStart: (e: any) => void;
+        onTouchMove: (e: any) => void;
+        onTouchEnd: () => void;
+    };
+};
+/**
+ * Drag-down-to-dismiss gesture for the mobile secondary chat panel.
+ *
+ * Tracks vertical touch movement and applies a translateY offset until the user releases.
+ * If the user passes a distance or velocity threshold the panel animates the rest of the way
+ * out and `onDismiss` fires; otherwise it snaps back to zero.
+ */
+export declare const useChatGestures: ({ panelRef, shouldShowSideChat, activeMessageId, onDismiss }: UseChatGesturesOptions) => UseChatGesturesResult;
+//# sourceMappingURL=useChatGestures.d.ts.map

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatGestures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatGestures.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Organisms/Chat/hooks/useChatGestures.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,sBAAsB,GAAG;IACpC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACpC;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IACnC,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,cAAc,EAAE,OAAO,CAAC;IACxB,gFAAgF;IAChF,aAAa,EAAE;QACd,YAAY,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC/B,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;CACF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,iEAAkE,sBAAsB,KAAG,qBAsFtH,CAAC"}

package/dist/esm/components/src/components/Organisms/Chat/hooks/useChatGestures.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+/**
+ * Drag-down-to-dismiss gesture for the mobile secondary chat panel.
+ *
+ * Tracks vertical touch movement and applies a translateY offset until the user releases.
+ * If the user passes a distance or velocity threshold the panel animates the rest of the way
+ * out and `onDismiss` fires; otherwise it snaps back to zero.
+ */
+export const useChatGestures = ({ panelRef, shouldShowSideChat, activeMessageId, onDismiss }) => {
+    const swipeStartY = useRef(0);
+    const swipeStartTime = useRef(0);
+    const swipeActive = useRef(false);
+    const swipeOffsetRef = useRef(0);
+    const animationTimerRef = useRef(null);
+    const [swipeOffset, setSwipeOffsetRaw] = useState(0);
+    const [swipeAnimating, setSwipeAnimating] = useState(false);
+    const updateSwipeOffset = (value) => {
+        swipeOffsetRef.current = value;
+        setSwipeOffsetRaw(value);
+    };
+    // Reset swipe state when secondary panel opens/closes or active message changes
+    useEffect(() => {
+        updateSwipeOffset(0);
+        setSwipeAnimating(false);
+        swipeActive.current = false;
+    }, [shouldShowSideChat, activeMessageId]);
+    const onTouchStart = (e) => {
+        swipeStartY.current = e.touches[0].clientY;
+        swipeStartTime.current = Date.now();
+        swipeActive.current = false; // only activate after dead-zone threshold
+        setSwipeAnimating(false);
+    };
+    const onTouchMove = (e) => {
+        const diff = e.touches[0].clientY - swipeStartY.current;
+        // Require a minimum drag distance before activating the swipe,
+        // so taps on buttons (e.g. close) still fire their click events.
+        if (!swipeActive.current) {
+            if (Math.abs(diff) < 8)
+                return; // still within dead-zone
+            swipeActive.current = true;
+        }
+        if (diff > 0) {
+            e.preventDefault();
+            updateSwipeOffset(diff);
+        }
+        else {
+            updateSwipeOffset(0);
+        }
+    };
+    const onTouchEnd = () => {
+        if (!swipeActive.current)
+            return;
+        swipeActive.current = false;
+        const offset = swipeOffsetRef.current;
+        const height = panelRef.current?.offsetHeight || 400;
+        const elapsed = Date.now() - swipeStartTime.current;
+        const velocity = offset / (elapsed || 1); // px per ms
+        // Dismiss if dragged past 25% threshold OR a quick flick (>0.5 px/ms with >50px travel)
+        const shouldDismiss = offset > height * 0.25 || (velocity > 0.5 && offset > 50);
+        if (shouldDismiss) {
+            // Animate out then dismiss
+            setSwipeAnimating(true);
+            updateSwipeOffset(height);
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+            animationTimerRef.current = setTimeout(() => {
+                onDismiss();
+                updateSwipeOffset(0);
+                setSwipeAnimating(false);
+            }, 300);
+        }
+        else {
+            // Snap back
+            setSwipeAnimating(true);
+            updateSwipeOffset(0);
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+            animationTimerRef.current = setTimeout(() => setSwipeAnimating(false), 300);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (animationTimerRef.current)
+                clearTimeout(animationTimerRef.current);
+        };
+    }, []);
+    return {
+        swipeOffset,
+        swipeAnimating,
+        swipeHandlers: { onTouchStart, onTouchMove, onTouchEnd },
+    };
+};