@memori.ai/memori-react 8.8.2 → 8.8.4

package/src/components/MediaWidget/MediaItemWidget.stories.tsx

@@ -113,73 +113,160 @@ JavaScript.args = {
       mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
       mimeType: 'text/javascript',
       title: 'JavaScript',
-      content: `[
-  {
-    "name": "France",
-    "capital": "Paris",
-    "population": 67364357,
-    "area": 551695,
-    "currency": "Euro",
-    "languages": [
-      "French"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_France.svg"
-  },
-  {
-    "name": "Germany",
-    "capital": "Berlin",
-    "population": 83240525,
-    "area": 357022,
-    "currency": "Euro",
-    "languages": [
-      "German"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg"
-  },
-  {
-    "name": "United States",
-    "capital": "Washington, D.C.",
-    "population": 331893745,
-    "area": 9833517,
-    "currency": "USD",
-    "languages": [
-      "English"
-    ],
-    "region": "Americas",
-    "subregion": "Northern America",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
-  },
-  {
-    "name": "Belgium",
-    "capital": "Brussels",
-    "population": 11589623,
-    "area": 30528,
-    "currency": "Euro",
-    "languages": [
-      "Flemish",
-      "French",
-      "German"
-    ],
-    "region": "Europe",
-    "subregion": "Western Europe",
-    "flag": "https://upload.wikimedia.org/wikipedia/commons/6/65/Flag_of_Belgium.svg"
-    ]`,
+      content: `{
+        "name": "John Doe",
+        "age": 43,
+        "city": "New York",
+        "items": [
+          {
+            "name": "Item 1",
+            "price": 10
+          },
+          {
+            "name": "Item 2",
+            "price": 20
+          }
+        ]
+      }
+        `,
+    },
+  ],
+};
+
+export const ShortCodeSnippets = Template.bind({});
+ShortCodeSnippets.args = {
+  items: [
+    {
+      mediumID: 'short-js-1',
+      mimeType: 'text/javascript',
+      title: 'Short JS Function',
+      content: 'function greet() {\n  return "Hello World!";\n}',
+    },
+    {
+      mediumID: 'short-python-1',
+      mimeType: 'text/python',
+      title: 'Python Print',
+      content: 'print("Hello, World!")',
+    },
+    {
+      mediumID: 'short-css-1',
+      mimeType: 'text/css',
+      title: 'CSS Rule',
+      content: 'body {\n  background: #f0f0f0;\n  color: #333;\n}',
+    },
+  ],
+};
+
+export const LongCodeSnippets = Template.bind({});
+LongCodeSnippets.args = {
+  items: [
+    {
+      mediumID: 'long-js-1',
+      mimeType: 'text/javascript',
+      title: 'Long JavaScript Function',
+      content: `function processData(data) {
+  // Validate input
+  if (!data || typeof data !== 'object') {
+    throw new Error('Invalid data provided');
+  }
+  
+  // Process each item
+  return data.map(item => {
+    const processed = {
+      id: item.id,
+      name: item.name.toUpperCase(),
+      value: item.value * 2,
+      timestamp: new Date().toISOString()
+    };
+    
+    return processed;
+  });
+}`,
+    },
+    {
+      mediumID: 'long-python-1',
+      mimeType: 'text/python',
+      title: 'Python Class',
+      content: `class DataProcessor:
+    def __init__(self, config):
+        self.config = config
+        self.cache = {}
+    
+    def process(self, data):
+        if data in self.cache:
+            return self.cache[data]
+        
+        result = self._transform(data)
+        self.cache[data] = result
+        return result
+    
+    def _transform(self, data):
+        # Complex transformation logic
+        return data.upper()`,
+    },
+  ],
+};
+
+export const MixedSnippets = Template.bind({});
+MixedSnippets.args = {
+  items: [
+    {
+      mediumID: 'short-1',
+      mimeType: 'text/javascript',
+      title: 'Quick Function',
+      content: 'const add = (a, b) => a + b;',
+    },
+    {
+      mediumID: 'long-1',
+      mimeType: 'text/javascript',
+      title: 'Complex Component',
+      content: `import React, { useState, useEffect } from 'react';
+
+const MyComponent = ({ data, onUpdate }) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  
+  useEffect(() => {
+    if (data) {
+      setLoading(true);
+      processData(data)
+        .then(result => {
+          onUpdate(result);
+          setLoading(false);
+        })
+        .catch(err => {
+          setError(err.message);
+          setLoading(false);
+        });
+    }
+  }, [data, onUpdate]);
+  
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  
+  return <div>Data processed successfully</div>;
+};
+
+export default MyComponent;`,
+    },
+    {
+      mediumID: 'short-2',
+      mimeType: 'text/css',
+      title: 'Simple Style',
+      content: '.button {\n  padding: 10px;\n  background: blue;\n}',
     },
   ],
 };
 
