@memori.ai/memori-react 7.22.0 → 7.23.0

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

@@ -3,14 +3,14 @@
 exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
   >
     <div
       class="memori-tooltip--content"
     >
       <div>
         <p>
-          completionProviderDown
+          completionProviderMajorOutage
         </p>
         <p>
           <a
@@ -28,14 +28,20 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="memori--completion-provider-status--icon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 1024 1024"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
         />
       </svg>
     </div>
@@ -46,14 +52,14 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
   >
     <div
       class="memori-tooltip--content"
     >
       <div>
         <p>
-          completionProviderDown
+          completionProviderMajorOutage
         </p>
         <p>
           <a
@@ -71,14 +77,20 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
     >
       <svg
         aria-hidden="true"
-        class="memori--completion-provider-status--icon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 1024 1024"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
         />
       </svg>
     </div>
@@ -89,14 +101,14 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
 exports[`renders CompletionProviderStatus unchanged 1`] = `
 <div>
   <div
-    class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
   >
     <div
       class="memori-tooltip--content"
     >
       <div>
         <p>
-          completionProviderDown
+          completionProviderMajorOutage
         </p>
         <p>
           <a
@@ -114,14 +126,20 @@ exports[`renders CompletionProviderStatus unchanged 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="memori--completion-provider-status--icon"
-        focusable="false"
-        role="img"
-        viewBox="0 0 1024 1024"
+        class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+        color="currentColor"
+        fill="none"
+        height="800px"
+        viewBox="0 0 24 24"
+        width="800px"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+          d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
         />
       </svg>
     </div>

package/src/components/KnownFacts/KnownFacts.tsx

