@gradio/core 1.0.0-dev.3 → 1.0.1

package/dist/src/api_docs/MCPSnippet.svelte

@@ -3,9 +3,11 @@
 	import CopyButton from "./CopyButton.svelte";
 	import { Tool, Prompt, Resource } from "@gradio/icons";
 	import { format_latency, get_color_from_success_rate } from "./utils";
+	import PercentileChart from "./PercentileChart.svelte";
 
 	export let mcp_server_active: boolean;
 	export let mcp_server_url_streamable: string;
+	export let root: string;
 	export let tools: Tool[];
 	export let all_tools: Tool[] = [];
 	export let selected_tools: Set<string> = new Set();
@@ -69,7 +71,7 @@
 					"gradio[mcp]",
 					"gradio",
 					"upload-mcp",
-					mcp_server_url_streamable,
+					root,
 					"<UPLOAD_DIRECTORY>"
 				]
 			};
@@ -218,34 +220,19 @@
 									: "⚠︎ No description provided in function docstring"}
 							</span>
 							{#if analytics[tool.meta.endpoint_name]}
-								<span
-									class="tool-analytics"
-									style="color: var(--body-text-color-subdued); margin-left: 1em;"
-								>
-									Total requests: {analytics[tool.meta.endpoint_name]
-										.total_requests}
-									<span style={color}
-										>({Math.round(success_rate * 100)}% successful)</span
+								{@const endpoint_analytics = analytics[tool.meta.endpoint_name]}
+								{@const p50 =
+									endpoint_analytics.process_time_percentiles["50th"]}
+								<div class="tool-analytics-wrapper" style="margin-left: 1em;">
+									<span
+										class="tool-analytics"
+										style="color: var(--body-text-color-subdued);"
 									>
-									&nbsp;|&nbsp; p50/p90/p99:
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"50th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"90th"
-										]
-									)}
-									/
-									{format_latency(
-										analytics[tool.meta.endpoint_name].process_time_percentiles[
-											"99th"
-										]
-									)}
-								</span>
+										{endpoint_analytics.total_requests} requests ({Math.round(
+											success_rate * 100
+										)}% successful, p50: {format_latency(p50)})
+									</span>
+								</div>
 							{/if}
 						</span>
 						<span class="tool-arrow">{tool.expanded ? "▼" : "▶"}</span>
@@ -354,10 +341,16 @@
 {/if}
 
 <style>
+	.tool-analytics-wrapper {
+		position: relative;
+		display: inline-block;
+	}
+
 	.tool-analytics {
 		font-size: 0.95em;
 		color: var(--body-text-color-subdued);
 	}
+
 	.transport-selection {
 		margin-bottom: var(--size-4);
 	}

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

