- Improved CSRF handling
- Wordpress plugin for Evie Chat
This commit is contained in:
Josako
@@ -0,0 +1,256 @@
|
||||
/* eveai_chat.css */
|
||||
:root {
|
||||
--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-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;
|
||||
|
||||
/* Connection Status colors */
|
||||
--status-connected-color: #28a745; /* Green color for connected status */
|
||||
--status-disconnected-color: #ffc107; /* Orange color for disconnected status */
|
||||
}
|
||||
|
||||
/* Connection status styles */
|
||||
.connection-status-icon {
|
||||
vertical-align: middle;
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
color: var(--status-connected-color);
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
color: var(--status-disconnected-color);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
height: 99vh;
|
||||
/*max-height: 100vh;*/
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
border: 1px solid #ccc;
|
||||
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 {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
background-color: var(--bot-message-bg);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 90%;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.question-area {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--user-message-bg);
|
||||
}
|
||||
|
||||
.question-area input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
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: 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 */
|
||||
.status-line {
|
||||
height: var(--status-line-height); /* Fixed height for the status line */
|
||||
padding: 5px 10px;
|
||||
background-color: var(--status-line-bg); /* Background color */
|
||||
color: var(--status-line-color); /* Text color */
|
||||
font-size: 0.9rem; /* Slightly smaller font size */
|
||||
text-align: center; /* Centered text */
|
||||
border-top: 1px solid #ccc; /* Subtle top border */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 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-llm {
|
||||
color: var(--algorithm-color-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 {
|
||||
max-width: 90%; /* Reduce max width on smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chat-container {
|
||||
max-width: 95%; /* Further reduce max width on very small screens */
|
||||
}
|
||||
|
||||
.question-area input {
|
||||
font-size: 0.9rem; /* Adjust input font size for smaller screens */
|
||||
}
|
||||
|
||||
.status-line {
|
||||
font-size: 0.8rem; /* Adjust status line font size for smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user