Fix chatbot height (#4540)

* changes

* changes

* changes

* changes

CHANGELOG.md

@@ -8,6 +8,7 @@ No changes to highlight.
 
 - Fix chatbot streaming by [@aliabid94](https://github.com/aliabid94) in [PR 4537](https://github.com/gradio-app/gradio/pull/4537)
 - Fix error modal position and text size by [@pngwn](https://github.com/pngwn) in [PR 4538](https://github.com/gradio-app/gradio/pull/4538).
+- Fix chatbot height and scrolling by [@aliabid94](https://github.com/aliabid94) in [PR 4540](https://github.com/gradio-app/gradio/pull/4540)
 
 ## Other Changes:
 

gradio/version.txt

@@ -1 +1 @@
-3.35.1
+3.35.2

js/app/src/components/Chatbot/Chatbot.svelte

@@ -44,7 +44,7 @@
 		  ])
 		: [];
 	export let loading_status: LoadingStatus | undefined = undefined;
-	export let height: number = 480;
+	export let height: number = 400;
 </script>
 
 <Block
@@ -66,22 +66,35 @@
 				: "minimal"}
 		/>
 	{/if}
-	{#if show_label}
-		<BlockLabel
-			{show_label}
-			Icon={Chat}
-			float={false}
-			label={label || "Chatbot"}
-			disable={container === false}
+	<div class="wrapper">
+		{#if show_label}
+			<BlockLabel
+				{show_label}
+				Icon={Chat}
+				float={false}
+				label={label || "Chatbot"}
+				disable={container === false}
+			/>
+		{/if}
+		<ChatBot
+			{selectable}
+			{theme_mode}
+			value={_value}
+			{latex_delimiters}
+			pending_message={loading_status?.status === "pending"}
+			on:change
+			on:select
 		/>
-	{/if}
-	<ChatBot
-		{selectable}
-		{theme_mode}
-		value={_value}
-		{latex_delimiters}
-		pending_message={loading_status?.status === "pending"}
-		on:change
-		on:select
-	/>
+	</div>
 </Block>
+
+<style>
+	.wrapper {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+		align-items: start;
+		width: 100%;
+		height: 100%;
+	}
+</style>

js/chatbot/src/ChatBot.svelte

@@ -47,12 +47,17 @@
 			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
 	});
 
-	afterUpdate(() => {
+	const scroll = () => {
 		if (autoscroll) {
 			div.scrollTo(0, div.scrollHeight);
+		}
+	};
+	afterUpdate(() => {
+		if (autoscroll) {
+			scroll();
 			div.querySelectorAll("img").forEach((n) => {
 				n.addEventListener("load", () => {
-					div.scrollTo(0, div.scrollHeight);
+					scroll();
 				});
 			});
 		}
@@ -77,7 +82,7 @@
 	}
 </script>
 
-<div class="wrap" style:max-height="100%" bind:this={div}>
+<div class="wrap" bind:this={div}>
 	<div class="message-wrap" use:copy>
 		{#if value !== null}
 			{#each value as message_pair, i}
@@ -92,7 +97,7 @@
 						on:click={() => handle_select(i, j, message)}
 					>
 						{#if typeof message === "string"}
-							<Markdown {message} {latex_delimiters} />
+							<Markdown {message} {latex_delimiters} on:load={scroll} />
 							{#if feedback && j == 1}
 								<div class="feedback">
 									{#each feedback as f}
@@ -144,6 +149,7 @@
 <style>
 	.wrap {
 		padding: var(--block-padding);
+		width: 100%;
 		overflow-y: auto;
 	}
 

js/chatbot/src/MarkdownCode.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { afterUpdate, tick } from "svelte";
+	import { afterUpdate, tick, createEventDispatcher } from "svelte";
 	import DOMPurify from "dompurify";
 	import render_math_in_element from "katex/dist/contrib/auto-render.js";
 	import { marked } from "./utils";
+	const dispatch = createEventDispatcher();
 
 	export let message: string;
+	let old_message: string = "";
 	export let latex_delimiters: Array<{
 		left: string;
 		right: string;
@@ -16,10 +18,14 @@
 
 	afterUpdate(() => {
 		tick().then(() => {
-			requestAnimationFrame(() => {
-				el.innerHTML = DOMPurify.sanitize(marked.parse(message));
-				mounted = true;
-			});
+			if (message !== old_message) {
+				requestAnimationFrame(() => {
+					el.innerHTML = DOMPurify.sanitize(marked.parse(message));
+					mounted = true;
+					old_message = message;
+					dispatch("load");
+				});
+			}
 		});
 	});