📦 feat(client): add FileInput component and improve dialog layout consistency

[berry-13]

Summary

Introduces a new reusable FileInput component to the @librechat/client package for standardized file upload handling across the application. Refactors OGDialogFooter layout for improved consistency and responsiveness. Updates SecretInput styling for better UI alignment. Components are now used in Chat attachments, Agent images, and MCP icon uploads

Change Type

• Style
• New feature (non-breaking change which adds functionality)
• Refactor

Testing

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.

[Copilot]

Pull request overview

Adds a reusable file upload input to @librechat/client and refactors several dialogs/menus to standardize footer layout and file-picker behavior across the app.

Changes:

• Introduce FileInput (with FILE_TYPE_MAP + acceptTypes) and adopt it in multiple upload entry points.
• Standardize dialog footer layout via OGDialogFooter/DialogFooter class updates and refactor select dialogs to use the newer dialog primitives.
• Update MCP delete dialog copy and bump @librechat/client version.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/client/src/components/index.ts	Re-export FileInput, FILE_TYPE_MAP, and FileType from the client component barrel.
packages/client/src/components/SecretInput.tsx	Adjust input border styling for alignment/consistency.
packages/client/src/components/OriginalDialog.tsx	Update DialogFooter/OGDialogFooter layout classes for consistent spacing/responsiveness.
packages/client/src/components/OGDialogTemplate.tsx	Adjust button layout classes (removes small-screen ordering/width classes).
packages/client/src/components/FileUpload.tsx	Migrate hidden file input implementation to the new FileInput + acceptTypes.
packages/client/src/components/FileInput.tsx	New reusable file input component + predefined accept mappings.
packages/client/package.json	Bump @librechat/client version.
package-lock.json	Update lockfile for new client version.
client/src/locales/en/translation.json	Add/adjust MCP delete strings and confirmation text.
client/src/components/SidePanel/MCPBuilder/MCPServerDialog/sections/TrustSection.tsx	Import ordering/type import placement cleanup.
client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx	Minor delete button sizing + updated delete confirmation copy usage.
client/src/components/SidePanel/Builder/Images.tsx	Use FileInput for avatar upload and localize the upload label.
client/src/components/SidePanel/Agents/MCPIcon.tsx	Use FileInput for MCP icon upload.
client/src/components/SidePanel/Agents/Images.tsx	Use FileInput for agent avatar upload.
client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx	Refactor to use OGDialog* primitives + SecretInput for consistent dialog layout.
client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx	Use OGDialogFooter in delete dialog; wrap “create link” action in footer component.
client/src/components/Conversations/ConvoOptions/DeleteButton.tsx	Replace custom footer div with OGDialogFooter for consistency.
client/src/components/Chat/Input/Files/AttachFileMenu.tsx	Replace inline accept-string logic with shared FILE_TYPE_MAP.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

com_ui_delete_mcp_server is defined twice in en/translation.json. Duplicate JSON keys are error-prone and can hide changes (only the last value is used). Remove one of the entries (keep a single canonical definition).

Suggested change

"com_ui_delete_mcp_server": "Delete MCP Server?",

[Copilot]

FILE_TYPE_MAP.all is set to '*', but accept expects a comma-separated list of MIME types and/or extensions (e.g. image/*, .pdf). For “all files”, the most compatible behavior is to omit the accept attribute entirely (return undefined) or set it to an empty string, rather than '*' which is not a valid accept token in many browsers.

[Copilot]

OGDialogFooter is used outside of a dialog (for the “Create link” button). Since OGDialogFooter now includes layout styles like w-full and flex-col-reverse, it can unexpectedly affect the surrounding toolbar layout. Prefer a local wrapper (div with appropriate flex classes) for non-dialog button rows, and reserve OGDialogFooter for dialog content.

Suggested change

	<OGDialogFooter>
	<Button disabled={isCreateLoading} variant="submit" onClick={createShareLink}>
	{!isCreateLoading && localize('com_ui_create_link')}
	{isCreateLoading && <Spinner className="size-4" />}
	</Button>
	</OGDialogFooter>
	<div className="flex items-center">
	<Button disabled={isCreateLoading} variant="submit" onClick={createShareLink}>
	{!isCreateLoading && localize('com_ui_create_link')}
	{isCreateLoading && <Spinner className="size-4" />}
	</Button>
	</div>