Combine user files + regular uploaded files

Author: Weves

web/src/app/chat/input/ChatInputBar.tsx

@@ -444,6 +444,45 @@ export function ChatInputBar({
     }
   };
 
+  // Combine selectedFiles and currentMessageFiles for unified rendering
+  const allFiles = useMemo(() => {
+    const combined: Array<{
+      id: string;
+      name: string;
+      chatFileType: ChatFileType;
+      isUploading?: boolean;
+      source: "selected" | "current";
+      originalFile: any;
+    }> = [];
+
+    // Add selected files (excluding those already in currentMessageFiles)
+    selectedFiles.forEach((file) => {
+      if (!currentMessageFileIds.has(String(file.file_id || file.id))) {
+        combined.push({
+          id: String(file.file_id || file.id),
+          name: file.name,
+          chatFileType: file.chat_file_type,
+          source: "selected",
+          originalFile: file,
+        });
+      }
+    });
+
+    // Add current message files
+    currentMessageFiles.forEach((file, index) => {
+      combined.push({
+        id: file.id,
+        name: file.name || `File${file.id}`,
+        chatFileType: file.type,
+        isUploading: file.isUploading,
+        source: "current",
+        originalFile: file,
+      });
+    });
+
+    return combined;
+  }, [selectedFiles, currentMessageFiles, currentMessageFileIds]);
+
   return (
     <div id="onyx-chat-input">
       <div className="flex  justify-center mx-auto">
@@ -669,20 +708,60 @@ export function ChatInputBar({
                       />
                     ))}
 
-                  {/* This is excluding image types because they get rendered differently via currentMessageFiles.map
-                  Seems quite hacky ... all rendering should probably be done in one place? */}
-                  {selectedFiles.map(
-                    (file) =>
-                      !currentMessageFileIds.has(
-                        String(file.file_id || file.id)
-                      ) && (
-                        <SourceChip
-                          key={file.id}
-                          icon={<FileIcon size={16} />}
-                          title={file.name}
-                          onRemove={() => removeSelectedFile(file)}
-                        />
-                      )
+                  {/* Unified file rendering section for both selected and current message files */}
+                  {allFiles.map((file, index) =>
+                    file.chatFileType === ChatFileType.IMAGE ? (
+                      <SourceChip
+                        key={`${file.source}-${file.id}-${index}`}
+                        icon={
+                          file.isUploading ? (
+                            <FiLoader className="animate-spin" />
+                          ) : (
+                            <img
+                              className="h-full py-.5 object-cover rounded-lg bg-background cursor-pointer"
+                              src={buildImgUrl(file.id)}
+                              alt={file.name || "File image"}
+                            />
+                          )
+                        }
+                        title={file.name}
+                        onRemove={() => {
+                          if (file.source === "selected") {
+                            removeSelectedFile(file.originalFile);
+                          } else {
+                            setCurrentMessageFiles(
+                              currentMessageFiles.filter(
+                                (fileInFilter) => fileInFilter.id !== file.id
+                              )
+                            );
+                          }
+                        }}
+                      />
+                    ) : (
+                      <SourceChip
+                        key={`${file.source}-${file.id}-${index}`}
+                        icon={
+                          <FileIcon
+                            className={
+                              file.source === "current" ? "text-red-500" : ""
+                            }
+                            size={16}
+                          />
+                        }
+                        title={file.name}
+                        onRemove={() => {
+                          if (file.source === "selected") {
+                            removeSelectedFile(file.originalFile);
+                          } else {
+                            setCurrentMessageFiles(
+                              currentMessageFiles.filter(
+                                (fileInFilter) => fileInFilter.id !== file.id
+                              )
+                            );
+                          }
+                        }}
+                      />
+                    )
                   )}
                   {selectedFolders.map((folder) => (
                     <SourceChip
@@ -752,45 +831,6 @@ export function ChatInputBar({
                       onRemove={removeDocs}
                     />
                   )}
-                  {currentMessageFiles.map((file, index) =>
-                    file.type === ChatFileType.IMAGE ? (
-                      <SourceChip
-                        key={`file-${index}`}
-                        icon={
-                          file.isUploading ? (
-                            <FiLoader className="animate-spin" />
-                          ) : (
-                            <img
-                              className="h-full py-.5 object-cover rounded-lg bg-background cursor-pointer"
-                              src={buildImgUrl(file.id)}
-                              alt={file.name || "Uploaded image"}
-                            />
-                          )
-                        }
-                        title={file.name || "File" + file.id}
-                        onRemove={() => {
-                          setCurrentMessageFiles(
-                            currentMessageFiles.filter(
-                              (fileInFilter) => fileInFilter.id !== file.id
-                            )
-                          );
-                        }}
-                      />
-                    ) : (
-                      <SourceChip
-                        key={`file-${index}`}
-                        icon={<FileIcon className="text-red-500" size={16} />}
-                        title={file.name || "File"}
-                        onRemove={() => {
-                          setCurrentMessageFiles(
-                            currentMessageFiles.filter(
-                              (fileInFilter) => fileInFilter.id !== file.id
-                            )
-                          );
-                        }}
-                      />
-                    )
-                  )}
                 </div>
               </div>
             )}