feat: shared-page message merging + UI reorganization

Shared Page: - Merge consecutive assistant text messages (same iteration) - Add iteration field to thread API response - Unified rendering for single/thread messages UI Reorganization (manual changes): - Session + Agent forms: collapsible 'Weitere Einstellungen' section - Agent defaults: tool_choice unchecked, web_search 2025, model opus-4-6 - Profile: default-path field hidden, divider removed - Form spacing adjustments, .more toggle style
2026-03-06 08:52:27 +01:00
1 parent 4e1ed81f37
commit 4ebbeaa818
@@ -10,6 +10,11 @@
  margin-top: var(--box-spacing);
 }

+.more {
+  margin: var(--box-spacing) auto;
+  cursor: pointer;
+}
+
 .avatar-section {
  display: flex;
  align-items: center;
@@ -55,7 +60,7 @@
 .form-actions {
  display: flex;
  gap: var(--badge-spacing);
-  margin-block: var(--box-spacing) calc(var(--page-spacing) * 4);
+  margin-block: var(--box-spacing) calc(var(--page-spacing) * 2);
 }

 /* ── Custom Commands ── */
@@ -211,12 +216,6 @@ label.skill-item {
  color: var(--dangerous);
 }

-.profile-divider {
-  border: none;
-  border-top: var(--border-width) solid var(--f2-border);
-  margin: var(--box-spacing) 0;
-}
-
 .danger-btn {
  color: var(--dangerous);
  border-color: currentcolor;
@@ -108,34 +108,38 @@
        </div>
        <label>Name</label>
        <input type="text" id="sessionName" placeholder="Name der Session">
-        <label>Beschreibung</label>
-        <input id="sessionDescription" placeholder="Kurze Beschreibung (optional)">
        <label>Agent</label>
        <select id="agentSelect"></select>
-        <label>Workspace</label>
-        <div class="input-with-btn">
-          <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
-          <button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
-        </div>
-        <label>Kontext</label>
-        <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
-        <label>Benutzerdefinierte Befehle</label>
-        <div class="custom-commands" id="customCommandsList"></div>
-        <button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
+        <div class="more">
+          <a>Weitere Einstellungen</a>
+          <div hidden>
+            <label>Beschreibung</label>
+            <input id="sessionDescription" placeholder="Kurze Beschreibung (optional)">
+            <label>Workspace</label>
+            <div class="input-with-btn">
+              <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
+              <button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
+            </div>
+            <label>Kontext</label>
+            <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
+            <label>Benutzerdefinierte Befehle</label>
+            <div class="custom-commands" id="customCommandsList"></div>
+            <button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>

-        <label><i class="fa fa-paper-plane"></i> <b>Telegram Bot</b></label>
-        <span>Erstelle einen Bot via <a href="https://t.me/BotFather" target="_blank">@BotFather</a></span>
-        <label>Bot-Token</label>
-        <input type="text" id="sessionTelegramToken" placeholder="123456:ABC-DEF..." autocomplete="off">
-        <label>Webhook-Secret</label>
-        <input type="text" id="sessionTelegramSecret" readonly style="opacity: var(--semi-transparent); ">
-        <label>Status</label>
-        <div id="sessionTelegramStatusBox" class="telegram-status-box">Kein Status verfügbar</div>
-        <div class="telegram-actions">
-          <button type="button" id="sessionTelegramRegisterBtn" hidden>Webhook registrieren</button>
-          <button type="button" id="sessionTelegramDeleteBtn" class="danger-btn" hidden>Webhook entfernen</button>
+            <label><i class="fa fa-paper-plane"></i> <b>Telegram Bot</b></label>
+            <span>Erstelle einen Bot via <a href="https://t.me/BotFather" target="_blank">@BotFather</a></span>
+            <label>Bot-Token</label>
+            <input type="text" id="sessionTelegramToken" placeholder="123456:ABC-DEF..." autocomplete="off">
+            <label>Webhook-Secret</label>
+            <input type="text" id="sessionTelegramSecret" readonly style="opacity: var(--semi-transparent); ">
+            <label>Status</label>
+            <div id="sessionTelegramStatusBox" class="telegram-status-box">Kein Status verfügbar</div>
+            <div class="telegram-actions">
+              <button type="button" id="sessionTelegramRegisterBtn" hidden>Webhook registrieren</button>
+              <button type="button" id="sessionTelegramDeleteBtn" class="danger-btn" hidden>Webhook entfernen</button>
+            </div>
+          </div>
        </div>
-
        <div class="form-actions">
          <button id="sessionSaveBtn">Speichern</button>
          <button id="sessionCancelBtn">Abbrechen</button>
@@ -162,57 +166,62 @@
        </div>
        <label>Name</label>
        <input type="text" id="agentName" placeholder="Name des Agents">
-        <label>Beschreibung</label>
-        <input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
        <label>Model</label>
        <select id="agentModel">
          <option value="sonnet-4-5">Sonnet 4.5</option>
          <option value="sonnet-4-6">Sonnet 4.6</option>
          <option value="opus-4-5">Opus 4.5</option>
-          <option value="opus-4-6">Opus 4.6</option>
+          <option value="opus-4-6" selected>Opus 4.6</option>
          <option value="haiku-4-5">Haiku 4.5</option>
        </select>
-        <label class="checkbox-label">
-          <input type="checkbox" id="agentToolChoice" checked>
-          Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
-        </label>
-        <label>Git-Commit-Verhalten</label>
-        <select id="agentAutoCommit">
-          <option value="">Nicht erwähnen</option>
-          <option value="mention">Anmerken (nur auf Anweisung)</option>
-          <option value="enforce">Erzwingen (nach jeder Änderung)</option>
-          <option value="forbid">Verbieten (strikt verboten)</option>
-        </select>
-        <label>Ego</label>
-        <label class="checkbox-label">
-          <input type="checkbox" id="agentUseSoul" checked>
-          Hat eine Seele <span class="checkbox-hint">(SOUL.md im System-Prompt)</span>
-        </label>
-        <label class="checkbox-label">
-          <input type="checkbox" id="agentUseIdentity" checked>
-          Hat eine Identität <span class="checkbox-hint">(IDENTITY.md im System-Prompt)</span>
-        </label>
-        <label class="checkbox-label">
-          <input type="checkbox" id="agentUseUserInfo" checked>
-          Kennt sein Gegenüber <span class="checkbox-hint">(Benutzer-Persona im System-Prompt)</span>
-        </label>
-        <label class="checkbox-label">
-          <input type="checkbox" id="agentUseMemory" checked>
-          Zugriff auf Erinnerungen <span class="checkbox-hint">(Memory-Tools verfügbar)</span>
-        </label>
-        <label>Web-Suche</label>
-        <select id="agentWebSearchVersion">
-          <option value="">Deaktiviert</option>
-          <option value="web_search_20250305">Aktiviert - Version 2025</option>
-          <option value="web_search_20260209">Aktiviert - Version 2026</option>
-        </select>
-        <label>Skills</label>
-        <div id="agentSkillsSection" hidden>
-          <div class="skill-list" id="agentSkillList"></div>
+        <div class="more">
+          <a>Weitere Einstellungen</a>
+          <div hidden>
+            <label>Beschreibung</label>
+            <input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
+            <label class="checkbox-label">
+              <input type="checkbox" id="agentToolChoice">
+              Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
+            </label>
+            <label>Git-Commit-Verhalten</label>
+            <select id="agentAutoCommit">
+              <option value="">Nicht erwähnen</option>
+              <option value="mention">Anmerken (nur auf Anweisung)</option>
+              <option value="enforce">Erzwingen (nach jeder Änderung)</option>
+              <option value="forbid">Verbieten (strikt verboten)</option>
+            </select>
+            <label>Ego</label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="agentUseSoul">
+              Hat eine Seele <span class="checkbox-hint">(SOUL.md im System-Prompt)</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="agentUseIdentity">
+              Hat eine Identität <span class="checkbox-hint">(IDENTITY.md im System-Prompt)</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="agentUseUserInfo">
+              Kennt sein Gegenüber <span class="checkbox-hint">(Benutzer-Persona im System-Prompt)</span>
+            </label>
+            <label class="checkbox-label">
+              <input type="checkbox" id="agentUseMemory">
+              Zugriff auf Erinnerungen <span class="checkbox-hint">(Memory-Tools verfügbar)</span>
+            </label>
+            <label>Web-Suche</label>
+            <select id="agentWebSearchVersion">
+              <option value="">Deaktiviert</option>
+              <option value="web_search_20250305" selected>Aktiviert - Version 2025</option>
+              <option value="web_search_20260209">Aktiviert - Version 2026</option>
+            </select>
+            <label>Skills</label>
+            <div id="agentSkillsSection" hidden>
+              <div class="skill-list" id="agentSkillList"></div>
+            </div>
+            <label>Benutzerdefinierte Befehle</label>
+            <div class="custom-commands" id="agentCommandsList"></div>
+            <button type="button" id="agentAddCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
+          </div>
        </div>
-        <label>Benutzerdefinierte Befehle</label>
-        <div class="custom-commands" id="agentCommandsList"></div>
-        <button type="button" id="agentAddCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
        <div class="form-actions">
          <button id="agentSaveBtn">Speichern</button>
          <button id="agentCancelBtn">Abbrechen</button>
@@ -397,8 +406,8 @@
        <input type="text" id="profileUsername" disabled>
        <label>Anzeigename</label>
        <input type="text" id="profileDisplayName" placeholder="Anzeigename">
-        <label>Standard-Pfad</label>
-        <input type="text" id="profileDefaultPath" disabled placeholder="Wird vom Administrator festgelegt">
+        <label hidden>Standard-Pfad</label>
+        <input type="text" id="profileDefaultPath" disabled placeholder="Wird vom Administrator festgelegt" hidden>
        <label>Persona</label>
        <span class="setting-hint">Wird im System-Prompt verwendet, wenn der Agent "Kennt sein Gegenüber" aktiviert hat.</span>
        <textarea id="profilePersona" rows="8" placeholder="Beschreibe dich selbst – Name, Rolle, Präferenzen, Kommunikationsstil..."></textarea>
@@ -406,7 +415,6 @@
          <button id="profileSaveBtn">Speichern</button>
        </div>
        <div class="profile-message" id="profileMessage" hidden></div>
-        <hr class="profile-divider">
        <h2>Passwort ändern</h2>
        <label>Aktuelles Passwort</label>
        <input type="password" id="profileCurrentPassword" placeholder="Aktuelles Passwort" autocomplete="current-password">
@@ -418,8 +426,9 @@
          <button id="profilePasswordBtn">Passwort ändern</button>
        </div>
        <div class="profile-message" id="profilePasswordMessage" hidden></div>
-        <hr class="profile-divider">
-        <button id="profileLogoutBtn" class="danger-btn">Abmelden</button>
+        <div class="form-actions">
+          <button id="profileLogoutBtn" class="danger-btn">Abmelden</button>
+        </div>
      </div>
    </div>
  </div>
@@ -36,6 +36,7 @@ registerPage('agent', {
    const addCommandBtn = document.getElementById('agentAddCommandBtn');
    const skillsSection = document.getElementById('agentSkillsSection');
    const skillList = document.getElementById('agentSkillList');
+    const more = document.querySelector('.more');

    _agentAvatarData = null;

@@ -120,6 +121,13 @@ registerPage('agent', {
      }
    });

+    more.addEventListener('click', () => {
+      const content = more.querySelector('[hidden]');
+      while (content.firstChild)
+          more.parentNode.insertBefore(content.firstChild, more);
+      more.remove();
+    });
+
    // Speichern
    saveBtn.addEventListener('click', async () => {
      const data = {
@@ -30,7 +30,8 @@ registerPage('session', {
    const deleteBtn = document.getElementById('sessionDeleteBtn');
    const commandsList = document.getElementById('customCommandsList');
    const addCommandBtn = document.getElementById('addCommandBtn');
-
+    const more = document.querySelector('.more');
+    
    _sessionImageData = null;

    if (session) {
@@ -125,6 +126,13 @@ registerPage('session', {
      }
    });

+    more.addEventListener('click', () => {
+      const content = more.querySelector('[hidden]');
+      while (content.firstChild)
+          more.parentNode.insertBefore(content.firstChild, more);
+      more.remove();
+    });
+
    // Workspace Browse
    const workspaceBrowse = document.getElementById('sessionWorkspaceBrowse');
    if (workspaceBrowse) {
@@ -13,23 +13,18 @@ registerPage('shared', {
      const data = await apiGetShared(token);
      container.innerHTML = '';

+      let messages = [];
+
      if (data.messages && data.messages.length > 0) {
-        // Mehrere Nachrichten (Thread mit Kontext)
-        data.messages.forEach(msg => {
-          const div = document.createElement('div');
-          div.className = 'msg ' + (msg.role === 'user' ? 'user' : 'assistant') + ' markdown';
-          if (msg.role === 'user') {
-            renderUserContent(div, msg.content);
-          } else {
-            div.innerHTML = renderMarkdown(msg.content);
-            parseFluentEmojis(div);
-            wrapKreaGalleries(div);
-          }
-          container.appendChild(div);
-        });
+        messages = data.messages;
      } else if (data.message) {
-        // Einzelne Nachricht
-        const msg = data.message;
+        messages = [data.message];
+      }
+
+      // Aufeinanderfolgende Assistant-Text-Messages mergen (wie im Chat)
+      messages = _mergeConsecutiveTexts(messages);
+
+      for (const msg of messages) {
        const div = document.createElement('div');
        div.className = 'msg ' + (msg.role === 'user' ? 'user' : 'assistant') + ' markdown';
        if (msg.role === 'user') {
@@ -57,3 +52,20 @@ registerPage('shared', {
  },
  destroy: () => {}
 });
+
+function _mergeConsecutiveTexts(msgs) {
+  const result = [];
+  for (const msg of msgs) {
+    if (msg.role === 'assistant') {
+      const prev = result[result.length - 1];
+      if (prev && prev.role === 'assistant'
+          && prev.iteration === msg.iteration) {
+        prev.content = (prev.content || '') + ' ' + (msg.content || '');
+        if (msg.createdAt) prev.createdAt = msg.createdAt;
+        continue;
+      }
+    }
+    result.push(Object.assign({}, msg));
+  }
+  return result;
+}