@memori.ai/memori-react 7.21.1 → 7.23.0

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState, useCallback } from 'react';
 import Tooltip from '../ui/Tooltip';
 import Warning from '../icons/Warning';
+import Alert from '../icons/Alert';
+import Info from '../icons/Info';
 import { useTranslation } from 'react-i18next';
 import Spin from '../ui/Spin';
 
@@ -19,40 +21,98 @@ export interface Props {
 interface ProviderConfig {
   statusUrl: string;
   statusPage: string;
+  apiComponentName?: string | string[]; // Component name(s) to look for
 }
 
 const PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
   OpenAI: {
     statusUrl: 'https://status.openai.com/api/v2/summary.json',
     statusPage: 'https://status.openai.com/',
+    apiComponentName: ['Chat', 'Completions (legacy)'],
   },
   Mistral: {
     statusUrl: 'https://status.mistral-data.com/api/v2/summary.json',
     statusPage: 'https://status.mistral-data.com/',
+    apiComponentName: ['Mistral'],
   },
   Anthropic: {
-    statusUrl: 'https://status.anthropic.com/api/v2/summary.json', 
+    statusUrl: 'https://status.anthropic.com/api/v2/summary.json',
     statusPage: 'https://status.anthropic.com/',
+    apiComponentName: ['api.anthropic.com'],
   },
 };
 
