@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.23

package/src/styles.css

@@ -1,8 +1,8 @@
 /* ==========================================================================
    MEMORI REACT – FOGLIO DI STILE GLOBALE
    ========================================================================== */
-/* Layer order: theme (defaults) < integration (integrationConfig overrides) */
-@layer theme, integration;
+/* Layer order matches @memori.ai/ui: theme < components < host overrides */
+@layer memori.theme, memori.components, memori.overrides;
 
 /* --- 1. Design system esterno (variabili, reset, token) ---
    NOTE: the bundler-style specifier below is intentional for dev/Storybook.
@@ -113,6 +113,11 @@
     flex-direction: column;
 }
 
+/*
+ * Nested dialogs: use Modal stacking="stacked" from @memori.ai/ui (z-index 1600).
+ * Do not reintroduce max int z-index overrides here.
+ */
+
 .memori.memori-widget.memori-layout-chat > .memori-widget__surface,
 .memori.memori-widget.memori-layout-fullpage > .memori-widget__surface,
 .memori.memori-widget.memori-layout-zoomed_full_body > .memori-widget__surface {
@@ -122,6 +127,7 @@
 /* After inserting .memori-widget__surface, Spin is no longer a direct child of
    .memori-widget — keep it a stretching flex column so fullpage/chat fill the viewport. */
 .memori-widget > .memori-widget__surface > .memori-spin {
+    position: relative;
     display: flex !important;
     overflow: hidden;
     width: 100%;
@@ -142,8 +148,8 @@
     flex-shrink: 0;
 }
 
-/* --- 6. Base: brand e tema di default (in layer così integration può sovrascrivere --memori-primary) --- */
-@layer theme {
+/* --- 6. Base: brand e tema di default (in layer così overrides possono sovrascrivere --memori-primary) --- */
+@layer memori.overrides {
     :root,
     body,
     memori-client,
@@ -172,15 +178,14 @@
     background-color: var(--memori-secondary-background);
 }
 
-/* --- 8. Dark mode: override quando c’è data-theme="dark" (in layer theme) --- */
-@layer theme {
+/* --- 8. Dark mode: surface contrast only — keep --memori-primary on the brand hook --- */
+@layer memori.overrides {
     [data-theme='dark'] memori-client,
     [data-theme='dark'] memori-client #root,
     [data-theme='dark'] #headlessui-portal-root,
     [data-theme='dark'] .memori-widget,
     memori-client[data-theme='dark'],
     .memori-widget[data-theme='dark'] {
-        --memori-primary: var(--memori-primary-hover);
         /* Align with @memori.ai/ui: contrast = ink, inverse = surface */
         --memori-surface-contrast: #fff;
         --memori-surface-contrast-inverse: #000;
@@ -200,26 +205,7 @@
     );
 } */
 
-/* --- 10. HIDDEN_CHAT / WEBSITE_ASSISTANT tooltip labels ---
- * Both layouts park their UI in position:fixed children, so .memori-widget
- * (MemoriUIProvider portal root) often collapses to a near-zero in-flow box.
- * Base UI tooltips position with position:absolute inside that root, so the
- * popup shrink-to-fits to a tiny width and overflow-wrap:anywhere (from
- * @memori.ai/ui) stacks each letter vertically. Force content-sized popups. */
-.memori-widget.memori-layout-hidden_chat .memori-tooltip__popup,
-.memori-widget.memori-layout-website_assistant .memori-tooltip__popup {
-    width: max-content;
-    max-width: min(20rem, calc(100vw - 2rem));
-    overflow-wrap: break-word;
-    text-orientation: mixed;
-    word-break: normal;
-    writing-mode: horizontal-tb;
-}
-
-.memori-widget.memori-layout-hidden_chat .memori-tooltip__surface,
-.memori-widget.memori-layout-website_assistant .memori-tooltip__surface {
-    max-width: none;
-}
+/* Tooltip width/wrap is fixed in @memori.ai/ui 1.17 — no consumer patch. */
 
 /* --- 11. Utility responsive --- */
 @media (max-width: 768px) {

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '9.0.0-alpha.21';
+export const version = '9.0.0-alpha.23';

package/src/components/ChatTextArea/ChatTextArea.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ChatTextArea, { Props } from './ChatTextArea';
-import I18nWrapper from '../../I18nWrapper';
-import './ChatTextArea.css';
-
-const meta: Meta = {
-  title: 'Widget/Chat textarea',
-  component: ChatTextArea,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [userMessage, setUserMessage] = React.useState(args.value);
-
-  return (
-    <I18nWrapper>
-      <div style={{ paddingTop: '10rem' }}>
-        <ChatTextArea {...args} value={userMessage} onChange={setUserMessage} />
-      </div>
-    </I18nWrapper>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  value: '',
-  onChange: () => {},
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  value: 'Suspendisse sit amet volutpat velit.',
-  onChange: () => {},
-};
-
-export const WithLongText = Template.bind({});
-WithLongText.args = {
-  value:
-    'Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.',
-  onChange: () => {},
-};

package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ModelViewer, { Props } from './ModelViewer';
-import './ModelViewer.css';
-
-const meta: Meta = {
-  title: 'Custom GLB Avatar',
-  component: ModelViewer,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    poster: {
-      control: {
-        type: 'text',
-      },
-    },
-    alt: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [hydrated, setHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setHydrated(true);
-  }, []);
-
-  return hydrated ? (
-    <ModelViewer
-      {...args}
-      src={args.src + `#${new Date(Date.now()).toISOString()}`}
-      key={Date.now()}
-    />
-  ) : (
-    <></>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  alt: '',
-  src: 'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-  poster:
-    'https://assets.memori.ai/api/v2/asset/596382ce-381a-4a66-9740-c7adc3bfa4a8.png',
-};

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import DateSelector, { Props } from './DateSelector';
-
-import './DateSelector.css';
-
-const meta: Meta = {
-  title: 'DateSelector',
-  component: DateSelector,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <DateSelector {...args} />
-  </I18nWrapper>
-);
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const MinAge14 = Template.bind({});
-MinAge14.args = {
-  minAge: 14,
-  onChange: console.log,
-  disabled: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  defaultDate: '1990-06-15',
-  minAge: 18,
-  onChange: () => {},
-  disabled: true,
-};

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -1,63 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import FilePreview from './FilePreview';
-
-import './FilePreview.css';
-
-const meta: Meta = {
-  title: 'Widget/File Preview',
-  component: FilePreview,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-
-type Props = {
-  onUpload: (text: string) => void;
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-    const [previewFiles, setPreviewFiles] = useState<{ name: string; id: string; content: string; }[]>([]);
-
-  return (
-    <I18nWrapper>
-      <div
-        style={{
-          minHeight: '200px',
-          display: 'flex',
-          alignItems: 'flex-end',
-        }}
-      >
-        <FilePreview {...args} previewFiles={previewFiles} removeFile={
-            (id: string) => {
-                setPreviewFiles(previewFiles.filter(file => file.id !== id));
-            }
-        } />
-      </div>
-    </I18nWrapper>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  onUpload: () => {},
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  onUpload: () => {},
-  disabled: true,
-};

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

@@ -1,265 +0,0 @@
-import React, { useEffect } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Message } from '@memori.ai/memori-api-client/dist/types';
-import { AlertProvider } from '@memori.ai/ui';
-import I18nWrapper from '../../I18nWrapper';
-import {
-  ArtifactProvider,
-  useArtifact,
-} from './context/ArtifactContext';
-import ArtifactDrawer from './components/ArtifactDrawer/ArtifactDrawer';
-import ArtifactHandler from './components/ArtifactHandler/ArtifactHandler';
-import { ArtifactData } from './types/artifact.types';
-
-const HTML_ARTIFACT_CONTENT = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Product Dashboard</title>
-  <style>
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      padding: 24px;
-      font-family: system-ui, -apple-system, sans-serif;
-      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-      color: #0f172a;
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 16px;
-    }
-    .card {
-      background: #fff;
-      border-radius: 12px;
-      padding: 20px;
-      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
-    }
-    .metric {
-      font-size: 28px;
-      font-weight: 700;
-      margin: 8px 0 0;
-    }
-    .label {
-      color: #64748b;
-      font-size: 13px;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-    h1 { margin-top: 0; font-size: 22px; }
-  </style>
-</head>
-<body>
-  <h1>Product Dashboard</h1>
-  <p>Interactive HTML artifact shown in the side drawer panel.</p>
-  <div class="grid">
-    <div class="card">
-      <div class="label">Active users</div>
-      <div class="metric">12,480</div>
-    </div>
-    <div class="card">
-      <div class="label">Conversion</div>
-      <div class="metric">4.8%</div>
-    </div>
-    <div class="card">
-      <div class="label">Revenue</div>
-      <div class="metric">€84,200</div>
-    </div>
-    <div class="card">
-      <div class="label">Support tickets</div>
-      <div class="metric">37</div>
-    </div>
-  </div>
-</body>
-</html>`;
-
-const MARKDOWN_ARTIFACT_CONTENT = `# Weekly Report
-
-This artifact expands **inline in the chat log** instead of opening the side drawer.
-
-## Highlights
-
-| Metric | Value | Change |
-|--------|-------|--------|
-| Sessions | 18,420 | +12% |
-| Avg. response time | 1.4s | -8% |
-| Satisfaction | 4.7/5 | +0.2 |
-
-## Next steps
-
-- Review artifact preview and code tabs
-- Try copy, download, and print actions
-- Collapse the panel with the artifact handler button
-
-\`\`\`typescript
-export function summarize(report: WeeklyReport) {
-  return report.highlights.map(item => item.title).join(', ');
-}
-\`\`\`
-`;
-
-const wrapArtifactTag = (
-  content: string,
-  mimeType: string,
-  title: string
-): string =>
-  `<output class="memori-artifact" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
-
-const createArtifactMessage = (
-  content: string,
-  mimeType: string,
-  title: string,
-  timestamp: string
-): Message => ({
-  text: wrapArtifactTag(content, mimeType, title),
-  fromUser: false,
-  timestamp,
-  generatedByAI: true,
-});
-
-const htmlArtifactMessage = createArtifactMessage(
-  HTML_ARTIFACT_CONTENT,
-  'html',
-  'Product Dashboard',
-  '2026-05-27T10:00:00.000Z'
-);
-
-const markdownArtifactMessage = createArtifactMessage(
-  MARKDOWN_ARTIFACT_CONTENT,
-  'markdown',
-  'Weekly Report',
-  '2026-05-27T11:00:00.000Z'
-);
-
-const StoryProviders: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => (
-  <I18nWrapper>
-    <AlertProvider defaultDuration={5000}>
-      <ArtifactProvider>{children}</ArtifactProvider>
-    </AlertProvider>
-  </I18nWrapper>
-);
-
-const OpenArtifactOnMount: React.FC<{
-  artifact: ArtifactData;
-  isChatLogPanel?: boolean;
-}> = ({ artifact, isChatLogPanel = false }) => {
-  const { openArtifact } = useArtifact();
-
-  useEffect(() => {
-    openArtifact(artifact, { isChatLogPanel });
-  }, [artifact, isChatLogPanel, openArtifact]);
-
-  return null;
-};
-
-const DrawerModeDemo: React.FC = () => (
-  <div
-    style={{
-      display: 'flex',
-      height: '100vh',
-      background: 'var(--memori-main-background)',
-    }}
-  >
-    <div
-      style={{
-        flex: 1,
-        minWidth: 0,
-        padding: '24px',
-        borderRight: '1px solid var(--memori-border-primary)',
-        overflow: 'auto',
-      }}
-    >
-      <p style={{ marginTop: 0, color: 'var(--memori-text-color)' }}>
-        Side-drawer mode: the artifact opens in a dedicated layout column while
-        the chat stays visible on the left.
-      </p>
-      <ArtifactHandler
-        isChatlogPanel={false}
-        message={htmlArtifactMessage}
-      />
-    </div>
-    <div style={{ width: '55%', minWidth: 360 }}>
-      <ArtifactDrawer isLayoutColumn />
-    </div>
-  </div>
-);
-
-const ChatLogModeDemo: React.FC = () => {
-  const markdownArtifact: ArtifactData = {
-    id: 'storybook-chatlog-artifact',
-    content: MARKDOWN_ARTIFACT_CONTENT,
-    mimeType: 'markdown',
-    title: 'Weekly Report',
-    timestamp: new Date('2026-05-27T11:00:00.000Z'),
-    size: MARKDOWN_ARTIFACT_CONTENT.length,
-  };
-
-  return (
-    <div
-      style={{
-        maxWidth: 760,
-        margin: '0 auto',
-        padding: '24px',
-        background: 'var(--memori-main-background)',
-        minHeight: '100vh',
-      }}
-    >
-      <p style={{ marginTop: 0, color: 'var(--memori-text-color)' }}>
-        Chatlog mode: the artifact expands inline below the handler button inside
-        the conversation.
-      </p>
-      <OpenArtifactOnMount artifact={markdownArtifact} isChatLogPanel />
-      <ArtifactHandler
-        isChatlogPanel
-        message={markdownArtifactMessage}
-      />
-    </div>
-  );
-};
-
-const meta: Meta = {
-  title: 'Artifact System/ArtifactDrawer',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const DrawerMode: Story = {
-  render: () => (
-    <StoryProviders>
-      <DrawerModeDemo />
-    </StoryProviders>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'HTML artifact opened in side-drawer mode. The handler auto-opens the artifact in the layout column, matching FullPage and Chat layouts.',
-      },
-    },
-  },
-};
-
-export const ChatLogMode: Story = {
-  render: () => (
-    <StoryProviders>
-      <ChatLogModeDemo />
-    </StoryProviders>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Markdown artifact shown inline in chatlog mode. The drawer renders below the artifact handler inside the message flow.',
-      },
-    },
-  },
-};