@iyulab/chat-components 0.4.0 → 0.5.0

package/dist/utilities/dom-agent/types.d.ts

@@ -0,0 +1,209 @@
+/**
+ * DOM Interaction Types
+ * LLM이 웹 페이지를 스캔하고 인터랙션할 수 있게 하는 타입 정의
+ */
+/**
+ * 스캔된 요소의 타입
+ */
+export type ElementType = 'button' | 'input' | 'link' | 'select' | 'textarea' | 'checkbox' | 'radio' | 'custom' | 'other';
+/**
+ * 스캔된 DOM 요소
+ */
+export interface ScannedElement {
+    /** 랜덤 생성된 고유 식별자 (예: elm_a1b2c3) */
+    id: string;
+    /** 요소 타입 */
+    type: ElementType;
+    /** HTML 태그명 */
+    tag: string;
+    /** 텍스트 콘텐츠 */
+    text?: string;
+    /** input 값 */
+    value?: string;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    /** aria-label 또는 연결된 label */
+    label?: string;
+    /** data-llm-description 값 (LLM을 위한 설명) */
+    description?: string;
+    /** ARIA role */
+    role?: string;
+    /** disabled 상태 */
+    disabled: boolean;
+    /** 시각적으로 보이는지 여부 */
+    visible: boolean;
+    /** 포커스 상태 */
+    focused: boolean;
+    /** 체크 상태 (checkbox/radio) */
+    checked?: boolean;
+    /** Shadow DOM 내부 요소 여부 */
+    inShadowDom: boolean;
+    /** 화면 상 x 위치 */
+    x: number;
+    /** 화면 상 y 위치 */
+    y: number;
+    /** 너비 */
+    width: number;
+    /** 높이 */
+    height: number;
+    /** 우선순위 점수 (필터링용) */
+    priority: number;
+    /** 자식 요소들 (필터링된) */
+    children?: ScannedElement[];
+}
+/**
+ * DOM 스캔 결과
+ */
+export interface ScanResult {
+    /** 스캔 타임스탬프 */
+    timestamp: number;
+    /** 현재 URL */
+    url: string;
+    /** 페이지 제목 */
+    title: string;
+    /** 스캔된 요소들 */
+    elements: ScannedElement[];
+    /** Base64 인코딩된 스크린샷 (optional) */
+    screenshot?: string;
+    /** 스크롤 위치 */
+    scrollPosition: {
+        x: number;
+        y: number;
+    };
+    /** 뷰포트 크기 */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** 전체 DOM 요소 수 */
+    totalElements: number;
+    /** LLM에게 제공되는 필터링된 요소 수 */
+    filteredElements: number;
+}
+/**
+ * 필터링 전략
+ */
+export type FilterStrategy = 'all' | 'interactive' | 'described' | 'visible';
+/**
+ * 스캔 옵션
+ */
+export interface ScanOptions {
+    /** 스크린샷 포함 여부 */
+    includeScreenshot?: boolean;
+    /** 최대 요소 수 제한 */
+    maxElements?: number;
+    /** 최대 깊이 제한 */
+    maxDepth?: number;
+    /** 필터링 전략 */
+    filterStrategy?: FilterStrategy;
+    /** 디버그 로그 활성화 (기본값: false) */
+    debug?: boolean;
+    /** 캐싱 사용 여부 (기본값: true) */
+    useCache?: boolean;
+    /** iframe 포함 여부 (기본값: false) */
+    includeIframes?: boolean;
+    /** ARIA Landmark 우선순위 증가 (기본값: true) */
+    prioritizeLandmarks?: boolean;
+}
+/**
+ * DOM 명령 액션
+ */
+export type DOMAction = 'click' | 'input' | 'select' | 'focus' | 'blur' | 'scroll' | 'scrollTo' | 'hover' | 'clear' | 'check' | 'wait';
+/**
+ * DOM 명령
+ */
+export interface DOMCommand {
+    /** 실행할 액션 */
+    action: DOMAction;
+    /** 대상 요소 ID (DOMScanner가 생성한 랜덤 ID) */
+    target?: string;
+    /** 명령 값 (input 텍스트, select 옵션 등) */
+    value?: string | number | boolean;
+    /** 추가 옵션 */
+    options?: {
+        /** 명령 실행 전 대기 시간 (ms) */
+        delay?: number;
+        /** 네비게이션 대기 여부 */
+        waitForNavigation?: boolean;
+    };
+}
+/**
+ * 명령 실행 결과
+ */
+export interface ExecutionResult {
+    /** 성공 여부 */
+    success: boolean;
+    /** 실행된 명령 */
+    command: DOMCommand;
+    /** 에러 메시지 (실패 시) */
+    error?: string;
+    /** 실행 타임스탬프 */
+    timestamp: number;
+    /** 페이지 네비게이션 발생 여부 */
+    navigationOccurred?: boolean;
+}
+/**
+ * DOMAgent 이벤트 타입
+ */
+export interface DOMAgentEvents {
+    /** 스캔 완료 */
+    scan: ScanResult;
+    /** 명령 수신 */
+    command: DOMCommand;
+    /** 명령 실행 완료 */
+    execute: ExecutionResult;
+    /** 에러 발생 */
+    error: Error;
+    /** 반복 횟수 */
+    iteration: number;
+}
+/**
+ * 자동화 옵션
+ */
+export interface AutomationOptions {
+    /** 최대 반복 횟수 */
+    maxIterations?: number;
+    /** 중지 조건 함수 */
+    stopCondition?: (scan: ScanResult) => boolean;
+    /** 스크린샷 포함 여부 */
+    includeScreenshot?: boolean;
+}
+/**
+ * 히스토리 항목
+ */
+export interface HistoryItem {
+    /** 스캔 결과 */
+    scan: ScanResult;
+    /** 실행된 명령들 */
+    commands: DOMCommand[];
+    /** 실행 결과들 */
+    results: ExecutionResult[];
+}
+/**
+ * LLM 콜백 함수 타입
+ */
+export type LLMCallback = (scan: ScanResult) => Promise<DOMCommand[]>;
+/**
+ * 캐시 항목
+ */
+export interface CachedScan {
+    /** 캐시된 스캔 결과 */
+    result: ScanResult;
+    /** 캐시 생성 시간 */
+    timestamp: number;
+    /** DOM 해시 (변경 감지용) */
+    domHash: string;
+}
+/**
+ * Diff 결과
+ */
+export interface ScanDiff {
+    /** 추가된 요소 */
+    added: ScannedElement[];
+    /** 제거된 요소 */
+    removed: ScannedElement[];
+    /** 변경된 요소 */
+    modified: ScannedElement[];
+    /** 변경되지 않은 요소 */
+    unchanged: ScannedElement[];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -31,34 +31,50 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*"
-    }
+    "./dist/*": "./dist/*",
+    "./react": "./dist/react/index.js",
+    "./react/*": "./dist/react/*"
   },
   "scripts": {
     "test": "vite",
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^0.4.0",
-    "chart.js": "^4.5.1",
+    "@iyulab/components": "^1.0.1",
     "highlight.js": "^11.11.1",
+    "html2canvas": "^1.4.1",
     "lit": "^3.3.2",
-    "marked": "^17.0.3",
+    "marked": "^17.0.5",
     "marked-katex-extension": "^5.1.7"
   },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.8",
