@dssp/project 1.0.0-alpha.8 → 1.0.0-y.0

package/dist-client/index.d.ts

@@ -0,0 +1 @@
+export * from './pages/lib/chatbot-widget';

package/dist-client/index.js

@@ -1,2 +1,2 @@
-"use strict";
+export * from './pages/lib/chatbot-widget';
 //# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA","sourcesContent":["export * from './pages/lib/chatbot-widget'\n"]}

package/dist-client/pages/lib/chatbot-widget.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+interface SourceItem {
+    title: string;
+    url: string;
+}
+interface ChatMessage {
+    id: string;
+    text: string;
+    isUser: boolean;
+    timestamp: Date;
+    sources?: SourceItem[];
+}
+export declare class ChatbotWidget extends LitElement {
+    static styles: import("lit").CSSResult;
+    static get properties(): {
+        isOpen: {
+            type: BooleanConstructor;
+        };
+        messages: {
+            type: ArrayConstructor;
+        };
+        inputValue: {
+            type: StringConstructor;
+        };
+        isLoading: {
+            type: BooleanConstructor;
+        };
+        isSourcesOpen: {
+            type: BooleanConstructor;
+        };
+        currentSources: {
+            type: ArrayConstructor;
+        };
+    };
+    isOpen: boolean;
+    messages: ChatMessage[];
+    inputValue: string;
+    isLoading: boolean;
+    isSourcesOpen: boolean;
+    currentSources: SourceItem[];
+    render(): import("lit-html").TemplateResult<1>;
+    private boundHandleEscapeKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEscapeKey(event: KeyboardEvent): void;
+    toggleChat(): void;
+    scrollToBottom(): void;
+    sendMessage(): Promise<void>;
+    openSourcesOverlay(sources: SourceItem[]): void;
+    closeSourcesOverlay(): void;
+    handleKeyPress(event: KeyboardEvent): void;
+}
+export {};

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

@@ -0,0 +1,631 @@
+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