diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b70a3dad06a3..ad4e223b78fdd 100644
--- 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
index 464d677a68c96..f5ee85882d015 100644
--- a/ui/packages/app/src/components/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/Chatbot/Chatbot.svelte
@@ -1,7 +1,6 @@
-
{#if show_label}
{/if}
-
+
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
index 4e2c1e3ec4a57..51fe843959915 100644
--- 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,10 +52,10 @@
- {#each value as message, i}
+ {#each _value as message, i}