Resizeable chatbot (#10149)

* changes * add changeset * changes * changes * changes --------- Co-authored-by: Ali Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]>
gradio-app · Dec 11, 2024 · 9cd291b · 9cd291b
1 parent 23a2958
commit 9cd291b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 0 deletions.
diff --git a/.changeset/brave-walls-beam.md b/.changeset/brave-walls-beam.md
@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Resizeable chatbot
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
@@ -182,6 +182,7 @@ def __init__(
         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 @@ 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.
             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 @@ def __init__(
         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

diff --git a/js/atoms/src/Block.svelte b/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>
diff --git a/js/chatbot/Index.svelte b/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}

diff --git a/test/components/test_chatbot.py b/test/components/test_chatbot.py
@@ -44,6 +44,7 @@ def test_component_functions(self):
             "scale": None,
             "placeholder": None,
             "height": 400,
+            "resizeable": False,
             "max_height": None,
             "min_height": None,
             "autoscroll": True,