@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -1,142 +0,0 @@
-.memori-chat-inputs--mic {
-    z-index: 1;
-    margin-left: 0.33rem;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-touch-callout: none;
-    -webkit-user-drag: none;
-    -khtml-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.memori-chat-inputs--mic svg {
-    color: var(--memori-primary, #fff);
-    font-size: 1em;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.memori-chat-inputs--mic:hover,
-.memori-chat-inputs--mic:active,
-.memori-chat-inputs--mic:focus {
-    border-color: var(--memori-primary) !important;
-    color: var(--memori-primary, #fff);
-}
-
-.memori-chat-inputs--mic:active,
-.memori-chat-inputs--mic:focus {
-    box-shadow: 0 0.2rem 0.33rem var(--memori-primary) !important;
-}
-
-/* Enhanced touch feedback for mobile */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic:active {
-        transform: scale(0.95);
-        transition: transform 0.1s ease;
-    }
-
-    .memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active {
-        background-color: rgba(0, 0, 0, 0.1);
-    }
-}
-
-/* Prevent double-tap zoom on mobile - already defined above */
-
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):active,
-.memori-chat-inputs--mic:not(.memori-chat-inputs--mic--listening):focus {
-    color: var(--memori-primary) !important;
-}
-
-@keyframes micBtnActivePulse {
-    0% {
-        transform: scale(1.25);
-    }
-
-    25% {
-        transform: scale(1.4);
-    }
-
-    50% {
-        transform: scale(1.3);
-    }
-
-    75% {
-        transform: scale(1.4);
-    }
-
-    100% {
-        transform: scale(1.2);
-    }
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-    position: relative;
-    color: red !important;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -webkit-touch-callout: none;
-    transform: scale(1.5);
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: micBtnActivePulse 2s infinite;
-    background: var(--memori-primary);
-    content: '';
-    opacity: 0.2;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-    top: 5%;
-    left: 5%;
-    width: 90%;
-    height: 90%;
-    animation-delay: 0.3s;
-    opacity: 0.3;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:active,
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening:focus {
-    border-color: red !important;
-}
-
-.memori-chat-inputs--mic.memori-chat-inputs--mic--listening svg {
-    color: red !important;
-}
-
-.memori-chat-inputs--mic-tooltip.memori-tooltip--align-topLeft .memori-tooltip--content {
-    top: -50%;
-    right: 115%;
-    width: 100%;
-    height: 100%;
-    min-height: 35px;
-    background: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    font-size: 0.85em;
-    opacity: 0;
-    text-align: center;
-    /* left: 0; */
-    transform: translateY(-100%);
-}
-
-/* Mobile-specific improvements for listening state */
-@media (hover: none) and (pointer: coarse) {
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening {
-        transform: scale(1.3);
-    }
-
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::before,
-    .memori-chat-inputs--mic.memori-chat-inputs--mic--listening::after {
-        animation-duration: 1.5s;
-    }
-}

package/src/components/MicrophoneButton/MicrophoneButton.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import MicrophoneButton, { Props } from './MicrophoneButton';
-
-import './MicrophoneButton.css';
-
-const meta: Meta = {
-  title: 'Widget/Microphone Button',
-  component: MicrophoneButton,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [listening, setListening] = React.useState(args.listening);
-  const startListening = () => setListening(true);
-  const stopListening = () => setListening(false);
-
-  return (
-    <I18nWrapper>
-      <div style={{ paddingTop: '10rem', textAlign: 'right' }}>
-        <MicrophoneButton
-          {...args}
-          listening={listening}
-          startListening={startListening}
-          stopListening={stopListening}
-        />
-      </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 = {
-  listening: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-};

package/src/components/MicrophoneButton/MicrophoneButton.tsx

@@ -1,128 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Props as ChatInputProps } from '../ChatInputs/ChatInputs';
-import Microphone from '../icons/Microphone';
-import Button from '../ui/Button';
-import Tooltip from '../ui/Tooltip';
-import cx from 'classnames';
-import { useTranslation } from 'react-i18next';
-
-export interface Props {
-  listening?: ChatInputProps['listening'];
-  stopAudio: ChatInputProps['stopAudio'];
-  startListening: ChatInputProps['startListening'];
-  stopListening: ChatInputProps['stopListening'];
-}
-
-const MicrophoneButton = ({
-  listening,
-  stopAudio,
-  startListening,
-  stopListening,
-}: Props) => {
-  const { t } = useTranslation();
-  const [micBtnTooltip, setMicBtnTooltip] = useState<string | undefined>();
-
-  const intervalRef = useRef<any>(null);
-
-  const startHold = (
-    e:
-      | React.TouchEvent<HTMLButtonElement>
-      | React.MouseEvent<Element, MouseEvent>
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setMicBtnTooltip(t('write_and_speak.holdToSpeak') || 'Hold to record');
-
-    if (intervalRef.current) return;
-    intervalRef.current = setTimeout(() => {
-      stopAudio();
-      setMicBtnTooltip(
-        t('write_and_speak.releaseToEndListening') || 'Release to end listening'
-      );
-      startListening();
-    }, 300);
-  };
-
-  const stopHold = (e?: React.MouseEvent | React.TouchEvent) => {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-
-    if (intervalRef.current) {
-      clearTimeout(intervalRef.current);
-      intervalRef.current = null;
-    }
-
-    stopListening();
-    setMicBtnTooltip(undefined);
-  };
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleTouchStart = (
-    e:
-      | React.TouchEvent<HTMLButtonElement>
-      | React.MouseEvent<Element, MouseEvent>
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    startHold(e);
-  };
-
-  const handleTouchEnd = (
-    e:
-      | React.TouchEvent<HTMLButtonElement>
-      | React.MouseEvent<Element, MouseEvent>
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-    stopHold(e);
-  };
-
-  useEffect(() => {
-    return () => stopHold();
-  }, []);
-
-  return (
-    <Tooltip
-      visible={!!micBtnTooltip}
-      className="memori-chat-inputs--mic-tooltip"
-      content={
-        <span>
-          {micBtnTooltip ||
-            t('write_and_speak.pressAndHoldToSpeak') ||
-            'Press and hold to speak'}
-        </span>
-      }
-      align="topLeft"
-    >
-      <div onContextMenu={handleContextMenu}>
-        <Button
-          primary
-          className={cx('memori-chat-inputs--mic', {
-            'memori-chat-inputs--mic--listening': listening,
-          })}
-          title={
-            listening
-              ? t('write_and_speak.micButtonPopoverListening') || 'Listening'
-              : t('write_and_speak.micButtonPopover') || 'Start listening'
-          }
-          onMouseDown={startHold}
-          onTouchStart={handleTouchStart}
-          onMouseUp={stopHold}
-          onTouchEnd={handleTouchEnd}
-          onMouseLeave={stopHold}
-          shape="circle"
-          icon={<Microphone />}
-        />
-      </div>
-    </Tooltip>
-  );
-};
-
-export default MicrophoneButton;

package/src/components/PositionDrawer/PositionDrawer.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import PositionDrawer, { Props } from './PositionDrawer';
-import { Venue } from '@memori.ai/memori-api-client/dist/types';
-import { venue, memori } from '../../mocks/data';
-
-const meta: Meta = {
-  title: 'Widget/PositionDrawer',
-  component: PositionDrawer,
-  argTypes: {
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [venue, setVenue] = React.useState<Venue | undefined>(args.venue);
-
-  return (
-    <I18nWrapper>
-      <PositionDrawer
-        {...args}
-        memori={memori}
-        venue={venue}
-        setVenue={setVenue}
-      />
-    </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 = {
-  open: true,
-};
-
-export const WithVenue = Template.bind({});
-WithVenue.args = {
-  open: true,
-  venue,
-};

package/src/components/PositionDrawer/PositionDrawer.test.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import PositionDrawer from './PositionDrawer';
-import { venue, memori } from '../../mocks/data';
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-it('renders PositionDrawer unchanged', () => {
-  const { container } = render(
-    <PositionDrawer
-      memori={memori}
-      open={true}
-      onClose={jest.fn()}
-      setVenue={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders VenueWidget with venue set', () => {
-  const { container } = render(
-    <PositionDrawer
-      memori={memori}
-      open={true}
-      onClose={jest.fn()}
-      venue={venue}
-      setVenue={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/PositionDrawer/PositionDrawer.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Memori, Venue } from '@memori.ai/memori-api-client/dist/types';
-import Drawer from '../ui/Drawer';
-import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
-import VenueWidget from '../VenueWidget/VenueWidget';
-
-export interface Props {
-  memori: Memori;
-  open: boolean;
-  onClose: (venue?: Venue) => void;
-  venue?: Venue;
-  setVenue: (venue: Venue) => void;
-  /** Optional class for the drawer root (e.g. for z-index when layout is WEBSITE_ASSISTANT). */
-  drawerClassName?: string;
-}
-
-const PositionDrawer = ({
-  memori,
-  open,
-  onClose,
-  venue,
-  setVenue,
-  drawerClassName,
-}: Props) => {
-  const { t } = useTranslation();
-
-  return (
-    <Drawer
-      className={cx('memori-position-drawer', drawerClassName)}
-      open={open}
-      onClose={() => onClose(venue)}
-      title={t('widget.position') || 'Position'}
-      animated={false}
-    >
-      <p>{t('write_and_speak.requirePositionHelp', { name: memori.name })}</p>
-      <VenueWidget
-        venue={venue}
-        setVenue={setVenue}
-        showUncertainty={false}
-        saveAndClose={venue => {
-          setVenue(venue);
-          onClose(venue);
-        }}
-      />
-    </Drawer>
-  );
-};
-
-export default PositionDrawer;

package/src/components/PositionDrawer/__snapshots__/PositionDrawer.test.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders PositionDrawer unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders VenueWidget with venue set 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;

package/src/components/PoweredBy/PoweredBy.css

@@ -1,47 +0,0 @@
-.memori--powered-by {
-    position: absolute;
-    z-index: 1000;
-    bottom: 1rem;
-    left: 0;
-    display: inline-flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: 0.25rem 1rem;
-    border-radius: 10px;
-    background-color: var(--memori-inner-bg, transparent);
-    box-shadow: var(--memori-button-box-shadow);
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-    font-size: 0.7em;
-    white-space: nowrap;
-}
-
-@media (max-width: 768px) {
-    .memori--powered-by {
-        top: 3.5rem;
-        bottom: auto;
-    }
-}
-
-.memori--powered-by img {
-    max-width: 2rem;
-    max-height: 2rem;
-    margin-right: 0.25rem;
-}
-
-.memori--powered-by p {
-    margin-top: 0;
-    margin-bottom: 0;
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-}
-
-.memori--powered-by a {
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-    text-decoration: underline;
-}
-
-.memori--powered-by a:hover,
-.memori--powered-by a:focus {
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
-    opacity: 0.8;
-    text-decoration: underline;
-}

package/src/components/PoweredBy/PoweredBy.stories.tsx

@@ -1,75 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import PoweredBy, { Props } from './PoweredBy';
-
-import './PoweredBy.css';
-
-const meta: Meta = {
-  title: 'Powered by',
-  component: PoweredBy,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => <PoweredBy {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  userLang: 'en',
-};
-
-export const Italian = Template.bind({});
-Italian.args = {
-  userLang: 'it',
-};
-
-export const MemoryTwin = Template.bind({});
-MemoryTwin.args = {
-  tenant: {
-    id: 'memorytwin',
-    theme: 'memorytwin',
-    config: {
-      name: 'MemoryTwin',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const TwinCreator = Template.bind({});
-TwinCreator.args = {
-  tenant: {
-    id: 'twincreator',
-    theme: 'twincreator',
-    config: {
-      name: 'twincreator',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const AIsuru = Template.bind({});
-AIsuru.args = {
-  tenant: {
-    id: 'AIsuru',
-    theme: 'aisuru',
-    config: {
-      name: 'AIsuru',
-      showNewUser: true,
-      requirePosition: false,
-      feedbackURL: '',
-    },
-  },
-};
-
-export const WithData = Template.bind({});
-WithData.args = {
-  integrationID: 'abc',
-  memoriHash: 'tenant-owner-memori',
-};

package/src/components/PoweredBy/PoweredBy.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import PoweredBy from './PoweredBy';
-
-it('renders PoweredBy unchanged', () => {
-  const { container } = render(<PoweredBy />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders PoweredBy with data unchanged', () => {
-  const { container } = render(
-    <PoweredBy integrationID="abc" memoriHash="tenant-owner-memori" />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/PoweredBy/PoweredBy.tsx

@@ -1,44 +0,0 @@
-import { Tenant } from '@memori.ai/memori-api-client/dist/types';
-
-export interface Props {
-  tenant?: Tenant;
-  userLang?: string;
-  integrationID?: string;
-  memoriHash?: string;
-}
-
-const PoweredBy = ({
-  tenant,
-  userLang = 'en',
-  integrationID,
-  memoriHash,
-}: Props) => {
-  const tenantId =
-    tenant?.theme === 'memorytwin'
-      ? 'memorytwin'
-      : tenant?.theme === 'twincreator'
-      ? 'twincreator'
-      : 'aisuru';
-
-  return (
-    <div className="memori--powered-by">
-      <img src={`https://aisuru.com/images/${tenantId}/logo.png`} alt="" />
-      <p>
-        <span className="sr-only">Powered by</span>
-        <a
-          href={`https://memori.ai/${
-            userLang?.toLowerCase() === 'it' ? 'it' : 'en'
-          }${integrationID ? `?integrationID=${integrationID}` : ''}${
-            memoriHash ? `${integrationID ? '&' : '?'}memori=${memoriHash}` : ''
-          }`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Memori.AI
-        </a>
-      </p>
-    </div>
-  );
-};
-
-export default PoweredBy;