@memori.ai/memori-react 9.0.0-alpha.20 → 9.0.0-alpha.22

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -21,7 +21,7 @@
  * Split-panel width for ArtifactDrawer.
  * Must stay in sync with HiddenChat's sidebar shift (`right: 55%`).
  * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
- * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ * size="md" maps to `--memori-modal-size-md`.
  */
 .memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
     --memori-modal-size-md: 55%;
@@ -634,15 +634,37 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     align-items: center;
     padding: 0 var(--memori-spacing-md);
     padding-bottom: var(--memori-spacing-sm);
-    border-bottom: 1px solid color-mix(in oklch, var(--memori-border-color) 75%, transparent);
     margin-top: var(--memori-spacing-lg);
     /* justify-content: space-between; */
     gap: var(--memori-spacing-sm);
 }
 
 .memori-artifact-drawer--close-icon {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
+}
+
+/* Keep close control the same size as other artifact header icons,
+   including Chat stories that do not wrap in .memori-widget. */
+.memori-artifact-drawer--close.memori-icon-button.memori-button {
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.memori-artifact-drawer--close .memori-icon-close,
+.memori-artifact-drawer--close svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Content */
@@ -698,8 +720,10 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 
 /* Match website_assistant / hidden_chat sidebar close — never outline primary fill */
 .memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button,
-.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled),
-.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:active:not(:disabled, .memori-button--disabled) {
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled),
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:active:not(:disabled, .memori-button--disabled) {
     border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
     background: transparent;
     box-shadow: none;
@@ -707,13 +731,14 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     transform: none;
 }
 
-.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
     background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
 }
 
 .memori-widget .memori-artifact-drawer--close .memori-icon-close {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 16px;
+    height: 16px;
     fill: none;
     stroke: currentColor;
 }
@@ -790,6 +815,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
         max-width: fit-content;
         flex: 0 0 auto;
         justify-content: flex-start;
+        /* border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent); */
     }
 
     .memori-artifact-drawer-top-right .memori-tab-switch__tab {
@@ -1045,11 +1071,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     border: 1px solid var(--memori-border-color);
     border-radius: var(--memori-radius-box);
     /* Soft contrast vs canvas — not pure white / not heavy fill */
-    background: color-mix(
-        in srgb,
-        var(--memori-text-color) 6%,
-        var(--memori-secondary-background)
-    ) !important;
+    background: color-mix(in srgb, var(--memori-text-color) 6%, var(--memori-secondary-background)) !important;
     box-shadow: var(--memori-shadow-lg);
     color: var(--memori-text-color);
 }

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -207,28 +207,31 @@ const ArtifactDrawer: React.FC<{
   /**
    * Handle external open action
    */
-  const handleOpenExternal = useCallback((artifact: ArtifactData) => {
-    try {
-      const mimeType = getMimeTypeString(artifact.mimeType);
-      const blob = new Blob([artifact.content], { type: mimeType });
-      const url = URL.createObjectURL(blob);
+  const handleOpenExternal = useCallback(
+    (artifact: ArtifactData) => {
+      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;
-      }
+        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);
-    } catch (error) {
-      console.error('External open failed:', error);
-    }
-  }, [getMimeTypeString]);
+        // Cleanup URL after a delay
+        setTimeout(() => {
+          URL.revokeObjectURL(url);
+        }, 60000);
+      } catch (error) {
+        console.error('External open failed:', error);
+      }
+    },
+    [getMimeTypeString]
+  );
 
   if (!state.currentArtifact) {
     return null;
@@ -267,9 +270,8 @@ const ArtifactDrawer: React.FC<{
                 aria-label={t('artifact.close') || 'Close'}
                 title={t('artifact.close') || 'Close'}
                 className="memori-artifact-drawer--close"
-              >
-                <X className="memori-icon-close" aria-hidden />
-              </IconButton>
+                icon={<X className="memori-icon-close" aria-hidden />}
+              />
             )}
           </>
         )}
@@ -381,6 +383,7 @@ const ArtifactDrawer: React.FC<{
                           timestamp: new Date(),
                           size: 0,
                           id: '',
+                          artifactId: '',
                         }
                       )
                     }
@@ -396,9 +399,8 @@ const ArtifactDrawer: React.FC<{
                 aria-label={t('artifact.close') || 'Close'}
                 title={t('artifact.close') || 'Close'}
                 className="memori-artifact-drawer--close"
-              >
-                <X className="memori-icon-close" aria-hidden />
-              </IconButton>
+                icon={<X className="memori-icon-close" aria-hidden />}
+              />
             </div>
           </>
         )}

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/components/TabSwitch.css

@@ -18,6 +18,13 @@
     background-color: transparent;
 }
 
+.memori-tabs[data-memori-variant='segmented'] .memori-tabs__tab {
+    flex: 1 1 0;
+    border: var(--memori-border, 1px) solid
+        color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box);
+}
+
 .memori-tab-switch__tab {
     min-width: 40px;
     flex: 0 0 auto;