변경2
This commit is contained in:
@@ -53,17 +53,57 @@
|
||||
<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"
|
||||
class="sources-toggle"
|
||||
@click="msg.sourcesExpanded = !msg.sourcesExpanded"
|
||||
>
|
||||
<span class="source-similarity">{{ (source.similarity * 100).toFixed(0) }}%</span>
|
||||
<span class="source-content">{{ source.content }}</span>
|
||||
<span class="toggle-icon">{{ msg.sourcesExpanded ? '▼' : '▶' }}</span>
|
||||
<span class="toggle-text">📎 참조 문서 ({{ msg.sources.length }}개)</span>
|
||||
</div>
|
||||
|
||||
<transition name="slide">
|
||||
<div v-if="msg.sourcesExpanded" class="sources-list">
|
||||
<div
|
||||
v-for="(source, idx) in msg.sources"
|
||||
:key="idx"
|
||||
class="source-card"
|
||||
>
|
||||
<div class="source-header">
|
||||
<div
|
||||
class="similarity-badge"
|
||||
:class="getSimilarityClass(source.similarity)"
|
||||
>
|
||||
<div class="similarity-bar" :style="{ width: (source.similarity * 100) + '%' }"></div>
|
||||
<span class="similarity-text">{{ (source.similarity * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<span class="source-doc" v-if="source.docName">
|
||||
📄 {{ source.docName }}
|
||||
<span class="chunk-info" v-if="source.totalChunks">
|
||||
({{ source.chunkIndex + 1 }}/{{ source.totalChunks }})
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-type-badge" v-if="source.fileType">
|
||||
{{ source.fileType.toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="source-content">
|
||||
{{ truncateText(source.content, 200) }}
|
||||
</div>
|
||||
<button
|
||||
v-if="source.content && source.content.length > 200"
|
||||
class="expand-btn"
|
||||
@click="source.expanded = !source.expanded"
|
||||
>
|
||||
{{ source.expanded ? '접기' : '더보기' }}
|
||||
</button>
|
||||
<div v-if="source.expanded" class="source-full-content">
|
||||
{{ source.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,7 +111,8 @@
|
||||
<!-- 로딩 표시 -->
|
||||
<div v-if="isLoading" class="message assistant">
|
||||
<div class="message-avatar">🤖</div>
|
||||
<div class="message-content">
|
||||
<div class="message-content loading-content">
|
||||
<div class="loading-text">답변을 생성하고 있습니다</div>
|
||||
<div class="loading-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
@@ -96,6 +137,7 @@
|
||||
@click="sendMessage"
|
||||
:disabled="!inputText.trim() || isLoading"
|
||||
>
|
||||
<span class="send-icon">➤</span>
|
||||
전송
|
||||
</button>
|
||||
</div>
|
||||
@@ -109,6 +151,12 @@ import { ref, onMounted, nextTick } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
import { topicApi, chatApi } from '@/api'
|
||||
|
||||
// marked 옵션 설정
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true
|
||||
})
|
||||
|
||||
// 상태
|
||||
const topics = ref([])
|
||||
const selectedTopics = ref([])
|
||||
@@ -116,7 +164,7 @@ const messages = ref([])
|
||||
const inputText = ref('')
|
||||
const isLoading = ref(false)
|
||||
const messageListRef = ref(null)
|
||||
const sessionKey = ref(null) // 세션 키
|
||||
const sessionKey = ref(null)
|
||||
|
||||
// 주제 목록 로드
|
||||
const loadTopics = async () => {
|
||||
@@ -158,19 +206,19 @@ const sendMessage = async () => {
|
||||
const { data } = await chatApi.send({
|
||||
question,
|
||||
topicIds: selectedTopics.value.length > 0 ? selectedTopics.value : null,
|
||||
sessionKey: sessionKey.value // 세션 키 전달
|
||||
sessionKey: sessionKey.value
|
||||
})
|
||||
|
||||
// 세션 키 저장 (첫 응답에서 받음)
|
||||
if (data.sessionKey) {
|
||||
sessionKey.value = data.sessionKey
|
||||
}
|
||||
|
||||
// AI 응답 추가
|
||||
// AI 응답 추가 (sourcesExpanded 기본값 false)
|
||||
messages.value.push({
|
||||
role: 'assistant',
|
||||
content: data.answer,
|
||||
sources: data.sources
|
||||
sources: data.sources?.map(s => ({ ...s, expanded: false })) || [],
|
||||
sourcesExpanded: false
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('채팅 오류:', error)
|
||||
@@ -189,6 +237,21 @@ const renderMarkdown = (text) => {
|
||||
return marked(text || '')
|
||||
}
|
||||
|
||||
// 텍스트 자르기
|
||||
const truncateText = (text, maxLength) => {
|
||||
if (!text) return ''
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
// 유사도에 따른 클래스
|
||||
const getSimilarityClass = (similarity) => {
|
||||
const percent = similarity * 100
|
||||
if (percent >= 50) return 'high'
|
||||
if (percent >= 40) return 'medium'
|
||||
return 'low'
|
||||
}
|
||||
|
||||
// 스크롤 맨 아래로
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
@@ -266,6 +329,7 @@ onMounted(() => {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
accent-color: #667eea;
|
||||
}
|
||||
|
||||
.topic-icon {
|
||||
@@ -283,7 +347,7 @@ onMounted(() => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f9fafb;
|
||||
background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
|
||||
}
|
||||
|
||||
.message-list {
|
||||
@@ -319,122 +383,354 @@ onMounted(() => {
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
animation: fadeIn 0.3s ease;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
background: #667eea;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 20px 20px 4px 20px;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
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);
|
||||
border-radius: 20px 20px 20px 4px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 12px 16px;
|
||||
padding: 16px 20px;
|
||||
|
||||
&.loading-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
line-height: 1.7;
|
||||
font-size: 15px;
|
||||
|
||||
:deep(p) {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(ul), :deep(ol) {
|
||||
margin: 12px 0;
|
||||
padding-left: 24px;
|
||||
|
||||
li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(strong) {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(code) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 2px 6px;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-family: 'Consolas', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(pre) {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #1e1e2e;
|
||||
color: #cdd6f4;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
overflow-x: auto;
|
||||
margin: 8px 0;
|
||||
margin: 12px 0;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(blockquote) {
|
||||
border-left: 4px solid #667eea;
|
||||
margin: 12px 0;
|
||||
padding: 8px 16px;
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
:deep(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
font-size: 14px;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #f5f7fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #fafbfc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 참조 문서 섹션 (개선)
|
||||
.message-sources {
|
||||
margin-top: 12px;
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sources-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s;
|
||||
|
||||
.sources-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
.toggle-icon {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.sources-list {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.source-card {
|
||||
background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%);
|
||||
border: 1px solid #e8ebf0;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.source-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.similarity-badge {
|
||||
position: relative;
|
||||
min-width: 60px;
|
||||
height: 24px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
.similarity-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.similarity-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&.high {
|
||||
.similarity-bar {
|
||||
background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
.similarity-bar {
|
||||
background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.low {
|
||||
.similarity-bar {
|
||||
background: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);
|
||||
}
|
||||
.similarity-text {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.source-doc {
|
||||
font-size: 12px;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
|
||||
.chunk-info {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-type-badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.source-content {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.source-full-content {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #ddd;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
margin-top: 8px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
color: #667eea;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// 슬라이드 트랜지션
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.slide-enter-to,
|
||||
.slide-leave-from {
|
||||
opacity: 1;
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
// 로딩 애니메이션
|
||||
.loading-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #667eea;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
animation: bounce 1.4s infinite ease-in-out both;
|
||||
|
||||
@@ -444,57 +740,77 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1); }
|
||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
// 입력 영역
|
||||
.chat-input-area {
|
||||
padding: 16px 24px;
|
||||
padding: 20px 24px;
|
||||
background: white;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 12px;
|
||||
padding: 14px 20px;
|
||||
border: 2px solid #e8e8e8;
|
||||
border-radius: 16px;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
max-height: 120px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
transition: all 0.2s;
|
||||
|
||||
.send-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user