diff --git a/.changeset/brave-walls-beam.md b/.changeset/brave-walls-beam.md
new file mode 100644
index 0000000000000..7745459c00a9c
--- /dev/null
+++ 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
index 4dcd500d4905f..d224e6243aeb1 100644
--- 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
index 8ef5581bc6b40..9d68a9d026947 100644
--- 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
index 3ff3572234473..d3fb707a776b4 100644
--- 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
index 79c9dc053951c..2ef5f59661864 100644
--- 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,