feat: AI 어시스턴트 마크다운 렌더링 및 상태 표시 개선

- marked.js 라이브러리 추가, AI 답변 마크다운 렌더링
- AI 답변 prose 스타일 적용 (제목, 목록, 굵은글씨, 인용)
- health 응답 파싱 개선 (이중 중첩 구조 fallback 추가)
- JS/CSS 버전 캐시 무효화 (v=20260307)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-07 12:52:19 +09:00
parent 617c51ca53
commit e6cc466a0e
3 changed files with 26 additions and 5 deletions

View File

@@ -8,7 +8,8 @@
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/tkqc-common.css?v=20260306">
<link rel="stylesheet" href="/static/css/ai-assistant.css?v=20260306">
<link rel="stylesheet" href="/static/css/ai-assistant.css?v=20260307">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<!-- 로딩 스크린 -->
@@ -279,6 +280,6 @@
<script src="/static/js/utils/toast.js?v=20260306"></script>
<script src="/static/js/components/mobile-bottom-nav.js?v=20260306"></script>
<script src="/static/js/api.js?v=20260306"></script>
<script src="/static/js/pages/ai-assistant.js?v=20260306"></script>
<script src="/static/js/pages/ai-assistant.js?v=20260307"></script>
</body>
</html>

View File

@@ -67,6 +67,20 @@
padding: 10px 16px;
}
/* AI 답변 마크다운 스타일 */
.chat-bubble-ai .prose { color: #1e293b; }
.chat-bubble-ai .prose h1,
.chat-bubble-ai .prose h2,
.chat-bubble-ai .prose h3 { font-size: 0.95em; font-weight: 700; margin: 0.8em 0 0.3em; color: #334155; }
.chat-bubble-ai .prose p { margin: 0.4em 0; }
.chat-bubble-ai .prose ul,
.chat-bubble-ai .prose ol { margin: 0.3em 0; padding-left: 1.4em; }
.chat-bubble-ai .prose li { margin: 0.15em 0; }
.chat-bubble-ai .prose strong { color: #7c3aed; }
.chat-bubble-ai .prose code { background: #e2e8f0; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
.chat-bubble-ai .prose blockquote { border-left: 3px solid #7c3aed; padding-left: 0.8em; margin: 0.5em 0; color: #64748b; }
.chat-bubble-ai .prose hr { border-color: #e2e8f0; margin: 0.6em 0; }
.chat-bubble-ai .source-link {
color: #7c3aed;
cursor: pointer;

View File

@@ -127,7 +127,8 @@ async function checkAiHealth() {
const model = health.model
|| health.llm_model
|| (health.ollama?.models?.[0]);
|| health.ollama?.ollama?.models?.[0]
|| health.ollama?.models?.[0];
if (model) {
modelName.textContent = model;
}
@@ -193,8 +194,13 @@ function appendChatMessage(role, content, sources) {
// 내용 렌더링
const contentDiv = document.createElement('div');
contentDiv.className = 'text-sm whitespace-pre-line';
contentDiv.textContent = content;
if (role === 'ai' && typeof marked !== 'undefined') {
contentDiv.className = 'text-sm prose prose-sm max-w-none';
contentDiv.innerHTML = marked.parse(content);
} else {
contentDiv.className = 'text-sm whitespace-pre-line';
contentDiv.textContent = content;
}
bubble.appendChild(contentDiv);
// AI 답변 참고 사례