fix: attachment icon cropped for first message

Author: DevanandGowda

src/components/chat/ChatMessage.tsx

@@ -50,11 +50,9 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
   `;
 
   return (
-    <div
-      className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2 relative`}
-    >
+    <>
       {message.attachments && message.attachments.length > 0 && (
-        <div className="flex absolute -top-4 right-0 gap-1 items-center">
+        <div className="flex gap-1 items-center !-mb-2 ml-auto w-fit">
           <span className="text-neutral-500 text-xs">Attached</span>
           <div className="flex gap-1 items-center">
             {message.attachments.map((attachment) => {
@@ -68,34 +66,36 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
           </div>
         </div>
       )}
-      <div className={bubbleClasses}>
-        <div className={markdownProseClasses}>
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {message.content as string}
-          </ReactMarkdown>
-          {isStreaming && !isUser && (
-            <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1 align-text-bottom" />
+      <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-2`}>
+        <div className={bubbleClasses}>
+          <div className={markdownProseClasses}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+              {message.content as string}
+            </ReactMarkdown>
+            {isStreaming && !isUser && (
+              <span className="inline-block w-2 h-4 bg-gray-400 animate-pulse ml-1 align-text-bottom" />
+            )}
+          </div>
+
+          {!isUser && (
+            <div className="flex mt-2 space-x-2">
+              <button
+                onClick={() => copyToClipboard(message.content as string)}
+                className="p-1 text-neutral-500 hover:text-neutral-700"
+                title={isCopied ? "Copied!" : "Copy to clipboard"}
+              >
+                <Image
+                  src={isCopied ? "/img/tick_icon.svg" : "/img/copy-icon.png"}
+                  width={12}
+                  height={12}
+                  alt={isCopied ? "copied" : "copy-icon"}
+                />
+              </button>
+            </div>
           )}
         </div>
-
-        {!isUser && (
-          <div className="flex mt-2 space-x-2">
-            <button
-              onClick={() => copyToClipboard(message.content as string)}
-              className="p-1 text-neutral-500 hover:text-neutral-700"
-              title={isCopied ? "Copied!" : "Copy to clipboard"}
-            >
-              <Image
-                src={isCopied ? "/img/tick_icon.svg" : "/img/copy-icon.png"}
-                width={12}
-                height={12}
-                alt={isCopied ? "copied" : "copy-icon"}
-              />
-            </button>
-          </div>
-        )}
       </div>
-    </div>
+    </>
   );
 };