ttipo/comrelay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AI 대화 DB 영속 + 다중 대화/기록 목록

Browse Source 
- AiConversation·AiMessage 엔티티(user/conversation CASCADE), 제목 자동 생성
- 대화 스코프 API: GET/POST /ai/conversations, GET/:id, POST/:id/messages, DELETE/:id (전부 본인 소유 스코프 → IDOR 차단)
- 클라는 새 메시지 1건만 전송, 서버가 DB 이력으로 Claude 호출(무상태 /ai/chat 폐기)
- Claude 실패 시 사용자 메시지·빈 대화 롤백(고아 데이터 방지)
- 프론트: AgentChatPanel 채팅↔지난 대화 목록 뷰(열기/삭제), ai.store 재작성(목록·현재 대화)
- 다른 기기·재로그인·새로고침에도 기록 유지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ttipo
2026-06-20 08:58:40 +09:00
parent 5da3ec8818
commit e432832c92
13 changed files with 697 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AgentChatPanel.vue
+187 -46
View File
@@ -1,17 +1,15 @@
<script setup lang="ts">
// AI 채팅 패널 — Claude API 와 대화. body 로 Teleport 되는 우측 슬라이드 패널.
// 대화 이력은 ai.store(싱글톤)에 보관해 화면 이동에도 유지되고, '새 대화' 로만 초기화된다.
// AI 채팅 패널 — Claude API 와 대화. 대화/이력은 DB(ai.store)에 보관.
// 우측 슬라이드 패널. 채팅 뷰 ↔ 지난 대화(기록) 목록 뷰 전환.
import { nextTick, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useAiStore } from '@/stores/ai.store'
import { relativeTimeKo } from '@/shared/utils/format'
interface Props {
open: boolean
taskTitle?: string
}
const props = withDefaults(defineProps<Props>(), {
taskTitle: '',
})
const props = defineProps<Props>()
interface Emits {
(e: 'close'): void
@@ -19,24 +17,26 @@ interface Emits {
const emit = defineEmits<Emits>()
const aiStore = useAiStore()
const { messages, loading, error } = storeToRefs(aiStore)
const { conversations, listLoading, messages, loading, error } =
storeToRefs(aiStore)
// 입력값만 컴포넌트 로컬(전송 전 임시 텍스트)
// 입력값과 뷰 전환만 컴포넌트 로컬
const input = ref('')
const showHistory = ref(false)
const bodyEl = ref<HTMLElement | null>(null)
// 새 메시지/로딩 시 하단으로 스크롤
function scrollToBottom() {
void nextTick(() => {
if (bodyEl.value) bodyEl.value.scrollTop = bodyEl.value.scrollHeight
if (bodyEl.value && !showHistory.value) {
bodyEl.value.scrollTop = bodyEl.value.scrollHeight
}
})
}
watch(() => [messages.value.length, loading.value], scrollToBottom)
// 패널을 열 때 하단으로 스크롤
watch(
() => props.open,
(open) => {
if (open) scrollToBottom()
if (open && !showHistory.value) scrollToBottom()
},
)
@@ -44,13 +44,30 @@ async function send() {
const text = input.value
if (!text.trim() || loading.value) return
input.value = ''
await aiStore.send(text)
const ok = await aiStore.send(text)
if (!ok) input.value = text // 실패 시 입력 복원
}
function resetChat() {
aiStore.reset()
function newChat() {
aiStore.newConversation()
showHistory.value = false
input.value = ''
}
async function toggleHistory() {
showHistory.value = !showHistory.value
if (showHistory.value) await aiStore.loadConversations()
}
async function openConv(id: string) {
await aiStore.openConversation(id)
showHistory.value = false
}
async function removeConv(id: string) {
if (!window.confirm('이 대화를 삭제할까요?')) return
await aiStore.removeConversation(id)
}
</script>
<template>
@@ -69,26 +86,18 @@ function resetChat() {
<header class="ac-head">
<div class="ac-title">
<span class="ac-logo">AI</span>
<div class="ac-titletext">
<div class="ac-name">
Relay 어시스턴트
</div>
<div
v-if="taskTitle"
class="ac-ctx"
>
{{ taskTitle }}
</div>
<div class="ac-name">
{{ showHistory ? '지난 대화' : 'Relay 어시스턴트' }}
</div>
</div>
<div class="ac-headbtns">
<button
class="ac-iconbtn"
type="button"
title="새 대화"
aria-label="새 대화"
:disabled="loading"
@click="resetChat"
:title="showHistory ? '대화로 돌아가기' : '지난 대화'"
:aria-label="showHistory ? '대화로 돌아가기' : '지난 대화'"
:class="{ on: showHistory }"
@click="toggleHistory"
>
<svg
viewBox="0 0 24 24"
@@ -98,7 +107,26 @@ function resetChat() {
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" />
<path d="M3 12a9 9 0 1 0 9-9 9.74 9.74 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M12 7v5l3 2" />
</svg>
</button>
<button
class="ac-iconbtn"
type="button"
title="새 대화"
aria-label="새 대화"
:disabled="loading"
@click="newChat"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 5v14M5 12h14" />
</svg>
</button>
<button
@@ -122,12 +150,66 @@ function resetChat() {
</div>
</header>
<!-- 대화 영역 -->
<!-- 기록(지난 대화) 뷰 -->
<div
v-if="showHistory"
class="ac-body ac-history"
>
<div
v-if="listLoading && conversations.length === 0"
class="ac-hist-empty"
>
불러오는 중…
</div>
<div
v-else-if="conversations.length === 0"
class="ac-hist-empty"
>
지난 대화가 없습니다.
</div>
<template v-else>
<div
v-for="c in conversations"
:key="c.id"
class="ac-hist-item"
@click="openConv(c.id)"
>
<div class="ac-hist-main">
<div class="ac-hist-title">
{{ c.title }}
</div>
<div class="ac-hist-time">
{{ relativeTimeKo(c.updatedAt) }}
</div>
</div>
<button
class="ac-hist-del"
type="button"
title="삭제"
aria-label="대화 삭제"
@click.stop="removeConv(c.id)"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V6" />
</svg>
</button>
</div>
</template>
</div>
<!-- 채팅 뷰 -->
<div
v-else
ref="bodyEl"
class="ac-body"
>
<!-- 환영 문구 -->
<div
v-if="messages.length === 0"
class="ac-welcome"
@@ -158,7 +240,6 @@ function resetChat() {
</div>
</div>
<!-- 로딩(응답 대기) -->
<div
v-if="loading"
class="ac-msg assistant"
@@ -177,8 +258,11 @@ function resetChat() {
</div>
</div>
<!-- 입력 -->
<footer class="ac-foot">
<!-- 입력 (채팅 뷰에서만) -->
<footer
v-if="!showHistory"
class="ac-foot"
>
<div class="ac-inputrow">
<textarea
v-model="input"
@@ -271,22 +355,11 @@ function resetChat() {
font-weight: 800;
flex-shrink: 0;
}
.ac-titletext {
min-width: 0;
}
.ac-name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--text);
}
.ac-ctx {
font-size: 0.75rem;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 16rem;
}
.ac-headbtns {
display: flex;
gap: 0.25rem;
@@ -307,6 +380,10 @@ function resetChat() {
background: #f1f2f4;
color: var(--text);
}
.ac-iconbtn.on {
background: var(--accent-weak);
color: var(--accent);
}
.ac-iconbtn:disabled {
opacity: 0.5;
cursor: default;
@@ -433,6 +510,70 @@ function resetChat() {
padding: 0.5rem 0.75rem;
}
/* 기록(지난 대화) 목록 */
.ac-history {
gap: 0;
padding: 0.5rem 0.5rem;
}
.ac-hist-empty {
margin: auto;
text-align: center;
font-size: 0.8125rem;
color: var(--text-3);
padding: 2rem 0;
}
.ac-hist-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.625rem;
border-radius: 0.5rem;
cursor: pointer;
}
.ac-hist-item:hover {
background: #f4f5f7;
}
.ac-hist-main {
flex: 1;
min-width: 0;
}
.ac-hist-title {
font-size: 0.875rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ac-hist-time {
font-size: 0.6875rem;
color: var(--text-3);
margin-top: 0.1875rem;
}
.ac-hist-del {
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
border-radius: 0.4375rem;
color: var(--text-3);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
opacity: 0;
}
.ac-hist-item:hover .ac-hist-del {
opacity: 1;
}
.ac-hist-del:hover {
background: var(--red-weak);
color: var(--red);
}
.ac-hist-del svg {
width: 0.9375rem;
height: 0.9375rem;
}
/* 입력 */
.ac-foot {
border-top: 1px solid var(--border);