feat(chat): New NordaGPT icon and updated example questions

- Created nordagpt-icon.svg combining Norda compass + INPI circuit motif
- Navy blue background with green AI chip center
- Yellow north indicator (Norda brand color)
- Updated header icon from robot emoji to new SVG
- Updated empty state icon
- Changed example questions to be more relevant:
  - 'Szukam partnera do projektu budowlanego'
  - 'Kto w Izbie zajmuje się marketingiem?'
  - 'Poleć firmę z dobrymi opiniami Google'
  - 'Co nowego na forum?'

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-29 11:54:14 +01:00
parent 37b6aa33d8
commit bd78ba0688
2 changed files with 103 additions and 15 deletions

View File

@ -0,0 +1,88 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs>
<!-- Gradient for the compass rose -->
<linearGradient id="compassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#233e6d;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1a2d4f;stop-opacity:1" />
</linearGradient>
<!-- Glow effect for center -->
<radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.8" />
<stop offset="70%" style="stop-color:#22c55e;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0" />
</radialGradient>
<!-- Filter for soft glow -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background circle -->
<circle cx="50" cy="50" r="48" fill="url(#compassGradient)" stroke="#bfd4f0" stroke-width="1.5"/>
<!-- Compass rose - 8 directions as circuit traces -->
<!-- North (highlighted) -->
<path d="M50 8 L50 35" stroke="#fbbf24" stroke-width="3" stroke-linecap="round" filter="url(#glow)"/>
<circle cx="50" cy="8" r="3" fill="#fbbf24" filter="url(#glow)"/>
<!-- South -->
<path d="M50 65 L50 92" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
<circle cx="50" cy="92" r="2.5" fill="#22c55e"/>
<!-- East -->
<path d="M65 50 L92 50" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
<circle cx="92" cy="50" r="2.5" fill="#22c55e"/>
<!-- West -->
<path d="M35 50 L8 50" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
<circle cx="8" cy="50" r="2.5" fill="#22c55e"/>
<!-- NE -->
<path d="M61 39 L80 20" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
<circle cx="80" cy="20" r="2" fill="#22c55e" opacity="0.8"/>
<!-- NW -->
<path d="M39 39 L20 20" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
<circle cx="20" cy="20" r="2" fill="#22c55e" opacity="0.8"/>
<!-- SE -->
<path d="M61 61 L80 80" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
<circle cx="80" cy="80" r="2" fill="#22c55e" opacity="0.8"/>
<!-- SW -->
<path d="M39 61 L20 80" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>
<circle cx="20" cy="80" r="2" fill="#22c55e" opacity="0.8"/>
<!-- Center glow -->
<circle cx="50" cy="50" r="20" fill="url(#centerGlow)"/>
<!-- AI chip center -->
<rect x="38" y="38" width="24" height="24" rx="4" fill="#1a2d4f" stroke="#22c55e" stroke-width="1.5"/>
<!-- Chip pins (circuit connections) -->
<rect x="42" y="36" width="3" height="4" fill="#22c55e"/>
<rect x="48.5" y="36" width="3" height="4" fill="#22c55e"/>
<rect x="55" y="36" width="3" height="4" fill="#22c55e"/>
<rect x="42" y="60" width="3" height="4" fill="#22c55e"/>
<rect x="48.5" y="60" width="3" height="4" fill="#22c55e"/>
<rect x="55" y="60" width="3" height="4" fill="#22c55e"/>
<rect x="36" y="42" width="4" height="3" fill="#22c55e"/>
<rect x="36" y="48.5" width="4" height="3" fill="#22c55e"/>
<rect x="36" y="55" width="4" height="3" fill="#22c55e"/>
<rect x="60" y="42" width="4" height="3" fill="#22c55e"/>
<rect x="60" y="48.5" width="4" height="3" fill="#22c55e"/>
<rect x="60" y="55" width="4" height="3" fill="#22c55e"/>
<!-- AI text in center -->
<text x="50" y="54" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#22c55e" text-anchor="middle">AI</text>
<!-- North indicator star -->
<polygon points="50,3 51.5,6 50,5 48.5,6" fill="#fbbf24"/>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -1237,7 +1237,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<span style="font-size: 1.5rem;">🤖</span>
<img src="{{ url_for('static', filename='img/nordagpt-icon.svg') }}" alt="NordaGPT" style="width: 32px; height: 32px;">
<h1>NordaGPT</h1>
<!-- Model Selection Toggle -->
<div class="thinking-toggle" id="modelToggle">
@ -1474,22 +1474,22 @@
<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>
<img src="{{ url_for('static', filename='img/nordagpt-icon.svg') }}" alt="NordaGPT" style="width: 80px; height: 80px; margin-bottom: 1rem;">
<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 class="suggestion-chip" onclick="sendSuggestion('Szukam partnera do projektu budowlanego')">
Szukam partnera do projektu
</button>
<button class="suggestion-chip" onclick="sendSuggestion('Która firma ma najlepsze Google opinie?')">
Najlepsze Google opinie?
<button class="suggestion-chip" onclick="sendSuggestion('Kto w Izbie zajmuje się marketingiem?')">
Kto zajmuje się marketingiem?
</button>
<button class="suggestion-chip" onclick="sendSuggestion('Kiedy następne spotkanie Norda Biznes?')">
Kiedy następne spotkanie?
<button class="suggestion-chip" onclick="sendSuggestion('Poleć firmę z dobrymi opiniami Google')">
Poleć firmę z opiniami
</button>
<button class="suggestion-chip" onclick="sendSuggestion('Kto oferuje usługi IT?')">
Kto oferuje usługi IT?
<button class="suggestion-chip" onclick="sendSuggestion('Co nowego na forum?')">
Co nowego na forum?
</button>
</div>
</div>
@ -1796,14 +1796,14 @@ function startNewConversation() {
const messagesDiv = document.getElementById('chatMessages');
messagesDiv.innerHTML = `
<div class="empty-state" id="emptyState">
<div class="empty-state-icon">🤖</div>
<img src="{{ url_for('static', filename='img/nordagpt-icon.svg') }}" alt="NordaGPT" style="width: 80px; height: 80px; margin-bottom: 1rem;">
<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>
<button class="suggestion-chip" onclick="sendSuggestion('Szukam partnera do projektu budowlanego')">Szukam partnera do projektu</button>
<button class="suggestion-chip" onclick="sendSuggestion('Kto w Izbie zajmuje się marketingiem?')">Kto zajmuje się marketingiem?</button>
<button class="suggestion-chip" onclick="sendSuggestion('Poleć firmę z dobrymi opiniami Google')">Poleć firmę z opiniami</button>
<button class="suggestion-chip" onclick="sendSuggestion('Co nowego na forum?')">Co nowego na forum?</button>
</div>
</div>
<div class="message assistant" id="typingIndicator" style="display: none;">