init
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
12
.run/dev.run.xml
Normal file
12
.run/dev.run.xml
Normal file
@@ -0,0 +1,12 @@
|
||||
<component name="ProjectRunConfigurationManager">
|
||||
<configuration default="false" name="dev" type="js.build_tools.npm" nameIsGenerated="true">
|
||||
<package-json value="$PROJECT_DIR$/package.json" />
|
||||
<command value="run" />
|
||||
<scripts>
|
||||
<script value="dev" />
|
||||
</scripts>
|
||||
<node-interpreter value="project" />
|
||||
<envs />
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
</component>
|
||||
15
index.html
Normal file
15
index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RAG One - AI 문서 질의응답</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1985
package-lock.json
generated
Normal file
1985
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "ragone-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0",
|
||||
"axios": "^1.6.8",
|
||||
"marked": "^12.0.1",
|
||||
"highlight.js": "^11.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"vite": "^5.2.8",
|
||||
"sass": "^1.72.0"
|
||||
}
|
||||
}
|
||||
83
src/App.vue
Normal file
83
src/App.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<header class="app-header">
|
||||
<div class="logo">
|
||||
<span class="logo-icon">🤖</span>
|
||||
<span class="logo-text">RAG One</span>
|
||||
</div>
|
||||
<nav class="nav-menu">
|
||||
<router-link to="/" class="nav-item">채팅</router-link>
|
||||
<router-link to="/admin" class="nav-item">관리</router-link>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="app-main">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.logo-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
35
src/api/index.js
Normal file
35
src/api/index.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 60000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 주제 API
|
||||
export const topicApi = {
|
||||
getList: () => api.get('/topics'),
|
||||
get: (id) => api.get(`/topics/${id}`),
|
||||
create: (data) => api.post('/topics', data),
|
||||
update: (id, data) => api.put(`/topics/${id}`, data),
|
||||
delete: (id) => api.delete(`/topics/${id}`)
|
||||
}
|
||||
|
||||
// 문서 API
|
||||
export const docApi = {
|
||||
getList: (topicId) => api.get(`/topics/${topicId}/documents`),
|
||||
upload: (topicId, formData) => api.post(`/topics/${topicId}/documents/upload`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
}),
|
||||
delete: (docId) => api.delete(`/documents/${docId}`),
|
||||
deleteAll: (topicId) => api.delete(`/topics/${topicId}/documents`)
|
||||
}
|
||||
|
||||
// 채팅 API
|
||||
export const chatApi = {
|
||||
send: (data) => api.post('/chat', data)
|
||||
}
|
||||
|
||||
export default api
|
||||
45
src/assets/main.scss
Normal file
45
src/assets/main.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// 스크롤바 스타일
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a1a1a1;
|
||||
}
|
||||
}
|
||||
8
src/main.js
Normal file
8
src/main.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './assets/main.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
23
src/router.js
Normal file
23
src/router.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import ChatView from '@/views/ChatView.vue'
|
||||
import AdminView from '@/views/AdminView.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'chat',
|
||||
component: ChatView
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: AdminView
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
870
src/views/AdminView.vue
Normal file
870
src/views/AdminView.vue
Normal file
@@ -0,0 +1,870 @@
|
||||
<template>
|
||||
<div class="admin-view">
|
||||
<!-- 사이드바: 주제 목록 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>📂 주제 관리</h3>
|
||||
<button class="add-btn" @click="openTopicModal()" title="주제 추가">+</button>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<div
|
||||
v-for="topic in topics"
|
||||
:key="topic.topicId"
|
||||
:class="['topic-item', { active: selectedTopic?.topicId === topic.topicId }]"
|
||||
@click="selectTopic(topic)"
|
||||
>
|
||||
<span class="topic-icon">{{ topic.topicIcon }}</span>
|
||||
<span class="topic-name">{{ topic.topicName }}</span>
|
||||
<span class="doc-count">{{ getDocCount(topic.topicId) }}</span>
|
||||
<button class="edit-btn" @click.stop="openTopicModal(topic)" title="수정">✏️</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 메인: 문서 관리 -->
|
||||
<div class="main-content">
|
||||
<div v-if="!selectedTopic" class="empty-state">
|
||||
<div class="empty-icon">📁</div>
|
||||
<p>주제를 선택해주세요</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="content-header">
|
||||
<div class="header-info">
|
||||
<h2>{{ selectedTopic.topicIcon }} {{ selectedTopic.topicName }}</h2>
|
||||
<p>{{ selectedTopic.topicDesc }}</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="topic-delete-btn"
|
||||
@click="deleteTopic(selectedTopic.topicId)"
|
||||
title="주제 삭제"
|
||||
>
|
||||
🗑️ 주제 삭제
|
||||
</button>
|
||||
<button
|
||||
v-if="documents.length > 0"
|
||||
class="delete-all-btn"
|
||||
@click="deleteAllDocuments"
|
||||
title="전체 문서 삭제"
|
||||
>
|
||||
📄 전체 문서 삭제
|
||||
</button>
|
||||
<label class="upload-btn">
|
||||
<input type="file" @change="handleFileUpload" accept=".pdf,.docx,.txt" multiple hidden />
|
||||
📤 문서 업로드
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 문서 목록 -->
|
||||
<div class="doc-list">
|
||||
<div v-if="documents.length === 0" class="empty-docs">
|
||||
<p>등록된 문서가 없습니다.</p>
|
||||
<p class="hint">PDF, DOCX, TXT 파일을 업로드해보세요.</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="doc in documents"
|
||||
:key="doc.docId"
|
||||
class="doc-item"
|
||||
>
|
||||
<div class="doc-icon">📄</div>
|
||||
<div class="doc-info">
|
||||
<a
|
||||
class="doc-name"
|
||||
:href="getDownloadUrl(doc.docId)"
|
||||
:download="doc.originalName"
|
||||
:title="'다운로드: ' + doc.originalName"
|
||||
>
|
||||
{{ doc.originalName }}
|
||||
</a>
|
||||
<div class="doc-meta">
|
||||
<span>{{ formatFileSize(doc.fileSize) }}</span>
|
||||
<span>•</span>
|
||||
<span>청크 {{ doc.chunkCount }}개</span>
|
||||
<span>•</span>
|
||||
<span>{{ formatDate(doc.createdAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['doc-status', doc.docStatus.toLowerCase()]">
|
||||
{{ getStatusLabel(doc.docStatus) }}
|
||||
</div>
|
||||
<button class="delete-btn" @click="deleteDocument(doc.docId)" title="삭제">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 업로드 진행 상태 -->
|
||||
<div v-if="uploading" class="upload-overlay">
|
||||
<div class="upload-modal">
|
||||
<div class="upload-spinner"></div>
|
||||
<p>문서 업로드 중...</p>
|
||||
<p class="upload-hint">문서 파싱 및 임베딩 생성에 시간이 소요됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 주제 추가/수정 모달 -->
|
||||
<div v-if="showTopicModal" class="modal-overlay" @click.self="closeTopicModal">
|
||||
<div class="topic-modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingTopic ? '주제 수정' : '주제 추가' }}</h3>
|
||||
<button class="close-btn" @click="closeTopicModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>아이콘</label>
|
||||
<div class="icon-selector">
|
||||
<button
|
||||
v-for="icon in iconOptions"
|
||||
:key="icon"
|
||||
:class="['icon-option', { selected: topicForm.topicIcon === icon }]"
|
||||
@click="topicForm.topicIcon = icon"
|
||||
>
|
||||
{{ icon }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>주제명 <span class="required">*</span></label>
|
||||
<input
|
||||
v-model="topicForm.topicName"
|
||||
type="text"
|
||||
placeholder="예: 병원체자원관리"
|
||||
maxlength="50"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>주제코드 <span class="required">*</span></label>
|
||||
<input
|
||||
v-model="topicForm.topicCode"
|
||||
type="text"
|
||||
placeholder="예: PATHOGEN (영문 대문자)"
|
||||
maxlength="20"
|
||||
:disabled="!!editingTopic"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>설명</label>
|
||||
<textarea
|
||||
v-model="topicForm.topicDesc"
|
||||
placeholder="주제에 대한 설명을 입력하세요"
|
||||
rows="3"
|
||||
maxlength="200"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="cancel-btn" @click="closeTopicModal">취소</button>
|
||||
<button
|
||||
class="save-btn"
|
||||
@click="saveTopic"
|
||||
:disabled="!topicForm.topicName || !topicForm.topicCode"
|
||||
>
|
||||
{{ editingTopic ? '수정' : '추가' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { topicApi, docApi } from '@/api'
|
||||
|
||||
// 상태
|
||||
const topics = ref([])
|
||||
const selectedTopic = ref(null)
|
||||
const documents = ref([])
|
||||
const uploading = ref(false)
|
||||
|
||||
// 주제 모달 상태
|
||||
const showTopicModal = ref(false)
|
||||
const editingTopic = ref(null)
|
||||
const topicForm = reactive({
|
||||
topicIcon: '📁',
|
||||
topicName: '',
|
||||
topicCode: '',
|
||||
topicDesc: ''
|
||||
})
|
||||
|
||||
// 아이콘 옵션
|
||||
const iconOptions = [
|
||||
'📁', '📂', '🦠', '🧬', '🔬', '💉', '🏥', '🧪',
|
||||
'📊', '📈', '📋', '📝', '💼', '🗂️', '📚', '🔒',
|
||||
'⚙️', '🛠️', '💡', '🎯', '✅', '📌', '🏷️', '🔖'
|
||||
]
|
||||
|
||||
// 주제 목록 로드
|
||||
const loadTopics = async () => {
|
||||
try {
|
||||
const { data } = await topicApi.getList()
|
||||
topics.value = data
|
||||
} catch (error) {
|
||||
console.error('주제 로드 실패:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 주제 선택
|
||||
const selectTopic = async (topic) => {
|
||||
selectedTopic.value = topic
|
||||
await loadDocuments(topic.topicId)
|
||||
}
|
||||
|
||||
// 문서 목록 로드
|
||||
const loadDocuments = async (topicId) => {
|
||||
try {
|
||||
const { data } = await docApi.getList(topicId)
|
||||
documents.value = data
|
||||
} catch (error) {
|
||||
console.error('문서 로드 실패:', error)
|
||||
documents.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 주제 모달 열기
|
||||
const openTopicModal = (topic = null) => {
|
||||
editingTopic.value = topic
|
||||
if (topic) {
|
||||
// 수정 모드
|
||||
topicForm.topicIcon = topic.topicIcon || '📁'
|
||||
topicForm.topicName = topic.topicName
|
||||
topicForm.topicCode = topic.topicCode
|
||||
topicForm.topicDesc = topic.topicDesc || ''
|
||||
} else {
|
||||
// 추가 모드
|
||||
topicForm.topicIcon = '📁'
|
||||
topicForm.topicName = ''
|
||||
topicForm.topicCode = ''
|
||||
topicForm.topicDesc = ''
|
||||
}
|
||||
showTopicModal.value = true
|
||||
}
|
||||
|
||||
// 주제 모달 닫기
|
||||
const closeTopicModal = () => {
|
||||
showTopicModal.value = false
|
||||
editingTopic.value = null
|
||||
}
|
||||
|
||||
// 주제 저장
|
||||
const saveTopic = async () => {
|
||||
if (!topicForm.topicName || !topicForm.topicCode) {
|
||||
alert('주제명과 주제코드는 필수입니다.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (editingTopic.value) {
|
||||
// 수정
|
||||
await topicApi.update(editingTopic.value.topicId, {
|
||||
topicIcon: topicForm.topicIcon,
|
||||
topicName: topicForm.topicName,
|
||||
topicCode: topicForm.topicCode,
|
||||
topicDesc: topicForm.topicDesc,
|
||||
isActive: true
|
||||
})
|
||||
alert('주제가 수정되었습니다.')
|
||||
} else {
|
||||
// 추가
|
||||
await topicApi.create({
|
||||
topicIcon: topicForm.topicIcon,
|
||||
topicName: topicForm.topicName,
|
||||
topicCode: topicForm.topicCode.toUpperCase(),
|
||||
topicDesc: topicForm.topicDesc,
|
||||
isActive: true
|
||||
})
|
||||
alert('주제가 추가되었습니다.')
|
||||
}
|
||||
|
||||
await loadTopics()
|
||||
closeTopicModal()
|
||||
} catch (error) {
|
||||
console.error('주제 저장 실패:', error)
|
||||
alert('주제 저장 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
|
||||
// 주제 삭제
|
||||
const deleteTopic = async (topicId) => {
|
||||
const topic = topics.value.find(t => t.topicId === topicId)
|
||||
if (!confirm(`[${topic?.topicName}] 주제를 삭제하시겠습니까?\n\n⚠️ 해당 주제의 모든 문서도 함께 삭제됩니다.`)) return
|
||||
|
||||
try {
|
||||
await topicApi.delete(topicId)
|
||||
await loadTopics()
|
||||
selectedTopic.value = null
|
||||
documents.value = []
|
||||
alert('주제가 삭제되었습니다.')
|
||||
} catch (error) {
|
||||
console.error('주제 삭제 실패:', error)
|
||||
alert('주제 삭제 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
|
||||
// 파일 업로드
|
||||
const handleFileUpload = async (event) => {
|
||||
const files = event.target.files
|
||||
if (!files.length || !selectedTopic.value) return
|
||||
|
||||
uploading.value = true
|
||||
|
||||
try {
|
||||
for (const file of files) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
await docApi.upload(selectedTopic.value.topicId, formData)
|
||||
}
|
||||
|
||||
await loadDocuments(selectedTopic.value.topicId)
|
||||
alert('업로드 완료!')
|
||||
} catch (error) {
|
||||
console.error('업로드 실패:', error)
|
||||
alert('업로드 중 오류가 발생했습니다.')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
event.target.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 문서 삭제
|
||||
const deleteDocument = async (docId) => {
|
||||
if (!confirm('정말 삭제하시겠습니까?')) return
|
||||
|
||||
try {
|
||||
await docApi.delete(docId)
|
||||
await loadDocuments(selectedTopic.value.topicId)
|
||||
} catch (error) {
|
||||
console.error('삭제 실패:', error)
|
||||
alert('삭제 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
|
||||
// 전체 문서 삭제
|
||||
const deleteAllDocuments = async () => {
|
||||
if (!selectedTopic.value) return
|
||||
if (!confirm(`[${selectedTopic.value.topicName}] 주제의 모든 문서(${documents.value.length}개)를 삭제하시겠습니까?`)) return
|
||||
|
||||
try {
|
||||
await docApi.deleteAll(selectedTopic.value.topicId)
|
||||
await loadDocuments(selectedTopic.value.topicId)
|
||||
alert('전체 삭제 완료!')
|
||||
} catch (error) {
|
||||
console.error('전체 삭제 실패:', error)
|
||||
alert('전체 삭제 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
|
||||
// 다운로드 URL 생성
|
||||
const getDownloadUrl = (docId) => {
|
||||
return `/api/documents/${docId}/download`
|
||||
}
|
||||
|
||||
// 유틸 함수
|
||||
const getDocCount = (topicId) => {
|
||||
return ''
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes) return '-'
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||||
}
|
||||
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString('ko-KR')
|
||||
}
|
||||
|
||||
const getStatusLabel = (status) => {
|
||||
const labels = {
|
||||
'PENDING': '대기중',
|
||||
'PROCESSING': '처리중',
|
||||
'INDEXED': '완료',
|
||||
'FAILED': '실패'
|
||||
}
|
||||
return labels[status] || status
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTopics()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.admin-view {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 사이드바
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: white;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: #5a6fd6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
|
||||
.edit-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #e8f0fe;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.topic-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.doc-count {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 4px;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 메인 컨텐츠
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f9fafb;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #888;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
.header-info {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.delete-all-btn,
|
||||
.topic-delete-btn {
|
||||
padding: 10px 16px;
|
||||
background: #fff;
|
||||
color: #c62828;
|
||||
border: 1px solid #ffcdd2;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #ffebee;
|
||||
border-color: #ef9a9a;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-delete-btn {
|
||||
color: #666;
|
||||
border-color: #ddd;
|
||||
|
||||
&:hover {
|
||||
color: #c62828;
|
||||
background: #ffebee;
|
||||
border-color: #ffcdd2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.empty-docs {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
color: #888;
|
||||
|
||||
.hint {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.doc-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.doc-info {
|
||||
flex: 1;
|
||||
|
||||
.doc-name {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #667eea;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.doc-status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.pending { background: #fff3e0; color: #e65100; }
|
||||
&.processing { background: #e3f2fd; color: #1565c0; }
|
||||
&.indexed { background: #e8f5e9; color: #2e7d32; }
|
||||
&.failed { background: #ffebee; color: #c62828; }
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
padding: 8px;
|
||||
background: none;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 업로드 오버레이
|
||||
.upload-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.upload-modal {
|
||||
background: white;
|
||||
padding: 40px 60px;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #667eea;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// 주제 모달
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.topic-modal {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
width: 480px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
|
||||
.required {
|
||||
color: #c62828;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #f5f5f5;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon-option {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: #667eea;
|
||||
background: #e8f0fe;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding: 10px 20px;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
502
src/views/ChatView.vue
Normal file
502
src/views/ChatView.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<div class="chat-view">
|
||||
<!-- 사이드바: 주제 선택 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>📚 주제 선택</h3>
|
||||
<button class="new-chat-btn" @click="startNewChat" title="새 대화">+</button>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<label class="topic-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedTopics.length === 0"
|
||||
@change="selectAllTopics"
|
||||
/>
|
||||
<span class="topic-icon">🌐</span>
|
||||
<span class="topic-name">전체</span>
|
||||
</label>
|
||||
<label
|
||||
v-for="topic in topics"
|
||||
:key="topic.topicId"
|
||||
class="topic-item"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="topic.topicId"
|
||||
v-model="selectedTopics"
|
||||
/>
|
||||
<span class="topic-icon">{{ topic.topicIcon }}</span>
|
||||
<span class="topic-name">{{ topic.topicName }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 메인: 채팅 영역 -->
|
||||
<div class="chat-main">
|
||||
<!-- 메시지 목록 -->
|
||||
<div class="message-list" ref="messageListRef">
|
||||
<div v-if="messages.length === 0" class="empty-state">
|
||||
<div class="empty-icon">💬</div>
|
||||
<p>문서에 대해 질문해보세요!</p>
|
||||
<p class="empty-hint">예: "병원체 2위험군의 보관 온도는?"</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
:class="['message', msg.role]"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
{{ msg.role === 'user' ? '👤' : '🤖' }}
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-text" v-html="renderMarkdown(msg.content)"></div>
|
||||
|
||||
<!-- 참조 문서 -->
|
||||
<div v-if="msg.sources && msg.sources.length > 0" class="message-sources">
|
||||
<div class="sources-header">📎 참조 문서</div>
|
||||
<div
|
||||
v-for="(source, idx) in msg.sources"
|
||||
:key="idx"
|
||||
class="source-item"
|
||||
>
|
||||
<span class="source-similarity">{{ (source.similarity * 100).toFixed(0) }}%</span>
|
||||
<span class="source-content">{{ source.content }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 로딩 표시 -->
|
||||
<div v-if="isLoading" class="message assistant">
|
||||
<div class="message-avatar">🤖</div>
|
||||
<div class="message-content">
|
||||
<div class="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 입력창 -->
|
||||
<div class="chat-input-area">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
v-model="inputText"
|
||||
@keydown.enter.exact.prevent="sendMessage"
|
||||
placeholder="질문을 입력하세요..."
|
||||
rows="1"
|
||||
:disabled="isLoading"
|
||||
></textarea>
|
||||
<button
|
||||
class="send-btn"
|
||||
@click="sendMessage"
|
||||
:disabled="!inputText.trim() || isLoading"
|
||||
>
|
||||
전송
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
import { topicApi, chatApi } from '@/api'
|
||||
|
||||
// 상태
|
||||
const topics = ref([])
|
||||
const selectedTopics = ref([])
|
||||
const messages = ref([])
|
||||
const inputText = ref('')
|
||||
const isLoading = ref(false)
|
||||
const messageListRef = ref(null)
|
||||
const sessionKey = ref(null) // 세션 키
|
||||
|
||||
// 주제 목록 로드
|
||||
const loadTopics = async () => {
|
||||
try {
|
||||
const { data } = await topicApi.getList()
|
||||
topics.value = data
|
||||
} catch (error) {
|
||||
console.error('주제 로드 실패:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 전체 선택
|
||||
const selectAllTopics = () => {
|
||||
selectedTopics.value = []
|
||||
}
|
||||
|
||||
// 새 대화 시작
|
||||
const startNewChat = () => {
|
||||
messages.value = []
|
||||
sessionKey.value = null
|
||||
}
|
||||
|
||||
// 메시지 전송
|
||||
const sendMessage = async () => {
|
||||
const question = inputText.value.trim()
|
||||
if (!question || isLoading.value) return
|
||||
|
||||
// 사용자 메시지 추가
|
||||
messages.value.push({
|
||||
role: 'user',
|
||||
content: question
|
||||
})
|
||||
|
||||
inputText.value = ''
|
||||
isLoading.value = true
|
||||
scrollToBottom()
|
||||
|
||||
try {
|
||||
const { data } = await chatApi.send({
|
||||
question,
|
||||
topicIds: selectedTopics.value.length > 0 ? selectedTopics.value : null,
|
||||
sessionKey: sessionKey.value // 세션 키 전달
|
||||
})
|
||||
|
||||
// 세션 키 저장 (첫 응답에서 받음)
|
||||
if (data.sessionKey) {
|
||||
sessionKey.value = data.sessionKey
|
||||
}
|
||||
|
||||
// AI 응답 추가
|
||||
messages.value.push({
|
||||
role: 'assistant',
|
||||
content: data.answer,
|
||||
sources: data.sources
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('채팅 오류:', error)
|
||||
messages.value.push({
|
||||
role: 'assistant',
|
||||
content: '죄송합니다. 오류가 발생했습니다. 다시 시도해주세요.'
|
||||
})
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
scrollToBottom()
|
||||
}
|
||||
}
|
||||
|
||||
// 마크다운 렌더링
|
||||
const renderMarkdown = (text) => {
|
||||
return marked(text || '')
|
||||
}
|
||||
|
||||
// 스크롤 맨 아래로
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (messageListRef.value) {
|
||||
messageListRef.value.scrollTop = messageListRef.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTopics()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-view {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 사이드바
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: white;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.new-chat-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: #5a6fd6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.topic-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.topic-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 채팅 메인
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #888;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.assistant {
|
||||
.message-content {
|
||||
background: white;
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
|
||||
:deep(p) {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(code) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
:deep(pre) {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 8px 0;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-sources {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
.sources-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
padding: 6px 0;
|
||||
color: #666;
|
||||
|
||||
.source-similarity {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.source-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 로딩 애니메이션
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1); }
|
||||
}
|
||||
|
||||
// 입력 영역
|
||||
.chat-input-area {
|
||||
padding: 16px 24px;
|
||||
background: white;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
max-height: 120px;
|
||||
|
||||
&:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
vite.config.js
Normal file
21
vite.config.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user