@dssp/project 1.0.0-alpha.38 → 1.0.0-alpha.40

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,43 @@
+import { LitElement } from 'lit-element';
+interface ChatMessage {
+    id: string;
+    text: string;
+    isUser: boolean;
+    timestamp: Date;
+}
+export declare class ChatbotWidget extends LitElement {
+    static get properties(): {
+        isOpen: {
+            type: BooleanConstructor;
+        };
+        messages: {
+            type: ArrayConstructor;
+        };
+        inputValue: {
+            type: StringConstructor;
+        };
+        isLoading: {
+            type: BooleanConstructor;
+        };
+    };
+    isOpen: boolean;
+    messages: ChatMessage[];
+    inputValue: string;
+    isLoading: boolean;
+    private boundHandleEscapeKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEscapeKey(event: KeyboardEvent): void;
+    static styles: import("lit-element").CSSResult;
+    toggleChat(): void;
+    scrollToBottom(): void;
+    sendMessage(): Promise<void>;
+    handleKeyPress(event: KeyboardEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'chatbot-widget': ChatbotWidget;
+    }
+}
+export {};

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

@@ -0,0 +1,469 @@
+import { LitElement, html, css } from 'lit-element';
+// API 상수
+const CHATBOT_API_URL = 'https://api.example.com/chatbot';
+export class ChatbotWidget extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isOpen = false;
+        this.messages = [];
+        this.inputValue = '';
+        this.isLoading = false;
+        this.boundHandleEscapeKey = this.handleEscapeKey.bind(this);
+    }
+    static get properties() {
+        return {
+            isOpen: { type: Boolean },
+            messages: { type: Array },
+            inputValue: { type: String },
+            isLoading: { type: Boolean }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // 컴포넌트가 제거될 때 이벤트 리스너 정리
+        document.removeEventListener('keydown', this.boundHandleEscapeKey);
+    }
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && 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);
+        }
+    }
+    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;
+        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({ message: messageText })
+            });
+            const data = await response.json();
+            const botMessage = {
+                id: (Date.now() + 1).toString(),
+                text: data.response || '죄송합니다. 응답을 처리할 수 없습니다.',
+                isUser: false,
+                timestamp: new Date()
+            };
+            this.messages = [...this.messages, botMessage];
+            // 봇 메시지 추가 후 스크롤을 맨 아래로
+            setTimeout(() => this.scrollToBottom(), 50);
+        }
+        catch (error) {
+            console.error('챗봇 API 오류:', 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);
+        }
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.sendMessage();
+        }
+    }
+    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}</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>
+    `;
+    }
+}
+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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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: #667eea;
+    }
+
+    .send-btn {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 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: #667eea;
+      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;
+    }
+  `;
+// 커스텀 엘리먼트 등록
+customElements.define('chatbot-widget', ChatbotWidget);
+//# sourceMappingURL=chatbot-widget.js.map

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

@@ -0,0 +1 @@
+{"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-element'\n\n// API 상수\nconst CHATBOT_API_URL = 'https://api.example.com/chatbot'\n\ninterface ChatMessage {\n  id: string\n  text: string\n  isUser: boolean\n  timestamp: Date\n}\n\nexport class ChatbotWidget extends LitElement {\n  static get properties() {\n    return {\n      isOpen: { type: Boolean },\n      messages: { type: Array },\n      inputValue: { type: String },\n      isLoading: { type: Boolean }\n    }\n  }\n\n  isOpen = false\n  messages: ChatMessage[] = []\n  inputValue = ''\n  isLoading = false\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' && this.isOpen) {\n      this.isOpen = false\n    }\n  }\n\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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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: #667eea;\n    }\n\n    .send-btn {\n      width: 40px;\n      height: 40px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 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: #667eea;\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  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    }\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({ message: messageText })\n      })\n\n      const data = await response.json()\n\n      const botMessage: ChatMessage = {\n        id: (Date.now() + 1).toString(),\n        text: data.response || '죄송합니다. 응답을 처리할 수 없습니다.',\n        isUser: false,\n        timestamp: new Date()\n      }\n\n      this.messages = [...this.messages, botMessage]\n      // 봇 메시지 추가 후 스크롤을 맨 아래로\n      setTimeout(() => this.scrollToBottom(), 50)\n    } catch (error) {\n      console.error('챗봇 API 오류:', 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  handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault()\n      this.sendMessage()\n    }\n  }\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\">${message.text}</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      </div>\n    `\n  }\n}\n\n// 커스텀 엘리먼트 등록\ncustomElements.define('chatbot-widget', ChatbotWidget)\n\n// 전역에서 사용할 수 있도록 선언\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'chatbot-widget': ChatbotWidget\n  }\n}\n"]}

package/dist-client/pages/project/project-detail.js

@@ -296,11 +296,11 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               </span>
               <span>
                 <div>검측요청</div>
-                <div bold>${this.inspectionSummary.wait}</div>
+                <div bold>${this.inspectionSummary.request}</div>
               </span>
               <span>
                 <div>검측대기</div>
-                <div bold>${this.inspectionSummary.request}</div>
+                <div bold>${this.inspectionSummary.wait}</div>
               </span>
               <span>
                 <div>합격</div>