From fd1024bd1882868237adf67e423540b649ba7914 Mon Sep 17 00:00:00 2001
From: zAlweNy26 <zdanymc@gmail.com>
Date: Fri, 21 Jun 2024 14:14:30 +0200
Subject: [PATCH] update css and fix scroll button

---
 src/assets/main.css           | 20 ++++++------
 src/components/MessageBox.vue | 60 +++++++++++++++++------------------
 src/views/HomeView.vue        |  6 +++-
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 83b6971..aa7f95f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -34,20 +34,20 @@
 	audio::-webkit-media-controls-enclosure {
 		@apply bg-base-100 max-h-10 rounded-lg;
 	}
-	[data-theme='dark'] audio::-webkit-media-controls-mute-button,
-	[data-theme='dark'] video::-webkit-media-controls-mute-button {
-		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMyA5djZoNGw1IDVWNEw3IDlIM3ptMTMuNSAzYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2OC4wNWMxLjQ4LS43MyAyLjUtMi4yNSAyLjUtNC4wMnpNMTQgMy4yM3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Ii8+DQogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPg0KPC9zdmc+');
-	}
 	audio::-webkit-media-controls-mute-button,
 	video::-webkit-media-controls-mute-button {
-		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3ciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQo8L3N2Zz4NCg==');
+		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMyA5djZoNGw1IDVWNEw3IDlIM3ptMTMuNSAzYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2OC4wNWMxLjQ4LS43MyAyLjUtMi4yNSAyLjUtNC4wMnpNMTQgMy4yM3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Ii8+DQogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPg0KPC9zdmc+');
 	}
