style: improve code formatting in chat module styles

app/components/chat.module.scss

@@ -564,6 +564,32 @@
   border: rgba($color: #888, $alpha: 0.2) 1px solid;
 }
 
+.chat-message-item-files {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.chat-message-item-file {
+  display: flex;
+  flex-direction: row;
+  column-gap: 6px;
+
+}
+.chat-message-item-file-icon {
+  max-width: 16px;
+}
+
+.chat-message-item-file-name {
+  max-width:100%;  
+}
+
+
+
+
 
 @media only screen and (max-width: 600px) {
   $calc-image-width: calc(100vw/3*2/var(--image-count));

app/components/chat.tsx

@@ -1941,9 +1941,37 @@ function _Chat() {
                       </div>
                     )}
                     {getMessageFiles(message).length > 0 && (
-                      <div>
+                      <div className={styles["chat-message-item-files"]}>
                         {getMessageFiles(message).map((file, index) => {
-                          return <div key={index}></div>;
+                          const extension: DefaultExtensionType = file.url
+                            .split(".")
+                            .pop()
+                            ?.toLowerCase() as DefaultExtensionType;
+                          const style = defaultStyles[extension];
+
+                          return (
+                            <a
+                              href={file.url}
+                              target="_blank"
+                              key={index}
+                              className={styles["chat-message-item-file"]}
+                            >
+                              <div
+                                className={
+                                  styles["chat-message-item-file-icon"]
+                                }
+                              >
+                                <FileIcon {...style} />
+                              </div>
+                              <div
+                                className={
+                                  styles["chat-message-item-file-name"]
+                                }
+                              >
+                                {file.name}
+                              </div>
+                            </a>
+                          );
                         })}
                       </div>
                     )}