Add Masonry Grid Layout for Uploaded Images with Expandable View

.storybook/index.css

@@ -1,3 +1,40 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.masonry-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 5rem);
+  grid-template-rows: 5rem 5rem;
+}
+
+.grid-item-large {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.masonry-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.grid-item-small:nth-child(3) {
+  position: relative;
+}
+
+.masonry-button-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5rem;
+  height: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  cursor: pointer;
+}

src/ChatInput/ChatInput.tsx

@@ -37,7 +37,7 @@ interface ChatInputProps {
   sendIcon?: ReactElement;
 
   /**
-   * Icon to show for send.
+   * Icon to show for stop.
    */
   stopIcon?: ReactElement;
 

src/SessionMessages/SessionMessage/MessageFiles.tsx

@@ -1,7 +1,7 @@
 import { ChatContext } from '@/ChatContext';
 import { ConversationFile } from '@/types';
 import { cn } from 'reablocks';
-import { FC, PropsWithChildren, useContext } from 'react';
+import { FC, PropsWithChildren, useContext, useState } from 'react';
 import { MessageFile } from './MessageFile';
 import { Slot } from '@radix-ui/react-slot';
 
@@ -12,23 +12,63 @@ interface MessageFilesProps extends PropsWithChildren {
   files: ConversationFile[];
 }
 
+
 export const MessageFiles: FC<MessageFilesProps> = ({ files, children }) => {
   const { theme } = useContext(ChatContext);
   const Comp = children ? Slot : MessageFile;
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   if (!files || files.length === 0) {
     return null;
   }
 
+  // Filter image files
+  const imageFiles = files.filter(file => file.type.startsWith('image/'));
+  const otherFiles = files.filter(file => !file.type.startsWith('image/'));
+
   return (
-    files.length > 0 && (
-      <div className={cn(theme.messages.message.files.base)}>
-        {files.map((file, index) => (
-          <Comp key={index} {...file}>
-            {children}
-          </Comp>
-        ))}
-      </div>
-    )
+    <>
+      {imageFiles.length > 3 ? (
+        <div className={cn(theme.messages.message.files.base, expanded ? '' : 'masonry-grid')}>
+          {imageFiles.slice(0, expanded ? imageFiles.length : 3).map((file, index) => (
+            expanded ? (
+              <Comp key={index} {...file}>
+                {children}
+              </Comp>
+            ) : (
+              <figure
+                key={index}
+                className={index === 0 ? "grid-item-large" : "grid-item-small"}
+              >
+                <img src={file.url} alt={file.name} className="masonry-item" />
+                {index === 2 && imageFiles.length > 3 && !expanded && (
+                  <div className="masonry-button-overlay" onClick={() => setExpanded(true)}>
+                    +{imageFiles.length - 3}
+                  </div>
+                )}
+              </figure>
+            )
+          ))}
+        </div>
+      ) : (
+        <div className={cn(theme.messages.message.files.base)}>
+          {imageFiles.map((file, index) => (
+            <Comp key={index} {...file}>
+              {children}
+            </Comp>
+          ))}
+        </div>
+      )}
+
+      {otherFiles.length > 0 && (
+        <div className={cn(theme.messages.message.files.base)}>
+          {otherFiles.map((file, index) => (
+            <Comp key={index} {...file}>
+              {children}
+            </Comp>
+          ))}
+        </div>
+      )}
+    </>
   );
 };