@things-factory/board-ai 10.0.0-beta.64

package/dist-client/components/board-ai-chat.js

@@ -0,0 +1,1455 @@
+var OxBoardAIChat_1;
+import { __decorate, __metadata } from "tslib";
+/**
+ * <ox-board-ai-chat> — AI 주도 보드 모델링 채팅 컴포넌트 (Lit).
+ *
+ * 입력:
+ *   - sessionId: 영속 ChatSession 식별자 (없으면 ad-hoc 모드, 메시지 영속 안 됨)
+ *   - currentBoard: 현재 BoardModel JSON (호스트가 동기화)
+ *   - scopes / knownTypes / categories: 도메인 컨텍스트
+ *
+ * 출력 (이벤트):
+ *   - `board-edit-patch` { detail: { patch, summary, confidence, patchId } }
+ *     호스트가 받아서 보드 모델에 적용 (applyBoardEditPatch helper).
+ *   - `chat-followup` { detail: { question } }
+ *
+ * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
+ */
+import '@material/web/icon/icon.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { client } from '@operato/graphql';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import gql from 'graphql-tag';
+import { renderMarkdown } from './markdown.js';
+import { buildChatMutationInput } from './chat-input-builder.js';
+const BOARD_AI_CHAT_MUTATION = gql `
+  mutation BoardAIChat($input: BoardAIChatInput!) {
+    boardAIChat(input: $input) {
+      reply
+      patch
+      followUp
+      clientId
+      sessionId
+      userMessageId
+      assistantMessageId
+      patchId
+      toolUsages
+    }
+  }
+`;
+const CHAT_MESSAGES_QUERY = gql `
+  query ChatMessages($sessionId: String!, $limit: Int, $offset: Int) {
+    chatMessages(sessionId: $sessionId, limit: $limit, offset: $offset) {
+      id
+      role
+      content
+      relatedPatchId
+      toolUsagesJson
+      createdAt
+    }
+  }
+`;
+let OxBoardAIChat = class OxBoardAIChat extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 모델러에서 현재 선택된 컴포넌트의 `refid` 목록.
+         *
+         * refid 는 things-scene 이 모든 컴포넌트에 자동 발급하는 universal numeric handle.
+         * 호스트가 매 render 마다 `.selectedRefids=${...}` 로 갱신. AI 한테 selection 정보로
+         * 그대로 전달되어 "선택한" / "selected" / "this" 류 지시어 해석에 사용.
+         */
+        this.selectedRefids = [];
+        this.placeholder = '자연어로 명령하세요 (Shift+Enter 줄바꿈, Enter 전송)';
+        this.lines = [];
+        this.input = '';
+        /** 되돌려진 patch id 들 — 한 번 revert 한 patch 는 버튼 비활성 */
+        this.revertedPatchIds = new Set();
+        /** mini action — 인라인 예시 토글 */
+        this.examplesOpen = false;
+        this.busy = false;
+    }
+    static { OxBoardAIChat_1 = this; }
+    static { this.styles = [
+        // 어플리케이션 표준 스크롤바 (--scrollbar-width / --scrollbar-thumb-color 등 호스트 변수 따름)
+        ScrollbarStyles,
+        css `
+    /*
+      Material Design 3 토큰 사용 — 사용자 테마 (라이트/다크/브랜드) 자동 반영.
+      각 var() 의 두 번째 인자는 토큰 미정의 시 fallback (현 디자인 톤).
+    */
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 240px;
+      position: relative;
+      font:
+        400 11px / 1.55 -apple-system,
+        BlinkMacSystemFont,
+        'Inter',
+        'Pretendard',
+        'Segoe UI',
+        Roboto,
+        sans-serif;
+      letter-spacing: -0.005em;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    /* ── Messages ─────────────────────────────────────── */
+    /* 스크롤바는 ScrollbarStyles (위쪽 styles 배열) 가 처리 — 어플리케이션 표준 따름 */
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      scroll-behavior: smooth;
+    }
+
+    /* ── Empty state — onboarding 가이드 ───────────────── */
+    .empty {
+      margin: auto;
+      text-align: left;
+      padding: 24px 16px;
+      width: 100%;
+      max-width: 360px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .empty .header {
+      text-align: center;
+      padding: 8px 0 4px;
+    }
+    .empty .icon {
+      font-size: 22px;
+      opacity: 0.4;
+      margin-bottom: 8px;
+      color: var(--md-sys-color-primary, currentColor);
+      display: block;
+    }
+    .empty .title {
+      color: var(--md-sys-color-on-surface, #0f172a);
+      font-size: 12.5px;
+      font-weight: 600;
+      margin-bottom: 4px;
+      letter-spacing: -0.01em;
+    }
+    .empty .subtitle {
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-size: 10.5px;
+      line-height: 1.5;
+    }
+
+    .empty .group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .empty .group-label {
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      font-weight: 600;
+      padding: 0 2px;
+    }
+    .empty .example {
+      all: unset;
+      display: block;
+      cursor: pointer;
+      padding: 7px 10px;
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 8px;
+      line-height: 1.5;
+      transition:
+        background 0.15s,
+        border-color 0.15s,
+        transform 0.1s;
+    }
+    .empty .example:hover {
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+    }
+    .empty .example:active {
+      transform: scale(0.99);
+    }
+    .empty .example .arrow {
+      float: right;
+      opacity: 0.4;
+      margin-left: 8px;
+      font-size: 11px;
+    }
+
+    .empty .footer {
+      margin-top: 4px;
+      padding: 8px 4px 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+      line-height: 1.6;
+      text-align: center;
+    }
+    .empty .footer .badge {
+      display: inline-block;
+      margin: 0 4px;
+      padding: 1px 7px;
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border-radius: 8px;
+      font-size: 9.5px;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+    }
+
+    /* ── Message label (sender hint) ──────────────────── */
+    .msg-label {
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.05em;
+      font-weight: 500;
+      text-transform: uppercase;
+      margin: 10px 0 3px 4px;
+      align-self: flex-start;
+    }
+    .msg-label:first-child {
+      margin-top: 0;
+    }
+
+    /* ── Message wrapper (메시지 + hover 액션) ────────── */
+    .msg-wrap {
+      display: flex;
+      flex-direction: column;
+      width: fit-content;
+      max-width: min(78%, 480px);
+      margin: 2px 0;
+    }
+    .msg-wrap.user {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+    .msg-wrap.assistant {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+    .msg-wrap.system {
+      align-self: center;
+      align-items: center;
+      max-width: 100%;
+    }
+
+    /* ── Message bubble ───────────────────────────────── */
+    .msg {
+      display: inline-block;
+      width: fit-content;
+      max-width: 100%;
+      padding: 6px 10px;
+      border-radius: 12px;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      font-size: 11px;
+      line-height: 1.55;
+    }
+
+    .msg.user {
+      align-self: flex-end;
+      background: var(--md-sys-color-primary, #1e293b);
+      color: var(--md-sys-color-on-primary, #f8fafc);
+      border-radius: 12px 12px 3px 12px;
+      margin-top: 6px;
+    }
+
+    .msg.assistant {
+      align-self: flex-start;
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      color: var(--md-sys-color-on-surface, #0f172a);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 12px 12px 12px 3px;
+    }
+
+    /* ── Markdown 렌더 (AI 응답) ──────────────────────── */
+    .md-body {
+      display: block;
+    }
+    .md-body > :first-child {
+      margin-top: 0;
+    }
+    .md-body > :last-child {
+      margin-bottom: 0;
+    }
+    .md-body p {
+      margin: 0 0 6px;
+      line-height: 1.55;
+    }
+    .md-body ul,
+    .md-body ol {
+      margin: 4px 0 6px;
+      padding-left: 18px;
+    }
+    .md-body li {
+      margin: 1px 0;
+      line-height: 1.5;
+    }
+    .md-body li > p {
+      margin: 0;
+    }
+    .md-body strong {
+      font-weight: 600;
+    }
+    .md-body em {
+      font-style: italic;
+    }
+    .md-body code {
+      font-family:
+        'SF Mono',
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 10px;
+      padding: 1px 4px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.06));
+      border-radius: 3px;
+    }
+    .md-body pre {
+      margin: 5px 0;
+      padding: 6px 8px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.06));
+      border-radius: 5px;
+      overflow-x: auto;
+      font-size: 10px;
+      line-height: 1.5;
+    }
+    /* user 메시지(어두운 배경) 위에서는 code/pre 의 contrast 보정 */
+    .msg.user .md-body code,
+    .msg.user .md-body pre {
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .msg.user .md-body a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .msg.user .md-body blockquote {
+      border-left-color: rgba(255, 255, 255, 0.3);
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .msg.user .md-body hr {
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
+    .md-body pre code {
+      padding: 0;
+      background: transparent;
+      font-size: inherit;
+    }
+    .md-body a {
+      color: var(--md-sys-color-primary, #1e293b);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .md-body a:hover {
+      text-decoration: none;
+    }
+    .md-body h1,
+    .md-body h2,
+    .md-body h3,
+    .md-body h4 {
+      margin: 6px 0 3px;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+    .md-body h1 { font-size: 13px; }
+    .md-body h2 { font-size: 12px; }
+    .md-body h3,
+    .md-body h4 { font-size: 11.5px; }
+    .md-body blockquote {
+      margin: 4px 0;
+      padding: 1px 8px;
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+    }
+    .md-body hr {
+      border: 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      margin: 6px 0;
+    }
+    .md-body table {
+      border-collapse: collapse;
+      margin: 4px 0;
+      font-size: 10px;
+    }
+    .md-body th,
+    .md-body td {
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      padding: 2px 6px;
+    }
+    .md-body th {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      font-weight: 600;
+    }
+
+    .msg.system {
+      align-self: center;
+      background: transparent;
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+      font-style: italic;
+      max-width: 100%;
+      padding: 3px 8px;
+      margin: 3px 0;
+      border: 0;
+    }
+
+    .msg.pending {
+      opacity: 0.5;
+    }
+    .msg.pending::after {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-left: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.4;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.2; transform: scale(0.85); }
+      50% { opacity: 0.7; transform: scale(1.1); }
+    }
+
+    /* ── Patch indicator + 인라인 되돌리기 ─────────────── */
+    .summary {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 6px;
+      padding: 3px 4px 3px 8px;
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+      border-radius: 6px;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      line-height: 1;
+    }
+    .summary md-icon {
+      --md-icon-size: 13px;
+      color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .summary.reverted {
+      opacity: 0.6;
+    }
+    .summary.reverted md-icon {
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+    .summary .summary-text {
+      letter-spacing: 0.01em;
+    }
+    .summary .revert-btn {
+      height: 20px;
+      padding: 0 8px;
+      background: transparent;
+      border: 0;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      letter-spacing: inherit;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      line-height: 1;
+      transition: background 0.12s, color 0.12s;
+      width: auto;
+    }
+    .summary .revert-btn:hover:not(:disabled) {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .summary.reverted .revert-btn,
+    .summary .revert-btn:disabled {
+      display: none;
+    }
+
+    /* ── Follow-up question ───────────────────────────── */
+    .followup {
+      font-size: 10.5px;
+      color: var(--md-sys-color-on-secondary-container, #92400e);
+      background: var(--md-sys-color-secondary-container, #fffbeb);
+      border-left: 2px solid var(--md-sys-color-secondary, #f59e0b);
+      padding: 5px 8px;
+      border-radius: 0 5px 5px 0;
+      margin-top: 6px;
+      line-height: 1.5;
+    }
+
+    /* ── Tool usages fold-able 박스 — AI 도구 호출 trace ───── */
+    .tool-usages {
+      margin-top: 6px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      overflow: hidden;
+      font-size: 10.5px;
+    }
+    .tool-usages-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 5px 8px;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-family: inherit;
+      font-size: inherit;
+      letter-spacing: inherit;
+      text-align: left;
+    }
+    .tool-usages-header:hover {
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+    }
+    .tool-usages-icon,
+    .tool-usages-chevron {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .tool-usages-summary {
+      flex: 1;
+      font-weight: 500;
+    }
+    .tool-usages-counts {
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-weight: 400;
+      font-size: 10px;
+    }
+    .tool-usages-list {
+      list-style: none;
+      margin: 0;
+      padding: 0 8px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .tool-usage-item {
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      padding: 4px 8px 4px 8px;
+      background: var(--md-sys-color-surface, #ffffff);
+      border-radius: 0 4px 4px 0;
+    }
+    .tool-usage-item.kind-read {
+      border-left-color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .tool-usage-item.kind-write {
+      border-left-color: var(--md-sys-color-primary, #1e293b);
+    }
+    .tool-usage-item.kind-unknown {
+      border-left-color: var(--md-sys-color-error, #b91c1c);
+    }
+    .tool-usage-head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 3px;
+    }
+    .tool-usage-step {
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+    }
+    .tool-usage-name {
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+      font-size: 10.5px;
+    }
+    .tool-usage-kind {
+      font-size: 9.5px;
+      padding: 1px 5px;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+    }
+    .tool-usage-kind.kind-read {
+      color: var(--md-sys-color-on-tertiary, #ffffff);
+      background: var(--md-sys-color-tertiary, #10b981);
+    }
+    .tool-usage-kind.kind-write {
+      color: var(--md-sys-color-on-primary, #ffffff);
+      background: var(--md-sys-color-primary, #1e293b);
+    }
+    .tool-usage-kind.kind-unknown {
+      color: var(--md-sys-color-on-error, #ffffff);
+      background: var(--md-sys-color-error, #b91c1c);
+    }
+    .tool-usage-args,
+    .tool-usage-result {
+      margin: 2px 0 0;
+      padding: 4px 6px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.04));
+      border-radius: 3px;
+      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+      font-size: 10px;
+      line-height: 1.4;
+      white-space: pre-wrap;
+      overflow-x: auto;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      max-height: 180px;
+      overflow-y: auto;
+    }
+    .tool-usage-args {
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+    }
+    .tool-usage-result {
+      border-left: 2px solid var(--md-sys-color-outline, #94a3b8);
+    }
+
+    /* ── Hover actions (assistant 메시지만, Material icon button) ── */
+    .msg-actions {
+      display: flex;
+      gap: 2px;
+      margin-top: 2px;
+      padding: 0;
+      opacity: 0;
+      transition: opacity 0.15s;
+      pointer-events: none;
+    }
+    .msg-wrap:hover .msg-actions,
+    .msg-wrap:focus-within .msg-actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .msg-actions .msg-action {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: 5px;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-outline, #94a3b8);
+      transition:
+        background 0.12s,
+        color 0.12s;
+    }
+    .msg-actions .msg-action:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .msg-actions .msg-action:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    .msg-actions .msg-action.confirmed {
+      color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .msg-actions .msg-action md-icon {
+      --md-icon-size: 14px;
+    }
+
+    /* ── Error banner ─────────────────────────────────── */
+    .error {
+      color: var(--md-sys-color-on-error-container, #b91c1c);
+      padding: 7px 11px;
+      background: var(--md-sys-color-error-container, #fef2f2);
+      border: 1px solid var(--md-sys-color-error, #fee2e2);
+      border-radius: 8px;
+      margin: 0 16px 8px;
+      font-size: 10.5px;
+      line-height: 1.5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .error .error-text {
+      flex: 1;
+    }
+    .error .retry-btn {
+      flex-shrink: 0;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-family: inherit;
+      letter-spacing: inherit;
+      background: var(--md-sys-color-error, #b91c1c);
+      color: var(--md-sys-color-on-error, #ffffff);
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: opacity 0.15s;
+      width: auto;
+      height: auto;
+    }
+    .error .retry-btn:hover {
+      opacity: 0.88;
+    }
+
+    /* ── Composer (actions + input 통합 영역) ──────────── */
+    .composer {
+      border-top: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);
+      background: var(--md-sys-color-surface, #ffffff);
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Mini action row (메시지 시작 후) ──────────────── */
+    .actions-row {
+      display: flex;
+      gap: 6px;
+      padding: 10px 16px 6px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    /* Material 3 assist-chip 톤 — height 24, font label-small */
+    .action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      height: 24px;
+      padding: 0 10px;
+      font-size: 11px;
+      font-family: inherit;
+      letter-spacing: inherit;
+      line-height: 1;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      background: transparent;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      cursor: pointer;
+      transition:
+        background 0.15s,
+        border-color 0.15s,
+        color 0.15s;
+      width: auto;
+      vertical-align: middle;
+    }
+    .action:hover {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .action:active {
+      transform: scale(0.97);
+    }
+    .action md-icon {
+      --md-icon-size: 14px;
+      opacity: 0.7;
+    }
+
+    /* ── Inline examples (action row 의 "예시" 토글 시) ──── */
+    .inline-examples {
+      padding: 4px 16px 0;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .inline-examples .ex-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .inline-examples .ex-row .ex-label {
+      font-size: 9px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      margin-right: 2px;
+      align-self: center;
+      font-weight: 600;
+    }
+    .inline-examples .ex {
+      all: unset;
+      cursor: pointer;
+      padding: 2px 8px;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 10px;
+      transition: background 0.15s;
+    }
+    .inline-examples .ex:hover {
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+    }
+
+    /* ── Input area ───────────────────────────────────── */
+    /* border-top 은 .composer 가 담당 (actions-row 가 같은 wrapper 안) */
+    .input-row {
+      display: flex;
+      gap: 10px;
+      padding: 6px 16px 14px;
+      background: transparent;
+      align-items: flex-end;
+    }
+    /* 메시지 시작 전 — actions-row 가 없을 때는 input-row 가 직접 border-top */
+    .composer.no-actions .input-row {
+      padding-top: 14px;
+    }
+
+    textarea {
+      flex: 1;
+      padding: 8px 12px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 12px;
+      font: inherit;
+      letter-spacing: inherit;
+      resize: none;
+      min-height: 36px;
+      max-height: 140px;
+      outline: none;
+      transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    textarea::placeholder {
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+    textarea:focus {
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+      box-shadow: 0 0 0 3px var(--md-sys-color-primary-container, rgba(15, 23, 42, 0.08));
+    }
+    textarea:disabled {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: not-allowed;
+    }
+
+    /* ── Send button — ChatGPT 스타일 원형 ↑ (.input-row 안의 button 만) ─── */
+    .input-row > button {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      background: var(--md-sys-color-primary, #1e293b);
+      color: var(--md-sys-color-on-primary, #ffffff);
+      border: 0;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        background 0.15s,
+        transform 0.1s,
+        opacity 0.15s;
+      flex-shrink: 0;
+      align-self: flex-end;
+      margin-bottom: 2px;
+    }
+    .input-row > button:disabled {
+      background: var(--md-sys-color-surface-container-highest, #e2e8f0);
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: not-allowed;
+    }
+    .input-row > button:hover:not(:disabled) {
+      opacity: 0.88;
+    }
+    .input-row > button:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+    .input-row > button md-icon {
+      --md-icon-size: 18px;
+    }
+    .input-row > button .spinner {
+      width: 12px;
+      height: 12px;
+      border: 1.8px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.sessionId) {
+            this.loadHistory();
+        }
+    }
+    updated(changed) {
+        if (changed.has('sessionId') && this.sessionId && !changed.get('sessionId')) {
+            this.loadHistory();
+        }
+        // 자동 스크롤
+        const ms = this.renderRoot.querySelector('.messages');
+        if (ms)
+            ms.scrollTop = ms.scrollHeight;
+    }
+    async loadHistory() {
+        if (!this.sessionId)
+            return;
+        try {
+            const result = await client.query({
+                query: CHAT_MESSAGES_QUERY,
+                variables: { sessionId: this.sessionId, limit: 200, offset: 0 },
+                fetchPolicy: 'network-only'
+            });
+            const msgs = result.data?.chatMessages ?? [];
+            this.lines = msgs.map((m) => ({
+                role: m.role,
+                content: m.content,
+                patchId: m.relatedPatchId ?? undefined,
+                toolUsages: Array.isArray(m.toolUsagesJson) ? m.toolUsagesJson : undefined
+            }));
+        }
+        catch (e) {
+            this.errorMessage = `${i18next.t('board-ai.text.failed-to-load-history')}: ${e.message ?? e}`;
+        }
+    }
+    render() {
+        const hasMessages = this.lines.length > 0;
+        return html `
+      ${this.toastMessage
+            ? html `<div class="toast show">${this.toastMessage}</div>`
+            : nothing}
+      <div class="messages">
+        ${!hasMessages ? this.renderEmpty() : nothing}
+        ${this.lines.map((line, idx) => {
+            const prev = this.lines[idx - 1];
+            const showLabel = line.role === 'assistant' && (!prev || prev.role !== 'assistant');
+            const content = (line.content ?? '').trim();
+            const isMarkdown = line.role !== 'system' && content.length > 0;
+            const showActions = line.role !== 'system' && !line.pending && content.length > 0;
+            return html `
+            ${showLabel
+                ? html `<div class="msg-label">${i18next.t('board-ai.label.ai')}</div>`
+                : nothing}
+            <div class="msg-wrap ${line.role}">
+              <div class="msg ${line.role} ${line.pending ? 'pending' : ''}">
+                ${isMarkdown
+                ? html `<div class="md-body">${unsafeHTML(renderMarkdown(content))}</div>`
+                : content}
+                ${line.patchId
+                ? html `
+                      <div class="summary ${this.revertedPatchIds.has(line.patchId) ? 'reverted' : ''}">
+                        <md-icon>check_circle</md-icon>
+                        <span class="summary-text">
+                          ${this.revertedPatchIds.has(line.patchId)
+                    ? i18next.t('board-ai.text.reverted')
+                    : i18next.t('board-ai.text.applied-changes')}
+                        </span>
+                        <button
+                          class="revert-btn"
+                          ?disabled=${this.revertedPatchIds.has(line.patchId)}
+                          @click=${() => line.patchId && this.onRevertClick(line.patchId)}>
+                          ${i18next.t('board-ai.button.revert')}
+                        </button>
+                      </div>
+                    `
+                : nothing}
+                ${line.followUp
+                ? html `<div class="followup">${unsafeHTML(renderMarkdown(line.followUp.trim()))}</div>`
+                : nothing}
+                ${line.toolUsages && line.toolUsages.length > 0
+                ? this.renderToolUsages(idx, line)
+                : nothing}
+              </div>
+              ${showActions ? this.renderMessageActions(idx, line, content) : nothing}
+            </div>
+          `;
+        })}
+      </div>
+      ${this.errorMessage
+            ? html `
+            <div class="error">
+              <span class="error-text">${this.errorMessage}</span>
+              ${this.lastFailedInput
+                ? html `
+                    <button class="retry-btn" @click=${this.retryLastSend}>
+                      ${i18next.t('board-ai.button.retry')}
+                    </button>
+                  `
+                : nothing}
+            </div>
+          `
+            : nothing}
+      <div class="composer ${hasMessages ? '' : 'no-actions'}">
+        ${hasMessages
+            ? html `
+              <div class="actions-row">
+                <button
+                  class="action"
+                  @click=${this.clearChat}
+                  title=${i18next.t('board-ai.text.clear-chat-tooltip')}>
+                  <md-icon>refresh</md-icon>
+                  ${i18next.t('board-ai.button.new-conversation')}
+                </button>
+                <button
+                  class="action"
+                  @click=${() => (this.examplesOpen = !this.examplesOpen)}
+                  title=${i18next.t('board-ai.text.show-examples-tooltip')}>
+                  <md-icon>${this.examplesOpen ? 'close' : 'lightbulb'}</md-icon>
+                  ${this.examplesOpen
+                ? i18next.t('board-ai.button.close')
+                : i18next.t('board-ai.button.examples')}
+                </button>
+              </div>
+              ${this.examplesOpen ? this.renderInlineExamples() : nothing}
+            `
+            : nothing}
+        <div class="input-row">
+          <textarea
+            .value=${this.input}
+            @input=${(e) => (this.input = e.target.value)}
+            @keydown=${this.onKeyDown}
+            ?disabled=${this.busy}
+            rows="1"
+            placeholder=${this.placeholder ?? i18next.t('board-ai.text.input-placeholder')}></textarea>
+          <button
+            ?disabled=${this.busy || !this.input.trim()}
+            @click=${this.send}
+            title=${i18next.t('board-ai.text.send-tooltip')}>
+            ${this.busy
+            ? html `<span class="spinner"></span>`
+            : html `<md-icon>arrow_upward</md-icon>`}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    onKeyDown(e) {
+        if (e.key === 'Enter' && !e.shiftKey && !this.busy) {
+            e.preventDefault();
+            this.send();
+        }
+    }
+    // ── Empty state with onboarding guide ──────────────────────────
+    /** 예시 그룹 — i18n 키. localize mixin 이 언어 변경 시 자동 재렌더. */
+    static { this.EXAMPLE_GROUPS = [
+        {
+            labelKey: 'board-ai.label.create',
+            itemKeys: [
+                'board-ai.example.create-monitoring-dashboard',
+                'board-ai.example.create-welcome-screen'
+            ]
+        },
+        {
+            labelKey: 'board-ai.label.edit',
+            itemKeys: [
+                'board-ai.example.edit-align-distribute',
+                'board-ai.example.edit-resize-board'
+            ]
+        },
+        {
+            labelKey: 'board-ai.label.style',
+            itemKeys: [
+                'board-ai.example.style-dark-mode',
+                'board-ai.example.style-rounded-shadow'
+            ]
+        }
+    ]; }
+    renderEmpty() {
+        return html `
+      <div class="empty">
+        <div class="header">
+          <md-icon class="icon">auto_awesome</md-icon>
+          <div class="title">${i18next.t('board-ai.text.empty-title')}</div>
+          <div class="subtitle">${i18next.t('board-ai.text.empty-subtitle')}</div>
+        </div>
+
+        ${OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => html `
+            <div class="group">
+              <div class="group-label">${i18next.t(group.labelKey)}</div>
+              ${group.itemKeys.map(key => {
+            const text = i18next.t(key);
+            return html `
+                  <button class="example" @click=${() => this.useExample(text)}>
+                    ${text}<span class="arrow">→</span>
+                  </button>
+                `;
+        })}
+            </div>
+          `)}
+
+        <div class="footer">
+          <span class="badge">${i18next.t('board-ai.label.korean-supported')}</span>
+          <span class="badge">${i18next.t('board-ai.label.multi-command')}</span>
+          <span class="badge">${i18next.t('board-ai.label.review-able')}</span>
+          <br />
+          ${i18next.t('board-ai.text.empty-footer-notice')}
+        </div>
+      </div>
+    `;
+    }
+    /** 예시 클릭 — 입력창에 채우고 포커스 (사용자가 수정 후 전송 가능) */
+    useExample(text) {
+        this.input = text;
+        this.examplesOpen = false;
+        requestAnimationFrame(() => {
+            const ta = this.renderRoot.querySelector('textarea');
+            ta?.focus();
+            ta?.setSelectionRange(text.length, text.length);
+        });
+    }
+    // ── Mini actions ───────────────────────────────────────────────
+    /** "새 대화" — UI 의 메시지 라인 비움 (서버 ChatSession 이력은 그대로 보존) */
+    clearChat() {
+        this.lines = [];
+        this.input = '';
+        this.errorMessage = undefined;
+        this.lastFailedInput = undefined;
+        this.examplesOpen = false;
+        this.revertedPatchIds = new Set();
+    }
+    renderInlineExamples() {
+        return html `
+      <div class="inline-examples">
+        ${OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => html `
+            <div class="ex-row">
+              <span class="ex-label">${i18next.t(group.labelKey)}</span>
+              ${group.itemKeys.map(key => {
+            const t = i18next.t(key);
+            return html `<button class="ex" @click=${() => this.useExample(t)}>${t}</button>`;
+        })}
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    // ── Retry (에러 발생 시) ───────────────────────────────────────
+    async retryLastSend() {
+        if (!this.lastFailedInput)
+            return;
+        this.input = this.lastFailedInput;
+        this.errorMessage = undefined;
+        this.lastFailedInput = undefined;
+        await this.send();
+    }
+    // ── Per-message hover action row ───────────────────────────────
+    /**
+     * 메시지별 hover 액션 — 텍스트 chip 으로 명확.
+     *   user      : 액션 row 자체 X (자기 메시지에 시각 노이즈 X — 편집은 input 위 "새 대화" 흐름 또는 마우스 더블클릭)
+     *   assistant : 복사 + 재생성 + (patch 적용된 경우만) 되돌리기
+     *   system    : 없음
+     */
+    renderMessageActions(idx, line, content) {
+        if (line.role !== 'assistant')
+            return nothing;
+        const isCopied = this.copiedIdx === idx;
+        // revert 는 인라인 patch chip (메시지 안) 한 곳에만 — hover 액션에서 제외 (중복 방지).
+        return html `
+      <div class="msg-actions">
+        <button
+          class="msg-action ${isCopied ? 'confirmed' : ''}"
+          title=${isCopied
+            ? i18next.t('board-ai.text.copied')
+            : i18next.t('board-ai.button.copy')}
+          @click=${() => this.copyMessage(idx, content)}>
+          <md-icon>${isCopied ? 'check' : 'content_copy'}</md-icon>
+        </button>
+        <button
+          class="msg-action"
+          ?disabled=${this.busy}
+          title=${i18next.t('board-ai.button.regenerate')}
+          @click=${() => this.regenerateAssistant(idx)}>
+          <md-icon>refresh</md-icon>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * "AI 가 이런 도구를 사용했습니다" fold-able 박스.
+     *
+     * - 기본 닫힘 (toolUsagesOpen=false). 헤더 클릭 시 toggle.
+     * - 펼쳤을 때 도구 별로 name + arguments + result + read/write 색상 배지.
+     * - 디버그 / 신뢰도 향상용 — 사용자가 "왜 이렇게 답했지" 의문 가질 때 즉시 검증.
+     */
+    renderToolUsages(idx, line) {
+        const usages = line.toolUsages;
+        if (!usages || usages.length === 0)
+            return nothing;
+        const open = !!line.toolUsagesOpen;
+        const readCount = usages.filter(u => u.kind === 'read').length;
+        const writeCount = usages.filter(u => u.kind === 'write').length;
+        const toolsLabel = i18next.t('board-ai.text.tools-used', { defaultValue: '도구 사용' });
+        return html `
+      <div class="tool-usages ${open ? 'open' : ''}">
+        <button
+          class="tool-usages-header"
+          aria-expanded=${open}
+          @click=${() => this.toggleToolUsages(idx)}>
+          <md-icon class="tool-usages-icon">${open ? 'expand_less' : 'build'}</md-icon>
+          <span class="tool-usages-summary">
+            <strong>${usages.length}</strong> ${toolsLabel}
+            <span class="tool-usages-counts">· read ${readCount} · write ${writeCount}</span>
+          </span>
+          <md-icon class="tool-usages-chevron">${open ? 'expand_less' : 'expand_more'}</md-icon>
+        </button>
+        ${open
+            ? html `
+              <ol class="tool-usages-list">
+                ${usages.map((u, i) => html `
+                    <li class="tool-usage-item kind-${u.kind}">
+                      <div class="tool-usage-head">
+                        <span class="tool-usage-step">${i + 1}.</span>
+                        <span class="tool-usage-name">${u.name}</span>
+                        <span class="tool-usage-kind kind-${u.kind}">${u.kind}</span>
+                      </div>
+                      ${u.arguments && Object.keys(u.arguments).length > 0
+                ? html `<pre class="tool-usage-args">${this.formatJson(u.arguments)}</pre>`
+                : nothing}
+                      <pre class="tool-usage-result">${this.formatJson(u.result)}</pre>
+                    </li>
+                  `)}
+              </ol>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    toggleToolUsages(idx) {
+        const next = [...this.lines];
+        const line = next[idx];
+        if (!line)
+            return;
+        next[idx] = { ...line, toolUsagesOpen: !line.toolUsagesOpen };
+        this.lines = next;
+    }
+    formatJson(value) {
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    // ── Per-message actions ────────────────────────────────────────
+    async copyMessage(idx, content) {
+        try {
+            await navigator.clipboard.writeText(content);
+            this.copiedIdx = idx;
+            this.showToast(i18next.t('board-ai.text.copied'));
+            setTimeout(() => {
+                if (this.copiedIdx === idx)
+                    this.copiedIdx = undefined;
+            }, 1500);
+        }
+        catch {
+            // clipboard 권한 없거나 비-secure context — 조용히 무시
+        }
+    }
+    showToast(message) {
+        this.toastMessage = message;
+        setTimeout(() => {
+            if (this.toastMessage === message)
+                this.toastMessage = undefined;
+        }, 1500);
+    }
+    /**
+     * 사용자 메시지 편집 — 해당 메시지 + 이후 모두 UI 에서 제거하고 입력창에 채움.
+     * 서버 영속 history 는 그대로 유지 (다음 send 시 새 메시지로 추가).
+     */
+    editUserMessage(idx, content) {
+        this.lines = this.lines.slice(0, idx);
+        this.input = content;
+        requestAnimationFrame(() => {
+            const ta = this.renderRoot.querySelector('textarea');
+            ta?.focus();
+            ta?.setSelectionRange(content.length, content.length);
+        });
+    }
+    /**
+     * AI 응답 재생성 — 해당 assistant 메시지 + 이후 제거하고, 직전 user 메시지를 다시 send.
+     */
+    async regenerateAssistant(idx) {
+        if (this.busy)
+            return;
+        // 직전 user 메시지 찾기
+        let userIdx = idx - 1;
+        while (userIdx >= 0 && this.lines[userIdx].role !== 'user')
+            userIdx--;
+        if (userIdx < 0)
+            return;
+        const userContent = this.lines[userIdx].content;
+        // assistant 메시지 + 이후 제거
+        this.lines = this.lines.slice(0, idx);
+        this.input = userContent;
+        await this.send();
+    }
+    // ── Patch revert ───────────────────────────────────────────────
+    onRevertClick(patchId) {
+        if (this.revertedPatchIds.has(patchId))
+            return;
+        this.revertedPatchIds = new Set([...this.revertedPatchIds, patchId]);
+        // 호스트 (board-modeller-page) 에게 revert 요청 — 호스트가 snapshot 복원 + 서버 mutation 호출
+        this.dispatchEvent(new CustomEvent('board-edit-revert', {
+            detail: { patchId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    async send() {
+        const text = this.input.trim();
+        if (!text || this.busy)
+            return;
+        this.lines = [...this.lines, { role: 'user', content: text }];
+        this.input = '';
+        this.busy = true;
+        this.errorMessage = undefined;
+        // 가짜 pending 응답 표시 (UX 부드럽게)
+        const pendingIdx = this.lines.length;
+        this.lines = [...this.lines, { role: 'assistant', content: '', pending: true }];
+        try {
+            // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류)
+            const history = this.lines
+                .slice(0, pendingIdx) // pending 제외
+                .filter(l => l.role !== 'system')
+                .map(l => ({ role: l.role, content: l.content }));
+            // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
+            // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
+            const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard;
+            const result = await client.mutate({
+                mutation: BOARD_AI_CHAT_MUTATION,
+                variables: {
+                    input: buildChatMutationInput({
+                        sessionId: this.sessionId,
+                        history,
+                        liveBoard,
+                        scopes: this.scopes,
+                        knownTypes: this.knownTypes,
+                        categories: this.categories,
+                        componentSchemas: this.componentSchemas,
+                        selectedRefids: this.selectedRefids ?? []
+                    })
+                }
+            });
+            const out = result.data?.boardAIChat;
+            if (!out)
+                throw new Error(i18next.t('board-ai.text.empty-response'));
+            // pending 자리에 실제 응답
+            const replaced = [...this.lines];
+            replaced[pendingIdx] = {
+                role: 'assistant',
+                content: out.reply,
+                patchSummary: out.patch?.summary,
+                followUp: out.followUp || undefined,
+                patchId: out.patchId || undefined,
+                toolUsages: Array.isArray(out.toolUsages) ? out.toolUsages : undefined
+            };
+            this.lines = replaced;
+            // 호스트로 patch 이벤트 전파
+            if (out.patch) {
+                this.dispatchEvent(new CustomEvent('board-edit-patch', {
+                    detail: {
+                        patch: out.patch,
+                        summary: out.patch.summary,
+                        confidence: out.patch.confidence,
+                        patchId: out.patchId,
+                        sessionId: out.sessionId
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            if (out.followUp) {
+                this.dispatchEvent(new CustomEvent('chat-followup', {
+                    detail: { question: out.followUp },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        }
+        catch (e) {
+            // pending 메시지 제거 + 에러 표시 + 마지막 입력 보존 (다시 시도용)
+            this.lines = this.lines.slice(0, pendingIdx);
+            this.errorMessage = e?.message ?? String(e);
+            this.lastFailedInput = text;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'session-id' }),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "sessionId", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "currentBoard", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxBoardAIChat.prototype, "boardProvider", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "selectedRefids", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "scopes", void 0);
+__decorate([
+    property({ type: Array, attribute: 'known-types' }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "knownTypes", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "categories", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "componentSchemas", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "placeholder", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "lines", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "input", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "lastFailedInput", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "revertedPatchIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "examplesOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "toastMessage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], OxBoardAIChat.prototype, "copiedIdx", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "errorMessage", void 0);
+OxBoardAIChat = OxBoardAIChat_1 = __decorate([
+    customElement('ox-board-ai-chat')
+], OxBoardAIChat);
+export { OxBoardAIChat };
+//# sourceMappingURL=board-ai-chat.js.map