<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat - KiboStudio</title>
    <link rel="stylesheet" href="/static/css/studio.css">
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="/static/js/studio.js"></script>
    <style>
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 100px);
        }
        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 12px;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .chat-bubble {
            max-width: 75%;
            padding: 10px 14px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
            white-space: pre-wrap;
        }
        .chat-bubble.user {
            align-self: flex-end;
            background: var(--accent);
            color: #fff;
            border-bottom-right-radius: 4px;
        }
        .chat-bubble.assistant {
            align-self: flex-start;
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-bottom-left-radius: 4px;
        }
        .chat-bubble.error {
            align-self: center;
            background: rgba(239,68,68,0.15);
            color: var(--danger);
            font-size: 13px;
            border-radius: 8px;
        }
        .chat-bubble .bubble-meta {
            font-size: 11px;
            opacity: 0.6;
            margin-top: 4px;
        }
        .chat-bubble.assistant .bubble-agent {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 4px;
        }
        .chat-input-bar {
            display: flex;
            gap: 8px;
            align-items: end;
        }
        .chat-input-bar textarea {
            flex: 1;
            resize: none;
            min-height: 44px;
            max-height: 120px;
            padding: 10px 14px;
            font-size: 14px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: inherit;
        }
        .chat-input-bar textarea:focus {
            outline: none;
            border-color: var(--accent);
        }
        .chat-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            gap: 8px;
        }
        .chat-empty .icon { font-size: 48px; opacity: 0.3; }
    </style>
</head>
<body>
<div>
    <header class="adk-topbar">
        <a href="/" class="logo">KiboStudio</a>
        <span class="spacer"></span>
        <div class="nav-links">
            <a href="/traces">Traces</a>
            <a href="/prompts">Prompts</a>
            <a href="/eval">Eval</a>
            <a href="/discovery">Discovery</a>
            <a href="/flags">Flags</a>
        </div>
    </header>
    <main style="padding: 24px 32px; max-width: 1200px; margin: 0 auto;" x-data="chatPage">
        <div class="chat-container">
            <div class="chat-header">
                <div class="form-group" style="margin-bottom: 0; flex: 1;">
                    <select x-model="selectedAgent" style="margin: 0;">
                        <option value="" disabled>-- Select agent --</option>
                        <template x-for="a in agents" :key="a.agent_id">
                            <option :value="a.agent_id" x-text="(a.name || a.agent_id) + ' (' + a.status + ')'"></option>
                        </template>
                    </select>
                </div>
                <button class="btn" @click="clearChat()" title="Clear chat">Clear</button>
                <button class="btn" @click="loadAgents()" title="Refresh agents">Refresh</button>
            </div>

            <template x-if="agents.length === 0 && !loading">
                <div class="chat-empty">
                    <div class="icon">&#9993;</div>
                    <p>No agents registered.</p>
                    <p style="font-size: 12px;">Register agents via the Discovery page or the SDK.</p>
                </div>
            </template>

            <template x-if="agents.length > 0">
                <div class="chat-messages" id="chat-messages">
                    <template x-if="messages.length === 0">
                        <div class="chat-empty">
                            <div class="icon">&#9993;</div>
                            <p>Send a message to start chatting with the agent.</p>
                        </div>
                    </template>
                    <template x-for="(msg, idx) in messages" :key="idx">
                        <div class="chat-bubble" :class="msg.role">
                            <template x-if="msg.role === 'assistant' && msg.agent">
                                <div class="bubble-agent" x-text="msg.agent"></div>
                            </template>
                            <div x-text="msg.content"></div>
                            <div class="bubble-meta" x-text="msg.ts"></div>
                        </div>
                    </template>
                    <template x-if="sending">
                        <div class="chat-bubble assistant">
                            <div style="opacity: 0.5;">Thinking...</div>
                        </div>
                    </template>
                </div>
            </template>

            <template x-if="agents.length > 0">
                <div class="chat-input-bar">
                    <textarea
                        x-model="input"
                        placeholder="Type your message..."
                        @keydown.enter.prevent="if (!$event.shiftKey) sendMessage()"
                        :disabled="!selectedAgent || sending"
                        rows="1"
                    ></textarea>
                    <button class="btn btn-primary" @click="sendMessage()" :disabled="!selectedAgent || sending || !input.trim()">
                        Send
                    </button>
                </div>
            </template>
        </div>
    </main>
</div>
</body>
</html>
