init
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user