This commit is contained in:
parent
af78f31565
commit
161012c6a6
11 changed files with 472 additions and 22 deletions
|
|
@ -18,7 +18,7 @@ For comprehensive documentation, see **[docs.pragmatismo.com.br](https://docs.pr
|
|||
## Quick Start
|
||||
|
||||
```bash
|
||||
# Development mode - starts Axum server on port 3000
|
||||
# Development mode - starts Axum server on port 9000
|
||||
cargo run
|
||||
|
||||
# Desktop mode (Tauri) - starts native window
|
||||
|
|
@ -27,7 +27,7 @@ cargo tauri dev
|
|||
|
||||
### Environment Variables
|
||||
|
||||
- `BOTUI_PORT` - Server port (default: 3000)
|
||||
- `BOTUI_PORT` - Server port (default: 9000)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ cargo tauri dev
|
|||
|
||||
| Mode | Command | Description |
|
||||
|------|---------|-------------|
|
||||
| Web | `cargo run` | Axum server on port 3000 |
|
||||
| Web | `cargo run` | Axum server on port 9000 |
|
||||
| Desktop | `cargo tauri dev` | Tauri native window |
|
||||
|
||||
### Code Organization
|
||||
|
|
|
|||
|
|
@ -232,16 +232,19 @@
|
|||
|
||||
.message-content {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 16px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.75;
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
color: #ffffff !important;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
|
|
@ -249,6 +252,7 @@
|
|||
color: #000000 !important;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bot-message,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<link rel="stylesheet" href="/suite/chat/chat.css" />
|
||||
<link rel="stylesheet" href="/suite/css/markdown-message.css" />
|
||||
|
||||
<div class="chat-layout" id="chat-app">
|
||||
<!-- Connection Status -->
|
||||
|
|
|
|||
|
|
@ -1085,9 +1085,23 @@ body {
|
|||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
height: 32px;
|
||||
color: var(--text, var(--text-primary, #ffffff));
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Theme logo image - when src is set, show as image */
|
||||
.logo-icon.logo-icon-img[src:not=""]] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide SVG when logo image is shown */
|
||||
.logo-icon.logo-icon-svg[style*="display: none"],
|
||||
.logo-icon.logo-icon-svg.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
|
|
|
|||
|
|
@ -472,14 +472,15 @@ body.no-animations .spinner {
|
|||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, var(--primary), #8b5cf6);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ============================================ */
|
||||
|
|
|
|||
|
|
@ -395,3 +395,155 @@
|
|||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================ */
|
||||
/* MARKDOWN MESSAGE STYLING */
|
||||
/* ============================================ */
|
||||
|
||||
/* Lists in message content */
|
||||
.message-content ul,
|
||||
.message-content ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* List items with proper spacing from border */
|
||||
.message-content li {
|
||||
margin: 8px 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Nested lists */
|
||||
.message-content ul ul,
|
||||
.message-content ol ol,
|
||||
.message-content ul ol,
|
||||
.message-content ol ul {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* Bullet points */
|
||||
.message-content ul li {
|
||||
list-style-type: disc;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.message-content ul li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
}
|
||||
|
||||
/* Nested bullets */
|
||||
.message-content ul ul li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.message-content ul ul ul li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
/* Numbered lists */
|
||||
.message-content ol li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
/* Nested numbered lists */
|
||||
.message-content ol ol li {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.message-content ol ol ol li {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
/* Lists in user messages */
|
||||
.message.user .message-content ul li::marker,
|
||||
.message.user .message-content ol li::marker {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Lists in bot messages */
|
||||
.message.bot .message-content ul li::marker,
|
||||
.message.bot .message-content ol li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
}
|
||||
|
||||
/* Paragraphs in messages */
|
||||
.message-content p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* First and last paragraph spacing */
|
||||
.message-content p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Headings in messages */
|
||||
.message-content h1,
|
||||
.message-content h2,
|
||||
.message-content h3,
|
||||
.message-content h4,
|
||||
.message-content h5,
|
||||
.message-content h6 {
|
||||
margin: 16px 0 8px 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.message-content h1 { font-size: 1.5em; }
|
||||
.message-content h2 { font-size: 1.3em; }
|
||||
.message-content h3 { font-size: 1.15em; }
|
||||
.message-content h4 { font-size: 1.05em; }
|
||||
|
||||
/* Code blocks */
|
||||
.message-content pre {
|
||||
margin: 12px 0;
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.message-content code {
|
||||
padding: 2px 6px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.message.user .message-content code {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.message-content blockquote {
|
||||
margin: 12px 0;
|
||||
padding-left: 16px;
|
||||
border-left: 3px solid var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Horizontal rules */
|
||||
.message-content hr {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
/* Links in messages */
|
||||
.message-content a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(128, 128, 128, 0.5);
|
||||
transition: text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.message-content a:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
|
|
|||
241
ui/suite/css/markdown-message.css
Normal file
241
ui/suite/css/markdown-message.css
Normal file
|
|
@ -0,0 +1,241 @@
|
|||
/* Markdown Message Styling - Better lists and spacing for chat messages */
|
||||
|
||||
/* Lists in message content */
|
||||
.message-content ul,
|
||||
.message-content ol {
|
||||
margin: 16px 0 !important;
|
||||
padding-left: 28px !important;
|
||||
}
|
||||
|
||||
/* Extra space between list container edge and bullets */
|
||||
.message-content ul li,
|
||||
.message-content ol li {
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
/* List items with better spacing */
|
||||
.message-content li {
|
||||
margin: 10px 0;
|
||||
line-height: 1.8;
|
||||
position: relative;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
/* Nested lists with visual hierarchy */
|
||||
.message-content ul ul,
|
||||
.message-content ol ol,
|
||||
.message-content ul ol,
|
||||
.message-content ol ul {
|
||||
margin: 12px 0;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
/* Bullet points with better visual weight */
|
||||
.message-content ul li {
|
||||
list-style-type: disc;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.message-content ul li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Nested bullets with distinct styles */
|
||||
.message-content ul ul li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.message-content ul ul li::marker {
|
||||
font-size: 1em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.message-content ul ul ul li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.message-content ul ul ul li::marker {
|
||||
font-size: 0.95em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Numbered lists with better styling */
|
||||
.message-content ol li {
|
||||
list-style-type: decimal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-content ol li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Nested numbered lists with visual hierarchy */
|
||||
.message-content ol ol li {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.message-content ol ol li::marker {
|
||||
font-weight: 500;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.message-content ol ol ol li {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.message-content ol ol ol li::marker {
|
||||
font-weight: 400;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Lists in user messages (white text on colored background) */
|
||||
.message.user .message-content ul li::marker,
|
||||
.message.user .message-content ol li::marker {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.message.user .message-content ul ul li::marker,
|
||||
.message.user .message-content ol ol li::marker {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* Lists in bot messages with better contrast */
|
||||
.message.bot .message-content ul li::marker,
|
||||
.message.bot .message-content ol li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
}
|
||||
|
||||
.message.bot .message-content ul ul li::marker,
|
||||
.message.bot .message-content ol ol li::marker {
|
||||
color: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Paragraphs in messages */
|
||||
.message-content p {
|
||||
margin: 10px 0;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* First and last paragraph spacing */
|
||||
.message-content p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Lists with better visual separation from paragraphs */
|
||||
.message-content ul + p,
|
||||
.message-content ol + p,
|
||||
.message-content p + ul,
|
||||
.message-content p + ol {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
/* Headings in messages */
|
||||
.message-content h1,
|
||||
.message-content h2,
|
||||
.message-content h3,
|
||||
.message-content h4,
|
||||
.message-content h5,
|
||||
.message-content h6 {
|
||||
margin: 18px 0 10px 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.message-content h1 { font-size: 1.5em; }
|
||||
.message-content h2 { font-size: 1.3em; }
|
||||
.message-content h3 { font-size: 1.15em; }
|
||||
.message-content h4 { font-size: 1.05em; }
|
||||
|
||||
/* Headings in user messages */
|
||||
.message.user .message-content h1,
|
||||
.message.user .message-content h2,
|
||||
.message.user .message-content h3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Headings in bot messages */
|
||||
.message.bot .message-content h1,
|
||||
.message.bot .message-content h2,
|
||||
.message.bot .message-content h3 {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.message-content pre {
|
||||
margin: 12px 0;
|
||||
padding: 14px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.message-content code {
|
||||
padding: 3px 7px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 5px;
|
||||
font-size: 0.9em;
|
||||
font-family: "Monaco", "Menlo", "Consolas", monospace;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.message.user .message-content code {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.message.bot .message-content code {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.message-content blockquote {
|
||||
margin: 12px 0;
|
||||
padding-left: 16px;
|
||||
border-left: 3px solid var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Horizontal rules */
|
||||
.message-content hr {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
|
||||
/* Links in messages */
|
||||
.message-content a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(128, 128, 128, 0.5);
|
||||
transition: text-decoration-color 0.2s;
|
||||
}
|
||||
|
||||
.message-content a:hover {
|
||||
text-decoration-color: currentColor;
|
||||
}
|
||||
|
||||
/* Strong/bold text */
|
||||
.message-content strong,
|
||||
.message-content b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Emphasis/italic text */
|
||||
.message-content em,
|
||||
.message-content i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -12,6 +12,10 @@
|
|||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<!-- Config color overrides -->
|
||||
<link rel="stylesheet" href="css/config-colors.css" />
|
||||
<!-- Markdown message styling -->
|
||||
<link rel="stylesheet" href="css/markdown-message.css" />
|
||||
|
||||
<!-- Local Libraries (no external CDN dependencies) -->
|
||||
<script src="js/vendor/gsap.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,32 @@
|
|||
/>
|
||||
<meta name="theme-color" content="#d4f505" />
|
||||
|
||||
<!-- Preemptive theme colors to prevent flash -->
|
||||
<script>
|
||||
(function() {
|
||||
const path = window.location.pathname;
|
||||
const botMatch = path.match(/(?:\/bot\/)?([a-z0-9-]+)/i);
|
||||
const botId = botMatch ? botMatch[1].toLowerCase() : 'default';
|
||||
|
||||
// Bot-specific theme colors (from config.csv)
|
||||
const botColors = {
|
||||
'cristo': { color1: '#8B4513', color2: '#FFF8E7' },
|
||||
'salesianos': { color1: '#1976D2', color2: '#E3F2FD' },
|
||||
'default': { color1: '#8B4513', color2: '#FFF8E7' }
|
||||
};
|
||||
|
||||
const colors = botColors[botId] || botColors['default'];
|
||||
document.documentElement.style.setProperty('--color1', colors.color1);
|
||||
document.documentElement.style.setProperty('--color2', colors.color2);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Critical CSS - minimal styles for shell/layout (loaded sync) -->
|
||||
<link rel="stylesheet" href="suite/css/app.css" />
|
||||
<link rel="stylesheet" href="suite/css/base.css" />
|
||||
<link rel="stylesheet" href="suite/css/theme-sentient.css" />
|
||||
<!-- Config color overrides - must load AFTER theme CSS -->
|
||||
<link rel="stylesheet" href="suite/css/config-colors.css" />
|
||||
|
||||
<!-- Non-critical CSS - loaded async for faster initial paint -->
|
||||
<link
|
||||
|
|
@ -119,8 +141,14 @@
|
|||
title="General Bots"
|
||||
aria-label="General Bots - Home"
|
||||
>
|
||||
<img
|
||||
class="logo-icon logo-icon-img"
|
||||
src=""
|
||||
alt=""
|
||||
style="display: none;"
|
||||
/>
|
||||
<svg
|
||||
class="logo-icon"
|
||||
class="logo-icon logo-icon-svg"
|
||||
width="32"
|
||||
height="20"
|
||||
viewBox="0 0 140 80"
|
||||
|
|
@ -1847,6 +1875,12 @@
|
|||
|
||||
<!-- Right: Notifications + User -->
|
||||
<div class="header-right">
|
||||
<!-- Theme dropdown selector -->
|
||||
<div
|
||||
id="themeSelectorContainer"
|
||||
aria-label="Theme selector"
|
||||
></div>
|
||||
|
||||
<!-- Notifications Bell -->
|
||||
<div class="notifications-menu">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -233,14 +233,6 @@
|
|||
console.log("Processing change_theme event, not appending to chat");
|
||||
if (message.data) {
|
||||
ThemeManager.setThemeFromServer(message.data);
|
||||
|
||||
if (message.data.color1 || message.data.color2) {
|
||||
const root = document.documentElement;
|
||||
if (message.data.color1)
|
||||
root.style.setProperty("--color1", message.data.color1);
|
||||
if (message.data.color2)
|
||||
root.style.setProperty("--color2", message.data.color2);
|
||||
}
|
||||
}
|
||||
return; // Don't append theme events to chat
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -141,17 +141,24 @@ const ThemeManager = (() => {
|
|||
}
|
||||
|
||||
if (data.logo_url) {
|
||||
// For img elements - set src and show, hide SVG
|
||||
const logoImg = document.querySelector('.logo-icon-img');
|
||||
const logoSvg = document.querySelector('.logo-icon-svg');
|
||||
if (logoImg && logoSvg) {
|
||||
logoImg.src = data.logo_url;
|
||||
logoImg.alt = data.title || 'Logo';
|
||||
logoImg.style.display = 'block';
|
||||
logoSvg.style.display = 'none';
|
||||
}
|
||||
|
||||
// For elements that use background image
|
||||
document
|
||||
.querySelectorAll(".logo-icon, .assistant-avatar")
|
||||
.querySelectorAll(".assistant-avatar")
|
||||
.forEach((el) => {
|
||||
el.style.backgroundImage = `url("${data.logo_url}")`;
|
||||
el.style.backgroundSize = "contain";
|
||||
el.style.backgroundRepeat = "no-repeat";
|
||||
el.style.backgroundPosition = "center";
|
||||
// Clear emoji text content when logo image is applied
|
||||
if (el.classList.contains("logo-icon")) {
|
||||
el.textContent = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
if (data.color1) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue