@memori.ai/memori-react 7.21.1 → 7.23.0

package/esm/locales/it.json

@@ -38,6 +38,7 @@
     "nothingFound": "Nessun risultato",
     "venue": "Luogo",
     "searchVenue": "Cerca luogo...",
+    "privacyPolicy": "Informativa sulla privacy",
     "memoriBlockedTitle": "Bloccato",
     "memoriBlockedUntil": "Agente bloccato fino al {{date}}",
     "memoriBlockedAnon": "Attualmente \"{{name}}\" non può rispondere, torna qui il {{date}}",
@@ -49,6 +50,9 @@
     "receiverLabel": "Assegnato a",
     "completionsEnabled": "IA evoluta, può rispondere con risposte generate automaticamente che talvolta potrebbero contenere informazioni non corrette",
     "completionProviderDown": "Questo agente è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Riprova più tardi.",
+    "completionProviderMajorOutage": "Questo agente è integrato con una IA generativa di {{provider}}, ma al momento non è disponibile. Non sarà possibile utilizzare questa funzionalità finché il servizio non viene ripristinato.",
+    "completionProviderPartialOutage": "Questo agente è integrato con una IA generativa di {{provider}}, ma sta riscontrando interruzioni parziali. Alcune funzionalità potrebbero non essere disponibili o funzionare in modo non ottimale.",
+    "completionProviderDegraded": "Questo agente è integrato con una IA generativa di {{provider}}, ma sta funzionando più lentamente del normale. Le risposte potrebbero richiedere più tempo o essere meno precise.",
     "completionProviderFallbackName": "un provider esterno",
     "completionProviderCheckStatusPage": "Vedi pagina di stato",
     "boardOfExperts": "Gruppo di esperti",
@@ -69,6 +73,10 @@
     "deepThoughtPreDisclaimerUnlogged": "Accedi per abilitare Pensiero Profondo.",
     "deepThoughtPreDisclaimerNotAllowed": "Pensiero Profondo è disabilitato poiché non hai acconsentito al suo utilizzo, puoi cambiare la tua scelta in qualsiasi momento nelle impostazioni del tuo account.",
     "notEnoughCredits": "L'autore di questo agente non ha abbastanza crediti per rispondere alla tua domanda.",