-// Modified to handle fetch errors and use cross-fetch
-const fetchProviderStatus = async (statusUrl: string): Promise<Status> => {
+// Modified to handle fetch errors, different component names, and check incidents
+const fetchProviderStatus = async (config: ProviderConfig): Promise<Status> => {
   try {
     // Use cross-fetch instead of native fetch
-    const response = await fetch(statusUrl);
-    
+    const response = await fetch(config.statusUrl);
     if (!response.ok) {
       console.warn(`Status API returned ${response.status}`);
       return 'operational'; // Fallback to operational on API errors
     }
-
+    
     const data = await response.json();
-    const apiComponent = data.components?.find(
-      (component: { name: string }) => component.name === 'API'
-    );
-
-    return apiComponent?.status as Status ?? 'operational';
+    
+    // Check for active incidents first
+    if (data.incidents && Array.isArray(data.incidents) && data.incidents.length > 0) {
+      const activeIncidents = data.incidents.filter(
+        (incident: { status: string }) => 
+          !['resolved', 'completed', 'postmortem'].includes(incident.status.toLowerCase())
+      );
+      
+      if (activeIncidents.length > 0) {
+        // If there are active incidents, determine the severity
+        const critical = activeIncidents.some((i: { impact: string }) => 
+          i.impact === 'critical' || i.impact === 'major'
+        );
+        const major = activeIncidents.some((i: { impact: string }) => 
+          i.impact === 'moderate'
+        );
+        
+        if (critical) return 'major_outage';
+        if (major) return 'partial_outage';
+        return 'degraded_performance';
+      }
+    }
+    
+    // If no incidents or they're all resolved, check specific API components
+    if (data.components) {
+      // First try with primary API component names
+      if (config.apiComponentName) {
+        const apiComponentNames = Array.isArray(config.apiComponentName) 
+          ? config.apiComponentName 
+          : [config.apiComponentName];
+        
+        for (const name of apiComponentNames) {
+          const apiComponent = data.components.find(
+            (component: { name: string }) => component.name === name
+          );
+          
+          if (apiComponent && apiComponent.status !== 'operational') {
+            return apiComponent.status as Status;
+          }
+        }
+      }
+      
+      // Check if any component is degraded (might indicate API issues)
+      const anyDegradedComponent = data.components.some(
+        (component: { status: string }) => component.status !== 'operational'
+      );
+      
+      if (anyDegradedComponent) {
+        return 'degraded_performance';
+      }
+    }
+    
+    // If no specific component issues found, check overall status
+    if (data.status && data.status.indicator !== 'none') {
+      if (data.status.indicator === 'critical') return 'major_outage';
+      if (data.status.indicator === 'major') return 'partial_outage';
+      if (data.status.indicator === 'minor') return 'degraded_performance';
+    }
+    
+    return 'operational'; // Default to operational if no issues detected
   } catch (error) {
     console.error('Error fetching provider status:', error);
     return 'operational'; // Fallback to operational on network errors
@@ -66,12 +126,11 @@ const CompletionProviderStatus = ({
   const { t } = useTranslation();
   const [status, setStatus] = useState<Status>(forceStatus ?? 'operational');
   const [isLoading, setIsLoading] = useState(false);
-
   const config = PROVIDER_CONFIGS[provider];
 
   const getStatus = useCallback(async () => {
     if (!config) return 'operational';
-    return fetchProviderStatus(config.statusUrl);
+    return fetchProviderStatus(config);
   }, [config]);
 
   useEffect(() => {
@@ -80,7 +139,6 @@ const CompletionProviderStatus = ({
 
     const checkStatus = async () => {
       if (forceStatus) return;
-      
       setIsLoading(true);
       try {
         const newStatus = await getStatus();
@@ -119,17 +177,55 @@ const CompletionProviderStatus = ({
     return null;
   }
 
+  // Get appropriate icon and message based on status severity
+  const getStatusDetails = () => {
+    switch (status) {
+      case 'major_outage':
+        return {
+          Icon: Alert,
+          message: t('completionProviderMajorOutage', {
+            provider: provider ?? t('completionProviderFallbackName'),
+            fallback: t('completionProviderDown', {
+              provider: provider ?? t('completionProviderFallbackName'),
+            })
+          }),
+          className: "memori--completion-provider-status--icon-error"
+        };
+      case 'partial_outage':
+        return {
+          Icon: Warning,
+          message: t('completionProviderPartialOutage', {
+            provider: provider ?? t('completionProviderFallbackName'),
+            fallback: t('completionProviderDown', {
+              provider: provider ?? t('completionProviderFallbackName'),
+            })
+          }),
+          className: "memori--completion-provider-status--icon-warning"
+        };
+      case 'degraded_performance':
+      default:
+        return {
+          Icon: Info,
+          message: t('completionProviderDegraded', {
+            provider: provider ?? t('completionProviderFallbackName'),
+            fallback: t('completionProviderDown', {
+              provider: provider ?? t('completionProviderFallbackName'),
+            })
+          }),
+          className: "memori--completion-provider-status--icon-info"
+        };
+    }
+  };
+
+  const { Icon, message, className } = getStatusDetails();
+
   return (
     <Tooltip
       className="memori--completion-provider-status--tooltip"
-      align="topLeft"
+      align="right"
       content={
         <div>
-          <p>
-            {t('completionProviderDown', {
-              provider: provider ?? t('completionProviderFallbackName'),
-            })}
-          </p>
+          <p>{message}</p>
           {config?.statusPage && (
             <p>
               <a
@@ -144,7 +240,7 @@ const CompletionProviderStatus = ({
         </div>
       }
     >
-      <Warning className="memori--completion-provider-status--icon" />
+      <Icon className={`memori--completion-provider-status--icon ${className}`} />
     </Tooltip>
   );
 };

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/StartPanel.css

@@ -218,3 +218,32 @@
     color: inherit;
     text-decoration: underline;
 }
+
+.memori--start-privacy-explanation-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.memori--start-privacy-explanation {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
+    font-size: 0.85em;
+    font-style: italic;
+    opacity: 0.85;
+}
+
+.memori--start-privacy-explanation-icon {
+    display: flex;
+    width: 1.2rem;
+    height: 1.2rem;
+    align-self: center;
+    margin-left: 0.5rem;
+}
+
+.memori--privacy-tooltip-content {
+    text-align: left;
+}
+
+.memori--privacy-tooltip-content-list {
+    padding-left: 1rem;
+}

package/src/components/StartPanel/StartPanel.tsx

@@ -20,6 +20,7 @@ import CompletionProviderStatus, {
   Props as CPSProps,
 } from '../CompletionProviderStatus/CompletionProviderStatus';
 import MapMarker from '../icons/MapMarker';
+import QuestionHelp from '../icons/QuestionHelp';
 
 export interface Props {
   memori: Memori;
@@ -245,6 +246,52 @@ const StartPanel: React.FC<Props> = ({
             </div>
           )}
 
+          <div className="memori--start-privacy-explanation-container">
+            <p className="memori--start-privacy-explanation">
+              {t('write_and_speak.pagePrivacyExplanation')}
+            </p>
+            <Tooltip
+              align="right"
+              content={
+                <div className="memori--privacy-tooltip-content">
+                  <p>
+                    {' '}
+                    {t(
+                      'write_and_speak.pagePrivacyExplanationList.allConversations'
+                    )}
+                  </p>
+                  <ul className="memori--privacy-tooltip-content-list">
+                    <li>
+                      {t(
+                        'write_and_speak.pagePrivacyExplanationList.anonymousUser'
+                      )}
+                    </li>
+                    <li>
+                      {t(
+                        'write_and_speak.pagePrivacyExplanationList.registeredUser'
+                      )}
+                    </li>
+                  </ul>
+                  <p>
+                    {t(
+                      'write_and_speak.pagePrivacyExplanationList.authorUsesInfo'
+                    )}
+                  </p>
+
+                  <a
+                    href={'https://memori.ai/en/privacy-policy'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t('privacyPolicy')}
+                  </a>
+                </div>
+              }
+            >
+              <QuestionHelp className="memori--start-privacy-explanation-icon" />
+            </Tooltip>
+          </div>
+
           <Button
             primary
             disabled={