@memori.ai/memori-react 7.11.3 → 7.12.0

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

@@ -79,6 +79,30 @@ exports[`renders StartPanel for board of experts unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -180,6 +204,30 @@ exports[`renders StartPanel on instruct unchanged 1`] = `
       >
         write_and_speak.instructButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -281,6 +329,30 @@ exports[`renders StartPanel unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -521,6 +593,30 @@ exports[`renders StartPanel with completions enabled unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -622,6 +718,30 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -792,6 +912,30 @@ exports[`renders StartPanel with deep thought enabled but without permission fla
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -955,6 +1099,30 @@ exports[`renders StartPanel with deep thought enabled unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -1115,6 +1283,30 @@ exports[`renders StartPanel with existing sessionunchanged 1`] = `
       >
         write_and_speak.resumeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -1216,6 +1408,30 @@ exports[`renders StartPanel with integrationConfig unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >
@@ -1417,6 +1633,30 @@ exports[`renders StartPanel with multilangual unchanged 1`] = `
       >
         write_and_speak.tryMeButton
       </button>
+      <div
+        class="memori--completion-provider-status--loading"
+      >
+        <div
+          class="memori-spin memori-spin--spinning"
+        >
+          <div
+            class="memori-spin--spinner"
+          >
+            <svg
+              aria-hidden="true"
+              class="memori-loading-icon"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
       <p
         class="memori--start-description"
       >

package/src/components/UploadButton/UploadButton.css

@@ -0,0 +1,38 @@
+.file-upload-wrapper {
+    margin-right: 0.5rem;
+}
+
+.memori--upload-file-input {
+    display: none;
+}
+
+.memori--upload-button {
+    /* position: absolute; */
+    right: 160px;
+    bottom: 8px;
+    padding: 8px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.memori--upload-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.memori--upload-button:hover:not(:disabled) {
+    background-color: rgba(128, 128, 128, 0.1);
+}
+
+.memori--upload-icon {
+    width: 20px;
+    height: 20px;
+}
+
+.memori--conversation-button:hover .memori--upload-icon {
+    fill: var(--memori-primary);
+    transition: fill 0.2s ease;
+}
+

package/src/components/UploadButton/UploadButton.stories.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import UploadButton from './UploadButton';
+
+import './UploadButton.css';
+
+const meta: Meta = {
+  title: 'Widget/Upload Button',
+  component: UploadButton,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+
+type Props = {
+  onUpload: (text: string) => void;
+  convertapiToken: string;
+};
+
+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',
+        }}
+      >
+        <UploadButton {...args} setPreviewFiles={setPreviewFiles} />
+      </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: () => {},
+  convertapiToken: 'c3lITDU8Pvr1ovTz',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  onUpload: () => {},
+  convertapiToken: 'c3lITDU8Pvr1ovTz',
+  disabled: true,
+};

package/src/components/UploadButton/UploadButton.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import UploadButton from './UploadButton';
+
+it('renders UploadButton unchanged', () => {
+  const { container } = render(
+    <UploadButton setPreviewFiles={jest.fn()} />
+  );
+  expect(container).toMatchSnapshot();
+});
+

package/src/components/UploadButton/UploadButton.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import ConvertApi from 'convertapi-js';
+import UploadIcon from '../icons/Upload';
+import Spin from '../ui/Spin';
+
+/**
+ * UploadButton component
+ * @param {Function} setPreviewFiles - Callback function to handle the uploaded text
+ * @returns {JSX.Element}
+ */
+const FileUploadButton = ({
+  setPreviewFiles,
+}: {
+  setPreviewFiles: (
+    previewFiles: { name: string; id: string; content: string }[]
+  ) => void;
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [convertapiToken, setConvertapiToken] = useState<string>();
+
+  const fetchConvertapiToken = async () => {
+    try {
+      const result = await fetch('https://www.aisuru.com/api/convertapi-token');
+      const response = await result.json();
+      setConvertapiToken(response.Tokens?.[0]?.Id);
+    } catch (error) {
+      console.error('Error fetching ConvertAPI token:', error);
+    }
+  };
+  useEffect(() => {
+    fetchConvertapiToken();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const convertToTxt = async (file: File) => {
+    if (!convertapiToken || !file) {
+      console.error('Missing ConvertAPI token or file');
+      setError('Missing ConvertAPI token or file');
+      return;
+    }
+
+    setIsLoading(true);
+    const fileExt =
+      file.name.split('.').pop() || file.type.split('/').pop() || 'pdf';
+
+    try {
+      const convertApi = ConvertApi.auth(convertapiToken);
+      const params = convertApi.createParams();
+      params.add('File', file);
+      params.add('TextEncoding', 'UTF-8');
+      params.add('PageRange', '1-2000');
+
+      const result = await convertApi.convert(fileExt, 'txt', params);
+      const fileUrl = result.files[0].Url;
+
+      const response = await fetch(fileUrl);
+      const text = await response.text();
+
+      return text;
+    } catch (error) {
+      console.error('Conversion error:', error);
+      setError('Conversion error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    const newPreviewFiles: { name: string; id: string; content: string }[] = [];
+
+    for (const file of files) {
+      const fileId = Math.random().toString(36).substr(2, 9);
+
+      const text = await convertToTxt(file);
+
+      if (text) {
+        newPreviewFiles.push({
+          name: file.name,
+          id: fileId,
+          content: text || '',
+        });
+      } else {
+        setError('Failed to convert file to text');
+      }
+    }
+
+    setPreviewFiles(newPreviewFiles);
+  };
+
+  return (
+    <div className="file-upload-wrapper">
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".pdf,.doc,.docx,.txt"
+        className="memori--upload-file-input"
+        onChange={handleFileSelect}
+      />
+
+      <button
+        className={cx(
+          'memori-button',
+          'memori-button--circle',
+          'memori-button--icon-only',
+          'memori-share-button--button',
+          'memori--conversation-button',
+          { 'memori--error': error }
+        )}
+        onClick={() => fileInputRef.current?.click()}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <Spin spinning className="memori--upload-icon" />
+        ) : (
+          <UploadIcon className="memori--upload-icon" />
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default FileUploadButton;

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders UploadButton unchanged 1`] = `
+<div>
+  <div
+    class="file-upload-wrapper"
+  >
+    <input
+      accept=".pdf,.doc,.docx,.txt"
+      class="memori--upload-file-input"
+      type="file"
+    />
+    <button
+      class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button"
+    >
+      <svg
+        aria-hidden="true"
+        class="memori--upload-icon"
+        focusable="false"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

package/src/components/icons/Preview.tsx

@@ -0,0 +1,23 @@
+const PreviewIcon = ({
+  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 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+    />
+  </svg>
+);
+
+export default PreviewIcon;

package/src/components/icons/Upload.tsx

@@ -0,0 +1,23 @@
+const UploadIcon = ({
+  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 24 24"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+    />
+  </svg>
+);
+
+export default UploadIcon;

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

@@ -342,6 +342,30 @@ exports[`renders Chat layout unchanged 1`] = `
             >
               INIZIAMO
             </button>
+            <div
+              class="memori--completion-provider-status--loading"
+            >
+              <div
+                class="memori-spin memori-spin--spinning"
+              >
+                <div
+                  class="memori-spin--spinner"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori-loading-icon"
+                    focusable="false"
+                    role="img"
+                    viewBox="0 0 1024 1024"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
             <p
               class="memori--start-description"
             >

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

@@ -381,6 +381,30 @@ exports[`renders FullPage layout unchanged 1`] = `
               >
                 INIZIAMO
               </button>
+              <div
+                class="memori--completion-provider-status--loading"
+              >
+                <div
+                  class="memori-spin memori-spin--spinning"
+                >
+                  <div
+                    class="memori-spin--spinner"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="memori-loading-icon"
+                      focusable="false"
+                      role="img"
+                      viewBox="0 0 1024 1024"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
               <p
                 class="memori--start-description"
               >