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:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 답변 참고 사례
|
||||
|
||||
Reference in New Issue
Block a user