geoffsee/predict-otron-9001
1
0
Fork 0
mirror of https://github.com/geoffsee/predict-otron-9001.git synced 2025-09-08 22:46:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

leptos chat ui renders

Browse Source
This commit is contained in:
geoffsee
2025-08-31 18:50:25 -04:00
parent 2b4a8a9df8
commit 64daa77c6b
5 changed files with 536 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
crates/chat-ui/style/main.scss
View File

@@ -1,4 +1,226 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: #f5f5f5;
height: 100vh;
overflow: hidden;
}
.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 800px;
margin: 0 auto;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.chat-header {
background-color: #000000;
color: white;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 1rem;
h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.model-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
label {
font-weight: 500;
font-size: 0.9rem;
}
select {
background-color: white;
color: #374151;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
font-family: inherit;
cursor: pointer;
min-width: 200px;
&:focus {
outline: none;
border-color: #663c99;
box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.2);
}
option {
padding: 0.5rem;
}
}
}
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: #fafafa;
}
.message {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
border-radius: 12px;
max-width: 80%;
word-wrap: break-word;
&.user-message {
align-self: flex-end;
background-color: #2563eb;
color: white;
.message-role {
font-weight: 600;
font-size: 0.8rem;
opacity: 0.8;
text-transform: uppercase;
}
.message-content {
line-height: 1.5;
}
}
&.assistant-message {
align-self: flex-start;
background-color: #646873;
border: 1px solid #e5e7eb;
color: #f3f3f3;
.message-role {
font-weight: 600;
font-size: 0.8rem;
color: #c4c5cd;
text-transform: uppercase;
}
.message-content {
line-height: 1.5;
}
&.loading {
background-color: #f3f4f6;
border-color: #d1d5db;
.message-content {
font-style: italic;
color: #6b7280;
}
}
}
}
.error-message {
background-color: #fef2f2;
border: 1px solid #fca5a5;
color: #dc2626;
padding: 1rem;
margin: 0 1rem;
border-radius: 8px;
text-align: center;
font-weight: 500;
}
.chat-input {
display: flex;
gap: 0.5rem;
padding: 1rem;
background-color: white;
border-top: 1px solid #e5e7eb;
textarea {
flex: 1;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 8px;
resize: none;
min-height: 60px;
max-height: 120px;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
&:focus {
outline: none;
border-color: #663c99;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
&.disabled {
background-color: #f9fafb;
color: #6b7280;
cursor: not-allowed;
}
}
button {
padding: 0.75rem 1.5rem;
background-color: #663c99;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
align-self: flex-end;
&:hover:not(.disabled) {
background-color: #663c99;
}
&.disabled {
background-color: #9ca3af;
cursor: not-allowed;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
}
}
/* Scrollbar styling for webkit browsers */
.chat-messages::-webkit-scrollbar {
width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
background: #f1f1f1;
}
.chat-messages::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}