@iyulab/chat-components 0.3.0 → 0.5.0

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

@@ -0,0 +1,54 @@
+import { ScanResult, DOMCommand } from './types.js';
+/**
+ * DOMPromptBuilder
+ * ScanResult를 LLM이 이해하기 쉬운 프롬프트로 변환하고, LLM 응답에서 명령을 추출합니다.
+ */
+export declare class DOMPromptBuilder {
+    private template;
+    constructor(template?: string);
+    /**
+     * 기본 프롬프트 템플릿
+     */
+    private getDefaultTemplate;
+    /**
+     * LLM 프롬프트 생성
+     */
+    buildPrompt(scan: ScanResult, options?: {
+        maxElements?: number;
+        includeInvisible?: boolean;
+        contextHint?: string;
+        template?: string;
+    }): string;
+    /**
+     * LLM 응답에서 명령 추출
+     */
+    extractCommands(llmResponse: string): DOMCommand[];
+    /**
+     * 명령 객체 정규화
+     */
+    private normalizeCommand;
+    /**
+     * 요소 리스트를 LLM 친화적 텍스트로 변환
+     */
+    private summarizeElements;
+    /**
+     * 단일 요소를 텍스트로 표현
+     */
+    private elementToText;
+    /**
+     * 스크린샷을 멀티모달 메시지로 변환 (Anthropic Claude, OpenAI GPT-4V 형식)
+     */
+    formatMultimodalMessage(scan: ScanResult, options?: {
+        maxElements?: number;
+        contextHint?: string;
+        screenshotFormat?: 'anthropic' | 'openai';
+    }): any;
+    /**
+     * 템플릿 변경
+     */
+    setTemplate(template: string): void;
+    /**
+     * 현재 템플릿 가져오기
+     */
+    getTemplate(): string;
+}

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

@@ -0,0 +1,83 @@
+import { ScanResult, ScanOptions } from './types.js';
+/**
+ * DOM 스캔 엔진
+ * Shadow DOM을 포함한 전체 DOM 트리를 순회하며 인터랙티브 요소를 추출
+ */
+export declare class DOMScanner {
+    private elementMap;
+    private idMap;
+    private totalElementsScanned;
+    private debug;
+    private cachedScan;
+    private prioritizeLandmarks;
+    /**
+     * DOM 스캔 수행 (Shadow DOM 포함)
+     * @param root 스캔 시작 루트 (기본값 document.body)
+     * @param options 스캔 옵션
+     */
+    scan(root?: Element | ShadowRoot, options?: ScanOptions): ScanResult;
+    /**
+     * ID로 요소 객체 가져오기 (빠른 조회)
+     */
+    getElement(id: string): Element | undefined;
+    /**
+     * 요소에서 ID 가져오기
+     */
+    getElementId(element: Element): string | undefined;
+    /**
+     * 단일 요소를 스캔하고 Shadow DOM도 탐색
+     */
+    private scanElement;
+    /**
+     * Shadow DOM 내부 스캔
+     */
+    private scanShadowRoot;
+    /**
+     * 인터랙티브 요소 여부 판단
+     */
+    private isInteractive;
+    /**
+     * 필터링 기준 충족 여부 (LLM에게 보여줄 가치가 있는지)
+     */
+    private shouldInclude;
+    /**
+     * 짧은 랜덤 ID 생성 (예: elm_a1b2c3)
+     */
+    private generateId;
+    /**
+     * 요소 정보 추출
+     */
+    private getElementInfo;
+    /**
+     * 요소의 레이블 가져오기
+     */
+    private getLabel;
+    /**
+     * 요소 타입 결정
+     */
+    private getElementType;
+    /**
+     * 요소가 시각적으로 보이는지 확인
+     */
+    private isVisible;
+    /**
+     * 우선순위 계산
+     */
+    private calculatePriority;
+    /**
+     * 요소 트리를 평탄화
+     */
+    private flattenElements;
+    /**
+     * 우선순위 기반 필터링
+     */
+    private filterByPriority;
+    /**
+     * DOM 해시 생성 (변경 감지용)
+     */
+    private generateDOMHash;
+    /**
+     * 디버그 로그 출력 (debug 모드일 때만)
+     */
+    private log;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * DOM Interaction Module
+ * LLM이 웹 페이지를 스캔하고 인터랙션할 수 있게 하는 유틸리티
+ */
+export { DOMScanner } from './DOMScanner.js';
+export { DOMController } from './DOMController.js';
+export { DOMAgent } from './DOMAgent.js';
+export { DOMPromptBuilder } from './DOMPromptBuilder.js';
+export type { ElementType, ScannedElement, ScanResult, FilterStrategy, ScanOptions, DOMAction, DOMCommand, ExecutionResult, DOMAgentEvents, AutomationOptions, HistoryItem, LLMCallback } from './types.js';

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.3.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.2.0",
-    "dompurify": "^3.3.1",
+    "@iyulab/components": "^1.0.1",
     "highlight.js": "^11.11.1",
+    "html2canvas": "^1.4.1",
     "lit": "^3.3.2",
-    "marked": "^17.0.1",
-    "marked-katex-extension": "^5.1.6"
+    "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.2",
-    "@lit/react": "^1.0.8",
-    "@types/node": "^25.0.9",
-    "eslint": "^9.39.2",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^17.0.0",
-    "openai": "^6.16.0",
+    "@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",
+    "glob": "^13.0.6",
+    "globals": "^17.4.0",
+    "openai": "^6.33.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vite": "^7.3.1",
+    "typescript-eslint": "^8.57.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4"
   }
 }

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

@@ -1,23 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-/**
- * 코드 블록을 렌더링하는 컴포넌트입니다.
- * 언어와 코드를 받아 syntax highlighting을 적용합니다.
- */
-export declare class UCodeBlock extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
-    isCopied: 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,76 +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 { BaseElement } from '@iyulab/components/dist/components/BaseElement.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 BaseElement {
-  constructor() {
-    super(...arguments);
-    this.isCopied = 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-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="lang">
-          ${lang}
-        </span>
-        <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, "headless");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UCodeBlock.prototype, "lang");
-__decorateClass([
-  property({ type: String })
-], UCodeBlock.prototype, "value");
-
-export { UCodeBlock };

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

@@ -1,45 +0,0 @@
-import { PropertyValues, TemplateResult } from 'lit';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { JsonNode } from '../../types/JsonNode.js';
-/**
- * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
- */
-export declare class UJsonBlock extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    state: Record<string, boolean>;
-    /** 초기 확장 상태를 관리하는 속성입니다. */
-    expanded: boolean;
-    /** JSON 데이터 (속성으로 전달 가능) */
-    value: JsonNode;
-    connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1>;
-    /**
-     * JsonNode를 렌더링합니다.
-     * @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
-     * @param parent - 부모 노드의 경로
-     */
-    private renderNode;
-    /**
-     * JsonValue를 렌더링합니다.
-     * @param node - JsonValue (string, number, boolean, null 등)
-     */
-    private renderValue;
-    /**
-     * JsonObject 또는 JsonArray를 렌더링합니다.
-     * @param node - JsonObject 또는 JsonArray
-     * @param depth - 현재 깊이
-     */
-    private renderObject;
-    /**
-     * 노드의 미리보기를 렌더링합니다.
-     * @param node - JsonObject 또는 JsonArray
-     */
-    private renderPreview;
-    /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
-    private setState;
-    private isValueType;
-    /** 노드 확장/축소 클릭 핸들러 */
-    private handlePropertyKeyClick;
-}