@memori.ai/memori-react 8.8.5 → 8.9.0

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

@@ -3,7 +3,7 @@
 exports[`renders ChatBubble from user with avatar as react element unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
@@ -40,7 +40,7 @@ exports[`renders ChatBubble from user with avatar as react element unchanged 1`]
 exports[`renders ChatBubble from user with avatar unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
@@ -79,7 +79,7 @@ exports[`renders ChatBubble from user with avatar unchanged 1`] = `
 exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
@@ -118,7 +118,7 @@ exports[`renders ChatBubble from user with custom avatar unchanged 1`] = `
 exports[`renders ChatBubble unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -186,7 +186,7 @@ exports[`renders ChatBubble unchanged 1`] = `
 exports[`renders ChatBubble with complex markdown and math 1 unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -2773,7 +2773,7 @@ M834 80h400000v40h-400000z"
 exports[`renders ChatBubble with complex markdown and math 2 unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -4024,7 +4024,7 @@ Gli esiti delle prove devono essere attentamente analizzati per confermare le ca
 exports[`renders ChatBubble with complex markdown and math 3 unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -5009,7 +5009,7 @@ exports[`renders ChatBubble with complex markdown and math 3 unchanged 1`] = `
 exports[`renders ChatBubble with complex markdown and math 4 unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -5533,7 +5533,7 @@ exports[`renders ChatBubble with complex markdown and math 4 unchanged 1`] = `
 exports[`renders ChatBubble with complex markdown and math 5 unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -6319,7 +6319,7 @@ exports[`renders ChatBubble with complex markdown and math 5 unchanged 1`] = `
 exports[`renders ChatBubble with complex markdown and math but disabled unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -6583,7 +6583,7 @@ Prendi la radice quadrata della somma per trovare l'ipotenusa: $ c = \\sqrt{a^2
 exports[`renders ChatBubble with copy disabled unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -6614,7 +6614,7 @@ exports[`renders ChatBubble with copy disabled unchanged 1`] = `
 exports[`renders ChatBubble with debug button unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--with-addon"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--with-addon"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -6812,7 +6812,7 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
     class="memori-chat--bubble-initial"
   />
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -6880,7 +6880,7 @@ exports[`renders ChatBubble with initial msg unchanged 1`] = `
 exports[`renders ChatBubble with markdown and breakline unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -7019,7 +7019,7 @@ exports[`renders ChatBubble with markdown and breakline unchanged 1`] = `
 exports[`renders ChatBubble with markdown code unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -7132,7 +7132,7 @@ exports[`renders ChatBubble with markdown code unchanged 1`] = `
 exports[`renders ChatBubble with markdown table unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -7303,7 +7303,7 @@ exports[`renders ChatBubble with markdown table unchanged 1`] = `
 exports[`renders ChatBubble with markdown unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -7637,7 +7637,7 @@ exports[`renders ChatBubble with markdown unchanged 1`] = `
 exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user memori-chat--with-addon"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user memori-chat--with-addon"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon memori-chat--ai-generated transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
@@ -7731,7 +7731,7 @@ exports[`renders ChatBubble with msg from BoE expert unchanged 1`] = `
 exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user memori-chat--with-addon"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user memori-chat--with-addon"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble memori-chat--with-addon memori-chat--ai-generated transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"
@@ -7825,7 +7825,7 @@ exports[`renders ChatBubble with msg generated by AI unchanged 1`] = `
 exports[`renders ChatBubble with output code unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -7945,7 +7945,7 @@ exports[`renders ChatBubble with output code unchanged 1`] = `
 exports[`renders ChatBubble with reasoning and output and markdown unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -8084,7 +8084,7 @@ end
 exports[`renders ChatBubble with reasoning shown unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -8194,7 +8194,7 @@ Proin libero ante, dignissim sit amet turpis a, pretium condimentum dolor.
 exports[`renders ChatBubble with reasoning unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -8297,7 +8297,7 @@ exports[`renders ChatBubble with reasoning unchanged 1`] = `
 exports[`renders ChatBubble with translation and original unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container"
+    class="memori-chat--bubble-container memori-chat-scroll-item"
   >
     <picture
       class="memori-chat--bubble-avatar transition ease-in-out duration-300 opacity-0 scale-075 translate-x--15"
@@ -8429,7 +8429,7 @@ exports[`renders ChatBubble with translation and original unchanged 1`] = `
 exports[`renders ChatBubble with user msg unchanged 1`] = `
 <div>
   <div
-    class="memori-chat--bubble-container memori-chat--bubble-from-user"
+    class="memori-chat--bubble-container memori-chat-scroll-item memori-chat--bubble-from-user"
   >
     <div
       class="memori-chat--bubble memori-chat--user-bubble transition ease-in-out duration-300 opacity-0 scale-09 translate-x-30"

package/src/components/ChatInputs/ChatInputs.css

@@ -9,6 +9,29 @@
     padding: 0;
     border: none;
     margin: 0;
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-chat-inputs--expanded {
+    /* Additional padding when expanded to prevent overlap with file preview */
+    padding-top: 0.5rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .memori-chat-inputs {
+        padding: 0 0.25rem;
+    }
+
+    .memori-chat-inputs--expanded {
+        padding-top: 0.25rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-inputs {
+        flex-wrap: wrap;
+    }
 }
 
 .memori-chat-inputs .memori-upload-menu+.memori-send-on-enter-menu {

package/src/components/ChatInputs/ChatInputs.tsx

@@ -34,6 +34,7 @@ export interface Props {
   sessionID?: string;
   memoriID?: string;
   client?: ReturnType<typeof memoriApiClient>;
+  onTextareaExpanded?: (expanded: boolean) => void;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -55,9 +56,13 @@ const ChatInputs: React.FC<Props> = ({
   authToken,
   memoriID,
   client,
+  onTextareaExpanded,
 }) => {
   const { t } = useTranslation();
 
+  // State for textarea expansion
+  const [isExpanded, setIsExpanded] = useState(false);
+
   // State for document preview files
   const [documentPreviewFiles, setDocumentPreviewFiles] = useState<
     {
@@ -90,18 +95,21 @@ const ChatInputs: React.FC<Props> = ({
       url?: string;
     }[]
   ) => {
-    sendMessage(
-      userMessage,
-      files.map(file => ({
-        mediumID: file.mediumID || '',
+    
+    const mediaWithIds = files.map((file, index) => {
+      const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+      return {
+        mediumID: generatedMediumID,
         mimeType: file.mimeType,
         content: file.content,
         title: file.name,
         properties: { isAttachedFile: true },
         type: file.type,
         url: file.url,
-      }))
-    );
+      };
+    });
+    
+    sendMessage(userMessage, mediaWithIds);
 
     // Reset states after sending
     setDocumentPreviewFiles([]);
@@ -115,18 +123,20 @@ const ChatInputs: React.FC<Props> = ({
   const onTextareaPressEnter = () => {
     if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
       stopListening();
-      sendMessage(
-        userMessage,
-        documentPreviewFiles.map(file => ({
-          mediumID: file.mediumID || '',
+      const mediaWithIds = documentPreviewFiles.map((file, index) => {
+        const generatedMediumID = file.mediumID || `file_${Date.now()}_${index}_${Math.random().toString(36).substr(2, 9)}`;
+        return {
+          mediumID: generatedMediumID,
           mimeType: file.mimeType,
           content: file.content,
           title: file.name,
           properties: { isAttachedFile: true },
           type: file.type,
           url: file.url,
-        }))
-      );
+        };
+      });
+      
+      sendMessage(userMessage, mediaWithIds);
 
       setDocumentPreviewFiles([]);
       onChangeUserMessage('');
@@ -137,7 +147,6 @@ const ChatInputs: React.FC<Props> = ({
    * Removes a file from the preview list
    */
   const removeFile = async (fileId: string, mediumID: string | undefined) => {
-    console.log('removeFile', fileId);
     // Call the MediumDeselected event if dialog API is available
     if (dialog.postMediumDeselectedEvent && sessionID && mediumID) {
       await dialog.postMediumDeselectedEvent(sessionID, mediumID);
@@ -157,10 +166,22 @@ const ChatInputs: React.FC<Props> = ({
     );
   };
 
+  /**
+   * Handles textarea expansion change
+   */
+  const handleTextareaExpanded = (expanded: boolean) => {
+    setIsExpanded(expanded);
+    if (onTextareaExpanded) {
+      onTextareaExpanded(expanded);
+    }
+  };
+
   return (
     <fieldset
       id="chat-fieldset"
-      className="memori-chat-inputs"
+      className={cx('memori-chat-inputs', {
+        'memori-chat-inputs--expanded': isExpanded,
+      })}
       disabled={dialogState?.state === 'X2a' || dialogState?.state === 'X3'}
     >
       <ChatTextArea
@@ -169,6 +190,7 @@ const ChatInputs: React.FC<Props> = ({
         onPressEnter={onTextareaPressEnter}
         onFocus={onTextareaFocus}
         onBlur={onTextareaBlur}
+        onExpandedChange={handleTextareaExpanded}
         disabled={['R2', 'R3', 'R4', 'R5', 'G3', 'X3'].includes(
           dialogState?.state || ''
         )}

package/src/components/ChatTextArea/ChatTextArea.css

@@ -4,9 +4,27 @@
     box-sizing: border-box;
     flex: 1 0 auto;
     margin-right: 0.5rem;
+    transition: height 0.2s ease-in-out;
     /* margin-left: 0.5rem; */
 }
 
+.memori-chat-textarea--expanded {
+    height: 300px;
+}
+
+/* Responsive adjustments for small screens */
+@media (max-width: 768px) {
+    .memori-chat-textarea--expanded {
+        height: 200px;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-textarea--expanded {
+        height: 150px;
+    }
+}
+
 .memori-chat-textarea--inner {
     position: absolute;
     right: 0;
@@ -27,6 +45,19 @@
     max-height: 300px;
 }
 
+/* Responsive adjustments for textarea inner */
+@media (max-width: 768px) {
+    .memori-chat-textarea--expanded .memori-chat-textarea--inner {
+        max-height: 200px;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-chat-textarea--expanded .memori-chat-textarea--inner {
+        max-height: 150px;
+    }
+}
+
 .memori-chat-textarea--disabled .memori-chat-textarea--inner {
     background: #e3e3e3;
     opacity: 0.8;

package/src/components/ChatTextArea/ChatTextArea.tsx

@@ -12,6 +12,7 @@ export interface Props {
   onPressEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
   onFocus?: (e: React.FocusEvent) => void;
   onBlur?: (e: React.FocusEvent) => void;
+  onExpandedChange?: (expanded: boolean) => void;
 }
 
 const ChatTextArea: React.FC<Props> = ({
@@ -21,10 +22,19 @@ const ChatTextArea: React.FC<Props> = ({
   onPressEnter,
   onFocus,
   onBlur,
+  onExpandedChange,
 }) => {
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
+  const handleExpandToggle = () => {
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
+    if (onExpandedChange) {
+      onExpandedChange(newExpanded);
+    }
+  };
+
   return (
     <div
       data-testid="chat-textarea"
@@ -53,7 +63,7 @@ const ChatTextArea: React.FC<Props> = ({
         <div className="memori-chat-textarea--expand">
           <Button
             className={cx('memori-chat-textarea--expand-button')}
-            onClick={() => setExpanded(!expanded)}
+            onClick={handleExpandToggle}
             padded={false}
             ghost
             title={

package/src/components/FilePreview/FilePreview.css

@@ -1,6 +1,7 @@
 /* Updated FilePreview Styles */
 
 .memori--preview-container {
+  z-index: 10;
   min-width: 100%;
   padding: 12px;
   border-radius: 8px;
@@ -17,7 +18,45 @@
 
 .memori--absolute-preview {
   position: absolute;
+  z-index: 10;
+  right: 0;
   bottom: 100%;
+  left: 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+/* Responsive adjustments for file preview */
+@media (max-width: 768px) {
+  .memori--absolute-preview {
+    max-height: 150px;
+  }
+
+  .memori--preview-container {
+    padding: 8px;
+    margin-bottom: 8px;
+  }
+
+  .memori--preview-filename {
+    max-width: 150px;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .memori--absolute-preview {
+    max-height: 120px;
+  }
+
+  .memori--preview-container {
+    padding: 6px;
+    margin-bottom: 6px;
+  }
+
+  .memori--preview-filename {
+    max-width: 100px;
+    font-size: 11px;
+  }
 }
 
 .memori--message-preview {

package/src/components/Header/Header.tsx

@@ -113,8 +113,6 @@ const Header: React.FC<Props> = ({
     layout?: WidgetProps['layout'],
     additionalSettings?: WidgetProps['additionalSettings']
   ): boolean => {
-    console.log('[hasSettingsContent] Layout:', layout);
-    console.log('[hasSettingsContent] Additional settings:', additionalSettings);
     return (
       layout === 'TOTEM' ||
       (additionalSettings && Object.keys(additionalSettings).length > 0) || false
@@ -122,27 +120,20 @@ const Header: React.FC<Props> = ({
   }, [layout, additionalSettings]);
 
   const updateAvatar = async (avatar: Blob) => {
-    console.log('[updateAvatar] Starting avatar update', { avatar });
     if (avatar && loginToken) {
       const reader = new FileReader();
       reader.onload = async e => {
-        console.log('[updateAvatar] FileReader loaded', {
-          result: e.target?.result,
-        });
         try {
-          console.log('[updateAvatar] Uploading asset...');
           const { asset: avatarAsset, ...resp } = await uploadAsset(
             avatar.name ?? 'avatar',
             e.target?.result as string,
             loginToken ?? ''
           );
-          console.log('[updateAvatar] Upload response:', { avatarAsset, resp });
 
           if (resp.resultCode !== 0) {
             console.error('[updateAvatar] Upload failed:', resp);
             toast.error(t(getErrori18nKey(resp.resultCode)));
           } else if (avatarAsset) {
-            console.log('[updateAvatar] Upload successful, updating user...');
             let newUser: Partial<User> = {
               userID: user?.userID,
               avatarURL: avatarAsset.assetURL,
@@ -153,10 +144,6 @@ const Header: React.FC<Props> = ({
               user?.userID ?? '',
               newUser
             );
-            console.log('[updateAvatar] User update complete', {
-              patchedUser,
-              resp,
-            });
           }
         } catch (e) {
           let err = e as Error;

package/src/components/MediaWidget/LinkItemWidget.tsx

@@ -172,7 +172,7 @@ const LinkItemWidget: React.FC<Props> = ({
 }: Props) => {
   return (
     <Transition appear show as="div" className="memori-link-items">
-      <div className={cx('memori-link-items--grid', {
+      <div className={cx('memori-link-items--grid memori-chat-scroll-item', {
         'memori-link-items--user': fromUser,
         'memori-link-items--agent': !fromUser,
       })}>

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

@@ -216,6 +216,39 @@ MixedSnippets.args = {
       title: 'Quick Function',
       content: 'const add = (a, b) => a + b;',
     },
+    {
+      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"
+    }
+  ]
+}`,
+    },
     {
       mediumID: 'long-1',
       mimeType: 'text/javascript',

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -413,9 +413,7 @@ export const RenderSnippetItem = ({
         onClick={e => {
           e.preventDefault();
           if (onClick) {
-            console.log('Snippet item.mediumID:', item.mediumID);
             onClick(item.mediumID);
-            console.log('clicked snippet');
           }
         }}
         className="memori-media-item--link"
@@ -448,6 +446,11 @@ const MediaItemWidget: React.FC<Props> = ({
   const [media, setMedia] = useState(items);
   const [openModalMedium, setOpenModalMedium] = useState<Medium>();
 
+  // Sync items prop with media state
+  useEffect(() => {
+    setMedia(items);
+  }, [items]);
+
   const translateMediaCaptions = useCallback(async () => {
     if (!translateTo) return;
 
@@ -498,15 +501,11 @@ const MediaItemWidget: React.FC<Props> = ({
     m => m.mimeType === 'text/css' && !!m.properties?.executable
   );
 
-  console.log('openModalMedium', openModalMedium);
-  console.log('codeSnippets', codeSnippets);
-  console.log('nonCodeDisplayMedia', nonCodeDisplayMedia);
-
   return (
     <Transition appear show as="div" className="memori-media-items">
       {!!nonCodeDisplayMedia.length && (
         <div
-          className={cx('memori-media-items--grid', {
+          className={cx('memori-media-items--grid memori-chat-scroll-item', {
             'memori-media-items--user': fromUser,
             'memori-media-items--agent': !fromUser,
           })}
@@ -547,7 +546,7 @@ const MediaItemWidget: React.FC<Props> = ({
       )}
       {!!codeSnippets.length && (
         <div
-          className={cx('memori-media-items--grid', {
+          className={cx('memori-media-items--grid memori-chat-scroll-item', {
             'memori-media-items--user': fromUser,
             'memori-media-items--agent': !fromUser,
           })}
@@ -570,9 +569,7 @@ const MediaItemWidget: React.FC<Props> = ({
                 baseURL={baseURL}
                 apiURL={apiURL}
                 onClick={mediumID => {
-                  console.log('Snippet clicked, mediumID:', mediumID);
                   const foundMedium = codeSnippets.find(m => m.mediumID === mediumID);
-                  console.log('Found medium:', foundMedium);
                   setOpenModalMedium(foundMedium);
                 }}
                 item={{