npm - @memori.ai/memori-react - Versions diffs - 8.8.5 → 8.9.0 - Mend

@memori.ai/memori-react 8.8.5 → 8.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/src/components/Chat/Chat.stories.tsx CHANGED Viewed

@@ -39,9 +39,9 @@ const Template: Story<Props> = args => {
   return (
     <I18nWrapper>
       <ArtifactProvider>
-      <Chat
-        {...args}
-        userMessage={userMessage}
+        <Chat
+          {...args}
+          userMessage={userMessage}
           onChangeUserMessage={setUserMessage}
         />
       </ArtifactProvider>
@@ -100,7 +100,6 @@ WithHints.args = {
   setSendOnEnter: () => {},
 };
 export const WithArtifacts = Template.bind({});
 WithArtifacts.args = {
   memori,
@@ -327,7 +326,6 @@ WithCustomUserAvatarAsElement.args = {
   setSendOnEnter: () => {},
 };
 export const WithExpandable = Template.bind({});
 WithExpandable.args = {
   memori,
@@ -342,6 +340,434 @@ WithExpandable.args = {
   resetTranscript: () => {},
 };
+export const WithMultipleArtifactsInOneMessage = Template.bind({});
+WithMultipleArtifactsInOneMessage.args = {
+  memori,
+  tenant,
+  sessionID,
+  history: [
+    {
+      text: 'Can you help me build a landing page?',
+      fromUser: true,
+      timestamp: '2021-03-01T12:00:00.000Z',
+    },
+    {
+      text: `I'll create a complete landing page with HTML, CSS, and JavaScript for you:
+<output class="memori-artifact" data-mimetype="html" data-title="Landing Page HTML">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Product Landing Page</title>
+</head>
+<body>
+  <header class="hero">
+    <h1>Welcome to Our Amazing Product</h1>
+    <p>The solution you've been waiting for</p>
+    <button id="ctaButton" class="cta-button">Get Started</button>
+  </header>
+  <section class="features">
+    <div class="feature">
+      <h3>⚡ Fast</h3>
+      <p>Lightning-quick performance</p>
+    </div>
+    <div class="feature">
+      <h3>🔒 Secure</h3>
+      <p>Enterprise-grade security</p>
+    </div>
+    <div class="feature">
+      <h3>📱 Responsive</h3>
+      <p>Works on all devices</p>
+    </div>
+  </section>
+</body>
+</html>
+</output>
+<output class="memori-artifact" data-mimetype="css" data-title="Landing Page Styles">
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+.hero {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  padding: 100px 20px;
+}
+.hero h1 {
+  font-size: 3rem;
+  margin-bottom: 20px;
+  animation: fadeInUp 0.8s ease-out;
+}
+.hero p {
+  font-size: 1.5rem;
+  margin-bottom: 30px;
+  opacity: 0.9;
+}
+.cta-button {
+  background: white;
+  color: #667eea;
+  border: none;
+  padding: 15px 40px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+.cta-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 40px;
+  padding: 80px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.feature {
+  text-align: center;
+  padding: 30px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+}
+.feature:hover {
+  transform: translateY(-5px);
+}
+.feature h3 {
+  font-size: 2rem;
+  margin-bottom: 15px;
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</output>
+<output class="memori-artifact" data-mimetype="javascript" data-title="Landing Page Script">
+// Add interactivity to the landing page
+document.addEventListener('DOMContentLoaded', () => {
+  const ctaButton = document.getElementById('ctaButton');
+  if (ctaButton) {
+    ctaButton.addEventListener('click', () => {
+      // Smooth scroll animation
+      const features = document.querySelector('.features');
+      if (features) {
+        features.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
+      // Show a welcome message
+      setTimeout(() => {
+        alert('Welcome! Explore our amazing features below 🚀');
+      }, 500);
+    });
+    // Add pulse animation on hover
+    ctaButton.addEventListener('mouseenter', () => {
+      ctaButton.style.animation = 'pulse 0.5s ease';
+    });
+    ctaButton.addEventListener('animationend', () => {
+      ctaButton.style.animation = '';
+    });
+  }
+  // Add scroll reveal effect to features
+  const features = document.querySelectorAll('.feature');
+  const observerOptions = {
+    threshold: 0.2,
+    rootMargin: '0px 0px -50px 0px'
+  };
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry, index) => {
+      if (entry.isIntersecting) {
+        setTimeout(() => {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }, index * 100);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+  features.forEach(feature => {
+    feature.style.opacity = '0';
+    feature.style.transform = 'translateY(20px)';
+    feature.style.transition = 'all 0.6s ease';
+    observer.observe(feature);
+  });
+});
+// Add dynamic CSS for pulse animation
+const style = document.createElement('style');
+style.textContent = \`
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+  }
+\`;
+document.head.appendChild(style);
+</output>
+I've created three artifacts for you:
+1. **HTML** - The page structure with a hero section and feature cards
+2. **CSS** - Beautiful styling with gradients, animations, and responsive design
+3. **JavaScript** - Interactive features including smooth scrolling and scroll animations
+Click on each card to view and customize the code!`,
+      timestamp: '2021-03-01T12:01:00.000Z',
+    },
+  ],
+  dialogState,
+  layout: 'DEFAULT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
+export const WithMultipleArtifactsInChatlogPanel = Template.bind({});
+WithMultipleArtifactsInChatlogPanel.args = {
+  memori,
+  tenant,
+  sessionID,
+  isChatlogPanel: true,
+  history: [
+    {
+      text: 'Show me a React component with its styles and tests',
+      fromUser: true,
+      timestamp: '2021-03-01T12:00:00.000Z',
+    },
+    {
+      text: `Here's a complete React component setup with TypeScript, styles, and tests:
+<output class="memori-artifact" data-mimetype="typescript" data-title="Button.tsx">
+import React from 'react';
+import './Button.css';
+interface ButtonProps {
+  label: string;
+  onClick?: () => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+}
+export const Button: React.FC<ButtonProps> = ({
+  label,
+  onClick,
+  variant = 'primary',
+  disabled = false,
+}) => {
+  return (
+    <button
+      className={\`btn btn-\${variant}\`}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+    >
+      {label}
+    </button>
+  );
+};
+</output>
+<output class="memori-artifact" data-mimetype="css" data-title="Button.css">
+.btn {
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+.btn-secondary:hover:not(:disabled) {
+  background: #5a6268;
+}
+.btn-danger {
+  background: #dc3545;
+  color: white;
+}
+.btn-danger:hover:not(:disabled) {
+  background: #c82333;
+}
+</output>
+<output class="memori-artifact" data-mimetype="typescript" data-title="Button.test.tsx">
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './Button';
+describe('Button Component', () => {
+  it('renders with correct label', () => {
+    render(<Button label="Click me" />);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button label="Click me" onClick={handleClick} />);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  it('applies correct variant class', () => {
+    const { rerender } = render(<Button label="Test" variant="primary" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-primary');
+    rerender(<Button label="Test" variant="secondary" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-secondary');
+    rerender(<Button label="Test" variant="danger" />);
+    expect(screen.getByRole('button')).toHaveClass('btn-danger');
+  });
+  it('is disabled when disabled prop is true', () => {
+    const handleClick = jest.fn();
+    render(<Button label="Click me" onClick={handleClick} disabled />);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    fireEvent.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+  it('has correct accessibility attributes', () => {
+    render(<Button label="Submit Form" />);
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Submit Form');
+  });
+});
+</output>
+<output class="memori-artifact" data-mimetype="markdown" data-title="Button Documentation">
+# Button Component
+A reusable button component with multiple variants and full TypeScript support.
+## Usage
+\`\`\`tsx
+import { Button } from './Button';
+function App() {
+  return (
+    <Button
+      label="Click me"
+      variant="primary"
+      onClick={() => console.log('Clicked!')}
+    />
+  );
+}
+\`\`\`
+## Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| label | string | required | Button text content |
+| onClick | function | - | Click handler function |
+| variant | 'primary' \\| 'secondary' \\| 'danger' | 'primary' | Button style variant |
+| disabled | boolean | false | Disabled state |
+## Variants
+- **primary**: Main action button with gradient background
+- **secondary**: Secondary actions with gray background
+- **danger**: Destructive actions with red background
+## Accessibility
+- Uses semantic \`<button>\` element
+- Includes \`aria-label\` attribute
+- Keyboard accessible
+- Proper disabled state handling
+## Testing
+Run tests with:
+\`\`\`bash
+npm test Button.test.tsx
+\`\`\`
+</output>
+You now have a complete component with implementation, styles, tests, and documentation! Each artifact can be clicked to view and modify.`,
+      timestamp: '2021-03-01T12:01:00.000Z',
+    },
+  ],
+  dialogState,
+  layout: 'CHAT',
+  simulateUserPrompt: () => {},
+  sendMessage: (msg: string) => console.log(msg),
+  stopListening: () => {},
+  resetTranscript: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+};
 export const WithLongHTMLTable = Template.bind({});
 WithLongHTMLTable.args = {
@@ -360,7 +786,7 @@ WithUploads.args = {
   sessionID,
   history: [
     {
-      text: "Ciao! Sono qui per aiutarti. Puoi condividere con me documenti, immagini o link che vorresti che analizzi.",
+      text: 'Ciao! Sono qui per aiutarti. Puoi condividere con me documenti, immagini o link che vorresti che analizzi.',
       timestamp: '2021-03-01T12:00:00.000Z',
     },
     {
@@ -513,7 +939,7 @@ WithAllMediaTypes.args = {
   sessionID,
   history: [
     {
-      text: "Ciao! Sono qui per aiutarti. Posso gestire molti tipi di file e contenuti multimediali. Dimmi cosa ti serve!",
+      text: 'Ciao! Sono qui per aiutarti. Posso gestire molti tipi di file e contenuti multimediali. Dimmi cosa ti serve!',
       timestamp: '2021-03-01T12:00:00.000Z',
     },
     {
@@ -753,9 +1179,44 @@ build-storybook = "build-storybook"`,
       fromUser: true,
       timestamp: '2021-03-01T12:04:00.000Z',
       text: 'E anche file di configurazione e dati strutturati:\n\n<document_attachment filename="database.sql" type="text/sql">-- Schema del database\nCREATE TABLE users (\n  id SERIAL PRIMARY KEY,\n  username VARCHAR(50) UNIQUE NOT NULL,\n  email VARCHAR(100) UNIQUE NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\nCREATE TABLE posts (\n  id SERIAL PRIMARY KEY,\n  user_id INTEGER REFERENCES users(id),\n  title VARCHAR(200) NOT NULL,\n  content TEXT,\n  published BOOLEAN DEFAULT FALSE,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Indici per performance\nCREATE INDEX idx_posts_user_id ON posts(user_id);\nCREATE INDEX idx_posts_published ON posts(published);</document_attachment>\n\n<document_attachment filename="data.xml" type="text/xml"><?xml version="1.0" encoding="UTF-8"?>\n<root>\n  <users>\n    <user id="1">\n      <name>Mario Rossi</name>\n      <email>mario@example.com</email>\n      <role>admin</role>\n    </user>\n    <user id="2">\n      <name>Giulia Bianchi</name>\n      <email>giulia@example.com</email>\n      <role>user</role>\n    </user>\n  </users>\n  <settings>\n    <theme>dark</theme>\n    <language>it</language>\n    <notifications>true</notifications>\n  </settings>\n</root></document_attachment>',
+      media: [
+        {
+          mediumID: 'long-2',
+          mimeType: 'text/javascript',
+          title: 'Long JSON',
+          content: `{
+      "id": 1,
+      "title": "Ciao",
+      "description": "I'm a test!",
+      "refs": [
+        {
+          "id": 1,
+          "tag": "TEST"
+        }
+      ]
+    }
+    `,
+        },
+        {
+          mediumID: 'long-3',
+          mimeType: 'text/plain',
+          title: 'Long Text',
+          content: `{
+      "id": 1,
+      "title": "Ciao",
+      "description": "I'm a test!",
+      "refs": [
+        {
+          "id": 1,
+          "tag": "TEST"
+        }
+      ]
+    }`,
+        },
+      ],
     },
     {
-      text: 'Perfetto! Come puoi vedere, posso gestire molti tipi di contenuti:\n\n• **Immagini**: JPEG, PNG, GIF\n• **Documenti**: PDF, Word, Excel\n• **Link**: Siti web con preview\n• **Video**: MP4, AVI, QuickTime\n• **Audio**: MP3, WAV\n• **Modelli 3D**: GLB, GLTF\n• **Codice**: JavaScript, Python, CSS, SQL\n• **Dati**: JSON, XML, Markdown\n\nTutti questi contenuti vengono visualizzati in modo appropriato e possono essere interagiti dall\'utente!',
+      text: "Perfetto! Come puoi vedere, posso gestire molti tipi di contenuti:\n\n• **Immagini**: JPEG, PNG, GIF\n• **Documenti**: PDF, Word, Excel\n• **Link**: Siti web con preview\n• **Video**: MP4, AVI, QuickTime\n• **Audio**: MP3, WAV\n• **Modelli 3D**: GLB, GLTF\n• **Codice**: JavaScript, Python, CSS, SQL\n• **Dati**: JSON, XML, Markdown\n\nTutti questi contenuti vengono visualizzati in modo appropriato e possono essere interagiti dall'utente!",
       timestamp: '2021-03-01T12:05:00.000Z',
       media: [
         {
@@ -770,6 +1231,39 @@ build-storybook = "build-storybook"`,
           mimeType: 'text/html',
           title: 'Documentazione completa',
         },
+        {
+          mediumID: 'long-2',
+          mimeType: 'text/javascript',
+          title: 'Long JSON',
+          content: `{
+      "id": 1,
+      "title": "Ciao",
+      "description": "I'm a test!",
+      "refs": [
+        {
+          "id": 1,
+          "tag": "TEST"
+        }
+      ]
+    }
+    `,
+        },
+        {
+          mediumID: 'long-3',
+          mimeType: 'text/plain',
+          title: 'Long Text',
+          content: `{
+      "id": 1,
+      "title": "Ciao",
+      "description": "I'm a test!",
+      "refs": [
+        {
+          "id": 1,
+          "tag": "TEST"
+        }
+      ]
+    }`,
+        },
       ],
     },
   ],
@@ -781,4 +1275,4 @@ build-storybook = "build-storybook"`,
   resetTranscript: () => {},
   setAttachmentsMenuOpen: () => {},
   setSendOnEnter: () => {},
-};
+};

package/src/components/Chat/Chat.tsx CHANGED Viewed

@@ -124,11 +124,13 @@ const Chat: React.FC<Props> = ({
   isChatlogPanel = false,
   showFunctionCache = false,
 }) => {
+  const [isTextareaExpanded, setIsTextareaExpanded] = useState(false);
   const scrollToBottom = () => {
     if (isHistoryView) return;
     setTimeout(() => {
       let userMsgs = document.querySelectorAll(
-        '.memori-chat--bubble-container.memori-chat--bubble-from-user'
+        '.memori-chat-scroll-item'
       );
       userMsgs[userMsgs.length - 1]?.scrollIntoView?.();
     }, 200);
@@ -137,6 +139,15 @@ const Chat: React.FC<Props> = ({
     !preview && !isHistoryView && scrollToBottom();
   }, [history, preview, isHistoryView]);
+  // Scroll to bottom when textarea is expanded
+  useEffect(() => {
+    if (isTextareaExpanded && !isHistoryView) {
+      setTimeout(() => {
+        scrollToBottom();
+      }, 250);
+    }
+  }, [isTextareaExpanded, isHistoryView]);
   const onTextareaFocus = () => {
     stopListening();
     const hasTouch = hasTouchscreen();
@@ -168,10 +179,15 @@ const Chat: React.FC<Props> = ({
     }
   };
+  const onTextareaExpanded = (expanded: boolean) => {
+    setIsTextareaExpanded(expanded);
+  };
   return (
     <div
       className={cx('memori-chat--wrapper', {
         'memori-chat-wrapper--translate': translateTo,
+        'memori-chat-wrapper--expanded': isTextareaExpanded,
       })}
       id="chat-wrapper"
       lang={translateTo?.toUpperCase()}
@@ -301,7 +317,7 @@ const Chat: React.FC<Props> = ({
                   // Filter out HTML and plain text media items from the message
                   ...(message?.media?.filter(
                     m =>
-                      m.mimeType !== 'text/html' && m.mimeType !== 'text/plain'
+                      m.mimeType !== 'text/html'
                   ) || []),
                   // Extract document attachments that are embedded in the message text
@@ -316,6 +332,7 @@ const Chat: React.FC<Props> = ({
                     const attachments: (Medium & { type?: string })[] = [];
                     let match;
+                    let attachmentIndex = 0;
                     // Find all document attachments in the text
                     while (
@@ -330,7 +347,7 @@ const Chat: React.FC<Props> = ({
                       // - Trimmed content from the attachment
                       // - Properties to mark it as a document attachment
                       attachments.push({
-                        mediumID: `doc_${Date.now()}_${Math.random()
+                        mediumID: `doc_${Date.now()}_${attachmentIndex}_${Math.random()
                           .toString(36)
                           .substr(2, 9)}`,
                         url: '',
@@ -340,6 +357,8 @@ const Chat: React.FC<Props> = ({
                         properties: { isDocumentAttachment: true },
                         type: 'document',
                       });
+                      attachmentIndex++;
                     }
                     return attachments;
@@ -422,6 +441,7 @@ const Chat: React.FC<Props> = ({
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}
           onTextareaFocus={onTextareaFocus}
           onTextareaBlur={onTextareaBlur}
+          onTextareaExpanded={onTextareaExpanded}
           startListening={startListening}
           stopListening={stopListening}
           stopAudio={stopAudio}