912 lines
20 KiB
Vue
912 lines
20 KiB
Vue
<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-toggle"
|
|
@click="msg.sourcesExpanded = !msg.sourcesExpanded"
|
|
>
|
|
<span class="toggle-icon">{{ msg.sourcesExpanded ? '▼' : '▶' }}</span>
|
|
<span class="toggle-text">
|
|
📎 참조 문서 ({{ getUniqueDocCount(msg.sources) }}개 문서, {{ msg.sources.length }}개 구간)
|
|
</span>
|
|
</div>
|
|
|
|
<transition name="slide">
|
|
<div v-if="msg.sourcesExpanded" class="sources-list">
|
|
<!-- 문서별로 그룹핑 -->
|
|
<div
|
|
v-for="(group, docId) in groupSourcesByDoc(msg.sources)"
|
|
:key="docId"
|
|
class="doc-group"
|
|
>
|
|
<!-- 문서 헤더 -->
|
|
<div
|
|
class="doc-header"
|
|
@click="group.expanded = !group.expanded"
|
|
>
|
|
<span class="doc-toggle">{{ group.expanded ? '▼' : '▶' }}</span>
|
|
<span class="file-type-badge" v-if="group.fileType">
|
|
{{ group.fileType.toUpperCase() }}
|
|
</span>
|
|
<span class="doc-name">📄 {{ group.docName || '문서 ' + docId }}</span>
|
|
<span class="doc-chunk-count">({{ group.chunks.length }}개 구간)</span>
|
|
<span class="doc-max-similarity">
|
|
최대 {{ (group.maxSimilarity * 100).toFixed(0) }}%
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 청크 목록 -->
|
|
<transition name="slide">
|
|
<div v-if="group.expanded" class="chunk-list">
|
|
<div
|
|
v-for="(chunk, idx) in group.chunks"
|
|
:key="idx"
|
|
class="chunk-card"
|
|
>
|
|
<div class="chunk-header">
|
|
<div
|
|
class="similarity-badge"
|
|
:class="getSimilarityClass(chunk.similarity)"
|
|
>
|
|
<div class="similarity-bar" :style="{ width: (chunk.similarity * 100) + '%' }"></div>
|
|
<span class="similarity-text">{{ (chunk.similarity * 100).toFixed(0) }}%</span>
|
|
</div>
|
|
<span class="chunk-position">
|
|
구간 {{ chunk.chunkIndex + 1 }} / {{ chunk.totalChunks }}
|
|
</span>
|
|
</div>
|
|
<div class="chunk-content">
|
|
{{ chunk.expanded ? chunk.content : truncateText(chunk.content, 150) }}
|
|
</div>
|
|
<button
|
|
v-if="chunk.content && chunk.content.length > 150"
|
|
class="expand-btn"
|
|
@click="chunk.expanded = !chunk.expanded"
|
|
>
|
|
{{ chunk.expanded ? '접기' : '더보기' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로딩 표시 -->
|
|
<div v-if="isLoading" class="message assistant">
|
|
<div class="message-avatar">🤖</div>
|
|
<div class="message-content loading-content">
|
|
<div class="loading-text">답변을 생성하고 있습니다</div>
|
|
<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"
|
|
>
|
|
<span class="send-icon">➤</span>
|
|
전송
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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([])
|
|
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 getUniqueDocCount = (sources) => {
|
|
const uniqueDocs = new Set(sources.map(s => s.docId))
|
|
return uniqueDocs.size
|
|
}
|
|
|
|
// 문서별로 소스 그룹핑
|
|
const groupSourcesByDoc = (sources) => {
|
|
const groups = {}
|
|
|
|
sources.forEach(source => {
|
|
const docId = source.docId
|
|
if (!groups[docId]) {
|
|
groups[docId] = {
|
|
docId: docId,
|
|
docName: source.docName,
|
|
fileType: source.fileType,
|
|
totalChunks: source.totalChunks,
|
|
chunks: [],
|
|
maxSimilarity: 0,
|
|
expanded: true // 기본 펼침
|
|
}
|
|
}
|
|
groups[docId].chunks.push({ ...source, expanded: false })
|
|
if (source.similarity > groups[docId].maxSimilarity) {
|
|
groups[docId].maxSimilarity = source.similarity
|
|
}
|
|
})
|
|
|
|
// 청크 정렬 (chunkIndex 순)
|
|
Object.values(groups).forEach(group => {
|
|
group.chunks.sort((a, b) => a.chunkIndex - b.chunkIndex)
|
|
})
|
|
|
|
return groups
|
|
}
|
|
|
|
// 메시지 전송
|
|
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 || [],
|
|
sourcesExpanded: false
|
|
})
|
|
} catch (error) {
|
|
console.error('채팅 오류:', error)
|
|
messages.value.push({
|
|
role: 'assistant',
|
|
content: '죄송합니다. 오류가 발생했습니다. 다시 시도해주세요.'
|
|
})
|
|
} finally {
|
|
isLoading.value = false
|
|
scrollToBottom()
|
|
}
|
|
}
|
|
|
|
// 마크다운 렌더링
|
|
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()
|
|
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;
|
|
accent-color: #667eea;
|
|
}
|
|
|
|
.topic-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.topic-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
// 채팅 메인
|
|
.chat-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
|
|
}
|
|
|
|
.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: 24px;
|
|
animation: fadeIn 0.3s ease;
|
|
|
|
&.user {
|
|
flex-direction: row-reverse;
|
|
|
|
.message-content {
|
|
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;
|
|
}
|
|
}
|
|
|
|
&.assistant {
|
|
.message-content {
|
|
background: white;
|
|
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: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
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 {
|
|
padding: 16px 20px;
|
|
|
|
&.loading-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.message-text {
|
|
line-height: 1.7;
|
|
font-size: 15px;
|
|
|
|
:deep(p) {
|
|
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(102, 126, 234, 0.1);
|
|
color: #667eea;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-family: 'Consolas', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
:deep(pre) {
|
|
background: #1e1e2e;
|
|
color: #cdd6f4;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
overflow-x: auto;
|
|
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: 16px;
|
|
border-top: 1px solid #eee;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.sources-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
transition: background 0.2s;
|
|
|
|
&:hover {
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.toggle-icon {
|
|
font-size: 10px;
|
|
color: #888;
|
|
}
|
|
|
|
.toggle-text {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #555;
|
|
}
|
|
}
|
|
|
|
.sources-list {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
// 문서 그룹
|
|
.doc-group {
|
|
background: #f8f9fc;
|
|
border: 1px solid #e8ebf0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.doc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 16px;
|
|
background: linear-gradient(135deg, #f0f2f8 0%, #e8ebf2 100%);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, #e8ebf2 0%, #dfe3ed 100%);
|
|
}
|
|
|
|
.doc-toggle {
|
|
font-size: 10px;
|
|
color: #888;
|
|
}
|
|
|
|
.doc-name {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.doc-chunk-count {
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
|
|
.doc-max-similarity {
|
|
font-size: 11px;
|
|
padding: 2px 8px;
|
|
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
// 청크 목록
|
|
.chunk-list {
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chunk-card {
|
|
background: white;
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
border-color: #667eea;
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
|
|
}
|
|
}
|
|
|
|
.chunk-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.chunk-position {
|
|
font-size: 11px;
|
|
color: #888;
|
|
background: #f0f0f0;
|
|
padding: 2px 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.similarity-badge {
|
|
position: relative;
|
|
min-width: 55px;
|
|
height: 22px;
|
|
background: #e8e8e8;
|
|
border-radius: 11px;
|
|
overflow: hidden;
|
|
|
|
.similarity-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
border-radius: 11px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.similarity-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
font-size: 10px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chunk-content {
|
|
font-size: 13px;
|
|
color: #555;
|
|
line-height: 1.6;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.expand-btn {
|
|
margin-top: 8px;
|
|
padding: 4px 12px;
|
|
font-size: 11px;
|
|
color: #667eea;
|
|
background: rgba(102, 126, 234, 0.1);
|
|
border-radius: 10px;
|
|
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: 2000px;
|
|
}
|
|
|
|
// 로딩 애니메이션
|
|
.loading-dots {
|
|
display: flex;
|
|
gap: 6px;
|
|
|
|
span {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
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.6); opacity: 0.5; }
|
|
40% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
// 입력 영역
|
|
.chat-input-area {
|
|
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: 14px 20px;
|
|
border: 2px solid #e8e8e8;
|
|
border-radius: 16px;
|
|
resize: none;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
max-height: 120px;
|
|
transition: all 0.2s;
|
|
|
|
&:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
&:disabled {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: #aaa;
|
|
}
|
|
}
|
|
|
|
.send-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 28px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 16px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
transition: all 0.2s;
|
|
|
|
.send-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
</style>
|