Update index.html

index.html

@@ -258,9 +258,9 @@ tailwind.config = {
       <div class="relative">
         <select id="model-select" class="w-full bg-ash border border-mist rounded-md px-3 py-2 pr-7 text-xs font-mono text-cream focus:border-amber transition-colors cursor-pointer" onchange="saveSettings()">
 <optgroup label='Openrouter'>
+	<option value='openrouter/free'>Free Models Router </option>
 	<option value='openrouter/hunter-alpha'>Hunter Alpha </option>
 	<option value='openrouter/healer-alpha'>Healer Alpha </option>
-	<option value='openrouter/free'>Free Models Router </option>
 </optgroup>
 <optgroup label='Nvidia'>
 	<option value='nvidia/nemotron-3-super-120b-a12b:free'>NVIDIA: Nemotron 3 Super (free) </option>
@@ -577,26 +577,25 @@ let chats = {}; // { id: { id, title, messages: [], createdAt } }
 
 // ── Init ───────────────────────────────────────────────────────────────────
 function init() {
-  if (localStorage.getItem('nexus_privacy_seen')) dismissPrivacyNotice();
+  if (localStorage.getItem('flexchat_privacy_seen')) dismissPrivacyNotice();
 
-  if (localStorage.getItem('nexus_theme') === 'light') toggleTheme(); // ← add this
+  if (localStorage.getItem('flexchat_theme') === 'light') toggleTheme(); // ← add this
 
   loadSettings();
   loadChats();
   updateModelBadge();
-  newChat();
 }
 
 function dismissPrivacyNotice() {
   document.getElementById('privacy-modal').remove();
-  localStorage.setItem('nexus_privacy_seen', '1');
+  localStorage.setItem('flexchat_privacy_seen', '1');
 }
   
 function toggleTheme() {
   const isLight = document.body.classList.toggle('light');
   document.getElementById('theme-icon-dark').classList.toggle('hidden', isLight);
   document.getElementById('theme-icon-light').classList.toggle('hidden', !isLight);
-  localStorage.setItem('nexus_theme', isLight ? 'light' : 'dark');
+  localStorage.setItem('flexchat_theme', isLight ? 'light' : 'dark');
   document.getElementById('hljs-theme').href = isLight
     ? 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css'
     : 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css';
@@ -610,13 +609,13 @@ function saveSettings() {
     temperature: document.getElementById('temperature').value,
     maxTokens: document.getElementById('max-tokens').value,
   };
-  localStorage.setItem('nexus_settings', JSON.stringify(settings));
+  localStorage.setItem('flexchat_settings', JSON.stringify(settings));
   updateModelBadge();
 }
 
 function loadSettings() {
   try {
-    const s = JSON.parse(localStorage.getItem('nexus_settings') || '{}');
+    const s = JSON.parse(localStorage.getItem('flexchat_settings') || '{}');
     if (s.apiKey) document.getElementById('api-key').value = s.apiKey;
     if (s.model) document.getElementById('model-select').value = s.model;
     if (s.systemPrompt) document.getElementById('system-prompt').value = s.systemPrompt;
@@ -643,12 +642,12 @@ function toggleKeyVisibility() {
 function genId() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 6); }
 
 function saveChats() {
-  localStorage.setItem('nexus_chats', JSON.stringify(chats));
+  localStorage.setItem('flexchat_chats', JSON.stringify(chats));
 }
 
 function loadChats() {
   try {
-    chats = JSON.parse(localStorage.getItem('nexus_chats') || '{}');
+    chats = JSON.parse(localStorage.getItem('flexchat_chats') || '{}');
   } catch(e) { chats = {}; }
   renderConvList();
 }
@@ -671,7 +670,9 @@ function switchChat(id) {
   renderMessages();
   renderConvList();
   const chat = chats[id];
-  document.getElementById('chat-title').textContent = chat.title;
+ if (chat) {
+    document.getElementById('chat-title').textContent = chat.title;
+  }
   closeSidebar();
 }
 
@@ -684,9 +685,11 @@ function deleteChat(id, e) {
 }
 
 function clearCurrentChat() {
-  if (!currentChatId) return;
-  chats[currentChatId].messages = [];
-  chats[currentChatId].title = 'New conversation';
+    if (!currentChatId) return;
+  const chat = chats[currentChatId];
+  if (!chat) return;
+  chat.messages = [];
+  chat.title = 'New conversation';
   document.getElementById('chat-title').textContent = 'New conversation';
   saveChats();
   renderConvList();
@@ -695,6 +698,8 @@ function clearCurrentChat() {
 
 function renderConvList() {
   const list = document.getElementById('conv-list');
+  if (!list) return;
+
   const sorted = Object.values(chats).sort((a,b) => b.createdAt - a.createdAt);
   if (sorted.length === 0) {
     list.innerHTML = '<div class="text-fog/60 text-xs font-mono px-3 py-2">No conversations yet</div>';
@@ -717,9 +722,10 @@ const msgContentMap = {};
 
 function renderMessages() {
   const container = document.getElementById('messages');
-  const msgs = chats[currentChatId]?.messages || [];
+  const chat = chats[currentChatId];
+  const msgs = chat ? chat.messages : [];
 
-  if (msgs.length === 0) {
+  if (!chat || msgs.length === 0) {
     container.innerHTML = `<div id="empty-state" class="h-full flex flex-col items-center justify-center text-center py-16">
       <div class="font-display text-5xl italic text-cream/20 mb-4 select-none">FlexChat</div>
       <div class="text-fog text-sm font-mono max-w-xs">Enter your OpenRouter API key in the sidebar, choose a model, and start a conversation.</div>
@@ -762,7 +768,7 @@ function renderMessage(msg, idx) {
   } else {
     return `<div class="flex gap-3 items-start">
       <div class="w-7 h-7 rounded-md bg-gradient-to-br from-amber to-ember flex items-center justify-center flex-shrink-0 mt-0.5 shadow-md">
-        <span class="text-ink text-xs font-display font-bold italic">N</span>
+        <span class="text-ink text-xs font-display font-bold italic">Bot</span>
       </div>
       <div class="flex-1 min-w-0 group">
         <div class="text-xs font-mono text-ghost mb-1.5">${escHtml(msg.model || 'assistant')}</div>
@@ -810,7 +816,10 @@ async function sendMessage() {
   const input = document.getElementById('user-input');
   const text = input.value.trim();
   if (!text || isStreaming) return;
-
+  
+  if (!currentChatId || !chats[currentChatId]) {
+    newChat();
+  }
   const apiKey = document.getElementById('api-key').value.trim();
   if (!apiKey) { showError('Please enter your OpenRouter API key in the sidebar.'); return; }
 
@@ -855,7 +864,7 @@ async function sendMessage() {
   placeholder.className = 'flex gap-3 items-start';
   placeholder.innerHTML = `
     <div class="w-7 h-7 rounded-md bg-gradient-to-br from-amber to-ember flex items-center justify-center flex-shrink-0 mt-0.5 shadow-md">
-      <span class="text-ink text-xs font-display font-bold italic">N</span>
+      <span class="text-ink text-xs font-display font-bold italic">Bot</span>
     </div>
     <div class="flex-1 min-w-0">
       <div class="text-xs font-mono text-ghost mb-1.5">${escHtml(model.split('/').pop())}</div>
@@ -1041,13 +1050,18 @@ function openSidebar() {
 function closeSidebar() {
   const s = document.getElementById('sidebar');
   const o = document.getElementById('overlay');
+  
+  s.removeAttribute('data-open');
   s.classList.add('-translate-x-full');
-  o.classList.add('opacity-0');
-  setTimeout(() => o.classList.add('hidden'), 300);
+  
+  o.classList.add('hidden');
+  setTimeout(() => {
+    o.style.display = 'none';
+  }, 300);
 }
 
 // ── Boot ───────────────────────────────────────────────────────────────────
 init();
 </script>
 </body>
-</html>
+</html>