@memori.ai/memori-react 6.8.1 → 6.8.4

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const ArtifactDrawer: React.FC<{
+    isChatLogPanel?: boolean;
+}>;
+export default ArtifactDrawer;

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const react_2 = require("@headlessui/react");
+const Button_1 = tslib_1.__importDefault(require("../../../ui/Button"));
+const Close_1 = tslib_1.__importDefault(require("../../../icons/Close"));
+const ArtifactActions_1 = tslib_1.__importDefault(require("../ArtifactActions/ArtifactActions"));
+const ArtifactContext_1 = require("../../context/ArtifactContext");
+const ArtifactPreview_1 = tslib_1.__importDefault(require("../ArtifactPreview/ArtifactPreview"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Drawer_1 = tslib_1.__importDefault(require("../../../ui/Drawer"));
+const MenuVertical_1 = tslib_1.__importDefault(require("../../../icons/MenuVertical"));
+const Download_1 = tslib_1.__importDefault(require("../../../icons/Download"));
+const Link_1 = tslib_1.__importDefault(require("../../../icons/Link"));
+const Print_1 = tslib_1.__importDefault(require("../../../icons/Print"));
+const useCopyArtifact_1 = require("../ArtifactActions/hooks/useCopyArtifact");
+const TabSwitch_1 = tslib_1.__importDefault(require("./components/TabSwitch"));
+const ArtifactDrawer = ({ isChatLogPanel = false, }) => {
+    const { state, closeArtifact, toggleFullscreen } = (0, ArtifactContext_1.useArtifact)();
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('preview');
+    const handleTabChange = (0, react_1.useCallback)((tab) => {
+        setActiveTab(tab);
+    }, [activeTab]);
+    const { copyState, formats, handleCopy: handleCopyFormat, handleCopyClick, } = (0, useCopyArtifact_1.useCopyArtifact)(state.currentArtifact || { content: '', mimeType: 'text/plain' }, () => console.log('Copy completed'), () => console.log('Download completed'), () => console.log('Print completed'));
+    (0, react_1.useEffect)(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth <= 768);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    const handleCopy = (0, react_1.useCallback)(async () => {
+        if (!state.currentArtifact)
+            return;
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                await navigator.clipboard.writeText(state.currentArtifact.content);
+            }
+            else {
+                const textArea = document.createElement('textarea');
+                textArea.value = state.currentArtifact.content;
+                textArea.style.position = 'fixed';
+                textArea.style.left = '-999999px';
+                textArea.style.top = '-999999px';
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textArea);
+            }
+        }
+        catch (error) {
+            console.error('Copy failed:', error);
+            throw error;
+        }
+    }, [state.currentArtifact]);
+    const handleToggleFullscreen = (0, react_1.useCallback)(() => {
+        if (toggleFullscreen) {
+            toggleFullscreen();
+        }
+    }, [toggleFullscreen]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        closeArtifact();
+    }, [closeArtifact]);
+    if (!state.currentArtifact) {
+        return null;
+    }
+    const hasPreview = state.currentArtifact.mimeType === 'html' ||
+        state.currentArtifact.mimeType === 'markdown';
+    const ContentContainer = (0, react_1.useCallback)(({ children }) => {
+        if (isChatLogPanel) {
+            return ((0, jsx_runtime_1.jsx)("div", { style: { minHeight: '75vh', maxHeight: '75vh' }, className: "memori-artifact-panel", children: children }));
+        }
+        else {
+            return ((0, jsx_runtime_1.jsx)(Drawer_1.default, { open: state.isDrawerOpen, onClose: handleClose, placement: "right", width: "50%", className: state.isFullscreen
+                    ? 'memori-artifact-panel-drawer-fullscreen'
+                    : 'memori-artifact-panel-drawer', widthMd: "100%", widthLg: "50%", closable: false, animated: true, showBackdrop: false, preventBackdropClose: true, confirmDialogTitle: t('artifact.confirmDialogTitle') ||
+                    'Are you sure you want to close this artifact?', confirmDialogMessage: t('artifact.confirmDialogMessage') ||
+                    'This action cannot be undone.', children: children }));
+        }
+    }, [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen]);
+    const getMimeTypeString = (0, react_1.useCallback)((mimeType) => {
+        const mimeTypes = {
+            html: 'text/html',
+            json: 'application/json',
+            markdown: 'text/markdown',
+            css: 'text/css',
+            javascript: 'text/javascript',
+            typescript: 'text/typescript',
+            svg: 'image/svg+xml',
+            xml: 'text/xml',
+            text: 'text/plain',
+            python: 'text/x-python',
+            java: 'text/x-java',
+            cpp: 'text/x-c++',
+            csharp: 'text/x-csharp',
+            php: 'text/x-php',
+            ruby: 'text/x-ruby',
+            go: 'text/x-go',
+            rust: 'text/x-rust',
+            yaml: 'text/yaml',
+            sql: 'text/x-sql',
+        };
+        return mimeTypes[mimeType] || 'text/plain';
+    }, []);
+    const handleOpenExternal = (0, react_1.useCallback)((artifact) => {
+        try {
+            const mimeType = getMimeTypeString(artifact.mimeType);
+            const blob = new Blob([artifact.content], { type: mimeType });
+            const url = URL.createObjectURL(blob);
+            const externalWindow = window.open(url, '_blank');
+            if (!externalWindow) {
+                alert('Popup blocked! Please enable popups to open the artifact in a new window.');
+                return;
+            }
+            setTimeout(() => {
+                URL.revokeObjectURL(url);
+            }, 60000);
+        }
+        catch (error) {
+            console.error('External open failed:', error);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(ContentContainer, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('memori-artifact-drawer-container-actions', {
+                    'memori-artifact-drawer-container-actions--no-preview': !hasPreview,
+                    'memori-artifact-drawer-container-actions--chatlog': isChatLogPanel,
+                }), children: !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasPreview && ((0, jsx_runtime_1.jsx)(TabSwitch_1.default, { activeTab: activeTab, onTabChange: handleTabChange, hasPreview: hasPreview })), (0, jsx_runtime_1.jsx)(ArtifactActions_1.default, { artifact: state.currentArtifact, onCopy: handleCopy, loading: false, isMobile: isMobile }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: closeArtifact, className: (0, classnames_1.default)('memori-artifact-drawer--close', 'memori-button--icon-only', {
+                                'memori-artifact-drawer--close-desktop': !hasPreview,
+                            }), ghost: true, title: t('artifact.close') || 'Close', children: (0, jsx_runtime_1.jsx)(Close_1.default, { className: "memori-artifact-panel--close-icon" }) })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('memori-artifact-drawer-top-right', {
+                    'memori-artifact-drawer-top-right--no-preview': !hasPreview,
+                    'memori-artifact-drawer-top-right--chatlog': isChatLogPanel,
+                }), children: [isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasPreview && ((0, jsx_runtime_1.jsx)(TabSwitch_1.default, { activeTab: activeTab, onTabChange: handleTabChange, hasPreview: hasPreview })), (0, jsx_runtime_1.jsxs)(react_2.Menu, { as: "div", className: "memori-mobile-actions-menu", children: [(0, jsx_runtime_1.jsx)(react_2.Menu.Button, { as: "div", className: "memori-mobile-actions-trigger", children: (0, jsx_runtime_1.jsx)(Button_1.default, { className: (0, classnames_1.default)('memori-button', 'memori-button--more-options', 'memori-button--icon-only'), ghost: true, title: t('artifact.actions') || 'Actions', children: (0, jsx_runtime_1.jsx)(MenuVertical_1.default, { className: "memori-artifact-action-icon" }) }) }), (0, jsx_runtime_1.jsx)(react_2.Transition, { as: react_1.default.Fragment, enter: "memori-mobile-dropdown-enter", enterFrom: "memori-mobile-dropdown-enter-from", enterTo: "memori-mobile-dropdown-enter-to", leave: "memori-mobile-dropdown-leave", leaveFrom: "memori-mobile-dropdown-leave-from", leaveTo: "memori-mobile-dropdown-leave-to", children: (0, jsx_runtime_1.jsx)(react_2.Menu.Items, { className: "memori-mobile-dropdown", children: (0, jsx_runtime_1.jsxs)("div", { className: "memori-mobile-dropdown-list", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleCopy, disabled: false, className: "memori-artifact-action-btn", ghost: true, title: t('artifact.copy') || 'Copy', children: (0, jsx_runtime_1.jsx)("span", { className: "memori-artifact-action-text", children: t('artifact.copy') || 'Copy' }) }), formats.map(format => {
+                                                        const getIcon = () => {
+                                                            switch (format.action) {
+                                                                case 'copy':
+                                                                    return ((0, jsx_runtime_1.jsx)(Link_1.default, { className: "memori-artifact-action-icon" }));
+                                                                case 'download':
+                                                                    return ((0, jsx_runtime_1.jsx)(Download_1.default, { className: "memori-artifact-action-icon" }));
+                                                                case 'print':
+                                                                case 'pdf':
+                                                                    return ((0, jsx_runtime_1.jsx)(Print_1.default, { className: "memori-artifact-action-icon" }));
+                                                                default:
+                                                                    return ((0, jsx_runtime_1.jsx)(Link_1.default, { className: "memori-artifact-action-icon" }));
+                                                            }
+                                                        };
+                                                        return ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => handleCopyFormat(format), disabled: copyState.loading &&
+                                                                copyState.activeFormat === format.id, className: "memori-artifact-action-btn", ghost: true, icon: getIcon(), title: format.label, children: (0, jsx_runtime_1.jsx)("span", { className: "memori-artifact-action-text", children: format.label }) }, format.id));
+                                                    }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => {
+                                                            var _a;
+                                                            return handleOpenExternal((_a = state.currentArtifact) !== null && _a !== void 0 ? _a : {
+                                                                content: '',
+                                                                mimeType: '',
+                                                                title: '',
+                                                                timestamp: new Date(),
+                                                                size: 0,
+                                                                id: '',
+                                                            });
+                                                        }, disabled: false, className: "memori-artifact-action-btn", ghost: true, icon: (0, jsx_runtime_1.jsx)(Link_1.default, { className: "memori-artifact-action-icon" }), title: t('artifact.external') || 'External', children: (0, jsx_runtime_1.jsx)("span", { className: "memori-artifact-action-text", children: t('artifact.external') || 'External' }) })] }) }) })] })] })), isMobile && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: closeArtifact, className: (0, classnames_1.default)('memori-artifact-drawer--close', 'memori-button--icon-only'), ghost: true, title: t('artifact.close') || 'Close', children: (0, jsx_runtime_1.jsx)(Close_1.default, { className: "memori-artifact-panel--close-icon" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-panel--header" }), (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-panel--content", children: (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-panel--main", children: (0, jsx_runtime_1.jsx)(ArtifactPreview_1.default, { artifact: state.currentArtifact, activeTab: activeTab }) }) })] }));
+};
+exports.default = ArtifactDrawer;
+//# sourceMappingURL=ArtifactDrawer.js.map

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.js.map

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

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css

@@ -0,0 +1,150 @@
+/**
+ * TabSwitch CSS Styles
+ * Modern animated switch component with smooth transitions
+ */
+
+.memori-tab-switch {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.memori-tab-switch__container {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    background: #f8f9fa;
+    box-shadow: none;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__track {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    border-radius: 8px;
+    background: transparent;
+}
+
+.memori-tab-switch__indicator {
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    width: calc((100% - 4px) / var(--tab-count, 2));
+    border-radius: 6px;
+    animation: tab-switch-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    transform: translateX(calc(var(--active-index, 0) * 100%));
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__indicator::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 6px;
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
+    content: '';
+    pointer-events: none;
+}
+
+.memori-tab-switch__button {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    min-width: 70px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    gap: 6px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+}
+
+.memori-tab-switch__button:hover {
+    color: #374151;
+    transform: none;
+}
+
+.memori-tab-switch__button--active {
+    /* color: #1´ç11827; */
+    font-weight: 600;
+}
+
+.memori-tab-switch__button:focus {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+    outline: none;
+}
+
+.memori-tab-switch__button:active {
+    transform: none;
+}
+
+.memori-tab-switch__icon {
+    width: 18px;
+    height: 18px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-tab-switch__button--active .memori-tab-switch__icon {
+    filter: none;
+}
+
+.memori-tab-switch__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Hover effects for the entire switch */
+.memori-tab-switch__container:hover {
+    border-color: #d1d5db;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.memori-tab-switch__container:hover .memori-tab-switch__indicator {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+/* Animation for tab switching */
+@keyframes tab-switch-slide {
+    from {
+        transform: translateX(calc((var(--active-index, 0) - 1) * 100%));
+    }
+    to {
+        transform: translateX(calc(var(--active-index, 0) * 100%));
+    }
+}
+
+/* Responsive design */
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .memori-tab-switch__container {
+        border-width: 2px;
+    }
+
+    .memori-tab-switch__indicator {
+        box-shadow: 0 0 0 2px white, 0 2px 8px var(--memori-primary);
+    }
+
+    .memori-tab-switch__button:focus {
+        box-shadow: 0 0 0 4px var(--memori-primary);
+    }
+}

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ArtifactTab } from '../../../types/artifact.types';
+interface TabSwitchProps {
+    activeTab: ArtifactTab;
+    onTabChange: (tab: ArtifactTab) => void;
+    hasPreview: boolean;
+}
+declare const TabSwitch: React.FC<TabSwitchProps>;
+export default TabSwitch;

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Code_1 = tslib_1.__importDefault(require("../../../../icons/Code"));
+const Preview_1 = require("../../../../icons/Preview");
+const TabSwitch = ({ activeTab, onTabChange, hasPreview, }) => {
+    const tabs = [
+        {
+            id: 'code',
+            icon: Code_1.default,
+        },
+        ...(hasPreview
+            ? [
+                {
+                    id: 'preview',
+                    icon: Preview_1.PreviewIcon,
+                },
+            ]
+            : []),
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { className: "memori-tab-switch", children: (0, jsx_runtime_1.jsx)("div", { className: "memori-tab-switch__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "memori-tab-switch__track", style: {
+                    '--tab-count': tabs.length,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "memori-tab-switch__indicator", style: {
+                            '--active-index': tabs.findIndex(tab => tab.id === activeTab),
+                        } }), tabs.map((tab) => {
+                        const IconComponent = tab.icon;
+                        return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classnames_1.default)('memori-tab-switch__button', {
+                                'memori-tab-switch__button--active': activeTab === tab.id,
+                            }), onClick: () => onTabChange(tab.id), "aria-pressed": activeTab === tab.id, children: (0, jsx_runtime_1.jsx)(IconComponent, { className: "memori-tab-switch__icon" }) }, tab.id));
+                    })] }) }) }));
+};
+exports.default = TabSwitch;
+//# sourceMappingURL=TabSwitch.js.map

