simplify tooltips for prompt input items

Remove container for images

frontend/src/components/WorkspaceChat/ChatContainer/ChatTooltips/index.jsx

@@ -84,6 +84,12 @@ export function ChatTooltips() {
         delayShow={500}
         className="tooltip !text-xs max-w-[350px]"
       />
+      <Tooltip
+        id="attachment-status-tooltip"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs"
+      />
       <DocumentLevelTooltip />
     </>
   );

frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/Attachments/index.jsx

@@ -11,7 +11,6 @@ import {
   X,
 } from "@phosphor-icons/react";
 import { REMOVE_ATTACHMENT_EVENT } from "../../DnDWrapper";
-import { Tooltip } from "react-tooltip";
 
 /**
  * @param {{attachments: import("../../DnDWrapper").Attachment[]}}
@@ -68,9 +67,8 @@ function AttachmentItem({ attachment }) {
 
   if (status === "failed") {
     return (
-      <>
       <div
-          data-tooltip-id={`attachment-uid-${uid}-error`}
+        data-tooltip-id="attachment-status-tooltip"
         data-tooltip-content={error}
         className={`relative flex items-center gap-x-1 rounded-lg bg-theme-attachment-error-bg border-none w-[180px] group`}
       >
@@ -97,21 +95,39 @@ function AttachmentItem({ attachment }) {
           </p>
         </div>
       </div>
-        <Tooltip
-          id={`attachment-uid-${uid}-error`}
-          place="top"
-          delayShow={300}
-          className="allm-tooltip !allm-text-xs"
-        />
-      </>
     );
   }
 
   if (type === "attachment") {
+    if (contentString) {
       return (
-      <>
         <div
-          data-tooltip-id={`attachment-uid-${uid}-success`}
+          data-tooltip-id="attachment-status-tooltip"
+          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-1 rounded-lg border-none 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>
+          <img
+            alt={`Preview of ${file.name}`}
+            src={contentString}
+            style={{ objectFit: "cover", objectPosition: "center" }}
+            className={`${iconBgColor} w-[40px] h-[40px] rounded-lg flex items-center justify-center`}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        data-tooltip-id="attachment-status-tooltip"
         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-1 rounded-lg bg-theme-attachment-success-bg border-none w-[180px] group`}
       >
@@ -124,19 +140,11 @@ function AttachmentItem({ attachment }) {
             <X size={10} className="flex-shrink-0" />
           </button>
         </div>
-          {contentString ? (
-            <img
-              alt={`Preview of ${file.name}`}
-              src={contentString}
-              className={`${iconBgColor} w-[30px] h-[30px] rounded-lg flex items-center justify-center m-1`}
-            />
-          ) : (
         <div
           className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
         >
           <Icon 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">
             {file.name}
@@ -146,20 +154,12 @@ function AttachmentItem({ attachment }) {
           </p>
         </div>
       </div>
-        <Tooltip
-          id={`attachment-uid-${uid}-success`}
-          place="top"
-          delayShow={300}
-          className="allm-tooltip !allm-text-xs"
-        />
-      </>
     );
   }
 
   return (
-    <>
     <div
-        data-tooltip-id={`attachment-uid-${uid}-success`}
+      data-tooltip-id="attachment-status-tooltip"
       data-tooltip-content={
         status === "embedded"
           ? `${file.name} was uploaded and embedded into this workspace. It will be available for RAG chat now.`
@@ -179,28 +179,15 @@ function AttachmentItem({ attachment }) {
       <div
         className={`${iconBgColor} rounded-md flex items-center justify-center flex-shrink-0 h-[32px] w-[32px] m-1`}
       >
-          <Icon
+        <Icon size={24} weight="light" className="text-theme-attachment-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">
+        <p className="text-white text-xs font-semibold truncate">{file.name}</p>
-            {file.name}
-          </p>
         <p className="text-theme-attachment-text-secondary text-[10px] leading-[14px] font-medium">
           {status === "embedded" ? "File embedded!" : "Added as context!"}
         </p>
       </div>
     </div>
-      <Tooltip
-        id={`attachment-uid-${uid}-success`}
-        place="top"
-        delayShow={300}
-        className="allm-tooltip !allm-text-xs"
-      />
-    </>
   );
 }