From d5a99709366ea0cb08c20221dff868e57192977f Mon Sep 17 00:00:00 2001
From: Leo310 <leodev310@gmail.com>
Date: Wed, 28 Feb 2024 18:44:34 +0100
Subject: [PATCH] refactor(chat): message colors

---
 src/components/Chat/Chat.svelte                |  2 +-
 src/components/Chat/Input.svelte               |  4 ++--
 src/components/Chat/MessagesBubble.svelte      |  4 ++--
 src/components/Chat/MessagesCompact.svelte     | 18 +++++++-----------
 src/components/Chat/QuickSettingsDrawer.svelte |  2 +-
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/Chat/Chat.svelte b/src/components/Chat/Chat.svelte
index 04630b2..4022e01 100644
--- a/src/components/Chat/Chat.svelte
+++ b/src/components/Chat/Chat.svelte
@@ -10,7 +10,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="--background-modifier-border flex h-full flex-col">
+<div class="--background-modifier-border flex h-full flex-col gap-1">
     <QuickSettingsDrawer />
     {#if $plugin.data.isChatComfy}
         <MessagesBubble bind:textarea />
diff --git a/src/components/Chat/Input.svelte b/src/components/Chat/Input.svelte
index 576892a..c2a7853 100644
--- a/src/components/Chat/Input.svelte
+++ b/src/components/Chat/Input.svelte
@@ -71,9 +71,9 @@
 </script>
 
 <!-- save delete and rag settings slightly above input field -->
-<div class="relative pb-1">
+<div class="relative">
     <div
-        class="absolute -top-[3.3rem] left-1/2 flex -translate-x-1/2 items-center gap-3 rounded-t-2xl border-solid border-x-[--background-modifier-border] border-b-transparent border-t-[--background-modifier-border] {$isChatInSidebar
+        class="absolute -top-[54px] left-1/2 flex -translate-x-1/2 items-center gap-3 rounded-t-2xl border border-solid border-x-[--background-modifier-border] border-b-transparent border-t-[--background-modifier-border] {$isChatInSidebar
             ? 'bg-[--background-secondary]'
             : 'bg-[--background-primary]'} p-2"
     >
diff --git a/src/components/Chat/MessagesBubble.svelte b/src/components/Chat/MessagesBubble.svelte
index e80d5a1..fff1bad 100644
--- a/src/components/Chat/MessagesBubble.svelte
+++ b/src/components/Chat/MessagesBubble.svelte
@@ -44,13 +44,13 @@
 <div
     bind:this={chatWindow}
     on:scroll={() => (isAutoScrolling = chatWindow.scrollTop + chatWindow.clientHeight + 1 >= chatWindow.scrollHeight)}
-    class="chat-window mb-1 w-full flex-grow select-text overflow-y-scroll rounded-md border border-solid border-[--background-modifier-border] p-4"
+    class="chat-window w-full flex-grow select-text overflow-y-scroll rounded-md border border-solid border-[--background-modifier-border] p-4"
 >
     {#each $chatHistory as message (message.id)}
         {#if message.role === 'User'}
             <div class="mb-3 flex justify-end">
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="group max-w-[80%] rounded-t-lg rounded-bl-lg px-4" style="background-color: hsla(var(--color-accent-hsl), 0.4);">
+                <div class="group max-w-[80%] rounded-t-lg rounded-bl-lg px-4" style="background-color: var(--text-selection);">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <!-- svelte-ignore a11y-mouse-events-have-key-events -->
diff --git a/src/components/Chat/MessagesCompact.svelte b/src/components/Chat/MessagesCompact.svelte
index 08bd216..b89f76b 100644
--- a/src/components/Chat/MessagesCompact.svelte
+++ b/src/components/Chat/MessagesCompact.svelte
@@ -43,16 +43,16 @@
 <div
     bind:this={chatWindow}
     on:scroll={() => (isAutoScrolling = chatWindow.scrollTop + chatWindow.clientHeight + 1 >= chatWindow.scrollHeight)}
-    class="mb-1 w-full flex-grow select-text overflow-y-scroll rounded-md border border-solid border-[--background-modifier-border]"
+    class="w-full flex-grow select-text overflow-y-scroll rounded-md border border-solid border-[--background-modifier-border]"
 >
     {#each $chatHistory as message (message.id)}
         {#if message.role === 'User'}
             <div
-                class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] {$isChatInSidebar
-                    ? 'var(--background-secondary-alt)'
-                    : 'var(--background-primary-alt)'} p-2"
+                class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] p-2 pr-4 {$isChatInSidebar
+                    ? 'bg-[--background-secondary-alt]'
+                    : 'bg-[--background-primary-alt]'}"
             >
-                <div class="text-primary mt-2 font-bold">User</div>
+                <div class="text-[--text-accent] mt-2 font-bold">User</div>
                 <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -82,12 +82,8 @@
                 </div>
             </div>
         {:else}
-            <div
-                class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] {$isChatInSidebar
-                    ? 'bg-[--background-secondary-alt]'
-                    : 'bg-[--background-primary-alt]'} p-2"
-            >
-                <div class="text-primary mt-2 font-bold">Smart2Brain</div>
+            <div class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] p-2 pr-4">
+                <div class="text-[--text-accent] mt-2 font-bold">Smart2Brain</div>
                 <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
diff --git a/src/components/Chat/QuickSettingsDrawer.svelte b/src/components/Chat/QuickSettingsDrawer.svelte
index a1dae52..85e702c 100644
--- a/src/components/Chat/QuickSettingsDrawer.svelte
+++ b/src/components/Chat/QuickSettingsDrawer.svelte
@@ -117,7 +117,7 @@
                 </div>
             {/if}
         {/if}
-        <div class="absolute bottom-0 z-10 flex w-full justify-center {$isChatInSidebar ? 'bg-[--background-secondary]' : 'bg-[--background-primary]'}">
+        <div class="absolute bottom-0 z-10 flex w-full justify-center">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div