From f3a7c9757d5abb1004c20a42ce509bd18f342db0 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Fri, 24 Oct 2025 01:05:46 +0100
Subject: [PATCH] Improve attachment chip design with file icons and better
 styling

---
 src/components/prompt-input.tsx | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/prompt-input.tsx b/src/components/prompt-input.tsx
index 0dfe68d2..dd7c7382 100644
--- a/src/components/prompt-input.tsx
+++ b/src/components/prompt-input.tsx
@@ -287,19 +287,34 @@ export default function PromptInput(props: PromptInputProps) {
           />
         </Show>
 
-        <div class="flex flex-1 flex-col gap-2">
+        <div class="flex flex-1 flex-col">
           <Show when={attachments().length > 0}>
-            <div class="flex flex-wrap gap-1">
+            <div class="flex flex-wrap gap-1.5 border-b border-gray-200 pb-2 dark:border-gray-700">
               <For each={attachments()}>
                 {(attachment) => (
-                  <div class="inline-flex items-center gap-1 rounded bg-blue-500 px-2 py-0.5 text-xs text-white">
-                    <span class="font-mono">@{attachment.filename}</span>
+                  <div class="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20">
+                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                      />
+                    </svg>
+                    <span>{attachment.filename}</span>
                     <button
                       onClick={() => handleRemoveAttachment(attachment.id)}
-                      class="flex h-3.5 w-3.5 items-center justify-center rounded text-sm hover:bg-blue-600"
+                      class="ml-0.5 flex h-4 w-4 items-center justify-center rounded hover:bg-blue-100 dark:hover:bg-blue-500/20"
                       aria-label="Remove attachment"
                     >
-                      ×
+                      <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
                     </button>
                   </div>
                 )}
@@ -317,6 +332,7 @@ export default function PromptInput(props: PromptInputProps) {
             onBlur={() => setIsFocused(false)}
             disabled={sending() || props.disabled}
             rows={1}
+            style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
           />
         </div>