Maciej Pienczyn
827168fb24
- Dodano style CSS dla forum-link (fiolet), news-link (zieleń), b2b-link (żółty) - formatMessage() obsługuje teraz linki wewnętrzne (/forum/, /news/, /b2b/) - Badge thinking pokazuje opis jakościowy (np. "dogłębna analiza z weryfikacją") Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1965 lines
62 KiB
HTML
Executable File
1965 lines
62 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
|
|
{% block title %}NordaGPT - Norda Biznes Hub{% endblock %}
|
|
|
|
{% block container_class %}chat-container-override{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Reset dla pełnoekranowego chatu jak ChatGPT/Claude */
|
|
html, body {
|
|
overflow: hidden !important; /* Blokada scrollowania strony */
|
|
height: 100% !important;
|
|
}
|
|
|
|
/* Ukrycie footera na stronie chatu */
|
|
footer {
|
|
display: none !important;
|
|
}
|
|
|
|
main {
|
|
padding: 0 !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 73px) !important; /* Wysokość minus navbar */
|
|
max-height: calc(100vh - 73px) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
main > .container.chat-container-override {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.chat-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
background: var(--background);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR - Historia konwersacji (jasna wersja)
|
|
============================================ */
|
|
.chat-sidebar {
|
|
width: 280px;
|
|
background: #f5f7fa;
|
|
color: #374151;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid #e5e7eb;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: var(--spacing-md);
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.new-chat-btn {
|
|
width: 100%;
|
|
padding: var(--spacing-md);
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.new-chat-btn:hover {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.new-chat-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.sidebar-title {
|
|
padding: var(--spacing-md);
|
|
font-size: var(--font-size-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.conversations-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 var(--spacing-sm);
|
|
}
|
|
|
|
.conversation-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
margin-bottom: 2px;
|
|
transition: var(--transition);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.conversation-item:hover {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.conversation-item.active {
|
|
background: #ffffff;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.conversation-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #9ca3af;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.conversation-title {
|
|
flex: 1;
|
|
font-size: var(--font-size-sm);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.conversation-delete {
|
|
opacity: 0;
|
|
background: none;
|
|
border: none;
|
|
color: #9ca3af;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: var(--radius-sm);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.conversation-item:hover .conversation-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.conversation-delete:hover {
|
|
color: #ef4444;
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.sidebar-empty {
|
|
padding: var(--spacing-lg);
|
|
text-align: center;
|
|
color: #6b7280;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.sidebar-loading {
|
|
padding: var(--spacing-lg);
|
|
text-align: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* ============================================
|
|
MAIN CHAT AREA - Styl NordaGPT
|
|
============================================ */
|
|
.chat-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
height: 100%; /* Wymuszenie pełnej wysokości */
|
|
max-height: 100%; /* Nie może przekroczyć rodzica */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
position: relative;
|
|
z-index: 50;
|
|
flex-shrink: 0; /* Header nie może się kurczyć */
|
|
}
|
|
|
|
.chat-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.chat-header h1 {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.chat-header-badge {
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.chat-messages {
|
|
flex: 1;
|
|
min-height: 0; /* Kluczowe dla poprawnego działania overflow w flexbox */
|
|
overflow-y: auto;
|
|
padding: var(--spacing-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
background: white;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
max-width: 85%;
|
|
animation: messageSlide 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes messageSlide {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.message.user {
|
|
align-self: flex-end;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.message-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: var(--font-size-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message.assistant .message-avatar {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
}
|
|
|
|
.message.user .message-avatar {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.message-content {
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--radius-lg);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.message.assistant .message-content {
|
|
background: #f3f4f6;
|
|
color: var(--text-primary);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.message.user .message-content {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
/* Thinking info badge - pokazuje tryb i czas odpowiedzi */
|
|
.thinking-info-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-top: var(--spacing-sm);
|
|
padding-top: var(--spacing-sm);
|
|
border-top: 1px solid #e5e7eb;
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.thinking-badge-level {
|
|
color: #7c3aed;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.thinking-badge-time {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.thinking-badge-desc {
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Klikalne linki jako kolorowe badge'y */
|
|
.message-content a {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
margin: 1px 2px;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.95em;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
/* 🏢 Linki do FIRM (nordabiznes.pl/company/) - pomarańczowy */
|
|
.message-content a.company-link {
|
|
background: #fff7ed;
|
|
color: #c2410c;
|
|
}
|
|
.message-content a.company-link:hover {
|
|
background: #ffedd5;
|
|
color: #9a3412;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(194, 65, 12, 0.2);
|
|
}
|
|
|
|
/* 👤 Linki do OSÓB (nordabiznes.pl/osoba/) - zielony */
|
|
.message-content a.person-link {
|
|
background: #ecfdf5;
|
|
color: #047857;
|
|
}
|
|
.message-content a.person-link:hover {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(4, 120, 87, 0.2);
|
|
}
|
|
|
|
/* 💬 Linki do FORUM - fioletowy */
|
|
.message-content a.forum-link {
|
|
background: #f5f3ff;
|
|
color: #7c3aed;
|
|
}
|
|
.message-content a.forum-link:hover {
|
|
background: #ede9fe;
|
|
color: #6d28d9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 📰 Linki do AKTUALNOŚCI - zielony */
|
|
.message-content a.news-link {
|
|
background: #ecfdf5;
|
|
color: #059669;
|
|
}
|
|
.message-content a.news-link:hover {
|
|
background: #d1fae5;
|
|
color: #047857;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 💼 Linki do B2B - żółty */
|
|
.message-content a.b2b-link {
|
|
background: #fefce8;
|
|
color: #ca8a04;
|
|
}
|
|
.message-content a.b2b-link:hover {
|
|
background: #fef9c3;
|
|
color: #a16207;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 🔗 Linki ZEWNĘTRZNE (www, social media, maps) - niebieski */
|
|
.message-content a.external-link {
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
}
|
|
.message-content a.external-link:hover {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2);
|
|
}
|
|
|
|
/* Linki w wiadomościach użytkownika - białe tło */
|
|
.message.user .message-content a {
|
|
background: rgba(255,255,255,0.25);
|
|
color: white;
|
|
}
|
|
|
|
.message.user .message-content a:hover {
|
|
background: rgba(255,255,255,0.4);
|
|
}
|
|
|
|
.message-content ul, .message-content ol {
|
|
margin: var(--spacing-sm) 0;
|
|
padding-left: var(--spacing-lg);
|
|
}
|
|
|
|
.message-content li {
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.message-content strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Typing indicator */
|
|
.typing-indicator {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: var(--spacing-md);
|
|
background: #f3f4f6;
|
|
border-radius: var(--radius-lg);
|
|
width: fit-content;
|
|
}
|
|
|
|
.typing-indicator.active {
|
|
display: flex;
|
|
}
|
|
|
|
.typing-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #7c3aed;
|
|
animation: typingBounce 1.4s infinite;
|
|
}
|
|
|
|
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes typingBounce {
|
|
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
|
|
30% { transform: translateY(-6px); opacity: 1; }
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
padding: var(--spacing-2xl);
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: var(--spacing-lg);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state h2 {
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.suggestions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
justify-content: center;
|
|
margin-top: var(--spacing-lg);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.suggestion-chip {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: white;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.suggestion-chip:hover {
|
|
border-color: #7c3aed;
|
|
color: #7c3aed;
|
|
background: #f5f3ff;
|
|
}
|
|
|
|
/* Input area */
|
|
.chat-input-area {
|
|
padding: var(--spacing-lg);
|
|
background: white;
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0; /* Input area nie może się kurczyć - zawsze widoczna na dole */
|
|
}
|
|
|
|
.chat-input-wrapper {
|
|
display: flex;
|
|
gap: var(--spacing-md);
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.chat-input {
|
|
flex: 1;
|
|
padding: var(--spacing-md);
|
|
border: 2px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
font-size: var(--font-size-base);
|
|
font-family: inherit;
|
|
resize: none;
|
|
min-height: 50px;
|
|
max-height: 150px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.chat-input:focus {
|
|
outline: none;
|
|
border-color: #7c3aed;
|
|
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
|
|
}
|
|
|
|
.send-btn {
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.send-btn:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.send-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.send-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.chat-sidebar {
|
|
display: none;
|
|
position: fixed;
|
|
top: 73px;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
width: 280px;
|
|
box-shadow: 4px 0 20px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.chat-sidebar.mobile-open {
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: flex !important;
|
|
}
|
|
|
|
.message {
|
|
max-width: 95%;
|
|
}
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
background: rgba(255,255,255,0.2);
|
|
border: none;
|
|
color: white;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
Thinking Mode Toggle
|
|
============================================ */
|
|
.thinking-toggle {
|
|
position: relative;
|
|
margin-left: var(--spacing-sm);
|
|
}
|
|
|
|
.thinking-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
background: rgba(255,255,255,0.2);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
border-radius: var(--radius);
|
|
color: white;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.thinking-btn:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.thinking-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.thinking-arrow {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.thinking-toggle.open .thinking-arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.thinking-dropdown {
|
|
display: none;
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
right: 0;
|
|
width: 280px;
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
animation: dropdownSlide 0.2s ease;
|
|
}
|
|
|
|
@keyframes dropdownSlide {
|
|
from { opacity: 0; transform: translateY(-8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.thinking-toggle.open .thinking-dropdown {
|
|
display: block;
|
|
}
|
|
|
|
.thinking-dropdown-header {
|
|
padding: var(--spacing-md);
|
|
background: #f5f3ff;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.thinking-dropdown-header strong {
|
|
display: block;
|
|
color: #5b21b6;
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.thinking-dropdown-header p {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
margin: 0;
|
|
}
|
|
|
|
.thinking-option {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.thinking-option:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.thinking-option:hover {
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.thinking-option.active {
|
|
background: #f5f3ff;
|
|
border-left: 3px solid #7c3aed;
|
|
}
|
|
|
|
.thinking-option-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.thinking-option-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.thinking-option-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.thinking-option-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: #7c3aed;
|
|
color: white;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.thinking-option-desc {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.thinking-label {
|
|
display: none;
|
|
}
|
|
|
|
.thinking-dropdown {
|
|
width: 260px;
|
|
right: -60px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Model Info Button & Modal
|
|
============================================ */
|
|
.model-info-btn {
|
|
background: rgba(255,255,255,0.2);
|
|
border: none;
|
|
color: white;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: var(--spacing-xs);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.model-info-btn:hover {
|
|
background: rgba(255,255,255,0.4);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.model-info-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.6);
|
|
z-index: 1000;
|
|
padding: var(--spacing-lg);
|
|
overflow-y: auto;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
.model-info-modal.active {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.model-info-content {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
padding: var(--spacing-xl);
|
|
margin-top: 60px;
|
|
position: relative;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.model-info-close {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-md);
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.model-info-close:hover {
|
|
background: #f3f4f6;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.model-info-content h2 {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-right: var(--spacing-xl);
|
|
}
|
|
|
|
.model-info-content h3 {
|
|
font-size: var(--font-size-md);
|
|
color: var(--text-primary);
|
|
margin: var(--spacing-lg) 0 var(--spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.model-current {
|
|
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
|
|
border: 1px solid #c4b5fd;
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.model-current h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.model-badge-large {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.model-name {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-radius: var(--radius);
|
|
font-weight: 600;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.model-provider {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.model-description {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.specs-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.specs-table td {
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.specs-table td:first-child {
|
|
color: var(--text-secondary);
|
|
width: 40%;
|
|
}
|
|
|
|
.specs-table td:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.spec-change {
|
|
display: inline-block;
|
|
font-size: var(--font-size-xs);
|
|
color: #16a34a;
|
|
background: #dcfce7;
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius);
|
|
margin-left: var(--spacing-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: var(--spacing-lg);
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 6px;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 2px;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.timeline-item:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: calc(-1 * var(--spacing-lg) + 2px);
|
|
top: 6px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #d1d5db;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.timeline-item.current::before {
|
|
background: #7c3aed;
|
|
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
|
|
}
|
|
|
|
.timeline-date {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-xs);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.timeline-content strong {
|
|
color: var(--text-primary);
|
|
display: block;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.timeline-content p {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
margin: 0 0 var(--spacing-sm);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.timeline-badge {
|
|
display: inline-block;
|
|
font-size: var(--font-size-xs);
|
|
padding: 2px var(--spacing-sm);
|
|
border-radius: var(--radius);
|
|
background: #f3f4f6;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.timeline-badge.upgrade {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: white;
|
|
}
|
|
|
|
.timeline-badge.feature {
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.timeline-badge.launch {
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
}
|
|
|
|
.model-benefits ul {
|
|
margin: 0;
|
|
padding-left: var(--spacing-lg);
|
|
}
|
|
|
|
.model-benefits li {
|
|
padding: var(--spacing-xs) 0;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.model-benefits li strong {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
Video Help Button & Modal
|
|
============================================ */
|
|
.video-help-btn {
|
|
background: rgba(255,255,255,0.3) !important;
|
|
}
|
|
|
|
.video-help-btn:hover {
|
|
background: rgba(255,255,255,0.5) !important;
|
|
}
|
|
|
|
.video-help-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 1001;
|
|
padding: var(--spacing-lg);
|
|
overflow-y: auto;
|
|
animation: fadeIn 0.2s ease;
|
|
}
|
|
|
|
.video-help-modal.active {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.video-help-content {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
max-width: 800px;
|
|
width: 100%;
|
|
padding: var(--spacing-xl);
|
|
margin-top: 40px;
|
|
position: relative;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
.video-help-close {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-md);
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.video-help-close:hover {
|
|
background: #f3f4f6;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.video-help-content h2 {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--text-primary);
|
|
margin: 0 0 var(--spacing-xs);
|
|
padding-right: var(--spacing-xl);
|
|
}
|
|
|
|
.video-help-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
margin: 0 0 var(--spacing-lg);
|
|
}
|
|
|
|
.video-container {
|
|
position: relative;
|
|
background: #000;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.video-container video {
|
|
width: 100%;
|
|
display: block;
|
|
max-height: 450px;
|
|
}
|
|
|
|
.video-help-tips {
|
|
background: #f5f3ff;
|
|
border: 1px solid #c4b5fd;
|
|
border-radius: var(--radius);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.video-help-tips h3 {
|
|
font-size: var(--font-size-md);
|
|
color: var(--text-primary);
|
|
margin: 0 0 var(--spacing-md);
|
|
}
|
|
|
|
.video-help-tips ul {
|
|
margin: 0;
|
|
padding-left: var(--spacing-lg);
|
|
}
|
|
|
|
.video-help-tips li {
|
|
padding: var(--spacing-xs) 0;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.video-help-tips li strong {
|
|
color: #5b21b6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.video-help-content {
|
|
margin-top: 20px;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.video-container video {
|
|
max-height: 280px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chat-layout">
|
|
<!-- Sidebar z historią konwersacji -->
|
|
<aside class="chat-sidebar" id="chatSidebar">
|
|
<div class="sidebar-header">
|
|
<button class="new-chat-btn" onclick="startNewConversation()">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Nowa rozmowa
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sidebar-title">Historia rozmów</div>
|
|
|
|
<div class="conversations-list" id="conversationsList">
|
|
<div class="sidebar-loading">Ładowanie...</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Główny obszar chatu -->
|
|
<main class="chat-main">
|
|
<header class="chat-header">
|
|
<div class="chat-header-left">
|
|
<button class="mobile-menu-btn" onclick="toggleSidebar()">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
<span style="font-size: 1.5rem;">🤖</span>
|
|
<h1>NordaGPT</h1>
|
|
<span class="chat-header-badge">Gemini 3</span>
|
|
<!-- Thinking Mode Toggle -->
|
|
<div class="thinking-toggle" id="thinkingToggle">
|
|
<button class="thinking-btn" onclick="toggleThinkingDropdown()" title="Tryb rozumowania AI">
|
|
<span class="thinking-icon">🧠</span>
|
|
<span class="thinking-label" id="thinkingLabel">Wysoki</span>
|
|
<svg class="thinking-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="12" height="12">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div class="thinking-dropdown" id="thinkingDropdown">
|
|
<div class="thinking-dropdown-header">
|
|
<strong>Tryb rozumowania AI</strong>
|
|
<p>Określa głębokość analizy przed odpowiedzią</p>
|
|
</div>
|
|
<div class="thinking-option" data-level="minimal" onclick="setThinkingLevel('minimal')">
|
|
<div class="thinking-option-header">
|
|
<span class="thinking-option-icon">⚡</span>
|
|
<span class="thinking-option-name">Błyskawiczny</span>
|
|
</div>
|
|
<p class="thinking-option-desc">Najszybsze odpowiedzi. Dla prostych pytań typu "kto?", "gdzie?".</p>
|
|
</div>
|
|
<div class="thinking-option" data-level="low" onclick="setThinkingLevel('low')">
|
|
<div class="thinking-option-header">
|
|
<span class="thinking-option-icon">🚀</span>
|
|
<span class="thinking-option-name">Szybki</span>
|
|
</div>
|
|
<p class="thinking-option-desc">Zrównoważony. Dobre dla większości pytań o firmy i usługi.</p>
|
|
</div>
|
|
<div class="thinking-option active" data-level="high" onclick="setThinkingLevel('high')">
|
|
<div class="thinking-option-header">
|
|
<span class="thinking-option-icon">🧠</span>
|
|
<span class="thinking-option-name">Głęboki</span>
|
|
<span class="thinking-option-badge">Domyślny</span>
|
|
</div>
|
|
<p class="thinking-option-desc">Maksymalna analiza. Dla złożonych pytań, rekomendacji, strategii.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="model-info-btn" onclick="openModelInfoModal()" title="Informacje o modelu AI">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="model-info-btn video-help-btn" onclick="openVideoHelpModal()" title="Jak korzystać z NordaGPT? (Wideo)">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Modal z informacjami o modelu AI i historią rozwoju -->
|
|
<div class="model-info-modal" id="modelInfoModal">
|
|
<div class="model-info-content">
|
|
<button class="model-info-close" onclick="closeModelInfoModal()">×</button>
|
|
|
|
<h2>🤖 NordaGPT - Informacje techniczne</h2>
|
|
|
|
<div class="model-current">
|
|
<h3>Aktualny model AI</h3>
|
|
<div class="model-badge-large">
|
|
<span class="model-name">Gemini 3 Flash</span>
|
|
<span class="model-provider">Google AI (Preview)</span>
|
|
</div>
|
|
<p class="model-description">
|
|
Najnowsza generacja modeli Google z zaawansowanym rozumowaniem (thinking mode).
|
|
7x lepsze reasoning, 78% na SWE-bench (kodowanie), 90% na GPQA Diamond (nauka).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="model-specs">
|
|
<h3>📊 Specyfikacja techniczna</h3>
|
|
<table class="specs-table">
|
|
<tr>
|
|
<td>Kontekst:</td>
|
|
<td><strong>1 000 000 tokenów</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Max. odpowiedź:</td>
|
|
<td><strong>65 536 tokenów</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Reasoning:</td>
|
|
<td><strong>7x lepszy</strong> <span class="spec-change">↑ vs 2.5</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Thinking mode:</td>
|
|
<td><strong>Zaawansowany (configurable)</strong> <span class="spec-change">↑ nowy</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kodowanie (SWE-bench):</td>
|
|
<td><strong>78%</strong> <span class="spec-change">↑ najlepszy w klasie</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nauka (GPQA Diamond):</td>
|
|
<td><strong>90.4%</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tier:</td>
|
|
<td><strong>Tier 1 (płatny)</strong> <span class="spec-change">↑ był Free</span></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="model-history">
|
|
<h3>📜 Historia rozwoju NordaGPT</h3>
|
|
<div class="timeline">
|
|
<div class="timeline-item current">
|
|
<div class="timeline-date">29.01.2026</div>
|
|
<div class="timeline-content">
|
|
<strong>Gemini 3 Flash (Preview)</strong>
|
|
<p>Najnowsza generacja AI od Google. 7x lepsze rozumowanie, zaawansowany thinking mode, 78% na benchmarku kodowania.</p>
|
|
<span class="timeline-badge upgrade">Aktualna wersja</span>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">14.01.2026</div>
|
|
<div class="timeline-content">
|
|
<strong>Gemini 2.5 Flash-Lite</strong>
|
|
<p>8x dłuższe odpowiedzi, pełny thinking mode, 4x większy limit dzienny.</p>
|
|
<span class="timeline-badge">Poprzednia wersja</span>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">13.01.2026</div>
|
|
<div class="timeline-content">
|
|
<strong>Historia konwersacji</strong>
|
|
<p>Dodano sidebar z historią rozmów - możliwość powrotu do wcześniejszych konwersacji.</p>
|
|
<span class="timeline-badge feature">Nowa funkcja</span>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">Grudzień 2025</div>
|
|
<div class="timeline-content">
|
|
<strong>Gemini 2.0 Flash</strong>
|
|
<p>Pierwszy model AI w NordaGPT. Kontekst 1M tokenów.</p>
|
|
<span class="timeline-badge">Poprzednia wersja</span>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">Listopad 2025</div>
|
|
<div class="timeline-content">
|
|
<strong>Uruchomienie NordaGPT</strong>
|
|
<p>Premiera asystenta AI dla członków Norda Biznes. Integracja z bazą {{ COMPANY_COUNT }} firm.</p>
|
|
<span class="timeline-badge launch">Premiera</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-benefits">
|
|
<h3>✨ Co zyskaliśmy przy ostatniej aktualizacji?</h3>
|
|
<ul>
|
|
<li><strong>7x lepsze rozumowanie</strong> — zaawansowany reasoning dla złożonych pytań biznesowych</li>
|
|
<li><strong>Thinking mode</strong> — AI "myśli" przed odpowiedzią (lepsza jakość)</li>
|
|
<li><strong>Najnowsza generacja</strong> — Gemini 3 to flagowy model Google z 2025/2026</li>
|
|
<li><strong>78% na SWE-bench</strong> — najlepszy w klasie w zadaniach programistycznych</li>
|
|
<li><strong>Lepsze odpowiedzi strategiczne</strong> — analiza biznesowa, rekomendacje, planowanie</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal z wideo pomocowym -->
|
|
<div class="video-help-modal" id="videoHelpModal">
|
|
<div class="video-help-content">
|
|
<button class="video-help-close" onclick="closeVideoHelpModal()">×</button>
|
|
<h2>🎬 Jak korzystać z NordaGPT?</h2>
|
|
<p class="video-help-subtitle">Krótki przewodnik (40 sekund)</p>
|
|
|
|
<div class="video-container">
|
|
<video id="helpVideo" controls poster="{{ url_for('static', filename='videos/nordagpt-demo-poster.jpg') }}">
|
|
<source src="{{ url_for('static', filename='videos/nordagpt-demo.mp4') }}" type="video/mp4">
|
|
Twoja przeglądarka nie obsługuje wideo HTML5.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-help-tips">
|
|
<h3>💡 Szybkie wskazówki</h3>
|
|
<ul>
|
|
<li><strong>Znajdź firmę:</strong> "Kto oferuje usługi IT?"</li>
|
|
<li><strong>Sprawdź prezesa:</strong> "Kto jest prezesem PIXLAB?"</li>
|
|
<li><strong>Wydarzenia:</strong> "Kiedy następne spotkanie Norda?"</li>
|
|
<li><strong>Rekomendacje:</strong> "Poleć drukarnie z dobrymi opiniami"</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-messages" id="chatMessages">
|
|
<!-- Empty state - pokazywany gdy brak wiadomości -->
|
|
<div class="empty-state" id="emptyState">
|
|
<div class="empty-state-icon">🤖</div>
|
|
<h2>NordaGPT - Asystent AI Norda Biznes</h2>
|
|
<p>Mogę pomóc Ci znaleźć firmy, usługi, sprawdzić kalendarz wydarzeń, rekomendacje i wiele więcej.</p>
|
|
|
|
<div class="suggestions">
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kto jest prezesem PIXLAB?')">
|
|
Kto jest prezesem PIXLAB?
|
|
</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Która firma ma najlepsze Google opinie?')">
|
|
Najlepsze Google opinie?
|
|
</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kiedy następne spotkanie Norda Biznes?')">
|
|
Kiedy następne spotkanie?
|
|
</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kto oferuje usługi IT?')">
|
|
Kto oferuje usługi IT?
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typing indicator -->
|
|
<div class="message assistant" id="typingIndicator" style="display: none;">
|
|
<div class="message-avatar">AI</div>
|
|
<div class="typing-indicator active">
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-input-area">
|
|
<div class="chat-input-wrapper">
|
|
<textarea
|
|
id="messageInput"
|
|
class="chat-input"
|
|
placeholder="Wpisz swoją wiadomość..."
|
|
rows="1"
|
|
onkeypress="if(event.key==='Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
|
|
></textarea>
|
|
<button class="send-btn" id="sendBtn" onclick="sendMessage()">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
|
</svg>
|
|
Wyślij
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
// NordaGPT Chat - State
|
|
let currentConversationId = null;
|
|
let conversations = [];
|
|
let currentThinkingLevel = 'high'; // Default thinking level
|
|
|
|
// ============================================
|
|
// Thinking Mode Toggle Functions
|
|
// ============================================
|
|
const THINKING_LABELS = {
|
|
'minimal': 'Błyskawiczny',
|
|
'low': 'Szybki',
|
|
'high': 'Głęboki'
|
|
};
|
|
|
|
function toggleThinkingDropdown() {
|
|
const toggle = document.getElementById('thinkingToggle');
|
|
toggle.classList.toggle('open');
|
|
}
|
|
|
|
function setThinkingLevel(level) {
|
|
currentThinkingLevel = level;
|
|
|
|
// Update UI
|
|
document.getElementById('thinkingLabel').textContent = THINKING_LABELS[level] || level;
|
|
|
|
// Update active state
|
|
document.querySelectorAll('.thinking-option').forEach(opt => {
|
|
opt.classList.toggle('active', opt.dataset.level === level);
|
|
});
|
|
|
|
// Close dropdown
|
|
document.getElementById('thinkingToggle').classList.remove('open');
|
|
|
|
// Save preference to server
|
|
saveThinkingPreference(level);
|
|
|
|
console.log('Thinking level set to:', level);
|
|
}
|
|
|
|
async function saveThinkingPreference(level) {
|
|
try {
|
|
await fetch('/api/chat/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ thinking_level: level })
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to save thinking preference:', error);
|
|
}
|
|
}
|
|
|
|
// Close thinking dropdown when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
const toggle = document.getElementById('thinkingToggle');
|
|
if (toggle && !toggle.contains(e.target)) {
|
|
toggle.classList.remove('open');
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// Model Info Modal Functions
|
|
// ============================================
|
|
function openModelInfoModal() {
|
|
document.getElementById('modelInfoModal').classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeModelInfoModal() {
|
|
document.getElementById('modelInfoModal').classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close modal on backdrop click
|
|
document.addEventListener('click', function(e) {
|
|
const modal = document.getElementById('modelInfoModal');
|
|
if (e.target === modal) {
|
|
closeModelInfoModal();
|
|
}
|
|
});
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeModelInfoModal();
|
|
closeVideoHelpModal();
|
|
}
|
|
});
|
|
|
|
// ============================================
|
|
// Video Help Modal Functions
|
|
// ============================================
|
|
function openVideoHelpModal() {
|
|
document.getElementById('videoHelpModal').classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
// Auto-play video when modal opens
|
|
const video = document.getElementById('helpVideo');
|
|
if (video) {
|
|
video.currentTime = 0;
|
|
// Don't autoplay - let user control
|
|
}
|
|
}
|
|
|
|
function closeVideoHelpModal() {
|
|
document.getElementById('videoHelpModal').classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
// Pause video when modal closes
|
|
const video = document.getElementById('helpVideo');
|
|
if (video) {
|
|
video.pause();
|
|
}
|
|
}
|
|
|
|
// Close video modal on backdrop click
|
|
document.addEventListener('click', function(e) {
|
|
const videoModal = document.getElementById('videoHelpModal');
|
|
if (e.target === videoModal) {
|
|
closeVideoHelpModal();
|
|
}
|
|
});
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadConversations();
|
|
autoResizeTextarea();
|
|
loadThinkingSettings();
|
|
});
|
|
|
|
// Load thinking settings from server
|
|
async function loadThinkingSettings() {
|
|
try {
|
|
const response = await fetch('/api/chat/settings');
|
|
const data = await response.json();
|
|
if (data.success && data.thinking_level) {
|
|
currentThinkingLevel = data.thinking_level;
|
|
document.getElementById('thinkingLabel').textContent = THINKING_LABELS[data.thinking_level] || data.thinking_level;
|
|
document.querySelectorAll('.thinking-option').forEach(opt => {
|
|
opt.classList.toggle('active', opt.dataset.level === data.thinking_level);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.log('Using default thinking level:', currentThinkingLevel);
|
|
}
|
|
}
|
|
|
|
// Load conversations list
|
|
async function loadConversations() {
|
|
try {
|
|
const response = await fetch('/api/chat/conversations');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
conversations = data.conversations;
|
|
renderConversationsList();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading conversations:', error);
|
|
document.getElementById('conversationsList').innerHTML =
|
|
'<div class="sidebar-empty">Nie udało się załadować historii</div>';
|
|
}
|
|
}
|
|
|
|
// Render conversations in sidebar
|
|
function renderConversationsList() {
|
|
const list = document.getElementById('conversationsList');
|
|
|
|
if (conversations.length === 0) {
|
|
list.innerHTML = '<div class="sidebar-empty">Brak poprzednich rozmów.<br>Rozpocznij nową!</div>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = conversations.map(conv => `
|
|
<div class="conversation-item ${conv.id === currentConversationId ? 'active' : ''}"
|
|
onclick="loadConversation(${conv.id})"
|
|
data-id="${conv.id}">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
|
</svg>
|
|
<span class="conversation-title">${escapeHtml(conv.title)}</span>
|
|
<button class="conversation-delete" onclick="event.stopPropagation(); deleteConversation(${conv.id})" title="Usuń">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="14" height="14">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Load a specific conversation
|
|
async function loadConversation(conversationId) {
|
|
currentConversationId = conversationId;
|
|
|
|
// Update sidebar selection
|
|
document.querySelectorAll('.conversation-item').forEach(item => {
|
|
item.classList.toggle('active', parseInt(item.dataset.id) === conversationId);
|
|
});
|
|
|
|
// Hide empty state
|
|
const emptyState = document.getElementById('emptyState');
|
|
if (emptyState) emptyState.style.display = 'none';
|
|
|
|
// Clear messages and show loading
|
|
const messagesDiv = document.getElementById('chatMessages');
|
|
messagesDiv.innerHTML = '<div class="message assistant"><div class="message-avatar">AI</div><div class="message-content">Ładowanie historii...</div></div>';
|
|
|
|
try {
|
|
const response = await fetch(`/api/chat/${conversationId}/history`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
messagesDiv.innerHTML = '';
|
|
data.messages.forEach(msg => {
|
|
addMessage(msg.role, msg.content, false);
|
|
});
|
|
// Re-add typing indicator at the end
|
|
messagesDiv.innerHTML += `
|
|
<div class="message assistant" id="typingIndicator" style="display: none;">
|
|
<div class="message-avatar">AI</div>
|
|
<div class="typing-indicator active">
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
scrollToBottom();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading conversation:', error);
|
|
messagesDiv.innerHTML = '<div class="message assistant"><div class="message-avatar">AI</div><div class="message-content">Nie udało się załadować rozmowy.</div></div>';
|
|
}
|
|
|
|
// Close mobile sidebar
|
|
document.getElementById('chatSidebar').classList.remove('mobile-open');
|
|
}
|
|
|
|
// Start new conversation
|
|
function startNewConversation() {
|
|
currentConversationId = null;
|
|
|
|
// Clear active state in sidebar
|
|
document.querySelectorAll('.conversation-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
|
|
// Show empty state
|
|
const messagesDiv = document.getElementById('chatMessages');
|
|
messagesDiv.innerHTML = `
|
|
<div class="empty-state" id="emptyState">
|
|
<div class="empty-state-icon">🤖</div>
|
|
<h2>NordaGPT - Asystent AI Norda Biznes</h2>
|
|
<p>Mogę pomóc Ci znaleźć firmy, usługi, sprawdzić kalendarz wydarzeń, rekomendacje i wiele więcej.</p>
|
|
<div class="suggestions">
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kto jest prezesem PIXLAB?')">Kto jest prezesem PIXLAB?</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Która firma ma najlepsze Google opinie?')">Najlepsze Google opinie?</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kiedy następne spotkanie Norda Biznes?')">Kiedy następne spotkanie?</button>
|
|
<button class="suggestion-chip" onclick="sendSuggestion('Kto oferuje usługi IT?')">Kto oferuje usługi IT?</button>
|
|
</div>
|
|
</div>
|
|
<div class="message assistant" id="typingIndicator" style="display: none;">
|
|
<div class="message-avatar">AI</div>
|
|
<div class="typing-indicator active">
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
<div class="typing-dot"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('messageInput').focus();
|
|
|
|
// Close mobile sidebar
|
|
document.getElementById('chatSidebar').classList.remove('mobile-open');
|
|
}
|
|
|
|
// Delete conversation
|
|
async function deleteConversation(conversationId) {
|
|
if (!confirm('Czy na pewno chcesz usunąć tę rozmowę?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/chat/${conversationId}/delete`, {
|
|
method: 'DELETE'
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// If deleted current conversation, start new
|
|
if (currentConversationId === conversationId) {
|
|
startNewConversation();
|
|
}
|
|
// Reload conversations list
|
|
loadConversations();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting conversation:', error);
|
|
alert('Nie udało się usunąć rozmowy');
|
|
}
|
|
}
|
|
|
|
// Send message
|
|
async function sendMessage() {
|
|
const input = document.getElementById('messageInput');
|
|
const sendBtn = document.getElementById('sendBtn');
|
|
const message = input.value.trim();
|
|
|
|
if (!message) return;
|
|
|
|
// Disable input
|
|
input.value = '';
|
|
input.disabled = true;
|
|
sendBtn.disabled = true;
|
|
|
|
// Hide empty state
|
|
const emptyState = document.getElementById('emptyState');
|
|
if (emptyState) emptyState.style.display = 'none';
|
|
|
|
// Add user message
|
|
addMessage('user', message);
|
|
|
|
// Show typing indicator
|
|
document.getElementById('typingIndicator').style.display = 'flex';
|
|
scrollToBottom();
|
|
|
|
try {
|
|
// Start new conversation if needed
|
|
if (!currentConversationId) {
|
|
const startResponse = await fetch('/api/chat/start', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title: message.substring(0, 50) + (message.length > 50 ? '...' : '')
|
|
})
|
|
});
|
|
const startData = await startResponse.json();
|
|
if (startData.success) {
|
|
currentConversationId = startData.conversation_id;
|
|
} else {
|
|
throw new Error(startData.error || 'Failed to start conversation');
|
|
}
|
|
}
|
|
|
|
// Send message with thinking level
|
|
const response = await fetch(`/api/chat/${currentConversationId}/message`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
message: message,
|
|
thinking_level: currentThinkingLevel
|
|
})
|
|
});
|
|
const data = await response.json();
|
|
|
|
// Hide typing indicator
|
|
document.getElementById('typingIndicator').style.display = 'none';
|
|
|
|
if (data.success) {
|
|
addMessage('assistant', data.message, true, data.tech_info);
|
|
// Reload conversations to update list
|
|
loadConversations();
|
|
} else {
|
|
addMessage('assistant', 'Przepraszam, wystąpił błąd: ' + (data.error || 'Nieznany błąd'));
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error sending message:', error);
|
|
document.getElementById('typingIndicator').style.display = 'none';
|
|
addMessage('assistant', 'Przepraszam, nie mogę teraz odpowiedzieć. Spróbuj ponownie później.');
|
|
}
|
|
|
|
// Re-enable input
|
|
input.disabled = false;
|
|
sendBtn.disabled = false;
|
|
input.focus();
|
|
}
|
|
|
|
// Send suggestion
|
|
function sendSuggestion(text) {
|
|
document.getElementById('messageInput').value = text;
|
|
sendMessage();
|
|
}
|
|
|
|
// Add message to chat
|
|
function addMessage(role, content, animate = true, techInfo = null) {
|
|
const messagesDiv = document.getElementById('chatMessages');
|
|
const typingIndicator = document.getElementById('typingIndicator');
|
|
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = 'message ' + role;
|
|
if (!animate) messageDiv.style.animation = 'none';
|
|
|
|
const avatar = document.createElement('div');
|
|
avatar.className = 'message-avatar';
|
|
avatar.textContent = role === 'assistant' ? 'AI' : '{{ current_user.name[:1].upper() if current_user else "U" }}';
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'message-content';
|
|
contentDiv.innerHTML = formatMessage(content);
|
|
|
|
// Add thinking info badge for AI responses
|
|
if (role === 'assistant' && techInfo) {
|
|
const thinkingBadge = document.createElement('div');
|
|
thinkingBadge.className = 'thinking-info-badge';
|
|
|
|
const thinkingLevel = techInfo.thinking_level || 'high';
|
|
const latencyMs = techInfo.latency_ms || 0;
|
|
const latencySec = (latencyMs / 1000).toFixed(1);
|
|
|
|
// Labels with quality descriptions to show value of deeper thinking
|
|
const levelLabels = {
|
|
'minimal': '⚡ Błyskawiczny',
|
|
'low': '🚀 Szybki',
|
|
'medium': '⚖️ Zbalansowany',
|
|
'high': '🧠 Głęboka analiza'
|
|
};
|
|
const levelDescriptions = {
|
|
'minimal': 'szybka odpowiedź',
|
|
'low': 'zwięzła analiza',
|
|
'medium': 'przemyślana odpowiedź',
|
|
'high': 'dogłębna analiza z weryfikacją'
|
|
};
|
|
const levelLabel = levelLabels[thinkingLevel] || thinkingLevel;
|
|
const levelDesc = levelDescriptions[thinkingLevel] || '';
|
|
|
|
thinkingBadge.innerHTML = `<span class="thinking-badge-level">${levelLabel}</span> · <span class="thinking-badge-desc">${levelDesc}</span> · <span class="thinking-badge-time">${latencySec}s</span>`;
|
|
contentDiv.appendChild(thinkingBadge);
|
|
}
|
|
|
|
messageDiv.appendChild(avatar);
|
|
messageDiv.appendChild(contentDiv);
|
|
|
|
// Insert before typing indicator
|
|
if (typingIndicator) {
|
|
messagesDiv.insertBefore(messageDiv, typingIndicator);
|
|
} else {
|
|
messagesDiv.appendChild(messageDiv);
|
|
}
|
|
|
|
scrollToBottom();
|
|
}
|
|
|
|
// Format message content (links, lists, etc.)
|
|
function formatMessage(text) {
|
|
if (!text) return '';
|
|
|
|
// Escape HTML first
|
|
text = escapeHtml(text);
|
|
|
|
// Convert markdown links [text](url) to <a> tags with appropriate class
|
|
// Links: company (orange), person (green), forum (purple), news (green), b2b (yellow), external (blue)
|
|
|
|
// First: Handle internal links starting with /
|
|
text = text.replace(/\[([^\]]+)\]\((\/[^)]+)\)/g, function(match, linkText, url) {
|
|
let linkClass = 'external-link';
|
|
if (url.startsWith('/company/')) {
|
|
linkClass = 'company-link';
|
|
} else if (url.startsWith('/forum/')) {
|
|
linkClass = 'forum-link';
|
|
} else if (url.startsWith('/news/') || url.startsWith('/aktualnosci/')) {
|
|
linkClass = 'news-link';
|
|
} else if (url.startsWith('/b2b/') || url.startsWith('/ogloszenia/')) {
|
|
linkClass = 'b2b-link';
|
|
} else if (url.startsWith('/osoba/')) {
|
|
linkClass = 'person-link';
|
|
}
|
|
return '<a href="' + url + '" class="' + linkClass + '">' + linkText + '</a>';
|
|
});
|
|
|
|
// Then: Handle full URLs (https://)
|
|
text = text.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, function(match, linkText, url) {
|
|
let linkClass = 'external-link';
|
|
if (url.includes('nordabiznes.pl/company/')) {
|
|
linkClass = 'company-link';
|
|
} else if (url.includes('nordabiznes.pl/osoba/')) {
|
|
linkClass = 'person-link';
|
|
} else if (url.includes('nordabiznes.pl/forum/')) {
|
|
linkClass = 'forum-link';
|
|
} else if (url.includes('nordabiznes.pl/news/') || url.includes('nordabiznes.pl/aktualnosci/')) {
|
|
linkClass = 'news-link';
|
|
} else if (url.includes('nordabiznes.pl/b2b/') || url.includes('nordabiznes.pl/ogloszenia/')) {
|
|
linkClass = 'b2b-link';
|
|
}
|
|
return '<a href="' + url + '" target="_blank" rel="noopener" class="' + linkClass + '">' + linkText + '</a>';
|
|
});
|
|
|
|
// Convert raw URLs to links (only those not already in <a> tags)
|
|
text = text.replace(/(?<!href="|">)(https?:\/\/[^\s<]+)(?![^<]*<\/a>)/g, function(match, url) {
|
|
let linkClass = 'external-link';
|
|
if (url.includes('nordabiznes.pl/company/')) {
|
|
linkClass = 'company-link';
|
|
} else if (url.includes('nordabiznes.pl/osoba/')) {
|
|
linkClass = 'person-link';
|
|
}
|
|
return '<a href="' + url + '" target="_blank" rel="noopener" class="' + linkClass + '">' + url + '</a>';
|
|
});
|
|
|
|
// Convert **bold** to <strong>
|
|
text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
|
|
// Convert newlines to <br>
|
|
text = text.replace(/\n/g, '<br>');
|
|
|
|
return text;
|
|
}
|
|
|
|
// Escape HTML
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Scroll to bottom
|
|
function scrollToBottom() {
|
|
const messagesDiv = document.getElementById('chatMessages');
|
|
// Prosty i niezawodny scroll do dołu kontenera wiadomości
|
|
requestAnimationFrame(() => {
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
});
|
|
}
|
|
|
|
// Auto-resize textarea
|
|
function autoResizeTextarea() {
|
|
const textarea = document.getElementById('messageInput');
|
|
textarea.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.min(this.scrollHeight, 150) + 'px';
|
|
});
|
|
}
|
|
|
|
// Toggle mobile sidebar
|
|
function toggleSidebar() {
|
|
document.getElementById('chatSidebar').classList.toggle('mobile-open');
|
|
}
|
|
{% endblock %}
|