From c7a13a85d84e908142c43b5449ec65bb33ac5b61 Mon Sep 17 00:00:00 2001
From: djeon <daewoong.jeon@kt.com>
Date: Thu, 30 Oct 2025 15:16:38 +0900
Subject: [PATCH] feat: add rag test UI

---
 rag/test_sse.html | 426 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 352 insertions(+), 74 deletions(-)
diff --git a/rag/test_sse.html b/rag/test_sse.html
index 8ad3beb..409d44b 100644
--- a/rag/test_sse.html
+++ b/rag/test_sse.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SSE 용어 검색 테스트</title>
+    <title>SSE 용어 검색 및 연관 회의록 테스트</title>
     <style>
         * {
             margin: 0;
@@ -19,7 +19,7 @@
         }
 
         .container {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
             background: white;
             border-radius: 10px;
@@ -73,6 +73,23 @@
             border-color: #667eea;
         }
 
+        .stream-toggle {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .stream-toggle label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+        }
+
+        .stream-toggle input[type="checkbox"] {
+            width: auto;
+        }
+
         .button-group {
             display: flex;
             gap: 10px;
@@ -177,9 +194,33 @@
             padding: 30px;
         }
 
+        .results-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .results-section {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .results-header {
+            background: #f8f9fa;
+            padding: 15px 20px;
+            font-weight: 600;
+            border-bottom: 2px solid #e0e0e0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
         .results {
             max-height: 500px;
             overflow-y: auto;
+            padding: 20px;
         }
 
         .result-item {
@@ -187,10 +228,17 @@
             margin-bottom: 15px;
             border-radius: 8px;
             background: #f8f9fa;
-            border-left: 4px solid #667eea;
             animation: slideIn 0.3s ease-out;
         }
 
+        .result-item.term-result {
+            border-left: 4px solid #667eea;
+        }
+
+        .result-item.minutes-result {
+            border-left: 4px solid #ff9800;
+        }
+
         @keyframes slideIn {
             from {
                 opacity: 0;
@@ -273,6 +321,54 @@
             font-weight: 600;
         }
 
+        .minutes-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .minutes-card {
+            padding: 15px;
+            background: white;
+            border-radius: 5px;
+            border: 1px solid #e0e0e0;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .minutes-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        .minutes-title {
+            font-weight: 600;
+            color: #ff9800;
+            margin-bottom: 5px;
+        }
+
+        .minutes-info {
+            font-size: 13px;
+            color: #666;
+            margin-bottom: 5px;
+        }
+
+        .minutes-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 11px;
+            color: #999;
+            margin-top: 10px;
+        }
+
+        .minutes-score {
+            background: #ff9800;
+            color: white;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-weight: 600;
+        }
+
         .empty-state {
             text-align: center;
             padding: 60px 20px;
@@ -304,6 +400,11 @@
             color: #1565c0;
         }
 
+        .log-minutes-result {
+            background: #fff3e0;
+            color: #e65100;
+        }
+
         .log-heartbeat {
             background: #f3e5f5;
             color: #7b1fa2;
@@ -318,8 +419,8 @@
 <body>
     <div class="container">
         <div class="header">
-            <h1>🔍 SSE 용어 검색 테스트</h1>
-            <p>실시간 용어 검색 결과를 확인하세요</p>
+            <h1>🔍 SSE 용어 검색 및 연관 회의록 테스트</h1>
+            <p>실시간 용어 검색 및 연관 회의록 결과를 확인하세요</p>
         </div>
 
         <div class="controls">
@@ -331,6 +432,16 @@
                 <label for="sessionId">세션 ID (Meeting ID)</label>
                 <input type="text" id="sessionId" value="meeting-124" placeholder="meeting-124">
             </div>
+            <div class="stream-toggle">
+                <label>
+                    <input type="checkbox" id="enableTermStream" checked>
+                    용어 검색 스트림 활성화
+                </label>
+                <label>
+                    <input type="checkbox" id="enableMinutesStream" checked>
+                    연관 회의록 스트림 활성화
+                </label>
+            </div>
             <div class="button-group">
                 <button class="btn-connect" onclick="connect()">🔌 연결</button>
                 <button class="btn-disconnect" onclick="disconnect()" disabled>🔌 연결 해제</button>
@@ -345,22 +456,47 @@
                 <span id="statusText">연결 안됨</span>
             </div>
             <div class="status-item">
-                <span>수신: <strong id="messageCount">0</strong>개</span>
+                <span>용어 수신: <strong id="termCount">0</strong>개</span>
+            </div>
+            <div class="status-item">
+                <span>회의록 수신: <strong id="minutesCount">0</strong>개</span>
             </div>
         </div>
 
         <div class="content">
-            <h2 style="margin-bottom: 20px;">📊 용어 검색 결과</h2>
-            <div class="results" id="results">
-                <div class="empty-state">
-                    <svg viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-                    </svg>
-                    <p>연결 후 용어 검색 결과가 여기에 표시됩니다</p>
+            <div class="results-grid">
+                <div class="results-section">
+                    <div class="results-header">
+                        <span>📊 용어 검색 결과</span>
+                        <span id="termResultCount">0건</span>
+                    </div>
+                    <div class="results" id="termResults">
+                        <div class="empty-state">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                            </svg>
+                            <p>연결 후 용어 검색 결과가 여기에 표시됩니다</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="results-section">
+                    <div class="results-header">
+                        <span>📝 연관 회의록 결과</span>
+                        <span id="minutesResultCount">0건</span>
+                    </div>
+                    <div class="results" id="minutesResults">
+                        <div class="empty-state">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+                            </svg>
+                            <p>연결 후 연관 회의록 결과가 여기에 표시됩니다</p>
+                        </div>
+                    </div>
                 </div>
             </div>
 
-            <h2 style="margin: 30px 0 20px 0;">📝 로그</h2>
+            <h2 style="margin-bottom: 20px;">📝 로그</h2>
             <div class="results" id="logs" style="max-height: 200px;">
                 <div class="empty-state" style="padding: 30px;">
                     <p>로그가 여기에 표시됩니다</p>
@@ -370,65 +506,121 @@
     </div>
 
     <script>
-        let eventSource = null;
-        let messageCount = 0;
+        let termEventSource = null;
+        let minutesEventSource = null;
+        let termMessageCount = 0;
+        let minutesMessageCount = 0;
 
         function connect() {
             const serverUrl = document.getElementById('serverUrl').value;
             const sessionId = document.getElementById('sessionId').value;
+            const enableTermStream = document.getElementById('enableTermStream').checked;
+            const enableMinutesStream = document.getElementById('enableMinutesStream').checked;
 
             if (!serverUrl || !sessionId) {
                 alert('서버 URL과 세션 ID를 입력해주세요');
                 return;
             }
 
-            const url = `${serverUrl}/api/rag/terms/stream/${sessionId}`;
+            // 용어 검색 스트림 연결
+            if (enableTermStream) {
+                connectTermStream(serverUrl, sessionId);
+            }
 
-            addLog('연결 시도 중...', 'connected');
-
-            eventSource = new EventSource(url);
-
-            // 연결 성공
-            eventSource.addEventListener('connected', (e) => {
-                const data = JSON.parse(e.data);
-                updateStatus(true);
-                addLog(`연결 성공: ${JSON.stringify(data)}`, 'connected');
-            });
-
-            // 용어 검색 결과 수신
-            eventSource.addEventListener('term_result', (e) => {
-                const data = JSON.parse(e.data);
-                messageCount++;
-                document.getElementById('messageCount').textContent = messageCount;
-                addResult(data);
-                addLog(`용어 결과 수신: ${data.total_count}개`, 'term-result');
-            });
-
-            // Heartbeat
-            eventSource.addEventListener('heartbeat', (e) => {
-                addLog('Heartbeat 수신', 'heartbeat');
-            });
-
-            // 에러 처리
-            eventSource.onerror = (error) => {
-                console.error('SSE 에러:', error);
-                addLog('연결 에러 발생', 'error');
-                updateStatus(false);
-            };
+            // 연관 회의록 스트림 연결
+            if (enableMinutesStream) {
+                connectMinutesStream(serverUrl, sessionId);
+            }
 
             // UI 업데이트
             document.querySelector('.btn-connect').disabled = true;
             document.querySelector('.btn-disconnect').disabled = false;
         }
 
-        function disconnect() {
-            if (eventSource) {
-                eventSource.close();
-                eventSource = null;
+        function connectTermStream(serverUrl, sessionId) {
+            const url = `${serverUrl}/api/rag/terms/stream/${sessionId}`;
+            addLog('용어 검색 스트림 연결 시도 중...', 'connected');
+
+            termEventSource = new EventSource(url);
+
+            // 연결 성공
+            termEventSource.addEventListener('connected', (e) => {
+                const data = JSON.parse(e.data);
+                updateStatus(true);
+                addLog(`용어 스트림 연결 성공: ${JSON.stringify(data)}`, 'connected');
+            });
+
+            // 용어 검색 결과 수신
+            termEventSource.addEventListener('term_result', (e) => {
+                const data = JSON.parse(e.data);
+                termMessageCount++;
+                document.getElementById('termCount').textContent = termMessageCount;
+                addTermResult(data);
+                addLog(`용어 결과 수신: ${data.total_count}개`, 'term-result');
+            });
+
+            // Heartbeat
+            termEventSource.addEventListener('heartbeat', (e) => {
+                addLog('용어 스트림 Heartbeat', 'heartbeat');
+            });
+
+            // 에러 처리
+            termEventSource.onerror = (error) => {
+                console.error('용어 스트림 SSE 에러:', error);
+                addLog('용어 스트림 연결 에러 발생', 'error');
                 updateStatus(false);
-                addLog('연결 해제됨', 'error');
+            };
+        }
+
+        function connectMinutesStream(serverUrl, sessionId) {
+            const url = `${serverUrl}/api/rag/minutes/stream/${sessionId}`;
+            addLog('연관 회의록 스트림 연결 시도 중...', 'connected');
+
+            minutesEventSource = new EventSource(url);
+
+            // 연결 성공
+            minutesEventSource.addEventListener('connected', (e) => {
+                const data = JSON.parse(e.data);
+                updateStatus(true);
+                addLog(`회의록 스트림 연결 성공: ${JSON.stringify(data)}`, 'connected');
+            });
+
+            // 연관 회의록 결과 수신
+            minutesEventSource.addEventListener('related_minutes_result', (e) => {
+                const data = JSON.parse(e.data);
+                minutesMessageCount++;
+                document.getElementById('minutesCount').textContent = minutesMessageCount;
+                addMinutesResult(data);
+                addLog(`회의록 결과 수신: ${data.total_count}개`, 'minutes-result');
+            });
+
+            // Heartbeat
+            minutesEventSource.addEventListener('heartbeat', (e) => {
+                addLog('회의록 스트림 Heartbeat', 'heartbeat');
+            });
+
+            // 에러 처리
+            minutesEventSource.onerror = (error) => {
+                console.error('회의록 스트림 SSE 에러:', error);
+                addLog('회의록 스트림 연결 에러 발생', 'error');
+                updateStatus(false);
+            };
+        }
+
+        function disconnect() {
+            if (termEventSource) {
+                termEventSource.close();
+                termEventSource = null;
+                addLog('용어 스트림 연결 해제됨', 'error');
             }
 
+            if (minutesEventSource) {
+                minutesEventSource.close();
+                minutesEventSource = null;
+                addLog('회의록 스트림 연결 해제됨', 'error');
+            }
+
+            updateStatus(false);
             document.querySelector('.btn-connect').disabled = false;
             document.querySelector('.btn-disconnect').disabled = true;
         }
@@ -446,8 +638,8 @@
             }
         }
 
-        function addResult(data) {
-            const resultsDiv = document.getElementById('results');
+        function addTermResult(data) {
+            const resultsDiv = document.getElementById('termResults');
 
             // 빈 상태 제거
             const emptyState = resultsDiv.querySelector('.empty-state');
@@ -456,7 +648,7 @@
             }
 
             const resultItem = document.createElement('div');
-            resultItem.className = 'result-item';
+            resultItem.className = 'result-item term-result';
 
             const now = new Date().toLocaleTimeString('ko-KR');
 
@@ -490,6 +682,67 @@
             `;
 
             resultsDiv.insertBefore(resultItem, resultsDiv.firstChild);
+            updateTermResultCount();
+        }
+
+        function addMinutesResult(data) {
+            const resultsDiv = document.getElementById('minutesResults');
+
+            // 빈 상태 제거
+            const emptyState = resultsDiv.querySelector('.empty-state');
+            if (emptyState) {
+                emptyState.remove();
+            }
+
+            const resultItem = document.createElement('div');
+            resultItem.className = 'result-item minutes-result';
+
+            const now = new Date().toLocaleTimeString('ko-KR');
+
+            let minutesHtml = '';
+            if (data.related_minutes && data.related_minutes.length > 0) {
+                minutesHtml = '<div class="minutes-list">';
+                data.related_minutes.forEach(minutes => {
+                    const scheduledDate = minutes.scheduled_at ? new Date(minutes.scheduled_at).toLocaleDateString('ko-KR') : 'N/A';
+                    minutesHtml += `
+                        <div class="minutes-card">
+                            <div class="minutes-title">${minutes.title}</div>
+                            <div class="minutes-info">📍 ${minutes.location || 'N/A'}</div>
+                            <div class="minutes-info">📅 ${scheduledDate}</div>
+                            <div class="minutes-info">🎯 ${minutes.purpose || 'N/A'}</div>
+                            <div class="minutes-meta">
+                                <span>회의 ID: ${minutes.meeting_id}</span>
+                                <span class="minutes-score">유사도: ${minutes.similarity_score.toFixed(3)}</span>
+                            </div>
+                        </div>
+                    `;
+                });
+                minutesHtml += '</div>';
+            } else {
+                minutesHtml = '<p style="color: #999;">연관된 회의록이 없습니다</p>';
+            }
+
+            resultItem.innerHTML = `
+                <div class="result-header">
+                    <strong>세그먼트: ${data.segment_id}</strong>
+                    <span class="result-time">${now}</span>
+                </div>
+                <div class="result-text">"${data.text}..."</div>
+                ${minutesHtml}
+            `;
+
+            resultsDiv.insertBefore(resultItem, resultsDiv.firstChild);
+            updateMinutesResultCount();
+        }
+
+        function updateTermResultCount() {
+            const count = document.getElementById('termResults').querySelectorAll('.result-item').length;
+            document.getElementById('termResultCount').textContent = `${count}건`;
+        }
+
+        function updateMinutesResultCount() {
+            const count = document.getElementById('minutesResults').querySelectorAll('.result-item').length;
+            document.getElementById('minutesResultCount').textContent = `${count}건`;
         }
 
         function addLog(message, type) {
@@ -527,20 +780,27 @@
             addLog('연결 상태 확인 중...', 'connected');
 
             try {
-                const response = await fetch(`${serverUrl}/api/rag/terms/stream/${sessionId}/status`);
-
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                // 용어 스트림 상태 확인
+                const termResponse = await fetch(`${serverUrl}/api/rag/terms/stream/${sessionId}/status`);
+                if (termResponse.ok) {
+                    const termData = await termResponse.json();
+                    if (termData.connected) {
+                        addLog(`✅ 용어 스트림: 연결됨 (세션 ID: ${termData.session_id})`, 'connected');
+                    } else {
+                        addLog(`❌ 용어 스트림: 연결 안됨 (세션 ID: ${termData.session_id})`, 'error');
+                    }
                 }
 
-                const data = await response.json();
-
-                if (data.connected) {
-                    addLog(`✅ 연결 상태: 연결됨 (세션 ID: ${data.session_id})`, 'connected');
-                    updateStatus(true);
-                } else {
-                    addLog(`❌ 연결 상태: 연결 안됨 (세션 ID: ${data.session_id})`, 'error');
-                    updateStatus(false);
+                // 회의록 스트림 상태 확인
+                const minutesResponse = await fetch(`${serverUrl}/api/rag/minutes/stream/${sessionId}/status`);
+                if (minutesResponse.ok) {
+                    const minutesData = await minutesResponse.json();
+                    if (minutesData.connected) {
+                        addLog(`✅ 회의록 스트림: 연결됨 (세션 ID: ${minutesData.session_id})`, 'connected');
+                        updateStatus(true);
+                    } else {
+                        addLog(`❌ 회의록 스트림: 연결 안됨 (세션 ID: ${minutesData.session_id})`, 'error');
+                    }
                 }
             } catch (error) {
                 addLog(`❌ 상태 확인 실패: ${error.message}`, 'error');
@@ -549,8 +809,8 @@
         }
 
         function clearResults() {
-            const resultsDiv = document.getElementById('results');
-            resultsDiv.innerHTML = `
+            const termResultsDiv = document.getElementById('termResults');
+            termResultsDiv.innerHTML = `
                 <div class="empty-state">
                     <svg viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
@@ -558,14 +818,32 @@
                     <p>연결 후 용어 검색 결과가 여기에 표시됩니다</p>
                 </div>
             `;
-            messageCount = 0;
-            document.getElementById('messageCount').textContent = '0';
+
+            const minutesResultsDiv = document.getElementById('minutesResults');
+            minutesResultsDiv.innerHTML = `
+                <div class="empty-state">
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
+                    </svg>
+                    <p>연결 후 연관 회의록 결과가 여기에 표시됩니다</p>
+                </div>
+            `;
+
+            termMessageCount = 0;
+            minutesMessageCount = 0;
+            document.getElementById('termCount').textContent = '0';
+            document.getElementById('minutesCount').textContent = '0';
+            updateTermResultCount();
+            updateMinutesResultCount();
         }
 
         // 페이지 이탈 시 연결 해제
         window.addEventListener('beforeunload', () => {
-            if (eventSource) {
-                eventSource.close();
+            if (termEventSource) {
+                termEventSource.close();
+            }
+            if (minutesEventSource) {
+                minutesEventSource.close();
             }
         });
     </script>
