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

package/src/components/icons/Upload.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-export const UploadIcon: React.FC<{ className?: string }> = ({ className }) => {
-  return (
-    <svg 
-      className={className} 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path 
-        d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-      <path 
-        d="M17 8L12 3L7 8" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-      <path 
-        d="M12 3V15" 
-        stroke="currentColor" 
-        strokeWidth="1.5" 
-        strokeLinecap="round" 
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};

package/src/components/icons/User.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-const User = ({ className, title }: { className?: string; title?: string }) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" />
-  </svg>
-);
-
-export default User;

package/src/components/icons/Warning.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Warning = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-    color="currentColor"
-  >
-    <path fill="currentColor" d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
-  </svg>
-);
-
-export default Warning;

package/src/components/icons/WhatsApp.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const WhatsApp = ({
-  className,
-  title,
-}: {
-  className?: string;
-  title?: string;
-}) => (
-  <svg
-    {...(!title ? { 'aria-hidden': 'true' } : {})}
-    focusable="false"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    className={className}
-    aria-label={title}
-  >
-    <path d="M713.5 599.9c-10.9-5.6-65.2-32.2-75.3-35.8-10.1-3.8-17.5-5.6-24.8 5.6-7.4 11.1-28.4 35.8-35 43.3-6.4 7.4-12.9 8.3-23.8 2.8-64.8-32.4-107.3-57.8-150-131.1-11.3-19.5 11.3-18.1 32.4-60.2 3.6-7.4 1.8-13.7-1-19.3-2.8-5.6-24.8-59.8-34-81.9-8.9-21.5-18.1-18.5-24.8-18.9-6.4-.4-13.7-.4-21.1-.4-7.4 0-19.3 2.8-29.4 13.7-10.1 11.1-38.6 37.8-38.6 92s39.5 106.7 44.9 114.1c5.6 7.4 77.7 118.6 188.4 166.5 70 30.2 97.4 32.8 132.4 27.6 21.3-3.2 65.2-26.6 74.3-52.5 9.1-25.8 9.1-47.9 6.4-52.5-2.7-4.9-10.1-7.7-21-13z"></path>
-    <path d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
-  </svg>
-);
-
-export default WhatsApp;

package/src/components/icons/icons.stories.css

@@ -1,5 +0,0 @@
-.showcase-icon {
-    width: 3rem;
-    height: 3rem;
-    font-size: 3rem;
-}