@@ -60,7 +60,7 @@ const KnownFacts = ({
         howMany ?? numberOfResults
       );
 
-      setKnownFacts(knownFacts ?? []);
+      setKnownFacts(knownFacts ?? initialKnownFacts);
       setKnownFactsCount(count ?? 0);
 
       if (response.resultCode !== 0) {

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

@@ -751,14 +751,14 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
         write_and_speak.tryMeButton
       </button>
       <div
-        class="memori-tooltip memori-tooltip--align-topLeft memori--completion-provider-status--tooltip"
+        class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
       >
         <div
           class="memori-tooltip--content"
         >
           <div>
             <p>
-              completionProviderDown
+              completionProviderMajorOutage
             </p>
             <p>
               <a
@@ -776,14 +776,20 @@ exports[`renders StartPanel with completion provider down unchanged 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="memori--completion-provider-status--icon"
-            focusable="false"
-            role="img"
-            viewBox="0 0 1024 1024"
+            class="memori--completion-provider-status--icon memori--completion-provider-status--icon-error"
+            color="currentColor"
+            fill="none"
+            height="800px"
+            viewBox="0 0 24 24"
+            width="800px"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+              d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
             />
           </svg>
         </div>

package/src/components/Typing/Typing.tsx

@@ -1,55 +1,53 @@
 import { useEffect, useState } from 'react';
 
 const separator = ' ';
-const defaultDelay = 3;
+const defaultDelay = 15;
+const timeoutMs = 20 * 1000;
+const newWordInterval = 50;
 const defaultSentences = {
   en: [
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating an accurate and fancy response...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating a response that will blow your mind...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Generating a response that will make you smile...',
-    },
-    { delayAfter: defaultDelay, text: 'Thinking of a response...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Thinking of a response that will make you smile...',
-    },
-    { delayAfter: defaultDelay, text: 'Gathering my thoughts...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Gathering my thoughts to give you a response...',
-    },
+    { delayAfter: defaultDelay, text: 'Processing in progress...' },
+    { delayAfter: defaultDelay, text: "I'm thinking..." },
+    { delayAfter: defaultDelay, text: 'Analysing the request...' },
+    { delayAfter: defaultDelay, text: 'Preparing the reply...' },
+    { delayAfter: defaultDelay, text: 'Gathering information...' },
+    { delayAfter: defaultDelay, text: 'Formulating ideas...' },
+    { delayAfter: defaultDelay, text: 'One moment please...' },
+    { delayAfter: defaultDelay, text: 'Almost ready...' },
+    { delayAfter: defaultDelay, text: 'Connecting concepts...' },
+    { delayAfter: defaultDelay, text: 'Organising ideas...' },
+    { delayAfter: defaultDelay, text: 'Evaluating options...' },
+    { delayAfter: defaultDelay, text: 'Looking for the best solution...' },
+    { delayAfter: defaultDelay, text: 'Working for you...' },
+    { delayAfter: defaultDelay, text: 'Please wait...' },
+    { delayAfter: defaultDelay, text: 'Processing data...' },
+    { delayAfter: defaultDelay, text: 'Calculating response...' },
+    { delayAfter: defaultDelay, text: 'Synthesising information...' },
+    { delayAfter: defaultDelay, text: 'Generating content...' },
+    { delayAfter: defaultDelay, text: 'Reflecting on question...' },
+    { delayAfter: defaultDelay, text: 'Refining the answer' },
   ],
   it: [
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta accurata e fantasiosa...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta che ti farà impazzire...',
-    },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto generando una risposta che ti farà sorridere...',
-    },
-    { delayAfter: defaultDelay, text: 'Sto pensando ad una risposta...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto pensando ad una risposta che ti farà sorridere...',
-    },
-    { delayAfter: defaultDelay, text: 'Sto raccogliendo i miei pensieri...' },
-    {
-      delayAfter: defaultDelay,
-      text: 'Sto raccogliendo i miei pensieri per darti una risposta...',
-    },
+    { delayAfter: defaultDelay, text: 'Elaborazione in corso...' },
+    { delayAfter: defaultDelay, text: 'Sto pensando...' },
+    { delayAfter: defaultDelay, text: 'Analizzando la richiesta...' },
+    { delayAfter: defaultDelay, text: 'Preparando la risposta...' },
+    { delayAfter: defaultDelay, text: 'Raccogliendo informazioni...' },
+    { delayAfter: defaultDelay, text: 'Formulando idee...' },
+    { delayAfter: defaultDelay, text: 'Un momento per favore...' },
+    { delayAfter: defaultDelay, text: 'Quasi pronto...' },
+    { delayAfter: defaultDelay, text: 'Connettendo i concetti...' },
+    { delayAfter: defaultDelay, text: 'Organizzando le idee...' },
+    { delayAfter: defaultDelay, text: 'Valutando le opzioni...' },
+    { delayAfter: defaultDelay, text: 'Cercando la soluzione migliore...' },
+    { delayAfter: defaultDelay, text: 'Sto lavorando per te...' },
+    { delayAfter: defaultDelay, text: 'Attendere prego...' },
+    { delayAfter: defaultDelay, text: 'Elaborazione dati in corso...' },
+    { delayAfter: defaultDelay, text: 'Calcolando la risposta...' },
+    { delayAfter: defaultDelay, text: 'Sintetizzando informazioni...' },
+    { delayAfter: defaultDelay, text: 'Generando contenuti...' },
+    { delayAfter: defaultDelay, text: 'Sto riflettendo sulla domanda...' },
+    { delayAfter: defaultDelay, text: 'Perfezionando la risposta...' },
   ],
 };
 
@@ -98,9 +96,12 @@ const Typing = ({
       : ''
   );
   const [shownText, setShownText] = useState('');
+  const [elapsedTime, setElapsedTime] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
+      setElapsedTime(prev => prev + newWordInterval);
+
       const letter = text[shownText.length];
       if (letter !== undefined && text.length > 0) {
         setShownText(prev => prev + letter);
@@ -119,7 +120,11 @@ const Typing = ({
         );
         setShownText('');
         setIndex(nextIndex);
-      } else if (!sentences && !sentence && useDefaultSentences) {
+      } else if (
+        !sentences &&
+        !sentence &&
+        (useDefaultSentences || elapsedTime > timeoutMs)
+      ) {
         const sentence =
           defaultSentences[lang][
             Math.floor(Math.random() * defaultSentences[lang].length)
@@ -127,7 +132,7 @@ const Typing = ({
         setText(`${sentence.text}${getSeparatorString(sentence.delayAfter)}`);
         setShownText('');
       }
-    }, 50);
+    }, newWordInterval);
 
     return () => clearInterval(interval);
   });

package/src/components/icons/Alert.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Alert = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      d="M12 16H12.01M12 8V12M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Alert;

package/src/components/icons/Info.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Info = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+    fill="none"
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" />
+    <path
+      d="M12 17V11"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+    <circle
+      cx="1"
+      cy="1"
+      r="1"
+      transform="matrix(1 0 0 -1 11 9)"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Info;

package/src/components/icons/Warning.tsx

@@ -15,8 +15,9 @@ const Warning = ({
     viewBox="0 0 1024 1024"
     className={className}
     aria-label={title}
+    color="currentColor"
   >
-    <path d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
+    <path fill="currentColor" d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
   </svg>
 );
 

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',
+};