-export const longTXT = Template.bind({});
-longTXT.args = {
+export const LongTXT = Template.bind({});
+LongTXT.args = {
   items: [
     {
       mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
       mimeType: 'text/plain',
       title: 'Long Text',
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.',
     },
   ],
 };

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -187,7 +187,7 @@ export const RenderMediaItem = ({
           widthMd="90%"
         >
           <div className="memori-media-item-preview--content">
-            <Snippet medium={item} showCopyButton={true} />
+            <Snippet  medium={item} showCopyButton={true} />
           </div>
         </Modal>
       </>
@@ -368,6 +368,12 @@ export const RenderMediaItem = ({
   }
 };
 
+// Helper function to count lines in content
+const countLines = (content: string | undefined): number => {
+  if (!content) return 0;
+  return content.split('\n').length;
+};
+
 export const RenderSnippetItem = ({
   item,
   sessionID: _sessionID,
@@ -383,6 +389,23 @@ export const RenderSnippetItem = ({
   apiURL?: string;
   onClick?: (mediumID: string) => void;
 }) => {
+  const lineCount = countLines(item.content);
+  const isShortSnippet = lineCount <= 5;
+
+  // For short snippets, show them directly without the clickable link
+  if (isShortSnippet) {
+    return (
+      <div className="memori-media-item--snippet-direct">
+        <Card className="memori-media-item--card memori-media-item--snippet">
+          <div className="memori-media-item--snippet-preview">
+            <Snippet showCopyButton={true} preview={false} medium={item} />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // For longer snippets, show preview with click to open modal
   return (
     <>
       <a

package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap

@@ -25,13 +25,11 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
       <div
         class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <a
-          class="memori-media-item--link"
-          href="#"
-          title="Snippet"
+        <div
+          class="memori-media-item--snippet-direct"
         >
           <div
-            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
+            class="memori-card memori-media-item--card memori-media-item--snippet"
           >
             <div
               class="memori-spin"
@@ -57,12 +55,46 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
                         >
                           <code
                             class="language-scss"
+                            data-language="scss"
                           >
                             body{
   background-color: #f00;
 }
                           </code>
                         </pre>
+                        <button
+                          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+                          title="copy"
+                        >
+                          <span
+                            class="memori-button--icon"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="none"
+                              focusable="false"
+                              role="img"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="14"
+                                rx="2"
+                                ry="2"
+                                width="14"
+                                x="8"
+                                y="8"
+                              />
+                              <path
+                                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                              />
+                            </svg>
+                          </span>
+                        </button>
                       </div>
                       <p
                         class="memori-snippet--caption"
@@ -92,7 +124,7 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>
@@ -280,13 +312,11 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
       <div
         class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <a
-          class="memori-media-item--link"
-          href="#"
-          title="Snippet"
+        <div
+          class="memori-media-item--snippet-direct"
         >
           <div
-            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
+            class="memori-card memori-media-item--card memori-media-item--snippet"
           >
             <div
               class="memori-spin"
@@ -312,10 +342,44 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
                         >
                           <code
                             class="language-jsx"
+                            data-language="jsx"
                           >
                             console.log("Hello World!");
                           </code>
                         </pre>
+                        <button
+                          class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
+                          title="copy"
+                        >
+                          <span
+                            class="memori-button--icon"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              fill="none"
+                              focusable="false"
+                              role="img"
+                              stroke="currentColor"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <rect
+                                height="14"
+                                rx="2"
+                                ry="2"
+                                width="14"
+                                x="8"
+                                y="8"
+                              />
+                              <path
+                                d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+                              />
+                            </svg>
+                          </span>
+                        </button>
                       </div>
                       <p
                         class="memori-snippet--caption"
@@ -345,7 +409,7 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </div>
     </div>
   </div>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -330,7 +330,6 @@ window.typeBatchMessages = typeBatchMessages;
 let audioContext: IAudioContext;
 
 let memoriPassword: string | undefined;
-let speakerMuted: boolean = false;
 let userToken: string | undefined;
 
 export interface LayoutProps {
@@ -510,19 +509,21 @@ const MemoriWidget = ({
       !user?.userID &&
       (showLogin || memori.requireLoginToken)
     ) {
-      client.backend.pwlGetCurrentUser(loginToken).then(({ user, resultCode }) => {
-        if (user && resultCode === 0) {
-          setUser(user);
-          setLocalConfig('loginToken', loginToken);
-
-          if (!birthDate && user.birthDate) {
-            setBirthDate(user.birthDate);
-            setLocalConfig('birthDate', user.birthDate);
+      client.backend
+        .pwlGetCurrentUser(loginToken)
+        .then(({ user, resultCode }) => {
+          if (user && resultCode === 0) {
+            setUser(user);
+            setLocalConfig('loginToken', loginToken);
+
+            if (!birthDate && user.birthDate) {
+              setBirthDate(user.birthDate);
+              setLocalConfig('birthDate', user.birthDate);
+            }
+          } else {
+            removeLocalConfig('loginToken');
           }
-        } else {
-          removeLocalConfig('loginToken');
-        }
-      });
+        });
     }
   }, [loginToken, user?.userID]);
   const [showLoginDrawer, setShowLoginDrawer] = useState(false);
@@ -870,7 +871,7 @@ const MemoriWidget = ({
 
           translateDialogState(currentState, userLang, msg).then(ts => {
             let text = ts.translatedEmission || ts.emission;
-            if (text && text.trim() && !speakerMuted) {
+            if (text && shouldPlayAudio(text)) {
               handleSpeak(text);
             }
           });
@@ -897,7 +898,7 @@ const MemoriWidget = ({
               tag: currentState.currentTag,
               memoryTags: currentState.memoryTags,
             });
-            if (emission && emission.trim()) {
+            if (emission && shouldPlayAudio(emission)) {
               handleSpeak(emission);
             }
           }
@@ -1721,18 +1722,21 @@ const MemoriWidget = ({
 
       const handleVisibilityChange = () => {
         const isVisible = !document.hidden;
-        
+
         if (isVisible && !isTabVisible) {
           // Tab became visible - start polling and send immediate date event
           console.log('Tab is now active/visible - starting date polling');
-          sendDateChangedEvent({ sessionID: sessionId, state: currentDialogState });
+          sendDateChangedEvent({
+            sessionID: sessionId,
+            state: currentDialogState,
+          });
           startDatePolling();
         } else if (!isVisible && isTabVisible) {
           // Tab became hidden - stop polling
           console.log('Tab is now hidden - stopping date polling');
           stopDatePolling();
         }
-        
+
         isTabVisible = isVisible;
       };
 
@@ -1746,7 +1750,10 @@ const MemoriWidget = ({
 
       return () => {
         stopDatePolling();
-        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        document.removeEventListener(
+          'visibilitychange',
+          handleVisibilityChange
+        );
       };
     }
   }, [memori.needsDateTime, sessionId]);
@@ -1832,6 +1839,19 @@ const MemoriWidget = ({
     defaultSpeakerActive
   );
 
+  // Helper function to check if audio should be played
+  const shouldPlayAudio = (text?: string) => {
+    const currentSpeakerMuted = getLocalConfig('muteSpeaker', false);
+    console.log('[MemoriWidget] shouldPlayAudio', currentSpeakerMuted);
+    return (
+      text &&
+      text.trim() &&
+      !preview &&
+      !currentSpeakerMuted &&
+      defaultEnableAudio
+    );
+  };
+
   // Create a single, centralized function to process and send messages
   const processSpeechAndSendMessage = (text: string) => {
     // console.log('processSpeechAndSendMessage', text);
@@ -1880,16 +1900,9 @@ const MemoriWidget = ({
    * Uses promise-based approach for better reliability
    */
   const handleSpeak = async (text: string) => {
-    if (
-      !text ||
-      !text.trim() ||
-      preview ||
-      speakerMuted ||
-      !defaultEnableAudio
-    ) {
+    if (!shouldPlayAudio(text)) {
       const e = new CustomEvent('MemoriEndSpeak');
       document.dispatchEvent(e);
-
       return Promise.resolve();
     }
 
@@ -1901,7 +1914,6 @@ const MemoriWidget = ({
     setHasUserTypedMessage(false);
 
     const processedText = sanitizeText(text);
-
     return ttsSpeak(processedText);
   };
   /**
@@ -1918,7 +1930,6 @@ const MemoriWidget = ({
       try {
         // First ensure we have a valid dialog state
         if (!dialogState) {
-          console.warn('translateAndSpeak called with empty dialog state');
           return null;
         }
 
@@ -1934,20 +1945,13 @@ const MemoriWidget = ({
         const textToSpeak =
           translatedState.translatedEmission || translatedState.emission;
 
-        // Always set
-        //  to true when we have a valid dialog state,
+        // Always set hasUserActivatedSpeak to true when we have a valid dialog state,
         // regardless of audio settings, so the chat can start properly
         if (!hasUserActivatedSpeak) {
           setHasUserActivatedSpeak(true);
         }
 
-        if (
-          textToSpeak &&
-          textToSpeak.trim() &&
-          !skipEmission &&
-          !speakerMuted
-        ) {
-          // Note: now using the Promise-based speak function to ensure proper sequencing
+        if (textToSpeak && !skipEmission && shouldPlayAudio(textToSpeak)) {
           await handleSpeak(textToSpeak);
         }
 
@@ -1966,9 +1970,11 @@ const MemoriWidget = ({
       handleSpeak,
       hasUserActivatedSpeak,
       setHasUserActivatedSpeak,
+      speakerMuted,
     ]
   );
 
+
   const focusChatInput = () => {
     let textarea = document.querySelector(
       '#chat-fieldset textarea'
@@ -2179,7 +2185,9 @@ const MemoriWidget = ({
   // to use in integrations or snippets
   const memoriTextEnteredHandler = useCallback(
     (e: MemoriTextEnteredEvent) => {
-      if (disableTextEnteredEvents) return;
+      if (disableTextEnteredEvents) {
+        return;
+      }
 
       const {
         text,
@@ -2222,6 +2230,7 @@ const MemoriWidget = ({
       memoriTyping,
       userLang,
       disableTextEnteredEvents,
+      speakerMuted,
     ]
   );
   useEffect(() => {
@@ -2776,8 +2785,7 @@ const MemoriWidget = ({
 
   const showFullHistory =
     showOnlyLastMessages === undefined
-      ? selectedLayout !== 'TOTEM' &&
-        selectedLayout !== 'WEBSITE_ASSISTANT'
+      ? selectedLayout !== 'TOTEM' && selectedLayout !== 'WEBSITE_ASSISTANT'
       : !showOnlyLastMessages;
 
   const headerProps: HeaderProps = {
@@ -2790,49 +2798,16 @@ const MemoriWidget = ({
     history,
     showShare: showShare ?? integrationConfig?.showShare ?? true,
     position,
+    layout: selectedLayout,
+    additionalSettings,
     setShowPositionDrawer,
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
     setShowExpertsDrawer,
     enableAudio: defaultEnableAudio,
     speakerMuted: speakerMuted ?? false,
-    setSpeakerMuted: mute => {
-      // If audio is disabled, force mute and don't allow unmuting
-      if (!(enableAudio ?? integrationConfig?.enableAudio ?? true)) {
-        mute = true;
-      }
-
-      // Use the toggleMute function from useTTS hook which properly manages state
+    setSpeakerMuted: (mute: boolean) => {
       toggleMute(mute);
-      
-      // Update local config for persistence
-      setLocalConfig('muteSpeaker', !!mute);
-      
-      // Handle microphone mode changes
-      let microphoneMode = getLocalConfig<string>(
-        'microphoneMode',
-        'HOLD_TO_TALK'
-      );
-      if (microphoneMode === 'CONTINUOUS' && mute) {
-        setContinuousSpeech(false);
-        setLocalConfig('microphoneMode', 'HOLD_TO_TALK');
-      }
-      
-      // Stop audio if muting
-      if (mute) {
-        ttsStop();
-      } else {
-        // Initialize audio context when unmuting
-        try {
-          audioContext = new AudioContext();
-          let buffer = audioContext.createBuffer(1, 10000, 22050);
-          let source = audioContext.createBufferSource();
-          source.buffer = buffer;
-          source.connect(audioContext.destination);
-        } catch (error) {
-          console.warn('Failed to initialize audio context:', error);
-        }
-      }
     },
     setShowChatHistoryDrawer,
     showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
@@ -3280,7 +3255,6 @@ const MemoriWidget = ({
           }}
         />
       )}
-
     </div>
   );
 };