Resizeable chatbot (#10149)

* changes

* add changeset

* changes

* changes

* changes

---------

Co-authored-by: Ali Abid <aliabid94@gmail.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/brave-walls-beam.md

@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Resizeable chatbot

gradio/components/chatbot.py

@@ -182,6 +182,7 @@ class Chatbot(Component):
         render: bool = True,
         key: int | str | None = None,
         height: int | str | None = 400,
+        resizeable: bool = False,
         max_height: int | str | None = None,
         min_height: int | str | None = None,
         latex_delimiters: list[dict[str, str | bool]] | None = None,
@@ -217,6 +218,7 @@ class Chatbot(Component):
             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.
             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`.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
@@ -253,6 +255,7 @@ class Chatbot(Component):
         self._setup_data_model()
         self.autoscroll = autoscroll
         self.height = height
+        self.resizeable = resizeable
         self.max_height = max_height
         self.min_height = min_height
         self.rtl = rtl

js/atoms/src/Block.svelte

@@ -18,6 +18,8 @@
 	export let scale: number | null = null;
 	export let min_width = 0;
 	export let flex = false;
+	export let resizeable = false;
+	let element: HTMLElement;
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
 
@@ -37,10 +39,26 @@
 	$: if (!visible) {
 		flex = false;
 	}
+
+	const resize = (e: MouseEvent): void => {
+		let prevY = e.clientY;
+		const onMouseMove = (e: MouseEvent): void => {
+			const dy: number = e.clientY - prevY;
+			prevY = e.clientY;
+			element.style.height = `${element.offsetHeight + dy}px`;
+		};
+		const onMouseUp = (): void => {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
+	};
 </script>
 
 <svelte:element
 	this={tag}
+	bind:this={element}
 	data-testid={test_id}
 	id={elem_id}
 	class:hidden={visible === false}
@@ -64,6 +82,18 @@
 	class:auto-margin={scale === null}
 >
 	<slot />
+	{#if resizeable}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<svg
+			class="resize-handle"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 10 10"
+			on:mousedown={resize}
+		>
+			<line x1="1" y1="9" x2="9" y2="1" stroke="gray" stroke-width="0.5" />
+			<line x1="5" y1="9" x2="9" y2="5" stroke="gray" stroke-width="0.5" />
+		</svg>
+	{/if}
 </svelte:element>
 
 <style>
@@ -112,4 +142,13 @@
 		padding: 0;
 		overflow: visible;
 	}
+	.resize-handle {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 10px;
+		height: 10px;
+		fill: var(--block-border-color);
+		cursor: nwse-resize;
+	}
 </style>

js/chatbot/Index.svelte

@@ -75,6 +75,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 min_height: number | string | undefined;
 	export let max_height: number | string | undefined;
 	export let placeholder: string | null = null;
@@ -91,6 +92,7 @@
 	{scale}
 	{min_width}
 	{height}
+	{resizeable}
 	{min_height}
 	{max_height}
 	allow_overflow={true}

test/components/test_chatbot.py

@@ -44,6 +44,7 @@ class TestChatbot:
             "scale": None,
             "placeholder": None,
             "height": 400,
+            "resizeable": False,
             "max_height": None,
             "min_height": None,
             "autoscroll": True,