+    "confirmDialog": {
+        "title": "Confermi di voler lasciare questa pagina?",
+        "message": "Le modifiche non salvate andranno perse."
+    },
     "knownFacts": {
         "title": "Fatti noti",
         "description": "Dettagli delle informazioni condivise tra te e {{memoriName}}",
@@ -110,6 +118,13 @@
         "micButtonPopoverListening": "Premi il pulsante per smettere di parlare",
         "pageInstructExplanation": "Per insegnarmi nuove cose clicca sul pulsante ISTRUISCIMI per cominciare",
         "pageTryMeExplanation": "Per parlare con me clicca sul pulsante INIZIAMO per cominciare",
+        "pagePrivacyExplanation": "Le conversazioni sono visibili all'autore dell'agente",
+        "pagePrivacyExplanationList": {
+            "allConversations": "Tutte le conversazioni con questo agente sono visibili all'autore dell'agente",
+            "anonymousUser": "Per utenti anonimi: l'autore vedrà il contenuto e l'indirizzo IP",
+            "registeredUser": "Per utenti registrati: l'autore vedrà il contenuto e il nome utente",
+            "authorUsesInfo": "L'autore utilizza queste informazioni per migliorare le funzionalità dell'agente. Continuando, accetti queste condizioni."
+        },
         "instructButton": "ISTRUISCIMI",
         "tryMeButton": "INIZIAMO",
         "resumeButton": "RIPRENDI",

package/esm/styles.css

@@ -1,6 +1,7 @@
 @import url('./components/ui/Button.css');
 @import url('./components/ui/Card.css');
 @import url('./components/ui/Checkbox.css');
+@import url('./components/ui/ConfirmDialog.css');
 @import url('./components/ui/Drawer.css');
 @import url('./components/ui/Modal.css');
 @import url('./components/ui/Spin.css');
@@ -10,8 +11,7 @@
 @import url('./components/ui/Details.css');
 @import url('./components/ui/Expandable.css');
 @import url('./components/ui/Slider.css');
-@import url('./components/UploadButton/UploadButton.css');
-@import url('./components/FilePreview/FilePreview.css');
+@import url('./components/ui/Alert.css');
 
 @import url('./components/CompletionProviderStatus/CompletionProviderStatus.css');
 @import url('./components/PoweredBy/PoweredBy.css');
@@ -49,14 +49,16 @@
 @import url('./components/VenueWidget/VenueWidget.css');
 @import url('./components/WhyThisAnswer/WhyThisAnswer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
-@import url('./components/ui/Alert.css');
-@import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');
+@import url('./components/UploadButton/UploadButton.css');
+@import url('./components/FilePreview/FilePreview.css');
 
 @import url('./components/layouts/hidden-chat.css');
 @import url('./components/layouts/totem.css');
 @import url('./components/layouts/website-assistant.css');
 @import url('./components/layouts/chat.css');
 @import url('./components/layouts/zoomed-full-body.css');
+
+@import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');
 @import url('https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css');
 
 .sr-only {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.21.1",
+  "version": "7.23.0",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

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

@@ -22,6 +22,7 @@ exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
           <svg
             aria-hidden="true"
             class="blocked-memori-badge--icon"
+            color="currentColor"
             focusable="false"
             role="img"
             viewBox="0 0 1024 1024"
@@ -29,6 +30,7 @@ exports[`renders BlockedMemoriBadge for not enough credits unchanged 1`] = `
           >
             <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"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -60,6 +62,7 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
           <svg
             aria-hidden="true"
             class="blocked-memori-badge--icon"
+            color="currentColor"
             focusable="false"
             role="img"
             viewBox="0 0 1024 1024"
@@ -67,6 +70,7 @@ exports[`renders BlockedMemoriBadge unchanged 1`] = `
           >
             <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"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -102,6 +106,7 @@ memoriBlockedGiverHelper
           <svg
             aria-hidden="true"
             class="blocked-memori-badge--icon"
+            color="currentColor"
             focusable="false"
             role="img"
             viewBox="0 0 1024 1024"
@@ -109,6 +114,7 @@ memoriBlockedGiverHelper
           >
             <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"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -140,6 +146,7 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
           <svg
             aria-hidden="true"
             class="blocked-memori-badge--icon"
+            color="currentColor"
             focusable="false"
             role="img"
             viewBox="0 0 1024 1024"
@@ -147,6 +154,7 @@ exports[`renders BlockedMemoriBadge with margin left unchanged 1`] = `
           >
             <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"
+              fill="currentColor"
             />
           </svg>
         </div>
@@ -178,6 +186,7 @@ exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
           <svg
             aria-hidden="true"
             class="blocked-memori-badge--icon"
+            color="currentColor"
             focusable="false"
             role="img"
             viewBox="0 0 1024 1024"
@@ -185,6 +194,7 @@ exports[`renders BlockedMemoriBadge with title unchanged 1`] = `
           >
             <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"
+              fill="currentColor"
             />
           </svg>
         </div>

package/src/components/CompletionProviderStatus/CompletionProviderStatus.css

@@ -1,26 +1,36 @@
 .memori--completion-provider-status--icon {
-    width: 1em;
-    height: 1em;
-    fill: var(--memori-error-color, red);
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled).memori-tooltip--visible .memori-tooltip--content,
-.memori--completion-provider-status--tooltip.memori-tooltip.memori-tooltip--align-topLeft:not(.memori-tooltip--disabled):not(.memori-tooltip--visible):hover .memori-tooltip--content {
-    transform: translateY(calc(-100% - 2em)) translateX(3em);
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p {
-    margin: 0.5em auto;
-}
-
-.memori--completion-provider-status--tooltip.memori-tooltip .memori-tooltip--content p+p {
-    margin-top: 1em;
-}
-
-.memori--completion-provider-status--loading {
-    display: flex;
-    width: 100%;
-    height: 100%;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+  
+  .memori--completion-provider-status--loading {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-}
+  }
+  
+  .memori--completion-provider-status--icon-error {
+    color: #f5222d;
+  }
+  
+  .memori--completion-provider-status--icon-warning {
+    color: #faad14;
+  }
+  
+  .memori--completion-provider-status--icon-info {
+    color: #1890ff;
+  }
+  
+  .memori--completion-provider-status--tooltip {
+    max-width: 300px;
+  }
+  
+  .memori--completion-provider-status--tooltip p {
+    margin-bottom: 8px;
+  }
+  
+  .memori--completion-provider-status--tooltip p:last-child {
+    margin-bottom: 0;
+  }

package/src/components/CompletionProviderStatus/CompletionProviderStatus.stories.tsx

@@ -1,43 +1,296 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
 import CompletionProviderStatus, { Props } from './CompletionProviderStatus';
-
 import './CompletionProviderStatus.css';
 
+// Import the actual component for the live examples
+import I18nWrapper from '../../I18nWrapper';
+
+// Create a mock I18n provider instead of trying to replace useTranslation
+const MockI18nProvider = ({ children }: { children: React.ReactNode }) => {
+  // We'll create a wrapper component that provides the translation context
+  return <div className="mock-i18n-wrapper">{children}</div>;
+};
+
+// Mock wrapper that also provides example tooltips
+const MockI18nWrapper = ({ children, status }: { children: React.ReactNode, status?: string }) => {
+  return (
+    <MockI18nProvider>
+      <div className="mock-tooltip">
+        {children}
+        {status && (
+          <div className="mock-tooltip-content" style={{
+            position: 'absolute',
+            left: '50px',
+            top: '0',
+            backgroundColor: '#fff',
+            border: '1px solid #eee',
+            borderRadius: '5px',
+            padding: '10px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+            zIndex: 10,
+            width: '300px'
+          }}>
+            <p>{getStatusMessage(status)}</p>
+            <p><a href="#" onClick={(e) => e.preventDefault()}>Check the status page for updates</a></p>
+          </div>
+        )}
+      </div>
+    </MockI18nProvider>
+  );
+};
+
+// Helper function to get status messages
+const getStatusMessage = (status: string): string => {
+  switch (status) {
+    case 'major_outage':
+      return 'Mistral service is completely down. Please try again later.';
+    case 'partial_outage':
+      return 'Anthropic service is experiencing significant disruptions.';
+    case 'degraded_performance':
+      return 'OpenAI service is responding slower than usual.';
+    default:
+      return 'The service is currently experiencing issues.';
+  }
+};
+
 const meta: Meta = {
   title: 'Completion Provider Status',
   component: CompletionProviderStatus as React.ComponentType<any>,
-  argTypes: {},
   parameters: {
     layout: 'centered',
     controls: { expanded: true },
   },
 };
 
-export default meta;
+// Add real examples of the component for reference
+export const LiveExample_OpenAI_DegradedPerformance = () => (
+  <I18nWrapper>
+    <div style={{ padding: '20px' }}>
+      <h3>Live Component - OpenAI with Degraded Performance</h3>
+      <p>This is how the actual component will appear:</p>
+      <CompletionProviderStatus 
+        forceStatus="degraded_performance" 
+        provider="OpenAI" 
+      />
+    </div>
+  </I18nWrapper>
+);
+
+export const LiveExample_Anthropic_PartialOutage = () => (
+  <I18nWrapper>
+    <div style={{ padding: '20px' }}>
+      <h3>Live Component - Anthropic with Partial Outage</h3>
+      <p>This is how the actual component will appear:</p>
+      <CompletionProviderStatus 
+        forceStatus="partial_outage" 
+        provider="Anthropic" 
+      />
+    </div>
+  </I18nWrapper>
+);
 
-const Template: Story<Props> = args => (
+export const LiveExample_Mistral_MajorOutage = () => (
   <I18nWrapper>
-    <CompletionProviderStatus {...args} />
+    <div style={{ padding: '20px' }}>
+      <h3>Live Component - Mistral with Major Outage</h3>
+      <p>This is how the actual component will appear:</p>
+      <CompletionProviderStatus 
+        forceStatus="major_outage" 
+        provider="Mistral" 
+      />
+    </div>
   </I18nWrapper>
 );
 
-export const Default = Template.bind({});
-Default.args = {};
+export default meta;
 
-export const Errored = Template.bind({});
-Errored.args = {
-  forceStatus: 'major_outage',
-};
+// Status container to add some context around the icon
+const StatusContainer = ({ status, children }: { status: string, children: React.ReactNode }) => (
+  <div style={{ 
+    padding: '20px', 
+    border: '1px solid #eee', 
+    borderRadius: '5px', 
+    margin: '10px 0',
+    width: '500px'
+  }}>
+    <h3>{status}</h3>
+    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <div>{children}</div>
+      <div style={{ fontSize: '14px', color: '#888' }}>← Hover to see message</div>
+    </div>
+  </div>
+);
 
-export const WithSpecifiedProvider = Template.bind({});
-WithSpecifiedProvider.args = {
-  provider: 'OpenAI',
-};
+// Stories for each status type - we'll create visual examples instead of using the component
+export const AllStatusTypes = () => (
+  <div>
+    <h2>Status Alert Types</h2>
+    <p>Each alert has a different icon and color based on severity.</p>
+    
+    <StatusContainer status="Degraded Performance (Blue Info Icon)">
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ 
+          color: '#1890ff', 
+          width: '24px', 
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '1px solid #e8e8e8',
+          borderRadius: '50%',
+          backgroundColor: '#f0f5ff'
+        }}>
+          i
+        </div>
+        <div style={{ marginLeft: '10px' }}>
+          &quot;OpenAI service is responding slower than usual.&quot;
+        </div>
+      </div>
+    </StatusContainer>
+    
+    <StatusContainer status="Partial Outage (Yellow Warning Icon)">
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ 
+          color: '#faad14', 
+          width: '24px', 
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '1px solid #e8e8e8',
+          borderRadius: '50%',
+          backgroundColor: '#fffbe6'
+        }}>
+          ⚠️
+        </div>
+        <div style={{ marginLeft: '10px' }}>
+          &quot;Anthropic service is experiencing significant disruptions.&quot;
+        </div>
+      </div>
+    </StatusContainer>
+    
+    <StatusContainer status="Major Outage (Red Alert Icon)">
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ 
+          color: '#f5222d', 
+          width: '24px', 
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '1px solid #e8e8e8',
+          borderRadius: '50%',
+          backgroundColor: '#fff1f0'
+        }}>
+          ⚠️
+        </div>
+        <div style={{ marginLeft: '10px' }}>
+          &quot;Mistral service is completely down. Please try again later.&quot;
+        </div>
+      </div>
+    </StatusContainer>
+  </div>
+);
 
