@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.css

@@ -3,251 +3,281 @@
  * Following the project's design system and CSS patterns
  */
 
+/* Align width with ChatBubble when rendered in chat (same container + max-width) */
+.memori-artifact-handler-spacer {
+    width: 40px;
+    min-width: 40px;
+    flex-shrink: 0;
+    margin-right: var(--memori-spacing-sm);
+}
+
+button.memori-artifact-handler {
+    width: 100%;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+}
+
 .memori-artifact-handler {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  padding: 1.5rem;
-  border: 1px solid var(--memori-button-border-color, #e9ecef);
-  border-radius: var(--memori-border-radius, 12px);
-  margin: 0.75rem 0;
-  margin: 0.5rem;
-  animation: fadeInUp 0.5s ease forwards;
-  backdrop-filter: blur(4px);
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-  gap: 12px;
-  opacity: 0;
-  transform: translateY(10px);
-  transition: all 0.3s ease;
+    display: flex;
+    min-width: 300px;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    padding: 1.5rem;
+    border: var(--memori-border) solid var(--memori-border-color);
+    border-radius: var(--memori-radius-box);
+    animation: fadeInUp 0.5s ease forwards;
+    backdrop-filter: blur(4px);
+    background: var(--memori-secondary-background);
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
+    cursor: pointer;
+    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
+    opacity: 0;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+}
+
+.memori-artifact-handler-wrapper {
+    width: 100%;
+}
+
+.memori-artifact-handler-wrapper > .memori-artifact-handler {
+    width: 100%;
+    max-width: 100%;
 }
 
 .memori-artifact-handler:hover {
-  border-color: var(--memori-primary);
-  background: rgba(130, 70, 175, 0.05);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  transform: translateY(-2px);
+    border-color: var(--memori-primary);
+    /* background: #f8fafc; */
+    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); */
+    transform: translateY(-2px);
 }
 
 .memori-artifact-handler--active {
-  border-color: var(--memori-primary);
-  background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
-  box-shadow: 0 4px 16px rgba(130, 70, 175, 0.3);
-  color: var(--memori-primary-text, #fff);
+    border-color: var(--memori-primary);
+    background: linear-gradient(135deg, var(--memori-primary) 0%, #764ba2 100%);
+    box-shadow: 0 4px 16px rgba(130, 70, 175, 0.3);
+    color: var(--memori-primary-content);
 }
 
 .memori-artifact-handler--active:hover {
-  box-shadow: 0 6px 20px rgba(130, 70, 175, 0.4);
-  transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(130, 70, 175, 0.4);
+    transform: translateY(-2px);
 }
 
 .memori-artifact-handler-content {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  gap: 0.75rem;
+    display: flex;
+    align-items: center;
+    padding: var(--memori-spacing-lg);
+    gap: var(--memori-spacing-sm);
 }
 
 .memori-artifact-handler-icon {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  line-height: 1;
+    flex-shrink: 0;
+    font-size: var(--memori-text-size-heading-large);
+    line-height: 1;
+}
+
+.memori-artifact-handler-icon svg {
+    display: block;
+    width: 1em;
+    height: 1em;
+}
+
+.memori-artifact-handler-toggle svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 2;
+}
+
+/* Black SVG glyphs → white when widget is in dark theme (see styles.css [data-theme='dark']) */
+[data-theme='dark'] .memori-artifact-handler-icon svg {
+    filter: brightness(0) invert(1);
 }
 
 .memori-artifact-handler-info {
-  min-width: 0;
-  flex: 1;
+    min-width: 0;
+    flex: 1;
 }
 
 .memori-artifact-handler-action-icon {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  line-height: 1;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    font-size: var(--memori-text-size-heading-large);
+    line-height: 1;
 }
 
 .memori-artifact-handler-title {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  color: inherit;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.3;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    margin-bottom: var(--memori-spacing-xs);
+    color: inherit;
+    font-size: var(--memori-text-size-small);
+    font-weight: var(--memori-text-weight-semibold);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-artifact-handler-subtitle {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  color: inherit;
-  font-size: 0.75rem;
-  opacity: 0.7;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    margin-bottom: var(--memori-spacing-xs);
+    color: inherit;
+    font-size: 0.75rem;
+    opacity: 0.7;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-artifact-handler-meta {
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 0.625rem;
-  gap: 0.5rem;
-  opacity: 0.6;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 0.625rem;
+    gap: var(--memori-spacing-sm);
+    opacity: 0.6;
 }
 
 .memori-artifact-handler-type {
-  padding: 0.125rem 0.375rem;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.1);
-  color: inherit;
-  font-weight: 500;
-  letter-spacing: 0.025em;
-  text-transform: uppercase;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--memori-radius-box);
+    background: rgba(0, 0, 0, 0.1);
+    color: inherit;
+    font-weight: var(--memori-text-weight-medium);
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
 }
 
 .memori-artifact-handler-custom-title {
-  overflow: hidden;
-  max-width: 120px;
-  padding: 0.125rem 0.375rem;
-  border-radius: 10px;
-  background: rgba(0, 0, 0, 0.1);
-  color: inherit;
-  font-style: italic;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    max-width: 120px;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--memori-radius-box);
+    background: rgba(0, 0, 0, 0.1);
+    color: inherit;
+    font-style: italic;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-artifact-handler--active .memori-artifact-handler-type,
 .memori-artifact-handler--active .memori-artifact-handler-custom-title {
-  background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.2);
 }
 
 .memori-artifact-handler-actions {
-  flex-shrink: 0;
+    flex-shrink: 0;
 }
 
 .memori-artifact-handler-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.375rem;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: var(--memori-border-radius, 6px);
