refac

src/app.css

@@ -53,11 +53,11 @@ math {
 }
 
 .markdown-prose {
-	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .markdown-prose-xs {
-	@apply text-xs prose dark:prose-invert prose-headings:font-semibold prose-hr:my-0 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
+	@apply text-xs prose dark:prose-invert prose-headings:font-semibold prose-hr:my-0  prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-0 prose-img:my-1 prose-headings:my-1 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:-my-0 prose-ol:-my-0 prose-li:-my-0 whitespace-pre-line;
 }
 
 .markdown a {

src/lib/components/chat/ContentRenderer/FloatingButtons.svelte

@@ -79,9 +79,14 @@
 									if (data.choices && data.choices[0]?.delta?.content) {
 										responseContent += data.choices[0].delta.content;
 
-										// Scroll to bottom
+										// Scroll to bottom only if the scroll is at the bottom give 50px buffer
 										const responseContainer = document.getElementById('response-container');
-										responseContainer.scrollTop = responseContainer.scrollHeight;
+										if (
+											responseContainer.scrollHeight - responseContainer.clientHeight <=
+											responseContainer.scrollTop + 50
+										) {
+											responseContainer.scrollTop = responseContainer.scrollHeight;
+										}
 									}
 								} catch (e) {
 									console.error(e);
@@ -152,7 +157,12 @@
 
 										// Scroll to bottom
 										const responseContainer = document.getElementById('response-container');
-										responseContainer.scrollTop = responseContainer.scrollHeight;
+										if (
+											responseContainer.scrollHeight - responseContainer.clientHeight <=
+											responseContainer.scrollTop + 50
+										) {
+											responseContainer.scrollTop = responseContainer.scrollHeight;
+										}
 									}
 								} catch (e) {
 									console.error(e);