Protokoll #21733

ID21733
Zeitstempel2025-12-27 11:05:08.864745
Clientroot
IP145.224.72.140
Modellclaude-sonnet-4-20250514
Statuscompleted
Tokens9,212 (Input: 2,260, Output: 6,952)
Dauer101 ms
Request-Zeit2025-12-27 11:05:08.864745
Response-Zeit2025-12-27 11:05:08.965387

Request

{
    "event": "PreToolUse",
    "tool_name": "Edit",
    "tool_input": {
        "file_path": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/chat\/index.php",
        "old_string": "<script>\nconst sidebar = document.getElementById('sidebar');\nconst overlay = document.getElementById('overlay');\nconst toggle = document.getElementById('toggle');\nconst messages = document.getElementById('messages');\nconst form = document.getElementById('chatForm');\nconst sendBtn = document.getElementById('sendBtn');\nconst settingsAdvanced = document.getElementById('settingsAdvanced');\nconst settingsToggle = document.getElementById('settingsToggle');\nconst themeToggle = document.getElementById('themeToggle');\nconst themeIcon = document.getElementById('themeIcon');\nconst html = document.documentElement;\nconst exportDropdown = document.getElementById('exportDropdown');\nconst exportBtn = document.getElementById('exportBtn');\nconst collectionsSelect = document.getElementById('collectionsSelect');\nconst modelSelect = document.querySelector('select[name=\"model\"]');\n\n\/\/ Model preference (global)\nconst savedModel = localStorage.getItem('chat-model');\nif (savedModel && modelSelect) {\n    const option = modelSelect.querySelector('option[value=\"' + savedModel + '\"]');\n    if (option) {\n        modelSelect.value = savedModel;\n    }\n}\nif (modelSelect) {\n    modelSelect.addEventListener('change', () => {\n        localStorage.setItem('chat-model', modelSelect.value);\n    });\n}\n\n\/\/ Theme\nconst savedTheme = localStorage.getItem('chat-theme') || 'light';\nhtml.setAttribute('data-theme', savedTheme);\nthemeIcon.textContent = savedTheme === 'dark' ? '☀' : '☽';\n\nthemeToggle.addEventListener('click', () => {\n    const current = html.getAttribute('data-theme');\n    const next = current === 'dark' ? 'light' : 'dark';\n    html.setAttribute('data-theme', next);\n    localStorage.setItem('chat-theme', next);\n    themeIcon.textContent = next === 'dark' ? '☀' : '☽';\n});\n\n\/\/ Sidebar Toggle\ntoggle.addEventListener('click', (e) => {\n    e.stopPropagation();\n    sidebar.classList.toggle('chat-sidebar--open');\n    overlay.classList.toggle('chat-overlay--visible');\n});\n\noverlay.addEventListener('click', () => {\n    sidebar.classList.remove('chat-sidebar--open');\n    overlay.classList.remove('chat-overlay--visible');\n});\n\n\/\/ Export Dropdown\nexportBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    exportDropdown.classList.toggle('chat-dropdown--open');\n});\n\ndocument.addEventListener('click', (e) => {\n    if (!exportDropdown.contains(e.target)) {\n        exportDropdown.classList.remove('chat-dropdown--open');\n    }\n});\n\n\/\/ Settings Toggle\nsettingsToggle.addEventListener('click', () => {\n    settingsAdvanced.classList.toggle('chat-settings--hidden');\n    settingsToggle.textContent = settingsAdvanced.classList.contains('chat-settings--hidden') ? 'Mehr' : 'Weniger';\n});\n\n\/\/ Temperature Slider\nconst tempSlider = document.getElementById('temperature');\nconst tempValue = document.getElementById('tempValue');\ntempSlider.addEventListener('input', () => {\n    tempValue.textContent = parseFloat(tempSlider.value).toFixed(1);\n    updatePresetHighlight();\n});\n\n\/\/ Update preset highlight based on current temp\nfunction updatePresetHighlight() {\n    const currentTemp = parseFloat(tempSlider.value);\n    document.querySelectorAll('.chat-preset').forEach(btn => {\n        const btnTemp = parseFloat(btn.dataset.temp);\n        btn.classList.toggle('chat-preset--active', Math.abs(btnTemp - currentTemp) < 0.05);\n    });\n}\n\n\/\/ Presets\ndocument.querySelectorAll('.chat-preset').forEach(btn => {\n    btn.addEventListener('click', () => {\n        const temp = btn.dataset.temp;\n        const tokens = btn.dataset.tokens;\n        tempSlider.value = temp;\n        tempValue.textContent = parseFloat(temp).toFixed(1);\n        document.querySelector('select[name=\"max_tokens\"]').value = tokens;",
        "new_string": "<script>\nconst sidebar = document.getElementById('sidebar');\nconst overlay = document.getElementById('overlay');\nconst toggle = document.getElementById('toggle');\nconst messages = document.getElementById('messages');\nconst form = document.getElementById('chatForm');\nconst sendBtn = document.getElementById('sendBtn');\nconst html = document.documentElement;\nconst configPanel = document.getElementById('configPanel');\nconst configPanelToggle = document.getElementById('configPanelToggle');\nconst configPanelClose = document.getElementById('configPanelClose');\n\n\/\/ ========== THEME ==========\nconst savedTheme = localStorage.getItem('chat-theme') || 'light';\nhtml.setAttribute('data-theme', savedTheme);\nupdateThemeUI();\n\nfunction updateThemeUI() {\n    const theme = html.getAttribute('data-theme');\n    const icon = document.getElementById('configThemeIcon');\n    const text = document.getElementById('configThemeText');\n    if (icon) icon.textContent = theme === 'dark' ? '☀' : '☽';\n    if (text) text.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';\n}\n\ndocument.getElementById('configThemeToggle')?.addEventListener('click', () => {\n    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';\n    html.setAttribute('data-theme', next);\n    localStorage.setItem('chat-theme', next);\n    updateThemeUI();\n});\n\n\/\/ ========== SIDEBAR ==========\ntoggle.addEventListener('click', (e) => {\n    e.stopPropagation();\n    sidebar.classList.toggle('chat-sidebar--open');\n    overlay.classList.toggle('chat-overlay--visible');\n});\n\noverlay.addEventListener('click', () => {\n    sidebar.classList.remove('chat-sidebar--open');\n    overlay.classList.remove('chat-overlay--visible');\n});\n\n\/\/ ========== CONFIG PANEL ==========\nconfigPanelToggle.addEventListener('click', () => {\n    configPanel.classList.toggle('config-panel--open');\n    configPanelToggle.setAttribute('aria-expanded', configPanel.classList.contains('config-panel--open'));\n});\n\nconfigPanelClose.addEventListener('click', () => {\n    configPanel.classList.remove('config-panel--open');\n    configPanelToggle.setAttribute('aria-expanded', 'false');\n});\n\n\/\/ ========== SYNC CONFIG PANEL TO HIDDEN INPUTS ==========\nfunction syncToHidden(configId, hiddenId) {\n    const config = document.getElementById(configId);\n    const hidden = document.getElementById(hiddenId);\n    if (config && hidden) {\n        config.addEventListener('change', function() {\n            hidden.value = this.value;\n            \/\/ Visual feedback\n            this.classList.add('is-saving');\n            setTimeout(() => {\n                this.classList.remove('is-saving');\n                this.classList.add('is-saved');\n                setTimeout(() => this.classList.remove('is-saved'), 600);\n            }, 100);\n            \/\/ Save to localStorage\n            localStorage.setItem('chat-' + hiddenId, this.value);\n        });\n        \/\/ Load from localStorage\n        const saved = localStorage.getItem('chat-' + hiddenId);\n        if (saved) {\n            const option = config.querySelector('option[value=\"' + saved + '\"]');\n            if (option) {\n                config.value = saved;\n                hidden.value = saved;\n            }\n        }\n    }\n}\n\nsyncToHidden('configModel', 'hiddenModel');\nsyncToHidden('configContextLimit', 'hiddenContextLimit');\nsyncToHidden('configMaxTokens', 'hiddenMaxTokens');\nsyncToHidden('configSystemPrompt', 'hiddenSystemPrompt');\nsyncToHidden('configStructure', 'hiddenStructure');\nsyncToHidden('configAuthorProfile', 'hiddenAuthorProfile');\n\n\/\/ ========== COLLECTIONS SYNC ==========\nfunction syncCollections() {\n    const container = document.getElementById('hiddenCollections');\n    container.innerHTML = '';\n    document.querySelectorAll('#configCollections input[type=\"checkbox\"]:checked').forEach(cb => {\n        const input = document.createElement('input');\n        input.type = 'hidden';\n        input.name = 'collections[]';\n        input.value = cb.value;\n        container.appendChild(input);\n    });\n}\nsyncCollections();\ndocument.querySelectorAll('#configCollections input[type=\"checkbox\"]').forEach(cb => {\n    cb.addEventListener('change', syncCollections);\n});\n\n\/\/ ========== TEMPERATURE ==========\nconst tempSlider = document.getElementById('configTemperature');\nconst tempValue = document.getElementById('tempValuePanel');\nconst hiddenTemp = document.getElementById('hiddenTemperature');\n\ntempSlider?.addEventListener('input', () => {\n    const val = parseFloat(tempSlider.value).toFixed(1);\n    tempValue.textContent = val;\n    hiddenTemp.value = val;\n    updatePresetHighlight();\n});\n\nfunction updatePresetHighlight() {\n    const currentTemp = parseFloat(tempSlider.value);\n    document.querySelectorAll('.config-panel__preset').forEach(btn => {\n        const btnTemp = parseFloat(btn.dataset.temp);\n        btn.classList.toggle('config-panel__preset--active', Math.abs(btnTemp - currentTemp) < 0.05);"
    }
}

