Enhance attachment menu and toggle button in App.jsx

This commit is contained in:
2026-04-17 13:03:45 +02:00
parent ab2424dbd8
commit cecbc24f26

View File

@@ -3376,23 +3376,57 @@ async function createNewChat() {
</div>
)}
</div>
{selectedVisionModelSupportsVision && (
<div className="footer-tool-group" ref={attachmentMenuRef}>
<button
type="button"
className={"image-attach-toggle" + (composerAttachments.length > 0 ? " active" : "")}
onClick={openImagePicker}
title="Attach images"
aria-label="Attach images"
className={"attachment-toggle" + (composerAttachments.length > 0 ? " active" : "")}
onClick={() => setIsAttachmentMenuOpen(prev => !prev)}
title="Add attachments"
aria-label="Add attachments"
aria-haspopup="menu"
aria-expanded={isAttachmentMenuOpen}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
aria-hidden="true">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="8.5" cy="8.5" r="1.5"/>
<path d="M21 15l-5-5L5 21"/>
<path d="M12 5v14"/>
<path d="M5 12h14"/>
</svg>
</button>
)}
{isAttachmentMenuOpen && (
<div className="attachment-menu" role="menu">
<button
type="button"
className="attachment-menu-option"
onClick={() => {
setIsAttachmentMenuOpen(false)
openImagePicker()
}}
disabled={!canAttachImages}
title={canAttachImages ? 'Add one or more image files' : imageAttachmentUnavailableReason}
>
<span>Add Image(s)</span>
{!canAttachImages && <span className="attachment-menu-status">Unavailable</span>}
</button>
<button
type="button"
className="attachment-menu-option"
onClick={async () => {
setIsAttachmentMenuOpen(false)
await openFilePicker()
}}
title="Add supported document, text, audio, or video files"
>
<span>Add File(s)</span>
</button>
{!canAttachImages && (
<div className="attachment-menu-hint">
{imageAttachmentUnavailableReason}
</div>
)}
</div>
)}
</div>
{audioInputEnabled && (
<button
type="button"