@memori.ai/memori-react 6.8.2 → 6.8.4

package/dist/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ArtifactContext_1 = require("../../context/ArtifactContext");
+const ChevronRight_1 = tslib_1.__importDefault(require("../../../icons/ChevronRight"));
+const ArtifactDrawer_1 = tslib_1.__importDefault(require("../ArtifactDrawer/ArtifactDrawer"));
+const ChevronDown_1 = tslib_1.__importDefault(require("../../../icons/ChevronDown"));
+const ChevronLeft_1 = tslib_1.__importDefault(require("../../../icons/ChevronLeft"));
+const ChevronUp_1 = tslib_1.__importDefault(require("../../../icons/ChevronUp"));
+const ArtifactHandler = ({ isChatlogPanel = false, message, }) => {
+    var _a, _b, _c;
+    const { openArtifact, state, closeArtifact } = (0, ArtifactContext_1.useArtifact)();
+    const [currentArtifact, setCurrentArtifact] = (0, react_1.useState)(null);
+    const dispatchArtifactCreatedEvent = (0, react_1.useCallback)((artifact) => {
+        const event = new CustomEvent('artifactCreated', {
+            detail: {
+                artifact,
+                message,
+            },
+        });
+        document.dispatchEvent(event);
+    }, [message]);
+    (0, react_1.useEffect)(() => {
+        const messageText = message.translatedText || message.text || '';
+        if (messageText.length > 0) {
+            const artifacts = detectArtifacts(messageText);
+            if (artifacts.length > 0) {
+                artifacts.forEach(artifact => {
+                    dispatchArtifactCreatedEvent(artifact);
+                });
+                if (isChatlogPanel) {
+                    setCurrentArtifact(artifacts[0]);
+                }
+                else {
+                    setTimeout(() => {
+                        openArtifact(artifacts[0]);
+                        setCurrentArtifact(artifacts[0]);
+                    }, 100);
+                }
+            }
+        }
+    }, [message, dispatchArtifactCreatedEvent]);
+    const detectArtifacts = (text) => {
+        if (!text || message.fromUser)
+            return [];
+        const artifactRegex = /<output\s+class="memori-artifact"[^>]*data-mimetype="([^"]+)"[^>]*>([\s\S]*?)<\/output>/gi;
+        const artifacts = [];
+        let match;
+        const titleRegex = {
+            dataTitle: /data-title\s*=\s*["\']([^"']+)["\']/i,
+            htmlTitle: /<title>([^<]+)<\/title>/gi
+        };
+        const findTitle = (mimeType, content) => {
+            var _a, _b;
+            return ((_a = titleRegex.dataTitle.exec(content)) === null || _a === void 0 ? void 0 : _a[1]) || ((_b = titleRegex.htmlTitle.exec(content)) === null || _b === void 0 ? void 0 : _b[1]) || `${mimeType.toUpperCase()} Artifact`;
+        };
+        while ((match = artifactRegex.exec(text)) !== null) {
+            const mimeType = match[1];
+            const content = match[2].trim();
+            if (content.length > 50) {
+                artifacts.push({
+                    id: `artifact-${Date.now()}-${Math.random()
+                        .toString(36)
+                        .substr(2, 9)}`,
+                    content,
+                    mimeType,
+                    title: findTitle(mimeType, text),
+                    timestamp: new Date(),
+                    size: content.length,
+                });
+            }
+        }
+        return artifacts;
+    };
+    const messageText = message.translatedText || message.text || '';
+    const artifacts = detectArtifacts(messageText);
+    if (artifacts.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "memori-artifact-handler", onClick: () => {
+                    var _a;
+                    if (state.isDrawerOpen &&
+                        ((_a = state.currentArtifact) === null || _a === void 0 ? void 0 : _a.id) === (currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.id)) {
+                        closeArtifact();
+                    }
+                    else {
+                        openArtifact(currentArtifact);
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-handler-icon", children: "\uD83D\uDCC4" }), (0, jsx_runtime_1.jsxs)("div", { className: "memori-artifact-handler-info", children: [(0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-handler-title", children: currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.title }), (0, jsx_runtime_1.jsxs)("div", { className: "memori-artifact-handler-meta", children: [currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.mimeType, " \u2022", ' ', formatBytes((currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.size) || 0)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-handler-action", children: isChatlogPanel ? (state.isDrawerOpen &&
+                            ((_a = state.currentArtifact) === null || _a === void 0 ? void 0 : _a.id) === (currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.id) ? ((0, jsx_runtime_1.jsx)(ChevronUp_1.default, { className: "memori-artifact-handler-action-icon" })) : ((0, jsx_runtime_1.jsx)(ChevronDown_1.default, { className: "memori-artifact-handler-action-icon" }))) : state.isDrawerOpen &&
+                            ((_b = state.currentArtifact) === null || _b === void 0 ? void 0 : _b.id) === (currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.id) ? ((0, jsx_runtime_1.jsx)(ChevronLeft_1.default, { className: "memori-artifact-handler-action-icon" })) : ((0, jsx_runtime_1.jsx)(ChevronRight_1.default, { className: "memori-artifact-handler-action-icon" })) })] }, currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.id), state.isDrawerOpen &&
+                ((_c = state.currentArtifact) === null || _c === void 0 ? void 0 : _c.id) === (currentArtifact === null || currentArtifact === void 0 ? void 0 : currentArtifact.id) && ((0, jsx_runtime_1.jsx)(ArtifactDrawer_1.default, { isChatLogPanel: isChatlogPanel }))] }));
+};
+const formatBytes = (bytes) => {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+exports.default = ArtifactHandler;
+//# sourceMappingURL=ArtifactHandler.js.map

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

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

package/dist/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css

@@ -0,0 +1,346 @@
+/**
+ * ArtifactPreview CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-preview {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+/* Tabs */
+.memori-artifact-tabs {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem;
+  /* border-bottom: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px) var(--memori-border-radius, 6px) 0 0;
+  background: var(--memori-inner-bg, #f8f9fa);
+  gap: 0.25rem;
+}
+
+.memori-artifact-tab-icon{
+  width: 16px;
+  height: 16px;
+}
+
+.memori-artifact-tab {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: var(--memori-border-radius, 4px);
+  background: transparent;
+  color: var(--memori-text-color, #666);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  gap: 0.5rem;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+/* .memori-artifact-tab:hover:not(.memori-artifact-tab--active) {
+  background: rgba(0, 123, 255, 0.05);
+  color: var(--memori-text-color, #333);
+} */
+
+.memori-artifact-tab--active, .memori-artifact-tab:hover, .memori-artifact-tab:active, .memori-artifact-tab:focus {
+  background: var(--memori-chat-bubble-bg, #fff);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  color: var(--memori-primary);
+}
+
+/* Content */
+.memori-artifact-content {
+  display: flex;
+  overflow: visible;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  border-radius: 0 0 var(--memori-border-radius, 6px) var(--memori-border-radius, 6px);
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+.memori-artifact-tab-content {
+  display: none;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+}
+
+.memori-artifact-tab-content--active {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Code Content */
+.memori-artifact-code {
+  overflow: auto;
+  flex: 1;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+  margin: 1rem;
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+.memori-artifact-code-content {
+  padding: 1rem;
+  margin: 0;
+  color: var(--memori-text-color, #333);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Preview Content */
+.memori-artifact-preview-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+  /* margin: 1rem; */
+  margin-top: 1rem;
+  background: var(--memori-chat-bubble-bg, #fff);
+}
+
+/* Markdown Preview */
+.memori-artifact-preview-markdown {
+  height: 100%;
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: var(--memori-font-family);
+  line-height: 1.6;
+  overflow-y: scroll;
+}
+
+.memori-artifact-preview-markdown h1,
+.memori-artifact-preview-markdown h2,
+.memori-artifact-preview-markdown h3,
+.memori-artifact-preview-markdown h4,
+.memori-artifact-preview-markdown h5,
+.memori-artifact-preview-markdown h6 {
+  margin: 1.5rem 0 0.5rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.memori-artifact-preview-css-content h3 {
+  margin: 0 0 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.memori-artifact-preview-markdown h1:first-child,
+.memori-artifact-preview-markdown h2:first-child,
+.memori-artifact-preview-markdown h3:first-child {
+  margin-top: 0;
+}
+
+.memori-artifact-preview-markdown p {
+  margin: 0 0 1rem;
+}
+
+.memori-artifact-preview-markdown code {
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+  background: var(--memori-inner-bg, #f1f3f4);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875em;
+}
+
+.memori-artifact-preview-markdown pre {
+  padding: 1rem;
+  border-radius: var(--memori-border-radius, 6px);
+  margin: 1rem 0;
+  background: var(--memori-inner-bg, #f1f3f4);
+  overflow-x: auto;
+}
+
+.memori-artifact-preview-markdown pre code {
+  padding: 0;
+  background: none;
+}
+
+.memori-artifact-preview-markdown a {
+  color: var(--memori-primary);
+  text-decoration: none;
+}
+
+.memori-artifact-preview-markdown a:hover {
+  text-decoration: underline;
+}
+
+/* SVG Preview */
+.memori-artifact-preview-svg {
+  display: flex;
+  min-height: 200px;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.memori-artifact-preview-svg svg {
+  max-width: 100%;
+  max-height: 100%;
+  /* border: 1px solid var(--memori-buttonr-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+}
+
+/* CSS Preview */
+.memori-artifact-preview-css {
+  padding: 1rem;
+}
+
+.memori-artifact-preview-css-demo {
+  overflow: hidden;
+  /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
+  border-radius: var(--memori-border-radius, 6px);
+}
+
+.memori-artifact-preview-css-content {
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: var(--memori-font-family);
+  line-height: 1.6;
+}
+
+.memori-artifact-preview-css-content p {
+  margin: 0 0 1rem;
+}
+
+.memori-artifact-preview-css-content button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--memori-border-radius, 4px);
+  margin: 0.5rem 0;
+  background: var(--memori-primary);
+  color: var(--memori-primary-text);
+  cursor: pointer;
+}
+
+.memori-artifact-preview-css-container {
+  padding: 1rem;
+  border-radius: var(--memori-border-radius, 4px);
+  margin: 1rem 0;
+  background: var(--memori-inner-bg, #f1f3f4);
+}
+
+/* Text Preview */
+.memori-artifact-preview-text {
+  padding: 1rem;
+  color: var(--memori-text-color, #333);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Syntax Highlighting */
+.memori-artifact--comment {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.memori-artifact--keyword {
+  color: #d73a49;
+  font-weight: 600;
+}
+
+.memori-artifact--string {
+  color: #032f62;
+}
+
+.memori-artifact--number {
+  color: #005cc5;
+  font-weight: 500;
+}
+
+.memori-artifact--function {
+  color: #6f42c1;
+  font-weight: 600;
+}
+
+.memori-artifact--operator {
+  color: #d73a49;
+}
+
+.memori-artifact--property {
+  color: #005cc5;
+}
+
+.memori-artifact--selector {
+  color: #6f42c1;
+  font-weight: 600;
+}
+
+.memori-artifact--tag {
+  color: #22863a;
+  font-weight: 600;
+}
+
+.memori-artifact--line-number {
+  margin-right: 1rem;
+  color: #6a737d;
+  user-select: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+
+  .memori-artifact-tab {
+    min-height: 42px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .memori-artifact-code,
+  .memori-artifact-preview-content {
+    margin: 0.5rem;
+  }
+
+  .memori-artifact-code-content {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .memori-artifact-preview-markdown,
+  .memori-artifact-preview-css,
+  .memori-artifact-preview-text {
+    padding: 0.75rem;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-tabs {
+    border-bottom-color: var(--memori-button-border-color, #404040);
+    background: rgba(255, 255, 255, 0.86);
+  }
+
+  /* .memori-artifact-tab--active {
+    background: var(--memori-chat-bubble-bg, #1a1a1a);
+  } */
+
+  .memori-artifact-code,
+  .memori-artifact-preview-content {
+    border-color: var(--memori-button-border-color, #404040);
+  }
+
+  .memori-artifact-preview-markdown code,
+  .memori-artifact-preview-css-demo {
+    border-color: var(--memori-button-border-color, #404040);
+    background: var(--memori-inner-bg, #2a2a2a);
+  }
+
+  .memori-artifact-preview-css-container {
+    background: var(--memori-inner-bg, #2a2a2a);
+  }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
+declare const ArtifactPreview: React.FC<{
+    artifact: ArtifactData;
+    activeTab: ArtifactTab;
+}>;
+export default ArtifactPreview;

package/dist/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Snippet_1 = tslib_1.__importDefault(require("../../../Snippet/Snippet"));
+const ArtifactPreview = ({ artifact, activeTab }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const renderPreview = (0, react_1.useCallback)(() => {
+        switch (artifact.mimeType) {
+            case 'html':
+                return ((0, jsx_runtime_1.jsx)("iframe", { srcDoc: artifact.content, style: {
+                        width: '100%',
+                        height: '100%',
+                        border: 'none',
+                        borderRadius: '6px',
+                    }, title: `${artifact.title} Preview` }));
+            case 'markdown':
+                return ((0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-preview-markdown", dangerouslySetInnerHTML: {
+                        __html: renderMarkdown(artifact.content),
+                    } }));
+            default:
+                return null;
+        }
+    }, [artifact]);
+    const renderMarkdown = (0, react_1.useCallback)((markdown) => {
+        return markdown
+            .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+            .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+            .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+            .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
+            .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
+            .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/`(.*?)`/g, '<code>$1</code>')
+            .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+            .replace(/\n/g, '<br>');
+    }, []);
+    const mapArtifactMimeTypeToSnippetMimeType = (0, react_1.useCallback)((mimeType) => {
+        switch (mimeType) {
+            case 'javascript':
+                return 'text/javascript';
+            case 'typescript':
+                return 'text/ecmascript';
+            case 'html':
+                return 'application/xml';
+            case 'css':
+                return 'text/css';
+            case 'json':
+                return 'application/json';
+            case 'python':
+                return 'text/x-python';
+            case 'bash':
+                return 'application/x-sh';
+            case 'cpp':
+            case 'csharp':
+                return 'text/x-c++src';
+            case 'php':
+                return 'application/x-php';
+            case 'sql':
+                return 'text/x-sql';
+            case 'ruby':
+                return 'text/x-ruby';
+            default:
+                return 'text/plain';
+        }
+    }, []);
+    const hasPreview = artifact.mimeType === 'html' || artifact.mimeType === 'markdown';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-preview", children: (0, jsx_runtime_1.jsxs)("div", { className: "memori-artifact-content", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('memori-artifact-tab-content', {
+                        'memori-artifact-tab-content--active': activeTab === 'code' || !hasPreview,
+                    }), children: (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-code", children: (0, jsx_runtime_1.jsx)(Snippet_1.default, { showCopyButton: false, medium: {
+                                mediumID: artifact.id,
+                                mimeType: mapArtifactMimeTypeToSnippetMimeType(artifact.mimeType),
+                                content: artifact.content,
+                                title: artifact.title,
+                                creationTimestamp: artifact.timestamp.toISOString(),
+                                creationName: 'System',
+                                lastChangeTimestamp: artifact.timestamp.toISOString(),
+                                lastChangeName: 'System',
+                            } }) }) }), hasPreview && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('memori-artifact-tab-content', {
+                        'memori-artifact-tab-content--active': activeTab === 'preview',
+                    }), children: (0, jsx_runtime_1.jsx)("div", { className: "memori-artifact-preview-content", children: renderPreview() }) }))] }) }));
+};
+exports.default = ArtifactPreview;
+//# sourceMappingURL=ArtifactPreview.js.map

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

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

package/dist/components/MemoriArtifactSystem/context/ArtifactContext.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ArtifactData, ArtifactSystemState } from '../types/artifact.types';
+interface ArtifactContextType {
+    state: ArtifactSystemState;
+    openArtifact: (artifact: ArtifactData) => void;
+    closeArtifact: () => void;
+    toggleFullscreen: () => void;
+}
+export declare const ArtifactProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useArtifact: () => ArtifactContextType;
+export {};

package/dist/components/MemoriArtifactSystem/context/ArtifactContext.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArtifact = exports.ArtifactProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ArtifactContext = (0, react_1.createContext)(null);
+const ArtifactProvider = ({ children }) => {
+    const [state, setState] = (0, react_1.useState)({
+        currentArtifact: null,
+        isDrawerOpen: false,
+        isFullscreen: false,
+    });
+    const openArtifact = (0, react_1.useCallback)((artifact) => {
+        setState(() => {
+            return {
+                currentArtifact: artifact,
+                isDrawerOpen: true,
+                isFullscreen: false,
+            };
+        });
+    }, []);
+    const closeArtifact = (0, react_1.useCallback)(() => {
+        setState(prev => {
+            return {
+                ...prev,
+                currentArtifact: null,
+                isDrawerOpen: false,
+                isFullscreen: false,
+            };
+        });
+    }, []);
+    const toggleFullscreen = (0, react_1.useCallback)(() => {
+        setState(prev => ({
+            ...prev,
+            isFullscreen: !prev.isFullscreen,
+        }));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        state,
+        openArtifact,
+        closeArtifact,
+        toggleFullscreen,
+    }), [state, openArtifact, closeArtifact, toggleFullscreen]);
+    return ((0, jsx_runtime_1.jsx)(ArtifactContext.Provider, { value: contextValue, children: children }));
+};
+exports.ArtifactProvider = ArtifactProvider;
+const useArtifact = () => {
+    const context = (0, react_1.useContext)(ArtifactContext);
+    if (!context) {
+        throw new Error('useArtifact must be used within ArtifactProvider');
+    }
+    return context;
+};
+exports.useArtifact = useArtifact;
+//# sourceMappingURL=ArtifactContext.js.map

package/dist/components/MemoriArtifactSystem/context/ArtifactContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactContext.js","sourceRoot":"","sources":["../../../../src/components/MemoriArtifactSystem/context/ArtifactContext.tsx"],"names":[],"mappings":";;;;AAAA,iCAAoG;AAUpG,MAAM,eAAe,GAAG,IAAA,qBAAa,EAA6B,IAAI,CAAC,CAAC;AAEjE,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAsB;QACtD,eAAe,EAAE,IAAI;QACrB,YAAY,EAAE,KAAK;QACnB,YAAY,EAAE,KAAK;KACpB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,QAAsB,EAAE,EAAE;QAC1D,QAAQ,CAAC,GAAG,EAAE;YACZ,OAAO;gBACL,eAAe,EAAE,QAAQ;gBACzB,YAAY,EAAE,IAAI;gBAClB,YAAY,EAAE,KAAK;aACpB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACrC,QAAQ,CAAC,IAAI,CAAC,EAAE;YAEd,OAAO;gBACL,GAAG,IAAI;gBACP,eAAe,EAAE,IAAI;gBACrB,YAAY,EAAE,KAAK;gBACnB,YAAY,EAAE,KAAK;aACpB,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChB,GAAG,IAAI;YACP,YAAY,EAAE,CAAC,IAAI,CAAC,YAAY;SACjC,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC;QAClC,KAAK;QACL,YAAY;QACZ,aAAa;QACb,gBAAgB;KACjB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE5D,OAAO,CACL,uBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,gBAAgB,oBAgD3B;AAEK,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACrE;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AANW,QAAA,WAAW,eAMtB"}

package/dist/components/MemoriArtifactSystem/types/artifact.types.d.ts

@@ -0,0 +1,14 @@
+export interface ArtifactData {
+    id: string;
+    content: string;
+    mimeType: string;
+    title: string;
+    timestamp: Date;
+    size: number;
+}
+export interface ArtifactSystemState {
+    currentArtifact: ArtifactData | null;
+    isDrawerOpen: boolean;
+    isFullscreen: boolean;
+}
+export type ArtifactTab = 'code' | 'preview';

package/dist/components/MemoriArtifactSystem/types/artifact.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=artifact.types.js.map

package/dist/components/MemoriArtifactSystem/types/artifact.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artifact.types.js","sourceRoot":"","sources":["../../../../src/components/MemoriArtifactSystem/types/artifact.types.ts"],"names":[],"mappings":""}