@gradio/core 0.26.0 → 0.27.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @gradio/core
 
+## 0.27.1
+
+### Features
+
+- [#11767](https://github.com/gradio-app/gradio/pull/11767) [`f67faa4`](https://github.com/gradio-app/gradio/commit/f67faa464add0ef6a4a58d60eb2ae850125ebb87) - Use icons instead of Emojis in MCP page.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/icons@0.13.1
+- @gradio/upload@0.16.16
+
+## 0.27.0
+
+### Features
+
+- [#11723](https://github.com/gradio-app/gradio/pull/11723) [`379f0c1`](https://github.com/gradio-app/gradio/commit/379f0c151943b5f269910eba4a4c7abc6145a11c) - Support MCP resources and prompts.  Thanks @abidlabs!
+
+### Fixes
+
+- [#11725](https://github.com/gradio-app/gradio/pull/11725) [`080f888`](https://github.com/gradio-app/gradio/commit/080f888e3b173b5b2deef5eaf9754f2a63adf1aa) - Ensure it is possible to use `@render` to generate Tabs.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/code@0.14.15
+- @gradio/statustracker@0.10.17
+- @gradio/paramviewer@0.7.15
+- @gradio/atoms@0.16.5
+- @gradio/column@0.2.1
+- @gradio/client@1.17.1
+- @gradio/icons@0.13.0
+- @gradio/upload@0.16.15
+- @gradio/image@0.22.17
+- @gradio/dropdown@0.10.2
+- @gradio/textbox@0.10.20
+- @gradio/button@0.5.11
+- @gradio/gallery@0.15.31
+- @gradio/plot@0.9.22
+- @gradio/checkbox@0.4.28
+- @gradio/file@0.12.28
+- @gradio/video@0.15.0
+
 ## 0.26.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -53,17 +53,15 @@ let {
 } = create_components({
   initial_layout
 });
-$:
-  components, layout, dependencies, root, app, fill_height, target, run();
+$: components, layout, dependencies, root, app, fill_height, target, run();
 $: {
   ready = !!$_layout;
 }
 let old_dependencies = dependencies;
-$:
-  if (dependencies !== old_dependencies && render_complete && !layout_creating) {
-    handle_load_triggers();
-    old_dependencies = dependencies;
-  }
+$: if (dependencies !== old_dependencies && render_complete && !layout_creating) {
+  handle_load_triggers();
+  old_dependencies = dependencies;
+}
 let vibe_editor_width = 350;
 async function run() {
   await setupi18n(app.config?.i18n_translations || void 0);
@@ -94,10 +92,8 @@ async function loadApiDocs() {
   if (!ApiDocs || !ApiRecorder) {
     const api_docs_module = await import("./api_docs/ApiDocs.svelte");
     const api_recorder_module = await import("./api_docs/ApiRecorder.svelte");
-    if (!ApiDocs)
-      ApiDocs = api_docs_module.default;
-    if (!ApiRecorder)
-      ApiRecorder = api_recorder_module.default;
+    if (!ApiDocs) ApiDocs = api_docs_module.default;
+    if (!ApiRecorder) ApiRecorder = api_recorder_module.default;
   }
 }
 async function loadApiRecorder() {
@@ -405,8 +401,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       );
     } catch (e) {
       const fn_index = 0;
-      if (app.closed)
-        return;
+      if (app.closed) return;
       messages = [
         new_message("Error", String(e), fn_index, "error"),
         ...messages
@@ -637,11 +632,9 @@ async function handle_mount() {
       a[i].setAttribute("target", "_blank");
   }
   handle_load_triggers();
-  if (!target || render_complete)
-    return;
+  if (!target || render_complete) return;
   target.addEventListener("prop_change", (e) => {
-    if (!isCustomEvent(e))
-      throw new Error("not a custom event");
+    if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, prop, value } = e.detail;
     update_value([{ id, prop, value }]);
     if (prop === "input_ready" && value === false) {
@@ -652,8 +645,7 @@ async function handle_mount() {
     }
   });
   target.addEventListener("gradio", (e) => {
-    if (!isCustomEvent(e))
-      throw new Error("not a custom event");
+    if (!isCustomEvent(e)) throw new Error("not a custom event");
     const { id, event, data } = e.detail;
     if (event === "share") {
       const { title: title2, description } = data;
@@ -701,8 +693,7 @@ const handle_load_triggers = () => {
     }
   });
 };
-$:
-  set_status($loading_status);
+$: set_status($loading_status);
 function update_status(id, status, data) {
   data.status = status;
   update_value([

package/dist/src/Blocks.svelte.d.ts

@@ -9,34 +9,36 @@ declare const __propDef: {
         components: ComponentMeta[];
         layout: LayoutNode;
         dependencies: Dependency[];
-        title?: string | undefined;
+        title?: string;
         target: HTMLElement;
         autoscroll: boolean;
-        show_api?: boolean | undefined;
-        show_footer?: boolean | undefined;
-        control_page_title?: boolean | undefined;
+        show_api?: boolean;
+        show_footer?: boolean;
+        control_page_title?: boolean;
         app_mode: boolean;
         theme_mode: ThemeMode;
         app: Awaited<ReturnType<typeof Client.connect>>;
         space_id: string | null;
         version: string;
         js: string | null;
-        fill_height?: boolean | undefined;
+        fill_height?: boolean;
         ready: boolean;
         username: string | null;
-        api_prefix?: string | undefined;
+        api_prefix?: string;
         max_file_size?: number | undefined;
         initial_layout?: ComponentMeta | undefined;
         css?: string | null | undefined;
-        vibe_mode?: boolean | undefined;
+        vibe_mode?: boolean;
         search_params: URLSearchParams;
-        render_complete?: boolean | undefined;
-        add_new_message?: ((title: string, message: string, type: ToastMessage["type"]) => void) | undefined;
+        render_complete?: boolean;
+        add_new_message?: (title: string, message: string, type: ToastMessage["type"]) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type BlocksProps = typeof __propDef.props;
 export type BlocksEvents = typeof __propDef.events;

package/dist/src/Embed.svelte.d.ts

@@ -11,8 +11,8 @@ declare const __propDef: {
         display: boolean;
         info: boolean;
         loaded: boolean;
-        pages?: [string, string][] | undefined;
-        current_page?: string | undefined;
+        pages?: [string, string][];
+        current_page?: string;
         root: string;
     };
     events: {
@@ -21,6 +21,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type EmbedProps = typeof __propDef.props;
 export type EmbedEvents = typeof __propDef.events;

package/dist/src/Login.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type LoginProps = typeof __propDef.props;
 export type LoginEvents = typeof __propDef.events;

package/dist/src/MountComponents.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         theme_mode: any;
         version: any;
         autoscroll: boolean;
-        max_file_size?: (number | null) | undefined;
+        max_file_size?: number | null;
         client: Client;
     };
     events: {
@@ -17,6 +17,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MountComponentsProps = typeof __propDef.props;
 export type MountComponentsEvents = typeof __propDef.events;

package/dist/src/Render.svelte

@@ -48,19 +48,18 @@ $: {
     }
   }
 }
-$:
-  node.props.gradio = new Gradio(
-    node.id,
-    target,
-    theme_mode,
-    version,
-    root,
-    autoscroll,
-    max_file_size,
-    $reactive_formatter,
-    client,
-    load_component
-  );
+$: node.props.gradio = new Gradio(
+  node.id,
+  target,
+  theme_mode,
+  version,
+  root,
+  autoscroll,
+  max_file_size,
+  $reactive_formatter,
+  client,
+  load_component
+);
 </script>
 
 {#if node.component}

package/dist/src/Render.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         root: string;
         node: ComponentMeta;
-        parent?: (string | null) | undefined;
+        parent?: string | null;
         target: HTMLElement;
         theme_mode: ThemeMode;
         version: string;
@@ -20,6 +20,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RenderProps = typeof __propDef.props;
 export type RenderEvents = typeof __propDef.events;

package/dist/src/RenderComponent.svelte

@@ -20,8 +20,7 @@ function wrap(component2) {
       const props = Object.keys(instance2.$$.props);
       function report(props2) {
         return function(propargs) {
-          if (!target)
-            return;
+          if (!target) return;
           const ev = s(_id, props2, propargs);
           target.dispatchEvent(ev);
         };
@@ -50,10 +49,8 @@ function translate_prop(obj) {
     }
   }
 }
-$:
-  translate_prop($$restProps);
-$:
-  value = translate_if_needed(value);
+$: translate_prop($$restProps);
+$: value = translate_if_needed(value);
 </script>
 
 {#if visible}

package/dist/src/RenderComponent.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export type RenderComponentProps = typeof __propDef.props;
 export type RenderComponentEvents = typeof __propDef.events;

package/dist/src/api_docs/ApiBanner.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         root: string;
         api_count: number;
-        current_language?: ("python" | "javascript" | "bash" | "mcp") | undefined;
+        current_language?: "python" | "javascript" | "bash" | "mcp";
     };
     events: {
         close: CustomEvent<any>;
@@ -11,6 +11,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiBannerProps = typeof __propDef.props;
 export type ApiBannerEvents = typeof __propDef.events;

package/dist/src/api_docs/ApiDocs.svelte

@@ -76,22 +76,17 @@ get_js_info().then((js_api_info) => {
   js_info = js_api_info;
 });
 const dispatch = createEventDispatcher();
-$:
-  selected_tools_array = Array.from(selected_tools);
-$:
-  selected_tools_without_prefix = selected_tools_array.map(remove_tool_prefix);
-$:
-  mcp_server_url = `${root}gradio_api/mcp/sse`;
-$:
-  mcp_server_url_streamable = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/`;
-$:
-  if (mcp_json_sse && selected_tools.size > 0) {
-    const baseUrl = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/sse`;
-    mcp_json_sse.mcpServers.gradio.url = baseUrl;
-    if (mcp_json_stdio) {
-      mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
-    }
+$: selected_tools_array = Array.from(selected_tools);
+$: selected_tools_without_prefix = selected_tools_array.map(remove_tool_prefix);
+$: mcp_server_url = `${root}gradio_api/mcp/sse`;
+$: mcp_server_url_streamable = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/`;
+$: if (mcp_json_sse && selected_tools.size > 0) {
+  const baseUrl = selected_tools_array.length > 0 && selected_tools_array.length < tools.length ? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}` : `${root}gradio_api/mcp/sse`;
+  mcp_json_sse.mcpServers.gradio.url = baseUrl;
+  if (mcp_json_stdio) {
+    mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
   }
+}
 let tools = [];
 let headers = [];
 let mcp_json_sse;
@@ -126,6 +121,7 @@ async function fetch_mcp_tools() {
       name: tool.name,
       description: tool.description || "",
       parameters: tool.inputSchema?.properties || {},
+      meta: tool.meta,
       expanded: false
     }));
     selected_tools = new Set(tools.map((tool) => tool.name));

package/dist/src/api_docs/ApiDocs.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         space_id: string | null;
         root_node: ComponentMeta;
         username: string | null;
-        api_calls?: Payload[] | undefined;
+        api_calls?: Payload[];
     };
     events: {
         close: CustomEvent<any>;
@@ -18,6 +18,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiDocsProps = typeof __propDef.props;
 export type ApiDocsEvents = typeof __propDef.events;

package/dist/src/api_docs/ApiRecorder.svelte.d.ts

@@ -2,13 +2,15 @@ import { SvelteComponent } from "svelte";
 import type { Payload, Dependency } from "../types";
 declare const __propDef: {
     props: {
-        api_calls?: Payload[] | undefined;
+        api_calls?: Payload[];
         dependencies: Dependency[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ApiRecorderProps = typeof __propDef.props;
 export type ApiRecorderEvents = typeof __propDef.events;

package/dist/src/api_docs/CodeSnippet.svelte

@@ -21,10 +21,8 @@ let blob_components = ["Audio", "File", "Image", "Video"];
 let blob_examples = endpoint_parameters.filter(
   (param) => blob_components.includes(param.component)
 );
-$:
-  normalised_api_prefix = api_prefix ? api_prefix : "/";
-$:
-  normalised_root = root.replace(/\/$/, "");
+$: normalised_api_prefix = api_prefix ? api_prefix : "/";
+$: normalised_root = root.replace(/\/$/, "");
 </script>
 
 <div class="container">

package/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -9,12 +9,14 @@ declare const __propDef: {
         endpoint_parameters: any;
         username: string | null;
         current_language: "python" | "javascript" | "bash";
-        api_description?: (string | null) | undefined;
+        api_description?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CodeSnippetProps = typeof __propDef.props;
 export type CodeSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/CopyButton.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type CopyButtonProps = typeof __propDef.props;
 export type CopyButtonEvents = typeof __propDef.events;

package/dist/src/api_docs/EndpointDetail.svelte.d.ts

@@ -1,13 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        api_name?: (string | null) | undefined;
-        description?: (string | null) | undefined;
+        api_name?: string | null;
+        description?: string | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type EndpointDetailProps = typeof __propDef.props;
 export type EndpointDetailEvents = typeof __propDef.events;

package/dist/src/api_docs/InputPayload.svelte.d.ts

@@ -15,6 +15,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InputPayloadProps = typeof __propDef.props;
 export type InputPayloadEvents = typeof __propDef.events;

package/dist/src/api_docs/InstallSnippet.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InstallSnippetProps = typeof __propDef.props;
 export type InstallSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/MCPSnippet.svelte

@@ -1,5 +1,6 @@
 <script>import { Block } from "@gradio/atoms";
 import CopyButton from "./CopyButton.svelte";
+import { Tool, Prompt, Resource } from "@gradio/icons";
 export let mcp_server_active;
 export let mcp_server_url;
 export let mcp_server_url_streamable;
@@ -17,11 +18,14 @@ const transports = [
   ["sse", "SSE"],
   ["stdio", "STDIO"]
 ];
-$:
-  display_url = current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
+const tool_type_icons = {
+  tool: Tool,
+  resource: Resource,
+  prompt: Prompt
+};
+$: display_url = current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
 function update_config_with_file_upload(base_config, include_upload) {
-  if (!base_config)
-    return null;
+  if (!base_config) return null;
   const config = JSON.parse(JSON.stringify(base_config));
   if (include_upload && file_data_present) {
     const upload_file_mcp_server = {
@@ -41,30 +45,27 @@ function update_config_with_file_upload(base_config, include_upload) {
   }
   return config;
 }
-$:
-  mcp_json_streamable_http = update_config_with_file_upload(
-    mcp_json_sse ? {
-      ...mcp_json_sse,
-      mcpServers: {
-        ...mcp_json_sse.mcpServers,
-        gradio: {
-          ...mcp_json_sse.mcpServers.gradio,
-          url: mcp_server_url_streamable
-        }
+$: mcp_json_streamable_http = update_config_with_file_upload(
+  mcp_json_sse ? {
+    ...mcp_json_sse,
+    mcpServers: {
+      ...mcp_json_sse.mcpServers,
+      gradio: {
+        ...mcp_json_sse.mcpServers.gradio,
+        url: mcp_server_url_streamable
       }
-    } : null,
-    include_file_upload
-  );
-$:
-  mcp_json_sse_updated = update_config_with_file_upload(
-    mcp_json_sse,
-    include_file_upload
-  );
-$:
-  mcp_json_stdio_updated = update_config_with_file_upload(
-    mcp_json_stdio,
-    include_file_upload
-  );
+    }
+  } : null,
+  include_file_upload
+);
+$: mcp_json_sse_updated = update_config_with_file_upload(
+  mcp_json_sse,
+  include_file_upload
+);
+$: mcp_json_stdio_updated = update_config_with_file_upload(
+  mcp_json_stdio,
+  include_file_upload
+);
 </script>
 
 {#if mcp_server_active}
@@ -104,9 +105,15 @@ $:
 	{/if}
 
 	<div class="tool-selection">
-		<strong
-			>{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools</strong
-		>
+		<strong>
+			{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
+			(<span style="display: inline-block; vertical-align: sub;"><Tool /></span
+			>), Resources (<span style="display: inline-block; vertical-align: sub;"
+				><Resource /></span
+			>), and Prompts (<span style="display: inline-block; vertical-align: sub;"
+				><Prompt /></span
+			>)
+		</strong>
 		{#if all_tools.length > 0}
 			<div class="tool-selection-controls">
 				<button
@@ -156,14 +163,23 @@ $:
 						class="tool-header"
 						on:click={() => (tool.expanded = !tool.expanded)}
 					>
-						<span
-							><span class="tool-name">{tool.name}</span> &nbsp;
-							<span class="tool-description"
-								>{tool.description
+						<span style="display: inline-block">
+							<span
+								style="display: inline-block; padding-right: 6px; vertical-align: sub"
+							>
+								{#if tool_type_icons[tool.meta.mcp_type]}
+									{@const Icon = tool_type_icons[tool.meta.mcp_type]}
+									<Icon />
+								{/if}
+							</span>
+							<span class="tool-name">{tool.name}</span>
+							&nbsp;
+							<span class="tool-description">
+								{tool.description
 									? tool.description
-									: "⚠︎ No description provided in function docstring"}</span
-							></span
-						>
+									: "⚠︎ No description provided in function docstring"}
+							</span>
+						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
 					</button>
 				</div>

package/dist/src/api_docs/MCPSnippet.svelte.d.ts

@@ -15,6 +15,10 @@ declare const __propDef: {
                 default?: any;
             }>;
             expanded?: boolean;
+            meta: {
+                mcp_type: "tool" | "resource" | "prompt";
+                file_data_present: boolean;
+            };
         }[];
         all_tools?: {
             name: string;
@@ -27,8 +31,12 @@ declare const __propDef: {
                 default?: any;
             }>;
             expanded?: boolean;
-        }[] | undefined;
-        selected_tools?: Set<string> | undefined;
+            meta: {
+                mcp_type: "tool" | "resource" | "prompt";
+                file_data_present: boolean;
+            };
+        }[];
+        selected_tools?: Set<string>;
         mcp_json_sse: any;
         mcp_json_stdio: any;
         file_data_present: boolean;
@@ -38,6 +46,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type McpSnippetProps = typeof __propDef.props;
 export type McpSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/NoApi.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type NoApiProps = typeof __propDef.props;
 export type NoApiEvents = typeof __propDef.events;

package/dist/src/api_docs/ParametersSnippet.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ParametersSnippetProps = typeof __propDef.props;
 export type ParametersSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/RecordingSnippet.svelte.d.ts

@@ -5,15 +5,17 @@ declare const __propDef: {
         dependencies: Dependency[];
         short_root: string;
         root: string;
-        api_prefix?: string | undefined;
+        api_prefix?: string;
         current_language: "python" | "javascript" | "bash" | "mcp";
         username: string | null;
-        api_calls?: Payload[] | undefined;
+        api_calls?: Payload[];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RecordingSnippetProps = typeof __propDef.props;
 export type RecordingSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/ResponseSnippet.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ResponseSnippetProps = typeof __propDef.props;
 export type ResponseSnippetEvents = typeof __propDef.events;

package/dist/src/api_docs/Settings.svelte.d.ts

@@ -4,8 +4,8 @@ declare const __propDef: {
         root: string;
         space_id: string | null;
         pwa_enabled: boolean | undefined;
-        allow_zoom?: boolean | undefined;
-        allow_video_trim?: boolean | undefined;
+        allow_zoom?: boolean;
+        allow_video_trim?: boolean;
     };
     events: {
         close: CustomEvent<any>;
@@ -14,6 +14,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SettingsProps = typeof __propDef.props;
 export type SettingsEvents = typeof __propDef.events;

package/dist/src/api_docs/SettingsBanner.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SettingsBannerProps = typeof __propDef.props;
 export type SettingsBannerEvents = typeof __propDef.events;

package/dist/src/api_docs/TryButton.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TryButtonProps = typeof __propDef.props;
 export type TryButtonEvents = typeof __propDef.events;

package/dist/src/api_docs/img/clear.svelte.d.ts

@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/src/init.js

@@ -104,9 +104,6 @@ export function create_components({ initial_layout = undefined } = {
      * Rerender the layout when the config has been modified to attach new components
      */
     function rerender_layout({ render_id, components, layout, root, dependencies }) {
-        // Update current layout and root for dynamic visibility recalculation
-        current_layout = layout;
-        current_root = root;
         components.forEach((c) => {
             for (const prop in c.props) {
                 if (c.props[prop] === null) {

package/dist/src/stories/I18nMultiLanguageTestComponent.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type I18nMultiLanguageTestComponentProps = typeof __propDef.props;
 export type I18nMultiLanguageTestComponentEvents = typeof __propDef.events;

package/dist/src/stories/I18nTestSetup.svelte

@@ -2,8 +2,7 @@
 import { init, _ } from "svelte-i18n";
 export let active = true;
 onMount(async () => {
-  if (!active)
-    return;
+  if (!active) return;
   await init({
     fallbackLocale: "en",
     initialLocale: "en"

package/dist/src/stories/I18nTestSetup.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        active?: boolean | undefined;
+        active?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type I18nTestSetupProps = typeof __propDef.props;
 export type I18nTestSetupEvents = typeof __propDef.events;

package/package.json

@@ -1,69 +1,69 @@
 {
   "name": "@gradio/core",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.21",
-    "@gradio/annotatedimage": "^0.9.28",
-    "@gradio/audio": "^0.17.24",
-    "@gradio/box": "^0.2.22",
-    "@gradio/atoms": "^0.16.4",
+    "@gradio/accordion": "^0.5.22",
+    "@gradio/annotatedimage": "^0.9.29",
+    "@gradio/atoms": "^0.16.5",
+    "@gradio/box": "^0.2.23",
+    "@gradio/audio": "^0.17.25",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/button": "^0.5.10",
-    "@gradio/chatbot": "^0.26.21",
-    "@gradio/checkbox": "^0.4.27",
-    "@gradio/checkboxgroup": "^0.6.26",
-    "@gradio/client": "^1.17.0",
-    "@gradio/code": "^0.14.14",
-    "@gradio/colorpicker": "^0.4.26",
-    "@gradio/dataframe": "^0.18.7",
-    "@gradio/dataset": "^0.4.31",
+    "@gradio/button": "^0.5.11",
+    "@gradio/chatbot": "^0.26.22",
+    "@gradio/checkbox": "^0.4.28",
+    "@gradio/checkboxgroup": "^0.6.27",
+    "@gradio/client": "^1.17.1",
+    "@gradio/code": "^0.14.15",
+    "@gradio/colorpicker": "^0.4.27",
     "@gradio/column": "^0.2.1",
-    "@gradio/datetime": "^0.3.19",
-    "@gradio/downloadbutton": "^0.4.10",
-    "@gradio/dropdown": "^0.10.1",
-    "@gradio/fallback": "^0.4.26",
-    "@gradio/file": "^0.12.27",
-    "@gradio/fileexplorer": "^0.5.38",
-    "@gradio/gallery": "^0.15.30",
-    "@gradio/form": "^0.2.22",
-    "@gradio/html": "^0.6.18",
+    "@gradio/dataframe": "^0.19.0",
+    "@gradio/dataset": "^0.4.32",
+    "@gradio/datetime": "^0.3.20",
+    "@gradio/downloadbutton": "^0.4.11",
+    "@gradio/fallback": "^0.4.27",
+    "@gradio/file": "^0.12.28",
+    "@gradio/dropdown": "^0.10.2",
+    "@gradio/fileexplorer": "^0.5.39",
+    "@gradio/form": "^0.2.23",
+    "@gradio/gallery": "^0.15.31",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.9",
-    "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.16",
-    "@gradio/imageeditor": "^0.16.4",
-    "@gradio/imageslider": "^0.2.12",
-    "@gradio/label": "^0.5.18",
-    "@gradio/json": "^0.5.28",
-    "@gradio/model3d": "^0.14.24",
-    "@gradio/multimodaltextbox": "^0.10.16",
-    "@gradio/markdown": "^0.13.19",
-    "@gradio/number": "^0.6.3",
-    "@gradio/nativeplot": "^0.7.3",
-    "@gradio/plot": "^0.9.21",
-    "@gradio/paramviewer": "^0.7.14",
-    "@gradio/radio": "^0.7.9",
-    "@gradio/sidebar": "^0.1.19",
+    "@gradio/highlightedtext": "^0.9.10",
+    "@gradio/html": "^0.7.0",
+    "@gradio/image": "^0.22.17",
+    "@gradio/icons": "^0.13.1",
+    "@gradio/imageeditor": "^0.16.5",
+    "@gradio/imageslider": "^0.2.13",
+    "@gradio/json": "^0.5.29",
+    "@gradio/label": "^0.5.19",
+    "@gradio/markdown": "^0.13.20",
+    "@gradio/model3d": "^0.14.25",
+    "@gradio/nativeplot": "^0.7.4",
+    "@gradio/number": "^0.6.4",
+    "@gradio/multimodaltextbox": "^0.10.17",
+    "@gradio/paramviewer": "^0.7.15",
+    "@gradio/plot": "^0.9.22",
+    "@gradio/radio": "^0.7.10",
     "@gradio/row": "^0.2.1",
-    "@gradio/simpletextbox": "^0.3.27",
-    "@gradio/simpleimage": "^0.8.38",
-    "@gradio/slider": "^0.6.15",
-    "@gradio/sketchbox": "^0.6.14",
+    "@gradio/sidebar": "^0.1.20",
+    "@gradio/simpledropdown": "^0.3.27",
+    "@gradio/simpleimage": "^0.8.39",
+    "@gradio/simpletextbox": "^0.3.28",
+    "@gradio/sketchbox": "^0.6.15",
     "@gradio/state": "^0.1.2",
-    "@gradio/simpledropdown": "^0.3.26",
+    "@gradio/slider": "^0.6.16",
+    "@gradio/statustracker": "^0.10.17",
     "@gradio/tabitem": "^0.5.0",
     "@gradio/tabs": "^0.4.5",
-    "@gradio/textbox": "^0.10.19",
-    "@gradio/statustracker": "^0.10.16",
-    "@gradio/theme": "^0.4.0",
+    "@gradio/textbox": "^0.10.20",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.14",
+    "@gradio/theme": "^0.4.0",
+    "@gradio/upload": "^0.16.16",
+    "@gradio/vibeeditor": "^0.2.2",
+    "@gradio/uploadbutton": "^0.9.11",
+    "@gradio/video": "^0.15.0",
     "@gradio/utils": "^0.10.2",
-    "@gradio/uploadbutton": "^0.9.10",
-    "@gradio/wasm": "^0.18.1",
-    "@gradio/vibeeditor": "^0.2.1",
-    "@gradio/video": "^0.14.24"
+    "@gradio/wasm": "^0.18.1"
   },
   "msw": {
     "workerDirectory": "public"

package/src/api_docs/ApiDocs.svelte

@@ -145,6 +145,10 @@
 		description: string;
 		parameters: Record<string, ToolParameter>;
 		expanded?: boolean;
+		meta: {
+			mcp_type: "tool" | "resource" | "prompt";
+			file_data_present: boolean;
+		};
 	}
 
 	let tools: Tool[] = [];
@@ -187,6 +191,7 @@
 				name: tool.name,
 				description: tool.description || "",
 				parameters: tool.inputSchema?.properties || {},
+				meta: tool.meta,
 				expanded: false
 			}));
 			selected_tools = new Set(tools.map((tool) => tool.name));

package/src/api_docs/MCPSnippet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Block } from "@gradio/atoms";
 	import CopyButton from "./CopyButton.svelte";
+	import { Tool, Prompt, Resource } from "@gradio/icons";
 
 	export let mcp_server_active: boolean;
 	export let mcp_server_url: string;
@@ -26,6 +27,10 @@
 		description: string;
 		parameters: Record<string, ToolParameter>;
 		expanded?: boolean;
+		meta: {
+			mcp_type: "tool" | "resource" | "prompt";
+			file_data_present: boolean;
+		};
 	}
 
 	type Transport = "streamable_http" | "sse" | "stdio";
@@ -38,6 +43,12 @@
 		["stdio", "STDIO"]
 	] as const;
 
+	const tool_type_icons: Record<Tool["meta"]["mcp_type"], typeof Tool> = {
+		tool: Tool,
+		resource: Resource,
+		prompt: Prompt
+	};
+
 	$: display_url =
 		current_transport === "sse" ? mcp_server_url : mcp_server_url_streamable;
 
@@ -135,9 +146,15 @@
 	{/if}
 
 	<div class="tool-selection">
-		<strong
-			>{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools</strong
-		>
+		<strong>
+			{all_tools.length > 0 ? all_tools.length : tools.length} Available MCP Tools
+			(<span style="display: inline-block; vertical-align: sub;"><Tool /></span
+			>), Resources (<span style="display: inline-block; vertical-align: sub;"
+				><Resource /></span
+			>), and Prompts (<span style="display: inline-block; vertical-align: sub;"
+				><Prompt /></span
+			>)
+		</strong>
 		{#if all_tools.length > 0}
 			<div class="tool-selection-controls">
 				<button
@@ -187,14 +204,23 @@
 						class="tool-header"
 						on:click={() => (tool.expanded = !tool.expanded)}
 					>
-						<span
-							><span class="tool-name">{tool.name}</span> &nbsp;
-							<span class="tool-description"
-								>{tool.description
+						<span style="display: inline-block">
+							<span
+								style="display: inline-block; padding-right: 6px; vertical-align: sub"
+							>
+								{#if tool_type_icons[tool.meta.mcp_type]}
+									{@const Icon = tool_type_icons[tool.meta.mcp_type]}
+									<Icon />
+								{/if}
+							</span>
+							<span class="tool-name">{tool.name}</span>
+							&nbsp;
+							<span class="tool-description">
+								{tool.description
 									? tool.description
-									: "⚠︎ No description provided in function docstring"}</span
-							></span
-						>
+									: "⚠︎ No description provided in function docstring"}
+							</span>
+						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
 					</button>
 				</div>

package/src/init.ts

@@ -216,10 +216,6 @@ export function create_components(
 		root: string;
 		dependencies: Dependency[];
 	}): void {
-		// Update current layout and root for dynamic visibility recalculation
-		current_layout = layout;
-		current_root = root;
-
 		components.forEach((c) => {
 			for (const prop in c.props) {
 				if (c.props[prop] === null) {