@@ -614,6 +855,171 @@
// 페이지 로드 시 검색창 포커스
document.getElementById('searchInput').focus();
+
+ // ══════════════════════════════════════════════════════════════════
+ // 동물약 챗봇
+ // ══════════════════════════════════════════════════════════════════
+ let chatHistory = [];
+ let isChatLoading = false;
+
+ function toggleChatbot() {
+ const panel = document.getElementById('chatbotPanel');
+ const btn = document.getElementById('chatbotToggle');
+ const isOpen = panel.classList.toggle('open');
+ btn.classList.toggle('active', isOpen);
+ btn.innerHTML = isOpen ? '✕' : '🐾';
+ if (isOpen) {
+ document.getElementById('chatInput').focus();
+ }
+ }
+
+ function sendSuggestion(text) {
+ document.getElementById('chatInput').value = text;
+ sendChat();
+ }
+
+ async function sendChat() {
+ const input = document.getElementById('chatInput');
+ const message = input.value.trim();
+
+ if (!message || isChatLoading) return;
+
+ // 사용자 메시지 표시
+ addChatMessage('user', message);
+ input.value = '';
+
+ // 히스토리에 추가
+ chatHistory.push({ role: 'user', content: message });
+
+ // 로딩 표시
+ isChatLoading = true;
+ document.getElementById('chatSendBtn').disabled = true;
+ showTypingIndicator();
+
+ try {
+ const response = await fetch('/api/animal-chat', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ messages: chatHistory })
+ });
+
+ const data = await response.json();
+
+ hideTypingIndicator();
+
+ if (data.success) {
+ // AI 응답 표시
+ addChatMessage('assistant', data.message, data.products);
+
+ // 히스토리에 추가
+ chatHistory.push({ role: 'assistant', content: data.message });
+
+ // 히스토리 길이 제한 (최근 20개)
+ if (chatHistory.length > 20) {
+ chatHistory = chatHistory.slice(-20);
+ }
+ } else {
+ addChatMessage('system', '⚠️ ' + (data.message || '오류가 발생했습니다'));
+ }
+ } catch (error) {
+ hideTypingIndicator();
+ addChatMessage('system', '⚠️ 네트워크 오류가 발생했습니다');
+ }
+
+ isChatLoading = false;
+ document.getElementById('chatSendBtn').disabled = false;
+ }
+
+ function addChatMessage(role, content, products) {
+ const container = document.getElementById('chatMessages');
+ const msgDiv = document.createElement('div');
+ msgDiv.className = `chat-message ${role}`;
+
+ // 줄바꿈 처리
+ let htmlContent = escapeHtml(content).replace(/\n/g, '
');
+
+ // 마크다운 굵게 처리
+ htmlContent = htmlContent.replace(/\*\*(.+?)\*\*/g, '
$1');
+
+ msgDiv.innerHTML = htmlContent;
+
+ // 언급된 제품 표시 (이미지 포함)
+ if (products && products.length > 0) {
+ const productsDiv = document.createElement('div');
+ productsDiv.className = 'products-mentioned';
+ productsDiv.innerHTML = '
📦 관련 제품:';
+
+ const productsGrid = document.createElement('div');
+ productsGrid.style.cssText = 'display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;';
+
+ products.forEach(p => {
+ const card = document.createElement('div');
+ card.className = 'product-card-mini';
+ card.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px;background:#f8fafc;border-radius:8px;cursor:pointer;border:1px solid #e2e8f0;';
+ card.onclick = () => searchProductFromChat(p.name);
+
+ // 이미지 컨테이너
+ const imgContainer = document.createElement('div');
+ imgContainer.style.cssText = 'width:40px;height:40px;flex-shrink:0;';
+
+ if (p.image_url) {
+ const img = document.createElement('img');
+ img.style.cssText = 'width:40px;height:40px;object-fit:cover;border-radius:4px;background:#e2e8f0;';
+ img.src = p.image_url;
+ img.alt = p.name;
+ img.onerror = function() {
+ // 이미지 로드 실패 시 아이콘으로 대체
+ imgContainer.innerHTML = '
💊
';
+ };
+ imgContainer.appendChild(img);
+ } else {
+ // 이미지 없으면 아이콘
+ imgContainer.innerHTML = '
💊
';
+ }
+
+ // 텍스트
+ const textDiv = document.createElement('div');
+ textDiv.innerHTML = `
${p.name}
${formatPrice(p.price)}
`;
+
+ card.appendChild(imgContainer);
+ card.appendChild(textDiv);
+ productsGrid.appendChild(card);
+ });
+
+ productsDiv.appendChild(productsGrid);
+ msgDiv.appendChild(productsDiv);
+ }
+
+ container.appendChild(msgDiv);
+ container.scrollTop = container.scrollHeight;
+ }
+
+ function showTypingIndicator() {
+ const container = document.getElementById('chatMessages');
+ const indicator = document.createElement('div');
+ indicator.className = 'typing-indicator';
+ indicator.id = 'typingIndicator';
+ indicator.innerHTML = '
';
+ container.appendChild(indicator);
+ container.scrollTop = container.scrollHeight;
+ }
+
+ function hideTypingIndicator() {
+ const indicator = document.getElementById('typingIndicator');
+ if (indicator) indicator.remove();
+ }
+
+ function searchProductFromChat(productName) {
+ // 챗봇에서 제품 클릭 시 검색창에 입력하고 검색
+ document.getElementById('searchInput').value = productName;
+ document.getElementById('animalOnly').checked = true;
+ searchProducts();
+
+ // 모바일에서 챗봇 닫기
+ if (window.innerWidth <= 1100) {
+ document.getElementById('chatbotPanel').classList.remove('open');
+ }
+ }