From 200ed97b1a1bc7b4f107d2d8fd40cbfbe9c0805a Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Tue, 15 Feb 2022 17:48:35 -0500
Subject: [PATCH 1/6] mirror webcam + autoscroll chatbot

---
 .../components/output/Chatbot/Chatbot.svelte   | 18 +++++++++++++++++-
 .../app/src/components/utils/Webcam.svelte     |  7 +++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 150d6c000f..040a5c5192 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -1,8 +1,20 @@
 <script lang="ts">
+	import { beforeUpdate, afterUpdate } from 'svelte';
+import Html from '../Html/Html.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
@@ -17,5 +29,9 @@
 	</div>
 </div>
 
+
+
+
+
 <style lang="postcss">
 </style>
diff --git a/ui/packages/app/src/components/utils/Webcam.svelte b/ui/packages/app/src/components/utils/Webcam.svelte
index 17410dde49..cbc6250aa6 100644
--- a/ui/packages/app/src/components/utils/Webcam.svelte
+++ b/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>

From 3a136c4b9b6afc294c48c716df1f56539b1ad288 Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Tue, 15 Feb 2022 17:51:32 -0500
Subject: [PATCH 2/6] remove whitespace

---
 .../app/src/components/output/Chatbot/Chatbot.svelte       | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 040a5c5192..61df287cd8 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -28,10 +28,3 @@ import Html from '../Html/Html.svelte';
 		{/each}
 	</div>
 </div>
-
-
-
-
-
-<style lang="postcss">
-</style>

From db11b98c96adff53249cdba9a05f6693483f4f91 Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Tue, 15 Feb 2022 17:52:26 -0500
Subject: [PATCH 3/6] format fixes

---
 .../app/src/components/output/Chatbot/Chatbot.svelte | 12 ++++++++----
 ui/packages/app/src/components/utils/Webcam.svelte   |  6 +++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 61df287cd8..22c4605a5e 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { beforeUpdate, afterUpdate } from 'svelte';
-import Html from '../Html/Html.svelte';
+	import { beforeUpdate, afterUpdate } from "svelte";
+	import Html from "../Html/Html.svelte";
 	export let value: Array<string>;
 	let div: HTMLDivElement;
 	let autoscroll: Boolean;
 
 	beforeUpdate(() => {
-		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+		autoscroll =
+			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
 	});
 
 	afterUpdate(() => {
@@ -14,7 +15,10 @@ import Html from '../Html/Html.svelte';
 	});
 </script>
 
-<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight" bind:this={div}>
+<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
diff --git a/ui/packages/app/src/components/utils/Webcam.svelte b/ui/packages/app/src/components/utils/Webcam.svelte
index cbc6250aa6..0694a8d340 100644
--- a/ui/packages/app/src/components/utils/Webcam.svelte
+++ b/ui/packages/app/src/components/utils/Webcam.svelte
@@ -69,7 +69,7 @@
 
 <style lang="postcss" global>
 	video {
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-}
+		-webkit-transform: scaleX(-1);
+		transform: scaleX(-1);
+	}
 </style>

From 1657fc20c994bc1149073456e4cb5668c169c39b Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Tue, 15 Feb 2022 17:56:52 -0500
Subject: [PATCH 4/6] remove import statement

---
 ui/packages/app/src/components/output/Chatbot/Chatbot.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 22c4605a5e..48d1460988 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { beforeUpdate, afterUpdate } from "svelte";
-	import Html from "../Html/Html.svelte";
 	export let value: Array<string>;
 	let div: HTMLDivElement;
 	let autoscroll: Boolean;

From 7955cbab3193f5aea26f58e7097cbcc845915b81 Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Wed, 16 Feb 2022 11:54:17 -0500
Subject: [PATCH 5/6] chatbot message order fix

---
 .../app/src/components/output/Chatbot/Chatbot.svelte   | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 48d1460988..529930e25c 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -20,14 +20,8 @@
 >
 	<div class="flex flex-col items-end space-y-4 p-3">
 		{#each value as message}
-			<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>
+			<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>
 		{/each}
 	</div>
 </div>

From 23ab8e9d2d50d3548e836ee4fffdd77b6a04e903 Mon Sep 17 00:00:00 2001
From: dawoodkhan82 <dawoodkhan82@gmail.com>
Date: Wed, 16 Feb 2022 11:58:53 -0500
Subject: [PATCH 6/6] formatting fix

---
 .../app/src/components/output/Chatbot/Chatbot.svelte   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
index 529930e25c..1b8c7cf570 100644
--- a/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
+++ b/ui/packages/app/src/components/output/Chatbot/Chatbot.svelte
@@ -20,8 +20,14 @@
 >
 	<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>
+			<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>
 		{/each}
 	</div>
 </div>