multipleof4/sune
1
0
Fork 0
mirror of https://github.com/multipleof4/sune.git synced 2026-01-13 16:17:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Action Commit

Browse Source
This commit is contained in:
github-actions
2025-08-14 04:36:44 +00:00
parent 3ecb2b957b
commit 44c4c3c499
1 changed files with 29 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/index.html
View File

@@ -18,33 +18,29 @@
<div class="flex flex-col h-dvh max-h-dvh">
<!-- Header -->
<header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
<div class="mx-auto w-full max-w-2xl px-4 py-3 flex items-center justify-between">
<!-- Use 3-col grid to center the assistant icon perfectly -->
<div class="mx-auto w-full max-w-2xl px-4 py-3 grid grid-cols-3 items-center">
<!-- New chat = icon only -->
<button id="newChatBtn" class="h-8 w-8 rounded-xl bg-gray-100 hover:bg-gray-200 active:scale-[.99] transition flex items-center justify-center" title="New chat">
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12M6 12h12"/>
</svg>
</button>
<div class="text-xs text-gray-400">&nbsp;</div>
<!-- API key badge -->
<button id="apiBadge" title="Set OpenRouter API key" class="h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a4 4 0 11-7.999.001A4 4 0 0115 7zm-.293 6.707L9 19.414V22h2.586l5.707-5.707a1 1 0 000-1.414l-1.586-1.586a1 1 0 00-1.414 0z"/>
</svg>
<span id="statusText" class="sr-only">offline</span>
</button>
</div>
</header><!-- Messages -->
<main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
<div id="messages" class="mx-auto w-full max-w-2xl px-4 py-4 sm:py-6 space-y-4">
<div class="flex gap-3">
<div data-assistant-avatar class="cursor-pointer shrink-0 h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center" title="Assistant settings">🤖</div>
<div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed">
<div class="font-semibold text-gray-800 mb-1">Hello!</div>
I’m wired to OpenRouter. Click the key badge to set an API key. Click any 🤖 avatar to tune model & sampling.
</div>
</div>
</button><!-- Centered assistant icon: opens settings dialog -->
<button id="settingsBtnTop" class="justify-self-center h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center hover:bg-gray-300 active:scale-[.99] transition" title="Assistant settings">🤖</button>
<!-- API key badge -->
<button id="apiBadge" title="Set OpenRouter API key" class="justify-self-end h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200">
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a4 4 0 11-7.999.001A4 4 0 0115 7zm-.293 6.707L9 19.414V22h2.586l5.707-5.707a1 1 0 000-1.414l-1.586-1.586a1 1 0 00-1.414 0z"/>
</svg>
<span id="statusText" class="sr-only">offline</span>
</button>
</div>
</header>
<!-- Messages -->
<main id="chat" class="flex-1 overflow-y-auto no-scrollbar">
<div id="messages" class="mx-auto w-full max-w-2xl px-4 py-4 sm:py-6 space-y-4"></div>
<div class="h-24"></div>
</main>
@@ -152,6 +148,7 @@
<button type="submit" class="px-3 py-2 rounded-xl bg-black text-white hover:bg-black/90">Save</button>
</div>
</form>
</div>
</div>
@@ -172,6 +169,7 @@
newChatBtn: document.getElementById('newChatBtn'),
apiBadge: document.getElementById('apiBadge'),
statusText: document.getElementById('statusText'),
settingsBtnTop: document.getElementById('settingsBtnTop'),
// settings modal
settingsModal: document.getElementById('settingsModal'),
@@ -304,20 +302,15 @@
return bubble;
}
function clearChat(intro = true) {
// Make chat start blank and keep Clear/New blank
function clearChat(intro = false) {
state.messages = [];
el.messages.innerHTML = '';
if (intro) {
const introRow = document.createElement('div');
introRow.className = 'flex gap-3';
introRow.innerHTML = `<div data-assistant-avatar class="cursor-pointer shrink-0 h-8 w-8 rounded-full bg-gray-200 text-gray-900 flex items-center justify-center" title="Assistant settings">🤖</div><div class="bg-gray-100 rounded-2xl px-4 py-3 text-[15px] leading-relaxed"><div class="font-semibold text-gray-800 mb-1">New chat</div>You're in a fresh conversation. Click 🤖 to configure.</div>`;
el.messages.appendChild(introRow);
}
}
function updateStatus() {
const online = !!store.apiKey;
el.apiBadge.className = 'h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition ' + (online
el.apiBadge.className = 'justify-self-end h-8 min-w-8 px-3 rounded-full border text-xs font-medium inline-flex items-center justify-center gap-1 transition ' + (online
? 'bg-black text-white border-black hover:bg-black/90'
: 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200');
el.statusText.textContent = online ? 'online' : 'offline';
@@ -545,6 +538,9 @@
if (target) openSettings();
});
// Top bar assistant icon opens settings
el.settingsBtnTop.addEventListener('click', openSettings);
// Auto-resize textarea
el.input.addEventListener('input', () => {
el.input.style.height = 'auto';
@@ -552,9 +548,9 @@
el.input.style.height = h + 'px';
});
// Clear / New
// Clear / New — keep chat blank (no intro bubble)
el.clearBtn.addEventListener('click', () => clearChat(false));
el.newChatBtn.addEventListener('click', () => clearChat(true));
el.newChatBtn.addEventListener('click', () => clearChat(false));
// API badge click
el.apiBadge.addEventListener('click', () => {
@@ -577,6 +573,8 @@
function init() {
initFromQuery();
updateStatus();
// Start with an empty chat (no welcome bubble)
clearChat(false);
}
init();