From f592ecafede5a0e6b2441fd2ce1c442a686af44b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Thu, 16 Jul 2026 14:41:54 +0800
Subject: [PATCH] preview attachment

---
 .../components/RichInputArea/attachment.tsx   | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/ai-game-creator-shell/src/view/home/components/RichInputArea/attachment.tsx b/apps/ai-game-creator-shell/src/view/home/components/RichInputArea/attachment.tsx
index ce549712e..1e2c3330b 100644
--- a/apps/ai-game-creator-shell/src/view/home/components/RichInputArea/attachment.tsx
+++ b/apps/ai-game-creator-shell/src/view/home/components/RichInputArea/attachment.tsx
@@ -1,6 +1,7 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getNodeByKey, type NodeKey } from 'lexical';
 import { X } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 import type { HomeAttachmentDraft } from '../../useHomeDraftStore';
 
@@ -12,8 +13,30 @@ export function AttachmentToken({
   nodeKey: NodeKey;
 }) {
   const [editor] = useLexicalComposerContext();
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!attachment.file.type.startsWith('image/')) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(attachment.file);
+    setPreviewUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [attachment.file]);
+
   return (
-    <span className="mx-0.75 inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 align-middle text-[11px] text-(--platform-neutral-text)">
+    <span className="group/attachment relative mx-0.75 inline-flex min-h-6 max-w-full items-center gap-1 rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) px-1.75 align-middle text-[11px] text-(--platform-neutral-text)">
+      {previewUrl ? (
+        <span className="pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-20 hidden max-h-60 w-max max-w-60 -translate-x-1/2 overflow-hidden rounded-[7px] border border-(--platform-subpanel-border) bg-(--platform-neutral-bg) p-1 shadow-lg group-hover/attachment:block group-focus-within/attachment:block">
+          <img
+            className="block max-h-56 max-w-56 object-contain"
+            src={previewUrl}
+            alt={attachment.file.name}
+          />
+        </span>
+      ) : null}
       {attachment.file.name}
       <button
         className="grid size-4.5 cursor-pointer place-items-center border-0 bg-transparent p-0 text-(--platform-text-soft)"