From 3cb99f62152257c0a78c5287f2337d7ef6d247ed Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Fri, 23 May 2025 17:58:34 -0700
Subject: [PATCH 1/6] update ui for attachment item component

---
 .../PromptInput/Attachments/index.jsx         | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index ee6155ab2ce..6a1f07051fa 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -21,7 +21,7 @@ import { Tooltip } from "react-tooltip";
 export default function AttachmentManager({ attachments }) {
   if (attachments.length === 0) return null;
   return (
-    <div className="flex flex-wrap mt-4 mb-2 gap-y-2 gap-x-[0.5px]">
+    <div className="flex flex-wrap gap-2 mt-2 mb-4">
       {attachments.map((attachment) => (
         <AttachmentItem key={attachment.uid} attachment={attachment} />
       ))}
@@ -45,21 +45,20 @@ function AttachmentItem({ attachment }) {
 
   if (status === "in_progress") {
     return (
-      <div
-        className={`h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px]`}
-      >
+      <div className="flex items-center gap-x-1 rounded-lg bg-[#18191A] light:bg-theme-bg-sidebar border-none w-[180px]">
         <div
-          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+          className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
           <CircleNotch
-            size={30}
+            size={24}
+            weight="light"
             className="text-white light:text-white animate-spin"
           />
         </div>
-        <div className="flex flex-col w-[130px]">
-          <p className="text-white text-xs font-medium truncate">{file.name}</p>
-          <p className="text-white/60 text-xs font-medium">
-            {humanFileSize(file.size)}
+        <div className="flex flex-col w-[125px]">
+          <p className="text-white text-xs font-semibold truncate">{file.name}</p>
+          <p className="text-white/80 light:text-black/80 text-[10px] leading-[14px] font-medium">
+            Uploading...
           </p>
         </div>
       </div>
@@ -72,7 +71,7 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-error`}
           data-tooltip-content={error}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
+          className={`relative flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
@@ -114,7 +113,7 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-success`}
           data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
-          className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+          className={`relative flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
@@ -127,6 +126,7 @@ function AttachmentItem({ attachment }) {
           </div>
           {contentString ? (
             <img
+              alt={`Preview of ${file.name}`}
               src={contentString}
               className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center`}
             />
@@ -134,7 +134,7 @@ function AttachmentItem({ attachment }) {
             <div
               className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
             >
-              <Icon size={30} className="text-white light:text-white" />
+              <Icon size={24} className="text-white light:text-white" />
             </div>
           )}
           <div className="flex flex-col w-[130px]">
@@ -161,7 +161,7 @@ function AttachmentItem({ attachment }) {
       <div
         data-tooltip-id={`attachment-uid-${uid}-success`}
         data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
-        className={`relative h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+        className={`flex items-center gap-x-1 rounded-lg bg-[#18191A] light:bg-theme-bg-sidebar border-none w-[180px] group`}
       >
         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
           <button
@@ -173,13 +173,13 @@ function AttachmentItem({ attachment }) {
           </button>
         </div>
         <div
-          className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+          className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
-          <Icon size={30} className="text-white light:text-white" />
+          <Icon size={24} weight="light" className="text-white light:text-white" />
         </div>
-        <div className="flex flex-col w-[130px]">
-          <p className="text-white text-xs font-medium truncate">{file.name}</p>
-          <p className="text-white/80 light:text-black/80 text-xs font-medium">
+        <div className="flex flex-col w-[125px]">
+          <p className="text-white text-xs font-semibold truncate">{file.name}</p>
+          <p className="text-white/80 light:text-black/80 text-[10px] leading-[14px] font-medium">
             File embedded!
           </p>
         </div>

From f4b9dbce8bb6f9879b02170d622ad7d3b18b1a5f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 May 2025 12:35:12 -0700
Subject: [PATCH 2/6] fix attachment styles and spacing of prompt input

---
 .../PromptInput/Attachments/index.jsx         | 62 +++++++++++--------
 .../ChatContainer/PromptInput/index.jsx       |  6 +-
 frontend/src/index.css                        | 16 +++++
 frontend/tailwind.config.js                   |  8 +++
 4 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index 6a1f07051fa..ad1abca4e98 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -10,7 +10,6 @@ import {
   WarningOctagon,
   X,
 } from "@phosphor-icons/react";
-import { humanFileSize } from "@/utils/numbers";
 import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
 import { Tooltip } from "react-tooltip";
 
@@ -45,19 +44,20 @@ function AttachmentItem({ attachment }) {
 
   if (status === "in_progress") {
     return (
-      <div className="flex items-center gap-x-1 rounded-lg bg-[#18191A] light:bg-theme-bg-sidebar border-none w-[180px]">
+      <div className="flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px]">
         <div
           className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
           <CircleNotch
             size={24}
-            weight="light"
-            className="text-white light:text-white animate-spin"
+            className="text-theme-attachment-icon animate-spin"
           />
         </div>
         <div className="flex flex-col w-[125px]">
-          <p className="text-white text-xs font-semibold truncate">{file.name}</p>
-          <p className="text-white/80 light:text-black/80 text-[10px] leading-[14px] font-medium">
+          <p className="text-theme-attachment-text text-xs font-semibold truncate">
+            {file.name}
+          </p>
+          <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
             Uploading...
           </p>
         </div>
@@ -71,29 +71,31 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-error`}
           data-tooltip-content={error}
-          className={`relative flex items-center gap-x-4 rounded-lg bg-error/40 light:bg-error/30 border border-transparent w-[200px] group`}
+          className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-error-bg border-transparent w-[180px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="light:bg-white bg-zinc-700 hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
             >
               <X size={10} className="flex-shrink-0" />
             </button>
           </div>
           <div
-            className={`bg-error rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+            className={`bg-error rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
           >
-            <WarningOctagon size={30} className="text-white light:text-white" />
+            <WarningOctagon
+              size={24}
+              className="text-theme-attachment-icon"
+            />
           </div>
-          <div className="flex flex-col w-[130px]">
-            <p className="text-white light:text-red-600 text-xs font-medium truncate">
+          <div className="flex flex-col w-[125px]">
+            <p className="text-theme-attachment-text text-xs font-semibold truncate">
               {file.name}
             </p>
-            <p className="text-red-100 light:text-red-600 text-xs truncate">
-              {error ?? "this file failed to upload"}. It will not be available
-              in the workspace.
+            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
+              {error ?? "File not embedded!"}
             </p>
           </div>
         </div>
@@ -113,13 +115,13 @@ function AttachmentItem({ attachment }) {
         <div
           data-tooltip-id={`attachment-uid-${uid}-success`}
           data-tooltip-content={`${file.name} will be attached to this prompt. It will not be embedded into the workspace permanently.`}
-          className={`relative flex items-center gap-x-4 rounded-lg bg-zinc-800 light:bg-theme-bg-sidebar border border-white/20 w-[200px] group`}
+          className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-success-bg border border-white/20 w-[180px] group`}
         >
           <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-theme-bg-primary hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
             >
               <X size={10} className="flex-shrink-0" />
             </button>
@@ -132,16 +134,16 @@ function AttachmentItem({ attachment }) {
             />
           ) : (
             <div
-              className={`${iconBgColor} rounded-lg flex items-center justify-center flex-shrink-0 p-1`}
+              className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
             >
-              <Icon size={24} className="text-white light:text-white" />
+              <Icon size={24} className="text-theme-attachment-icon" />
             </div>
           )}
-          <div className="flex flex-col w-[130px]">
-            <p className="text-white text-xs font-medium truncate">
+          <div className="flex flex-col w-[125px]">
+            <p className="text-theme-attachment-text text-xs font-semibold truncate">
               {file.name}
             </p>
-            <p className="text-white/80 light:text-black/80 text-xs font-medium">
+            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
               Image attached!
             </p>
           </div>
@@ -161,13 +163,13 @@ function AttachmentItem({ attachment }) {
       <div
         data-tooltip-id={`attachment-uid-${uid}-success`}
         data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
-        className={`flex items-center gap-x-1 rounded-lg bg-[#18191A] light:bg-theme-bg-sidebar border-none w-[180px] group`}
+        className={`flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group`}
       >
         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
           <button
             onClick={removeFileFromQueue}
             type="button"
-            className="bg-zinc-700 light:bg-white hover:light:text-white hover:light:bg-red-400 hover:bg-red-400 rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            className="bg-theme-bg-primary hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
           >
             <X size={10} className="flex-shrink-0" />
           </button>
@@ -175,11 +177,17 @@ function AttachmentItem({ attachment }) {
         <div
           className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
-          <Icon size={24} weight="light" className="text-white light:text-white" />
+          <Icon
+            size={24}
+            weight="light"
+            className="text-theme-attachment-icon"
+          />
         </div>
         <div className="flex flex-col w-[125px]">
-          <p className="text-white text-xs font-semibold truncate">{file.name}</p>
-          <p className="text-white/80 light:text-black/80 text-[10px] leading-[14px] font-medium">
+          <p className="text-white text-xs font-semibold truncate">
+            {file.name}
+          </p>
+          <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
             File embedded!
           </p>
         </div>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index fa1f08530e2..14c1b173479 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -256,9 +256,9 @@ export default function PromptInput({
         className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl items-center"
       >
         <div className="flex items-center rounded-lg md:mb-4 md:w-full">
-          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-4 overflow-hidden">
+          <div className="w-[95vw] md:w-[635px] bg-theme-bg-chat-input light:bg-white light:border-solid light:border-[1px] light:border-theme-chat-input-border shadow-sm rounded-2xl flex flex-col px-2 overflow-hidden">
             <AttachmentManager attachments={attachments} />
-            <div className="flex items-center w-full border-b-2 border-theme-chat-input-border">
+            <div className="flex items-center border-b border-theme-chat-input-border mx-3">
               <textarea
                 ref={textareaRef}
                 onChange={handleChange}
@@ -311,7 +311,7 @@ export default function PromptInput({
                 </>
               )}
             </div>
-            <div className="flex justify-between py-3.5">
+            <div className="flex justify-between py-3.5 mx-3 mb-1">
               <div className="flex gap-x-2">
                 <AttachItem />
                 <SlashCommandsButton
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3a07acde0e3..ce44c956c19 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -85,6 +85,13 @@
 
   --theme-home-button-secondary-border: #acc1e6;
   --theme-home-button-secondary-border-hover: #293056;
+
+  --theme-attachment-bg: #18191A;
+  --theme-attachment-error-bg: rgba(180, 35, 24, 0.4);
+  --theme-attachment-success-bg: #18191A;
+  --theme-attachment-text: #ffffff;
+  --theme-attachment-text-secondary: rgba(255, 255, 255, 0.8);
+  --theme-attachment-icon: #ffffff;
 }
 
 [data-theme="light"] {
@@ -167,6 +174,15 @@
   --theme-checklist-button-text: #0ba5ec;
   --theme-checklist-button-hover-bg: rgba(11, 165, 236, 0.1);
   --theme-checklist-button-hover-border: rgba(11, 165, 236, 0.8);
+
+  --theme-home-button-secondary-border-hover: #293056;
+
+  --theme-attachment-bg: #eaeaea;
+  --theme-attachment-error-bg: rgba(180, 35, 24, 0.3);
+  --theme-attachment-success-bg: #eaeaea;
+  --theme-attachment-text: #0e0f0f;
+  --theme-attachment-text-secondary: rgba(0, 0, 0, 0.8);
+  --theme-attachment-icon: #ffffff;
 }
 
 [data-theme="light"] .text-white {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index fec041ba3d8..b0554a793f4 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -100,6 +100,14 @@ export default {
           "file-picker": {
             hover: 'var(--theme-file-picker-hover)',
           },
+          attachment: {
+            bg: 'var(--theme-attachment-bg)',
+            'error-bg': 'var(--theme-attachment-error-bg)',
+            'success-bg': 'var(--theme-attachment-success-bg)',
+            text: 'var(--theme-attachment-text)',
+            'text-secondary': 'var(--theme-attachment-text-secondary)',
+            'icon': 'var(--theme-attachment-icon)',
+          },
           home: {
             text: 'var(--theme-home-text)',
             "text-secondary": 'var(--theme-home-text-secondary)',

From 227092a45283cca72ee4daf63d10627c757b85d0 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 May 2025 12:36:07 -0700
Subject: [PATCH 3/6] lint

---
 collector/utils/extensions/DrupalWiki/DrupalWiki/index.js   | 6 +++++-
 .../ChatContainer/PromptInput/Attachments/index.jsx         | 5 +----
 frontend/src/index.css                                      | 4 ++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/collector/utils/extensions/DrupalWiki/DrupalWiki/index.js b/collector/utils/extensions/DrupalWiki/DrupalWiki/index.js
index 352c6205e02..9c7ad8879c0 100644
--- a/collector/utils/extensions/DrupalWiki/DrupalWiki/index.js
+++ b/collector/utils/extensions/DrupalWiki/DrupalWiki/index.js
@@ -7,7 +7,11 @@
 
 const { htmlToText } = require("html-to-text");
 const { tokenizeString } = require("../../../tokenizer");
-const { sanitizeFileName, writeToServerDocuments, documentsFolder } = require("../../../files");
+const {
+  sanitizeFileName,
+  writeToServerDocuments,
+  documentsFolder,
+} = require("../../../files");
 const { default: slugify } = require("slugify");
 const path = require("path");
 const fs = require("fs");
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index ad1abca4e98..a6f70a83893 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -85,10 +85,7 @@ function AttachmentItem({ attachment }) {
           <div
             className={`bg-error rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
           >
-            <WarningOctagon
-              size={24}
-              className="text-theme-attachment-icon"
-            />
+            <WarningOctagon size={24} className="text-theme-attachment-icon" />
           </div>
           <div className="flex flex-col w-[125px]">
             <p className="text-theme-attachment-text text-xs font-semibold truncate">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a81187f8db6..a1e792c2ea7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -86,9 +86,9 @@
   --theme-home-button-secondary-border: #acc1e6;
   --theme-home-button-secondary-border-hover: #293056;
 
-  --theme-attachment-bg: #18191A;
+  --theme-attachment-bg: #18191a;
   --theme-attachment-error-bg: rgba(180, 35, 24, 0.4);
-  --theme-attachment-success-bg: #18191A;
+  --theme-attachment-success-bg: #18191a;
   --theme-attachment-text: #ffffff;
   --theme-attachment-text-secondary: rgba(255, 255, 255, 0.8);
   --theme-attachment-icon: #ffffff;

From 884721c057e596ab9c40592cdfa31a6115648feb Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 May 2025 17:05:03 -0700
Subject: [PATCH 4/6] fix loading state for dark/light modes

---
 .../PromptInput/Attachments/index.jsx         | 24 +++++++++++++------
 frontend/src/index.css                        |  6 ++++-
 frontend/tailwind.config.js                   |  2 ++
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index a6f70a83893..672b0c50c30 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -44,13 +44,23 @@ function AttachmentItem({ attachment }) {
 
   if (status === "in_progress") {
     return (
-      <div className="flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px]">
+      <div className="relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group">
+        <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
+          <button
+            onClick={removeFileFromQueue}
+            type="button"
+            className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
+          >
+            <X size={10} className="flex-shrink-0" />
+          </button>
+        </div>
         <div
-          className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
+          className={`bg-theme-attachment-icon-spinner-bg rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
           <CircleNotch
-            size={24}
-            className="text-theme-attachment-icon animate-spin"
+            size={18}
+            weight="bold"
+            className="text-theme-attachment-icon-spinner animate-spin"
           />
         </div>
         <div className="flex flex-col w-[125px]">
@@ -118,7 +128,7 @@ function AttachmentItem({ attachment }) {
             <button
               onClick={removeFileFromQueue}
               type="button"
-              className="bg-theme-bg-primary hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+              className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
             >
               <X size={10} className="flex-shrink-0" />
             </button>
@@ -160,13 +170,13 @@ function AttachmentItem({ attachment }) {
       <div
         data-tooltip-id={`attachment-uid-${uid}-success`}
         data-tooltip-content={`${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`}
-        className={`flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group`}
+        className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group`}
       >
         <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
           <button
             onClick={removeFileFromQueue}
             type="button"
-            className="bg-theme-bg-primary hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-white/40"
+            className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
           >
             <X size={10} className="flex-shrink-0" />
           </button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a1e792c2ea7..7c9c547dce0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -92,6 +92,8 @@
   --theme-attachment-text: #ffffff;
   --theme-attachment-text-secondary: rgba(255, 255, 255, 0.8);
   --theme-attachment-icon: #ffffff;
+  --theme-attachment-icon-spinner: #ffffff;
+  --theme-attachment-icon-spinner-bg: #27282a;
 }
 
 [data-theme="light"] {
@@ -177,12 +179,14 @@
 
   --theme-home-button-secondary-border-hover: #293056;
 
-  --theme-attachment-bg: #eaeaea;
+  --theme-attachment-bg: #edf2fa;
   --theme-attachment-error-bg: rgba(180, 35, 24, 0.3);
   --theme-attachment-success-bg: #eaeaea;
   --theme-attachment-text: #0e0f0f;
   --theme-attachment-text-secondary: rgba(0, 0, 0, 0.8);
   --theme-attachment-icon: #ffffff;
+  --theme-attachment-icon-spinner: #7cd4fd;
+  --theme-attachment-icon-spinner-bg: #ffffff;
 }
 
 [data-theme="light"] .text-white {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b0554a793f4..b9cc37fe4a1 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -107,6 +107,8 @@ export default {
             text: 'var(--theme-attachment-text)',
             'text-secondary': 'var(--theme-attachment-text-secondary)',
             'icon': 'var(--theme-attachment-icon)',
+            'icon-spinner': 'var(--theme-attachment-icon-spinner)',
+            'icon-spinner-bg': 'var(--theme-attachment-icon-spinner-bg)',
           },
           home: {
             text: 'var(--theme-home-text)',

From 8bd6d3757b4c2e89d42289e077267b00a028ea8e Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 27 May 2025 17:08:42 -0700
Subject: [PATCH 5/6] truncate error message

---
 .../ChatContainer/PromptInput/Attachments/index.jsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index 672b0c50c30..4a2c8b1e846 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -101,7 +101,7 @@ function AttachmentItem({ attachment }) {
             <p className="text-theme-attachment-text text-xs font-semibold truncate">
               {file.name}
             </p>
-            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
+            <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium truncate">
               {error ?? "File not embedded!"}
             </p>
           </div>

From b10de8dc3e7ff7706cc574b36469a5041e413de4 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 27 May 2025 17:24:17 -0700
Subject: [PATCH 6/6] image attachment fix

---
 .../ChatContainer/PromptInput/Attachments/index.jsx   | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
index 4a2c8b1e846..29d346333ef 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx
@@ -45,15 +45,6 @@ function AttachmentItem({ attachment }) {
   if (status === "in_progress") {
     return (
       <div className="relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-bg border-none w-[180px] group">
-        <div className="invisible group-hover:visible absolute -top-[5px] -right-[5px] w-fit h-fit z-[10]">
-          <button
-            onClick={removeFileFromQueue}
-            type="button"
-            className="bg-white hover:bg-error hover:text-theme-attachment-text rounded-full p-1 flex items-center justify-center hover:border-transparent border border-theme-attachment-bg"
-          >
-            <X size={10} className="flex-shrink-0" />
-          </button>
-        </div>
         <div
           className={`bg-theme-attachment-icon-spinner-bg rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
@@ -137,7 +128,7 @@ function AttachmentItem({ attachment }) {
             <img
               alt={`Preview of ${file.name}`}
               src={contentString}
-              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center`}
+              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center m-1`}
             />
           ) : (
             <div