Skip to content

Commit f67faa4

Browse files
freddyaboultongradio-pr-botabidlabs
authored
Use icons instead of Emojis in MCP page (#11767)
* Icons * add changeset * Fix * Update js/core/src/api_docs/MCPSnippet.svelte * format --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]>
1 parent 0025e1a commit f67faa4

File tree

6 files changed

+80
-17
lines changed

6 files changed

+80
-17
lines changed

‎.changeset/mean-ears-press.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@gradio/core": patch
3+
"@gradio/icons": patch
4+
"gradio": patch
5+
---
6+
7+
feat:Use icons instead of Emojis in MCP page

‎js/core/src/api_docs/MCPSnippet.svelte

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { Block } from "@gradio/atoms";
33
import CopyButton from "./CopyButton.svelte";
4+
import { Tool, Prompt, Resource } from "@gradio/icons";
45
56
export let mcp_server_active: boolean;
67
export let mcp_server_url: string;
@@ -42,10 +43,10 @@
4243
["stdio", "STDIO"]
4344
] as const;
4445
45-
const tool_type_emojis = {
46-
tool: "🔧",
47-
resource: "📕",
48-
prompt: "💬"
46+
const tool_type_icons: Record<Tool["meta"]["mcp_type"], typeof Tool> = {
47+
tool: Tool,
48+
resource: Resource,
49+
prompt: Prompt
4950
};
5051
5152
$: display_url =
@@ -145,11 +146,15 @@
145146
{/if}
146147

147148
<div class="tool-selection">
148-
<strong
149-
>{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
150-
({tool_type_emojis.tool}), Resources ({tool_type_emojis.resource}), and
151-
Prompts ({tool_type_emojis.prompt})</strong
152-
>
149+
<strong>
150+
{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
151+
(<span style="display: inline-block; vertical-align: sub;"><Tool /></span
152+
>), Resources (<span style="display: inline-block; vertical-align: sub;"
153+
><Resource /></span
154+
>), and Prompts (<span style="display: inline-block; vertical-align: sub;"
155+
><Prompt /></span
156+
>)
157+
</strong>
153158
{#if all_tools.length > 0}
154159
<div class="tool-selection-controls">
155160
<button
@@ -199,17 +204,23 @@
199204
class="tool-header"
200205
on:click={() => (tool.expanded = !tool.expanded)}
201206
>
202-
<span
203-
><span class="tool-name"
204-
>{tool_type_emojis[tool.meta.mcp_type]} {tool.name}</span
207+
<span style="display: inline-block">
208+
<span
209+
style="display: inline-block; padding-right: 6px; vertical-align: sub"
205210
>
211+
{#if tool_type_icons[tool.meta.mcp_type]}
212+
{@const Icon = tool_type_icons[tool.meta.mcp_type]}
213+
<Icon />
214+
{/if}
215+
</span>
216+
<span class="tool-name">{tool.name}</span>
206217
&nbsp;
207-
<span class="tool-description"
208-
>{tool.description
218+
<span class="tool-description">
219+
{tool.description
209220
? tool.description
210-
: "⚠︎ No description provided in function docstring"}</span
211-
></span
212-
>
221+
: "⚠︎ No description provided in function docstring"}
222+
</span>
223+
</span>
213224
<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
214225
</button>
215226
</div>

‎js/icons/src/Prompt.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
export let icon_size = 16;
3+
</script>
4+
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={icon_size}
8+
height={icon_size}
9+
viewBox="0 0 32 32"
10+
><path
11+
fill="currentColor"
12+
d="M17.74 30L16 29l4-7h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h9v2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4h20a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-4.84Z"
13+
/><path fill="currentColor" d="M8 10h16v2H8zm0 6h10v2H8z" /></svg
14+
>

‎js/icons/src/Resource.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
export let icon_size = 16;
3+
</script>
4+
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={icon_size}
8+
height={icon_size}
9+
viewBox="0 0 32 32"
10+
><path fill="currentColor" d="M19 10h7v2h-7zm0 5h7v2h-7zm0 5h7v2h-7z" /><path
11+
fill="currentColor"
12+
d="M28 5H4a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h24a2.003 2.003 0 0 0 2-2V7a2 2 0 0 0-2-2M4 7h11v18H4Zm13 18V7h11l.002 18Z"
13+
/></svg
14+
>

‎js/icons/src/Tool.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
export let icon_size = 16;
3+
</script>
4+
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={icon_size}
8+
height={icon_size}
9+
viewBox="0 0 32 32"
10+
><path
11+
fill="currentColor"
12+
d="M12.1 2a9.8 9.8 0 0 0-5.4 1.6l6.4 6.4a2.1 2.1 0 0 1 .2 3a2.1 2.1 0 0 1-3-.2L3.7 6.4A9.84 9.84 0 0 0 2 12.1a10.14 10.14 0 0 0 10.1 10.1a11 11 0 0 0 2.6-.3l6.7 6.7a5 5 0 0 0 7.1-7.1l-6.7-6.7a11 11 0 0 0 .3-2.6A10 10 0 0 0 12.1 2m8 10.1a7.6 7.6 0 0 1-.3 2.1l-.3 1.1l.8.8l6.7 6.7a2.88 2.88 0 0 1 .9 2.1A2.72 2.72 0 0 1 27 27a2.9 2.9 0 0 1-4.2 0l-6.7-6.7l-.8-.8l-1.1.3a7.6 7.6 0 0 1-2.1.3a8.27 8.27 0 0 1-5.7-2.3A7.63 7.63 0 0 1 4 12.1a8.3 8.3 0 0 1 .3-2.2l4.4 4.4a4.14 4.14 0 0 0 5.9.2a4.14 4.14 0 0 0-.2-5.9L10 4.2a6.5 6.5 0 0 1 2-.3a8.27 8.27 0 0 1 5.7 2.3a8.5 8.5 0 0 1 2.4 5.9"
13+
/></svg
14+
>

‎js/icons/src/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,6 @@ export { default as Retry } from "./Retry.svelte";
7272
export { default as ScrollDownArrow } from "./ScrollDownArrow.svelte";
7373
export { default as ZoomIn } from "./ZoomIn.svelte";
7474
export { default as ZoomOut } from "./ZoomOut.svelte";
75+
export { default as Tool } from "./Tool.svelte";
76+
export { default as Prompt } from "./Prompt.svelte";
77+
export { default as Resource } from "./Resource.svelte";

0 commit comments

Comments
 (0)