@memori.ai/memori-react 7.21.1 → 7.23.0

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Meta, Story } from '@storybook/react';
 import Drawer, { Props } from './Drawer';
 import Button from './Button';
 
 import './Drawer.css';
+import I18nWrapper from '../../I18nWrapper';
 
 const meta: Meta = {
   title: 'UI/Drawer',
@@ -34,12 +35,27 @@ const meta: Meta = {
         type: 'text',
       },
     },
-    side: {
+    placement: {
       control: {
         type: 'select',
         options: ['left', 'right'],
       },
     },
+    width: {
+      control: {
+        type: 'text',
+      },
+    },
+    animated: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closable: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   parameters: {
     controls: { expanded: true },
@@ -61,73 +77,29 @@ const content = (
     <p>Nulla at urna diam.</p>
     <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
     <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
-    <p>Nulla at urna diam.</p>
-    <h3>Suspendisse a sodales nulla, sed semper nisi.</h3>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
   </>
 );
 
-const footer = (
-  <>
-    <Button primary>OK</Button>
-    <Button>Cancel</Button>
-  </>
-);
-
-const Template: Story<Props> = args => {
-  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Drawer
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        footer={args.footer}
-      >
-        {content}
-      </Drawer>
-    </>
-  );
+// Create a proper footer object for the Drawer component
+const simpleFooterObject = {
+  onSubmit: () => console.log('Submit clicked'),
+  loading: false,
 };
 
-const TemplateWithALotOfContent: Story<Props> = args => {
+const Template: Story<Props> = args => {
   const [isOpen, setIsOpen] = React.useState(!!args.open || false);
 
   return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Click me</Button>
-      <Drawer
-        {...args}
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        footer={args.footer}
-      >
-        {content}
-        {content}
-        {content}
-        {content}
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer {...args} open={isOpen} onClose={() => setIsOpen(false)}>
         {content}
       </Drawer>
-    </>
+    </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
+// Basic examples
 export const Default = Template.bind({});
 Default.args = {
   open: false,
@@ -159,24 +131,137 @@ Loading.args = {
   loading: true,
 };
 
-export const WithFooter = Template.bind({});
-WithFooter.args = {
+export const WithSimpleFooter = Template.bind({});
+WithSimpleFooter.args = {
   open: true,
   title: 'Drawer Title',
   description: 'Drawer Description',
-  footer,
+  footer: {
+    onSubmit: () => console.log('Submit'),
+    loading: false,
+  },
 };
 
-export const SideLeft = Template.bind({});
-SideLeft.args = {
+export const PlacementLeft = Template.bind({});
+PlacementLeft.args = {
   open: true,
-  side: 'left',
+  placement: 'left',
+  title: 'Left Drawer',
 };
 
-export const WithALotOfContent = TemplateWithALotOfContent.bind({});
-WithALotOfContent.args = {
+export const CustomWidth = Template.bind({});
+CustomWidth.args = {
   open: true,
-  title: 'Drawer Title',
-  description: 'Drawer Description',
-  footer,
+  title: 'Custom Width Drawer',
+  width: '50%',
+};
+
+export const NonAnimated = Template.bind({});
+NonAnimated.args = {
+  open: true,
+  title: 'Non-Animated Drawer',
+  animated: false,
+};
+
+export const NonClosable = Template.bind({});
+NonClosable.args = {
+  open: true,
+  title: 'Non-Closable Drawer',
+  closable: false,
+};
+
+// Template for data detection
+const DataTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+  // Use static data for the story - don't try to update it which might cause issues
+  const staticData = { id: 1, name: 'John Doe' };
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Data Drawer</Button>
+      <Drawer
+        {...args}
+        open={isOpen}
+        data={staticData}
+        onClose={() => setIsOpen(false)}
+      >
+        <p>This drawer has data associated with it.</p>
+        <p>When you close it, the component will check for unsaved changes.</p>
+        <p>(For this demo, no actual changes are tracked)</p>
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithDataDetection = DataTemplate.bind({});
+WithDataDetection.args = {
+  open: true,
+  title: 'Data Change Detection',
+  description: 'This drawer demonstrates the data change detection feature',
+};
+
+// Improved ConfirmationDialog template with better state management
+
+const ConfirmationDialogTemplate: Story<Props> = ({ open = true }: Props) => {
+  const [isOpen, setIsOpen] = useState(open);
+  const [data, setData] = useState({ id: 1, name: 'John Doe' });
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Confirmation Dialog</Button>
+      <Drawer
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        data={data}
+        title="Confirmation Example"
+        confirmDialogTitle="Confirmation Example"
+        confirmDialogMessage="Are you sure you want to close this drawer?"
+        footer={{
+          onSubmit: () => {
+            console.log('Submitted with data:', data);
+            setIsOpen(false);
+          },
+        }}
+      >
+        <h3>Sample Form Content</h3>
+        <p>Current data: {JSON.stringify(data)}</p>
+        <Button onClick={() => setData({ id: 1, name: 'Jane Smith' })}>
+          Modify Data
+        </Button>
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithConfirmationDialog = ConfirmationDialogTemplate.bind({});
+WithConfirmationDialog.args = {
+  open: true,
+  title: 'Unsaved Changes Demo',
+  description:
+    'This drawer shows the confirmation dialog when closing with unsaved changes',
+};
+
+// Fixed Template with lots of content and proper footer
+const LongContentTemplate: Story<Props> = args => {
+  const [isOpen, setIsOpen] = React.useState(!!args.open || false);
+
+  return (
+    <I18nWrapper>
+      <Button onClick={() => setIsOpen(true)}>Open Long Content Drawer</Button>
+      <Drawer {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+        {content}
+        {content}
+        {content}
+        {content}
+      </Drawer>
+    </I18nWrapper>
+  );
+};
+
+export const WithLongContent = LongContentTemplate.bind({});
+WithLongContent.args = {
+  open: true,
+  title: 'Long Content Drawer',
+  description: 'This drawer has a lot of content',
+  footer: simpleFooterObject, // Use the properly structured footer object
 };

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

@@ -85,7 +85,11 @@ it('renders Drawer loading unchanged', () => {
 
 it('renders Drawer with footer unchanged', () => {
   const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} footer={footer}>
+    <Drawer open={true} onClose={jest.fn()} footer={{
+      leftAction: <Button>Cancel</Button>,
+      onSubmit: jest.fn(),
+      loading: false
+    }}>
       {content}
     </Drawer>
   );
@@ -103,7 +107,7 @@ it('renders Drawer non closable unchanged', () => {
 
 it('renders Drawer side left unchanged', () => {
   const { container } = render(
-    <Drawer open={true} onClose={jest.fn()} side="left">
+    <Drawer open={true} onClose={jest.fn()} placement="left">
       {content}
     </Drawer>
   );

package/src/components/ui/Drawer.tsx

@@ -1,123 +1,229 @@
-import React, { FC } from 'react';
+import React, {
+  FC,
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import Spin from './Spin';
 import Button from './Button';
 import Close from '../icons/Close';
 import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+import ConfirmDialog from './ConfirmDialog';
 
 export interface Props {
+  title?: string | React.ReactNode;
   open?: boolean;
-  onClose: (value: boolean) => void;
+  data?: any;
+  onClose?: () => void;
+  width?: number | string;
+  children?: React.ReactNode;
+  footer?: {
+    leftAction?: React.ReactNode;
+    leftActionClassName?: string;
+    onSubmit?: () => void;
+    loading?: boolean;
+  };
+  extra?: React.ReactNode;
   className?: string;
-  title?: string | JSX.Element | React.ReactNode;
+  placement?: 'left' | 'right';
   description?: string | JSX.Element | React.ReactNode;
-  children: JSX.Element | React.ReactNode;
-  footer?: JSX.Element | React.ReactNode;
   loading?: boolean;
   animated?: boolean;
   closable?: boolean;
-  side?: 'left' | 'right';
-  width?: string;
   widthMd?: string;
   widthLg?: string;
+  confirmDialogTitle?: string;
+  confirmDialogMessage?: string;
 }
 
 const Drawer: FC<Props> = ({
-  open = false,
-  onClose,
-  className,
   title,
-  description,
+  open = false,
+  data,
+  onClose = () => {},
   children,
+  width = '80%',
   footer,
+  extra,
+  className,
+  placement = 'right',
+  description,
   loading = false,
   animated = true,
-  side = 'right',
   closable = true,
-  width = '100%',
   widthMd = '80%',
   widthLg = '60%',
-}: Props) => (
-  <Transition appear show={open} as={React.Fragment}>
-    <Dialog
-      open={open}
-      onClose={onClose}
-      className={cx('memori-drawer', className)}
-    >
-      <Transition.Child
-        as={React.Fragment}
-        enter="ease-out duration-300"
-        enterFrom="opacity-0"
-        enterTo="opacity-100"
-        leave="ease-in duration-200"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <div className="memori-drawer--backdrop" />
-      </Transition.Child>
-      <div className="memori-drawer--container">
-        <div className="memori-drawer--container-scrollable">
+  confirmDialogTitle,
+  confirmDialogMessage,
+}: Props) => {
+  const [originalData, setOriginalData] = useState<any>(null);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const { t } = useTranslation();
+
+  // Set original data when drawer opens and data is available
+  useEffect(() => {
+    if (open && data && !originalData) {
+      setOriginalData(data);
+    }
+
+    // Reset original data when drawer closes
+    if (!open) {
+      setOriginalData(null);
+    }
+  }, [open, data, originalData]);
+
+  // Check if data has changed
+  const checkChanges = useCallback(() => {
+    if (!data || Object.keys(data).length === 0) {
+      return onClose();
+    }
+
+    // Compare current data with original data
+    if (originalData && JSON.stringify(originalData) !== JSON.stringify(data)) {
+      setConfirmDialogOpen(true);
+    } else {
+      onClose();
+    }
+  }, [data, originalData, onClose]);
+
+  // Handle drawer close
+  const handleClose = useCallback(() => {
+    checkChanges();
+  }, [checkChanges]);
+
+  // Confirm unsaved changes
+  const handleConfirmUnsavedChanges = useCallback(() => {
+    setConfirmDialogOpen(false);
+    onClose();
+  }, [onClose]);
+
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={confirmDialogOpen}
+        onClose={() => setConfirmDialogOpen(false)}
+        onConfirm={handleConfirmUnsavedChanges}
+        title={confirmDialogTitle || t('confirmDialog.title')}
+        message={confirmDialogMessage || t('confirmDialog.message')}
+        confirmText={t('confirm') || 'Confirm'}
+        cancelText={t('cancel') || 'Cancel'}
+      />
+
+      <Transition appear show={open} as={React.Fragment}>
+        <Dialog
+          open={open}
+          onClose={handleClose}
+          className={cx('memori-drawer', className)}
+        >
           <Transition.Child
-            static
             as={React.Fragment}
             enter="ease-out duration-300"
-            enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
-            enterTo="max-w-80 opacity-100"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
             leave="ease-in duration-200"
-            leaveFrom="max-w-80 opacity-100"
-            leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
-            <Dialog.Panel
-              className={cx('memori-drawer--panel', {
-                'memori-drawer--panel-left': side === 'left',
-                'memori-drawer--with-footer': !!footer,
-              })}
-            >
-              <style
-                dangerouslySetInnerHTML={{
-                  __html: `
-                    .memori-drawer--panel {
-                      --memori-drawer--width: ${width};
-                      --memori-drawer--width-lg: ${widthLg};
-                      --memori-drawer--width-md: ${widthMd};
-                    }
-                  `,
-                }}
-              />
-              {closable && (
-                <div className="memori-drawer--close">
-                  <Button
-                    shape="circle"
-                    outlined
-                    icon={<Close />}
-                    onClick={() => onClose(false)}
-                  />
-                </div>
-              )}
-              <Spin spinning={loading}>
-                {title && (
-                  <Dialog.Title className="memori-drawer--title">
-                    {title}
-                  </Dialog.Title>
-                )}
-                {description && (
-                  <Dialog.Description className="memori-drawer--description">
-                    {description}
-                  </Dialog.Description>
-                )}
-
-                {children}
-
-                {footer && (
-                  <div className="memori-drawer--footer">{footer}</div>
-                )}
-              </Spin>
-            </Dialog.Panel>
+            <div className="memori-drawer--backdrop" />
           </Transition.Child>
-        </div>
-      </div>
-    </Dialog>
-  </Transition>
-);
+          <div className="memori-drawer--container">
+            <div className="memori-drawer--container-scrollable">
+              <Transition.Child
+                static
+                as={React.Fragment}
+                enter="ease-out duration-300"
+                enterFrom={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+                enterTo="max-w-80 opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="max-w-80 opacity-100"
+                leaveTo={animated ? 'max-w-0 opacity-0' : 'opacity-0'}
+              >
+                <Dialog.Panel
+                  className={cx('memori-drawer--panel', {
+                    'memori-drawer--panel-left': placement === 'left',
+                    'memori-drawer--with-footer': !!footer,
+                  })}
+                  style={
+                    {
+                      '--memori-drawer--width': width,
+                      '--memori-drawer--width--lg': widthLg,
+                      '--memori-drawer--width--md': widthMd,
+                    } as React.CSSProperties
+                  }
+                >
+                  {closable && (
+                    <div className="memori-drawer--close">
+                      <Button
+                        shape="circle"
+                        outlined
+                        icon={<Close />}
+                        onClick={handleClose}
+                      />
+                    </div>
+                  )}
+                  <Spin spinning={loading}>
+                    <div className="memori-drawer--content">
+                      {title && (
+                        <Dialog.Title className="memori-drawer--title">
+                          {title}
+                        </Dialog.Title>
+                      )}
+                      {description && (
+                        <Dialog.Description className="memori-drawer--description">
+                          {description}
+                        </Dialog.Description>
+                      )}
+                      <div className="memori-drawer--content--scrollable">
+                        {children}
+                      </div>
+                    </div>
+                  </Spin>
+                  {footer && (
+                    <div className="memori-drawer--footer">
+                      {footer.leftAction && (
+                        <div
+                          className={
+                            'memori-drawer--footer-left-action ' +
+                            (footer.leftActionClassName || '')
+                          }
+                        >
+                          {footer.leftAction}
+                        </div>
+                      )}
+                      {footer.onSubmit && (
+                        <div className="memori-drawer--footer-actions">
+                          <Button outlined onClick={handleClose}>
+                            {t('cancel')}
+                          </Button>
+                          <Button
+                            htmlType="submit"
+                            onClick={footer.onSubmit}
+                            loading={footer.loading}
+                            className="memori-drawer--footer-confirm"
+                          >
+                            {t('confirm')}
+                          </Button>
+                        </div>
+                      )}
+                      {extra && (
+                        <div className="memori-drawer--extra">{extra}</div>
+                      )}
+                    </div>
+                  )}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};
+
+Drawer.displayName = 'Drawer';
 
 export default Drawer;

package/src/components/ui/__snapshots__/ConfirmDialog.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ConfirmDialog open 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 ConfirmDialog unchanged 1`] = `<div />`;
+
+exports[`renders ConfirmDialog with custom button text 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 ConfirmDialog with custom message 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 ConfirmDialog with custom title 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/locales/de.json

@@ -38,6 +38,7 @@
   "nothingFound": "Nichts gefunden",
   "venue": "Veranstaltungsort",
   "searchVenue": "Veranstaltungsort suchen...",
+  "privacyPolicy": "Datenschutzbestimmungen",
   "memoriBlockedTitle": "Blockiert",
   "memoriBlockedUntil": "Agent blockiert bis {{date}}",
   "memoriBlockedAnon": "Momentan \"{{name}}„Kann nicht antworten, komm hierher zurück {{date}}",
@@ -49,6 +50,9 @@
   "receiverLabel": "Zugewiesen an",
   "completionsEnabled": "Fortschrittliche KI kann mit automatisch generierten Antworten reagieren, die manchmal falsche Informationen enthalten können",
   "completionProviderDown": "Dieser Zwilling ist mit einer generativen KI von integriert {{provider}}, aber es ist derzeit nicht verfügbar. ",
+  "completionProviderMajorOutage": "Dieser Zwilling ist mit einer generativen KI von integriert {{provider}}, aber es ist derzeit nicht verfügbar. Diese Funktion wird nicht verfügbar sein, bis der Service wiederhergestellt ist.",
+  "completionProviderPartialOutage": "Dieser Zwilling ist mit einer generativen KI von integriert {{provider}}, aber es ist derzeit nicht verfügbar. Diese Funktion wird nicht verfügbar sein, bis der Service wiederhergestellt ist.",
+  "completionProviderDegraded": "Dieser Zwilling ist mit einer generativen KI von integriert {{provider}}, aber es ist derzeit nicht verfügbar. Diese Funktion wird nicht verfügbar sein, bis der Service wiederhergestellt ist.",
   "completionProviderFallbackName": "ein externer Anbieter",
   "completionProviderCheckStatusPage": "Überprüfen Sie die Statusseite",
   "boardOfExperts": "Expertengremium",
@@ -69,6 +73,10 @@
   "deepThoughtPreDisclaimerUnlogged": "Melden Sie sich an, um Deep Thought zu aktivieren.",
   "deepThoughtPreDisclaimerNotAllowed": "Deep Thought ist deaktiviert, da Sie der Nutzung nicht zugestimmt haben. Sie können dies jederzeit in Ihren Kontoeinstellungen ändern.",
   "notEnoughCredits": "Der Autor dieses Zwillings verfügt nicht über genügend Credits, um Ihre Frage zu beantworten.",
+  "confirmDialog": {
+    "title": "Möchten Sie diese Seite verlassen?",
+    "message": "Die Änderungen, die Sie vorgenommen haben, werden verloren."
+  },
   "knownFacts": {
     "title": "Bekannte Fakten",
     "description": "Einzelheiten zu den Informationen, die zwischen Ihnen und geteilt werden {{memoriName}}",
@@ -110,6 +118,13 @@
     "micButtonPopoverListening": "Klicken Sie auf die Schaltfläche, um das Sprechen zu stoppen",
     "pageInstructExplanation": "Um mir neue Dinge beizubringen, klicken Sie auf die Schaltfläche „ANLEITEN“, um zu beginnen",
     "pageTryMeExplanation": "Um mit mir zu sprechen, klicken Sie auf die Schaltfläche START, um zu beginnen",
+    "pagePrivacyExplanation": "Die Konversationen sind sichtbar von dem Autor des Agenten",
+    "pagePrivacyExplanationList": {
+      "allConversations": "Alle Konversationen mit diesem Agenten sind sichtbar von dem Autor des Agenten",
+      "anonymousUser": "Für anonyme Benutzer: der Autor wird den Inhalt der Konversation und Ihre IP-Adresse sehen",
+      "registeredUser": "Für registrierte Benutzer: der Autor wird den Inhalt der Konversation und Ihren Benutzernamen sehen",
+      "authorUsesInfo": "Der Autor verwendet diese Informationen, um die Funktionen des Agenten zu verbessern und Ihnen einen besseren Service anzubieten. Wenn Sie die Konversation fortsetzen, stimmen Sie diesen Bedingungen zu."
+    },
     "instructButton": "WEISE MICH AN",
     "tryMeButton": "START",
     "chatHistory": "Chatverlauf",