Rodrigo Rodriguez (Pragmatismo)
4b185f00f9
- Added HTTP server with CORS support and various endpoints - Introduced http_tx/http_rx channels for HTTP server control - Cleaned up build.rs by removing commented code - Updated .gitignore to use *.rdb pattern instead of .rdb - Simplified capabilities.json to empty object - Improved UI initialization with better error handling - Reorganized module imports in main.rs - Added worker count configuration for HTTP server The changes introduce a new HTTP server capability while cleaning up and improving existing code structure. The HTTP server includes authentication, session management, and websocket support.
195 lines
3.4 KiB
CSS
195 lines
3.4 KiB
CSS
.chat-container {
|
|
margin-top: 60px; /* Account for navbar height */
|
|
height: calc(100vh - 60px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 20px 140px;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.chat-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg);
|
|
border-top: 1px solid var(--border);
|
|
padding: 12px;
|
|
z-index: 100;
|
|
transition: all 0.3s;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* Message styles */
|
|
.message-container {
|
|
margin-bottom: 24px;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.user-message {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.user-message-content {
|
|
background: var(--fg);
|
|
color: var(--bg);
|
|
border-radius: 18px;
|
|
padding: 12px 18px;
|
|
max-width: 80%;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-message-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--gradient-2);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.assistant-message {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.assistant-avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--logo-url) center/contain no-repeat;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
filter: var(--logo-filter, none);
|
|
}
|
|
|
|
.assistant-message-content {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
background: var(--glass);
|
|
border-radius: 18px;
|
|
padding: 12px 18px;
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.assistant-message-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--gradient-1);
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Input and suggestions */
|
|
.suggestions-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-bottom: 8px;
|
|
justify-content: center;
|
|
max-width: 680px;
|
|
margin: 0 auto 8px;
|
|
}
|
|
|
|
.suggestion-button {
|
|
padding: 6px 12px;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
transition: all 0.2s;
|
|
background: var(--glass);
|
|
border: 1px solid var(--border);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.suggestion-button:hover {
|
|
background: var(--fg);
|
|
color: var(--bg);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
gap: 6px;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
}
|
|
|
|
#messageInput {
|
|
flex: 1;
|
|
border-radius: 20px;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
font-family: "Inter", sans-serif;
|
|
outline: none;
|
|
transition: all 0.3s;
|
|
background: var(--glass);
|
|
border: 1px solid var(--border);
|
|
color: var(--fg);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#messageInput:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(0,102,255,0.1);
|
|
}
|
|
|
|
#messageInput::placeholder {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
#sendBtn, #voiceBtn {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: none;
|
|
background: var(--fg);
|
|
color: var(--bg);
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#voiceBtn.recording {
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1) }
|
|
50% { opacity: 0.6; transform: scale(1.1) }
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
#messages {
|
|
padding: 20px 16px 140px;
|
|
}
|
|
}
|