-	[data-theme='dark'] audio::-webkit-media-controls-play-button,
-	[data-theme='dark'] video::-webkit-media-controls-play-button {
-		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNOCA1djE0bDExLTd6Ii8+DQogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPg0KPC9zdmc+');
+	[data-theme='dark'] audio::-webkit-media-controls-mute-button,
+	[data-theme='dark'] video::-webkit-media-controls-mute-button {
+		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3ciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQo8L3N2Zz4NCg==');
 	}
 	audio::-webkit-media-controls-play-button,
 	video::-webkit-media-controls-play-button {
+		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNOCA1djE0bDExLTd6Ii8+DQogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPg0KPC9zdmc+');
+	}
+	[data-theme='dark'] audio::-webkit-media-controls-play-button,
+	[data-theme='dark'] video::-webkit-media-controls-play-button {
 		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3ciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQo8L3N2Zz4NCg==');
 	}
 	video {
@@ -56,10 +56,10 @@
 	video::-webkit-media-controls-panel {
 		background: linear-gradient(to bottom, transparent, theme(backgroundColor.base-300)) repeat-x bottom left;
 	}
-	[data-theme='dark'] video::-webkit-media-controls-fullscreen-button {
+	video::-webkit-media-controls-fullscreen-button {
 		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+DQogICAgPHBhdGggZD0iTTcgMTRINXY1aDV2LTJIN3YtM3ptLTItNGgyVjdoM1Y1SDV2NXptMTIgN2gtM3YyaDV2LTVoLTJ2M3pNMTQgNXYyaDN2M2gyVjVoLTV6Ii8+DQo8L3N2Zz4=');
 	}
-	video::-webkit-media-controls-fullscreen-button {
+	[data-theme='dark'] video::-webkit-media-controls-fullscreen-button {
 		background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3ciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4NCiAgICA8cGF0aCBkPSJNNyAxNEg1djVoNXYtMkg3di0zem0tMi00aDJWN2gzVjVINXY1em0xMiA3aC0zdjJoNXYtNWgtMnYzek0xNCA1djJoM3YzaDJWNWgtNXoiLz4NCjwvc3ZnPg0K');
 	}
 }
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index 17c3a19..01caeac 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -64,36 +64,32 @@ const fileUrl = computed(() => {
 			{{ sender === 'bot' ? 'Cheshire Cat' : 'You' }}
 			<time class="text-xs opacity-50">{{ timestamp }}</time>
 		</div>
-		<div class="chat-bubble flex min-h-fit items-center break-words rounded-lg bg-base-100 p-0 text-neutral shadow-md">
-			<div class="p-2 md:p-3">
-				<p v-if="text" class="text-ellipsis" v-html="renderedText" />
-				<p v-else class="text-ellipsis font-medium italic opacity-75">Cheshire Cat is thinking...</p>
-				<div v-if="isLengthy && !showReadMore" class="flex justify-end font-bold">
-					<a @click="showReadMore = true">Read more</a>
-				</div>
-				<div v-else-if="isLengthy && showReadMore" class="flex justify-end font-bold">
-					<a @click="showReadMore = false">Hide content</a>
-				</div>
-				<img v-if="file?.type.startsWith('image/')" :src="fileUrl" width="512" height="512" class="rounded-lg shadow-xl" />
-				<audio
-					v-else-if="file?.type.startsWith('audio/')"
-					:src="fileUrl"
-					controls
-					:type="file.type"
-					controlslist="nodownload noplaybackrate" />
-				<video v-else-if="file?.type.startsWith('video/')" controls disablepictureinpicture controlslist="nodownload noplaybackrate">
-					<source :src="fileUrl" :type="file.type" />
-					<p>
-						Your browser doesn't support HTML video. Here is a
-						<a :href="fileUrl">link to the video</a> instead.
-					</p>
-				</video>
-				<div v-else-if="file" class="flex items-center justify-center gap-2 rounded-lg bg-base-200 p-2 shadow-xl">
-					<ph-file-fill class="size-6" />
-					<div class="flex flex-col gap-1">
-						<p class="font-bold">{{ file.name.substring(0, file.name.lastIndexOf('.')) }}</p>
-						<p class="text-xs">{{ fileTypeSize }}</p>
-					</div>
+		<div class="chat-bubble flex min-h-fit w-fit flex-col break-words rounded-lg bg-base-100 p-2 text-neutral shadow-md md:p-3">
+			<div v-if="text" class="text-ellipsis" v-html="renderedText" />
+			<p v-else class="text-ellipsis font-medium italic opacity-75">Cheshire Cat is thinking...</p>
+			<div v-if="isLengthy" class="flex justify-end font-bold">
+				<a v-if="showReadMore" @click="showReadMore = false">Hide content</a>
+				<a v-else @click="showReadMore = true">Read more</a>
+			</div>
+			<img v-if="file?.type.startsWith('image/')" :src="fileUrl" width="512" height="512" class="rounded-lg shadow-xl" />
+			<audio
+				v-else-if="file?.type.startsWith('audio/')"
+				:src="fileUrl"
+				controls
+				:type="file.type"
+				controlslist="nodownload noplaybackrate" />
+			<video v-else-if="file?.type.startsWith('video/')" controls disablepictureinpicture controlslist="nodownload noplaybackrate">
+				<source :src="fileUrl" :type="file.type" />
+				<p>
+					Your browser doesn't support HTML video. Here is a
+					<a :href="fileUrl">link to the video</a> instead.
+				</p>
+			</video>
+			<div v-else-if="file" class="flex items-center justify-center gap-2 rounded-lg bg-base-200 p-2 shadow-xl">
+				<ph-file-fill class="size-6" />
+				<div class="flex flex-col gap-1">
+					<p class="font-bold">{{ file.name.substring(0, file.name.lastIndexOf('.')) }}</p>
+					<p class="text-xs">{{ fileTypeSize }}</p>
 				</div>
 			</div>
 		</div>
@@ -105,7 +101,9 @@ const fileUrl = computed(() => {
 				<button class="btn btn-square btn-ghost btn-xs" @click="$emit('regenerate')"><heroicons-arrow-path class="size-4" /></button>
 			</div>
 			<div v-if="why" class="tooltip tooltip-bottom" data-tip="Why this response">
-				<button class="btn btn-square btn-ghost btn-xs" @click="whyPanel?.togglePanel()"><ph-question-mark class="size-4" /></button>
+				<button class="btn btn-square btn-ghost btn-xs" @click="whyPanel?.togglePanel()">
+					<ph-question-mark class="size-4" />
+				</button>
 			</div>
 		</div>
 		<SidePanel v-if="why" ref="whyPanel" title="Why this response">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0d15413..bbcf2a0 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -108,7 +108,6 @@ const toggleListening = async () => {
 watchThrottled(
 	messagesState,
 	val => {
-		isScrollable.value = document.documentElement.scrollHeight > document.documentElement.clientHeight
 		scrollToBottom()
 		if (!val.generating) textArea.value.focus()
 	},
@@ -119,6 +118,11 @@ onActivated(() => {
 	textArea.value.focus()
 })
 
+useEventListener(document, 'scroll', () => {
+	const doc = document.documentElement
+	isScrollable.value = doc.scrollHeight > doc.clientHeight + doc.scrollTop
+})
+
 /**
  * Dispatches the inserted url to the RabbitHole service and closes the modal.
  */