@dssp/project 1.0.0-alpha.98 → 1.0.0

package/dist-client/pages/lib/chatbot-widget.js

@@ -1,631 +0,0 @@
-import { LitElement, html, css } from 'lit';
-// API 상수
-const CHATBOT_API_URL = 'https://korea-uni-chat-ui.ettisoft.com/chat';
-export class ChatbotWidget extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isOpen = false;
-        this.messages = [];
-        this.inputValue = '';
-        this.isLoading = false;
-        this.isSourcesOpen = false;
-        this.currentSources = [];
-        this.boundHandleEscapeKey = this.handleEscapeKey.bind(this);
-    }
-    static get properties() {
-        return {
-            isOpen: { type: Boolean },
-            messages: { type: Array },
-            inputValue: { type: String },
-            isLoading: { type: Boolean },
-            isSourcesOpen: { type: Boolean },
-            currentSources: { type: Array }
-        };
-    }
-    render() {
-        return html `
-      <div class="chatbot-container">
-        <!-- 챗봇 아이콘 -->
-        <button class="chatbot-icon" @click="${this.toggleChat}">
-          <svg viewBox="0 0 24 24">
-            <path
-              d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"
-            />
-          </svg>
-        </button>
-
-        <!-- 대화창 -->
-        <div class="chat-window ${this.isOpen ? 'open' : ''}">
-          <!-- 헤더 -->
-          <div class="chat-header">
-            <h3>챗봇 도우미</h3>
-            <button class="close-btn" @click="${this.toggleChat}">×</button>
-          </div>
-
-          <!-- 메시지 영역 -->
-          <div class="messages-container">
-            ${this.messages.length === 0
-            ? html `
-                  <div class="message bot">
-                    <div class="message-avatar">🤖</div>
-                    <div class="message-bubble">안녕하세요! 무엇을 도와드릴까요?</div>
-                  </div>
-                `
-            : ''}
-            ${this.messages.map(message => html `
-                <div class="message ${message.isUser ? 'user' : 'bot'}">
-                  <div class="message-avatar">${message.isUser ? '👤' : '🤖'}</div>
-                  <div class="message-bubble">
-                    ${message.text}
-                    ${!message.isUser && message.sources && message.sources.length
-            ? html `
-                          <div>
-                            <button class="evidence-btn" @click="${() => this.openSourcesOverlay(message.sources || [])}">
-                              근거 ${message.sources.length}개 보기
-                            </button>
-                          </div>
-                        `
-            : ''}
-                  </div>
-                </div>
-              `)}
-            ${this.isLoading
-            ? html `
-                  <div class="message bot">
-                    <div class="message-avatar">🤖</div>
-                    <div class="message-bubble">
-                      <div class="loading-indicator">
-                        <span>답변 중</span>
-                        <div class="loading-dots">
-                          <div class="loading-dot"></div>
-                          <div class="loading-dot"></div>
-                          <div class="loading-dot"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                `
-            : ''}
-          </div>
-
-          <!-- 입력 영역 -->
-          <div class="input-container">
-            <input
-              class="message-input"
-              type="text"
-              placeholder="메시지를 입력하세요..."
-              .value="${this.inputValue}"
-              @input="${(e) => (this.inputValue = e.target.value)}"
-              @keypress="${this.handleKeyPress}"
-              ?disabled="${this.isLoading}"
-            />
-            <button class="send-btn" @click="${this.sendMessage}" ?disabled="${this.isLoading || !this.inputValue.trim()}">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <!-- 근거 오버레이 -->
-        <div class="overlay ${this.isSourcesOpen ? 'open' : ''}" @click="${this.closeSourcesOverlay}">
-          <div class="overlay-panel" @click="${(e) => e.stopPropagation()}">
-            <div class="overlay-header">
-              <div class="overlay-title">근거 ${this.currentSources.length}개</div>
-              <button class="overlay-close" @click="${this.closeSourcesOverlay}">×</button>
-            </div>
-            <div class="overlay-body">
-              <ul class="source-list">
-                ${this.currentSources.map((s, idx) => html ` <li class="source-item">
-                      <a class="source-link" href="${s.url}" target="_blank" rel="noopener noreferrer"
-                        >[#${idx + 1}] ${s.title}</a
-                      >
-                    </li>`)}
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // 컴포넌트가 제거될 때 이벤트 리스너 정리
-        document.removeEventListener('keydown', this.boundHandleEscapeKey);
-    }
-    handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            if (this.isSourcesOpen) {
-                this.isSourcesOpen = false;
-            }
-            else if (this.isOpen) {
-                this.isOpen = false;
-            }
-        }
-    }
-    toggleChat() {
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            // 챗봇이 열릴 때 ESC 키 이벤트 리스너 추가
-            document.addEventListener('keydown', this.boundHandleEscapeKey);
-            // 챗봇이 열릴 때 스크롤을 맨 아래로
-            this.requestUpdate();
-            setTimeout(() => this.scrollToBottom(), 100);
-        }
-        else {
-            // 챗봇이 닫힐 때 ESC 키 이벤트 리스너 제거
-            document.removeEventListener('keydown', this.boundHandleEscapeKey);
-            this.isSourcesOpen = false;
-            this.currentSources = [];
-        }
-    }
-    scrollToBottom() {
-        var _a;
-        const messagesContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.messages-container');
-        if (messagesContainer) {
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
-        }
-    }
-    async sendMessage() {
-        var _a, _b;
-        if (!this.inputValue.trim() || this.isLoading)
-            return;
-        const userMessage = {
-            id: Date.now().toString(),
-            text: this.inputValue.trim(),
-            isUser: true,
-            timestamp: new Date()
-        };
-        this.messages = [...this.messages, userMessage];
-        const messageText = this.inputValue.trim();
-        this.inputValue = '';
-        this.isLoading = true;
-        // 사용자 메시지 추가 후 스크롤을 맨 아래로
-        setTimeout(() => this.scrollToBottom(), 50);
-        // 포커스 유지를 위해 input 요소 참조 저장
-        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.message-input');
-        try {
-            // API 호출
-            const response = await fetch(CHATBOT_API_URL, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ query: messageText, top_k: 6 })
-            });
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}`);
-            }
-            const data = await response.json();
-            const botMessage = {
-                id: (Date.now() + 1).toString(),
-                text: ((_b = data === null || data === void 0 ? void 0 : data.answer) === null || _b === void 0 ? void 0 : _b.trim()) || '죄송합니다. 응답을 처리할 수 없습니다.',
-                isUser: false,
-                timestamp: new Date(),
-                sources: (data === null || data === void 0 ? void 0 : data.sources) || []
-            };
-            this.messages = [...this.messages, botMessage];
-            // 봇 메시지 추가 후 스크롤을 맨 아래로
-            setTimeout(() => this.scrollToBottom(), 50);
-        }
-        catch (error) {
-            const errorMessage = {
-                id: (Date.now() + 1).toString(),
-                text: '죄송합니다. 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
-                isUser: false,
-                timestamp: new Date()
-            };
-            this.messages = [...this.messages, errorMessage];
-            // 에러 메시지 추가 후 스크롤을 맨 아래로
-            setTimeout(() => this.scrollToBottom(), 50);
-        }
-        finally {
-            this.isLoading = false;
-            // 로딩 완료 후 포커스 복원
-            setTimeout(() => {
-                if (input) {
-                    input.focus();
-                }
-            }, 100);
-        }
-    }
-    openSourcesOverlay(sources) {
-        if (!sources || sources.length === 0)
-            return;
-        this.currentSources = sources;
-        this.isSourcesOpen = true;
-    }
-    closeSourcesOverlay() {
-        this.isSourcesOpen = false;
-        this.currentSources = [];
-    }
-    handleKeyPress(event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            this.sendMessage();
-        }
-    }
-}
-ChatbotWidget.styles = css `
-    :host {
-      position: fixed;
-      bottom: 40px;
-      right: 20px;
-      z-index: 1000;
-    }
-
-    .chatbot-container {
-      position: relative;
-    }
-
-    .chatbot-icon {
-      width: 60px;
-      height: 60px;
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-      transition: all 0.3s ease;
-      border: none;
-      outline: none;
-    }
-
-    .chatbot-icon:hover {
-      transform: scale(1.1);
-      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-    }
-
-    .chatbot-icon svg {
-      width: 28px;
-      height: 28px;
-      fill: white;
-    }
-
-    .chat-window {
-      position: absolute;
-      bottom: 80px;
-      right: 0;
-      width: 350px;
-      height: 500px;
-      background: white;
-      border-radius: 20px;
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      transform: translateY(20px) scale(0.95);
-      opacity: 0;
-      transition: all 0.3s ease;
-      border: 1px solid #e1e5e9;
-      pointer-events: none; /* 닫혀있을 때 클릭 차단 해제 */
-    }
-
-    .chat-window.open {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-      pointer-events: auto; /* 열렸을 때 클릭 가능 */
-    }
-
-    .chat-header {
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      color: white;
-      padding: 15px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .chat-header h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .close-btn {
-      background: none;
-      border: none;
-      color: white;
-      cursor: pointer;
-      font-size: 32px;
-      padding: 0;
-      width: 36px;
-      height: 36px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      transition: background-color 0.2s ease;
-    }
-
-    .close-btn:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .messages-container {
-      flex: 1;
-      overflow-y: auto;
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-    }
-
-    .message {
-      display: flex;
-      align-items: flex-end;
-      gap: 10px;
-      max-width: 80%;
-    }
-
-    .message.user {
-      align-self: flex-end;
-      flex-direction: row-reverse;
-    }
-
-    .message.bot {
-      align-self: flex-start;
-    }
-
-    .message-bubble {
-      padding: 12px 16px;
-      border-radius: 18px;
-      font-size: 14px;
-      line-height: 1.4;
-      word-wrap: break-word;
-      position: relative;
-    }
-
-    .message.user .message-bubble {
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      color: white;
-      border-bottom-right-radius: 4px;
-    }
-
-    .message.bot .message-bubble {
-      background: #f1f3f4;
-      color: #333;
-      border-bottom-left-radius: 4px;
-    }
-
-    .message-avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-      flex-shrink: 0;
-    }
-
-    .message.user .message-avatar {
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      color: white;
-    }
-
-    .message.bot .message-avatar {
-      background: #e8eaf0;
-      color: #666;
-    }
-
-    .input-container {
-      padding: 20px;
-      border-top: 1px solid #e1e5e9;
-      display: flex;
-      gap: 10px;
-      align-items: center;
-    }
-
-    .message-input {
-      flex: 1;
-      border: 1px solid #e1e5e9;
-      border-radius: 25px;
-      padding: 12px 16px;
-      font-size: 14px;
-      outline: none;
-      transition: border-color 0.2s ease;
-    }
-
-    .message-input:focus {
-      border-color: var(--md-sys-color-primary);
-    }
-
-    .send-btn {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      border: none;
-      color: white;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-    }
-
-    .send-btn:hover:not(:disabled) {
-      transform: scale(1.05);
-    }
-
-    .send-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .loading-indicator {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: #666;
-      font-size: 12px;
-    }
-
-    .loading-dots {
-      display: flex;
-      gap: 4px;
-    }
-
-    .loading-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--md-sys-color-primary);
-      animation: loading 1.4s infinite ease-in-out;
-    }
-
-    .loading-dot:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    .loading-dot:nth-child(2) {
-      animation-delay: -0.16s;
-    }
-
-    @keyframes loading {
-      0%,
-      80%,
-      100% {
-        transform: scale(0);
-      }
-      40% {
-        transform: scale(1);
-      }
-    }
-
-    /* 스크롤바 스타일링 */
-    .messages-container::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    .messages-container::-webkit-scrollbar-track {
-      background: #f1f1f1;
-      border-radius: 3px;
-    }
-
-    .messages-container::-webkit-scrollbar-thumb {
-      background: #c1c1c1;
-      border-radius: 3px;
-    }
-
-    .messages-container::-webkit-scrollbar-thumb:hover {
-      background: #a8a8a8;
-    }
-
-    /* 근거 버튼 */
-    .evidence-btn {
-      margin-top: 8px;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      border: 1px solid #d6daf0;
-      background: #ffffff;
-      color: #3b4cca;
-      border-radius: 14px;
-      padding: 6px 10px;
-      font-size: 12px;
-      cursor: pointer;
-      transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease;
-    }
-
-    .evidence-btn:hover {
-      background-color: #f4f6ff;
-      border-color: #c2c8ef;
-    }
-
-    /* 오버레이 */
-    .overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.35);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      z-index: 1100; /* 챗봇보다 위 */
-    }
-
-    .overlay.open {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .overlay-panel {
-      width: min(520px, calc(100vw - 40px));
-      max-height: min(70vh, 560px);
-      background: #ffffff;
-      border-radius: 14px;
-      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .overlay-header {
-      padding: 14px 16px;
-      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);
-      color: #ffffff;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .overlay-title {
-      font-weight: 600;
-      font-size: 16px;
-    }
-
-    .overlay-close {
-      background: none;
-      border: none;
-      color: #ffffff;
-      font-size: 26px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-
-    .overlay-body {
-      padding: 12px 16px 16px 16px;
-      overflow-y: auto;
-    }
-
-    .source-list {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    .source-item {
-      border: 1px solid #e6e9f2;
-      border-radius: 10px;
-      padding: 10px 12px;
-      background: #f9fafc;
-    }
-
-    .source-link {
-      color: #1e3a8a;
-      text-decoration: none;
-      display: block;
-      word-break: break-all;
-    }
-
-    .source-link:hover {
-      text-decoration: underline;
-    }
-  `;
-customElements.define('chatbot-widget', ChatbotWidget);
-//# sourceMappingURL=chatbot-widget.js.map