+    "chart.js": ">=4.5.1",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.3.2",
-    "eslint": "^9.39.3",
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.5.0",
+    "chart.js": "^4.5.1",
+    "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.2.1",
-    "globals": "^17.3.0",
-    "openai": "^6.25.0",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
+    "openai": "^6.33.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/assets/action-prompt.md.js

@@ -1,3 +0,0 @@
-const template = "## Interactive Actions\n\nYou can guide the user with interactive actions by appending `action-json` fenced code blocks at the end of your response.\nThe user will see these as interactive UI elements and can click them to continue the conversation.\n\n**Output format (the fence language must be `action-json`):**\n```action-json\n{\n  \"type\": \"action-type-here\",\n  \"properties\" : {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these STRICTLY. Violation means the feature will not work:**\n1. ALWAYS wrap the block in triple backticks with the language identifier `action-json` exactly — never use `json`, plain text, or any other identifier.\n2. `type` must be one of the exact strings listed below. Do not invent new types.\n3. Place ALL action blocks at the very end of your response, after all prose content.\n4. Output valid JSON only — no comments, no trailing commas, no markdown inside the block.\n5. Only include actions when they genuinely help the user continue the conversation.\n6. Do NOT describe or explain the action block in surrounding text (e.g. do not write \"Here are some suggested questions:\"). Just output the block.\n\n**Available actions:**\n{{ACTION_LIST}}\n\n---\n\n{{ACTION_DOCS}}\n";
-
-export { template as default };

package/dist/assets/widget-prompt.md.js

@@ -1,3 +0,0 @@
-const template = "## Renderable Widgets\n\nYou can render interactive visual widgets inside your response.\nWhen a widget would make your answer clearer or more useful, output a `widget-json` fenced code block.\n\n**Output format (the fence language must be `widget-json`):**\n```widget-json\n{\n  \"tag\": \"exact-widget-tag-here\",\n  \"properties\": {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these strictly:**\n1. The fenced block language identifier must be `widget-json`, not `json` or anything else.\n2. `tag` must be one of the exact strings listed below. Never invent a tag.\n3. Include every property listed under `required`. Omit optional properties only if not needed.\n4. For schema-less `object` fields (e.g., Chart.js `data` / `options`), output a complete, realistic configuration using your knowledge.\n5. Output valid JSON — no comments, no trailing commas.\n\n**Available widgets:**\n{{WIDGET_LIST}}\n\n---\n\n{{WIDGET_DOCS}}\n";
-
-export { template as default };

package/dist/components/actions/UQuestionAction.component.js

