chore(fe): rm redundant alignBubble (#9072)

web/src/app/app/message/FileDisplay.tsx

@@ -7,15 +7,13 @@ import { InMessageImage } from "@/app/app/components/files/images/InMessageImage
 import CsvContent from "@/components/tools/CSVContent";
 import TextViewModal from "@/sections/modals/TextViewModal";
 import { MinimalOnyxDocument } from "@/lib/search/interfaces";
-import { cn } from "@/lib/utils";
 import ExpandableContentWrapper from "@/components/tools/ExpandableContentWrapper";
 
 interface FileDisplayProps {
   files: FileDescriptor[];
-  alignBubble?: boolean;
 }
 
-export default function FileDisplay({ files, alignBubble }: FileDisplayProps) {
+export default function FileDisplay({ files }: FileDisplayProps) {
   const [close, setClose] = useState(true);
   const [previewingFile, setPreviewingFile] = useState<FileDescriptor | null>(
     null
@@ -43,59 +41,47 @@ export default function FileDisplay({ files, alignBubble }: FileDisplayProps) {
       )}
 
       {textFiles.length > 0 && (
-        <div
-          id="onyx-file"
-          className={cn("m-2 auto", alignBubble && "ml-auto")}
-        >
-          <div className="flex flex-col items-end gap-2">
-            {textFiles.map((file) => (
-              <Attachment
-                key={file.id}
-                fileName={file.name || file.id}
-                open={() => setPreviewingFile(file)}
-              />
-            ))}
-          </div>
+        <div id="onyx-file" className="flex flex-col items-end gap-2 py-2">
+          {textFiles.map((file) => (
+            <Attachment
+              key={file.id}
+              fileName={file.name || file.id}
+              open={() => setPreviewingFile(file)}
+            />
+          ))}
         </div>
       )}
 
       {imageFiles.length > 0 && (
-        <div
-          id="onyx-image"
-          className={cn("m-2 auto", alignBubble && "ml-auto")}
-        >
-          <div className="flex flex-col items-end gap-2">
-            {imageFiles.map((file) => (
-              <InMessageImage key={file.id} fileId={file.id} />
-            ))}
-          </div>
+        <div id="onyx-image" className="flex flex-col items-end gap-2 py-2">
+          {imageFiles.map((file) => (
+            <InMessageImage key={file.id} fileId={file.id} />
+          ))}
         </div>
       )}
 
       {csvFiles.length > 0 && (
-        <div className={cn("m-2 auto", alignBubble && "ml-auto")}>
-          <div className="flex flex-col items-end gap-2">
-            {csvFiles.map((file) => {
-              return (
-                <div key={file.id} className="w-fit">
-                  {close ? (
-                    <>
-                      <ExpandableContentWrapper
-                        fileDescriptor={file}
-                        close={() => setClose(false)}
-                        ContentComponent={CsvContent}
-                      />
-                    </>
-                  ) : (
-                    <Attachment
-                      open={() => setClose(true)}
-                      fileName={file.name || file.id}
+        <div className="flex flex-col items-end gap-2 py-2">
+          {csvFiles.map((file) => {
+            return (
+              <div key={file.id} className="w-fit">
+                {close ? (
+                  <>
+                    <ExpandableContentWrapper
+                      fileDescriptor={file}
+                      close={() => setClose(false)}
+                      ContentComponent={CsvContent}
                     />
-                  )}
-                </div>
-              );
-            })}
-          </div>
+                  </>
+                ) : (
+                  <Attachment
+                    open={() => setClose(true)}
+                    fileName={file.name || file.id}
+                  />
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
     </>

web/src/app/app/message/HumanMessage.tsx

@@ -195,7 +195,7 @@ const HumanMessage = React.memo(function HumanMessage({
       id="onyx-human-message"
       className="group flex flex-col justify-end w-full relative"
     >
-      <FileDisplay alignBubble files={files || []} />
+      <FileDisplay files={files || []} />
       {isEditing ? (
         <MessageEditing
           content={content}