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(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 ( - + + {previewUrl ? ( + + {attachment.file.name} + + ) : null} {attachment.file.name}