Chatbot loader (#3079)

* changes * chagnes * changes * changes * changes * changes --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Jan 31, 2023 · 5264b4c · 5264b4c
1 parent 201df3a
commit 5264b4c
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -93,6 +93,7 @@ to log in. Some browsers disable third party cookies by default (Safari, Chrome
 * Preserve selected image of Gallery through updated by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3061](https://github.com/gradio-app/gradio/pull/3061) 
 * Fix bug where auth was not respected on HF spaces by [@freddyaboulton](https://github.com/freddyaboulton) and [@aliabid94](https://github.com/aliabid94) in [PR 3049](https://github.com/gradio-app/gradio/pull/3049)
 * Fixes bug where tabs selected attribute not working if manually change tab by [@tomhang25](https://github.com/tomchang25) in [3055](https://github.com/gradio-app/gradio/pull/3055)
+* Change chatbot to show dots on progress, and fix bug where chatbot would not stick to bottom in the case of images by [@aliabid94](https://github.com/aliabid94) in [PR 3067](https://github.com/gradio-app/gradio/pull/3079)
 
 ## Documentation Changes:
 * SEO improvements to guides by[@aliabd](https://github.com/aliabd) in [PR 2915](https://github.com/gradio-app/gradio/pull/2915)

diff --git a/ui/packages/app/src/components/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/Chatbot/Chatbot.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { ChatBot } from "@gradio/chatbot";
 	import { Block, BlockLabel } from "@gradio/atoms";
-	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
 	import type { Styles } from "@gradio/utils";
 	import { Chat } from "@gradio/icons";
@@ -18,11 +17,10 @@
 		style.color_map = color_map;
 	}
 
-	export let loading_status: LoadingStatus;
+	export let loading_status: LoadingStatus | undefined;
 </script>
 
 <Block padding={false} {elem_id} {visible}>
-	<StatusTracker {...loading_status} />
 	{#if show_label}
 		<BlockLabel
 			{show_label}
@@ -31,5 +29,10 @@
 			disable={typeof style.container === "boolean" && !style.container}
 		/>
 	{/if}
-	<ChatBot {style} {value} on:change />
+	<ChatBot
+		{style}
+		{value}
+		pending_message={loading_status?.status === "pending"}
+		on:change
+	/>
 </Block>
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
@@ -3,21 +3,30 @@
 	import { colors } from "@gradio/theme";
 	import type { Styles } from "@gradio/utils";
 
-	export let value: Array<[string, string]>;
+	export let value: Array<[string, string]> | null;
 	export let style: Styles = {};
+	export let pending_message: boolean = false;
 
 	let div: HTMLDivElement;
 	let autoscroll: Boolean;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
+	$: _value = value || [];
 	beforeUpdate(() => {
 		autoscroll =
 			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
 	});
 
 	afterUpdate(() => {
-		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+		if (autoscroll) {
+			div.scrollTo(0, div.scrollHeight);
+			div.querySelectorAll("img").forEach((n) => {
+				n.addEventListener("load", () => {
+					div.scrollTo(0, div.scrollHeight);
+				});
+			});
+		}
 	});
 
 	$: value && dispatch("change");
@@ -43,24 +52,37 @@
 
 <div class="wrap" bind:this={div}>
 	<div class="message-wrap">
-		{#each value as message, i}
+		{#each _value as message, i}
 			<div
 				data-testid="user"
-				class:latest={i === value.length - 1}
+				class:latest={i === _value.length - 1}
 				class="message user"
 				style={"background-color:" + _colors[0]}
 			>
 				{@html message[0]}
 			</div>
 			<div
 				data-testid="bot"
-				class:latest={i === value.length - 1}
+				class:latest={i === _value.length - 1}
 				class="message bot"
 				style={"background-color:" + _colors[1]}
 			>
 				{@html message[1]}
 			</div>
 		{/each}
+		{#if pending_message}
+			<div
+				data-testid="bot"
+				class="message user pending"
+				style={"background-color:" + _colors[0]}
+			>
+				<div class="dot-flashing" />
+				&nbsp;
+				<div class="dot-flashing" />
+				&nbsp;
+				<div class="dot-flashing" />
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -120,4 +142,37 @@
 		background: var(--chatbot-bot-background-latest);
 		color: var(--chatbot-bot-text-color-latest);
 	}
+
+	.pending {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 2px;
+	}
+	.dot-flashing {
+		animation: dot-flashing 1s infinite linear alternate;
+		border-radius: 5px;
+		background-color: white;
+		width: 5px;
+		height: 5px;
+		color: white;
+	}
+	.dot-flashing:nth-child(2) {
+		animation-delay: 0.33s;
+	}
+	.dot-flashing:nth-child(3) {
+		animation-delay: 0.66s;
+	}
+
+	@keyframes dot-flashing {
+		0% {
+			opacity: 0.8;
+		}
+		50% {
+			opacity: 0.5;
+		}
+		100% {
+			opacity: 0.8;
+		}
+	}
 </style>