Files
vpd-permission-poc/src/main/resources/templates/mcp-chatbot.html
2026-07-01 08:06:03 +09:00

94 lines
4.4 KiB
HTML

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('대화형 검색')}"></head>
<body>
<nav th:replace="~{fragments/layout :: nav}"></nav>
<main class="container page-shell">
<section class="page-heading compact-heading">
<h1 class="h3">대화형 검색</h1>
<details class="explanation-details">
<summary>도움말</summary>
<p>질문을 MCP tool로 라우팅하고, 권한 태그·VPD 행 제한·ORDS 결과를 답변으로 정리합니다.</p>
</details>
</section>
<section th:if="${runtimeError}" class="alert alert-warning">
<strong th:text="${runtimeError.title()}">DB 연결 설정이 필요합니다.</strong>
<span th:text="${runtimeError.message()}">message</span>
</section>
<section class="content-band chat-shell">
<div class="chat-message assistant-message">
<strong>질문 실행</strong>
<p>추천 질문을 선택하거나 질문을 직접 입력하세요.</p>
<details class="explanation-details">
<summary>세션과 조회 결과 설명 보기</summary>
<p>Bearer Token 원문을 붙여 넣거나 사용자를 선택해 10분 검증 세션으로 실제 ORDS/VPD 결과를 조회할 수 있습니다.</p>
</details>
</div>
<div id="mcp-chatbot-result" class="chat-thread">
<div class="text-muted">대화 결과가 여기에 표시됩니다.</div>
</div>
<form hx-post="/mcp-chatbot" hx-target="#mcp-chatbot-result" hx-swap="beforeend" class="chat-form">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
<input type="hidden" name="contextPath" value="vpd-live">
<div class="chat-form-row">
<label>
Limit
<input class="form-control" name="limit" type="number" min="1" max="500" value="50">
</label>
</div>
<label>
Bearer Token 원문
<input class="form-control" name="bearerToken" type="password" autocomplete="off"
placeholder="비우면 라우팅만 확인합니다.">
</label>
<label>
검증 세션 사용자 (선택)
<select class="form-select" name="tempUserId">
<option value="">원문 토큰 사용</option>
<option th:each="user : ${users}" th:value="${user.userId()}" th:text="${user.username()}"></option>
</select>
<span class="form-hint">선택하면 질문 처리 중에만 검증 세션을 발급하고 완료 후 즉시 폐기합니다.</span>
</label>
<label>
질문
<textarea class="form-control" id="mcp-chat-question" name="question" rows="3"
placeholder="예: BOARD_POSTS에서 이 토큰으로 보이는 행과 NULL 처리 컬럼을 요약해줘." required></textarea>
</label>
<div class="question-presets" aria-label="질문 예시">
<button class="btn rw-btn-secondary question-preset" type="button"
data-question="기술 태그 권한에 따라 CB_V_SEARCH_DOCUMENTS에서 이 토큰으로 보이는 문서 행 수와 주요 컬럼을 요약해줘.">
문서 조회 요약
</button>
<button class="btn rw-btn-secondary question-preset" type="button"
data-question="CB_V_SEARCH_DOCUMENTS에서 VPD가 제외한 행과 contents 표시 보호 여부를 구분하고, 보이는 dept_code와 owner_emp_no를 정리해줘.">
민감 컬럼 확인
</button>
<button class="btn rw-btn-secondary question-preset" type="button"
data-question="CB_VECTOR_SEARCH_DOCUMENTS에서 SPRING_BOOT 또는 ORACLE_VPD 태그 권한으로 검색 가능한 검색 단위와 VPD 결과를 요약해줘.">
태그 벡터 검색
</button>
<button class="btn rw-btn-secondary question-preset" type="button"
data-question="질문과 가장 가까운 ORDS/VPD MCP tool을 선택하고, 선택 근거와 필요한 bearer token 흐름만 보여줘.">
라우팅만 확인
</button>
</div>
<button class="btn rw-btn-primary" type="submit">질문 보내기</button>
</form>
</section>
</main>
<script>
document.querySelectorAll('.question-preset').forEach((button) => {
button.addEventListener('click', () => {
const question = document.getElementById('mcp-chat-question');
question.value = button.dataset.question || '';
question.focus();
});
});
</script>
</body>
</html>