Admin-Chat: neue Unterhaltung mit jedem Kunden starten

Ueber der Chat-Liste sucht ein Feld alle Kunden (Name, E-Mail,
Kd.-Nr.) und oeffnet einen leeren Chat, auch wenn der Kunde noch
nie geschrieben hat. Der Server konnte das schon.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

public/admin.html

@@ -64,6 +64,7 @@
     }
     .chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 14px; min-height: 480px; }
     @media (max-width: 760px) { .chat-layout { grid-template-columns: 1fr; } }
+    .chat-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
     .chat-list { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow-y: auto; max-height: 560px; }
     .chat-list-item { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; }
     .chat-list-item:hover { background: rgba(255,255,255,0.05); }
@@ -220,8 +221,13 @@
     <!-- Chat -->
     <section class="admin-section" id="tab-chat">
       <div class="chat-layout">
-        <div class="chat-list" id="admin-chat-list">
-          <div class="chat-list-item"><span class="muted">Lade Unterhaltungen…</span></div>
+        <div class="chat-side">
+          <input class="credit-input" id="admin-chat-new" list="admin-chat-new-list" autocomplete="off"
+            placeholder="Neue Nachricht an Kunde…" aria-label="Neue Nachricht an Kunde">
+          <datalist id="admin-chat-new-list"></datalist>
+          <div class="chat-list" id="admin-chat-list">
+            <div class="chat-list-item"><span class="muted">Lade Unterhaltungen…</span></div>
+          </div>
         </div>
         <div class="chat-thread" id="admin-chat-thread">
           <div class="chat-empty">Unterhaltung links auswählen</div>

public/admin.js

@@ -382,6 +382,33 @@ async function pollAdminChatBadge() {
   }
 }
 
+// Neue Unterhaltung: jeden Kunden anschreiben, auch wenn er noch nie geschrieben hat
+const chatCustomerLabel = (c) =>
+  [c.name || '(ohne Name)', c.email, c.code ? `Kd.-Nr. ${c.code}` : ''].filter(Boolean).join(' · ')
+
+async function setupNewChatPicker() {
+  const input = document.getElementById('admin-chat-new')
+  if (!input) return
+  let byLabel = new Map()
+  try {
+    const { customers } = await api('/api/portal-admin/customers')
+    byLabel = new Map(customers.map((c) => [chatCustomerLabel(c), c]))
+    document.getElementById('admin-chat-new-list').innerHTML = customers
+      .map((c) => `<option value="${escapeHtml(chatCustomerLabel(c))}"></option>`).join('')
+  } catch (err) {
+    input.placeholder = `Kunden konnten nicht geladen werden: ${err.message}`
+    return
+  }
+  const pick = () => {
+    const customer = byLabel.get(input.value.trim())
+    if (!customer) return
+    input.value = ''
+    openChatThread(customer.id, customer.name || customer.email || 'Kunde')
+  }
+  input.addEventListener('change', pick)
+  input.addEventListener('input', pick)
+}
+
 async function loadChatList() {
   const list = document.getElementById('admin-chat-list')
   try {
@@ -1313,6 +1340,7 @@ async function initAdminPage() {
       if (tab.dataset.tab === 'chat' && !chatListLoaded) {
         chatListLoaded = true
         loadChatList()
+        setupNewChatPicker()
       }
       if (tab.dataset.tab === 'credits' && !creditsLoaded) {
         creditsLoaded = true