pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Layout improvements for the Chat client

Browse Source
This commit is contained in:
Josako
2025-07-23 16:02:11 +02:00
parent f16ed85e82
commit ccc1a2afb8
19 changed files with 472 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
eveai_chat_client/static/assets/css/chat-components.css
View File

@@ -30,7 +30,7 @@
min-height: 0; /* Belangrijk voor nested flexbox */
margin-bottom: 20px; /* Ruimte tussen messages en input */
border-radius: 15px;
background: rgba(255,255,255,0.1);
background: var(--history-background);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 100%;
@@ -94,7 +94,8 @@
align-items: flex-end;
gap: 12px;
padding: 20px;
background: white;
background: var(--active-background-color);
color: var(--active-text-color);
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.05);
@@ -105,32 +106,6 @@
position: relative;
}
.message-input {
width: 100%;
min-height: 45px;
max-height: 120px;
padding: 12px 18px;
border: 1px solid #ddd;
border-radius: 25px;
resize: none;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.message-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.message-input.over-limit {
border-color: #dc3545;
background-color: rgba(220, 53, 69, 0.05);
}
.input-actions {
display: flex;
@@ -143,8 +118,8 @@
height: 45px;
border: none;
border-radius: 50%;
background: var(--primary-color);
color: white;
background: var(--active-background-color);
color: var(--active-text-color);
cursor: pointer;
display: flex;
align-items: center;
@@ -155,7 +130,8 @@
}
.send-btn:hover:not(:disabled) {
background: var(--secondary-color);
background: var(--active-text-color);
color: var(--active-background-color);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@@ -230,12 +206,6 @@
font-size: 16px;
}
.message-input {
font-size: 16px; /* Voorkomt zoom op iOS */
padding: 10px 15px;
min-height: 40px;
}
.chat-component-container {
max-width: 100%; /* Op mobiel volledige breedte gebruiken */
}
@@ -261,9 +231,6 @@
}
/* Loading states */
.chat-input.loading .message-input {
opacity: 0.7;
}
.chat-input.loading .action-btn {
animation: pulse 1.5s infinite;
@@ -376,16 +343,16 @@
/* User message bubble styling */
.message.user .message-content {
background: rgba(0, 0, 0, 0.1);
color: white;
background: var(--history-user-message-background);
color: var(--history-message-text-color);
border-bottom-right-radius: 4px;
}
/* AI/Bot message bubble styling */
.message.ai .message-content,
.message.bot .message-content {
background: rgba(255, 255, 255, 0.1);
color: #212529;
background: var(--history-ai-message-background);
color: var(--history-message-text-color);
border-bottom-left-radius: 4px;
margin-right: 60px;
}

33
eveai_chat_client/static/assets/css/chat-input.css
View File

@@ -22,27 +22,6 @@
position: relative;
}
.message-input {
width: 100%;
min-height: 40px;
padding: 10px 40px 10px 15px;
border: 1px solid #ddd;
border-radius: 20px;
resize: none;
outline: none;
transition: border-color 0.2s;
font-family: Arial, sans-serif;
font-size: 14px;
}
.message-input:focus {
border-color: #0084ff;
}
.message-input.over-limit {
border-color: #ff4d4f;
}
/* Character counter */
.character-counter {
position: absolute;
@@ -106,15 +85,3 @@
100% { transform: rotate(360deg); }
}
/* Formulier in chat input */
.dynamic-form-container {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px 15px 5px 15px;
position: relative;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
font-family: Arial, sans-serif;
font-size: 14px;
}

10
eveai_chat_client/static/assets/css/chat-message.css
View File

@@ -21,16 +21,6 @@
font-size: 14px;
}
/* Formulier styling */
.form-display {
margin: 15px 0;
border-radius: 8px;
background-color: rgba(245, 245, 245, 0.7);
padding: 15px;
border: 1px solid #e0e0e0;
font-family: inherit;
}
/* Tabel styling voor formulieren */
.form-result-table {
width: 100%;

32
eveai_chat_client/static/assets/css/form-message.css
View File

@@ -1,33 +1,3 @@
/* Styling voor formulier in berichten */
.message .form-display {
margin-bottom: 12px;
border-radius: 8px;
background-color: rgba(245, 245, 245, 0.7);
padding: 12px;
border: 1px solid #e0e0e0;
}
.message.user .form-display {
background-color: rgba(255, 255, 255, 0.1);
}
.message.ai .form-display {
background-color: rgba(245, 245, 250, 0.7);
}
/* Styling voor formulieren in berichten */
.form-display {
margin-bottom: 10px;
border-radius: 8px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.user-form-values {
background-color: rgba(0, 123, 255, 0.05);
}
/* Speciale styling voor read-only formulieren in user messages */
.user-form .form-field {
margin-bottom: 6px !important;
@@ -35,7 +5,6 @@
.user-form .field-label {
font-weight: 500 !important;
color: #555 !important;
padding: 2px 0 !important;
}
@@ -69,7 +38,6 @@
.form-readonly .field-label {
font-weight: 500;
color: #555;
}
.form-readonly .field-value {

30
eveai_chat_client/static/assets/css/form.css
View File

@@ -1,11 +1,4 @@
/* Dynamisch formulier stijlen */
.dynamic-form-container {
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background-color: #f9f9f9;
}
.dynamic-form {
padding: 15px;
@@ -19,22 +12,6 @@
border-bottom: 1px solid #e0e0e0;
}
.form-icon {
margin-right: 10px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
}
.form-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.form-fields {
display: grid;
grid-template-columns: 1fr;
@@ -152,13 +129,6 @@
border-bottom: 1px solid #eee;
}
.field-label {
flex: 0 0 30%;
font-weight: 500;
color: #555;
padding-right: 10px;
}
.field-value {
flex: 1;
word-break: break-word;