@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -0,0 +1,163 @@
+/**
+ * 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

@@ -0,0 +1,250 @@
+/**
+ * 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"
+                  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"
+                  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

@@ -0,0 +1,30 @@
+// 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
+    />
+  ),
+};