-export const ErroredWithSpecifiedProvider = Template.bind({});
-ErroredWithSpecifiedProvider.args = {
-  forceStatus: 'major_outage',
-  provider: 'OpenAI',
-};
+// Individual stories for each status using visual examples
+export const DegradedPerformance = () => (
+  <StatusContainer status="Degraded Performance (Blue Info Icon)">
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ 
+        color: '#1890ff', 
+        width: '24px', 
+        height: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid #e8e8e8',
+        borderRadius: '50%',
+        backgroundColor: '#f0f5ff'
+      }}>
+        i
+      </div>
+      <div style={{ marginLeft: '10px' }}>
+        &quot;OpenAI service is responding slower than usual.&quot;
+      </div>
+    </div>
+  </StatusContainer>
+);
+
+export const PartialOutage = () => (
+  <StatusContainer status="Partial Outage (Yellow Warning Icon)">
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ 
+        color: '#faad14', 
+        width: '24px', 
+        height: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid #e8e8e8',
+        borderRadius: '50%',
+        backgroundColor: '#fffbe6'
+      }}>
+        ⚠️
+      </div>
+      <div style={{ marginLeft: '10px' }}>
+        &quot;Anthropic service is experiencing significant disruptions.&quot;
+      </div>
+    </div>
+  </StatusContainer>
+);
+
+export const MajorOutage = () => (
+  <StatusContainer status="Major Outage (Red Alert Icon)">
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div style={{ 
+        color: '#f5222d', 
+        width: '24px', 
+        height: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: '1px solid #e8e8e8',
+        borderRadius: '50%',
+        backgroundColor: '#fff1f0'
+      }}>
+        ⚠️
+      </div>
+      <div style={{ marginLeft: '10px' }}>
+        &quot;Mistral service is completely down. Please try again later.&quot;
+      </div>
+    </div>
+  </StatusContainer>
+);
+
+// All statuses for each provider
+export const AllProvidersWithDifferentStatuses = () => (
+  <I18nWrapper>
+    <div>
+      <h2>Different Providers with Different Statuses</h2>
+      
+      <div style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        gap: '20px', 
+        padding: '20px', 
+        border: '1px solid #eee',
+        borderRadius: '5px',
+        marginBottom: '20px'
+      }}>
+        <div>
+          <h3>OpenAI - Real-time status</h3>
+          <CompletionProviderStatus provider="OpenAI"  />
+        </div>
+        <div>
+          <h3>Anthropic - Real-time status</h3>
+          <CompletionProviderStatus provider="Anthropic"  />
+        </div>
+        <div>
+          <h3>Mistral - Real-time status</h3>
+          <CompletionProviderStatus provider="Mistral"  />
+        </div>
+      </div>
+    </div>
+  </I18nWrapper>
+);