Spaces:

wiizm
/

soyailabs

Running on CPU Upgrade

soyailabs / templates /admin_messages.html

SOY NV AI

feat: ?섎? 湲곕컲 chunking 援ы쁽 諛??뱀냼??愿由??섏씠吏遺꾨━

d5b7e8c 18 days ago

22.8 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>메시지 확인 - SOY NV AI</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #f8f9fa;
	color: #202124;
	}

	.header {
	background: white;
	border-bottom: 1px solid #dadce0;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.header-title {
	font-size: 20px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.header-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	}

	.btn {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	display: inline-block;
	}

	.btn-primary {
	background: #1a73e8;
	color: white;
	}

	.btn-primary:hover {
	background: #1557b0;
	}

	.btn-secondary {
	background: #f1f3f4;
	color: #202124;
	}

	.btn-secondary:hover {
	background: #e8eaed;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px;
	}

	.page-header {
	margin-bottom: 24px;
	}

	.page-header h1 {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 8px;
	}

	.page-header p {
	color: #5f6368;
	}

	.card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	padding: 24px;
	margin-bottom: 24px;
	}

	.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	}

	.card-title {
	font-size: 18px;
	font-weight: 500;
	}

	.filters {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	}

	.filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	}

	.filter-group label {
	font-size: 12px;
	font-weight: 500;
	color: #5f6368;
	}

	.filter-group select,
	.filter-group input {
	padding: 8px 12px;
	border: 1px solid #dadce0;
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	}

	.filter-group select:focus,
	.filter-group input:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
	}

	table {
	width: 100%;
	border-collapse: collapse;
	}

	thead {
	background: #f8f9fa;
	}

	th, td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid #e8eaed;
	}

	th {
	font-weight: 500;
	font-size: 14px;
	color: #5f6368;
	}

	td {
	font-size: 14px;
	}

	.message-content {
	max-width: 500px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.message-content-full {
	max-width: none;
	white-space: normal;
	word-wrap: break-word;
	}

	.role-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	}

	.role-user {
	background: #e8f0fe;
	color: #1967d2;
	}

	.role-ai {
	background: #e8f5e9;
	color: #137333;
	}

	.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	}

	.pagination button {
	padding: 8px 12px;
	border: 1px solid #dadce0;
	background: white;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	}

	.pagination button:hover:not(:disabled) {
	background: #f1f3f4;
	}

	.pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	}

	.pagination .page-info {
	padding: 8px 12px;
	color: #5f6368;
	}

	.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	}

	.modal.active {
	display: flex;
	}

	.modal-content {
	background: white;
	border-radius: 8px;
	padding: 24px;
	width: 90%;
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
	}

	.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	}

	.modal-title {
	font-size: 20px;
	font-weight: 500;
	}

	.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #5f6368;
	}

	.message-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
	}

	.message-item {
	padding: 12px;
	border-radius: 8px;
	border-left: 4px solid;
	}

	.message-item.user {
	background: #e8f0fe;
	border-color: #1a73e8;
	}

	.message-item.ai {
	background: #e8f5e9;
	border-color: #34a853;
	}

	.message-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	}

	.message-item-role {
	font-weight: 500;
	font-size: 14px;
	}

	.message-item-time {
	font-size: 12px;
	color: #5f6368;
	}

	.message-item-content {
	white-space: pre-wrap;
	word-wrap: break-word;
	line-height: 1.6;
	}

	.alert {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	}

	.alert.error {
	background: #fce8e6;
	color: #c5221f;
	}
	</style>
	</head>
	<body>
	<div class="header">
	<div class="header-title">
	<span>🤖</span>
	<span>SOY NV AI 메시지 확인</span>
	</div>
	<div class="header-actions">
	<span style="margin-right: 12px; color: #5f6368;">{{ current_user.nickname or current_user.username }}</span>
	<a href="{{ url_for('main.admin') }}" class="btn btn-secondary">사용자 관리</a>
	<a href="{{ url_for('main.admin_webnovels') }}" class="btn btn-secondary">웹소설 관리</a>
	<a href="{{ url_for('main.index') }}" class="btn btn-secondary">메인으로</a>
	<a href="{{ url_for('main.logout') }}" class="btn btn-secondary">로그아웃</a>
	</div>
	</div>

	<div class="container">
	<div class="page-header">
	<h1>전체 메시지 확인</h1>
	<p>모든 사용자의 대화 메시지를 확인할 수 있습니다.</p>
	</div>

	<div id="alertContainer"></div>

	<!-- 대화 세션 목록 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">대화 세션 목록</div>
	</div>

	<div class="filters">
	<div class="filter-group">
	<label>사용자 필터</label>
	<select id="userFilter">
	<option value="">전체 사용자</option>
	</select>
	</div>
	<div class="filter-group">
	<label>검색</label>
	<input type="text" id="searchInput" placeholder="세션 제목 검색...">
	</div>
	<div class="filter-group" style="align-items: flex-end;">
	<button class="btn btn-primary" onclick="loadSessions()">조회</button>
	</div>
	</div>

	<table>
	<thead>
	<tr>
	<th>ID</th>
	<th>사용자</th>
	<th>제목</th>
	<th>모델</th>
	<th>메시지 수</th>
	<th>생성일</th>
	<th>수정일</th>
	<th>작업</th>
	</tr>
	</thead>
	<tbody id="sessionsTableBody">
	<tr>
	<td colspan="8" style="text-align: center; padding: 20px; color: #5f6368;">로딩 중...</td>
	</tr>
	</tbody>
	</table>

	<div class="pagination" id="sessionsPagination"></div>
	</div>

	<!-- 메시지 목록 -->
	<div class="card">
	<div class="card-header">
	<div class="card-title">메시지 목록</div>
	</div>

	<div class="filters">
	<div class="filter-group">
	<label>세션 ID</label>
	<input type="number" id="sessionIdFilter" placeholder="세션 ID">
	</div>
	<div class="filter-group" style="align-items: flex-end;">
	<button class="btn btn-primary" onclick="loadMessages()">조회</button>
	</div>
	</div>

	<table>
	<thead>
	<tr>
	<th>ID</th>
	<th>세션 ID</th>
	<th>역할</th>
	<th>내용</th>
	<th>시간</th>
	<th>작업</th>
	</tr>
	</thead>
	<tbody id="messagesTableBody">
	<tr>
	<td colspan="6" style="text-align: center; padding: 20px; color: #5f6368;">세션을 선택하거나 필터를 사용하세요</td>
	</tr>
	</tbody>
	</table>

	<div class="pagination" id="messagesPagination"></div>
	</div>
	</div>

	<!-- 메시지 상세 보기 모달 -->
	<div id="messageModal" class="modal">
	<div class="modal-content">
	<div class="modal-header">
	<div class="modal-title">메시지 상세</div>
	<button class="modal-close" onclick="closeMessageModal()">×</button>
	</div>
	<div id="messageModalContent"></div>
	</div>
	</div>

	<script>
	let currentSessionsPage = 1;
	let currentMessagesPage = 1;
	let selectedSessionId = null;

	function showAlert(message, type = 'error') {
	const container = document.getElementById('alertContainer');
	container.innerHTML = `<div class="alert ${type}">${message}</div>`;
	setTimeout(() => {
	container.innerHTML = '';
	}, 5000);
	}

	// 사용자 목록 로드
	async function loadUsers() {
	try {
	const response = await fetch('/api/admin/users');
	const data = await response.json();

	const userFilter = document.getElementById('userFilter');
	userFilter.innerHTML = '<option value="">전체 사용자</option>';

	if (data.users) {
	data.users.forEach(user => {
	const option = document.createElement('option');
	option.value = user.id;
	option.textContent = `${user.nickname \|\| user.username} (${user.username})`;
	userFilter.appendChild(option);
	});
	}
	} catch (error) {
	console.error('사용자 목록 로드 오류:', error);
	}
	}

	// 대화 세션 목록 로드
	async function loadSessions(page = 1) {
	try {
	const userId = document.getElementById('userFilter').value;
	const search = document.getElementById('searchInput').value;

	let url = `/api/admin/sessions?page=${page}&per_page=20`;
	if (userId) {
	url += `&user_id=${userId}`;
	}

	const response = await fetch(url);
	const data = await response.json();

	const tbody = document.getElementById('sessionsTableBody');
	tbody.innerHTML = '';

	if (data.sessions && data.sessions.length > 0) {
	data.sessions.forEach(session => {
	const row = document.createElement('tr');
	const createdDate = new Date(session.created_at).toLocaleString('ko-KR');
	const updatedDate = new Date(session.updated_at).toLocaleString('ko-KR');

	// 검색 필터 적용
	if (search && !session.title.toLowerCase().includes(search.toLowerCase())) {
	return;
	}

	row.innerHTML = `
	<td>${session.id}</td>
	<td>${session.nickname \|\| session.username \|\| 'Unknown'}</td>
	<td>${session.title \|\| '-'}</td>
	<td>${session.model_name \|\| '-'}</td>
	<td>${session.message_count \|\| 0}</td>
	<td>${createdDate}</td>
	<td>${updatedDate}</td>
	<td>
	<button class="btn btn-secondary" onclick="viewSessionMessages(${session.id})" style="padding: 4px 8px; font-size: 12px;">메시지 보기</button>
	</td>
	`;
	tbody.appendChild(row);
	});
	} else {
	tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; padding: 20px; color: #5f6368;">대화 세션이 없습니다.</td></tr>';
	}

	// 페이지네이션
	updateSessionsPagination(data.current_page, data.pages);
	currentSessionsPage = data.current_page;

	} catch (error) {
	showAlert(`대화 세션 조회 오류: ${error.message}`, 'error');
	console.error('대화 세션 조회 오류:', error);
	}
	}

	// 메시지 목록 로드
	async function loadMessages(page = 1) {
	try {
	const sessionId = document.getElementById('sessionIdFilter').value;

	let url = `/api/admin/messages?page=${page}&per_page=50`;
	if (sessionId) {
	url += `&session_id=${sessionId}`;
	} else if (selectedSessionId) {
	url += `&session_id=${selectedSessionId}`;
	}

	const response = await fetch(url);
	const data = await response.json();

	const tbody = document.getElementById('messagesTableBody');
	tbody.innerHTML = '';

	if (data.messages && data.messages.length > 0) {
	data.messages.forEach(msg => {
	const row = document.createElement('tr');
	const date = new Date(msg.created_at).toLocaleString('ko-KR');
	const contentPreview = msg.content.length > 100 ? msg.content.substring(0, 100) + '...' : msg.content;

	row.innerHTML = `
	<td>${msg.id}</td>
	<td>${msg.session_id}</td>
	<td><span class="role-badge role-${msg.role}">${msg.role === 'user' ? '사용자' : 'AI'}</span></td>
	<td class="message-content">${escapeHtml(contentPreview)}</td>
	<td>${date}</td>
	<td>
	<button class="btn btn-secondary" onclick="viewMessage(${msg.id}, '${msg.role}', ${JSON.stringify(msg.content).replace(/"/g, '"')})" style="padding: 4px 8px; font-size: 12px;">상세 보기</button>
	</td>
	`;
	tbody.appendChild(row);
	});
	} else {
	tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 20px; color: #5f6368;">메시지가 없습니다.</td></tr>';
	}

	// 페이지네이션
	updateMessagesPagination(data.current_page, data.pages);
	currentMessagesPage = data.current_page;

	} catch (error) {
	showAlert(`메시지 조회 오류: ${error.message}`, 'error');
	console.error('메시지 조회 오류:', error);
	}
	}

	// 세션 메시지 보기
	function viewSessionMessages(sessionId) {
	selectedSessionId = sessionId;
	document.getElementById('sessionIdFilter').value = sessionId;
	loadMessages(1);
	}

	// 메시지 상세 보기
	function viewMessage(messageId, role, content) {
	const modal = document.getElementById('messageModal');
	const modalContent = document.getElementById('messageModalContent');

	modalContent.innerHTML = `
	<div class="message-view">
	<div class="message-item ${role}">
	<div class="message-item-header">
	<span class="message-item-role role-badge role-${role}">${role === 'user' ? '사용자' : 'AI'}</span>
	<span class="message-item-time">메시지 ID: ${messageId}</span>
	</div>
	<div class="message-item-content">${escapeHtml(content)}</div>
	</div>
	</div>
	`;

	modal.classList.add('active');
	}

	function closeMessageModal() {
	document.getElementById('messageModal').classList.remove('active');
	}

	// 페이지네이션 업데이트
	function updateSessionsPagination(currentPage, totalPages) {
	const pagination = document.getElementById('sessionsPagination');
	pagination.innerHTML = '';

	pagination.appendChild(createPaginationButton('이전', currentPage > 1, () => loadSessions(currentPage - 1)));
	pagination.appendChild(createPaginationInfo(`${currentPage} / ${totalPages}`));
	pagination.appendChild(createPaginationButton('다음', currentPage < totalPages, () => loadSessions(currentPage + 1)));
	}

	function updateMessagesPagination(currentPage, totalPages) {
	const pagination = document.getElementById('messagesPagination');
	pagination.innerHTML = '';

	pagination.appendChild(createPaginationButton('이전', currentPage > 1, () => loadMessages(currentPage - 1)));
	pagination.appendChild(createPaginationInfo(`${currentPage} / ${totalPages}`));
	pagination.appendChild(createPaginationButton('다음', currentPage < totalPages, () => loadMessages(currentPage + 1)));
	}

	function createPaginationButton(text, enabled, onClick) {
	const button = document.createElement('button');
	button.textContent = text;
	button.disabled = !enabled;
	if (enabled) {
	button.onclick = onClick;
	}
	return button;
	}

	function createPaginationInfo(text) {
	const span = document.createElement('span');
	span.className = 'page-info';
	span.textContent = text;
	return span;
	}

	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}

	// 모달 외부 클릭 시 닫기
	document.getElementById('messageModal').addEventListener('click', function(e) {
	if (e.target === this) {
	closeMessageModal();
	}
	});

	// 검색 엔터 키
	document.getElementById('searchInput').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	loadSessions(1);
	}
	});

	// 페이지 로드 시 초기화
	window.addEventListener('load', () => {
	loadUsers();
	loadSessions();
	});
	</script>
	</body>
	</html>