victorvargas/rony-chat-bot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rony-chat-bot/web/chat-widget.css

269 lines
6.6 KiB
CSS
Raw Normal View History

feat: bootstrap rony-chat-bot Go module Initial implementation of the bot: - cmd/chat-bot: CLI entrypoint (serve, reindex, ask, version) - internal/agent: LLM provider client + agent runner with RAG injection - internal/config: YAML config loader (providers, RAG, persona, server) - internal/i18n: response-language detection (EN/ES) - internal/persona: persona system prompt assembly from YAML - internal/portfolio: heading-based chunker + SQLite FTS5 indexer - internal/server: chi router with /api/chat (SSE), /api/health, /api/info, /api/reindex, middleware (RequestID, Logging, CORS, RateLimit) - internal/streaming: SSE protocol helpers (start, chunk, sources, done, error) - web/: drop-in vanilla-JS chat widget (no build, no deps) + demo + README - bench/: reproducible driver benchmark (modernc vs mattn SQLite) - configs/portfolio-bot.yaml: llama.cpp default provider, SQLite RAG, canine persona - docs/architecture.md / .es.md: aligned with SQLite FTS5 + llama.cpp decisions - data/projects/README*.md: project data documentation - README.md / .es.md: updated for current implementation All tests pass (go test ./...). Bot is functional end-to-end with the configured LLM provider.
2026-07-17 07:56:06 +00:00
/* rony-chat-widget — scoped styles
All selectors are prefixed with .rony-chat-widget- to avoid clashing
with the host site's CSS. Override CSS custom properties (--rony-*)
to retheme without forking. */
.rony-chat-widget-root {
--rony-z: 2147483000;
--rony-bg: #ffffff;
--rony-bg-soft: #f7f7f8;
--rony-fg: #1a1a1a;
--rony-fg-soft: #5c5c66;
--rony-border: #e4e4e7;
--rony-accent: #2563eb;
--rony-accent-fg: #ffffff;
--rony-user-bubble: #2563eb;
--rony-user-fg: #ffffff;
--rony-assistant-bubble: #f1f1f3;
--rony-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
--rony-radius: 14px;
--rony-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
position: fixed;
z-index: var(--rony-z);
font-family: var(--rony-font);
color: var(--rony-fg);
font-size: 14px;
line-height: 1.5;
}
.rony-chat-widget-root[data-position="bottom-left"] { left: 20px; bottom: 20px; }
.rony-chat-widget-root[data-position="bottom-right"] { right: 20px; bottom: 20px; }
/* Dark mode auto */
@media (prefers-color-scheme: dark) {
.rony-chat-widget-root[data-theme="auto"] {
--rony-bg: #1f1f23;
--rony-bg-soft: #2a2a30;
--rony-fg: #f1f1f3;
--rony-fg-soft: #a1a1aa;
--rony-border: #3a3a42;
--rony-assistant-bubble: #2a2a30;
--rony-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
}
.rony-chat-widget-root[data-theme="dark"] {
--rony-bg: #1f1f23;
--rony-bg-soft: #2a2a30;
--rony-fg: #f1f1f3;
--rony-fg-soft: #a1a1aa;
--rony-border: #3a3a42;
--rony-assistant-bubble: #2a2a30;
--rony-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
/* Bubble button */
.rony-chat-widget-bubble {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--rony-accent);
color: var(--rony-accent-fg);
border: none;
cursor: pointer;
box-shadow: var(--rony-shadow);
display: flex;
align-items: center;
justify-content: center;
transition: transform 120ms ease;
}
.rony-chat-widget-bubble:hover { transform: scale(1.05); }
.rony-chat-widget-bubble svg { width: 26px; height: 26px; }
/* Panel */
.rony-chat-widget-panel {
position: absolute;
bottom: 72px;
right: 0;
width: 380px;
max-width: calc(100vw - 40px);
height: 560px;
max-height: calc(100vh - 100px);
background: var(--rony-bg);
border: 1px solid var(--rony-border);
border-radius: var(--rony-radius);
box-shadow: var(--rony-shadow);
display: none;
flex-direction: column;
overflow: hidden;
}
.rony-chat-widget-root[data-open="true"] .rony-chat-widget-panel { display: flex; }
.rony-chat-widget-header {
padding: 12px 16px;
border-bottom: 1px solid var(--rony-border);
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
}
.rony-chat-widget-status {
font-size: 11px;
color: var(--rony-fg-soft);
font-weight: 400;
}
/* Language toggle (EN | ES) */
.rony-chat-widget-lang {
display: inline-flex;
border: 1px solid var(--rony-border);
border-radius: 6px;
overflow: hidden;
margin: 0 4px;
}
.rony-chat-widget-lang button {
background: transparent;
border: none;
color: var(--rony-fg-soft);
font-size: 10.5px;
font-weight: 600;
padding: 2px 6px;
cursor: pointer;
min-width: 26px;
font-family: inherit;
letter-spacing: 0.3px;
}
.rony-chat-widget-lang button:hover { color: var(--rony-fg); }
.rony-chat-widget-lang button.is-active {
background: var(--rony-accent);
color: var(--rony-accent-fg);
}
.rony-chat-widget-lang button + button {
border-left: 1px solid var(--rony-border);
}
.rony-chat-widget-close {
background: none;
border: none;
color: var(--rony-fg-soft);
cursor: pointer;
font-size: 20px;
padding: 0 4px;
line-height: 1;
}
.rony-chat-widget-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.rony-chat-widget-msg {
max-width: 88%;
padding: 10px 12px;
border-radius: 12px;
word-wrap: break-word;
white-space: pre-wrap;
}
.rony-chat-widget-msg-user {
align-self: flex-end;
background: var(--rony-user-bubble);
color: var(--rony-user-fg);
white-space: pre-wrap;
}
.rony-chat-widget-msg-assistant {
align-self: flex-start;
background: var(--rony-assistant-bubble);
color: var(--rony-fg);
}
.rony-chat-widget-msg-error {
align-self: center;
background: #fee2e2;
color: #991b1b;
font-size: 12px;
}
/* Markdown inside assistant messages */
.rony-chat-widget-msg-assistant p { margin: 0 0 6px 0; }
.rony-chat-widget-msg-assistant p:last-child { margin-bottom: 0; }
.rony-chat-widget-msg-assistant code {
background: rgba(0, 0, 0, 0.06);
padding: 1px 5px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
}
.rony-chat-widget-msg-assistant pre {
background: rgba(0, 0, 0, 0.06);
padding: 8px 10px;
border-radius: 6px;
overflow-x: auto;
margin: 6px 0;
}
.rony-chat-widget-msg-assistant pre code { background: none; padding: 0; }
.rony-chat-widget-msg-assistant ul, .rony-chat-widget-msg-assistant ol { margin: 4px 0 4px 18px; padding: 0; }
.rony-chat-widget-msg-assistant a { color: var(--rony-accent); }
/* Sources chip row */
.rony-chat-widget-sources {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.rony-chat-widget-source {
font-size: 10.5px;
background: var(--rony-bg-soft);
color: var(--rony-fg-soft);
padding: 2px 7px;
border-radius: 999px;
border: 1px solid var(--rony-border);
}
/* Streaming caret */
.rony-chat-widget-caret {
display: inline-block;
width: 6px;
height: 14px;
background: var(--rony-fg-soft);
margin-left: 2px;
vertical-align: text-bottom;
animation: rony-caret 1s steps(2) infinite;
}
@keyframes rony-caret { 50% { opacity: 0; } }
/* Input row */
.rony-chat-widget-form {
display: flex;
border-top: 1px solid var(--rony-border);
padding: 8px;
gap: 6px;
}
.rony-chat-widget-input {
flex: 1;
border: 1px solid var(--rony-border);
background: var(--rony-bg);
color: var(--rony-fg);
border-radius: 8px;
padding: 8px 10px;
font-family: inherit;
font-size: 14px;
resize: none;
outline: none;
max-height: 100px;
}
.rony-chat-widget-input:focus { border-color: var(--rony-accent); }
.rony-chat-widget-send {
background: var(--rony-accent);
color: var(--rony-accent-fg);
border: none;
border-radius: 8px;
padding: 0 14px;
font-weight: 600;
cursor: pointer;
}
.rony-chat-widget-send:disabled { opacity: 0.5; cursor: not-allowed; }
/* Mobile: full screen */
@media (max-width: 480px) {
.rony-chat-widget-panel {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
bottom: 0;
right: 0;
}
}
Reference in a new issue Copy permalink