@memori.ai/memori-react 8.45.2 → 8.45.5

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

@@ -1,489 +0,0 @@
-/**
- * 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/src/components/MemoriArtifactSystem/components/ArtifactActions/test/CopyButtonTest.tsx

@@ -1,90 +0,0 @@
-/**
- * Test component for CopyButtonWithDropdown
- * Used to verify dropdown functionality
- */
-
-import React from 'react';
-import { CopyButtonWithDropdown } from '../';
-
-const CopyButtonTest: React.FC = () => {
-  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 (
-    <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
-      <h2>Copy Button Dropdown Test</h2>
-      
-      {testArtifacts.map((artifact, index) => (
-        <div key={index} style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '8px' }}>
-          <h3>{artifact.title} ({artifact.mimeType})</h3>
-          <div style={{ marginBottom: '10px' }}>
-            <CopyButtonWithDropdown
-              artifact={artifact}
-              onCopy={() => console.log('Copy clicked')}
-              onDownload={() => console.log('Download clicked')}
-              onPrint={() => console.log('Print clicked')}
-            />
-          </div>
-          <pre style={{ 
-            background: '#f5f5f5', 
-            padding: '10px', 
-            borderRadius: '4px',
-            fontSize: '12px',
-            maxHeight: '200px',
-            overflow: 'auto'
-          }}>
-            {artifact.content.substring(0, 200)}...
-          </pre>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default CopyButtonTest;

package/src/components/MemoriArtifactSystem/components/ArtifactActions/types.ts

@@ -1,73 +0,0 @@
-/**
- * TypeScript interfaces for artifact copy system components
- */
-
-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;
-}
-
-// CopyDropdownProps removed - using headless-ui Menu directly
-
-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;
-}