@@ -1,58 +0,0 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { styles } from './UQuestionAction.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UQuestionAction extends UElement {
-  constructor() {
-    super(...arguments);
-    this.choices = [];
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-button": UButton
-    };
-  }
-  render() {
-    if (!this.choices || this.choices.length === 0) {
-      return nothing;
-    }
-    return html`
-      <p class="question" ?hidden=${!this.question}>${this.question}</p>
-      <div class="choices">
-        ${repeat(this.choices, (value, index) => html`
-          <u-button @click=${() => this.handleChoiceClick(index)}>
-            ${value}
-          </u-button>
-        `)}
-      </div>
-    `;
-  }
-  handleChoiceClick(index) {
-    const value = this.choices[index];
-    if (!value) return;
-    this.emit("u-submit", { value });
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UQuestionAction.prototype, "question");
-__decorateClass([
-  property({ type: Array })
-], UQuestionAction.prototype, "choices");
-
-export { UQuestionAction };

package/dist/components/actions/UQuestionAction.d.ts

@@ -1,7 +0,0 @@
-import { UQuestionAction } from './UQuestionAction.component.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-question-action": UQuestionAction;
-    }
-}
-export { UQuestionAction };

package/dist/components/actions/UQuestionAction.js

@@ -1,5 +0,0 @@
-import { UQuestionAction } from './UQuestionAction.component.js';
-
-UQuestionAction.define("u-question-action");
-
-export { UQuestionAction };

package/dist/components/blocks/UCodeBlock.component.d.ts

@@ -1,25 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/**
- * 코드 블록을 렌더링하는 컴포넌트입니다.
- * 언어와 코드를 받아 syntax highlighting을 적용합니다.
- */
-export declare class UCodeBlock extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
-    isCopied: boolean;
-    /** 코드 블록이 로딩 중인지 여부를 나타냅니다. */
-    loading: boolean;
-    /** 코드 블록의 헤더를 숨길지 여부를 지정합니다. */
-    headless: boolean;
-    /** 코드 언어를 지정합니다. */
-    lang: string;
-    /** 표시할 코드 내용입니다. */
-    value?: string;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * slot에 할당된 코드를 value로 설정합니다.
-     * 이 기능을 통해 HTML 내에 직접 코드를 작성할 수 있습니다.
-     */
-    private handleSlotChange;
-}

package/dist/components/blocks/UCodeBlock.component.js

@@ -1,88 +0,0 @@
-import { html } from 'lit';
-import { state, property } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import hljs from 'highlight.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { USpinner } from '@iyulab/components/dist/components/spinner/USpinner.component.js';
-import { UCopyButton } from '../buttons/UCopyButton.component.js';
-import { styles } from './UCodeBlock.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UCodeBlock extends UElement {
-  constructor() {
-    super(...arguments);
-    this.isCopied = false;
-    this.loading = false;
-    this.headless = false;
-    this.lang = "plaintext";
-    /**
-     * slot에 할당된 코드를 value로 설정합니다.
-     * 이 기능을 통해 HTML 내에 직접 코드를 작성할 수 있습니다.
-     */
-    this.handleSlotChange = (e) => {
-      const slot = e.target;
-      const nodes = slot.assignedNodes({ flatten: true });
-      this.value = nodes.map((node) => node.textContent).join("\n\n");
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-spinner": USpinner,
-      "u-copy-button": UCopyButton
-    };
-  }
-  render() {
-    const lang = hljs.getLanguage(this.lang) ? this.lang : "plaintext";
-    const value = this.value || "";
-    return html`
-      <div class="header" ?hidden=${this.headless}>
-        <span class="status">
-          ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon lib="internal" name="code-slash"></u-icon>`}
-        </span>
-        <span class="lang">
-          ${lang}
-        </span>
-        <div style="flex: 1"></div>
-        <u-copy-button
-          .value=${value}
-        ></u-copy-button>
-      </div>
-
-      <pre class="hljs">${unsafeHTML(hljs.highlight(value, {
-      language: lang
-    }).value)}</pre>
-
-      <slot hidden @slotchange=${this.handleSlotChange}></slot>
-    `;
-  }
-}
-__decorateClass([
-  state()
-], UCodeBlock.prototype, "isCopied");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCodeBlock.prototype, "loading");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UCodeBlock.prototype, "headless");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UCodeBlock.prototype, "lang");
-__decorateClass([
-  property({ type: String })
-], UCodeBlock.prototype, "value");
-
-export { UCodeBlock };

package/dist/components/blocks/UFilesBlock.component.d.ts

@@ -1,22 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { FileItem } from '../../types/BlockItem.js';
-/**
- * 여러 파일을 그리드 형태로 표시하는 블록 컴포넌트입니다.
- */
-export declare class UFilesBlock extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 파일 목록 */
-    files: FileItem[];
-    /** 삭제 버튼 표시 여부 */
-    removable: boolean;
-    render(): unknown;
-    private handleDownloadClick;
-    private handleRemoveClick;
-    /** MIME 타입 → Bootstrap Icon 이름 */
-    private resolveIcon;
-    /** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
-    private resolveExt;
-    /** bytes → 읽기 좋은 크기 문자열 */
-    private formatSize;
-}