@memori.ai/memori-react 8.2.0 → 8.4.0-rc.0

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx

@@ -0,0 +1,282 @@
+/**
+ * ArtifactHandler Component
+ * Creates artifact handlers in chat messages and manages artifact display
+ * Following the project's component patterns and design system
+ */
+
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import { ArtifactData, ArtifactHandlerProps } from '../../types/artifact.types';
+import { useArtifactCreator, useArtifactProcessor, useArtifactDetector } from '../../hooks/useArtifactSystem';
+
+const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
+  artifact,
+  artifacts,
+  customTitle,
+  config,
+  actions,
+  message,
+  onArtifactCreated,
+}) => {
+  const { t } = useTranslation();
+  const { createArtifact } = useArtifactCreator();
+  const { processArtifactContent } = useArtifactProcessor();
+  const { hasArtifacts } = useArtifactDetector();
+
+  /**
+   * Format file size
+   */
+  const formatBytes = useCallback((bytes: number): string => {
+    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];
+  }, []);
+
+  /**
+   * Format timestamp
+   */
+  const formatTimestamp = useCallback((timestamp: Date): string => {
+    return timestamp?.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }, []);
+
+  /**
+   * Handle artifact click
+   */
+  const handleArtifactClick = useCallback(() => {
+    const artifactData = artifact;
+
+    if (onArtifactCreated) {
+      onArtifactCreated(artifactData!);
+    }
+  }, [artifact, onArtifactCreated]);
+
+  /**
+   * Process new dialog state for artifacts
+   */
+  useEffect(() => {
+    const handleMemoriNewDialogState = (message: string) => {
+      if (!message || typeof message !== 'string') return;
+      console.log('🎨 Processing message for artifacts...');
+
+      // controllo
+      // Process the message content to find and handle any artifacts
+      // processArtifactContent returns true if artifacts were found and processed
+      const processed = processArtifactContent(
+        message, // The message text to scan for artifacts
+        (content, mimeType, title) => {
+          // Callback when artifact is found
+
+          // Create a new artifact object with:
+          // - Unique ID combining type, timestamp and random string
+          // - Content and metadata from the artifact
+          // - Type info from config or default fallback
+          // - Generated or custom title
+          // - Creation timestamp and size
+          const artifact = {
+            // Generate unique ID
+            id: `artifact-${mimeType}-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`,
+            content, // The artifact content
+            mimeType: mimeType as any,
+            // Get type info from config or use default
+            typeInfo: config.supportedMimeTypes?.[
+              mimeType as keyof typeof config.supportedMimeTypes
+            ] || {
+              name: mimeType.toUpperCase(),
+              icon: '📄',
+              hasPreview: false,
+              language: 'text',
+              mimeType: 'text/plain',
+            },
+            // Use provided title or generate one from type info
+            title:
+              title ||
+              `${
+                config.supportedMimeTypes?.[
+                  mimeType as keyof typeof config.supportedMimeTypes
+                ]?.icon || '📄'
+              } ${
+                config.supportedMimeTypes?.[
+                  mimeType as keyof typeof config.supportedMimeTypes
+                ]?.name || mimeType.toUpperCase()
+              } Artifact`,
+            customTitle: title,
+            messageID: (message as any).timestamp || `msg-${Date.now()}`,
+            timestamp: new Date(),
+            size: content.length,
+          };
+
+          // Add the new artifact to the artifact system state
+          actions.addArtifact(artifact as ArtifactData);
+
+          // If auto-open is enabled in config,
+          // select/open the artifact after a short delay
+          if (config.autoOpenArtifacts) {
+            setTimeout(() => {
+              actions.selectArtifact(artifact as ArtifactData);
+            }, 500);
+          }
+
+          // Call the onArtifactCreated callback if provided
+          if (onArtifactCreated) {
+            onArtifactCreated(artifact as ArtifactData);
+          }
+        }
+      );
+
+      if (processed) {
+        console.log('✅ Artifacts processed successfully');
+      }
+    };
+    if (!message.fromUser) {
+      handleMemoriNewDialogState(message.translatedText || message.text);
+    }
+  }, [message]);
+
+  // Check if this message contains artifacts
+  const messageText = message.translatedText || message.text || '';
+  const messageHasArtifacts = useMemo(() => hasArtifacts(messageText), [messageText]);
+
+  // Only render if the message contains artifacts
+  if (!messageHasArtifacts) {
+    return null;
+  }
+
+  // If we have artifacts for this message, render them
+  if (artifacts && artifacts.length > 0) {
+    return (
+      <div className="memori-artifact-handler-container">
+        {artifacts.map((messageArtifact) => (
+          <div
+            key={messageArtifact.id}
+            className={cx('memori-artifact-handler', 'memori-card', {
+              'memori-artifact-handler-active': messageArtifact.isActive,
+            })}
+            onClick={() => {
+              actions.selectArtifact(messageArtifact);
+              if (onArtifactCreated) {
+                onArtifactCreated(messageArtifact);
+              }
+            }}
+          >
+            <div className="memori-artifact-handler-content">
+              <div className="memori-artifact-handler-icon">
+                {messageArtifact.typeInfo?.icon || '📄'}
+              </div>
+
+              <div className="memori-artifact-handler-info">
+                <div className="memori-artifact-handler-title">
+                  {messageArtifact.title}
+                </div>
+
+                <div className="memori-artifact-handler-subtitle">
+                  {t('artifact.generatedAt', 'Generated at')}{' '}
+                  {formatTimestamp(messageArtifact.timestamp)} •{' '}
+                  {formatBytes(messageArtifact.size)}
+                </div>
+
+                <div className="memori-artifact-handler-meta">
+                  <span className="memori-artifact-handler-type">
+                    {messageArtifact.typeInfo?.name || 'Text'}
+                  </span>
+                  {messageArtifact.customTitle && (
+                    <span className="memori-artifact-handler-custom-title">
+                      {messageArtifact.customTitle}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className="memori-artifact-handler-actions">
+                <button
+                  className="memori-artifact-handler-toggle"
+                  title={t('artifact.open', 'Open artifact') || 'Open artifact'}
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                    <path d="M9 9l6 6m0-6l-6 6" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // If we have a single artifact prop, render it (legacy support)
+  if (artifact) {
+    return (
+      <div
+        className={cx('memori-artifact-handler', 'memori-card')}
+        onClick={handleArtifactClick}
+      >
+        <div className="memori-artifact-handler-content">
+          <div className="memori-artifact-handler-icon">
+            {artifact.typeInfo?.icon || '📄'}
+          </div>
+
+          <div className="memori-artifact-handler-info">
+            <div className="memori-artifact-handler-title">{artifact.title}</div>
+
+            <div className="memori-artifact-handler-subtitle">
+              {t('artifact.generatedAt', 'Generated at')}{' '}
+              {formatTimestamp(artifact.timestamp)} •{' '}
+              {formatBytes(artifact.size)}
+            </div>
+
+            <div className="memori-artifact-handler-meta">
+              <span className="memori-artifact-handler-type">
+                {artifact.typeInfo?.name || 'Text'}
+              </span>
+              {customTitle && (
+                <span className="memori-artifact-handler-custom-title">
+                  {customTitle}
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="memori-artifact-handler-actions">
+            <button
+              className="memori-artifact-handler-toggle"
+              title={t('artifact.open', 'Open artifact') || 'Open artifact'}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <path d="M9 9l6 6m0-6l-6 6" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // If no artifacts to display, return null
+  return null;
+};
+
+export default ArtifactHandler;

package/src/components/MemoriArtifactSystem/components/ArtifactHistory/ArtifactHistory.css

@@ -0,0 +1,319 @@
+/**
+ * ArtifactHistory CSS Styles
+ * Following the project's design system and CSS patterns
+ */
+
+.memori-artifact-history {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+}
+
+/* Header */
+.memori-artifact-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--memori-button-border-color, #e9ecef);
+  margin-bottom: 1rem;
+}
+
+.memori-artifact-history-title {
+  margin: 0;
+  color: var(--memori-text-color, #333);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.memori-artifact-history-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.memori-artifact-history-clear-btn {
+  padding: 0.375rem;
+  border-radius: var(--memori-border-radius, 4px);
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.memori-artifact-history-clear-btn:hover {
+  border-color: var(--memori-error-color, #ff4d4f);
+  background: var(--memori-error-color, #ff4d4f);
+  color: white;
+}
+
+/* Empty State */
+.memori-artifact-history-empty {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+  color: var(--memori-text-color, #666);
+  text-align: center;
+}
+
+.memori-artifact-history-empty-icon {
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  opacity: 0.5;
+}
+
+.memori-artifact-history-empty-text {
+  margin: 0 0 0.5rem;
+  color: var(--memori-text-color, #333);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.memori-artifact-history-empty-subtext {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+/* History List */
+.memori-artifact-history-list {
+  flex: 1;
+  padding-right: 0.25rem;
+  overflow-y: auto;
+}
+
+.memori-artifact-history-item {
+  border: 1px solid var(--memori-button-border-color, #e9ecef);
+  border-radius: var(--memori-border-radius, 8px);
+  margin-bottom: 0.75rem;
+  animation: fadeInUp 0.4s ease forwards;
+  background: var(--memori-chat-bubble-bg, #fff);
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+}
+
+.memori-artifact-history-item:hover {
+  border-color: var(--memori-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-history-item--active {
+  border-color: var(--memori-primary);
+  background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
+  box-shadow: 0 4px 12px rgba(130, 70, 175, 0.3);
+  color: var(--memori-primary-text, #fff);
+}
+
+.memori-artifact-history-item--active:hover {
+  box-shadow: 0 6px 16px rgba(130, 70, 175, 0.4);
+  transform: translateY(-2px);
+}
+
+.memori-artifact-history-item-content {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  gap: 0.75rem;
+}
+
+.memori-artifact-history-item-icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.memori-artifact-history-item-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-artifact-history-item-title {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item-subtitle {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  color: inherit;
+  font-size: 0.75rem;
+  opacity: 0.7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.625rem;
+  gap: 0.5rem;
+  opacity: 0.6;
+}
+
+.memori-artifact-history-item-type {
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+.memori-artifact-history-item-custom-title {
+  overflow: hidden;
+  max-width: 100px;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.1);
+  font-style: italic;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-type,
+.memori-artifact-history-item--active .memori-artifact-history-item-custom-title {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.memori-artifact-history-item-actions {
+  flex-shrink: 0;
+}
+
+.memori-artifact-history-item-toggle {
+  padding: 0.375rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--memori-border-radius, 4px);
+  background: rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+
+.memori-artifact-history-item-toggle:hover {
+  background: rgba(0, 0, 0, 0.1);
+  transform: scale(1.05);
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-toggle {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.2);
+  color: inherit;
+}
+
+.memori-artifact-history-item--active .memori-artifact-history-item-toggle:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* More Items Indicator */
+.memori-artifact-history-more {
+  padding: 1rem;
+  border-top: 1px solid var(--memori-button-border-color, #e9ecef);
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.memori-artifact-history-more-text {
+  margin: 0;
+  color: var(--memori-text-color, #666);
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Scrollbar Styling */
+.memori-artifact-history-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: var(--memori-button-border-color, #e9ecef);
+}
+
+.memori-artifact-history-list::-webkit-scrollbar-thumb:hover {
+  background: var(--memori-text-color, #999);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .memori-artifact-history-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .memori-artifact-history-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .memori-artifact-history-item-content {
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .memori-artifact-history-item-icon {
+    font-size: 1.25rem;
+  }
+
+  .memori-artifact-history-item-title {
+    font-size: 0.8125rem;
+  }
+
+  .memori-artifact-history-item-subtitle {
+    font-size: 0.6875rem;
+  }
+
+  .memori-artifact-history-item-meta {
+    font-size: 0.5625rem;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .memori-artifact-history-item {
+    border-color: var(--memori-button-border-color, #404040);
+    background: var(--memori-chat-bubble-bg, #1a1a1a);
+  }
+
+  .memori-artifact-history-item:hover {
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-history-item-type,
+  .memori-artifact-history-item-custom-title {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .memori-artifact-history-item-toggle {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .memori-artifact-history-item-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}