@memori.ai/memori-react 8.45.2 → 8.45.4

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -1,232 +0,0 @@
-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';
-
-type Status =
-  | 'operational'
-  | 'degraded_performance'
-  | 'partial_outage'
-  | 'major_outage'
-  | undefined;
-
-export interface Props {
-  forceStatus?: Status;
-  provider?: string;
-}
-
-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'],
-  },
-  // Use status.claude.com directly: status.anthropic.com 302-redirects and
-  // browsers block the redirected response (missing CORS on the redirect).
-  Anthropic: {
-    statusUrl: 'https://status.claude.com/api/v2/summary.json',
-    statusPage: 'https://status.claude.com/',
-    apiComponentName: [
-      'Claude API (api.anthropic.com)',
-      'api.anthropic.com',
-    ],
-  },
-};
-
-// Modified to handle fetch errors, different component names, and check incidents
-const fetchProviderStatus = async (config: ProviderConfig): Promise<Status> => {
-  try {
-    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();
-    
-    // Skip incident checking - just rely on component status which is more reliable
-    
-    // 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
-  }
-};
-
-const CompletionProviderStatus = ({
-  forceStatus,
-  provider = 'Anthropic',
-}: Props) => {
-  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);
-  }, [config]);
-
-  useEffect(() => {
-    let mounted = true;
-    const abortController = new AbortController();
-
-    const checkStatus = async () => {
-      if (forceStatus) return;
-      setIsLoading(true);
-      try {
-        const newStatus = await getStatus();
-        if (mounted) {
-          setStatus(newStatus);
-        }
-      } catch (error) {
-        console.error('Failed to check status:', error);
-        if (mounted) {
-          setStatus('operational'); // Fallback on error
-        }
-      } finally {
-        if (mounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    checkStatus();
-
-    return () => {
-      mounted = false;
-      abortController.abort();
-    };
-  }, [forceStatus, getStatus]);
-
-  if (isLoading) {
-    return (
-      <div className="memori--completion-provider-status--loading">
-        <Spin spinning={true} />
-      </div>
-    );
-  }
-
-  if (!status || status === 'operational') {
-    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="right"
-      content={
-        <div>
-          <p>{message}</p>
-          {config?.statusPage && (
-            <p>
-              <a
-                href={config.statusPage}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                {t('completionProviderCheckStatusPage')}
-              </a>
-            </p>
-          )}
-        </div>
-      }
-    >
-      <Icon className={`memori--completion-provider-status--icon ${className}`} />
-    </Tooltip>
-  );
-};
-
-export default CompletionProviderStatus;

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

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders CompletionProviderStatus errored unchanged 1`] = `
-<div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
-  >
-    <div
-      class="memori-tooltip--trigger"
-    >
-      <svg
-        aria-hidden="true"
-        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="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>
-  </div>
-</div>
-`;
-
-exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
-<div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
-  >
-    <div
-      class="memori-tooltip--trigger"
-    >
-      <svg
-        aria-hidden="true"
-        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="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>
-  </div>
-</div>
-`;
-
-exports[`renders CompletionProviderStatus unchanged 1`] = `
-<div>
-  <div
-    class="memori-tooltip memori-tooltip--align-right memori--completion-provider-status--tooltip"
-  >
-    <div
-      class="memori-tooltip--trigger"
-    >
-      <svg
-        aria-hidden="true"
-        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="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>
-  </div>
-</div>
-`;
-
-exports[`renders CompletionProviderStatus with provider specified unchanged 1`] = `<div />`;

package/src/components/ContentPreviewModal/ContentPreviewModal.css

@@ -1,128 +0,0 @@
-/* ContentPreviewModal – modern preview modal for files and media */
-
-/* Stack above Chat History Drawer (z-index: 10000) and other drawers */
-.memori-content-preview-modal.memori-modal {
-  z-index: 10001;
-}
-
-.memori-content-preview-modal.memori-modal .memori-modal--backdrop,
-.memori-content-preview-modal.memori-modal .memori-modal--container {
-  z-index: 10001;
-}
-
-.memori-content-preview-modal.memori-modal .memori-modal--panel {
-  z-index: 10001;
-  overflow: hidden;
-  min-width: 500px;
-  min-height: 500px;
-  border-radius: 16px;
-  background: var(--memori-content-preview-bg, #fafafa);
-  box-shadow:
-    0 25px 50px -12px rgba(0, 0, 0, 0.25),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-  overflow-y: auto;
-}
-
-/* Image variant: modal at least 600px wide (capped by viewport on small screens) */
-.memori-content-preview-modal--image.memori-modal .memori-modal--panel {
-  min-width: min(600px, 100vw);
-}
-
-.memori-content-preview-modal .memori-modal--title {
-  padding: 1rem 1.25rem 0.75rem;
-  border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
-  color: var(--memori-content-preview-title, #1f2937);
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.memori-content-preview-modal .memori-modal--close {
-  top: 0.75rem;
-  right: 0.75rem;
-}
-
-.memori-content-preview-modal .memori-modal--close button {
-  border-radius: 10px;
-  background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
-  transition: background 0.2s ease, transform 0.15s ease;
-}
-
-.memori-content-preview-modal .memori-modal--close button:hover {
-  background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
-  transform: scale(1.05);
-}
-
-/* Body area */
-.memori-content-preview-modal--body {
-  overflow: auto;
-  max-height: 70vh;
-  padding: 1.25rem;
-}
-
-.memori-content-preview-modal--body--image {
-  display: flex;
-  min-height: 400px;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  background: var(--memori-content-preview-image-bg, #f3f4f6);
-}
-
-.memori-content-preview-modal--body--content {
-  padding: 1rem 1.25rem;
-}
-
-/* Image */
-.memori-content-preview-modal--image-wrap {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  align-items: center;
-  justify-content: center;
-}
-
-.memori-content-preview-modal--image {
-  width: 100%;
-  height: 100%;
-  max-height: 70vh;
-  border-radius: 8px;
-  object-fit: contain;
-}
-
-/* Snippet / text content area */
-.memori-content-preview-modal--snippet-wrap {
-  min-height: 120px;
-  border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
-  border-radius: 12px;
-  background: var(--memori-content-preview-snippet-bg, #f8fafc);
-  color: var(--memori-content-preview-snippet-text, #334155);
-  font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-/* When Snippet component is used inside, give it consistent spacing */
-.memori-content-preview-modal--snippet-wrap .memori-snippet {
-  border: none;
-  border-radius: 12px;
-  background: transparent;
-  box-shadow: none;
-}
-
-.memori-content-preview-modal--snippet-wrap .memori-snippet--content pre {
-  padding: 1rem 1.25rem;
-  overflow-wrap: break-word;
-  /* Override Prism theme so PDF/text content wraps instead of one long line */
-  white-space: pre-wrap !important;
-  word-break: break-word;
-}
-
-.memori-content-preview-modal--snippet-wrap .memori-snippet--content pre code {
-  overflow-wrap: break-word;
-  white-space: pre-wrap !important;
-  word-break: break-word;
-}

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,67 +0,0 @@
-import React, { FC } from 'react';
-import Modal from '../ui/Modal';
-import cx from 'classnames';
-
-export interface ContentPreviewModalProps {
-  open: boolean;
-  onClose: () => void;
-  title?: string;
-  /** When true, renders image with min 600px width; otherwise renders children in snippet-style area */
-  isImage?: boolean;
-  imageSrc?: string;
-  imageAlt?: string;
-  /** Content for non-image preview (text, Snippet, iframe, etc.) */
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
-  open,
-  onClose,
-  title,
-  isImage = false,
-  imageSrc,
-  imageAlt = '',
-  children,
-  className,
-}) => {
-  const width = 'min(90vw, 800px)';
-
-  return (
-    <Modal
-      open={open}
-      onClose={() => onClose()}
-      width={width}
-      widthMd={width}
-      className={cx('memori-content-preview-modal', className, {
-        'memori-content-preview-modal--image': isImage,
-      })}
-      closable
-      title={title}
-      footer={null}
-    >
-      <div
-        className={cx('memori-content-preview-modal--body', {
-          'memori-content-preview-modal--body--image': isImage,
-          'memori-content-preview-modal--body--content': !isImage,
-        })}
-      >
-        {isImage && imageSrc ? (
-          <div className="memori-content-preview-modal--image-wrap">
-            <img
-              src={imageSrc}
-              alt={imageAlt}
-              className="memori-content-preview-modal--image"
-            />
-          </div>
-        ) : (
-          <div className="memori-content-preview-modal--snippet-wrap">
-            {children}
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-export default ContentPreviewModal;

package/src/components/ContentPreviewModal/index.ts

@@ -1,2 +0,0 @@
-export { default } from './ContentPreviewModal';
-export type { ContentPreviewModalProps } from './ContentPreviewModal';

package/src/components/CustomGLBModelViewer/ModelViewer.css

@@ -1,11 +0,0 @@
-model-viewer {
-    max-width: 100%;
-    height: 400px;
-    --poster-color: transparent;
-}
-
-@media (max-width: 800px) {
-    model-viewer {
-        height: 300px;
-    }
-}

package/src/components/CustomGLBModelViewer/ModelViewer.stories.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ModelViewer, { Props } from './ModelViewer';
-import './ModelViewer.css';
-
-const meta: Meta = {
-  title: 'Custom GLB Avatar',
-  component: ModelViewer,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    poster: {
-      control: {
-        type: 'text',
-      },
-    },
-    alt: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [hydrated, setHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setHydrated(true);
-  }, []);
-
-  return hydrated ? (
-    <ModelViewer
-      {...args}
-      src={args.src + `#${new Date(Date.now()).toISOString()}`}
-      key={Date.now()}
-    />
-  ) : (
-    <></>
-  );
-};
-
-// 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
-export const Default = Template.bind({});
-Default.args = {
-  alt: '',
-  src: 'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-  poster:
-    'https://assets.memori.ai/api/v2/asset/596382ce-381a-4a66-9740-c7adc3bfa4a8.png',
-};

package/src/components/CustomGLBModelViewer/ModelViewer.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import ModelViewer from './ModelViewer';
-
-it('renders ModelViewer unchanged', () => {
-  const { container } = render(
-    <ModelViewer
-      src="https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb"
-      poster="https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png"
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/CustomGLBModelViewer/ModelViewer.tsx

@@ -1,37 +0,0 @@
-import React, { useEffect } from 'react';
-
-export interface Props {
-  src: string;
-  poster: string;
-  alt?: string;
-}
-
-const ModelViewer = ({ src, poster, alt = '' }: Props) => {
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src =
-      'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js';
-    script.type = 'module';
-    document.head.appendChild(script);
-    return () => {
-      document.head.removeChild(script);
-    };
-  }, []);
-  return (
-    <div className="model-viewer">
-      {/* @ts-ignore */}
-      <model-viewer
-        src={src}
-        ios-src=""
-        poster={poster}
-        alt={alt}
-        shadow-intensity="1"
-        disable-zoom
-        camera-controls
-        autoplay
-      />
-    </div>
-  );
-};
-
-export default ModelViewer;

package/src/components/CustomGLBModelViewer/__snapshots__/ModelViewer.test.tsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ModelViewer unchanged 1`] = `
-<div>
-  <div
-    class="model-viewer"
-  >
-    <model-viewer
-      alt=""
-      autoplay="true"
-      camera-controls="true"
-      disable-zoom="true"
-      ios-src=""
-      poster="https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png"
-      shadow-intensity="1"
-      src="https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb"
-    />
-  </div>
-</div>
-`;