Improvements on the chat UI, prepare for supporting multiple models, and adding feedback to interactions.

static/css/eveai-chat-style.css

@@ -1,17 +1,74 @@
 /* eveai_chat.css */
 :root {
-  --user-message-bg: #d1e7dd; /* Default user message background color */
-  --bot-message-bg: #ffffff; /* Default bot message background color */
-  --chat-bg: #f8f9fa; /* Default chat background color */
-  --algorithm-color-default: #ccc; /* Default algorithm indicator color */
-  --algorithm-color-alg1: #f00; /* Algorithm 1 color */
-  --algorithm-color-alg2: #0f0; /* Algorithm 2 color */
-  --algorithm-color-alg3: #00f; /* Algorithm 3 color */
-  --status-line-color: #6c757d; /* Color for the status line text */
-  --status-line-bg: #e9ecef; /* Background color for the status line */
+  --user-message-bg: #292929; /* Default user message background color */
+  --bot-message-bg: #1e1e1e; /* Default bot message background color */
+  --chat-bg: #1e1e1e; /* Default chat background color */
+  --status-line-color: #e9e9e9; /* Color for the status line text */
+  --status-line-bg: #1e1e1e; /* Background color for the status line */
   --status-line-height: 30px; /* Fixed height for the status line */
+
+  --algorithm-color-rag-tenant: #0f0; /* Green for RAG_TENANT */
+  --algorithm-color-rag-wikipedia: #00f; /* Blue for RAG_WIKIPEDIA */
+  --algorithm-color-rag-google: #ff0; /* Yellow for RAG_GOOGLE */
+  --algorithm-color-rag-llm: #800080; /* Purple for RAG_LLM */
+
+  /*--font-family: 'Arial, sans-serif'; !* Default font family *!*/
+  --font-family: 'ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol';
+  --font-color: #e9e9e9; /* Default font color */
+  --user-message-font-color: #e9e9e9; /* User message font color */
+  --bot-message-font-color: #e9e9e9; /* Bot message font color */
+  --input-bg: #292929; /* Input background color */
+  --input-border: #ccc; /* Input border color */
+  --input-text-color: #e9e9e9; /* Input text color */
+  --button-color: #007bff; /* Button text color */
+
+  /* Variables for hyperlink backgrounds */
+  --link-bg: #1e1e1e; /* Default background color for hyperlinks */
+  --link-hover-bg: #1e1e1e; /* Background color on hover for hyperlinks */
+  --link-color: #dec981; /* Default text color for hyperlinks */
+  --link-hover-color: #D68F53; /* Text color on hover for hyperlinks */
+
+  /* New scrollbar variables */
+  --scrollbar-bg: #292929; /* Background color for the scrollbar track */
+  --scrollbar-thumb: #4b4b4b; /* Color for the scrollbar thumb */
+  --scrollbar-thumb-hover: #dec981; /* Color for the thumb on hover */
+  --scrollbar-thumb-active: #D68F53; /* Color for the thumb when active (dragged) */
+
+  /* Thumb colors */
+  --thumb-icon-outlined: #4b4b4b;
+  --thumb-icon-filled: #e9e9e9;
 }
 
+/* Custom scrollbar styles */
+.messages-area::-webkit-scrollbar {
+  width: 12px; /* Width of the scrollbar */
+}
+
+.messages-area::-webkit-scrollbar-track {
+  background: var(--scrollbar-bg); /* Background color for the track */
+}
+
+.messages-area::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb); /* Color of the thumb */
+  border-radius: 10px; /* Rounded corners for the thumb */
+  border: 3px solid var(--scrollbar-bg); /* Space around the thumb */
+}
+
+.messages-area::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover); /* Color when hovering over the thumb */
+}
+
+.messages-area::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-thumb-active); /* Color when active (dragging) */
+}
+
+/* For Firefox */
+.messages-area {
+  scrollbar-width: thin; /* Make scrollbar thinner */
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg); /* Thumb and track colors */
+}
+
+/* General Styles */
 .chat-container {
   display: flex;
   flex-direction: column;
@@ -23,6 +80,8 @@
   border-radius: 8px;
   overflow: hidden;
   background-color: var(--chat-bg);
+  font-family: var(--font-family); /* Apply the default font family */
+  color: var(--font-color); /* Apply the default font color */
 }
 
 .messages-area {
@@ -42,10 +101,12 @@
 .message.user {
   margin-left: auto;
   background-color: var(--user-message-bg);
+  color: var(--user-message-font-color); /* Apply user message font color */
 }
 
 .message.bot {
   background-color: var(--bot-message-bg);
+  color: var(--bot-message-font-color); /* Apply bot message font color */
 }
 
 .message-icons {
@@ -53,8 +114,19 @@
   align-items: center;
 }
 
-.message-icons i {
-  margin-left: 5px;
+/* Scoped styles for thumb icons */
+.thumb-icon.outlined {
+  color: var(--thumb-icon-outlined); /* Color for outlined state */
+}
+
+.thumb-icon.filled {
+  color: var(--thumb-icon-filled); /* Color for filled state */
+}
+
+/* Default styles for material icons */
+.material-icons {
+  font-size: 24px;
+  vertical-align: middle;
   cursor: pointer;
 }
 
@@ -71,13 +143,27 @@
   padding: 10px;
   border-radius: 15px;
   margin-right: 10px;
+  background-color: var(--input-bg); /* Apply input background color */
+  border: 1px solid var(--input-border); /* Apply input border color */
+  color: var(--input-text-color); /* Apply input text color */
 }
 
 .question-area button {
   background: none;
   border: none;
   cursor: pointer;
-  color: #007bff;
+  color: var(--button-color);
+}
+
+/* Styles for the send icon */
+.send-icon {
+  font-size: 24px; /* Size of the icon */
+  color: var(--button-color); /* Color of the icon */
+}
+
+.send-icon.disabled {
+  color: grey; /* Color for the disabled state */
+  cursor: not-allowed; /* Change cursor to indicate disabled state */
 }
 
 /* New CSS for the status-line */
@@ -94,6 +180,38 @@
   justify-content: center;
 }
 
+/* Algorithm-specific colors for fingerprint icon */
+.fingerprint-rag-tenant {
+  color: var(--algorithm-color-rag-tenant);
+}
+
+.fingerprint-rag-wikipedia {
+  color: var(--algorithm-color-rag-wikipedia);
+}
+
+.fingerprint-rag-google {
+  color: var(--algorithm-color-rag-google);
+}
+
+.fingerprint-rag-llm {
+  color: var(--algorithm-color-rag-llm);
+}
+
+/* Styling for citation links */
+.citations a {
+  background-color: var(--link-bg); /* Apply default background color */
+  color: var(--link-color); /* Apply default link color */
+  padding: 2px 4px; /* Add padding for better appearance */
+  border-radius: 3px; /* Add slight rounding for a modern look */
+  text-decoration: none; /* Remove default underline */
+  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
+}
+
+.citations a:hover {
+  background-color: var(--link-hover-bg); /* Background color on hover */
+  color: var(--link-hover-color); /* Text color on hover */
+}
+
 /* Media queries for responsiveness */
 @media (max-width: 768px) {
   .chat-container {
@@ -114,3 +232,6 @@
     font-size: 0.8rem; /* Adjust status line font size for smaller screens */
   }
 }
+
+
+