fix spelling of resizable parameter in gr.Chatbot (#10625)

* fix spelling * add changeset * changes --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Feb 19, 2025 · ce4fb99 · ce4fb99
1 parent 5aa9925
commit ce4fb99
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/.changeset/four-eggs-dig.md b/.changeset/four-eggs-dig.md
@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:fix spelling of `resizable` parameter in `gr.Chatbot`
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
@@ -216,7 +216,8 @@ def __init__(
         render: bool = True,
         key: int | str | None = None,
         height: int | str | None = 400,
-        resizeable: bool = False,
+        resizable: bool = False,
+        resizeable: bool = False,  # Deprecated, TODO: Remove
         max_height: int | str | None = None,
         min_height: int | str | None = None,
         editable: Literal["user", "all"] | None = None,
@@ -257,7 +258,7 @@ def __init__(
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
-            resizeable: If True, the component will be resizeable by the user.
+            resizable: If True, the user of the Gradio app can resize the chatbot by dragging the bottom right corner.
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
             min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             editable: Allows user to edit messages in the chatbot. If set to "user", allows editing of user messages. If set to "all", allows editing of assistant messages as well.
@@ -299,7 +300,13 @@ def __init__(
         self._setup_data_model()
         self.autoscroll = autoscroll
         self.height = height
-        self.resizeable = resizeable
+        if resizeable is not False:
+            warnings.warn(
+                "The 'resizeable' parameter is deprecated and will be removed in a future version. Please use the 'resizable' (note the corrected spelling) parameter instead.",
+                DeprecationWarning,
+            )
+            self.resizable = resizeable
+        self.resizable = resizable
         self.max_height = max_height
         self.min_height = min_height
         self.editable = editable

diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte
@@ -18,7 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width = 0;
 	export let flex = false;
-	export let resizeable = false;
+	export let resizable = false;
 	let element: HTMLElement;
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
@@ -82,7 +82,7 @@
 	class:auto-margin={scale === null}
 >
 	<slot />
-	{#if resizeable}
+	{#if resizable}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<svg
 			class="resize-handle"

diff --git a/js/chatbot/Index.svelte b/js/chatbot/Index.svelte
@@ -80,7 +80,7 @@
 	export let like_user_message = false;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let height: number | string | undefined;
-	export let resizeable: boolean;
+	export let resizable: boolean;
 	export let min_height: number | string | undefined;
 	export let max_height: number | string | undefined;
 	export let editable: "user" | "all" | null = null;
@@ -98,7 +98,7 @@
 	{scale}
 	{min_width}
 	{height}
-	{resizeable}
+	{resizable}
 	{min_height}
 	{max_height}
 	allow_overflow={true}

diff --git a/test/components/test_chatbot.py b/test/components/test_chatbot.py
@@ -48,7 +48,7 @@ def test_component_functions(self):
             "height": 400,
             "feedback_options": ("Like", "Dislike"),
             "feedback_value": None,
-            "resizeable": False,
+            "resizable": False,
             "max_height": None,
             "min_height": None,
             "autoscroll": True,