@iyulab/chat-components 0.6.0 → 0.7.0

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

@@ -1,209 +0,0 @@
-/**
- * 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/skills/iyulab-chat-components/references/components/attach-button.md

@@ -1,69 +0,0 @@
-# u-attach-button
-
-```ts
-import '@iyulab/chat-components/dist/components/buttons/UAttachButton.js';
-```
-
-**Tag:** `u-attach-button`
-
-Opens a file picker dialog. Fires an `attach` event with the selected files. Place in `u-prompt`'s `left-actions` slot.
-
-```html
-<!-- Basic usage -->
-<u-attach-button></u-attach-button>
-
-<!-- Images only -->
-<u-attach-button accept="image/*">Add image</u-attach-button>
-
-<!-- Multiple files allowed -->
-<u-attach-button multiple accept="image/*,application/pdf">Attach files</u-attach-button>
-
-<!-- Inside u-prompt -->
-<u-prompt>
-  <u-attach-button
-    slot="left-actions"
-    multiple
-    accept="image/*,application/pdf,text/*"
-    @attach=${handleAttach}
-  >
-    Files
-  </u-attach-button>
-</u-prompt>
-```
-
-```ts
-const attachBtn = document.querySelector('u-attach-button');
-
-attachBtn.addEventListener('attach', (e) => {
-  const { files } = e.detail; // File[]
-  console.log('Selected files:', files.map(f => f.name));
-});
-```
-
----
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| *(default)* | Tooltip label text |
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `accept` | `string` | `undefined` | Accepted MIME types (comma-separated). E.g. `"image/*"`, `"image/*,application/pdf"` |
-| `multiple` | `boolean` | `false` | Allow selecting multiple files |
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `attach` | `{ files: File[] }` | Fired after file selection. The file input is reset automatically |
-
-## CSS Parts
-
-| Part | Description |
-|------|-------------|
-| `base` | The button element (`u-button`) |
-| `icon` | Paperclip icon |

package/skills/iyulab-chat-components/references/components/copy-button.md

@@ -1,46 +0,0 @@
-# u-copy-button
-
-```ts
-import '@iyulab/chat-components/dist/components/buttons/UCopyButton.js';
-```
-
-**Tag:** `u-copy-button`
-
-Copies text to the clipboard on click. The icon switches to a checkmark temporarily to confirm the action. Used inside `u-code-block` for code copying.
-
-```html
-<!-- Basic usage -->
-<u-copy-button .value=${"Text to copy"}></u-copy-button>
-
-<!-- With tooltip text -->
-<u-copy-button .value=${"code content"}>Copy</u-copy-button>
-
-<!-- Custom reset delay (default: 1000ms) -->
-<u-copy-button .value=${"text"} .delay=${2000}></u-copy-button>
-```
-
-Typical placement in a message footer:
-
-```html
-<u-message>
-  <u-marked-block slot="default" .value=${content}></u-marked-block>
-  <div slot="footer">
-    <u-copy-button .value=${content}>Copy</u-copy-button>
-  </div>
-</u-message>
-```
-
----
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| *(default)* | Tooltip label text |
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | `string` | `undefined` | Text to copy to clipboard |
-| `delay` | `number` | `1000` | Time in ms before the icon resets after copying. `0` resets immediately |

package/skills/iyulab-chat-components/references/components/json-block.md

@@ -1,41 +0,0 @@
-# u-json-block
-
-```ts
-import '@iyulab/chat-components/dist/components/blocks/UJsonBlock.js';
-```
-
-**Tag:** `u-json-block`
-
-Renders JSON data as a collapsible, interactive tree. Used inside `u-tool-block` to display tool call input and output.
-
-```html
-<!-- Basic usage -->
-<u-json-block .value=${{ name: "Alice", age: 30, hobbies: ["reading", "coding"] }}></u-json-block>
-
-<!-- Collapsed by default -->
-<u-json-block .expanded=${false} .value=${complexData}></u-json-block>
-```
-
-Pass JSON via HTML attribute:
-
-```html
-<u-json-block value='{"key": "value", "count": 42}'></u-json-block>
-```
-
----
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | `JsonNode` | `{}` | JSON data to render (object, array, or primitive) |
-| `expanded` | `boolean` | `true` | Initial expand state for all object/array nodes |
-
-## JsonNode Type
-
-```ts
-type JsonValue  = string | number | boolean | null;
-type JsonArray  = JsonNode[];
-type JsonObject = { [key: string]: JsonNode };
-type JsonNode   = JsonValue | JsonArray | JsonObject;
-```

package/skills/iyulab-chat-components/references/components/question-intent.md

@@ -1,75 +0,0 @@
-# u-question-intent
-
-```ts
-import '@iyulab/chat-components/dist/components/intents/UQuestionIntent.js';
-```
-
-**Tag:** `u-question-intent`
-
-Renders a question with clickable choice buttons generated by the LLM. Fires a `choice` event when the user selects an option.
-
-`u-marked-block` strips `intent-json` code blocks from the rendered output, so you must parse them manually using `IntentPromptBuilder` and create this component yourself.
-
-```html
-<!-- Basic usage -->
-<u-question-intent
-  question="What topic are you interested in?"
-  .choices=${["Artificial Intelligence", "Blockchain", "Cloud Computing"]}
-></u-question-intent>
-
-<!-- Choices only, no question text -->
-<u-question-intent
-  .choices=${["Yes, continue", "No, stop"]}
-></u-question-intent>
-```
-
-```ts
-const intent = document.querySelector('u-question-intent');
-
-intent.addEventListener('choice', (e) => {
-  const { value } = e.detail; // selected choice text
-  console.log('Selected:', value);
-
-  // Auto-fill and submit the prompt
-  prompt.value = value;
-  prompt.submit();
-});
-```
-
-Parsing from an LLM response with `IntentPromptBuilder`:
-
-```ts
-import { IntentPromptBuilder, PresetIntent } from '@iyulab/chat-components';
-
-// Setup
-IntentPromptBuilder.instance.use(PresetIntent.Questions);
-
-// Parse LLM response
-const [cleanText, intents] = IntentPromptBuilder.instance.parse(llmResponse);
-
-for (const intent of intents) {
-  if (intent.type === 'question') {
-    const el = document.createElement('u-question-intent');
-    el.question = intent.properties?.question;
-    el.choices = intent.properties?.choices ?? [];
-    messageContainer.appendChild(el);
-  }
-}
-
-markedBlock.value = cleanText;
-```
-
----
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `question` | `string` | `undefined` | Question text shown above choices. Hidden if not set |
-| `choices` | `string[]` | `[]` | Clickable choices (1–5 recommended). Renders nothing if empty |
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `choice` | `{ value: string }` | Fired when a choice button is clicked |

package/skills/iyulab-chat-components/references/components/think-block.md

@@ -1,48 +0,0 @@
-# u-think-block
-
-```ts
-import '@iyulab/chat-components/dist/components/blocks/UThinkBlock.js';
-```
-
-**Tag:** `u-think-block`
-
-Displays LLM reasoning (thinking) content. Shows "Thinking..." while loading and switches to "Thought" on completion. Content can be collapsed or expanded via a header click.
-
-```html
-<!-- Reasoning in progress -->
-<u-think-block loading .value=${"Analyzing..."}></u-think-block>
-
-<!-- Completed (default: collapsed) -->
-<u-think-block .value=${"Full reasoning content here."}></u-think-block>
-
-<!-- Expanded with auto-scroll during streaming -->
-<u-think-block
-  auto-scroll
-  .collapsed=${false}
-  .value=${streamingThought}
-></u-think-block>
-```
-
----
-
-## Properties
-
-| Property | Type | Default | Reflect | Description |
-|----------|------|---------|---------|-------------|
-| `value` | `string` | `undefined` | — | Reasoning text (rendered as markdown) |
-| `loading` | `boolean` | `false` | ✓ | Loading state. Shows spinner, displays "Thinking..." label |
-| `collapsed` | `boolean` | `true` | ✓ | Collapsed state. Toggle by clicking the header |
-| `autoScroll` | `boolean` | `false` | — | (`auto-scroll`) Scrolls to bottom on each `value` update. Disables on user scroll interaction |
-
-## Methods
-
-| Method | Returns | Description |
-|--------|---------|-------------|
-| `scrollToBottom()` | `boolean` | Smoothly scrolls the body to the bottom. Returns `true` if body element exists |
-
-## CSS Parts
-
-| Part | Description |
-|------|-------------|
-| `header` | Header row (icon + title + collapse toggle) |
-| `body` | Scrollable content area |

package/skills/iyulab-chat-components/references/components/tool-block.md

@@ -1,57 +0,0 @@
-# u-tool-block
-
-```ts
-import '@iyulab/chat-components/dist/components/blocks/UToolBlock.js';
-```
-
-**Tag:** `u-tool-block`
-
-Displays a tool call's input and output as collapsible JSON trees. Used to show LLM tool usage inline in a message.
-
-```html
-<!-- Tool call in progress -->
-<u-tool-block loading title="search_web"></u-tool-block>
-
-<!-- Completed tool call -->
-<u-tool-block
-  title="search_web"
-  .input=${{ query: "weather today" }}
-  .output=${{ results: ["Sunny, 25°C"] }}
-></u-tool-block>
-
-<!-- Expanded by default -->
-<u-tool-block
-  title="code_execution"
-  .collapsed=${false}
-  .input=${{ code: "print('hello')" }}
-  .output=${{ stdout: "hello\n" }}
-></u-tool-block>
-```
-
-Pass JSON via HTML attribute (uses `jsonAttrConverter`):
-
-```html
-<u-tool-block
-  title="calculator"
-  input='{"expression": "2 + 2"}'
-  output='{"result": 4}'
-></u-tool-block>
-```
-
----
-
-## Properties
-
-| Property | Type | Default | Reflect | Description |
-|----------|------|---------|---------|-------------|
-| `title` | `string` | `''` | — | Tool name shown in the header (falls back to 'Tool Usage') |
-| `loading` | `boolean` | `false` | ✓ | Loading state. Shows spinner in header |
-| `collapsed` | `boolean` | `true` | ✓ | Collapsed state. Toggle by clicking the header |
-| `input` | `JsonNode` | `undefined` | — | Tool input JSON |
-| `output` | `JsonNode` | `undefined` | — | Tool output JSON |
-
-## CSS Parts
-
-| Part | Description |
-|------|-------------|
-| `body` | Input / output display area |

package/skills/iyulab-chat-components/references/components/view.md

@@ -1,51 +0,0 @@
-# u-view
-
-```ts
-import '@iyulab/chat-components/dist/components/views/UView.js';
-```
-
-**Tag:** `u-view`
-
-Dynamic custom element renderer. Creates the element specified by `tag`, binds `properties` to it, and handles loading and error states. Used internally by `u-marked-block` to render `view-json` code blocks.
-
-```html
-<!-- Render u-chart-view dynamically -->
-<u-view
-  tag="u-chart-view"
-  .properties=${{
-    type: 'bar',
-    data: { labels: ['A', 'B'], datasets: [{ data: [10, 20] }] }
-  }}
-></u-view>
-
-<!-- Loading state (skeleton placeholder) -->
-<u-view tag="u-chart-view" loading></u-view>
-```
-
-How `u-marked-block` processes a `view-json` block:
-
-````
-```view-json
-{
-  "tag": "u-images-view",
-  "properties": { "items": [{ "src": "https://..." }] }
-}
-```
-````
-
-This is converted to `<u-view tag="u-images-view" ...>` via `UView.buildHTML()`.
-
----
-
-## Properties
-
-| Property | Type | Default | Reflect | Description |
-|----------|------|---------|---------|-------------|
-| `tag` | `string` | `undefined` | — | Custom element tag to render. Must already be registered |
-| `properties` | `Record<string, unknown>` | `undefined` | — | Properties to bind to the rendered element |
-| `loading` | `boolean` | `false` | ✓ | Shows a skeleton placeholder instead of the element |
-| `blacklist` | `string[]` | `['innerHTML', 'outerHTML', ...]` | — | Property names blocked from binding for XSS prevention |
-
-## Security
-
-The following property names are blocked by default to prevent XSS: `innerHTML`, `outerHTML`, `textContent`, `innerText`, `outerText`, `srcdoc`. Extend `blacklist` to add more restrictions.

package/skills/iyulab-chat-components/references/components/vote-button.md

@@ -1,60 +0,0 @@
-# u-vote-button
-
-```ts
-import '@iyulab/chat-components/dist/components/buttons/UVoteButton.js';
-```
-
-**Tag:** `u-vote-button`
-
-Thumbs-up / thumbs-down vote button pair. Clicking a button toggles its active state; clicking the same button again resets back to `none`.
-
-```html
-<!-- Basic usage -->
-<u-vote-button></u-vote-button>
-
-<!-- Pre-set state -->
-<u-vote-button value="up"></u-vote-button>
-
-<!-- With tooltips -->
-<u-vote-button>
-  <span slot="up">Helpful</span>
-  <span slot="down">Not helpful</span>
-</u-vote-button>
-```
-
-```ts
-const voteBtn = document.querySelector('u-vote-button');
-
-voteBtn.addEventListener('change', () => {
-  console.log('vote:', voteBtn.value); // 'up' | 'down' | 'none'
-});
-```
-
----
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `up` | Tooltip text for the thumbs-up button |
-| `down` | Tooltip text for the thumbs-down button |
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | `'none'\|'up'\|'down'` | `'none'` | Current vote state |
-
-## Events
-
-| Event | Description |
-|-------|-------------|
-| `change` | Fired when vote state changes (`bubbles: true, composed: true`) |
-
-## CSS Parts
-
-| Part | Description |
-|------|-------------|
-| `up-btn` | Thumbs-up button |
-| `down-btn` | Thumbs-down button |
-| `icon` | Button icon |