mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-07-04 13:21:17 +00:00
feat: show MCP server icon in OAuth dialog title
This commit is contained in:
parent
999301f10b
commit
2782af34c8
2 changed files with 25 additions and 3 deletions
|
|
@ -18,6 +18,8 @@ interface McpOAuthDialogProps {
|
|||
onOpenChange: (open: boolean) => void;
|
||||
serverName: string;
|
||||
oauthUrl: string;
|
||||
/** The MCP server's icon, shown beside the title when the server provides one. */
|
||||
iconUrl?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -32,10 +34,12 @@ export default function McpOAuthDialog({
|
|||
onOpenChange,
|
||||
serverName,
|
||||
oauthUrl,
|
||||
iconUrl,
|
||||
}: McpOAuthDialogProps) {
|
||||
const localize = useLocalize();
|
||||
const [isCopying, setIsCopying] = useState(false);
|
||||
const [showQR, setShowQR] = useState(false);
|
||||
const [iconError, setIconError] = useState(false);
|
||||
const copyUrl = useCopyToClipboard({ text: oauthUrl });
|
||||
|
||||
if (!oauthUrl) {
|
||||
|
|
@ -45,9 +49,25 @@ export default function McpOAuthDialog({
|
|||
return (
|
||||
<OGDialog open={open} onOpenChange={onOpenChange}>
|
||||
<OGDialogContent className="w-11/12 max-w-md overflow-hidden rounded-2xl">
|
||||
<OGDialogTitle className="text-base font-semibold text-text-primary">
|
||||
{localize('com_nav_mcp_connect_server', { 0: serverName })}
|
||||
</OGDialogTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{iconUrl && !iconError && (
|
||||
<span
|
||||
className="flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
onError={() => setIconError(true)}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<OGDialogTitle className="text-base font-semibold text-text-primary">
|
||||
{localize('com_nav_mcp_connect_server', { 0: serverName })}
|
||||
</OGDialogTitle>
|
||||
</div>
|
||||
<OGDialogDescription className="text-sm text-text-secondary">
|
||||
{localize('com_ui_mcp_oauth_description')}
|
||||
</OGDialogDescription>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
|
|||
import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
|
||||
import McpOAuthDialog from '~/components/MCP/McpOAuthDialog';
|
||||
import { useAgentPanelContext } from '~/Providers';
|
||||
import { getIconForItem } from '../../items/icons';
|
||||
import MCPToolItem from '../../../MCPToolItem';
|
||||
import { Collapse } from '~/components/ui';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
|
@ -346,6 +347,7 @@ export default function McpSection({ item }: Props) {
|
|||
onOpenChange={setOauthOpen}
|
||||
serverName={serverName}
|
||||
oauthUrl={oauthUrl ?? getOAuthUrl(serverName) ?? ''}
|
||||
iconUrl={getIconForItem(item).iconUrl}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue