Enhance attachment menu and toggle button in App.jsx
This commit is contained in:
52
src/App.jsx
52
src/App.jsx
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user