From a5995ca0c478c6a3798243955ed926d8d14a6164 Mon Sep 17 00:00:00 2001
From: 134 <a134@134deMacBook-Pro.local>
Date: Thu, 9 Jul 2026 14:39:38 +0800
Subject: [PATCH] fix: keep image attachment add button visible

---
 components/canvas/CanvasChatPanel.tsx | 120 ++++++++++++++------------
 1 file changed, 64 insertions(+), 56 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 4276fbb33..fa7d1002e 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -15564,63 +15564,71 @@ export function CanvasChatPanel({
               </div>
             ) : null}
             {!isWorkspacePresentation && !isDetailGenerationMode && !isVideoWorkspace && activeComposerMode === "image" ? (
-              <button
-                type="button"
-                className="relative mx-4 mt-3 flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1.5 overflow-hidden rounded-[18px] bg-[#f3f3f4] text-[#a8adb5] transition-colors hover:bg-[#ececee] hover:text-[#7d848e] dark:bg-white/8 dark:text-zinc-400 dark:hover:bg-white/12"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={isSubmitting}
-                title="添加参考图"
-              >
-                {attachments[0]?.url ? (
-                  <img
-                    src={buildPreviewImageUrl(attachments[0].url, 180)}
-                    alt={attachments[0].name || "参考图"}
-                    className="h-full w-full object-cover"
-                    loading="lazy"
-                    decoding="async"
-                    onError={(event) => {
-                      if (event.currentTarget.src !== attachments[0]?.url) {
-                        event.currentTarget.src = attachments[0]?.url || "";
-                      }
-                    }}
-                  />
-                ) : (
-                  <>
-                    <ImagePlus className="h-5 w-5" />
-                    <span className="text-[13px] font-medium leading-none">参考图</span>
-                  </>
-                )}
-                {composerReferenceUploadProgress ? (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 bg-black/65 px-1.5 text-white backdrop-blur-[1px]">
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    <span className="text-[10px] font-medium leading-none">上传中</span>
-                    <span className="text-[11px] font-semibold leading-none tabular-nums">
-                      {Math.max(
-                        1,
-                        Math.min(
-                          100,
-                          Math.round(composerReferenceUploadProgress.percent || 1)
-                        )
-                      )}
-                      %
-                    </span>
-                    <span className="absolute inset-x-2 bottom-2 h-1 overflow-hidden rounded-full bg-white/20">
-                      <span
-                        className="block h-full rounded-full bg-[#e0ff3a] transition-all duration-300"
-                        style={{
-                          width: `${Math.max(
-                            1,
-                            Math.min(
-                              100,
-                              Math.round(composerReferenceUploadProgress.percent || 1)
-                            )
-                          )}%`,
-                        }}
-                      />
-                    </span>
+              <div className="mx-4 mt-3 flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
+                {attachments.map((attachment, index) => (
+                  <div
+                    key={`${attachment.url}-${index}`}
+                    className="relative h-16 w-16 shrink-0 overflow-hidden rounded-[18px] bg-[#f3f3f4] dark:bg-white/8"
+                    title={attachment.name || `参考图 ${index + 1}`}
+                  >
+                    <img
+                      src={buildPreviewImageUrl(attachment.url, 180)}
+                      alt={attachment.name || `参考图 ${index + 1}`}
+                      className="h-full w-full object-cover"
+                      loading="lazy"
+                      decoding="async"
+                      onError={(event) => {
+                        if (event.currentTarget.src !== attachment.url) {
+                          event.currentTarget.src = attachment.url;
+                        }
+                      }}
+                    />
                   </div>
-                ) : null}
-              </button>
+                ))}
+                <button
+                  type="button"
+                  className="relative flex h-16 w-16 shrink-0 flex-col items-center justify-center gap-1.5 overflow-hidden rounded-[18px] border border-dashed border-[#d9dde4] bg-[#f3f3f4] text-[#a8adb5] transition-colors hover:border-[#c6ccd6] hover:bg-[#ececee] hover:text-[#7d848e] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/12 dark:bg-white/8 dark:text-zinc-400 dark:hover:border-white/20 dark:hover:bg-white/12"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isSubmitting}
+                  title="继续添加参考图"
+                  aria-label="继续添加参考图"
+                >
+                  <ImagePlus className="h-5 w-5" />
+                  <span className="text-[13px] font-medium leading-none">
+                    参考图
+                  </span>
+                  {composerReferenceUploadProgress ? (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 bg-black/65 px-1.5 text-white backdrop-blur-[1px]">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span className="text-[10px] font-medium leading-none">上传中</span>
+                      <span className="text-[11px] font-semibold leading-none tabular-nums">
+                        {Math.max(
+                          1,
+                          Math.min(
+                            100,
+                            Math.round(composerReferenceUploadProgress.percent || 1)
+                          )
+                        )}
+                        %
+                      </span>
+                      <span className="absolute inset-x-2 bottom-2 h-1 overflow-hidden rounded-full bg-white/20">
+                        <span
+                          className="block h-full rounded-full bg-[#e0ff3a] transition-all duration-300"
+                          style={{
+                            width: `${Math.max(
+                              1,
+                              Math.min(
+                                100,
+                                Math.round(composerReferenceUploadProgress.percent || 1)
+                              )
+                            )}%`,
+                          }}
+                        />
+                      </span>
+                    </div>
+                  ) : null}
+                </button>
+              </div>
             ) : null}
             {isClawdMode && clawdTableFiles.length > 0 ? (
               <div className="mx-4 mt-3 flex flex-wrap gap-2">