@memori.ai/memori-react 8.15.0 → 8.16.0

package/src/helpers/constants.ts

@@ -65,13 +65,6 @@ export const allowedMediaTypes = [
 export const anonTag = '👤';
 
 export const prismSyntaxLangs = [
-  {
-    name: 'text',
-    lang: 'text',
-    mimeType: 'text/plain',
-    monacoLang: 'plaintext',
-    executable: true,
-  },
   {
     name: 'javascript/jsx',
     lang: 'jsx',

package/src/helpers/utils.ts

@@ -246,6 +246,10 @@ export const stripHTML = (text: string) => {
   return el.textContent || '';
 };
 
+/** Ensures all <a> tags in HTML open in a new tab (target="_blank" rel="noopener noreferrer"). */
+export const withLinksOpenInNewTab = (html: string): string =>
+  html.replace(/<a\s+/gi, '<a target="_blank" rel="noopener noreferrer" ');
+
 export const escapeHTML = (text: string) => {
   const el = document.createElement('textarea');
   el.textContent = text;

package/src/index.test.tsx

@@ -3,6 +3,14 @@ import { render } from '@testing-library/react';
 import { memori, tenant, integration } from './mocks/data';
 import Memori from './index';
 
+// Mock fetch for API calls
+globalThis.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+  })
+) as jest.Mock;
+
 // Mock matchMedia for tests
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

package/src/index.tsx

@@ -23,6 +23,8 @@ import { useTranslation } from 'react-i18next';
 import I18nWrapper from './I18nWrapper';
 import { ArtifactProvider } from './components/MemoriArtifactSystem/context/ArtifactContext';
 
+import { version } from './version';
+
 export interface Props {
   memoriName?: string | null;
   memoriID?: string | null;
@@ -257,9 +259,7 @@ const Memori: React.FC<Props> = ({
     const config = { attributes: true, childList: false, subtree: false };
     const callback: MutationCallback = (mutationList, _observer) => {
       for (const mutation of mutationList) {
-        if (
-          mutation.type === 'attributes'
-        ) {
+        if (mutation.type === 'attributes') {
           const target =
             mutation.target.nodeName === 'MEMORI-CLIENT'
               ? mutation.target
@@ -340,7 +340,12 @@ const Memori: React.FC<Props> = ({
           | undefined,
         showLogin: memori?.enableDeepThought,
         memoriLang: memori?.culture?.split('-')?.[0],
-        autoStart: layout === 'HIDDEN_CHAT',
+        autoStart:
+          layout === 'HIDDEN_CHAT'
+            ? true
+            : layout === 'WEBSITE_ASSISTANT'
+            ? false
+            : autoStart,
       }
     : {
         ...(tag && pin ? { personification: { tag, pin } } : {}),
@@ -362,7 +367,9 @@ const Memori: React.FC<Props> = ({
           initialQuestion ??
           (layoutIntegrationConfig.initialQuestion as string | undefined),
         autoStart:
-          autoStart !== undefined
+          layout === 'WEBSITE_ASSISTANT'
+            ? false
+            : autoStart !== undefined
             ? autoStart
             : layout === 'HIDDEN_CHAT'
             ? true
@@ -373,6 +380,49 @@ const Memori: React.FC<Props> = ({
         memoriLang: spokenLang ?? memori?.culture?.split('-')?.[0],
       };
 
+  const [pulseSent, setPulseSent] = useState(false);
+
+  const sendPulse = useCallback(() => {
+    if ((memori?.memoriID || memoriID) && !pulseSent) {
+      let origin = window?.location.origin;
+
+      if (
+        !origin ||
+        origin.includes('localhost') ||
+        origin.includes('memori-ai.github.io')
+      ) {
+        setPulseSent(true);
+        return;
+      }
+
+      setPulseSent(true);
+      fetch('https://pulse.aisuru.com/post', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          pulse: {
+            clientType: __WEBCOMPONENT__
+              ? 'memori-webcomponent'
+              : 'memori-react',
+            clientVersion: `v${version}`,
+            userAgent: navigator.userAgent,
+            language: navigator.language,
+            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            memoriID: memori?.memoriID ?? memoriID,
+            tenant: tenantID,
+            referrer: origin,
+          },
+        }),
+      });
+    }
+  }, [memori?.memoriID, memoriID, tenantID, __WEBCOMPONENT__, pulseSent]);
+
+  useEffect(() => {
+    sendPulse();
+  }, [sendPulse]);
+
   return (
     <I18nWrapper>
       <VisemeProvider>

package/src/styles.css

@@ -16,7 +16,6 @@
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
-@import url('./components/AttachmentLinkModal/AttachmentLinkModal.css');
 @import url('./components/Auth/Auth.css');
 @import url('./components/Avatar/Avatar.css');
 @import url('./components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css');
@@ -36,7 +35,6 @@
 @import url('./components/FeedbackButtons/FeedbackButtons.css');
 @import url('./components/Header/Header.css');
 @import url('./components/icons/loading.css');
-@import url('./components/MediaWidget/LinkItemWidget.css');
 @import url('./components/MediaWidget/MediaItemWidget.css');
 @import url('./components/MediaWidget/MediaWidget.css');
 @import url('./components/SendOnEnterMenu/SendOnEnterMenu.css');

package/src/version.ts

@@ -0,0 +1,2 @@
+// This file is auto-generated. Do not edit manually.
+export const version = '8.16.0';

package/src/components/AttachmentLinkModal/AttachmentLinkModal.css

@@ -1,68 +0,0 @@
-.attachment-link-modal,
-.attachment-link-modal * {
-    box-sizing: border-box;
-}
-
-.attachment-link-modal--label {
-    display: inline-block;
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-}
-
-.attachment-link-modal--centered {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.attachment-link-modal--input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-    background: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.attachment-link-modal--row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.attachment-link-modal--column {
-    display: flex;
-    width: 50%;
-    flex-direction: column;
-    padding: 0.5rem;
-    margin-right: 1rem;
-}
-
-.attachment-link-modal--column + .attachment-link-modal--column {
-    margin-right: 0;
-    margin-left: 1rem;
-}
-
-@media (max-width: 768px) {
-    .attachment-link-modal--row {
-        flex-direction: column;
-    }
-
-    .attachment-link-modal--column {
-        width: 100%;
-        margin-right: 0;
-        margin-bottom: 1rem;
-        margin-left: 0;
-    }
-    .attachment-link-modal--column + .attachment-link-modal--column {
-        margin-left: 0;
-    }
-}
-
-.attachment-link-modal a.memori-link-item--link {
-    display: inline-block;
-    width: 100%;
-    max-width: 400px;
-    margin: 0.5rem 1rem;
-}

package/src/components/AttachmentLinkModal/AttachmentLinkModal.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import AttachmentLinkModal, { Props } from './AttachmentLinkModal';
-
-import './AttachmentLinkModal.css';
-
-const meta: Meta = {
-  title: 'AttachmentLinkModal',
-  component: AttachmentLinkModal,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <AttachmentLinkModal {...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 = {
-  visible: true,
-  onCancel: () => {},
-  onOk: () => {},
-};

package/src/components/AttachmentLinkModal/AttachmentLinkModal.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AttachmentLinkModal from './AttachmentLinkModal';
-
-it('renders AttachmentLinkModal unchanged', () => {
-  const { container } = render(
-    <AttachmentLinkModal visible onCancel={() => {}} onOk={() => {}} />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/AttachmentLinkModal/AttachmentLinkModal.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { RenderLinkItem } from '../MediaWidget/LinkItemWidget';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-
-export interface Props {
-  visible: boolean;
-  onCancel?: () => void;
-  onOk: ({ url, title }: { url: string; title: string }) => void;
-  apiURL?: string;
-}
-
-const AttachmentLinkModal = ({ visible, onCancel, onOk }: Props) => {
-  const { t } = useTranslation();
-  const [newLink, setNewLink] = useState<{ url: string; title: string }>({
-    url: '',
-    title: '',
-  });
-
-  const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      if (newLink?.url.length === 0 || newLink?.title.length === 0) return;
-
-      let saveButton = document.getElementById(
-        'save-link-button'
-      ) as HTMLButtonElement | null;
-
-      if (saveButton) {
-        saveButton.click();
-      }
-    }
-  };
-
-  return (
-    <Modal
-      open={visible}
-      title={t('media.addLinkLabel')}
-      className="attachment-link-modal"
-      closable
-      width="100%"
-      widthMd="80%"
-      onClose={() => {
-        if (onCancel) onCancel();
-      }}
-      footer={
-        <>
-          <Button onClick={onCancel}>{t('cancel')}</Button>
-          <Button
-            id="save-link-button"
-            primary
-            onClick={() => {
-              if (newLink?.url.length === 0 || newLink?.title.length === 0)
-                return;
-              onOk(newLink);
-              setNewLink({ url: '', title: '' });
-            }}
-            disabled={newLink?.url.length === 0 || newLink?.title.length === 0}
-          >
-            {t('confirm')}
-          </Button>
-        </>
-      }
-    >
-      <div className="attachment-link-modal--row">
-        <div className="attachment-link-modal--column">
-          <label
-            htmlFor="new-link-url"
-            className="attachment-link-modal--label"
-          >
-            {t('media.linkKey')}:
-          </label>
-          <input
-            type="url"
-            className="attachment-link-modal--input              "
-            onChange={e => {
-              let value =
-                e.target.value.startsWith('http') || e.target.value.length === 0
-                  ? e.target.value
-                  : `https://${e.target.value}`;
-              setNewLink(l => ({ title: l?.title ?? '', url: value }));
-            }}
-            placeholder="https://memori.ai/..."
-            value={newLink?.url}
-            name="url"
-            onKeyDown={onKeyPress}
-          />
-          <label
-            htmlFor="new-link-title"
-            className="attachment-link-modal--label"
-          >
-            {t('media.linkValue')}:
-          </label>
-          <input
-            type="text"
-            className="attachment-link-modal--input              "
-            onChange={e =>
-              setNewLink(l => ({ url: l?.url ?? '', title: e.target.value }))
-            }
-            value={newLink?.title}
-            name="title"
-            onKeyDown={onKeyPress}
-          />
-        </div>
-        <div className="attachment-link-modal--column">
-          <div className="attachment-link-modal--centered">
-            <RenderLinkItem
-              key={newLink?.url ?? ''}
-              item={{
-                title: newLink?.title ?? '',
-                url: newLink?.url ?? '',
-                mediumID: '',
-                mimeType: 'text/html',
-              }}
-              onLinkPreviewInfo={data => {
-                if (!newLink?.title?.length) {
-                  setNewLink(l => ({
-                    ...l,
-                    title: data?.title ?? '',
-                  }));
-                }
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default AttachmentLinkModal;

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

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders AttachmentLinkModal 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>
-`;

package/src/components/MediaWidget/LinkItemWidget.css

@@ -1,46 +0,0 @@
-.memori-link-items--grid {
-    display: grid;
-    padding: 1rem;
-    grid-auto-flow: dense;
-    grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-}
-
-/* Allineamento link per messaggi dell'utente */
-.memori-link-items--grid.memori-link-items--user {
-    direction: rtl;
-}
-
-/* Allineamento link per messaggi dell'agente */
-.memori-link-items--grid.memori-link-items--agent {
-    direction: ltr;
-}
-
-.memori-link-item--card {
-    height: 100%;
-    margin-bottom: 1rem;
-}
-
-.memori-link-item--card .memori-card--cover {
-    height: auto;
-    text-align: center;
-}
-
-.memori-link-item--card .memori-card--cover img {
-    min-width: 100%;
-    min-height: 100%;
-    object-fit: contain;
-}
-
-a.memori-link-item--link {
-    text-decoration: none;
-}
-
-.memori-link-item--card-cover-icon {
-    padding: 1rem;
-}
-
-.memori-link-item--icon {
-    width: 50%;
-    height: 50%;
-}

package/src/components/MediaWidget/LinkItemWidget.stories.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import LinkItemWidget, { Props } from './LinkItemWidget';
-
-import './LinkItemWidget.css';
-
-const meta: Meta = {
-  title: 'Media Widget/Link',
-  component: LinkItemWidget,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <LinkItemWidget {...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 = {
-  items: [
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: 'text/html',
-      title: 'Memori Srl',
-      url: 'https://memori.ai/en',
-    },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: 'text/html',
-      title: 'AIsuru',
-      url: 'https://www.aisuru.com/en',
-    },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: 'text/html',
-      title: 'Introducing Plone Remix | Vimeo',
-      url: 'https://vimeo.com/766468314',
-    },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: 'text/html',
-      title: 'A sustainable web: is it possible? - Nicola Zambello | YouTube',
-      url: 'https://www.youtube.com/watch?v=feH26j3rBz8',
-    },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-      mimeType: 'text/html',
-      title: 'Memori backend API',
-      url: 'https://backend.memori.ai',
-    },
-  ],
-};

package/src/components/MediaWidget/LinkItemWidget.test.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Medium } from '@memori.ai/memori-api-client/dist/types';
-import { render } from '@testing-library/react';
-import LinkItemWidget from './LinkItemWidget';
-
-const linkMedium: Medium = {
-  mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
-  mimeType: 'text/html',
-  title: 'Memori Srl',
-  url: 'https://memori.ai/en',
-};
-
-it('renders LinkItemWidget unchanged', () => {
-  const { container } = render(<LinkItemWidget items={[linkMedium]} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders LinkItemWidget unchanged with no media', () => {
-  const { container } = render(<LinkItemWidget items={[]} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders LinkItemWidget unchanged with baseUrl', () => {
-  const { container } = render(<LinkItemWidget items={[linkMedium]} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders LinkItemWidget unchanged with description oneline', () => {
-  const { container } = render(
-    <LinkItemWidget items={[linkMedium]} descriptionOneLine />
-  );
-  expect(container).toMatchSnapshot();
-});