Merge pull request #627 from gradio-app/dawood/webcam_chatbot_fixes

Some webcam + chatbot fixes

ui/packages/app/src/components/output/Chatbot/Chatbot.svelte

@@ -1,21 +1,33 @@
 <script lang="ts">
+	import { beforeUpdate, afterUpdate } from "svelte";
 	export let value: Array<string>;
+	let div: HTMLDivElement;
+	let autoscroll: Boolean;
+
+	beforeUpdate(() => {
+		autoscroll =
+			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
 </script>
 
-<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight">
+<div
+	class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight"
+	bind:this={div}
+>
 	<div class="flex flex-col items-end space-y-4 p-3">
 		{#each value as message}
+			<div class="px-3 py-2 rounded-2xl bg-yellow-500 text-white ml-7">
+				{message[0]}
+			</div>
 			<div
 				class="px-3 py-2 rounded-2xl place-self-start bg-gray-300 dark:bg-gray-850 dark:text-gray-200 mr-7"
 			>
 				{message[1]}
 			</div>
-			<div class="px-3 py-2 rounded-2xl bg-yellow-500 text-white ml-7">
-				{message[0]}
-			</div>
 		{/each}
 	</div>
 </div>
-
-<style lang="postcss">
-</style>

ui/packages/app/src/components/utils/Webcam.svelte

@@ -66,3 +66,10 @@
 		/>
 	</button>
 </div>
+
+<style lang="postcss" global>
+	video {
+		-webkit-transform: scaleX(-1);
+		transform: scaleX(-1);
+	}
+</style>