@memori.ai/memori-react 8.45.1 → 8.45.4

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

@@ -1,163 +0,0 @@
-/**
- * ArtifactActions CSS Styles
- * Following the project's design system and CSS patterns
- */
-
-
-
-.memori-artifact-action-btn  {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 12px 16px;
-  border: none;
-  background: none;
-  color: #374151;
-  cursor: pointer;
-  font-size: 14px;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-
-.memori-artifact-action-icon, .memori-artifact-action-icon-fullscreen{
-  width: 16px;
-  height: 16px;
-}
-
-.memori-artifact-action-icon{
-  fill: #000;
-}
-
-.memori-artifact-action-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  transform: none !important;
-}
-
-.memori-artifact-action-btn:focus {
-  outline: 2px solid var(--memori-primary);
-  outline-offset: 2px;
-}
-
-.memori-artifact-action-btn:active {
-  transform: translateY(0);
-}
-
-.memori-artifact-action-btn:hover:not(:disabled),
-.memori-artifact-action-btn--active {
-  background: #f9fafb;
-}
-
-.memori-artifact-action-btn:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* .memori-artifact-action-btn:disabled:hover {
-  box-shadow: none !important;
-  transform: none !important;
-} */
-
-
-.memori-artifact-action-btn--active {
-  background: var(--memori-chat-bubble-bg, #fff);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color: var(--memori-primary);
-}
-
-.memori-artifact-action-text {
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-/* Fullscreen Button Special Styling */
-.memori-artifact-fullscreen-btn {
-  position: relative;
-}
-
-.memori-artifact-fullscreen-btn--active {
-  border-color: var(--memori-primary) !important;
-  background: var(--memori-primary) !important;
-  color: var(--memori-primary-text) !important;
-}
-
-
-/* Responsive Design */
-
-@media (max-width: 768px) {
-
-  .memori-artifact-fullscreen-btn{
-    display: none;
-  }
-  
-  .memori-artifact-action-btn {
-    min-width: 2.5rem;
-    justify-content: center;
-    padding: 0.5rem;
-  }
-  
-  .memori-artifact-actions-row {
-    gap: 0.25rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .memori-artifact-actions-row {
-    gap: 0.125rem;
-  }
-  
-  .memori-artifact-action-btn {
-    min-width: 2.25rem;
-    padding: 0.375rem;
-    font-size: 0.75rem;
-  }
-}
-
-/* Loading State */
-
-/* Icon Sizing */
-.memori-artifact-action-btn .memori-button--icon, .memori-artifact-action-icon-fullscreen {
-  font-size: 1rem;
-  line-height: 1;
-}
-
-/* Remove unused styles */
-
-.memori-artifact-action-icon-fullscreen{
-  fill: #fff
-}
-
-
-/* Animation for Copy Feedback */
-@keyframes copyFeedback {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.memori-artifact-action-btn.copied {
-  animation: copyFeedback 0.3s ease;
-}
-
-/* Tooltip Support */
-.memori-artifact-action-btn[title] {
-  position: relative;
-}
-
-/* Horizontal Button Row Styles */
-.memori-artifact-actions-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx

@@ -1,250 +0,0 @@
-/**
- * ArtifactActions Component
- * Provides action buttons for artifact operations (copy, download, print, etc.)
- * Following the project's component patterns and design system
- */
-
-import React, { useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
-import Button from '../../../ui/Button';
-import { ArtifactData } from '../../types/artifact.types';
-import Download from '../../../icons/Download';
-import Link from '../../../icons/Link';
-import Fullscreen from '../../../icons/Fullscreen';
-import FullscreenExit from '../../../icons/FullscreenExit';
-import PrintIcon from '../../../icons/Print';
-import { CopyButtonWithDropdown } from './';
-import { Menu, Transition } from '@headlessui/react';
-import MenuVertical from '../../../icons/MenuVertical';
-
-const ArtifactActions: React.FC<{
-  artifact: ArtifactData;
-  onCopy: () => void;
-  onDownload?: () => void;
-  onPrint?: () => void;
-  onOpenExternal?: () => void;
-  loading: boolean;
-  isMobile?: boolean;
-}> = ({
-  artifact,
-  onCopy,
-  onDownload,
-  onPrint,
-  onOpenExternal,
-  loading = false,
-  isMobile = false,
-}) => {
-  const { t } = useTranslation();
-
-  /**
-   * Get file extension for download
-   */
-  const getFileExtension = useCallback((mimeType: string): string => {
-    const extensions: Record<string, string> = {
-      html: 'html',
-      json: 'json',
-      markdown: 'md',
-      css: 'css',
-      javascript: 'js',
-      typescript: 'ts',
-      svg: 'svg',
-      xml: 'xml',
-      text: 'txt',
-      python: 'py',
-      java: 'java',
-      cpp: 'cpp',
-      csharp: 'cs',
-      php: 'php',
-      ruby: 'rb',
-      go: 'go',
-      rust: 'rs',
-      yaml: 'yml',
-      sql: 'sql',
-    };
-    return extensions[mimeType] || 'txt';
-  }, []);
-
-  /**
-   * Get MIME type string for downloads
-   */
-  const getMimeTypeString = useCallback((mimeType: string): string => {
-    const mimeTypes: Record<string, string> = {
-      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';
-  }, []);
-
-  /**
-   * Handle print action
-   */
-  const handlePrint = useCallback(() => {
-    try {
-      const printWindow = window.open('', '_blank');
-      if (!printWindow) {
-        alert('Popup blocked! Please enable popups to print the artifact.');
-        return;
-      }
-
-      let printContent: string;
-      if (artifact.mimeType === 'html') {
-        printContent = artifact.content;
-      } else {
-        printContent = `
-          <!DOCTYPE html>
-          <html>
-          <head>
-            <title>Artifact - ${artifact.mimeType.toUpperCase()}</title>
-            <style>
-              body { 
-                font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
-                white-space: pre-wrap; 
-                margin: 20px; 
-                line-height: 1.4;
-              }
-              @media print { 
-                body { margin: 0; } 
-              }
-            </style>
-          </head>
-          <body>${artifact.content
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')}</body>
-          </html>
-        `;
-      }
-
-      printWindow.document.write(printContent);
-      printWindow.document.close();
-
-      setTimeout(() => {
-        printWindow.print();
-        printWindow.close();
-      }, 500);
-
-      onPrint?.();
-    } catch (error) {
-      console.error('Print failed:', error);
-    }
-  }, [artifact, onPrint]);
-
-  /**
-   * Handle external open action
-   */
-  const handleOpenExternal = useCallback(() => {
-    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;
-      }
-
-      // Cleanup URL after a delay
-      setTimeout(() => {
-        URL.revokeObjectURL(url);
-      }, 60000);
-
-      onOpenExternal?.();
-    } catch (error) {
-      console.error('External open failed:', error);
-    }
-  }, [artifact, getMimeTypeString, onOpenExternal]);
-
-  return (
-    <div className="memori-artifact-actions">
-      <div className="memori-artifact-actions-row">
-        <CopyButtonWithDropdown
-          artifact={artifact}
-          onCopy={onCopy}
-          onDownload={onDownload}
-          onPrint={onPrint}
-          loading={loading}
-          className="memori-artifact-action-btn"
-        />
-       {isMobile && <Menu as="div" className="memori-copy-menu-wrapper">
-          <Menu.Button as="div" className="memori-copy-button-trigger">
-            <Button
-              disabled={loading}
-              className={cx(
-                'memori-button',
-                'memori-button--more-options',
-                'memori-button--icon-only'
-              )}
-              ghost
-              title="More copy options"
-            >
-              <MenuVertical className="memori-artifact-action-icon" />
-            </Button>
-          </Menu.Button>
-
-          <Transition
-            as={React.Fragment}
-            enter="memori-copy-dropdown-enter"
-            enterFrom="memori-copy-dropdown-enter-from"
-            enterTo="memori-copy-dropdown-enter-to"
-            leave="memori-copy-dropdown-leave"
-            leaveFrom="memori-copy-dropdown-leave-from"
-            leaveTo="memori-copy-dropdown-leave-to"
-          >
-            <Menu.Items className="memori-copy-dropdown" style={{minWidth: '200px'}}>
-              <div className="memori-copy-dropdown-list">
-                <Button
-                  onClick={handlePrint}
-                  disabled={loading}
-                  className="memori-artifact-action-btn memori-artifact-action-btn--print"
-                  ghost
-                  icon={<PrintIcon className="memori-artifact-action-icon" />}
-                  title={t('artifact.print') || 'Print'}
-                >
-                  <span className="memori-artifact-action-text">
-                    {t('artifact.print') || 'Print'}
-                  </span>
-                </Button>
-
-                <Button
-                  onClick={handleOpenExternal}
-                  disabled={loading}
-                  className="memori-artifact-action-btn memori-artifact-action-btn--external"
-                  ghost
-                  icon={<Link className="memori-artifact-action-icon" />}
-                  title={t('artifact.external') || 'External'}
-                >
-                  <span className="memori-artifact-action-text">
-                    {t('artifact.external') || 'External'}
-                  </span>
-                </Button>
-
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>}
-      </div>
-    </div>
-  );
-};
-
-export default ArtifactActions;

package/src/components/MemoriArtifactSystem/components/ArtifactActions/CopyButton.stories.tsx

@@ -1,30 +0,0 @@
-// ArtifactSystem.stories.tsx
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Message,
-  Memori,
-  Tenant,
-} from '@memori.ai/memori-api-client/dist/types';
-import CopyButtonTest from './test/CopyButtonTest';
-
-
-const meta: Meta<typeof CopyButtonTest> = {
-  title: 'Artifact System/CopyButtonTest',
-  component: CopyButtonTest,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Stories
-export const HTMLArtifact: Story = {
-  args: {},
-  render: () => (
-    <CopyButtonTest
-    />
-  ),
-};