Response

{
    "tool_response": {
        "filePath": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/chat\/index.php",
        "oldString": "<script>\nconst sidebar = document.getElementById('sidebar');\nconst overlay = document.getElementById('overlay');\nconst toggle = document.getElementById('toggle');\nconst messages = document.getElementById('messages');\nconst form = document.getElementById('chatForm');\nconst sendBtn = document.getElementById('sendBtn');\nconst settingsAdvanced = document.getElementById('settingsAdvanced');\nconst settingsToggle = document.getElementById('settingsToggle');\nconst themeToggle = document.getElementById('themeToggle');\nconst themeIcon = document.getElementById('themeIcon');\nconst html = document.documentElement;\nconst exportDropdown = document.getElementById('exportDropdown');\nconst exportBtn = document.getElementById('exportBtn');\nconst collectionsSelect = document.getElementById('collectionsSelect');\nconst modelSelect = document.querySelector('select[name=\"model\"]');\n\n\/\/ Model preference (global)\nconst savedModel = localStorage.getItem('chat-model');\nif (savedModel && modelSelect) {\n    const option = modelSelect.querySelector('option[value=\"' + savedModel + '\"]');\n    if (option) {\n        modelSelect.value = savedModel;\n    }\n}\nif (modelSelect) {\n    modelSelect.addEventListener('change', () => {\n        localStorage.setItem('chat-model', modelSelect.value);\n    });\n}\n\n\/\/ Theme\nconst savedTheme = localStorage.getItem('chat-theme') || 'light';\nhtml.setAttribute('data-theme', savedTheme);\nthemeIcon.textContent = savedTheme === 'dark' ? '☀' : '☽';\n\nthemeToggle.addEventListener('click', () => {\n    const current = html.getAttribute('data-theme');\n    const next = current === 'dark' ? 'light' : 'dark';\n    html.setAttribute('data-theme', next);\n    localStorage.setItem('chat-theme', next);\n    themeIcon.textContent = next === 'dark' ? '☀' : '☽';\n});\n\n\/\/ Sidebar Toggle\ntoggle.addEventListener('click', (e) => {\n    e.stopPropagation();\n    sidebar.classList.toggle('chat-sidebar--open');\n    overlay.classList.toggle('chat-overlay--visible');\n});\n\noverlay.addEventListener('click', () => {\n    sidebar.classList.remove('chat-sidebar--open');\n    overlay.classList.remove('chat-overlay--visible');\n});\n\n\/\/ Export Dropdown\nexportBtn.addEventListener('click', (e) => {\n    e.stopPropagation();\n    exportDropdown.classList.toggle('chat-dropdown--open');\n});\n\ndocument.addEventListener('click', (e) => {\n    if (!exportDropdown.contains(e.target)) {\n        exportDropdown.classList.remove('chat-dropdown--open');\n    }\n});\n\n\/\/ Settings Toggle\nsettingsToggle.addEventListener('click', () => {\n    settingsAdvanced.classList.toggle('chat-settings--hidden');\n    settingsToggle.textContent = settingsAdvanced.classList.contains('chat-settings--hidden') ? 'Mehr' : 'Weniger';\n});\n\n\/\/ Temperature Slider\nconst tempSlider = document.getElementById('temperature');\nconst tempValue = document.getElementById('tempValue');\ntempSlider.addEventListener('input', () => {\n    tempValue.textContent = parseFloat(tempSlider.value).toFixed(1);\n    updatePresetHighlight();\n});\n\n\/\/ Update preset highlight based on current temp\nfunction updatePresetHighlight() {\n    const currentTemp = parseFloat(tempSlider.value);\n    document.querySelectorAll('.chat-preset').forEach(btn => {\n        const btnTemp = parseFloat(btn.dataset.temp);\n        btn.classList.toggle('chat-preset--active', Math.abs(btnTemp - currentTemp) < 0.05);\n    });\n}\n\n\/\/ Presets\ndocument.querySelectorAll('.chat-preset').forEach(btn => {\n    btn.addEventListener('click', () => {\n        const temp = btn.dataset.temp;\n        const tokens = btn.dataset.tokens;\n        tempSlider.value = temp;\n        tempValue.textContent = parseFloat(temp).toFixed(1);\n        document.querySelector('select[name=\"max_tokens\"]').value = tokens;",
        "newString": "<script>\nconst sidebar = document.getElementById('sidebar');\nconst overlay = document.getElementById('overlay');\nconst toggle = document.getElementById('toggle');\nconst messages = document.getElementById('messages');\nconst form = document.getElementById('chatForm');\nconst sendBtn = document.getElementById('sendBtn');\nconst html = document.documentElement;\nconst configPanel = document.getElementById('configPanel');\nconst configPanelToggle = document.getElementById('configPanelToggle');\nconst configPanelClose = document.getElementById('configPanelClose');\n\n\/\/ ========== THEME ==========\nconst savedTheme = localStorage.getItem('chat-theme') || 'light';\nhtml.setAttribute('data-theme', savedTheme);\nupdateThemeUI();\n\nfunction updateThemeUI() {\n    const theme = html.getAttribute('data-theme');\n    const icon = document.getElementById('configThemeIcon');\n    const text = document.getElementById('configThemeText');\n    if (icon) icon.textContent = theme === 'dark' ? '☀' : '☽';\n    if (text) text.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';\n}\n\ndocument.getElementById('configThemeToggle')?.addEventListener('click', () => {\n    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';\n    html.setAttribute('data-theme', next);\n    localStorage.setItem('chat-theme', next);\n    updateThemeUI();\n});\n\n\/\/ ========== SIDEBAR ==========\ntoggle.addEventListener('click', (e) => {\n    e.stopPropagation();\n    sidebar.classList.toggle('chat-sidebar--open');\n    overlay.classList.toggle('chat-overlay--visible');\n});\n\noverlay.addEventListener('click', () => {\n    sidebar.classList.remove('chat-sidebar--open');\n    overlay.classList.remove('chat-overlay--visible');\n});\n\n\/\/ ========== CONFIG PANEL ==========\nconfigPanelToggle.addEventListener('click', () => {\n    configPanel.classList.toggle('config-panel--open');\n    configPanelToggle.setAttribute('aria-expanded', configPanel.classList.contains('config-panel--open'));\n});\n\nconfigPanelClose.addEventListener('click', () => {\n    configPanel.classList.remove('config-panel--open');\n    configPanelToggle.setAttribute('aria-expanded', 'false');\n});\n\n\/\/ ========== SYNC CONFIG PANEL TO HIDDEN INPUTS ==========\nfunction syncToHidden(configId, hiddenId) {\n    const config = document.getElementById(configId);\n    const hidden = document.getElementById(hiddenId);\n    if (config && hidden) {\n        config.addEventListener('change', function() {\n            hidden.value = this.value;\n            \/\/ Visual feedback\n            this.classList.add('is-saving');\n            setTimeout(() => {\n                this.classList.remove('is-saving');\n                this.classList.add('is-saved');\n                setTimeout(() => this.classList.remove('is-saved'), 600);\n            }, 100);\n            \/\/ Save to localStorage\n            localStorage.setItem('chat-' + hiddenId, this.value);\n        });\n        \/\/ Load from localStorage\n        const saved = localStorage.getItem('chat-' + hiddenId);\n        if (saved) {\n            const option = config.querySelector('option[value=\"' + saved + '\"]');\n            if (option) {\n                config.value = saved;\n                hidden.value = saved;\n            }\n        }\n    }\n}\n\nsyncToHidden('configModel', 'hiddenModel');\nsyncToHidden('configContextLimit', 'hiddenContextLimit');\nsyncToHidden('configMaxTokens', 'hiddenMaxTokens');\nsyncToHidden('configSystemPrompt', 'hiddenSystemPrompt');\nsyncToHidden('configStructure', 'hiddenStructure');\nsyncToHidden('configAuthorProfile', 'hiddenAuthorProfile');\n\n\/\/ ========== COLLECTIONS SYNC ==========\nfunction syncCollections() {\n    const container = document.getElementById('hiddenCollections');\n    container.innerHTML = '';\n    document.querySelectorAll('#configCollections input[type=\"checkbox\"]:checked').forEach(cb => {\n        const input = document.createElement('input');\n        input.type = 'hidden';\n        input.name = 'collections[]';\n        input.value = cb.value;\n        container.appendChild(input);\n    });\n}\nsyncCollections();\ndocument.querySelectorAll('#configCollections input[type=\"checkbox\"]').forEach(cb => {\n    cb.addEventListener('change', syncCollections);\n});\n\n\/\/ ========== TEMPERATURE ==========\nconst tempSlider = document.getElementById('configTemperature');\nconst tempValue = document.getElementById('tempValuePanel');\nconst hiddenTemp = document.getElementById('hiddenTemperature');\n\ntempSlider?.addEventListener('input', () => {\n    const val = parseFloat(tempSlider.value).toFixed(1);\n    tempValue.textContent = val;\n    hiddenTemp.value = val;\n    updatePresetHighlight();\n});\n\nfunction updatePresetHighlight() {\n    const currentTemp = parseFloat(tempSlider.value);\n    document.querySelectorAll('.config-panel__preset').forEach(btn => {\n        const btnTemp = parseFloat(btn.dataset.temp);\n        btn.classList.toggle('config-panel__preset--active', Math.abs(btnTemp - currentTemp) < 0.05);",
        "originalFile": "<?php\n\/**\n * Chat - Redesign\n * Clean, minimalist, professional\n *\/\n$currentModel = $session['model'] ?? $defaultModel ?? 'claude-opus-4-5-20251101';\n$selected = json_decode($session['collections'] ?? '[\"documents\"]', true) ?: ['documents'];\n$currentLimit = (int) ($session['context_limit'] ?? 5);\n$currentProfileId = (int) ($session['author_profile_id'] ?? 0);\n$currentPromptId = (int) ($session['system_prompt_id'] ?? 1);\n$currentTemperature = (float) ($session['temperature'] ?? 0.5);\n$currentMaxTokens = (int) ($session['max_tokens'] ?? 4096);\n?>\n<!DOCTYPE html>\n<html lang=\"de\" data-theme=\"light\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?= htmlspecialchars($session['title'] ?? 'KI-Chat') ?> - Campus<\/title>\n    <link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/campus-am-see.de\/wp-content\/uploads\/menu-logo.png\">\n    <link rel=\"stylesheet\" href=\"\/css\/chat-redesign.css\">\n    <script src=\"\/js\/htmx.min.js\"><\/script>\n<\/head>\n<body>\n<div class=\"chat-layout\">\n    <!-- Sidebar -->\n    <aside class=\"chat-sidebar\" id=\"sidebar\">\n        <div class=\"chat-sidebar__header\">\n            <a href=\"\/chat\" class=\"chat-sidebar__new\">+ Neuer Chat<\/a>\n            <button class=\"chat-sidebar__delete-all\" hx-delete=\"\/chat\" hx-confirm=\"Alle <?= count($sessions ?? []) ?> Chats löschen?\" title=\"Alle löschen\">&times; Alle<\/button>\n        <\/div>\n        <div class=\"chat-sidebar__list\" id=\"session-list\">\n            <?php foreach ($sessions ?? [] as $s):\n                $totalTokens = (int) ($s['total_input_tokens'] ?? 0) + (int) ($s['total_output_tokens'] ?? 0);\n                $totalCost = ((int) ($s['total_input_tokens'] ?? 0) * 0.000015) + ((int) ($s['total_output_tokens'] ?? 0) * 0.000075);\n                $isOllama = str_starts_with($s['model'] ?? '', 'ollama:');\n                ?>\n            <a href=\"\/chat\/<?= $s['uuid'] ?>\"\n               class=\"chat-session <?= ($session['uuid'] ?? '') === $s['uuid'] ? 'chat-session--active' : '' ?>\"\n               data-uuid=\"<?= $s['uuid'] ?>\">\n                <div class=\"chat-session__title\" id=\"title-<?= $s['uuid'] ?>\"><?= htmlspecialchars($s['title'] ?? 'Neuer Chat') ?><\/div>\n                <div class=\"chat-session__meta\">\n                    <span><?= $isOllama ? 'Lokal' : 'Claude' ?><\/span>\n                    <span><?= $s['message_count'] ?? 0 ?> Nachr.<\/span>\n                    <?php if (!$isOllama && $totalTokens > 0): ?>\n                    <span title=\"<?= number_format((int) $s['total_input_tokens']) ?> in \/ <?= number_format((int) $s['total_output_tokens']) ?> out\"><?= number_format($totalTokens) ?> Tok.<\/span>\n                    <span class=\"chat-session__cost\">~$<?= number_format($totalCost, 2) ?><\/span>\n                    <?php elseif ($isOllama): ?>\n                    <span class=\"chat-session__local\">lokal<\/span>\n                    <?php endif; ?>\n                <\/div>\n                <div class=\"chat-session__actions\">\n                    <button class=\"chat-session__edit\" onclick=\"event.preventDefault(); event.stopPropagation(); editTitle('<?= $s['uuid'] ?>');\" title=\"Bearbeiten\">&#9998;<\/button>\n                    <button class=\"chat-session__delete\" hx-delete=\"\/chat\/<?= $s['uuid'] ?>\" hx-confirm=\"Session löschen?\" onclick=\"event.preventDefault(); event.stopPropagation();\">&times;<\/button>\n                <\/div>\n            <\/a>\n            <?php endforeach; ?>\n            <?php if (empty($sessions)): ?>\n            <div class=\"chat-session chat-session--empty\">Keine Sessions<\/div>\n            <?php endif; ?>\n        <\/div>\n    <\/aside>\n\n    <!-- Config Panel (50% Screen) -->\n    <aside class=\"config-panel\" id=\"configPanel\">\n        <div class=\"config-panel__header\">\n            <span class=\"config-panel__title\">Einstellungen<\/span>\n            <button type=\"button\" class=\"config-panel__close\" id=\"configPanelClose\" aria-label=\"Panel schliessen\">&times;<\/button>\n        <\/div>\n\n        <div class=\"config-panel__body\">\n            <!-- Modell -->\n            <div class=\"config-panel__group\">\n                <label for=\"configModel\" class=\"config-panel__label\">Modell<\/label>\n                <select id=\"configModel\" class=\"config-panel__select\" aria-label=\"Modell waehlen\">\n                    <optgroup label=\"Anthropic\">\n                        <?php foreach ($models ?? [] as $modelId => $modelLabel): ?>\n                        <?php if (!str_starts_with($modelId, 'ollama:')): ?>\n                        <option value=\"<?= htmlspecialchars($modelId) ?>\" <?= $currentModel === $modelId ? 'selected' : '' ?>><?= htmlspecialchars($modelLabel) ?><\/option>\n                        <?php endif; ?>\n                        <?php endforeach; ?>\n                    <\/optgroup>\n                    <optgroup label=\"Ollama (lokal)\">\n                        <?php foreach ($models ?? [] as $modelId => $modelLabel): ?>\n                        <?php if (str_starts_with($modelId, 'ollama:')): ?>\n                        <option value=\"<?= htmlspecialchars($modelId) ?>\" <?= $currentModel === $modelId ? 'selected' : '' ?>><?= htmlspecialchars($modelLabel) ?><\/option>\n                        <?php endif; ?>\n                        <?php endforeach; ?>\n                    <\/optgroup>\n                <\/select>\n            <\/div>\n\n            <!-- Quellen -->\n            <div class=\"config-panel__group\">\n                <label for=\"configContextLimit\" class=\"config-panel__label\">Quellen<\/label>\n                <select id=\"configContextLimit\" class=\"config-panel__select\" aria-label=\"Anzahl Quellen\">\n                    <option value=\"3\" <?= $currentLimit === 3 ? 'selected' : '' ?>>3 Quellen<\/option>\n                    <option value=\"5\" <?= $currentLimit === 5 ? 'selected' : '' ?>>5 Quellen<\/option>\n                    <option value=\"10\" <?= $currentLimit === 10 ? 'selected' : '' ?>>10 Quellen<\/option>\n                    <option value=\"15\" <?= $currentLimit === 15 ? 'selected' : '' ?>>15 Quellen<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Collections -->\n            <div class=\"config-panel__group\">\n                <label class=\"config-panel__label\">Sammlungen<\/label>\n                <div class=\"config-panel__collections\" id=\"configCollections\">\n                    <?php foreach ($collections ?? [] as $col):\n                        $colId = $col['collection_id'];\n                        $isSelected = in_array($colId, $selected, true);\n                        $points = (int) ($col['points_count'] ?? 0);\n                        ?>\n                    <label class=\"config-panel__checkbox\">\n                        <input type=\"checkbox\" name=\"collections[]\" value=\"<?= htmlspecialchars($colId) ?>\" <?= $isSelected ? 'checked' : '' ?>>\n                        <?= htmlspecialchars($col['display_name']) ?> <span class=\"config-panel__count\">(<?= number_format($points) ?>)<\/span>\n                    <\/label>\n                    <?php endforeach; ?>\n                <\/div>\n            <\/div>\n\n            <!-- Temperatur & Tokens -->\n            <div class=\"config-panel__group\">\n                <label class=\"config-panel__label\">Temperatur: <span id=\"tempValuePanel\"><?= number_format($currentTemperature, 1) ?><\/span><\/label>\n                <input type=\"range\" id=\"configTemperature\" class=\"config-panel__slider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"<?= $currentTemperature ?>\">\n                <div class=\"config-panel__presets\">\n                    <button type=\"button\" class=\"config-panel__preset<?= $currentTemperature == 0.3 ? ' config-panel__preset--active' : '' ?>\" data-temp=\"0.3\" data-tokens=\"2048\">Präzise<\/button>\n                    <button type=\"button\" class=\"config-panel__preset<?= $currentTemperature == 0.5 ? ' config-panel__preset--active' : '' ?>\" data-temp=\"0.5\" data-tokens=\"4096\">Ausgewogen<\/button>\n                    <button type=\"button\" class=\"config-panel__preset<?= $currentTemperature == 0.9 ? ' config-panel__preset--active' : '' ?>\" data-temp=\"0.9\" data-tokens=\"4096\">Kreativ<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Max Tokens -->\n            <div class=\"config-panel__group\">\n                <label for=\"configMaxTokens\" class=\"config-panel__label\">Max Tokens<\/label>\n                <select id=\"configMaxTokens\" class=\"config-panel__select\">\n                    <option value=\"1024\" <?= $currentMaxTokens === 1024 ? 'selected' : '' ?>>1024<\/option>\n                    <option value=\"2048\" <?= $currentMaxTokens === 2048 ? 'selected' : '' ?>>2048<\/option>\n                    <option value=\"4096\" <?= $currentMaxTokens === 4096 ? 'selected' : '' ?>>4096<\/option>\n                    <option value=\"8192\" <?= $currentMaxTokens === 8192 ? 'selected' : '' ?>>8192<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Qualitätsprüfung -->\n            <div class=\"config-panel__group\">\n                <label class=\"config-panel__checkbox config-panel__checkbox--large\">\n                    <input type=\"checkbox\" id=\"configQualityCheck\" name=\"quality_check\" value=\"1\">\n                    Qualitätsprüfung (LLM-Validierung)\n                <\/label>\n            <\/div>\n\n            <hr class=\"config-panel__divider\">\n\n            <!-- System Prompt -->\n            <div class=\"config-panel__group\">\n                <label for=\"configSystemPrompt\" class=\"config-panel__label\">System Prompt<\/label>\n                <select id=\"configSystemPrompt\" class=\"config-panel__select\" aria-label=\"System Prompt waehlen\">\n                    <?php foreach ($systemPrompts ?? [] as $prompt): ?>\n                    <option value=\"<?= $prompt['id'] ?>\" <?= $currentPromptId === (int) $prompt['id'] ? 'selected' : '' ?>><?= htmlspecialchars($prompt['name']) ?><\/option>\n                    <?php endforeach; ?>\n                <\/select>\n                <button type=\"button\" class=\"config-panel__toggle\" data-config-type=\"system_prompt\" aria-expanded=\"false\" aria-controls=\"systemPromptEditor\">&#9998;<... [TRUNCATED-d88b7aba93794aa6]",
        "structuredPatch": [
            {
                "oldStart": 353,
                "oldLines": 44,
                "newStart": 353,
                "newLines": 32,
                "lines": [
                    " const messages = document.getElementById('messages');",
                    " const form = document.getElementById('chatForm');",
                    " const sendBtn = document.getElementById('sendBtn');",
                    "-const settingsAdvanced = document.getElementById('settingsAdvanced');",
                    "-const settingsToggle = document.getElementById('settingsToggle');",
                    "-const themeToggle = document.getElementById('themeToggle');",
                    "-const themeIcon = document.getElementById('themeIcon');",
                    " const html = document.documentElement;",
                    "-const exportDropdown = document.getElementById('exportDropdown');",
                    "-const exportBtn = document.getElementById('exportBtn');",
                    "-const collectionsSelect = document.getElementById('collectionsSelect');",
                    "-const modelSelect = document.querySelector('select[name=\"model\"]');",
                    "+const configPanel = document.getElementById('configPanel');",
                    "+const configPanelToggle = document.getElementById('configPanelToggle');",
                    "+const configPanelClose = document.getElementById('configPanelClose');",
                    " ",
                    "-\/\/ Model preference (global)",
                    "-const savedModel = localStorage.getItem('chat-model');",
                    "-if (savedModel && modelSelect) {",
                    "-    const option = modelSelect.querySelector('option[value=\"' + savedModel + '\"]');",
                    "-    if (option) {",
                    "-        modelSelect.value = savedModel;",
                    "-    }",
                    "-}",
                    "-if (modelSelect) {",
                    "-    modelSelect.addEventListener('change', () => {",
                    "-        localStorage.setItem('chat-model', modelSelect.value);",
                    "-    });",
                    "-}",
                    "-",
                    "-\/\/ Theme",
                    "+\/\/ ========== THEME ==========",
                    " const savedTheme = localStorage.getItem('chat-theme') || 'light';",
                    " html.setAttribute('data-theme', savedTheme);",
                    "-themeIcon.textContent = savedTheme === 'dark' ? '☀' : '☽';",
                    "+updateThemeUI();",
                    " ",
                    "-themeToggle.addEventListener('click', () => {",
                    "-    const current = html.getAttribute('data-theme');",
                    "-    const next = current === 'dark' ? 'light' : 'dark';",
                    "+function updateThemeUI() {",
                    "+    const theme = html.getAttribute('data-theme');",
                    "+    const icon = document.getElementById('configThemeIcon');",
                    "+    const text = document.getElementById('configThemeText');",
                    "+    if (icon) icon.textContent = theme === 'dark' ? '☀' : '☽';",
                    "+    if (text) text.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';",
                    "+}",
                    "+",
                    "+document.getElementById('configThemeToggle')?.addEventListener('click', () => {",
                    "+    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';",
                    "     html.setAttribute('data-theme', next);",
                    "     localStorage.setItem('chat-theme', next);",
                    "-    themeIcon.textContent = next === 'dark' ? '☀' : '☽';",
                    "+    updateThemeUI();",
                    " });",
                    " ",
                    "-\/\/ Sidebar Toggle",
                    "+\/\/ ========== SIDEBAR ==========",
                    " toggle.addEventListener('click', (e) => {",
                    "     e.stopPropagation();",
                    "     sidebar.classList.toggle('chat-sidebar--open');"
                ]
            },
            {
                "oldStart": 402,
                "oldLines": 49,
                "newStart": 390,
                "newLines": 87,
                "lines": [
                    "     overlay.classList.remove('chat-overlay--visible');",
                    " });",
                    " ",
                    "-\/\/ Export Dropdown",
                    "-exportBtn.addEventListener('click', (e) => {",
                    "-    e.stopPropagation();",
                    "-    exportDropdown.classList.toggle('chat-dropdown--open');",
                    "+\/\/ ========== CONFIG PANEL ==========",
                    "+configPanelToggle.addEventListener('click', () => {",
                    "+    configPanel.classList.toggle('config-panel--open');",
                    "+    configPanelToggle.setAttribute('aria-expanded', configPanel.classList.contains('config-panel--open'));",
                    " });",
                    " ",
                    "-document.addEventListener('click', (e) => {",
                    "-    if (!exportDropdown.contains(e.target)) {",
                    "-        exportDropdown.classList.remove('chat-dropdown--open');",
                    "-    }",
                    "+configPanelClose.addEventListener('click', () => {",
                    "+    configPanel.classList.remove('config-panel--open');",
                    "+    configPanelToggle.setAttribute('aria-expanded', 'false');",
                    " });",
                    " ",
                    "-\/\/ Settings Toggle",
                    "-settingsToggle.addEventListener('click', () => {",
                    "-    settingsAdvanced.classList.toggle('chat-settings--hidden');",
                    "-    settingsToggle.textContent = settingsAdvanced.classList.contains('chat-settings--hidden') ? 'Mehr' : 'Weniger';",
                    "+\/\/ ========== SYNC CONFIG PANEL TO HIDDEN INPUTS ==========",
                    "+function syncToHidden(configId, hiddenId) {",
                    "+    const config = document.getElementById(configId);",
                    "+    const hidden = document.getElementById(hiddenId);",
                    "+    if (config && hidden) {",
                    "+        config.addEventListener('change', function() {",
                    "+            hidden.value = this.value;",
                    "+            \/\/ Visual feedback",
                    "+            this.classList.add('is-saving');",
                    "+            setTimeout(() => {",
                    "+                this.classList.remove('is-saving');",
                    "+                this.classList.add('is-saved');",
                    "+                setTimeout(() => this.classList.remove('is-saved'), 600);",
                    "+            }, 100);",
                    "+            \/\/ Save to localStorage",
                    "+            localStorage.setItem('chat-' + hiddenId, this.value);",
                    "+        });",
                    "+        \/\/ Load from localStorage",
                    "+        const saved = localStorage.getItem('chat-' + hiddenId);",
                    "+        if (saved) {",
                    "+            const option = config.querySelector('option[value=\"' + saved + '\"]');",
                    "+            if (option) {",
                    "+                config.value = saved;",
                    "+                hidden.value = saved;",
                    "+            }",
                    "+        }",
                    "+    }",
                    "+}",
                    "+",
                    "+syncToHidden('configModel', 'hiddenModel');",
                    "+syncToHidden('configContextLimit', 'hiddenContextLimit');",
                    "+syncToHidden('configMaxTokens', 'hiddenMaxTokens');",
                    "+syncToHidden('configSystemPrompt', 'hiddenSystemPrompt');",
                    "+syncToHidden('configStructure', 'hiddenStructure');",
                    "+syncToHidden('configAuthorProfile', 'hiddenAuthorProfile');",
                    "+",
                    "+\/\/ ========== COLLECTIONS SYNC ==========",
                    "+function syncCollections() {",
                    "+    const container = document.getElementById('hiddenCollections');",
                    "+    container.innerHTML = '';",
                    "+    document.querySelectorAll('#configCollections input[type=\"checkbox\"]:checked').forEach(cb => {",
                    "+        const input = document.createElement('input');",
                    "+        input.type = 'hidden';",
                    "+        input.name = 'collections[]';",
                    "+        input.value = cb.value;",
                    "+        container.appendChild(input);",
                    "+    });",
                    "+}",
                    "+syncCollections();",
                    "+document.querySelectorAll('#configCollections input[type=\"checkbox\"]').forEach(cb => {",
                    "+    cb.addEventListener('change', syncCollections);",
                    " });",
                    " ",
                    "-\/\/ Temperature Slider",
                    "-const tempSlider = document.getElementById('temperature');",
                    "-const tempValue = document.getElementById('tempValue');",
                    "-tempSlider.addEventListener('input', () => {",
                    "-    tempValue.textContent = parseFloat(tempSlider.value).toFixed(1);",
                    "+\/\/ ========== TEMPERATURE ==========",
                    "+const tempSlider = document.getElementById('configTemperature');",
                    "+const tempValue = document.getElementById('tempValuePanel');",
                    "+const hiddenTemp = document.getElementById('hiddenTemperature');",
                    "+",
                    "+tempSlider?.addEventListener('input', () => {",
                    "+    const val = parseFloat(tempSlider.value).toFixed(1);",
                    "+    tempValue.textContent = val;",
                    "+    hiddenTemp.value = val;",
                    "     updatePresetHighlight();",
                    " });",
                    " ",
                    "-\/\/ Update preset highlight based on current temp",
                    " function updatePresetHighlight() {",
                    "     const currentTemp = parseFloat(tempSlider.value);",
                    "-    document.querySelectorAll('.chat-preset').forEach(btn => {",
                    "+    document.querySelectorAll('.config-panel__preset').forEach(btn => {",
                    "         const btnTemp = parseFloat(btn.dataset.temp);",
                    "-        btn.classList.toggle('chat-preset--active', Math.abs(btnTemp - currentTemp) < 0.05);",
                    "-    });",
                    "-}",
                    "-",
                    "-\/\/ Presets",
                    "-document.querySelectorAll('.chat-preset').forEach(btn => {",
                    "-    btn.addEventListener('click', () => {",
                    "-        const temp = btn.dataset.temp;",
                    "-        const tokens = btn.dataset.tokens;",
                    "-        tempSlider.value = temp;",
                    "-        tempValue.textContent = parseFloat(temp).toFixed(1);",
                    "-        document.querySelector('select[name=\"max_tokens\"]').value = tokens;",
                    "+        btn.classList.toggle('config-panel__preset--active', Math.abs(btnTemp - currentTemp) < 0.05);",
                    "         document.querySelectorAll('.chat-preset').forEach(b => b.classList.remove('chat-preset--active'));",
                    "         btn.classList.add('chat-preset--active');",
                    "     });"
                ]
            }
        ],
        "userModified": false,
        "replaceAll": false
    }
}
← Vorheriger Zur Liste Nächster →