lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep image attachment add button visible

Browse Source
This commit is contained in:
134 2026-07-09 14:39:38 +08:00
parent 2c318360b3
commit a5995ca0c4
1 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
components/canvas/CanvasChatPanel.tsx
View File

@ -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">