package/dist/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabSwitch.js","sourceRoot":"","sources":["../../../../../../src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.tsx"],"names":[],"mappings":";;;;AAOA,oEAA4B;AAC5B,0EAA0C;AAC1C,uDAAwD;AAQxD,MAAM,SAAS,GAA6B,CAAC,EAC3C,SAAS,EACT,WAAW,EACX,UAAU,GACX,EAAE,EAAE;IACH,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,MAAqB;YACzB,IAAI,EAAE,cAAI;SAEX;QACD,GAAG,CAAC,UAAU;YACZ,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,SAAwB;oBAC5B,IAAI,EAAE,qBAAW;iBAElB;aACF;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAC,mBAAmB,YAChC,gCAAK,SAAS,EAAC,8BAA8B,YAC3C,iCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI,CAAC,MAAM;iBACJ,aAExB,gCACE,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE;4BACL,gBAAgB,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,SAAS,CAAC;yBACvC,GACxB,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;wBAChB,MAAM,aAAa,GAAG,GAAG,CAAC,IAAI,CAAC;wBAC/B,OAAO,CACL,mCAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,2BAA2B,EAAE;gCACzC,mCAAmC,EAAE,SAAS,KAAK,GAAG,CAAC,EAAE;6BAC1D,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,kBACpB,SAAS,KAAK,GAAG,CAAC,EAAE,YAGlC,uBAAC,aAAa,IAAC,SAAS,EAAC,yBAAyB,GAAG,IAThD,GAAG,CAAC,EAAE,CAWJ,CACV,CAAC;oBACJ,CAAC,CAAC,IACE,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}

