@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/ChatHistoryDrawer/__snapshots__/ChatHistory.test.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ChatHistoryDrawer closed unchanged 1`] = `<div />`;
-
-exports[`renders ChatHistoryDrawer unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders ChatHistoryDrawer with chat logs unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;
-
-exports[`renders ChatHistoryDrawer with selected chat log unchanged 1`] = `
-<div>
-  <div
-    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
-  />
-</div>
-`;

package/src/components/ChatInputs/ChatInputs.css

@@ -1,340 +0,0 @@
-.memori-chat-inputs-wrapper {
-    position: sticky;
-    z-index: 10;
-    bottom: 0;
-    width: 100%;
-    padding: 0;
-    padding-bottom: 1.5rem;
-    margin: 0;
-    /* background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, transparent 100%); */
-}
-
-.memori-chat-inputs {
-    position: relative;
-    display: flex;
-    min-width: 98%;
-    max-width: 98%;
-    box-sizing: border-box;
-    flex-flow: column;
-    flex-shrink: 0;
-    padding: 0;
-    padding: 8px 12px !important;
-    border: none;
-    border-radius: 12px;
-    margin: 0;
-    margin: auto;
-    background: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.memori-chat-inputs:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-/* Wrapper so FilePreview horizontal scroll is constrained */
-.memori-chat-inputs--preview-wrapper {
-    overflow: hidden;
-    width: 100%;
-    min-width: 0;
-}
-
-.memori-chat-inputs--container {
-    position: relative;
-    display: grid;
-    width: 100%;
-    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
-    min-height: 56px;
-    box-sizing: border-box;
-    align-items: center;
-    padding: 0 1rem;
-    padding: 12px;
-    border-radius: var(--memori-border-radius);
-    /* max-width: 48rem; */
-    margin: 0 auto;
-    background: #fff;
-    gap: 0;
-    grid-template-areas: 'leading primary trailing';
-    grid-template-columns: auto 1fr auto;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .memori-chat-inputs--container {
-        padding: 0 0.5rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .memori-chat-inputs--container {
-        padding: 0 0.25rem;
-    }
-}
-
-.memori-chat-inputs--leading {
-    display: flex;
-    align-items: center;
-    padding-right: 6px;
-    grid-area: leading;
-}
-
-.memori-chat-inputs--primary {
-    display: flex;
-    overflow: hidden;
-    min-height: 36px;
-    align-items: center;
-    grid-area: primary;
-}
-
-.memori-chat-inputs--trailing {
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    grid-area: trailing;
-}
-
-.memori-chat-inputs--trailing-inner {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-/* Plus button styling */
-.memori-chat-inputs--upload-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-.memori-chat-inputs--upload-wrapper .memori--unified-upload-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-.memori-chat-inputs--upload-wrapper .memori-button {
-    display: flex;
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
-    color: #000 !important;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-}
-
-.memori-chat-inputs--upload-wrapper .memori-button:hover {
-    background: transparent !important;
-    opacity: 0.7;
-}
-
-.memori-chat-inputs--upload-wrapper .memori-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-}
-
-/* Icon class styling */
-.memori-chat-inputs--container .icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    fill: currentColor;
-}
-
-.memori-chat-inputs--disclaimer-text {
-    padding: 4px 12px;
-    border-radius: 10px;
-    margin-top: 2px;
-    background-color: var(--memori-inner-bg, transparent);
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 12px;
-    line-height: 1.5;
-    text-align: center;
-}
-
-/* Microphone button styling */
-.memori-chat-inputs--mic-btn {
-    display: flex;
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: #000;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-}
-
-.memori-chat-inputs--mic-btn:hover {
-    opacity: 0.7;
-}
-
-.memori-chat-inputs--mic-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-}
-
-.memori-chat-inputs--mic-btn svg,
-.memori-chat-inputs--mic-btn .icon {
-    width: 20px;
-    height: 20px;
-    fill: #000;
-}
-
-/* Ensure icons are black on white background */
-.memori-chat-inputs--leading .icon {
-    fill: #000;
-}
-
-.memori-chat-inputs--send-btn svg {
-    width: 20px;
-    height: 20px;
-    fill: #fff;
-}
-
-.memori-chat-inputs--send-btn .icon {
-    width: 20px;
-    height: 20px;
-    fill: #fff;
-}
-
-.memori-chat-inputs--upload-wrapper .memori-button svg,
-.memori-chat-inputs--upload-wrapper .memori-button .icon {
-    width: 20px;
-    height: 20px;
-    /* fill: #000; */
-}
-
-.memori-chat-inputs--trailing .memori-chat-inputs--mic-btn .icon {
-    fill: #000;
-}
-
-.memori-chat-inputs--mic-btn--listening {
-    color: #10a37f;
-}
-
-.memori-chat-inputs--mic {
-    font-size: 125%;
-}
-
-/* Style MicrophoneButton component when used in trailing area */
-.memori-chat-inputs--trailing .memori-chat-inputs--mic {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: #000;
-}
-
-.memori-chat-inputs--trailing .memori-chat-inputs--mic .memori-button {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: #000;
-}
-
-/* Send button styling - ChatGPT style */
-.memori-chat-inputs--send-btn {
-    display: flex;
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: none;
-    border-radius: var(--memori-border-radius);
-    background: #000;
-    background: var(--memori-chat-user-bubble-bg);
-    color: #fff;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.memori-chat-inputs--send-btn:disabled {
-    /* background: #f4f4f4; */
-    color: #f4f4f4;
-    cursor: not-allowed;
-    opacity: 0.3;
-}
-
-.memori-chat-inputs--send-btn:hover:not(:disabled) {
-    opacity: 0.7;
-}
-
-.memori-chat-inputs--trailing .memori-chat-inputs--mic svg {
-    width: 20px;
-    height: 20px;
-}
-
-.memori-chat-inputs--send-btn--active {
-    /* background: #000; */
-    color: #fff;
-}
-
-.memori-chat-inputs--send-btn--loading {
-    width: 16px;
-    height: 16px;
-    border: 2px solid currentColor;
-    border-radius: var(--memori-border-radius);
-    border-top-color: transparent;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Disclaimer styling */
-.memori-chat-inputs--disclaimer {
-    display: flex;
-    min-height: 32px;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 60px;
-    margin-top: -4px;
-    color: rgba(0, 0, 0, 0.6);
-    font-size: 12px;
-    line-height: 1.5;
-    text-align: center;
-}
-
-.memori-chat-inputs--disclaimer a {
-    color: rgba(0, 0, 0, 0.8);
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.memori-chat-inputs--disclaimer a:hover {
-    opacity: 0.8;
-}
-
-@media (max-width: 768px) {
-    .memori-chat-inputs--disclaimer {
-        padding: 8px 16px;
-    }
-}
-
-/* Legacy support for old button classes */
-.memori-chat-inputs .memori-upload-menu + .memori-send-on-enter-menu {
-    margin-left: 0.33rem;
-}
-
-.memori-chat-inputs .memori--conversation-button {
-    background: #fff;
-    color: #000;
-}

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -1,251 +0,0 @@
-import React, { useEffect } from 'react';
-import { Meta, Story } from '@storybook/react';
-import ChatInputs, { Props } from './ChatInputs';
-import I18nWrapper from '../../I18nWrapper';
-import { dialogState } from '../../mocks/data';
-
-import './ChatInputs.css';
-
-const meta: Meta = {
-  title: 'Widget/Chat inputs (footer)',
-  component: ChatInputs,
-  argTypes: {
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const text =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-    .split(' ')
-    .reverse();
-
-const Template: Story<Props> = args => {
-  const [userMessage, setUserMessage] = React.useState(args.userMessage);
-  const [listening, setListening] = React.useState(args.listening);
-  const startListening = () => setListening(true);
-  const stopListening = () => setListening(false);
-
-  useEffect(() => {
-    if (listening) {
-      const interval = setInterval(() => {
-        let nextWord = text.pop();
-
-        if (!nextWord) {
-          clearInterval(interval);
-          return;
-        }
-
-        setUserMessage(prev => `${prev || ''}${prev ? ' ' : ''}${nextWord}`);
-      }, Math.random() * 500 + 100);
-      return () => clearInterval(interval);
-    }
-  }, [listening]);
-
-  return (
-    <I18nWrapper>
-      <div style={{ paddingTop: '10rem' }}>
-        <ChatInputs
-          {...args}
-          listening={listening}
-          startListening={startListening}
-          stopListening={stopListening}
-          userMessage={userMessage}
-          onChangeUserMessage={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 = {
-  userMessage: '',
-  dialogState,
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  dialogState,
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-};
-
-export const WithLongText = Template.bind({});
-WithLongText.args = {
-  userMessage:
-    '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.',
-  dialogState,
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-};
-
-export const Instruct = Template.bind({});
-Instruct.args = {
-  instruct: true,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  dialogState: {
-    ...dialogState,
-    acceptsMedia: false,
-  },
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-};
-
-export const InstructAcceptingMedia = Template.bind({});
-InstructAcceptingMedia.args = {
-  instruct: true,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  dialogState: {
-    ...dialogState,
-    acceptsMedia: true,
-  },
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-  authToken: '123',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  dialogState: {
-    ...dialogState,
-    state: 'X3',
-  },
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-};
-
-export const ContinuousSpeech = Template.bind({});
-ContinuousSpeech.args = {
-  dialogState,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: false,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-  microphoneMode: 'CONTINUOUS',
-};
-
-export const ContinuousSpeechListening = Template.bind({});
-ContinuousSpeechListening.args = {
-  dialogState,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: true,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: true,
-  microphoneMode: 'CONTINUOUS',
-};
-
-export const WithUploadButton = Template.bind({});
-WithUploadButton.args = {
-  showUpload: true,
-};
-
-export const WithoutMicrophone = Template.bind({});
-WithoutMicrophone.args = {
-  dialogState,
-  userMessage: 'Suspendisse sit amet volutpat velit.',
-  sendMessage: (msg: string) => console.log(msg),
-  onTextareaBlur: () => {},
-  onTextareaFocus: () => {},
-  onTextareaPressEnter: () => {},
-  setAttachmentsMenuOpen: () => {},
-  setSendOnEnter: () => {},
-  listening: true,
-  isPlayingAudio: false,
-  stopAudio: () => {},
-  startListening: () => {},
-  stopListening: () => {},
-  showMicrophone: false,
-};