package/dist-client/pages/lib/chatbot-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chatbot-widget.js","sourceRoot":"","sources":["../../../client/pages/lib/chatbot-widget.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\n\n// API 상수\nconst CHATBOT_API_URL = 'https://korea-uni-chat-ui.ettisoft.com/chat'\n\ninterface SourceItem {\n  title: string\n  url: string\n}\n\ninterface ChatMessage {\n  id: string\n  text: string\n  isUser: boolean\n  timestamp: Date\n  sources?: SourceItem[]\n}\n\nexport class ChatbotWidget extends LitElement {\n  static styles = css`\n    :host {\n      position: fixed;\n      bottom: 40px;\n      right: 20px;\n      z-index: 1000;\n    }\n\n    .chatbot-container {\n      position: relative;\n    }\n\n    .chatbot-icon {\n      width: 60px;\n      height: 60px;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n      transition: all 0.3s ease;\n      border: none;\n      outline: none;\n    }\n\n    .chatbot-icon:hover {\n      transform: scale(1.1);\n      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);\n    }\n\n    .chatbot-icon svg {\n      width: 28px;\n      height: 28px;\n      fill: white;\n    }\n\n    .chat-window {\n      position: absolute;\n      bottom: 80px;\n      right: 0;\n      width: 350px;\n      height: 500px;\n      background: white;\n      border-radius: 20px;\n      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      transform: translateY(20px) scale(0.95);\n      opacity: 0;\n      transition: all 0.3s ease;\n      border: 1px solid #e1e5e9;\n      pointer-events: none; /* 닫혀있을 때 클릭 차단 해제 */\n    }\n\n    .chat-window.open {\n      transform: translateY(0) scale(1);\n      opacity: 1;\n      pointer-events: auto; /* 열렸을 때 클릭 가능 */\n    }\n\n    .chat-header {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n      padding: 15px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .chat-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: white;\n      cursor: pointer;\n      font-size: 32px;\n      padding: 0;\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      transition: background-color 0.2s ease;\n    }\n\n    .close-btn:hover {\n      background-color: rgba(255, 255, 255, 0.2);\n    }\n\n    .messages-container {\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 15px;\n    }\n\n    .message {\n      display: flex;\n      align-items: flex-end;\n      gap: 10px;\n      max-width: 80%;\n    }\n\n    .message.user {\n      align-self: flex-end;\n      flex-direction: row-reverse;\n    }\n\n    .message.bot {\n      align-self: flex-start;\n    }\n\n    .message-bubble {\n      padding: 12px 16px;\n      border-radius: 18px;\n      font-size: 14px;\n      line-height: 1.4;\n      word-wrap: break-word;\n      position: relative;\n    }\n\n    .message.user .message-bubble {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n      border-bottom-right-radius: 4px;\n    }\n\n    .message.bot .message-bubble {\n      background: #f1f3f4;\n      color: #333;\n      border-bottom-left-radius: 4px;\n    }\n\n    .message-avatar {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 600;\n      flex-shrink: 0;\n    }\n\n    .message.user .message-avatar {\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: white;\n    }\n\n    .message.bot .message-avatar {\n      background: #e8eaf0;\n      color: #666;\n    }\n\n    .input-container {\n      padding: 20px;\n      border-top: 1px solid #e1e5e9;\n      display: flex;\n      gap: 10px;\n      align-items: center;\n    }\n\n    .message-input {\n      flex: 1;\n      border: 1px solid #e1e5e9;\n      border-radius: 25px;\n      padding: 12px 16px;\n      font-size: 14px;\n      outline: none;\n      transition: border-color 0.2s ease;\n    }\n\n    .message-input:focus {\n      border-color: var(--md-sys-color-primary);\n    }\n\n    .send-btn {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      border: none;\n      color: white;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease;\n    }\n\n    .send-btn:hover:not(:disabled) {\n      transform: scale(1.05);\n    }\n\n    .send-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .loading-indicator {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      color: #666;\n      font-size: 12px;\n    }\n\n    .loading-dots {\n      display: flex;\n      gap: 4px;\n    }\n\n    .loading-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--md-sys-color-primary);\n      animation: loading 1.4s infinite ease-in-out;\n    }\n\n    .loading-dot:nth-child(1) {\n      animation-delay: -0.32s;\n    }\n    .loading-dot:nth-child(2) {\n      animation-delay: -0.16s;\n    }\n\n    @keyframes loading {\n      0%,\n      80%,\n      100% {\n        transform: scale(0);\n      }\n      40% {\n        transform: scale(1);\n      }\n    }\n\n    /* 스크롤바 스타일링 */\n    .messages-container::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .messages-container::-webkit-scrollbar-track {\n      background: #f1f1f1;\n      border-radius: 3px;\n    }\n\n    .messages-container::-webkit-scrollbar-thumb {\n      background: #c1c1c1;\n      border-radius: 3px;\n    }\n\n    .messages-container::-webkit-scrollbar-thumb:hover {\n      background: #a8a8a8;\n    }\n\n    /* 근거 버튼 */\n    .evidence-btn {\n      margin-top: 8px;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      border: 1px solid #d6daf0;\n      background: #ffffff;\n      color: #3b4cca;\n      border-radius: 14px;\n      padding: 6px 10px;\n      font-size: 12px;\n      cursor: pointer;\n      transition:\n        background-color 0.2s ease,\n        border-color 0.2s ease;\n    }\n\n    .evidence-btn:hover {\n      background-color: #f4f6ff;\n      border-color: #c2c8ef;\n    }\n\n    /* 오버레이 */\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.35);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s ease;\n      z-index: 1100; /* 챗봇보다 위 */\n    }\n\n    .overlay.open {\n      opacity: 1;\n      pointer-events: auto;\n    }\n\n    .overlay-panel {\n      width: min(520px, calc(100vw - 40px));\n      max-height: min(70vh, 560px);\n      background: #ffffff;\n      border-radius: 14px;\n      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .overlay-header {\n      padding: 14px 16px;\n      background: linear-gradient(135deg, var(--md-sys-color-tertiary, #b85d5a) 0%, var(--md-sys-color-primary) 100%);\n      color: #ffffff;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .overlay-title {\n      font-weight: 600;\n      font-size: 16px;\n    }\n\n    .overlay-close {\n      background: none;\n      border: none;\n      color: #ffffff;\n      font-size: 26px;\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n\n    .overlay-body {\n      padding: 12px 16px 16px 16px;\n      overflow-y: auto;\n    }\n\n    .source-list {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .source-item {\n      border: 1px solid #e6e9f2;\n      border-radius: 10px;\n      padding: 10px 12px;\n      background: #f9fafc;\n    }\n\n    .source-link {\n      color: #1e3a8a;\n      text-decoration: none;\n      display: block;\n      word-break: break-all;\n    }\n\n    .source-link:hover {\n      text-decoration: underline;\n    }\n  `\n\n  static get properties() {\n    return {\n      isOpen: { type: Boolean },\n      messages: { type: Array },\n      inputValue: { type: String },\n      isLoading: { type: Boolean },\n      isSourcesOpen: { type: Boolean },\n      currentSources: { type: Array }\n    }\n  }\n\n  isOpen = false\n  messages: ChatMessage[] = []\n  inputValue = ''\n  isLoading = false\n  isSourcesOpen = false\n  currentSources: SourceItem[] = []\n\n  render() {\n    return html`\n      <div class=\"chatbot-container\">\n        <!-- 챗봇 아이콘 -->\n        <button class=\"chatbot-icon\" @click=\"${this.toggleChat}\">\n          <svg viewBox=\"0 0 24 24\">\n            <path\n              d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"\n            />\n          </svg>\n        </button>\n\n        <!-- 대화창 -->\n        <div class=\"chat-window ${this.isOpen ? 'open' : ''}\">\n          <!-- 헤더 -->\n          <div class=\"chat-header\">\n            <h3>챗봇 도우미</h3>\n            <button class=\"close-btn\" @click=\"${this.toggleChat}\">×</button>\n          </div>\n\n          <!-- 메시지 영역 -->\n          <div class=\"messages-container\">\n            ${this.messages.length === 0\n              ? html`\n                  <div class=\"message bot\">\n                    <div class=\"message-avatar\">🤖</div>\n                    <div class=\"message-bubble\">안녕하세요! 무엇을 도와드릴까요?</div>\n                  </div>\n                `\n              : ''}\n            ${this.messages.map(\n              message => html`\n                <div class=\"message ${message.isUser ? 'user' : 'bot'}\">\n                  <div class=\"message-avatar\">${message.isUser ? '👤' : '🤖'}</div>\n                  <div class=\"message-bubble\">\n                    ${message.text}\n                    ${!message.isUser && message.sources && message.sources.length\n                      ? html`\n                          <div>\n                            <button class=\"evidence-btn\" @click=\"${() => this.openSourcesOverlay(message.sources || [])}\">\n                              근거 ${message.sources.length}개 보기\n                            </button>\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                </div>\n              `\n            )}\n            ${this.isLoading\n              ? html`\n                  <div class=\"message bot\">\n                    <div class=\"message-avatar\">🤖</div>\n                    <div class=\"message-bubble\">\n                      <div class=\"loading-indicator\">\n                        <span>답변 중</span>\n                        <div class=\"loading-dots\">\n                          <div class=\"loading-dot\"></div>\n                          <div class=\"loading-dot\"></div>\n                          <div class=\"loading-dot\"></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          <!-- 입력 영역 -->\n          <div class=\"input-container\">\n            <input\n              class=\"message-input\"\n              type=\"text\"\n              placeholder=\"메시지를 입력하세요...\"\n              .value=\"${this.inputValue}\"\n              @input=\"${(e: Event) => (this.inputValue = (e.target as HTMLInputElement).value)}\"\n              @keypress=\"${this.handleKeyPress}\"\n              ?disabled=\"${this.isLoading}\"\n            />\n            <button class=\"send-btn\" @click=\"${this.sendMessage}\" ?disabled=\"${this.isLoading || !this.inputValue.trim()}\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n        <!-- 근거 오버레이 -->\n        <div class=\"overlay ${this.isSourcesOpen ? 'open' : ''}\" @click=\"${this.closeSourcesOverlay}\">\n          <div class=\"overlay-panel\" @click=\"${(e: Event) => e.stopPropagation()}\">\n            <div class=\"overlay-header\">\n              <div class=\"overlay-title\">근거 ${this.currentSources.length}개</div>\n              <button class=\"overlay-close\" @click=\"${this.closeSourcesOverlay}\">×</button>\n            </div>\n            <div class=\"overlay-body\">\n              <ul class=\"source-list\">\n                ${this.currentSources.map(\n                  (s, idx) =>\n                    html` <li class=\"source-item\">\n                      <a class=\"source-link\" href=\"${s.url}\" target=\"_blank\" rel=\"noopener noreferrer\"\n                        >[#${idx + 1}] ${s.title}</a\n                      >\n                    </li>`\n                )}\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private boundHandleEscapeKey = this.handleEscapeKey.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // 컴포넌트가 제거될 때 이벤트 리스너 정리\n    document.removeEventListener('keydown', this.boundHandleEscapeKey)\n  }\n\n  handleEscapeKey(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (this.isSourcesOpen) {\n        this.isSourcesOpen = false\n      } else if (this.isOpen) {\n        this.isOpen = false\n      }\n    }\n  }\n\n  toggleChat() {\n    this.isOpen = !this.isOpen\n    if (this.isOpen) {\n      // 챗봇이 열릴 때 ESC 키 이벤트 리스너 추가\n      document.addEventListener('keydown', this.boundHandleEscapeKey)\n      // 챗봇이 열릴 때 스크롤을 맨 아래로\n      this.requestUpdate()\n      setTimeout(() => this.scrollToBottom(), 100)\n    } else {\n      // 챗봇이 닫힐 때 ESC 키 이벤트 리스너 제거\n      document.removeEventListener('keydown', this.boundHandleEscapeKey)\n      this.isSourcesOpen = false\n      this.currentSources = []\n    }\n  }\n\n  scrollToBottom() {\n    const messagesContainer = this.shadowRoot?.querySelector('.messages-container') as HTMLElement\n    if (messagesContainer) {\n      messagesContainer.scrollTop = messagesContainer.scrollHeight\n    }\n  }\n\n  async sendMessage() {\n    if (!this.inputValue.trim() || this.isLoading) return\n\n    const userMessage: ChatMessage = {\n      id: Date.now().toString(),\n      text: this.inputValue.trim(),\n      isUser: true,\n      timestamp: new Date()\n    }\n\n    this.messages = [...this.messages, userMessage]\n    const messageText = this.inputValue.trim()\n    this.inputValue = ''\n    this.isLoading = true\n\n    // 사용자 메시지 추가 후 스크롤을 맨 아래로\n    setTimeout(() => this.scrollToBottom(), 50)\n\n    // 포커스 유지를 위해 input 요소 참조 저장\n    const input = this.shadowRoot?.querySelector('.message-input') as HTMLInputElement\n\n    try {\n      // API 호출\n      const response = await fetch(CHATBOT_API_URL, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query: messageText, top_k: 6 })\n      })\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}`)\n      }\n\n      const data = await response.json()\n\n      const botMessage: ChatMessage = {\n        id: (Date.now() + 1).toString(),\n        text: data?.answer?.trim() || '죄송합니다. 응답을 처리할 수 없습니다.',\n        isUser: false,\n        timestamp: new Date(),\n        sources: data?.sources || []\n      }\n\n      this.messages = [...this.messages, botMessage]\n      // 봇 메시지 추가 후 스크롤을 맨 아래로\n      setTimeout(() => this.scrollToBottom(), 50)\n    } catch (error) {\n      const errorMessage: ChatMessage = {\n        id: (Date.now() + 1).toString(),\n        text: '죄송합니다. 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',\n        isUser: false,\n        timestamp: new Date()\n      }\n      this.messages = [...this.messages, errorMessage]\n      // 에러 메시지 추가 후 스크롤을 맨 아래로\n      setTimeout(() => this.scrollToBottom(), 50)\n    } finally {\n      this.isLoading = false\n      // 로딩 완료 후 포커스 복원\n      setTimeout(() => {\n        if (input) {\n          input.focus()\n        }\n      }, 100)\n    }\n  }\n\n  openSourcesOverlay(sources: SourceItem[]) {\n    if (!sources || sources.length === 0) return\n    this.currentSources = sources\n    this.isSourcesOpen = true\n  }\n\n  closeSourcesOverlay() {\n    this.isSourcesOpen = false\n    this.currentSources = []\n  }\n\n  handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      this.sendMessage()\n    }\n  }\n}\n\ncustomElements.define('chatbot-widget', ChatbotWidget)\n"]}