@memori.ai/memori-react 6.8.2 → 6.8.4

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -0,0 +1,489 @@
+/**
+ * CSS styles for artifact copy system components
+ * Includes responsive design and print media queries
+ */
+
+/* Copy Button Wrapper */
+.memori-copy-button-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.memori-copy-button-trigger {
+  position: relative;
+}
+
+/* Copy Button */
+.memori-copy-button {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  min-height: 36px;
+  align-items: center;
+  padding: 8px 16px;
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  background: #ffffff;
+  border-bottom-right-radius: 0px;
+  border-top-right-radius: 0px;
+  color: #374151;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 8px;
+  line-height: 1.4;
+  transition: all 0.2s ease;
+}
+
+.memori-copy-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.memori-copy-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.memori-copy-button:hover:not(:disabled) {
+  border-color: #d1d5db;
+  background: #f9fafb;
+}
+
+.memori-copy-button:active:not(:disabled) {
+  border-color: #9ca3af;
+  background: #f3f4f6;
+}
+
+.memori-copy-button--success {
+  border-color: #22c55e;
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.memori-copy-button--error {
+  border-color: #ef4444;
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.memori-copy-button--loading {
+  cursor: wait;
+}
+
+.memori-copy-button-group{
+  display: inline-flex;
+  align-items: center;
+}
+
+.memori-copy-button--dropdown {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  min-height: 36px;
+  align-items: center;
+  padding: 8px 16px;
+  padding-right: 12px;
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  background: #ffffff;
+  border-bottom-left-radius: 0px !important;
+  border-top-left-radius: 0px !important;
+  color: #374151;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 8px;
+  line-height: 1.4;
+  transition: all 0.2s ease;
+
+}
+
+/* Button Icons */
+.memori-copy-button-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.memori-copy-button-icon--success {
+  color: #22c55e;
+}
+
+.memori-copy-button-icon--error {
+  color: #ef4444;
+}
+
+.memori-copy-button-chevron {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  margin-left: 4px;
+  transition: transform 0.2s ease;
+}
+
+.memori-copy-button--dropdown:hover .memori-copy-button-chevron {
+  transform: rotate(180deg);
+}
+
+/* Loading Spinner */
+.memori-copy-button-loading {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.memori-copy-button-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #e5e7eb;
+  border-radius: 50%;
+  animation: memori-copy-spin 1s linear infinite;
+}
+
+@keyframes memori-copy-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Copy Menu Wrapper */
+.memori-copy-menu-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* Copy Dropdown */
+.memori-copy-dropdown {
+  position: absolute;
+  z-index: 10001;
+  top: 100%;
+  right: 0;
+  /* left: 0; */
+  overflow: hidden;
+  min-width: 280px;
+  max-width: 320px;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  margin-top: 4px;
+  background: #ffffff;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Responsive positioning */
+@media (max-width: 640px) {
+  .memori-copy-dropdown {
+    right: 0;
+    left: auto;
+    min-width: 260px;
+    max-width: calc(100vw - 32px);
+  }
+}
+
+/* Headless UI Transition Classes */
+.memori-copy-dropdown-enter {
+  transition: all 0.15s ease-out;
+}
+
+.memori-copy-dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+.memori-copy-dropdown-enter-to {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.memori-copy-dropdown-leave {
+  transition: all 0.1s ease-in;
+}
+
+.memori-copy-dropdown-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.memori-copy-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+.memori-copy-dropdown-content {
+  padding: 8px 0;
+}
+
+.memori-copy-dropdown-header {
+  padding: 8px 16px 4px;
+  border-bottom: 1px solid #f3f4f6;
+  margin-bottom: 4px;
+}
+
+.memori-copy-dropdown-title {
+  color: #6b7280;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.memori-copy-dropdown-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.memori-copy-dropdown-empty {
+  padding: 16px;
+  text-align: center;
+}
+
+.memori-copy-dropdown-empty-text {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+/* Copy Menu Item */
+.memori-copy-menu-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 12px 16px;
+  border: none;
+  background: none;
+  color: #374151;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.memori-copy-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.memori-copy-menu-item:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+
+.memori-copy-menu-item:hover:not(:disabled),
+.memori-copy-menu-item--active {
+  background: #f9fafb;
+}
+
+.memori-copy-menu-item:active:not(:disabled) {
+  background: #f3f4f6;
+}
+
+.memori-copy-menu-item--loading {
+  cursor: wait;
+}
+
+.memori-copy-menu-item--pdf {
+  border-left: 3px solid #3b82f6;
+}
+
+.memori-copy-menu-item--print {
+  border-left: 3px solid #10b981;
+}
+
+.memori-copy-menu-item-content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+}
+
+.memori-copy-menu-item-icon-wrapper {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.memori-copy-menu-item-icon {
+  width: 16px;
+  height: 16px;
+  color: #6b7280;
+}
+
+.memori-copy-menu-item-loading {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.memori-copy-menu-item-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #e5e7eb;
+  border-radius: 50%;
+  border-top: 2px solid #3b82f6;
+  animation: memori-copy-spin 1s linear infinite;
+}
+
+.memori-copy-menu-item-text {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-copy-menu-item-label {
+  margin-bottom: 2px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.memori-copy-menu-item-description {
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.memori-copy-menu-item-async-indicator {
+  flex-shrink: 0;
+}
+
+.memori-copy-menu-item-async-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: #dbeafe;
+  color: #1e40af;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* Toast Notifications */
+.memori-copy-toast {
+  position: fixed;
+  z-index: 10000;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  max-width: 300px;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 6px;
+  animation: memori-copy-toast-enter 0.3s ease-out;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  font-size: 14px;
+  font-weight: 500;
+  gap: 8px;
+}
+
+@keyframes memori-copy-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.memori-copy-toast--success {
+  border: 1px solid #22c55e;
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.memori-copy-toast--error {
+  border: 1px solid #ef4444;
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.memori-copy-toast-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.memori-copy-toast-text {
+  flex: 1;
+  line-height: 1.4;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .memori-copy-dropdown {
+    min-width: 260px;
+    max-width: calc(100vw - 32px);
+  }
+
+  .memori-copy-toast {
+    right: 16px;
+    left: 16px;
+    max-width: none;
+  }
+
+  .memori-copy-button, .memori-copy-button--dropdown {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .memori-copy-menu-item {
+    padding: 10px 12px;
+  }
+}
+
+/* Print Media Queries */
+@media print {
+  .memori-copy-button-wrapper,
+  .memori-copy-dropdown,
+  .memori-copy-toast {
+    display: none !important;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .memori-copy-button {
+    border-width: 2px;
+  }
+
+  .memori-copy-dropdown {
+    border-width: 2px;
+  }
+
+  .memori-copy-menu-item:hover:not(:disabled) {
+    background: #000000;
+    color: #ffffff;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .memori-copy-button,
+  .memori-copy-menu-item,
+  .memori-copy-dropdown,
+  .memori-copy-toast {
+    transition: none;
+  }
+
+  .memori-copy-button-spinner,
+  .memori-copy-menu-item-spinner {
+    animation: none;
+  }
+
+  .memori-copy-dropdown {
+    animation: none;
+  }
+
+  .memori-copy-toast {
+    animation: none;
+  }
+}
+
+/* Focus Styles for Accessibility - moved to proper positions above */
+

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CopyButtonTest: React.FC;
+export default CopyButtonTest;

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButtonWithDropdown } from '../';
+const CopyButtonTest = () => {
+    const testArtifacts = [
+        {
+            content: `# Hello World
+
+This is a **markdown** document with some content.
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, World!");
+}
+\`\`\`
+
+- Item 1
+- Item 2
+- Item 3`,
+            mimeType: 'text/markdown',
+            title: 'Markdown Test',
+        },
+        {
+            content: `<!DOCTYPE html>
+<html>
+<head>
+  <title>Test HTML</title>
+</head>
+<body>
+  <h1>Hello World</h1>
+  <p>This is a test HTML document.</p>
+</body>
+</html>`,
+            mimeType: 'text/html',
+            title: 'HTML Test',
+        },
+        {
+            content: `function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}`,
+            mimeType: 'application/vnd.ant.code.javascript',
+            title: 'JavaScript Code',
+        },
+        {
+            content: `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`,
+            mimeType: 'image/svg+xml',
+            title: 'SVG Test',
+        },
+    ];
+    return (_jsxs("div", { style: { padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx("h2", { children: "Copy Button Dropdown Test" }), testArtifacts.map((artifact, index) => (_jsxs("div", { style: { border: '1px solid #ccc', padding: '10px', borderRadius: '8px' }, children: [_jsxs("h3", { children: [artifact.title, " (", artifact.mimeType, ")"] }), _jsx("div", { style: { marginBottom: '10px' }, children: _jsx(CopyButtonWithDropdown, { artifact: artifact, onCopy: () => console.log('Copy clicked'), onDownload: () => console.log('Download clicked'), onPrint: () => console.log('Print clicked') }) }), _jsxs("pre", { style: {
+                            background: '#f5f5f5',
+                            padding: '10px',
+                            borderRadius: '4px',
+                            fontSize: '12px',
+                            maxHeight: '200px',
+                            overflow: 'auto'
+                        }, children: [artifact.content.substring(0, 200), "..."] })] }, index)))] }));
+};
+export default CopyButtonTest;
+//# sourceMappingURL=CopyButtonTest.js.map

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButtonTest.js","sourceRoot":"","sources":["../../../../../../src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAE7C,MAAM,cAAc,GAAa,GAAG,EAAE;IACpC,MAAM,aAAa,GAAG;QACpB;YACE,OAAO,EAAE;;;;;;;;;;;;SAYN;YACH,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,eAAe;SACvB;QACD;YACE,OAAO,EAAE;;;;;;;;;QASP;YACF,QAAQ,EAAE,WAAW;YACrB,KAAK,EAAE,WAAW;SACnB;QACD;YACE,OAAO,EAAE;;;EAGb;YACI,QAAQ,EAAE,qCAAqC;YAC/C,KAAK,EAAE,iBAAiB;SACzB;QACD;YACE,OAAO,EAAE;;OAER;YACD,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,UAAU;SAClB;KACF,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACpF,qDAAkC,EAEjC,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,eAAiB,KAAK,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,aACxF,yBAAK,QAAQ,CAAC,KAAK,QAAI,QAAQ,CAAC,QAAQ,SAAO,EAC/C,cAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAClC,KAAC,sBAAsB,IACrB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAC3C,GACE,EACN,eAAK,KAAK,EAAE;4BACV,UAAU,EAAE,SAAS;4BACrB,OAAO,EAAE,MAAM;4BACf,YAAY,EAAE,KAAK;4BACnB,QAAQ,EAAE,MAAM;4BAChB,SAAS,EAAE,OAAO;4BAClB,QAAQ,EAAE,MAAM;yBACjB,aACE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAC/B,KAnBE,KAAK,CAoBT,CACP,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/types.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+export interface CopyFormat {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode | undefined;
+    mimeType: string;
+    action: 'copy' | 'pdf' | 'print' | 'download' | 'link';
+    isAsync?: boolean;
+}
+export interface CopyMenuItemProps {
+    format: CopyFormat;
+    onClick: (format: CopyFormat) => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface CopyButtonWithDropdownProps {
+    artifact: {
+        content: string;
+        mimeType: string;
+        title?: string;
+    };
+    onCopy?: () => void;
+    onDownload?: () => void;
+    onPrint?: () => void;
+    onOpenExternal?: () => void;
+    loading?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
+export interface CopyState {
+    isOpen: boolean;
+    loading: boolean;
+    success: boolean;
+    error: string | null;
+    activeFormat: string | null;
+}
+export interface UseCopyArtifactReturn {
+    copyState: CopyState;
+    formats: CopyFormat[];
+    handleCopy: (format: CopyFormat) => Promise<void>;
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    resetState: () => void;
+    handleCopyClick: () => Promise<void>;
+}
+export interface PDFExportOptions {
+    title?: string;
+    author?: string;
+    margin?: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+    fontSize?: string;
+    fontFamily?: string;
+    lineHeight?: string;
+    color?: string;
+    backgroundColor?: string;
+}

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/types.js.map

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

package/esm/components/MemoriArtifactSystem/components/ArtifactActions/utils/PDFExporter.d.ts

@@ -0,0 +1,15 @@
+import { PDFExportOptions } from '../types';
+export declare class PDFExporter {
+    private static instance;
+    private printWindow;
+    static getInstance(): PDFExporter;
+    private convertMarkdownToHTML;
+    private generatePDFCSS;
+    private createPDFDocument;
+    exportAsPDFSafari(content: string, title?: string, options?: PDFExportOptions): Promise<void>;
+    exportAsPDF(content: string, title?: string, options?: PDFExportOptions): Promise<void>;
+    isSupported(): boolean;
+    isSafariSupported(): boolean;
+    cleanup(): void;
+}
+export declare const pdfExporter: PDFExporter;