@fuzionx/helpdesk 0.1.72

package/dist/helpdesk.es.js

@@ -0,0 +1,930 @@
+import { inject as G, ref as C, computed as Z, watch as K, nextTick as A, onMounted as ee, onUnmounted as te, openBlock as c, createElementBlock as h, normalizeStyle as se, unref as g, normalizeClass as B, createElementVNode as a, createCommentVNode as v, createVNode as ne, Transition as ie, withCtx as oe, toDisplayString as f, createTextVNode as I, Fragment as V, renderList as ae, withDirectives as de, withKeys as re, vModelText as le, reactive as ce } from "vue";
+const he = {
+  /**
+   * WebSocket URL (선택)
+   * 빈 문자열이면 현재 도메인 기준 자동 구성.
+   * 외부 사이트에서는 'wss://example.com/ws' 형태로 지정.
+   */
+  wsUrl: "",
+  /** WS 네임스페이스 경로 */
+  wsNamespace: "/support-chat",
+  // ── ASP/WASM 설정 ──
+  /**
+   * ASP 암/복호화 활성화 여부
+   * true: FuzionXSocket 내부에서 자동 ASP 암/복호화
+   * false: 평문 통신 (개발/테스트용)
+   */
+  aspEnabled: !0,
+  /**
+   * ASP masterSecret (동일 도메인 SPA에서 provide로 전달)
+   * 빈 문자열이면 connect() 시 자동 추출 시도.
+   */
+  masterSecret: "",
+  /**
+   * WASM 파일 URL
+   * 동일 도메인에서는 '/wasm/fuzionx_client_wasm.js' 자동 사용.
+   * 외부 사이트에서는 CDN URL 지정 필요.
+   */
+  wasmUrl: "/wasm/fuzionx_client_wasm.js",
+  /** 템플릿 이름 (default / minimal / bubble) */
+  template: "default",
+  /** 테마 (light / dark / auto) */
+  theme: "auto",
+  /** FAB 위치 (bottom-right / bottom-left) */
+  position: "bottom-right",
+  /** 위젯 타이틀 */
+  title: "고객상담",
+  /** 입장안내 환영 메시지 */
+  welcomeMessage: "안녕하세요! 무엇을 도와드릴까요?",
+  /** 상담 가능 시간 안내 */
+  operatingHours: "09:00~18:00",
+  /** 주말/공휴일 안내 */
+  offDayNotice: "주말/공휴일 휴무",
+  /** WS 자동 연결 여부 */
+  autoConnect: !1,
+  /** 인증 토큰 (외부 사이트 전용 JWT) */
+  authToken: "",
+  /** 팝업 모드 (true: window.open, false: 인라인 위젯) */
+  popupMode: !1,
+  /** 다국어 메시지 오버라이드 */
+  i18n: null,
+  /** 위젯 z-index */
+  zIndex: 9990
+};
+function ue(n = {}) {
+  const e = { ...he, ...n };
+  return ["light", "dark", "auto"].includes(e.theme) || (console.warn(`[fuzionx-helpdesk] 알 수 없는 theme: "${e.theme}", 기본값 "auto" 사용`), e.theme = "auto"), ["bottom-right", "bottom-left"].includes(e.position) || (console.warn(`[fuzionx-helpdesk] 알 수 없는 position: "${e.position}", 기본값 "bottom-right" 사용`), e.position = "bottom-right"), e;
+}
+const k = {
+  /** 상담사 온라인 여부 확인 (입장 버튼 클릭 시) */
+  CHECK_AGENTS: "checkAgents",
+  /** 상담 요청 → 세션 생성 */
+  REQUEST_CHAT: "requestChat",
+  /** 메시지 전송 */
+  MESSAGE: "message",
+  /** 회원이 상담 종료 */
+  CLOSE_CHAT: "closeChat",
+  /** 입력 중 상태 전송 */
+  TYPING: "typing",
+  /** 과거 세션 복구 요청 */
+  RESUME_SESSION: "resumeSession"
+}, p = {
+  /** 상담사 온라인 상태 응답 */
+  AGENT_STATUS: "agentStatus",
+  /** 대기열 등록 완료 */
+  CHAT_QUEUED: "chatQueued",
+  /** 상담원 입장 (첫 번째) */
+  AGENT_JOINED: "agentJoined",
+  /** 메시지 수신 (FuzionXSocket 'message' 예약 이벤트 충돌 방지) */
+  MESSAGE: "newMessage",
+  /** Primary agent 퇴장 */
+  AGENT_LEFT: "agentLeft",
+  /** 상담 종료 */
+  CHAT_CLOSED: "chatClosed",
+  /** 에러 */
+  ERROR: "error",
+  /** 상대방의 입력 중 상태 수신 */
+  TYPING: "typing"
+}, b = {
+  /** 위젯 열기 */
+  OPEN: "helpdesk:open",
+  /** 위젯 닫기 */
+  CLOSE: "helpdesk:close",
+  /** 화면 전환: welcome → waiting → chat → closed */
+  VIEW_CHANGE: "helpdesk:viewChange",
+  /** 연결 상태 변경 */
+  CONNECTION_CHANGE: "helpdesk:connectionChange"
+};
+class P {
+  /**
+   * @param {Object} opts - 사용자 옵션 (HelpdeskConfig 참조)
+   */
+  constructor(e) {
+    this.config = ue(e), this._ws = null, this.connected = !1, this.sessionKey = null, this.viewState = "welcome", this.messages = [], this.queuePosition = 0, this.agentName = null, this.isAgentTyping = !1, this._typingTimer = null, this.agentStatus = { available: !1, count: 0 }, this.history = [], this._listeners = /* @__PURE__ */ new Map(), this._masterSecret = this.config.masterSecret || "", this._aspEnabled = this.config.aspEnabled;
+  }
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // EventEmitter
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  /**
+   * 이벤트 리스너 등록
+   *
+   * @param {string} event - 이벤트명
+   * @param {Function} handler - 핸들러 함수
+   * @returns {HelpdeskClient} 체이닝용
+   */
+  on(e, t) {
+    return this._listeners.has(e) || this._listeners.set(e, /* @__PURE__ */ new Set()), this._listeners.get(e).add(t), this;
+  }
+  /**
+   * 이벤트 리스너 제거
+   *
+   * @param {string} event - 이벤트명
+   * @param {Function} handler - 핸들러 함수
+   */
+  off(e, t) {
+    var o;
+    (o = this._listeners.get(e)) == null || o.delete(t);
+  }
+  /**
+   * 이벤트 발행
+   *
+   * @param {string} event - 이벤트명
+   * @param {*} data - 페이로드
+   * @private
+   */
+  _emit(e, t) {
+    var o;
+    (o = this._listeners.get(e)) == null || o.forEach((s) => {
+      try {
+        s(t);
+      } catch (i) {
+        console.error(`[Helpdesk] 이벤트 에러 (${e}):`, i);
+      }
+    });
+  }
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // WebSocket 연결 관리
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  /**
+   * WS 연결 (FuzionXSocket 기반)
+   *
+   * useWebSocket.js connect() 패턴 동일:
+   * 1. _aspReady 대기
+   * 2. FuzionXSocket 클래스 로드
+   * 3. new FuzionXSocket(url, masterSecret, aspEnabled)
+   * 4. 이벤트 바인딩 + connect()
+   *
+   * @returns {Promise<void>}
+   */
+  async connect() {
+    if (this._ws && this.connected)
+      return;
+    if (window._aspReady && await window._aspReady, !window.FuzionXSocket)
+      try {
+        const s = Date.now(), i = this.config.wasmUrl || "/wasm/fuzionx_client_wasm.js", m = i.replace(".js", "_bg.wasm"), w = await import(
+          /* @vite-ignore */
+          `${i}?v=${s}`
+        );
+        await w.default({ module_or_path: `${m}?v=${s}` }), window.FuzionXSocket = w.FuzionXSocket;
+      } catch (s) {
+        console.error("[Helpdesk] WASM 로드 실패:", s);
+        return;
+      }
+    const e = location.protocol === "https:" ? "wss:" : "ws:", o = `${this.config.wsUrl || `${e}//${location.host}/ws`}${this.config.wsNamespace}`;
+    this._ws = new window.FuzionXSocket(o, this._masterSecret, this._aspEnabled), this._ws.on("connect", () => {
+      this.connected = !0, this._emit(b.CONNECTION_CHANGE, { connected: !0 }), console.log("[Helpdesk] WS 연결됨");
+    }), this._ws.on("disconnect", (s) => {
+      this.connected = !1, this._emit(b.CONNECTION_CHANGE, { connected: !1 }), console.log("[Helpdesk] WS 연결 해제:", s);
+    }), this._ws.on("error", () => {
+      console.error("[Helpdesk] WS 에러");
+    }), this._ws.on("welcome", (s) => {
+      console.log("[Helpdesk] welcome:", s);
+    }), this._ws.on("message", (s) => {
+      this._handleMessage(s);
+    }), this._ws.connect();
+  }
+  /** WS 연결 해제 */
+  disconnect() {
+    this._ws && (this._ws.disconnect(), this._ws = null), this.connected = !1;
+  }
+  /**
+   * WS 메시지 전송 (FuzionXSocket.send 사용)
+   *
+   * @param {string} type - 이벤트 타입
+   * @param {Object} data - 페이로드
+   * @private
+   */
+  _send(e, t = {}) {
+    this._ws && this._ws.is_connected() ? this._ws.send(e, t) : console.warn("[Helpdesk] WS 연결 안됨, 메시지 전송 불가:", e);
+  }
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // WS 수신 메시지 처리
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  /**
+   * 서버 메시지 핸들러
+   *
+   * FuzionXSocket의 'message' 이벤트에서 호출됨.
+   * ASP 복호화는 FuzionXSocket 내부에서 자동 처리.
+   *
+   * @param {Object|string} raw - 서버 메시지 (자동 JSON 파싱 or 문자열)
+   * @private
+   */
+  _handleMessage(e) {
+    let t;
+    try {
+      t = typeof e == "string" ? JSON.parse(e) : e;
+    } catch (i) {
+      console.error("[Helpdesk] 메시지 파싱 오류:", i);
+      return;
+    }
+    const { type: o, data: s } = t;
+    switch (o) {
+      case p.AGENT_STATUS:
+        this.agentStatus = s, s.available ? this._setView("checking") : this._setView("unavailable"), this._emit(o, s);
+        break;
+      case p.CHAT_QUEUED:
+        this.sessionKey = s.sessionKey, this.queuePosition = s.position, this.sessionKey && localStorage.setItem("fx_support_session", this.sessionKey), s.messages && s.messages.length > 0 && (this.messages = s.messages.map((i) => ({
+          userId: i.user_id,
+          userName: i.nickname || i.username || (i.role_code ? "상담사" : "나"),
+          content: i.content,
+          messageType: i.message_type || "text",
+          createdAt: i.created_at,
+          isAgent: i.role_code === "admin" || i.role_code === "developer"
+        }))), this._setView("waiting"), this._emit(o, s);
+        break;
+      case p.AGENT_JOINED:
+        this.sessionKey = s.sessionKey || this.sessionKey, this.agentName = s.nickname || s.username || s.agentName || "상담사", this.queuePosition = 0, this.sessionKey && localStorage.setItem("fx_support_session", this.sessionKey), this._setView("chatting"), s.messages && s.messages.length > 0 ? (this.messages = s.messages.map((i) => ({
+          userId: i.user_id,
+          userName: i.nickname || i.username || (i.role_code ? this.agentName : "나"),
+          content: i.content,
+          messageType: i.message_type || "text",
+          createdAt: i.created_at,
+          isAgent: i.role_code === "admin" || i.role_code === "developer"
+        })), this._addSystemMessage("이전 대화 내역을 불러왔습니다.")) : this._addSystemMessage("상담원이 입장했습니다."), this._emit(o, s);
+        break;
+      case p.TYPING:
+        this.isAgentTyping = s.isTyping, this._typingTimer && clearTimeout(this._typingTimer), this.isAgentTyping && (this._typingTimer = setTimeout(() => {
+          this.isAgentTyping = !1;
+        }, 3e3)), this._emit(o, s);
+        break;
+      case p.MESSAGE:
+        this.messages.push({
+          userId: s.userId,
+          userName: s.userName,
+          content: s.content,
+          messageType: s.messageType || "text",
+          createdAt: s.createdAt,
+          isAgent: !0
+        }), this._emit(o, s);
+        break;
+      case p.AGENT_LEFT:
+        this._addSystemMessage("상담원 연결이 해제되었습니다. 잠시 후 다시 연결됩니다."), this._setView("waiting"), this._emit(o, s);
+        break;
+      case p.CHAT_CLOSED:
+        s && s.messages && s.messages.length > 0 && (this.messages = s.messages.map((i) => ({
+          userId: i.user_id,
+          userName: i.nickname || i.username || (i.role_code ? "상담사" : "나"),
+          content: i.content,
+          messageType: i.message_type || "text",
+          createdAt: i.created_at,
+          isAgent: i.role_code === "admin" || i.role_code === "developer"
+        }))), this._addSystemMessage("상담이 종료되었습니다."), this._setView("closed"), this._emit(o, s);
+        break;
+      case "resumeFailed":
+        localStorage.removeItem("fx_support_session"), this.sessionKey = null, this._setView("welcome"), this._emit(o, s);
+        break;
+      case p.ERROR:
+        console.error("[Helpdesk] 서버 에러:", s.message), this._emit(o, s);
+        break;
+      default:
+        this._emit(o, s);
+    }
+  }
+  /**
+   * 서버 이벤트 직접 핸들러
+   *
+   * FuzionXSocket이 type별로 직접 dispatch하는 경우 처리.
+   * 예: ws.on('agentStatus', data) → _handleServerEvent('agentStatus', data)
+   *
+   * @param {string} type - 이벤트 타입
+   * @param {Object} data - 페이로드
+   * @private
+   */
+  _handleServerEvent(e, t) {
+    this._handleMessage({ type: e, data: t });
+  }
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // 공개 API (회원 액션)
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  /**
+   * 저장소에 과거 연결된 세션 키가 있는지 검사
+   * @returns {boolean}
+   */
+  hasSavedSession() {
+    return !!localStorage.getItem("fx_support_session");
+  }
+  /**
+   * 이전 세션 정보로 다시 조인 시도
+   * 서버에서 성공 시 agentJoined나 chatQueued 반환
+   */
+  resumeSession() {
+    const e = localStorage.getItem("fx_support_session");
+    e && this._send(k.RESUME_SESSION, {
+      sessionKey: e,
+      userId: this.config._userId || null
+    });
+  }
+  /**
+   * 상담사 가용 여부 확인
+   *
+   * "상담 입장하기" 클릭 시 호출.
+   * 결과는 agentStatus 이벤트로 수신.
+   */
+  checkAgents() {
+    this._send(k.CHECK_AGENTS, {});
+  }
+  /**
+   * 상담 요청 (세션 생성)
+   *
+   * checkAgents → available=true 확인 후 호출.
+   *
+   * @param {Object} opts
+   * @param {number} [opts.userId] - 회원 ID
+   * @param {string} [opts.subject] - 상담 주제
+   */
+  requestChat({ userId: e = null, subject: t = null } = {}) {
+    this._requestChatLock || (this._requestChatLock = !0, this._send(k.REQUEST_CHAT, {
+      userId: e,
+      subject: t,
+      sessionKey: this.sessionKey || localStorage.getItem("fx_support_session")
+    }), setTimeout(() => {
+      this._requestChatLock = !1;
+    }, 1e3));
+  }
+  /**
+   * 메시지 전송
+   *
+   * @param {string} content    - 메시지 내용
+   * @param {Object} [userInfo] - 발신자 정보 { userId, username, nickname }
+   */
+  sendMessage(e, t = {}) {
+    if (!this.sessionKey || !e.trim()) return;
+    const o = e.trim();
+    this._send(k.MESSAGE, {
+      sessionKey: this.sessionKey,
+      content: o,
+      userId: t.userId || null,
+      username: t.username || null,
+      nickname: t.nickname || null,
+      roleCode: "member"
+    }), this.messages.push({
+      userId: t.userId,
+      userName: t.nickname || t.username || "나",
+      content: o,
+      messageType: "text",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      isAgent: !1,
+      _isLocal: !0
+    }), this._emit(b.VIEW_CHANGE, { view: this.viewState, messages: this.messages });
+  }
+  /**
+   * 타이핑 상태 전송
+   * @param {boolean} isTyping - 입력 중 상태
+   */
+  sendTyping(e) {
+    this.sessionKey && this._send(k.TYPING, {
+      sessionKey: this.sessionKey,
+      isTyping: e
+    });
+  }
+  /**
+   * 상담 종료 (회원 측)
+   */
+  closeChat() {
+    this.sessionKey && this._send(k.CLOSE_CHAT, { sessionKey: this.sessionKey });
+  }
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // 내부 헬퍼
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  /**
+   * 화면 상태 전환
+   *
+   * @param {ViewState} view
+   * @private
+   */
+  _setView(e) {
+    this.viewState = e, this._emit(b.VIEW_CHANGE, { view: e, messages: this.messages });
+  }
+  /**
+   * 시스템 메시지 추가
+   *
+   * @param {string} content
+   * @private
+   */
+  _addSystemMessage(e) {
+    this.messages.push({
+      content: e,
+      messageType: "system",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }
+  /**
+   * 상태 초기화 (새 상담 시작 전)
+   */
+  reset() {
+    this.sessionKey = null, this.viewState = "welcome", this.messages = [], this.queuePosition = 0, this.agentName = "", this.agentStatus = { available: !1, count: 0 };
+  }
+  /** 리소스 정리 */
+  destroy() {
+    this.disconnect(), this._listeners.clear(), this.reset();
+  }
+}
+const ge = ["title"], me = {
+  key: 0,
+  class: "hd-panel"
+}, pe = { class: "hd-panel-hd" }, fe = { class: "hd-panel-title" }, be = {
+  key: 0,
+  class: "hd-view hd-view-welcome"
+}, ve = { class: "hd-welcome-msg" }, _e = { class: "hd-welcome-hours" }, we = { key: 0 }, ye = {
+  key: 1,
+  class: "hd-view hd-view-checking"
+}, xe = {
+  key: 2,
+  class: "hd-view hd-view-unavail"
+}, ke = { class: "hd-unavail-sub" }, Ee = {
+  key: 3,
+  class: "hd-view hd-view-waiting"
+}, Se = {
+  key: 0,
+  class: "hd-wait-pos"
+}, Te = {
+  key: 4,
+  class: "hd-view hd-view-chat"
+}, Ce = {
+  key: 0,
+  class: "hd-chat-agent"
+}, Ne = {
+  key: 0,
+  class: "hd-msg-sys"
+}, Ae = { class: "hd-msg-bubble" }, Ie = { class: "hd-msg-time" }, He = {
+  key: 0,
+  class: "hd-msg hd-msg-agent"
+}, ze = {
+  key: 1,
+  class: "hd-chat-input"
+}, Me = {
+  key: 2,
+  class: "hd-chat-ended"
+}, $e = {
+  __name: "HelpdeskWidget",
+  props: {
+    user: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(n) {
+    const e = n, t = G("helpdeskClient"), o = G("helpdeskConfig"), s = C(!1), i = C("welcome"), m = C(""), w = C(null), L = Z(() => {
+      var l;
+      return o.theme !== "auto" ? o.theme : (l = window.matchMedia) != null && l.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    });
+    function z(l) {
+      i.value = l.view, l.view === "chatting" && A(() => N());
+    }
+    function M(l) {
+      l.connected && t.hasSavedSession() && (i.value = "checking", t.resumeSession());
+    }
+    K(() => e.user, (l) => {
+      l && l._id ? (o._userId = l._id, o._username = l.username, o._nickname = l.nickname || l.name) : (o._userId = null, o._username = null, o._nickname = null);
+    }, { immediate: !0 });
+    function N() {
+      w.value && (w.value.scrollTop = w.value.scrollHeight);
+    }
+    async function R() {
+      if (s.value = !0, !t.connected)
+        try {
+          await t.connect();
+        } catch (l) {
+          console.error(l);
+        }
+    }
+    function W() {
+      (i.value === "chatting" || i.value === "waiting") && t.disconnect(), s.value = !1;
+    }
+    function $() {
+      i.value = "checking", t.checkAgents();
+    }
+    function j() {
+      i.value = "welcome";
+    }
+    function O() {
+      m.value.trim() && (t.sendMessage(m.value, {
+        userId: o._userId,
+        username: o._username,
+        nickname: o._nickname
+      }), t.sendTyping(!1), T = !1, S && clearTimeout(S), m.value = "", A(() => N()));
+    }
+    let S = null, T = !1;
+    function F() {
+      T || (t.sendTyping(!0), T = !0), S && clearTimeout(S), S = setTimeout(() => {
+        t.sendTyping(!1), T = !1;
+      }, 2e3);
+    }
+    function J() {
+      t.reset(), i.value = "welcome";
+    }
+    function Q(l) {
+      return {
+        "hd-msg-mine": !l.isAgent && l.messageType !== "system",
+        "hd-msg-agent": l.isAgent,
+        "hd-msg-sys-wrap": l.messageType === "system"
+      };
+    }
+    function X(l) {
+      if (!l) return "";
+      const d = new Date(l);
+      return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+    }
+    return K(
+      () => t.messages.length,
+      () => A(() => N())
+    ), ee(() => {
+      t.on(b.VIEW_CHANGE, z), t.on(b.CONNECTION_CHANGE, M), t.on(p.AGENT_STATUS, (l) => {
+        l.available && t.requestChat({
+          userId: o._userId,
+          subject: null
+        });
+      }), o.autoConnect && t.connect().catch(() => {
+      });
+    }), te(() => {
+      t.off(b.VIEW_CHANGE, z), t.off(b.CONNECTION_CHANGE, M);
+    }), (l, d) => (c(), h("div", {
+      class: B(["hd-widget", `hd-pos-${g(o).position}`, `hd-theme-${L.value}`]),
+      style: se({ zIndex: g(o).zIndex })
+    }, [
+      s.value ? v("", !0) : (c(), h("button", {
+        key: 0,
+        class: "hd-fab",
+        onClick: R,
+        title: g(o).title
+      }, [...d[1] || (d[1] = [
+        a("svg", {
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2"
+        }, [
+          a("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+        ], -1)
+      ])], 8, ge)),
+      ne(ie, { name: "hd-slide" }, {
+        default: oe(() => [
+          s.value ? (c(), h("div", me, [
+            a("div", pe, [
+              a("span", fe, f(g(o).title), 1),
+              a("button", {
+                class: "hd-panel-close",
+                onClick: W
+              }, "×")
+            ]),
+            i.value === "welcome" ? (c(), h("div", be, [
+              d[3] || (d[3] = a("div", { class: "hd-welcome-icon" }, "💬", -1)),
+              a("p", ve, f(g(o).welcomeMessage), 1),
+              a("p", _e, [
+                d[2] || (d[2] = a("i", null, "🕐", -1)),
+                I(" " + f(g(o).operatingHours) + " ", 1),
+                g(o).offDayNotice ? (c(), h("span", we, " · " + f(g(o).offDayNotice), 1)) : v("", !0)
+              ]),
+              a("button", {
+                class: "hd-btn-enter",
+                onClick: $
+              }, "상담 입장하기")
+            ])) : i.value === "checking" ? (c(), h("div", ye, [...d[4] || (d[4] = [
+              a("div", { class: "hd-spinner" }, null, -1),
+              a("p", null, "상담사를 확인하고 있습니다...", -1)
+            ])])) : i.value === "unavailable" ? (c(), h("div", xe, [
+              d[5] || (d[5] = a("div", { class: "hd-unavail-icon" }, "😔", -1)),
+              d[6] || (d[6] = a("p", { class: "hd-unavail-msg" }, "현재 상담 가능한 상담사가 없습니다.", -1)),
+              a("p", ke, "운영시간: " + f(g(o).operatingHours), 1),
+              a("button", {
+                class: "hd-btn-retry",
+                onClick: $
+              }, "다시 확인"),
+              a("button", {
+                class: "hd-btn-back",
+                onClick: j
+              }, "돌아가기")
+            ])) : i.value === "waiting" ? (c(), h("div", Ee, [
+              d[8] || (d[8] = a("div", { class: "hd-spinner" }, null, -1)),
+              d[9] || (d[9] = a("p", { class: "hd-wait-msg" }, "상담사 연결 대기 중...", -1)),
+              g(t).queuePosition ? (c(), h("p", Se, [
+                d[7] || (d[7] = I("대기 순번: ", -1)),
+                a("strong", null, f(g(t).queuePosition), 1)
+              ])) : v("", !0)
+            ])) : i.value === "chatting" || i.value === "closed" ? (c(), h("div", Te, [
+              g(t).agentName ? (c(), h("div", Ce, [
+                d[10] || (d[10] = I(" 상담원: ", -1)),
+                a("strong", null, f(g(t).agentName), 1)
+              ])) : v("", !0),
+              a("div", {
+                class: "hd-chat-msgs",
+                ref_key: "msgBox",
+                ref: w
+              }, [
+                (c(!0), h(V, null, ae(g(t).messages, (y, Y) => (c(), h("div", {
+                  key: Y,
+                  class: B(["hd-msg", Q(y)])
+                }, [
+                  y.messageType === "system" ? (c(), h("div", Ne, f(y.content), 1)) : (c(), h(V, { key: 1 }, [
+                    a("div", Ae, f(y.content), 1),
+                    a("div", Ie, f(X(y.createdAt)), 1)
+                  ], 64))
+                ], 2))), 128)),
+                g(t).isAgentTyping ? (c(), h("div", He, [...d[11] || (d[11] = [
+                  a("div", { class: "hd-msg-bubble hd-typing-indicator" }, [
+                    a("span", null, "."),
+                    a("span", null, "."),
+                    a("span", null, ".")
+                  ], -1)
+                ])])) : v("", !0)
+              ], 512),
+              i.value === "chatting" ? (c(), h("div", ze, [
+                de(a("input", {
+                  type: "text",
+                  "onUpdate:modelValue": d[0] || (d[0] = (y) => m.value = y),
+                  onInput: F,
+                  onKeyup: re(O, ["enter"]),
+                  placeholder: "메시지를 입력하세요..."
+                }, null, 544), [
+                  [le, m.value]
+                ]),
+                a("button", {
+                  class: "hd-btn-send",
+                  onClick: O
+                }, [...d[12] || (d[12] = [
+                  a("svg", {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor"
+                  }, [
+                    a("path", { d: "M2 21l21-9L2 3v7l15 2-15 2z" })
+                  ], -1)
+                ])])
+              ])) : v("", !0),
+              i.value === "closed" ? (c(), h("div", Me, [
+                d[13] || (d[13] = a("p", null, "상담이 종료되었습니다.", -1)),
+                a("button", {
+                  class: "hd-btn-new",
+                  onClick: J
+                }, "새 상담 시작")
+              ])) : v("", !0)
+            ])) : v("", !0)
+          ])) : v("", !0)
+        ]),
+        _: 1
+      })
+    ], 6));
+  }
+}, We = {
+  /**
+   * Vue Plugin 설치
+   *
+   * @param {import('vue').App} app - Vue 앱 인스턴스
+   * @param {Object} options - 위젯 옵션 (HelpdeskConfig 참조)
+   */
+  install(n, e = {}) {
+    const t = new P(e), o = ce(t);
+    n.provide("helpdeskClient", o), n.provide("helpdeskConfig", o.config), n.component("HelpdeskWidget", $e), n.config.globalProperties.$helpdesk = o;
+  }
+};
+let r = null, u = null, E = !1, x = "welcome";
+function Oe(n) {
+  return r ? (console.warn("[HelpdeskEmbed] 이미 초기화됨"), r) : (r = new P(n), Le(r.config), Be(r.config), r.on(b.VIEW_CHANGE, (e) => {
+    x = e.view, _();
+  }), r.on(b.CONNECTION_CHANGE, () => {
+    _();
+  }), r.on(p.AGENT_STATUS, (e) => {
+    e.available && r.requestChat({
+      userId: r.config._userId,
+      subject: null
+    });
+  }), r.on(p.MESSAGE, () => {
+    _(), D();
+  }), r);
+}
+function Ge() {
+  r && (r.destroy(), r = null), u && (u.remove(), u = null);
+  const n = document.getElementById("hd-embed-styles");
+  n && n.remove();
+}
+function Ke() {
+  return r;
+}
+function Be(n) {
+  u = document.createElement("div"), u.id = "hd-embed-root", u.className = `hd-widget hd-pos-${n.position} hd-theme-${qe(n)}`, u.style.zIndex = n.zIndex;
+  const e = document.createElement("button");
+  e.className = "hd-fab", e.id = "hd-fab-btn", e.title = n.title, e.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>', e.onclick = () => Ve(), u.appendChild(e), document.body.appendChild(u);
+}
+async function Ve() {
+  if (E = !E, E) {
+    if (!r.connected)
+      try {
+        await r.connect();
+      } catch (e) {
+        console.error(e);
+      }
+    _();
+  } else
+    q();
+  const n = u.querySelector("#hd-fab-btn");
+  n && (n.style.display = E ? "none" : "flex");
+}
+function _() {
+  if (!E || !u) return;
+  let n = u.querySelector(".hd-panel");
+  n || (n = document.createElement("div"), n.className = "hd-panel", u.appendChild(n));
+  const e = r.config;
+  let t = `
+    <div class="hd-panel-hd">
+      <span class="hd-panel-title">${e.title}</span>
+      <button class="hd-panel-close" onclick="document.getElementById('hd-embed-root')._hdClose()">&times;</button>
+    </div>
+  `;
+  switch (x) {
+    case "welcome":
+      t += `
+        <div class="hd-view hd-view-welcome">
+          <div class="hd-welcome-icon">💬</div>
+          <p class="hd-welcome-msg">${e.welcomeMessage}</p>
+          <p class="hd-welcome-hours">🕐 ${e.operatingHours}${e.offDayNotice ? " · " + e.offDayNotice : ""}</p>
+          <button class="hd-btn-enter" id="hd-enter-btn">상담 입장하기</button>
+        </div>`;
+      break;
+    case "checking":
+      t += `
+        <div class="hd-view hd-view-checking">
+          <div class="hd-spinner"></div>
+          <p>상담사를 확인하고 있습니다...</p>
+        </div>`;
+      break;
+    case "unavailable":
+      t += `
+        <div class="hd-view hd-view-unavail">
+          <div class="hd-unavail-icon">😔</div>
+          <p class="hd-unavail-msg">현재 상담 가능한 상담사가 없습니다.</p>
+          <p class="hd-unavail-sub">운영시간: ${e.operatingHours}</p>
+          <button class="hd-btn-retry" id="hd-retry-btn">다시 확인</button>
+          <button class="hd-btn-back" id="hd-back-btn">돌아가기</button>
+        </div>`;
+      break;
+    case "waiting":
+      t += `
+        <div class="hd-view hd-view-waiting">
+          <div class="hd-spinner"></div>
+          <p class="hd-wait-msg">상담사 연결 대기 중...</p>
+          ${r.queuePosition ? `<p class="hd-wait-pos">대기 순번: <strong>${r.queuePosition}</strong></p>` : ""}
+        </div>`;
+      break;
+    case "chatting":
+    case "closed":
+      t += Ue();
+      break;
+  }
+  n.innerHTML = t, Pe();
+}
+function Ue() {
+  let n = "";
+  for (const t of r.messages)
+    if (t.messageType === "system")
+      n += `<div class="hd-msg hd-msg-sys-wrap"><div class="hd-msg-sys">${H(t.content)}</div></div>`;
+    else {
+      const o = t.isAgent ? "hd-msg-agent" : "hd-msg-mine";
+      n += `
+        <div class="hd-msg ${o}">
+          <div class="hd-msg-bubble">${H(t.content)}</div>
+          <div class="hd-msg-time">${De(t.createdAt)}</div>
+        </div>`;
+    }
+  let e = '<div class="hd-view hd-view-chat">';
+  return r.agentName && (e += `<div class="hd-chat-agent">상담원: <strong>${H(r.agentName)}</strong></div>`), e += `<div class="hd-chat-msgs" id="hd-msgs-box">${n}</div>`, x === "chatting" ? e += `
+      <div class="hd-chat-input">
+        <input type="text" id="hd-msg-input" placeholder="메시지를 입력하세요..." />
+        <button class="hd-btn-send" id="hd-send-btn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
+        </button>
+      </div>` : e += `
+      <div class="hd-chat-ended">
+        <p>상담이 종료되었습니다.</p>
+        <button class="hd-btn-new" id="hd-new-btn">새 상담 시작</button>
+      </div>`, e += "</div>", e;
+}
+function Pe() {
+  u._hdClose = () => {
+    E = !1, q();
+    const m = u.querySelector("#hd-fab-btn");
+    m && (m.style.display = "flex");
+  };
+  const n = document.getElementById("hd-enter-btn");
+  n && (n.onclick = () => {
+    x = "checking", _(), r.checkAgents();
+  });
+  const e = document.getElementById("hd-retry-btn");
+  e && (e.onclick = () => {
+    x = "checking", _(), r.checkAgents();
+  });
+  const t = document.getElementById("hd-back-btn");
+  t && (t.onclick = () => {
+    x = "welcome", _();
+  });
+  const o = document.getElementById("hd-send-btn"), s = document.getElementById("hd-msg-input");
+  o && s && (o.onclick = () => U(s), s.onkeyup = (m) => {
+    m.key === "Enter" && U(s);
+  }, s.focus());
+  const i = document.getElementById("hd-new-btn");
+  i && (i.onclick = () => {
+    r.reset(), x = "welcome", _();
+  }), D();
+}
+function U(n) {
+  const e = n.value.trim();
+  e && (r.sendMessage(e, {
+    userId: r.config._userId,
+    username: r.config._username,
+    nickname: r.config._nickname
+  }), n.value = "", _());
+}
+function q() {
+  const n = u == null ? void 0 : u.querySelector(".hd-panel");
+  n && n.remove();
+}
+function D() {
+  const n = document.getElementById("hd-msgs-box");
+  n && (n.scrollTop = n.scrollHeight);
+}
+function qe(n) {
+  var e;
+  return n.theme !== "auto" ? n.theme : (e = window.matchMedia) != null && e.call(window, "(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function H(n) {
+  return n ? n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;") : "";
+}
+function De(n) {
+  if (!n) return "";
+  const e = new Date(n);
+  return `${String(e.getHours()).padStart(2, "0")}:${String(e.getMinutes()).padStart(2, "0")}`;
+}
+function Le(n) {
+  if (document.getElementById("hd-embed-styles")) return;
+  const e = document.createElement("style");
+  e.id = "hd-embed-styles", e.textContent = `
+    /* ── 테마 변수 ── */
+    .hd-theme-dark{--hd-bg:#0c1219;--hd-bg2:#111b26;--hd-bg3:#162130;--hd-border:#1c2e42;--hd-txt:#b8d4e8;--hd-txt2:#8aaecd;--hd-txt3:#547a9c;--hd-acc:#00d9ff;--hd-acc-dim:rgba(0,217,255,.1);--hd-mine:#00d9ff;--hd-mine-fg:#000;--hd-agent-bg:#162130;--hd-agent-fg:#b8d4e8;--hd-shadow:rgba(0,0,0,.5)}
+    .hd-theme-light{--hd-bg:#fff;--hd-bg2:#f5f7fa;--hd-bg3:#eaeff5;--hd-border:#d4dbe5;--hd-txt:#0f1923;--hd-txt2:#2d4050;--hd-txt3:#5a6d7e;--hd-acc:#0072a8;--hd-acc-dim:rgba(0,114,168,.1);--hd-mine:#0072a8;--hd-mine-fg:#fff;--hd-agent-bg:#eaeff5;--hd-agent-fg:#0f1923;--hd-shadow:rgba(0,0,0,.15)}
+
+    .hd-widget{position:fixed;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',sans-serif;font-size:14px;line-height:1.5}
+    .hd-pos-bottom-right{bottom:24px;right:24px}
+    .hd-pos-bottom-left{bottom:24px;left:24px}
+    .hd-fab{width:56px;height:56px;border-radius:50%;background:var(--hd-acc);color:var(--hd-mine-fg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--hd-shadow);transition:transform .2s}
+    .hd-fab:hover{transform:scale(1.08)}
+    .hd-panel{width:360px;max-height:520px;background:var(--hd-bg);border:1px solid var(--hd-border);border-radius:12px;box-shadow:0 8px 32px var(--hd-shadow);display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0}
+    .hd-panel-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--hd-acc);color:var(--hd-mine-fg)}
+    .hd-panel-title{font-weight:700;font-size:.95rem}
+    .hd-panel-close{background:none;border:none;font-size:1.3rem;color:inherit;cursor:pointer;opacity:.7}
+    .hd-panel-close:hover{opacity:1}
+    .hd-view{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;text-align:center;color:var(--hd-txt);min-height:300px}
+    .hd-welcome-icon{font-size:2.5rem;margin-bottom:8px}
+    .hd-welcome-msg{font-size:.95rem;margin-bottom:6px}
+    .hd-welcome-hours{font-size:.78rem;color:var(--hd-txt3);margin-bottom:16px}
+    .hd-btn-enter{width:100%;padding:10px;background:var(--hd-acc);color:var(--hd-mine-fg);border:none;border-radius:8px;font-weight:700;font-size:.9rem;cursor:pointer}
+    .hd-btn-enter:hover{opacity:.85}
+    .hd-spinner{width:32px;height:32px;border:3px solid var(--hd-border);border-top-color:var(--hd-acc);border-radius:50%;animation:hd-spin .8s linear infinite;margin-bottom:12px}
+    @keyframes hd-spin{to{transform:rotate(360deg)}}
+    .hd-unavail-icon{font-size:2rem;margin-bottom:8px}
+    .hd-unavail-msg{font-size:.9rem;margin-bottom:4px}
+    .hd-unavail-sub{font-size:.78rem;color:var(--hd-txt3);margin-bottom:16px}
+    .hd-btn-retry,.hd-btn-back{width:100%;padding:8px;border-radius:6px;font-size:.82rem;font-weight:600;cursor:pointer;margin-bottom:6px}
+    .hd-btn-retry{background:var(--hd-acc);color:var(--hd-mine-fg);border:none}
+    .hd-btn-back{background:transparent;color:var(--hd-txt3);border:1px solid var(--hd-border)}
+    .hd-wait-msg{font-size:.9rem}
+    .hd-wait-pos{font-size:.82rem;color:var(--hd-txt2);margin-top:6px}
+    .hd-view-chat{padding:0;align-items:stretch;justify-content:flex-start}
+    .hd-chat-agent{padding:6px 14px;font-size:.75rem;color:var(--hd-txt3);background:var(--hd-bg2);border-bottom:1px solid var(--hd-border)}
+    .hd-chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;min-height:200px;max-height:320px}
+    .hd-msg{max-width:85%}.hd-msg-mine{align-self:flex-end;text-align:right}.hd-msg-agent{align-self:flex-start}.hd-msg-sys-wrap{align-self:center}
+    .hd-msg-sys{font-size:.7rem;color:var(--hd-txt3);background:var(--hd-bg3);padding:2px 10px;border-radius:999px}
+    .hd-msg-bubble{display:inline-block;padding:8px 12px;border-radius:12px;font-size:.85rem;line-height:1.4;word-break:break-word}
+    .hd-msg-mine .hd-msg-bubble{background:var(--hd-mine);color:var(--hd-mine-fg);border-bottom-right-radius:4px}
+    .hd-msg-agent .hd-msg-bubble{background:var(--hd-agent-bg);color:var(--hd-agent-fg);border-bottom-left-radius:4px}
+    .hd-msg-time{font-size:.6rem;color:var(--hd-txt3);margin-top:2px;opacity:.6}
+    .hd-chat-input{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--hd-border);background:var(--hd-bg2)}
+    .hd-chat-input input{flex:1;padding:7px 10px;border:1px solid var(--hd-border);border-radius:6px;font-size:.82rem;background:var(--hd-bg);color:var(--hd-txt);outline:none}
+    .hd-chat-input input:focus{border-color:var(--hd-acc)}
+    .hd-chat-input input::placeholder{color:var(--hd-txt3)}
+    .hd-btn-send{padding:7px 10px;background:var(--hd-acc);color:var(--hd-mine-fg);border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center}
+    .hd-chat-ended{padding:12px;text-align:center;border-top:1px solid var(--hd-border);background:var(--hd-bg2)}
+    .hd-chat-ended p{font-size:.82rem;color:var(--hd-txt3);margin:0 0 8px}
+    .hd-btn-new{padding:6px 16px;background:var(--hd-acc-dim);color:var(--hd-acc);border:1px solid var(--hd-acc);border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer}
+    .hd-btn-new:hover{background:var(--hd-acc);color:var(--hd-mine-fg)}
+  `, document.head.appendChild(e);
+}
+const je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  destroy: Ge,
+  getClient: Ke,
+  init: Oe
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  k as CLIENT_EVENTS,
+  he as DEFAULTS,
+  P as HelpdeskClient,
+  je as HelpdeskEmbed,
+  We as HelpdeskPlugin,
+  $e as HelpdeskWidget,
+  p as SERVER_EVENTS,
+  b as UI_EVENTS,
+  ue as resolveConfig
+};
+//# sourceMappingURL=helpdesk.es.js.map