package/dist/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css

@@ -0,0 +1,253 @@
+/**
+ * ArtifactHandler CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-handler {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  padding: 1.5rem;
+  border: 1px solid var(--memori-button-border-color, #e9ecef);
+  border-radius: var(--memori-border-radius, 12px);
+  margin: 0.75rem 0;
+  margin: 0.5rem;
+  animation: fadeInUp 0.5s ease forwards;
+  backdrop-filter: blur(4px);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  gap: 12px;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+}
+
+.memori-artifact-handler:hover {
+  border-color: var(--memori-primary);
+  background: rgba(130, 70, 175, 0.05);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-handler--active {
+  border-color: var(--memori-primary);
+  background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
+  box-shadow: 0 4px 16px rgba(130, 70, 175, 0.3);
+  color: var(--memori-primary-text, #fff);
+}
+
+.memori-artifact-handler--active:hover {
+  box-shadow: 0 6px 20px rgba(130, 70, 175, 0.4);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-handler-content {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  gap: 0.75rem;
+}
+
+.memori-artifact-handler-icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.memori-artifact-handler-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-artifact-handler-action-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.memori-artifact-handler-title {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-handler-subtitle {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.75rem;
+  opacity: 0.7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-handler-meta {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.625rem;
+  gap: 0.5rem;
+  opacity: 0.6;
+}
+
+.memori-artifact-handler-type {
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  color: inherit;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+.memori-artifact-handler-custom-title {
+  overflow: hidden;
+  max-width: 120px;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  color: inherit;
+  font-style: italic;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-handler--active .memori-artifact-handler-type,
+.memori-artifact-handler--active .memori-artifact-handler-custom-title {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.memori-artifact-handler-actions {
+  flex-shrink: 0;
+}
+
+.memori-artifact-handler-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--memori-border-radius, 6px);
+  background: rgba(0, 0, 0, 0.05);
+  color: inherit;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.memori-artifact-handler-toggle:hover {
+  background: rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.memori-artifact-handler--active .memori-artifact-handler-toggle {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.memori-artifact-handler-toggle:focus {
+  outline: 2px solid var(--memori-primary);
+  outline-offset: 2px;
+}
+
+.memori-artifact-handler-toggle:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.memori-artifact-handler--active .memori-artifact-handler-toggle:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.memori-artifact-handler-toggle svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+}
+
+/* Animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .memori-artifact-handler {
+    margin: 0.5rem 0;
+  }
+
+  .memori-artifact-handler-content {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .memori-artifact-handler-icon {
+    font-size: 1.25rem;
+  }
+
+  .memori-artifact-handler-title {
+    font-size: 0.8125rem;
+  }
+
+  .memori-artifact-handler-subtitle {
+    font-size: 0.6875rem;
+  }
+
+  .memori-artifact-handler-meta {
+    font-size: 0.5625rem;
+  }
+
+  .memori-artifact-handler-custom-title {
+    max-width: 80px;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-handler {
+    /* background: rgba(26, 26, 26, 0.95); */
+    border-color: var(--memori-button-border-color, #404040);
+  }
+
+  .memori-artifact-handler:hover {
+    background: rgba(130, 70, 175, 0.1);
+    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-handler-type,
+  .memori-artifact-handler-custom-title {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-handler-toggle {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .memori-artifact-handler-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+/* Focus States for Accessibility */
+.memori-artifact-handler:focus {
+  outline: 2px solid var(--memori-primary);
+  outline-offset: 2px;
+}
+
+.memori-artifact-handler:focus:not(:focus-visible) {
+  outline: none;
+}

package/dist/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Message } from '@memori.ai/memori-api-client/dist/types';
+interface ArtifactHandlerProps {
+    isChatlogPanel?: boolean;
+    message: Message;
+}
+declare const ArtifactHandler: React.FC<ArtifactHandlerProps>;
+export default ArtifactHandler;