static/js/knowledge.js

/**
 * RAG 챗봇 클라이언트 - 지식베이스 관리 기능
 * 문서 업로드 및 지식베이스 상태 관리
 */

document.addEventListener('DOMContentLoaded', function() {
    // DOM 요소
    const uploadButton = document.getElementById('uploadButton');
    const uploadSuccess = document.getElementById('uploadSuccess');
    const uploadSuccessMessage = document.getElementById('uploadSuccessMessage');
    const uploadError = document.getElementById('uploadError');
    const uploadErrorMessage = document.getElementById('uploadErrorMessage');
    const refreshStatus = document.getElementById('refreshStatus');
    const databaseStats = document.getElementById('databaseStats');
    const documentsContainer = document.getElementById('documentsContainer');
    
    // Dropzone 설정
    Dropzone.autoDiscover = false;
    
    const documentUploadDropzone = new Dropzone("#documentUploadForm", {
        url: "/api/upload",
        maxFilesize: 10, // MB
        acceptedFiles: ".txt,.md,.pdf,.docx,.csv",
        addRemoveLinks: true,
        dictDefaultMessage: "파일을 끌어다 놓거나 클릭하여 선택하세요",
        dictRemoveFile: "제거",
        dictCancelUpload: "업로드 취소",
        dictUploadCanceled: "업로드 취소됨",
        dictFileTooBig: "파일이 너무 큽니다 ({{filesize}}MB). 최대 파일 크기: {{maxFilesize}}MB.",
        dictInvalidFileType: "이 형식의 파일은 업로드할 수 없습니다.",
        autoProcessQueue: false,
        maxFiles: 1
    });
    
    // 파일이 추가되면 업로드 버튼 활성화
    documentUploadDropzone.on("addedfile", function(file) {
        uploadButton.disabled = false;
        hideAlerts();
    });
    
    // 파일이 제거되면 업로드 버튼 비활성화
    documentUploadDropzone.on("removedfile", function(file) {
        if (documentUploadDropzone.files.length === 0) {
            uploadButton.disabled = true;
        }
    });
    
    // 업로드 버튼 클릭 이벤트
    uploadButton.addEventListener('click', function() {
        if (documentUploadDropzone.files.length > 0) {
            uploadButton.disabled = true;
            uploadButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>업로드 중...';
            documentUploadDropzone.processQueue();
        }
    });
    
    // 업로드 성공 이벤트
    documentUploadDropzone.on("success", function(file, response) {
        uploadButton.innerHTML = '<i class="fas fa-upload me-2"></i>업로드';
        uploadButton.disabled = true;
        
        // 성공 메시지 표시
        uploadSuccess.classList.remove('d-none');
        uploadSuccessMessage.textContent = response.message || "문서가 성공적으로 업로드되었습니다.";
        
        // 파일 제거
        documentUploadDropzone.removeFile(file);
        
        // 지식베이스 상태 새로고침
        setTimeout(fetchDatabaseStats, 1000);
        setTimeout(fetchDocuments, 1000);
    });
    
    // 업로드 오류 이벤트
    documentUploadDropzone.on("error", function(file, errorMessage, xhr) {
        uploadButton.innerHTML = '<i class="fas fa-upload me-2"></i>업로드';
        uploadButton.disabled = false;
        
        // 오류 메시지 표시
        uploadError.classList.remove('d-none');
        
        if (typeof errorMessage === 'object' && errorMessage.error) {
            uploadErrorMessage.textContent = errorMessage.error;
        } else if (typeof errorMessage === 'string') {
            uploadErrorMessage.textContent = errorMessage;
        } else {
            uploadErrorMessage.textContent = "업로드 중 오류가 발생했습니다.";
        }
    });
    
    // 새로고침 버튼 클릭 이벤트
    refreshStatus.addEventListener('click', function() {
        fetchDatabaseStats();
        fetchDocuments();
    });
    
    /**
     * 알림창 숨기기
     */
    function hideAlerts() {
        uploadSuccess.classList.add('d-none');
        uploadError.classList.add('d-none');
    }
    
    /**
     * 지식베이스 상태 가져오기
     */
    async function fetchDatabaseStats() {
        try {
            databaseStats.innerHTML = `
                <div class="d-flex justify-content-center align-items-center" style="height: 100px;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            `;
            
            const response = await fetch('/api/documents');
            
            if (!response.ok) {
                throw new Error('API 요청 실패');
            }
            
            const data = await response.json();
            
            if (data.enabled === false) {
                databaseStats.innerHTML = `
                    <div class="alert alert-warning mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>캐시가 활성화되지 않았습니다.
                    </div>
                `;
                return;
            }
            
            const stats = data.stats || {};
            
            databaseStats.innerHTML = `
                <div class="row text-center">
                    <div class="col-6 border-end">
                        <h3 class="mb-0">${stats.size || 0}</h3>
                        <p class="text-muted mb-0">캐시 항목</p>
                    </div>
                    <div class="col-6">
                        <h3 class="mb-0">${stats.max_size || 0}</h3>
                        <p class="text-muted mb-0">최대 항목 수</p>
                    </div>
                </div>
                <hr>
                <div class="text-center">
                    <p class="mb-0">캐시 TTL: ${stats.ttl || 0}초</p>
                    <p class="mb-2">최대 항목 나이: ${(stats.oldest_item_age || 0).toFixed(1)}초</p>
                </div>
                <div class="d-grid">
                    <button class="btn btn-sm btn-outline-primary" id="clearCache">캐시 비우기</button>
                </div>
            `;
            
            // 캐시 비우기 버튼 이벤트 리스너
            document.getElementById('clearCache').addEventListener('click', clearCache);
            
        } catch (err) {
            console.error('지식베이스 상태 가져오기 실패:', err);
            databaseStats.innerHTML = `
                <div class="alert alert-danger mb-0">
                    <i class="fas fa-exclamation-circle me-2"></i>지식베이스 상태를 가져오는 중 오류가 발생했습니다.
                </div>
            `;
        }
    }
    
    /**
     * 문서 목록 가져오기
     */
    async function fetchDocuments() {
        try {
            documentsContainer.innerHTML = `
                <div class="text-center p-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">문서 목록을 불러오는 중...</p>
                </div>
            `;
            
            const response = await fetch('/api/documents');
            
            if (!response.ok) {
                throw new Error('API 요청 실패');
            }
            
            const data = await response.json();
            const documents = data.documents || [];
            
            if (documents.length === 0) {
                documentsContainer.innerHTML = `
                    <div class="text-center p-4">
                        <i class="fas fa-file-alt fa-3x mb-3 text-muted"></i>
                        <p>지식베이스에 등록된 문서가 없습니다.</p>
                        <p class="text-muted small">왼쪽 패널에서 문서를 업로드하세요.</p>
                    </div>
                `;
                return;
            }
            
            // 문서 목록 생성
            const documentsList = document.createElement('div');
            documentsList.className = 'list-group list-group-flush';
            
            documents.forEach(doc => {
                const docItem = createDocumentItem(doc);
                documentsList.appendChild(docItem);
            });
            
            documentsContainer.innerHTML = '';
            documentsContainer.appendChild(documentsList);
            
        } catch (err) {
            console.error('문서 목록 가져오기 실패:', err);
            documentsContainer.innerHTML = `
                <div class="alert alert-danger m-3">
                    <i class="fas fa-exclamation-circle me-2"></i>문서 목록을 가져오는 중 오류가 발생했습니다.
                </div>
            `;
        }
    }
    
    /**
     * 문서 항목 생성
     * @param {Object} doc - 문서 정보
     * @returns {HTMLElement} - 문서 항목 요소
     */
    function createDocumentItem(doc) {
        const template = document.getElementById('documentItemTemplate');
        const docNode = template.content.cloneNode(true);
        
        docNode.querySelector('.document-name').textContent = doc.filename || doc.source || 'Unnamed Document';
        docNode.querySelector('.document-chunks').textContent = doc.chunks || 0;
        docNode.querySelector('.document-type').textContent = doc.filetype || 'UNKNOWN';
        
        return docNode.firstElementChild;
    }
    
    /**
     * 캐시 비우기
     */
    async function clearCache() {
        try {
            if (!confirm('정말 캐시를 비우시겠습니까?')) {
                return;
            }
            
            const response = await fetch('/api/cache/clear', {
                method: 'POST'
            });
            
            if (!response.ok) {
                throw new Error('API 요청 실패');
            }
            
            alert('캐시가 성공적으로 비워졌습니다.');
            fetchDatabaseStats();
            
        } catch (err) {
            console.error('캐시 비우기 실패:', err);
            alert('캐시 비우기 실패: ' + err.message);
        }
    }
    
    // 초기 데이터 로드
    fetchDatabaseStats();
    fetchDocuments();
});