@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/ChatTextArea/ChatTextArea.stories.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import ChatTextArea, { Props } from './ChatTextArea';
-import I18nWrapper from '../../I18nWrapper';
-import './ChatTextArea.css';
-
-const meta: Meta = {
-  title: 'Widget/Chat textarea',
-  component: ChatTextArea,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [userMessage, setUserMessage] = React.useState(args.value);
-
-  return (
-    <I18nWrapper>
-      <div style={{ paddingTop: '10rem' }}>
-        <ChatTextArea {...args} value={userMessage} onChange={setUserMessage} />
-      </div>
-    </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
-export const Default = Template.bind({});
-Default.args = {
-  value: '',
-  onChange: () => {},
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  value: 'Suspendisse sit amet volutpat velit.',
-  onChange: () => {},
-};
-
-export const WithLongText = Template.bind({});
-WithLongText.args = {
-  value:
-    'Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.',
-  onChange: () => {},
-};

package/src/components/ChatTextArea/ChatTextArea.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import ChatTextArea from './ChatTextArea';
-
-it('renders ChatTextArea unchanged', () => {
-  const { container } = render(<ChatTextArea value="" onChange={jest.fn()} />);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ChatTextArea with value unchanged', () => {
-  const { container } = render(
-    <ChatTextArea
-      value="Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor."
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders ChatTextArea with long text unchanged', () => {
-  const { container } = render(
-    <ChatTextArea
-      value="Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur."
-      onChange={jest.fn()}
-    />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -1,171 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import cx from 'classnames';
-import Button from '../ui/Button';
-import Expand from '../icons/Expand';
-import FullscreenExit from '../icons/FullscreenExit';
-import { useTranslation } from 'react-i18next';
-import { isMobileOrTablet } from '../../helpers/utils';
-
-export interface Props {
-  disabled?: boolean;
-  value: string;
-  onChange: (value: string) => void;
-  onPressEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  onPaste?: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
-  onFocus?: (e: React.FocusEvent) => void;
-  onBlur?: (e: React.FocusEvent) => void;
-  onExpandedChange?: (expanded: boolean) => void;
-  /** When set, shows a character counter (e.g. "0 / 500") above the textarea and enforces the max length. */
-  maxTextareaCharacters?: number;
-}
-
-const ChatTextArea: React.FC<Props> = ({
-  disabled = false,
-  value,
-  onChange,
-  onPressEnter,
-  onPaste,
-  onFocus,
-  onBlur,
-  onExpandedChange,
-  maxTextareaCharacters,
-}) => {
-  const { t } = useTranslation();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const innerRef = useRef<HTMLDivElement>(null);
-  const MIN_HEIGHT = 36;
-  const MAX_HEIGHT = 208;
-
-  // Auto-expand textarea based on content (only when not manually expanded)
-  useEffect(() => {
-    const textarea = textareaRef.current;
-    const inner = innerRef.current;
-
-    if (textarea && inner) {
-      if (value.length === 0) {
-        textarea.style.height = `${MIN_HEIGHT}px`;
-        inner.style.height = `${MIN_HEIGHT}px`;
-        if (onExpandedChange) {
-          onExpandedChange(false);
-        }
-        //reset the padding bottom of the chat
-        const chat = document.getElementsByClassName('memori-chat--content');
-        if (chat) {
-          const lastChild = chat[chat.length - 1];
-          if (lastChild) {
-            (lastChild as HTMLElement).style.paddingBottom = '0px';
-          }
-        }
-      } else {
-        textarea.style.height = 'auto';
-        const scrollHeight = textarea.scrollHeight;
-        const newHeight = Math.min(Math.max(scrollHeight, MIN_HEIGHT), MAX_HEIGHT);
-        textarea.style.height = `${newHeight}px`;
-        inner.style.height = `${newHeight}px`;
-
-        //set the padding bottom to the chat in order to keep the whole chat visible
-        // take last child of chat wrapper and set the padding bottom to the height of the textarea
-        const chat = document.getElementsByClassName('memori-chat--content');
-        if (chat) {
-        const lastChild = chat[chat.length - 1];
-          if (lastChild) {
-            // (lastChild as HTMLElement).style.paddingBottom = `${newHeight}px`;
-            //then scroll to the bottom of the chat
-            (chat[0] as HTMLElement).scrollTo({
-              top: (chat[0] as HTMLElement).scrollHeight,
-              behavior: 'smooth'
-            });
-          }
-        }
-      }
-    }
-  }, [value]);
-
-  const displayValue =
-    maxTextareaCharacters != null
-      ? value.slice(0, maxTextareaCharacters)
-      : value;
-
-  // Keep parent state in sync when value exceeds limit (e.g. paste or prop change)
-  useEffect(() => {
-    if (
-      maxTextareaCharacters != null &&
-      value.length > maxTextareaCharacters
-    ) {
-      onChange(value.slice(0, maxTextareaCharacters));
-    }
-  }, [maxTextareaCharacters, value, onChange]);
-
-  return (
-    <div
-      data-testid="chat-textarea"
-      className={cx('memori-chat-textarea', {
-        'memori-chat-textarea--disabled': disabled,
-        'memori-chat-textarea--with-counter': maxTextareaCharacters != null,
-      })}
-    >
-      {maxTextareaCharacters != null && (
-        <div className="memori-chat-textarea--counter" aria-live="polite">
-          {displayValue.length} / {maxTextareaCharacters}
-        </div>
-      )}
-      <div ref={innerRef} className="memori-chat-textarea--inner">
-        <textarea
-          ref={textareaRef}
-          className="memori-chat-textarea--input"
-          disabled={disabled}
-          value={displayValue}
-          placeholder={t('placeholder', 'Ask a question') || 'Ask a question'}
-          onChange={e => {
-            const next = e.target.value;
-            if (maxTextareaCharacters != null) {
-              onChange(next.slice(0, maxTextareaCharacters));
-            } else {
-              onChange(next);
-            }
-          }}
-          onKeyDownCapture={e => {
-            // On mobile/tablet only: Enter creates a new line instead of sending.
-            // Touch laptops (e.g. Surface) keep desktop behavior: Enter = send, Alt/Shift+Enter = new line.
-            const isMobile = isMobileOrTablet();
-            // Alt/Option+Enter should always create a newline (do not send).
-            // We insert it manually because this is a controlled textarea and
-            // some browser/keyboard combos won't trigger an input event as expected.
-            if (e.key === 'Enter' && e.altKey && !e.shiftKey && !isMobile) {
-              e.preventDefault();
-
-              const el = textareaRef.current;
-              const start = el?.selectionStart ?? displayValue.length;
-              const end = el?.selectionEnd ?? displayValue.length;
-              let nextValue = `${displayValue.slice(0, start)}\n${displayValue.slice(end)}`;
-              if (maxTextareaCharacters != null) {
-                nextValue = nextValue.slice(0, maxTextareaCharacters);
-              }
-              onChange(nextValue);
-
-              // Restore caret right after the inserted newline
-              requestAnimationFrame(() => {
-                if (!el) return;
-                const caret = start + 1;
-                el.selectionStart = caret;
-                el.selectionEnd = caret;
-              });
-
-              return;
-            }
-
-            if (e.key === 'Enter' && !e.shiftKey && onPressEnter && !isMobile) {
-              onPressEnter(e);
-            }
-          }}
-          onPaste={onPaste}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          maxLength={maxTextareaCharacters ?? 100000}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ChatTextArea;

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

@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ChatTextArea unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat-textarea"
-    data-testid="chat-textarea"
-  >
-    <div
-      class="memori-chat-textarea--inner"
-      style="height: 36px;"
-    >
-      <textarea
-        class="memori-chat-textarea--input"
-        maxlength="100000"
-        placeholder="placeholder"
-        style="height: 36px;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ChatTextArea with long text unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat-textarea"
-    data-testid="chat-textarea"
-  >
-    <div
-      class="memori-chat-textarea--inner"
-      style="height: 36px;"
-    >
-      <textarea
-        class="memori-chat-textarea--input"
-        maxlength="100000"
-        placeholder="placeholder"
-        style="height: 36px;"
-      >
-        Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur. Suspendisse sit amet volutpat velit. Nunc at commodo tortor, id rutrum nunc. Vivamus condimentum vel nunc et congue. Ut laoreet imperdiet nisi ac finibus. Suspendisse molestie risus a justo sagittis efficitur.
-      </textarea>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders ChatTextArea with value unchanged 1`] = `
-<div>
-  <div
-    class="memori-chat-textarea"
-    data-testid="chat-textarea"
-  >
-    <div
-      class="memori-chat-textarea--inner"
-      style="height: 36px;"
-    >
-      <textarea
-        class="memori-chat-textarea--input"
-        maxlength="100000"
-        placeholder="placeholder"
-        style="height: 36px;"
-      >
-        Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
-      </textarea>
-    </div>
-  </div>
-</div>
-`;

package/src/components/CompletionProviderStatus/CompletionProviderStatus.css

@@ -1,36 +0,0 @@
-.memori--completion-provider-status--icon {
-    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,296 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-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>,
-  parameters: {
-    layout: 'centered',
-    controls: { expanded: true },
-  },
-};
-
-// 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>
-);
-
-export const LiveExample_Mistral_MajorOutage = () => (
-  <I18nWrapper>
-    <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 default meta;
-
-// 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>
-);
-
-// 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>
-);
-
-// 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>
-);

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import CompletionProviderStatus from './CompletionProviderStatus';
-
-it('renders CompletionProviderStatus unchanged', () => {
-  const { container } = render(
-    <CompletionProviderStatus forceStatus="major_outage" />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders CompletionProviderStatus errored unchanged', () => {
-  const { container } = render(
-    <CompletionProviderStatus forceStatus="major_outage" />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders CompletionProviderStatus with provider specified unchanged', () => {
-  const { container } = render(
-    <CompletionProviderStatus provider="OpenAI" forceStatus="operational" />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders CompletionProviderStatus errored with provider specified unchanged', () => {
-  const { container } = render(
-    <CompletionProviderStatus provider="OpenAI" forceStatus="major_outage" />
-  );
-  expect(container).toMatchSnapshot();
-});