-  background: rgba(0, 0, 0, 0.05);
-  color: inherit;
-  cursor: pointer;
-  transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.375rem;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--memori-radius-box);
+    background: rgba(0, 0, 0, 0.05);
+    color: inherit;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
 
 .memori-artifact-handler-toggle:hover {
-  background: rgba(0, 0, 0, 0.1);
-  transform: scale(1.05);
+    background: rgba(0, 0, 0, 0.1);
+    transform: scale(1.05);
 }
 
 .memori-artifact-handler--active .memori-artifact-handler-toggle {
-  border-color: rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.2);
 }
 
 .memori-artifact-handler-toggle:focus {
-  outline: 2px solid var(--memori-primary);
-  outline-offset: 2px;
+    outline: 2px solid var(--memori-primary);
+    outline-offset: 2px;
 }
 
 .memori-artifact-handler-toggle:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
 
 .memori-artifact-handler--active .memori-artifact-handler-toggle:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.memori-artifact-handler-toggle svg {
-  width: 16px;
-  height: 16px;
-  stroke-width: 2;
+    background: rgba(255, 255, 255, 0.3);
 }
 
 /* Animation */
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .memori-artifact-handler {
-    margin: 0.5rem 0;
-  }
-
-  .memori-artifact-handler-content {
-    padding: 0.75rem;
-    gap: 0.5rem;
-  }
-
-  .memori-artifact-handler-icon {
-    font-size: 1.25rem;
-  }
-
-  .memori-artifact-handler-title {
-    font-size: 0.8125rem;
-  }
-
-  .memori-artifact-handler-subtitle {
-    font-size: 0.6875rem;
-  }
-
-  .memori-artifact-handler-meta {
-    font-size: 0.5625rem;
-  }
-
-  .memori-artifact-handler-custom-title {
-    max-width: 80px;
-  }
+    .memori-artifact-handler {
+        min-width: 0;
+        margin: 0.5rem 0;
+    }
+
+    .memori-artifact-handler-content {
+        padding: 0.75rem;
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori-artifact-handler-icon {
+        font-size: var(--memori-text-size-heading);
+    }
+
+    .memori-artifact-handler-title {
+        font-size: 0.8125rem;
+    }
+
+    .memori-artifact-handler-subtitle {
+        font-size: 0.6875rem;
+    }
+
+    .memori-artifact-handler-meta {
+        font-size: 0.5625rem;
+    }
+
+    .memori-artifact-handler-custom-title {
+        max-width: 80px;
+    }
 }
 
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
-  .memori-artifact-handler {
-    /* background: rgba(26, 26, 26, 0.95); */
-    border-color: var(--memori-button-border-color, #404040);
-  }
-
-  .memori-artifact-handler:hover {
-    background: rgba(130, 70, 175, 0.1);
-    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
-  }
-
-  .memori-artifact-handler-type,
-  .memori-artifact-handler-custom-title {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .memori-artifact-handler-toggle {
-    border-color: rgba(255, 255, 255, 0.1);
-    background: rgba(255, 255, 255, 0.05);
-  }
-
-  .memori-artifact-handler-toggle:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
+    .memori-artifact-handler {
+        /* background: rgba(26, 26, 26, 0.95); */
+        border-color: var(--memori-border-color);
+    }
+
+    .memori-artifact-handler-type,
+    .memori-artifact-handler-custom-title {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .memori-artifact-handler-toggle {
+        border-color: rgba(255, 255, 255, 0.1);
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .memori-artifact-handler-toggle:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
 }
 
 /* Focus States for Accessibility */
 .memori-artifact-handler:focus {
-  outline: 2px solid var(--memori-primary);
-  outline-offset: 2px;
+    outline: 2px solid var(--memori-primary);
+    outline-offset: 2px;
 }
 
 .memori-artifact-handler:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }

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

@@ -1,13 +1,23 @@
-import React, { useEffect, useState, useMemo, useCallback, memo } from 'react';
+import React, { useEffect, useMemo, useCallback, memo } from 'react';
 import { useArtifact } from '../../context/ArtifactContext';
 import { ArtifactData } from '../../types/artifact.types';
-import ChevronRight from '../../../icons/ChevronRight';
+import {
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronUp,
+} from 'lucide-react';
 import ArtifactDrawer from '../ArtifactDrawer/ArtifactDrawer';
-import ChevronDown from '../../../icons/ChevronDown';
-import ChevronLeft from '../../../icons/ChevronLeft';
-import ChevronUp from '../../../icons/ChevronUp';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
 import { stripReasoningTags } from '../../../../helpers/utils';
+import CssIcon from '../../../../icons/artifacts/cssIcon';
+import DocumentIcon from '../../../../icons/artifacts/DocumentIcon';
+import HtmlIcon from '../../../../icons/artifacts/HtmlIcon';
+import JavascriptIcon from '../../../../icons/artifacts/JavascriptIcon';
+import MarkdownIcon from '../../../../icons/artifacts/MarkdownIcon';
+import PythonIcon from '../../../../icons/artifacts/PythonIcon';
+import SvgIcon from '../../../../icons/artifacts/SvgIcon';
+import XmlIcon from '../../../../icons/artifacts/XmlIcon';
 
 // Event type for artifact creation
 type ArtifactCreatedEvent = CustomEvent<{
@@ -216,10 +226,14 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     [message.timestamp, message.fromUser]
   );
 
+  // Function to dispatch artifact created event
   const dispatchArtifactCreatedEvent = useCallback(
     (artifact: ArtifactData) => {
       const event: ArtifactCreatedEvent = new CustomEvent('artifactCreated', {
-        detail: { artifact, message },
+        detail: {
+          artifact,
+          message,
+        },
       });
       document.dispatchEvent(event);
     },
@@ -251,7 +265,10 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     artifacts.forEach(artifact => dispatchArtifactCreatedEvent(artifact));
 
     if (!isChatlogPanel) {
-      const timer = setTimeout(() => openArtifact(artifacts[0]), 100);
+      const timer = setTimeout(
+        () => openArtifact(artifacts[0], { isChatLogPanel: false }),
+        100
+      );
       return () => clearTimeout(timer);
     }
   }, [
@@ -268,23 +285,25 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
       if (state.isDrawerOpen && state.currentArtifact?.id === artifact.id) {
         closeArtifact();
       } else {
-        openArtifact(artifact);
+        openArtifact(artifact, { isChatLogPanel: isChatlogPanel });
       }
     },
     [state.isDrawerOpen, state.currentArtifact?.id, closeArtifact, openArtifact]
   );
 
-  const getIconForMimeType = useCallback((mimeType: string): string => {
-    if (mimeType.includes('html')) return '🌐';
-    if (mimeType.includes('markdown')) return '📝';
-    if (mimeType.includes('javascript') || mimeType.includes('typescript'))
-      return '📜';
-    if (mimeType.includes('python')) return '🐍';
-    if (mimeType.includes('json')) return '📊';
-    if (mimeType.includes('css')) return '🎨';
-    if (mimeType.includes('xml')) return '📋';
-    if (mimeType.includes('svg')) return '🖼️';
-    return '📄';
+  const getIconForMimeType = useCallback((mimeType: string): React.ReactElement => {
+    const m = mimeType.toLowerCase();
+    const iconProps = { 'aria-hidden': true as const };
+    if (m.includes('html')) return <HtmlIcon {...iconProps} />;
+    if (m.includes('markdown')) return <MarkdownIcon {...iconProps} />;
+    if (m.includes('javascript') || m.includes('typescript'))
+      return <JavascriptIcon {...iconProps} />;
+    if (m.includes('python')) return <PythonIcon {...iconProps} />;
+    if (m.includes('json')) return <DocumentIcon {...iconProps} />;
+    if (m.includes('css')) return <CssIcon {...iconProps} />;
+    if (m.includes('xml')) return <XmlIcon {...iconProps} />;
+    if (m.includes('svg')) return <SvgIcon {...iconProps} />;
+    return <DocumentIcon {...iconProps} />;
   }, []);
 
   if (artifacts.length === 0) return null;
@@ -297,16 +316,19 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
 
         return (
           <React.Fragment key={artifact.id}>
-            <div
+            <button
+              type="button"
               className={`memori-artifact-handler${
                 isSelected ? ' memori-artifact-handler--selected' : ''
               }`}
               onClick={() => handleArtifactClick(artifact)}
+              aria-pressed={isSelected}
+              aria-label={artifact.title}
               style={
                 isSelected
                   ? {
-                      border: '2px solid var(--memori-primary, #3b82f6)',
-                      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
+                      border: '2px solid var(--memori-border-primary)',
+                      // boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
                     }
                   : undefined
               }
@@ -324,28 +346,32 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
               </div>
               <div className="memori-artifact-handler-action">
                 {isChatlogPanel ? (
-                  isSelected ? (
+                  state.isDrawerOpen &&
+                  state.currentArtifact?.id === artifact.id ? (
                     <ChevronUp className="memori-artifact-handler-action-icon" />
                   ) : (
                     <ChevronDown className="memori-artifact-handler-action-icon" />
                   )
-                ) : isSelected ? (
+                ) : state.isDrawerOpen &&
+                  state.currentArtifact?.id === artifact.id ? (
                   <ChevronLeft className="memori-artifact-handler-action-icon" />
                 ) : (
                   <ChevronRight className="memori-artifact-handler-action-icon" />
                 )}
               </div>
-            </div>
+            </button>
 
             {/* Render ArtifactDrawer inline when in chatlog panel */}
-            {isSelected && <ArtifactDrawer isChatLogPanel={isChatlogPanel} />}
+            {state.isDrawerOpen &&
+              state.currentArtifact?.id === artifact.id && (
+                <ArtifactDrawer isChatLogPanel={isChatlogPanel} />
+              )}
           </React.Fragment>
         );
       })}
     </div>
   );
 };
-
 // ---------------------------------------------------------------------------
 // Memoised export
 // ---------------------------------------------------------------------------