package/src/components/icons/icons.stories.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import './loading.css';
-import './icons.stories.css';
-
-interface Props {
-  iconName: string;
-}
-
-interface IconProps {
-  className?: string;
-  title?: string;
-}
-
-// Import all icons at module level
-const iconContext = (require as any).context('./', false, /\.tsx$/);
-const iconModules: { [key: string]: React.ComponentType<any> } = {};
-
-iconContext.keys().forEach((key: string) => {
-  const iconName = key.replace('./', '').replace('.tsx', '');
-  if (!iconName.includes('stories')) {
-    iconModules[iconName] = iconContext(key).default;
-  }
-});
-
-const IconShowcaseItem = ({ iconName, ...iconProps }: Props & IconProps) => {
-  const Icon = iconModules[iconName];
-  if (!Icon) return null;
-  return <Icon {...iconProps} className="showcase-icon" />;
-};
-
-const IconsShowcase = (iconProps: IconProps) => {
-  const iconNames = Object.keys(iconModules);
-  return (
-    <div
-      style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(7, 1fr)',
-        gridGap: '2rem',
-      }}
-    >
-      {iconNames.map(iconName => (
-        <div
-          key={iconName}
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          <IconShowcaseItem iconName={iconName} {...iconProps} />
-          <p>{iconName}</p>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const meta: Meta = {
-  title: 'Definitions/Icons',
-  component: IconsShowcase,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<IconProps> = args => <IconsShowcase {...args} />;
-
-// 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 Showcase = Template.bind({});
-
-Showcase.args = {};

package/src/components/icons/loading.css

@@ -1,14 +0,0 @@
-.memori-loading-icon {
-    display: inline-block;
-    animation: memori-loading 1s infinite linear;
-}
-
-@keyframes memori-loading {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/src/components/layouts/WebsiteAssistant.test.tsx

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react';
-import Memori from '../MemoriWidget/MemoriWidget';
-import { integration, memori, tenant } from '../../mocks/data';
-import I18nWrapper from '../../I18nWrapper';
-import { VisemeProvider } from '../../context/visemeContext';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-it('renders WEBSITE_ASSISTANT layout unchanged', () => {
-  const { container } = render(
-    <I18nWrapper>
-      <ArtifactProvider >
-      <VisemeProvider>
-        <Memori
-          showShare={true}
-        showSettings={true}
-        memori={memori}
-        tenant={tenant}
-        tenantID="aisuru.com"
-        integration={integration}
-          layout="WEBSITE_ASSISTANT"
-        />
-      </VisemeProvider>
-      </ArtifactProvider>
-    </I18nWrapper>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/layouts/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
-<div>
-  <div
-    class="memori memori-widget memori-layout-website_assistant memori-controls-bottom memori--avatar-readyplayerme memori--with-integration"
-    data-memori-engine-state="{}"
-    data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
-    data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
-    data-memori-name="Memori"
-    data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
-    style="height: 100vh;"
-  >
-    <div
-      class="memori-website_assistant--trigger"
-    >
-      <button
-        class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-website_assistant--trigger-button"
-        title="Espandi"
-      >
-        <div
-          class="memori-blob"
-        >
-          <figure>
-            <img
-              alt=""
-              role="presentation"
-              src="https://aisuru.com/images/aisuru/square_logo.png"
-            />
-          </figure>
-          <div
-            class="mainDiv"
-          />
-          <div
-            class="mainDiv"
-          />
-          <div
-            class="mainDiv"
-          />
-          <div
-            class="mainDiv"
-          />
-          <div
-            class="mainDiv"
-          />
-        </div>
-      </button>
-    </div>
-    <div
-      class="memori-website_assistant--collapsed"
-    />
-    <audio
-      id="memori-audio"
-      src="https://aisuru.com/intro.mp3"
-      style="display: none;"
-    />
-  </div>
-</div>
-`;

package/src/components/ui/Alert.css

@@ -1,93 +0,0 @@
-.memori-alert {
-    position: fixed;
-    z-index: 1000;
-    top: 20px;
-    right: 20px;
-    width: var(--memori-alert--width, 400px);
-  }
-  
-  .memori-alert--container {
-    display: flex;
-    align-items: flex-start;
-    padding: 16px;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    background-color: white;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  }
-  
-  .memori-alert--icon {
-    flex-shrink: 0;
-    margin-right: 12px;
-  }
-  
-  .memori-alert--content {
-    min-width: 0;
-    flex: 1;
-  }
-  
-  .memori-alert--title {
-    margin-bottom: 4px;
-    font-size: 16px;
-    font-weight: 600;
-  }
-  
-  .memori-alert--description {
-    color: rgb(107 114 128);
-    font-size: 14px;
-  }
-  
-  .memori-alert--actions {
-    display: flex;
-    align-items: center;
-    margin-left: 16px;
-  }
-  
-  .memori-alert--action {
-    margin-right: 8px;
-  }
-  
-  .memori-alert--close {
-    flex-shrink: 0;
-  }
-  
-  /* Alert types */
-  .memori-alert--success {
-    --alert-color: rgb(34 197 94);
-    --alert-bg: rgb(240 253 244);
-  }
-  
-  .memori-alert--warning {
-    --alert-color: rgb(234 179 8);
-    --alert-bg: rgb(254 252 232);
-  }
-  
-  .memori-alert--error {
-    --alert-color: rgb(239 68 68);
-    --alert-bg: rgb(254 242 242);
-  }
-  
-  .memori-alert--info {
-    --alert-color: rgb(59 130 246);
-    --alert-bg: rgb(239 246 255);
-  }
-  
-  .memori-alert--success .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--warning .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--error .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }
-  
-  .memori-alert--info .memori-alert--container {
-    border: 1px solid var(--alert-color);
-    background-color: var(--alert-bg);
-  }

package/src/components/ui/Alert.stories.tsx

@@ -1,137 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Alert, { Props } from './Alert';
-import Button from './Button';
-import './Alert.css';
-
-const meta: Meta = {
-  title: 'UI/Alert',
-  component: Alert,
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: ['success', 'warning', 'error', 'info']
-      }
-    },
-    title: {
-      control: {
-        type: 'text'
-      }
-    },
-    description: {
-      control: {
-        type: 'text'
-      }
-    },
-    open: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    closable: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    width: {
-      control: {
-        type: 'text'
-      }
-    }
-  },
-  parameters: {
-    controls: { expanded: true }
-  }
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open);
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Show Alert</Button>
-      <Alert
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-      />
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  open: false,
-  type: 'info',
-  title: 'Information',
-  description: 'This is an informative alert message.'
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  open: true,
-  type: 'success',
-  title: 'Success!',
-  description: 'Operation completed successfully.'
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  open: true,
-  type: 'warning',
-  title: 'Warning',
-  description: 'Please review this important warning message.'
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  open: true,
-  type: 'error',
-  title: 'Error',
-  description: 'An error occurred while processing your request.'
-};
-
-export const WithAction = Template.bind({});
-WithAction.args = {
-  open: true,
-  type: 'info',
-  title: 'Update Available',
-  description: 'A new version is available.',
-  action: <Button primary>Update Now</Button>
-};
-
-export const NonClosable = Template.bind({});
-NonClosable.args = {
-  open: true,
-  type: 'warning',
-  title: 'Important Notice',
-  description: 'This message cannot be dismissed.',
-  closable: false
-};
-
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  open: true,
-  type: 'info',
-  title: 'Custom Width',
-  description: 'This alert has a custom width.',
-  width: '500px'
-};
-
-export const WithoutDescription = Template.bind({});
-WithoutDescription.args = {
-  open: true,
-  type: 'success',
-  title: 'Operation Successful'
-};
-
-export const AutoDismiss = Template.bind({});
-AutoDismiss.args = {
-  open: true,
-  type: 'success',
-  title: 'Auto Dismiss',
-  description: 'This alert will dismiss automatically after 3 seconds.',
-  duration: 3000
-};

package/src/components/ui/Alert.test.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import Alert from './Alert';
-import Warning from '../icons/Warning';
-
-beforeEach(() => {
-  // Mock IntersectionObserver
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-
-  // Mock setTimeout/clearTimeout
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-
-describe('Alert Component', () => {
-  it('renders Alert unchanged', () => {
-    const { container } = render(
-      <Alert
-        open={false}
-        onClose={jest.fn()}
-        title="Test Alert"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('renders Alert open unchanged', () => {
-    const { container } = render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-      />
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('calls onClose when close button is clicked', () => {
-    const onClose = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-      />
-    );
-    
-    const closeButton = screen.getByTitle('close');
-    fireEvent.click(closeButton);
-    expect(onClose).toHaveBeenCalled();
-  });
-
-
-  it('auto-dismisses after duration', () => {
-    const onClose = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-        duration={3000}
-      />
-    );
-
-    act(() => {
-      jest.advanceTimersByTime(3000);
-    });
-
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('renders with custom width', () => {
-    const { container } = render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-        width="500px"
-      />
-    );
-    
-    const style = window.getComputedStyle(container.firstChild as Element);
-    expect(style.getPropertyValue('--memori-alert--width')).toBe('500px');
-  });
-
-  it('renders with action button', () => {
-    const actionClick = jest.fn();
-    render(
-      <Alert
-        open={true}
-        onClose={jest.fn()}
-        title="Test Alert"
-        action={<button onClick={actionClick}>Action</button>}
-      />
-    );
-    
-    const actionButton = screen.getByText('Action');
-    fireEvent.click(actionButton);
-    expect(actionClick).toHaveBeenCalled();
-  });
-
-  it('cleans up timer on unmount', () => {
-    const onClose = jest.fn();
-    const { unmount } = render(
-      <Alert
-        open={true}
-        onClose={onClose}
-        title="Test Alert"
-        duration={3000}
-      />
-    );
-
-    unmount();
-    act(() => {
-      jest.advanceTimersByTime(3000);
-    });
-
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});