feat(chat-ui): add MCP OAuth2 value prop and OAuth2 pill on server cards

- Add subtitle in chat empty state explaining MCP OAuth2 value prop with 'Open Apps' link
- Update MCPAppsPanel header copy to explain the flow more clearly
- Show OAuth2 pill badge on server cards where auth_type is oauth2
This commit is contained in:
Ishaan Jaffer 2026-03-10 12:44:39 -07:00
parent 9543d785b5
commit 0e0657b949
2 changed files with 21 additions and 2 deletions

View file

@ -944,10 +944,20 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
: greeting}
</h1>
{isComparisonMode && (
{isComparisonMode ? (
<p style={{ margin: "-16px 0 24px", fontSize: 14, color: "#6b7280", textAlign: "center" }}>
Send a message to see responses side-by-side
</p>
) : (
<p style={{ margin: "-16px 0 28px", fontSize: 14, color: "#6b7280", textAlign: "center", maxWidth: 520, lineHeight: 1.6 }}>
Chat with 100+ LLMs + MCP tools — authenticate once, use them here.{" "}
<button
onClick={() => setSidebarView("apps")}
style={{ background: "none", border: "none", cursor: "pointer", color: "#1677ff", fontSize: 14, padding: 0, fontWeight: 500 }}
>
Open Apps →
</button>
</p>
)}
{/* Input card */}

View file

@ -174,7 +174,7 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
}}>Beta</span>
</div>
<p style={{ margin: 0, fontSize: 13, color: "#6b7280" }}>
Connect tools to your chat.
Browse tools, authenticate once, use in chat — no setup needed.
</p>
</div>
<Input
@ -261,6 +261,15 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
{isConnected && (
<span style={{ width: 7, height: 7, borderRadius: "50%", background: "#1677ff", flexShrink: 0 }} />
)}
{server.auth_type === "oauth2" && (
<span style={{
fontSize: 10, fontWeight: 600, color: "#7c3aed",
background: "#f3e8ff", borderRadius: 4, padding: "1px 5px",
letterSpacing: "0.03em", flexShrink: 0, whiteSpace: "nowrap",
}}>
OAuth2
</span>
)}
<RightOutlined style={{ fontSize: 11, color: "#d1d5db", flexShrink: 0 }} />
</div>
);