@memori.ai/memori-react 7.21.1 → 7.23.0

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

@@ -376,6 +376,80 @@ exports[`renders FullPage layout unchanged 1`] = `
                   </option>
                 </select>
               </div>
+              <div
+                class="memori--start-privacy-explanation-container"
+              >
+                <p
+                  class="memori--start-privacy-explanation"
+                >
+                  Le conversazioni sono visibili all'autore dell'agente
+                </p>
+                <div
+                  class="memori-tooltip memori-tooltip--align-right"
+                >
+                  <div
+                    class="memori-tooltip--content"
+                  >
+                    <div
+                      class="memori--privacy-tooltip-content"
+                    >
+                      <p>
+                         
+                        Tutte le conversazioni con questo agente sono visibili all'autore dell'agente
+                      </p>
+                      <ul
+                        class="memori--privacy-tooltip-content-list"
+                      >
+                        <li>
+                          Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP
+                        </li>
+                        <li>
+                          Per utenti registrati: l'autore vedrà il contenuto e il nome utente
+                        </li>
+                      </ul>
+                      <p>
+                        L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni.
+                      </p>
+                      <a
+                        href="https://memori.ai/en/privacy-policy"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        Informativa sulla privacy
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="memori-tooltip--trigger"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="memori--start-privacy-explanation-icon"
+                      fill="none"
+                      focusable="false"
+                      role="img"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1.5"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                      />
+                      <path
+                        d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                      />
+                      <path
+                        d="M12 17L12.01 17"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
               <button
                 class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
               >
@@ -838,6 +912,80 @@ exports[`renders FullPage layout with root css properties unchanged 1`] = `
                   </option>
                 </select>
               </div>
+              <div
+                class="memori--start-privacy-explanation-container"
+              >
+                <p
+                  class="memori--start-privacy-explanation"
+                >
+                  Le conversazioni sono visibili all'autore dell'agente
+                </p>
+                <div
+                  class="memori-tooltip memori-tooltip--align-right"
+                >
+                  <div
+                    class="memori-tooltip--content"
+                  >
+                    <div
+                      class="memori--privacy-tooltip-content"
+                    >
+                      <p>
+                         
+                        Tutte le conversazioni con questo agente sono visibili all'autore dell'agente
+                      </p>
+                      <ul
+                        class="memori--privacy-tooltip-content-list"
+                      >
+                        <li>
+                          Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP
+                        </li>
+                        <li>
+                          Per utenti registrati: l'autore vedrà il contenuto e il nome utente
+                        </li>
+                      </ul>
+                      <p>
+                        L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni.
+                      </p>
+                      <a
+                        href="https://memori.ai/en/privacy-policy"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        Informativa sulla privacy
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="memori-tooltip--trigger"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="memori--start-privacy-explanation-icon"
+                      fill="none"
+                      focusable="false"
+                      role="img"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1.5"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                      />
+                      <path
+                        d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                      />
+                      <path
+                        d="M12 17L12.01 17"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
               <button
                 class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
               >

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

@@ -430,6 +430,80 @@ exports[`renders Totem layout unchanged 1`] = `
                 </option>
               </select>
             </div>
+            <div
+              class="memori--start-privacy-explanation-container"
+            >
+              <p
+                class="memori--start-privacy-explanation"
+              >
+                Le conversazioni sono visibili all'autore dell'agente
+              </p>
+              <div
+                class="memori-tooltip memori-tooltip--align-right"
+              >
+                <div
+                  class="memori-tooltip--content"
+                >
+                  <div
+                    class="memori--privacy-tooltip-content"
+                  >
+                    <p>
+                       
+                      Tutte le conversazioni con questo agente sono visibili all'autore dell'agente
+                    </p>
+                    <ul
+                      class="memori--privacy-tooltip-content-list"
+                    >
+                      <li>
+                        Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP
+                      </li>
+                      <li>
+                        Per utenti registrati: l'autore vedrà il contenuto e il nome utente
+                      </li>
+                    </ul>
+                    <p>
+                      L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni.
+                    </p>
+                    <a
+                      href="https://memori.ai/en/privacy-policy"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Informativa sulla privacy
+                    </a>
+                  </div>
+                </div>
+                <div
+                  class="memori-tooltip--trigger"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="memori--start-privacy-explanation-icon"
+                    fill="none"
+                    focusable="false"
+                    role="img"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <path
+                      d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                    />
+                    <path
+                      d="M12 17L12.01 17"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
             <button
               class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
             >

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

@@ -376,6 +376,80 @@ exports[`renders ZOOMED_FULL_BODY layout unchanged 1`] = `
                   </option>
                 </select>
               </div>
+              <div
+                class="memori--start-privacy-explanation-container"
+              >
+                <p
+                  class="memori--start-privacy-explanation"
+                >
+                  Le conversazioni sono visibili all'autore dell'agente
+                </p>
+                <div
+                  class="memori-tooltip memori-tooltip--align-right"
+                >
+                  <div
+                    class="memori-tooltip--content"
+                  >
+                    <div
+                      class="memori--privacy-tooltip-content"
+                    >
+                      <p>
+                         
+                        Tutte le conversazioni con questo agente sono visibili all'autore dell'agente
+                      </p>
+                      <ul
+                        class="memori--privacy-tooltip-content-list"
+                      >
+                        <li>
+                          Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP
+                        </li>
+                        <li>
+                          Per utenti registrati: l'autore vedrà il contenuto e il nome utente
+                        </li>
+                      </ul>
+                      <p>
+                        L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni.
+                      </p>
+                      <a
+                        href="https://memori.ai/en/privacy-policy"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        Informativa sulla privacy
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="memori-tooltip--trigger"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="memori--start-privacy-explanation-icon"
+                      fill="none"
+                      focusable="false"
+                      role="img"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1.5"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        cx="12"
+                        cy="12"
+                        r="10"
+                      />
+                      <path
+                        d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
+                      />
+                      <path
+                        d="M12 17L12.01 17"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
               <button
                 class="memori-button memori-button--primary memori-button--rounded memori-button--padded memori--start-button"
               >

package/src/components/ui/ConfirmDialog.css

@@ -0,0 +1,42 @@
+/* Confirmation dialog styles */
+.memori-confirm-dialog--backdrop {
+  position: fixed;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+}
+
+.memori-confirm-dialog--container {
+  position: fixed;
+  z-index: 101;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  inset: 0;
+}
+
+.memori-confirm-dialog--panel {
+  width: 100%;
+  max-width: 28rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: white;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.memori-confirm-dialog--title {
+  margin-bottom: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.memori-confirm-dialog--message {
+  margin-bottom: 1.5rem;
+}
+
+.memori-confirm-dialog--actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import ConfirmDialog from './ConfirmDialog';
+import Button from './Button';
+
+import './ConfirmDialog.css';
+
+type Props = React.ComponentProps<typeof ConfirmDialog>;
+
+const meta: Meta = {
+  title: 'UI/ConfirmDialog',
+  component: ConfirmDialog,
+  argTypes: {
+    isOpen: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+    },
+    confirmText: {
+      control: {
+        type: 'text',
+      },
+    },
+    cancelText: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.isOpen || false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Confirm Dialog</Button>
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={() => {
+          console.log('Confirmed!');
+          setIsOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+// Basic examples
+export const Default = Template.bind({});
+Default.args = {
+  isOpen: false,
+  title: 'Confirm Action',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const Open = Template.bind({});
+Open.args = {
+  isOpen: true,
+  title: 'Confirm Action',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomTitle = Template.bind({});
+WithCustomTitle.args = {
+  isOpen: true,
+  title: 'Delete Item',
+  message: 'Are you sure you want to proceed with this action?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomMessage = Template.bind({});
+WithCustomMessage.args = {
+  isOpen: true,
+  title: 'Confirm Action',
+  message: 'This action cannot be undone. All associated data will be permanently deleted from the system.',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export const WithCustomButtonText = Template.bind({});
+WithCustomButtonText.args = {
+  isOpen: true,
+  title: 'Delete Item',
+  message: 'Are you sure you want to delete this item? This action cannot be undone.',
+  confirmText: 'Yes, Delete',
+  cancelText: 'No, Keep It',
+};
+
+// Use case examples
+const DeleteTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isDeleted, setIsDeleted] = React.useState(false);
+
+  const handleConfirm = () => {
+    setIsDeleted(true);
+    setIsOpen(false);
+    console.log('Item deleted!');
+  };
+
+  return (
+    <>
+      {isDeleted ? (
+        <div style={{ 
+          padding: '12px', 
+          background: '#f8d7da', 
+          color: '#721c24', 
+          borderRadius: '4px',
+          marginBottom: '20px'
+        }}>
+          Item has been deleted successfully!
+        </div>
+      ) : (
+        <Button onClick={() => setIsOpen(true)}>Delete Item</Button>
+      )}
+      
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+};
+
+export const DeleteConfirmation = DeleteTemplate.bind({});
+DeleteConfirmation.args = {
+  title: 'Delete Item',
+  message: 'Are you sure you want to delete this item? This action cannot be undone.',
+  confirmText: 'Delete',
+  cancelText: 'Cancel',
+};
+
+const SaveTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [navigatedAway, setNavigatedAway] = React.useState(false);
+
+  const handleTryNavigate = () => {
+    setIsOpen(true);
+  };
+
+  const handleConfirm = () => {
+    setNavigatedAway(true);
+    setIsOpen(false);
+    console.log('Navigated without saving!');
+  };
+
+  return (
+    <>
+      {navigatedAway ? (
+        <div style={{ 
+          padding: '12px', 
+          background: '#d4edda', 
+          color: '#155724', 
+          borderRadius: '4px',
+          marginBottom: '20px'
+        }}>
+          Navigated away without saving changes.
+        </div>
+      ) : (
+        <div>
+          <div style={{ 
+            padding: '20px', 
+            border: '1px solid #ddd', 
+            borderRadius: '4px',
+            marginBottom: '20px'
+          }}>
+            <h3>Unsaved Form</h3>
+            <p>This is a form with unsaved changes.</p>
+            <input type="text" placeholder="Your name" style={{ padding: '8px', marginBottom: '10px', width: '100%' }} />
+            <textarea placeholder="Your message" style={{ padding: '8px', width: '100%', height: '100px' }} />
+          </div>
+          <Button onClick={handleTryNavigate}>Navigate Away</Button>
+        </div>
+      )}
+      
+      <ConfirmDialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+};
+
+export const UnsavedChanges = SaveTemplate.bind({});
+UnsavedChanges.args = {
+  title: 'Unsaved Changes',
+  message: 'You have unsaved changes. Are you sure you want to leave without saving?',
+  confirmText: 'Leave',
+  cancelText: 'Stay',
+};