@@ -14,6 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const MCPSnippet: $$__sveltets_2_IsomorphicComponent<{
     mcp_server_active: boolean;
     mcp_server_url_streamable: string;
+    root: string;
     tools: {
         name: string;
         description: string;

package/dist/src/api_docs/PercentileChart.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { format_latency } from "./utils";
+
+	export let p50: number;
+	export let p90: number;
+	export let p99: number;
+
+	$: max_latency = Math.max(p50, p90, p99);
+</script>
+
+<div class="tooltip-chart">
+	<div class="tooltip-arrow"></div>
+	<div class="chart-bars">
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p50</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p50 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p50)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p90</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p90 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p90)}</div>
+		</div>
+		<div class="chart-bar-container">
+			<div class="chart-bar-label">p99</div>
+			<div class="chart-bar-wrapper">
+				<div
+					class="chart-bar"
+					style="width: {(p99 / max_latency) * 100}%"
+				></div>
+			</div>
+			<div class="chart-bar-value">{format_latency(p99)}</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.tooltip-chart {
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		padding: var(--size-3);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 200px;
+		position: relative;
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		bottom: -8px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-top: 8px solid var(--border-color-primary);
+	}
+
+	.tooltip-arrow::after {
+		content: "";
+		position: absolute;
+		bottom: 1px;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0;
+		height: 0;
+		border-left: 7px solid transparent;
+		border-right: 7px solid transparent;
+		border-top: 7px solid var(--background-fill-primary);
+	}
+
+	.chart-bars {
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-container {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.chart-bar-label {
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		color: var(--body-text-color);
+		min-width: 30px;
+	}
+
+	.chart-bar-wrapper {
+		flex: 1;
+		height: 16px;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.chart-bar {
+		height: 100%;
+		background: var(--color-accent);
+		border-radius: var(--radius-sm);
+		transition: width 0.3s ease;
+	}
+
+	.chart-bar-value {
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		min-width: 50px;
+		text-align: right;
+		font-family: var(--font-mono);
+	}
+</style>

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

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PercentileChart: $$__sveltets_2_IsomorphicComponent<{
+    p50: number;
+    p90: number;
+    p99: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PercentileChart = InstanceType<typeof PercentileChart>;
+export default PercentileChart;

package/dist/src/dependency.d.ts

@@ -2,7 +2,7 @@ import type { ComponentMeta, Dependency as IDependency, LayoutNode, Payload } fr
 import { Client, type client_return } from "@gradio/client";
 import { LoadingStatus } from "@gradio/statustracker";
 import type { ToastMessage } from "@gradio/statustracker";
-import type { StatusMessage } from "@gradio/client";
+import type { StatusMessage, LogMessage } from "@gradio/client";
 /**
  * A dependency as used by the frontend
  * This class represents a discrete dependency that can be triggered by an event
@@ -21,6 +21,8 @@ export declare class Dependency {
     triggers: [number, "success" | "failure" | "all"][];
     original_trigger_id: number | null;
     show_progress_on: number[] | null;
+    component_prop_inputs: number[];
+    show_progress: "full" | "minimal" | "hidden";
     functions: {
         frontend?: (...args: unknown[]) => Promise<unknown[]>;
         backend: boolean;
@@ -56,6 +58,10 @@ interface DispatchEvent {
     target_id?: number;
     event_data: unknown;
 }
+type UpdateStateCallback = (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
+type GetStateCallback = (id: number) => Promise<Record<string, unknown> | null>;
+type RerenderCallback = (components: ComponentMeta[], layout: LayoutNode) => void;
+type LogCallback = (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
 /**
  * Manages all dependencies for an app acting as a bridge between app state and Dependencies
  * Responsible for registering dependencies and dispatching events to them
@@ -75,13 +81,13 @@ export declare class DependencyManager {
     client: Client;
     queue: Set<number>;
     add_to_api_calls: (payload: Payload) => void;
-    update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>;
-    get_state_cb: (id: number) => Promise<Record<string, unknown> | null>;
-    rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void;
-    log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void;
+    update_state_cb: UpdateStateCallback;
+    get_state_cb: GetStateCallback;
+    rerender_cb: RerenderCallback;
+    log_cb: LogCallback;
     loading_stati: LoadingStatus;
     constructor(dependencies: IDependency[], client: Client, update_state_cb: (id: number, state: Record<string, unknown>, check_visibility?: boolean) => Promise<void>, get_state_cb: (id: number) => Promise<Record<string, unknown> | null>, rerender_cb: (components: ComponentMeta[], layout: LayoutNode) => void, log_cb: (title: string, message: string, fn_index: number, type: ToastMessage["type"], duration?: number | null, visible?: boolean) => void, add_to_api_calls: (payload: Payload) => void);
-    reload(dependencies: IDependency[], update_state: any, get_state: any, rerender: any, client: any): void;
+    reload(dependencies: IDependency[], update_state: UpdateStateCallback, get_state: GetStateCallback, rerender: RerenderCallback, client: Client): void;
     register_loading_stati(deps: Map<number, Dependency>): void;
     clear_loading_status(component_id: number): void;
     update_loading_stati_state(): Promise<void>;
@@ -115,9 +121,10 @@ export declare class DependencyManager {
      * Gathers the current state of the inputs
      *
      * @param ids the ids of the components to gather state from
+     * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
      * @returns an array of the current state of the components, in the same order as the ids
      */
-    gather_state(ids: number[]): Promise<(unknown | null)[]>;
+    gather_state(ids: number[], prop_indices?: number[]): Promise<(unknown | null)[]>;
     /** Sets the event arguments for a specific component
      *
      * @param id the id of the component to set the event arguments for

package/dist/src/dependency.js

@@ -24,6 +24,8 @@ export class Dependency {
     // in the case of chained events, it would be the id of the initial trigger
     original_trigger_id = null;
     show_progress_on = null;
+    component_prop_inputs = [];
+    show_progress;
     functions;
     constructor(dep_config) {
         this.id = dep_config.id;
@@ -31,6 +33,7 @@ export class Dependency {
         this.inputs = dep_config.inputs;
         this.outputs = dep_config.outputs;
         this.connection_type = dep_config.connection;
+        this.show_progress = dep_config.show_progress;
         this.functions = {
             frontend: dep_config.js
                 ? process_frontend_fn(dep_config.js, dep_config.backend_fn, dep_config.inputs.length, dep_config.outputs.length)
@@ -45,6 +48,7 @@ export class Dependency {
         this.cancels = dep_config.cancels;
         this.trigger_modes = dep_config.trigger_mode;
         this.show_progress_on = dep_config.show_progress_on || null;
+        this.component_prop_inputs = dep_config.component_prop_inputs || [];
         for (let i = 0; i < dep_config.event_specific_args?.length || 0; i++) {
             const key = dep_config.event_specific_args[i];
             this.event_args[key] = dep_config[key] ?? null;
@@ -117,31 +121,31 @@ export class DependencyManager {
     loading_stati = new LoadingStatus();
     constructor(dependencies, client, update_state_cb, get_state_cb, rerender_cb, log_cb, add_to_api_calls) {
         this.add_to_api_calls = add_to_api_calls;
-        this.client = client;
         this.log_cb = log_cb;
-        // this.update_state_cb = update_state_cb;
-        // this.get_state_cb = get_state_cb;
-        // this.rerender_cb = rerender_cb;
-        this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb);
+        this.update_state_cb = update_state_cb;
+        this.get_state_cb = get_state_cb;
+        this.rerender_cb = rerender_cb;
+        this.client = client;
+        this.reload(dependencies, update_state_cb, get_state_cb, rerender_cb, client);
     }
     reload(dependencies, update_state, get_state, rerender, client) {
         const { by_id, by_event } = this.create(dependencies);
         this.dependencies_by_event = by_event;
         this.dependencies_by_fn = by_id;
+        this.client = client;
+        this.update_state_cb = update_state;
+        this.get_state_cb = get_state;
+        this.rerender_cb = rerender;
         for (const [dep_id, dep] of this.dependencies_by_fn) {
             for (const [output_id] of dep.targets) {
                 this.set_event_args(output_id, dep.event_args);
             }
         }
-        this.client = client;
-        this.update_state_cb = update_state;
-        this.get_state_cb = get_state;
-        this.rerender_cb = rerender;
         this.register_loading_stati(by_id);
     }
     register_loading_stati(deps) {
         for (const [_, dep] of deps) {
-            this.loading_stati.register(dep.id, dep.show_progress_on || dep.outputs, dep.inputs);
+            this.loading_stati.register(dep.id, dep.show_progress_on || dep.outputs, dep.inputs, dep.show_progress);
         }
     }
     clear_loading_status(component_id) {
@@ -206,7 +210,7 @@ export class DependencyManager {
                     });
                     this.update_loading_stati_state();
                 }
-                const data_payload = await this.gather_state(dep.inputs);
+                const data_payload = await this.gather_state(dep.inputs, dep.component_prop_inputs);
                 const unset_args = await Promise.all(dep.targets.map(([output_id]) => this.set_event_args(output_id, dep.event_args)));
                 const { success, failure, all } = dep.get_triggers();
                 try {
@@ -241,7 +245,7 @@ export class DependencyManager {
                         unset_args.forEach((fn) => fn());
                     }
                     else if (dep_submission.type === "data") {
-                        this.handle_data(dep.outputs, dep_submission.data);
+                        await this.handle_data(dep.outputs, dep_submission.data);
                         unset_args.forEach((fn) => fn());
                     }
                     else {
@@ -268,7 +272,7 @@ export class DependencyManager {
                             if (result === null)
                                 continue;
                             if (result.type === "data") {
-                                this.handle_data(dep.outputs, result.data);
+                                await this.handle_data(dep.outputs, result.data);
                             }
                             if (result.type === "status") {
                                 if (result.original_msg === "process_starts" &&
@@ -341,7 +345,9 @@ export class DependencyManager {
                                         return;
                                     }
                                     const _message = result?.message?.replace(MESSAGE_QUOTE_RE, (_, b) => b);
-                                    this.log_cb(result._title ?? "Error", _message, fn_index, "error", status.duration, status.visible);
+                                    this.log_cb(
+                                    //@ts-ignore
+                                    result?._title ?? "Error", _message || "", fn_index, "error", status.duration, status.visible);
                                     throw new Error("Dependency function failed");
                                 }
                                 else {
@@ -356,6 +362,12 @@ export class DependencyManager {
                                 }
                             }
                             if (result.type === "render") {
+                                this.loading_stati.update({
+                                    status: "complete",
+                                    fn_index: dep.id,
+                                    stream_state: null
+                                });
+                                this.update_loading_stati_state();
                                 const { layout, components, render_id, dependencies } = result.data;
                                 this.rerender_cb(components, layout);
                                 // update dependencies
@@ -470,7 +482,7 @@ export class DependencyManager {
      * @param data the data to update the components with
      * */
     async handle_data(outputs, data) {
-        outputs.forEach(async (output_id, i) => {
+        await Promise.all(outputs.map(async (output_id, i) => {
             const _data = data[i] === undefined ? NOVALUE : data[i];
             if (_data === NOVALUE)
                 return;
@@ -498,16 +510,20 @@ export class DependencyManager {
             else {
                 await this.update_state_cb(output_id, { value: _data }, false);
             }
-        });
+        }));
     }
     /**
      * Gathers the current state of the inputs
      *
      * @param ids the ids of the components to gather state from
+     * @param prop_indices the indices (relative to ids array) that should return all component props instead of just the value
      * @returns an array of the current state of the components, in the same order as the ids
      */
-    async gather_state(ids) {
-        return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map((state) => {
+    async gather_state(ids, prop_indices = []) {
+        return (await Promise.all(ids.map((id) => this.get_state_cb(id)))).map((state, index) => {
+            if (prop_indices.includes(index)) {
+                return state ?? null;
+            }
             return state?.value ?? null;
         });
     }
@@ -519,7 +535,9 @@ export class DependencyManager {
      */
     async set_event_args(id, args) {
         let current_args = {};
-        const current_state = await this.get_state_cb(id);
+        const current_state = await this.get_state_cb?.(id);
+        if (!current_state)
+            return () => { };
         for (const [key] of Object.entries(args)) {
             current_args[key] = current_state?.[key] ?? null;
         }

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

@@ -27,8 +27,8 @@ export declare class AppTree {
     ready: Promise<void>;
     ready_resolve: () => void;
     resolved: boolean;
-    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig, app: client_return, reactive_formatter: (str: string) => string);
-    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: AppConfig): void;
+    constructor(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">, app: client_return, reactive_formatter: (str: string) => string);
+    reload(components: ComponentMeta[], layout: LayoutNode, dependencies: Dependency[], config: Omit<AppConfig, "api_url">): void;
     /**
      * Registers a component with its ID and data callbacks
      * @param id the ID of the component

package/dist/src/init.svelte.js

@@ -40,7 +40,10 @@ export class AppTree {
             this.ready_resolve = resolve;
         });
         this.reactive_formatter = reactive_formatter;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#component_payload = components;
         this.#layout_payload = layout;
         this.#dependency_payload = dependencies;
@@ -67,7 +70,10 @@ export class AppTree {
     reload(components, layout, dependencies, config) {
         this.#layout_payload = layout;
         this.#component_payload = components;
-        this.#config = config;
+        this.#config = {
+            ...config,
+            api_url: new URL(config.api_prefix, config.root).toString()
+        };
         this.#dependency_payload = dependencies;
         this.root = this.create_node({ id: layout.id, children: [] }, new Map(), true);
         for (const comp of components) {
@@ -115,11 +121,11 @@ export class AppTree {
     process() { }
     postprocess(tree) {
         this.root = this.traverse(tree, [
-            (node) => handle_visibility(node, this.#config.root),
-            (node) => untrack_children_of_invisible_parents(node, this.#config.root, this.components_to_register),
-            (node) => handle_empty_forms(node, this.#config.root, this.components_to_register),
-            (node) => translate_props(node, this.#config.root),
-            (node) => apply_initial_tabs(node, this.#config.root, this.initial_tabs),
+            (node) => handle_visibility(node, this.#config.api_url),
+            (node) => untrack_children_of_invisible_parents(node, this.components_to_register),
+            (node) => handle_empty_forms(node, this.components_to_register),
+            (node) => translate_props(node),
+            (node) => apply_initial_tabs(node, this.initial_tabs),
             (node) => this.find_attached_events(node, this.#dependency_payload)
         ]);
     }
@@ -191,7 +197,7 @@ export class AppTree {
         if (reactive_formatter) {
             component.props.i18n = reactive_formatter;
         }
-        const processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, { ...this.#config });
+        const processed_props = gather_props(opts.id, component.props, [this.#input_ids, this.#output_ids], this.client, this.#config.api_url, { ...this.#config });
         const type = type_map[component.type] || component.type;
         const node = {
             id: opts.id,
@@ -201,7 +207,7 @@ export class AppTree {
             show_progress_on: null,
             component_class_id: component.component_class_id || component.type,
             component: processed_props.shared_props.visible !== false
-                ? get_component(component.type, component.component_class_id, this.#config.root || "")
+                ? get_component(component.type, component.component_class_id, this.#config.api_url || "")
                 : null,
             key: component.key,
             rendered_in: component.rendered_in,
@@ -242,7 +248,7 @@ export class AppTree {
             this.root = this.traverse(this.root, [
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
-                (n) => handle_visibility(n, this.#config.root)
+                (n) => handle_visibility(n, this.#config.api_url)
             ]);
             already_updated_visibility = true;
         }
@@ -255,7 +261,7 @@ export class AppTree {
         // need to let the UI settle before traversing again
         // otherwise there could be
         await tick();
-        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.root));
+        this.root = this.traverse(this.root, (n) => handle_visibility(n, this.#config.api_url));
     }
     /**
      * Gets the current state of a component by its ID
@@ -304,7 +310,7 @@ export function process_server_fn(id, server_fns, app) {
  * @param additional any additional props to include
  * @returns the gathered props as an object with `shared_props` and `props` keys
  */
-function gather_props(id, props, dependencies, client, additional = {}) {
+function gather_props(id, props, dependencies, client, api_url, additional = {}) {
     const _shared_props = {};
     const _props = {};
     for (const key in props) {
@@ -336,22 +342,22 @@ function gather_props(id, props, dependencies, client, additional = {}) {
     _shared_props.client = client;
     _shared_props.id = id;
     _shared_props.interactive = determine_interactivity(id, _shared_props.interactive, _props.value, dependencies);
-    _shared_props.load_component = (name, variant) => get_component(name, "", _shared_props.root || "", variant);
+    _shared_props.load_component = (name, variant) => get_component(name, "", api_url, variant);
     _shared_props.visible =
         _shared_props.visible === undefined ? true : _shared_props.visible;
     _shared_props.loading_status = {};
     return { shared_props: _shared_props, props: _props };
 }
-function handle_visibility(node, root) {
+function handle_visibility(node, api_url) {
     // Check if the node is visible
     if (node.props.shared_props.visible && !node.component) {
         const result = {
             ...node,
-            component: get_component(node.type, node.component_class_id, root),
+            component: get_component(node.type, node.component_class_id, api_url),
             children: []
         };
         if (node.children) {
-            result.children = node.children.map((child) => handle_visibility(child, root));
+            result.children = node.children.map((child) => handle_visibility(child, api_url));
         }
         return result;
     }
@@ -372,14 +378,14 @@ function _untrack(node, components_to_register) {
     }
     return;
 }
-function untrack_children_of_invisible_parents(node, root, components_to_register) {
+function untrack_children_of_invisible_parents(node, components_to_register) {
     // Check if the node is visible
     if (node.props.shared_props.visible !== true) {
         _untrack(node, components_to_register);
     }
     return node;
 }
-function handle_empty_forms(node, root, components_to_register) {
+function handle_empty_forms(node, components_to_register) {
     // Check if the node is visible
     if (node.type === "form") {
         const all_children_invisible = node.children.every((child) => child.props.shared_props.visible === false);
@@ -391,7 +397,7 @@ function handle_empty_forms(node, root, components_to_register) {
     }
     return node;
 }
-function translate_props(node, root) {
+function translate_props(node) {
     const supported_props = [
         "description",
         "info",
@@ -413,7 +419,7 @@ function translate_props(node, root) {
     }
     return node;
 }
-function apply_initial_tabs(node, root, initial_tabs) {
+function apply_initial_tabs(node, initial_tabs) {
     if (node.type === "tabs" && node.id in initial_tabs) {
         const tabs = initial_tabs[node.id].sort((a, b) => a.order - b.order);
         node.props.props.initial_tabs = tabs;

package/dist/src/types.d.ts

@@ -71,6 +71,7 @@ export interface Dependency {
     like_user_message: boolean;
     event_specific_args: ("time_limit" | "stream_every" | "like_user_message")[];
     js_implementation: string | null;
+    component_prop_inputs: number[];
 }
 interface TypeDescription {
     input_payload?: string;
@@ -106,5 +107,6 @@ export interface AppConfig {
     max_file_size?: number;
     autoscroll: boolean;
     api_prefix: string;
+    api_url: string;
 }
 export {};