@iyulab/chat-components 0.6.0 → 0.7.0

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

@@ -28,7 +28,6 @@ import '@iyulab/chat-components/dist/components/blocks/UMarkedBlock.js';
 
 ```ts
 import type { BlockItem, ReferenceSource } from '@iyulab/chat-components';
-import { PresetIntent, PresetView } from '@iyulab/chat-components';
 ```
 
 ---
@@ -51,8 +50,8 @@ const prompt = document.getElementById('prompt');
 const messages = document.getElementById('messages');
 
 // Handle send event
-prompt.addEventListener('send', () => {
-  const value = prompt.value;
+prompt.addEventListener('send', (e) => {
+  const { value } = e.detail;
   if (!value) return;
 
   // Add user message
@@ -70,15 +69,14 @@ prompt.addEventListener('send', () => {
   // Handle LLM streaming...
 });
 
-// Handle file attachments
-prompt.addEventListener('attach', (e) => {
-  const { files } = e.detail;
+// Handle file attachments (there is no built-in attach button — wire up your own)
+fileInput.addEventListener('change', (e) => {
+  const files = [...e.target.files];
   prompt.files = files.map(f => ({
     type: 'file',
     name: f.name,
     size: f.size,
     mimeType: f.type,
-    status: 'idle',
   }));
 });
 ```
@@ -117,72 +115,23 @@ markedBlock.refs = refs;
 
 ---
 
-## Intent System
+## Extra System
 
-Make the LLM output structured intent-json blocks by adding instructions to the system prompt:
+Let the LLM render rich content (charts, maps, image galleries, videos) via `block-json` code fences. See [extra-system.md](./extra-system.md) for full details.
 
 ```ts
-import { IntentPromptBuilder, PresetIntent } from '@iyulab/chat-components';
-
-// Use preset intents
-IntentPromptBuilder.instance.use(PresetIntent.Questions);
-
-// Add custom intent
-IntentPromptBuilder.instance.add({
-  type: 'rating',
-  description: 'Ask user to rate something on a scale',
-  properties: {
-    label: { type: 'string', description: 'What to rate' },
-    max: { type: 'number', description: 'Max score (default: 5)' }
-  },
-  required: ['label']
-});
-
-// Inject into system prompt
-const systemPrompt = IntentPromptBuilder.instance.build();
-```
-
-Parse intent-json from the LLM response and render components:
-
-```ts
-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 ?? [];
-    messageEl.appendChild(el);
-  }
-}
-
-markedBlock.value = cleanText;
-```
-
----
-
-## View System
-
-Let the LLM render rich content (charts, maps, videos, etc.) via view-json code blocks:
-
-```ts
-import { ViewPromptBuilder, PresetView } from '@iyulab/chat-components';
-
-// Use all preset views
-ViewPromptBuilder.instance.use(PresetView.All);
-// Or selectively
-ViewPromptBuilder.instance.use(PresetView.Images | PresetView.Chart);
+import '@iyulab/chat-components';
+import { prompt as extraInstructions } from '@iyulab/chat-components/extra';
 
-// Inject into system prompt
-const systemPrompt = ViewPromptBuilder.instance.build();
+const systemPrompt = `You are a helpful assistant.\n\n${extraInstructions}`;
 ```
 
-When `u-marked-block` encounters a view-json code block from the LLM, it automatically renders it via `u-view`:
+`u-marked-block` automatically detects `block-json` fences and renders them via `u-element-block` — no parsing step needed:
 
 ````
-```view-json
+```block-json
 {
-  "tag": "u-chart-view",
+  "tag": "u-chart-block",
   "properties": {
     "type": "bar",
     "data": { "labels": ["A", "B"], "datasets": [{ "data": [10, 20] }] }
@@ -216,29 +165,12 @@ function renderBlocks(blocks: BlockItem[], container: HTMLElement) {
         container.appendChild(el);
         break;
       }
-      case 'thinking': {
-        const el = document.createElement('u-think-block');
-        el.loading = block.loading ?? false;
-        el.value = block.value;
-        container.appendChild(el);
-        break;
-      }
-      case 'tool': {
-        const el = document.createElement('u-tool-block');
-        el.loading = block.loading ?? false;
-        el.title = block.title ?? '';
-        el.input = block.input;
-        el.output = block.output;
-        container.appendChild(el);
-        break;
-      }
       case 'file': {
         const el = document.createElement('u-file-block');
         el.name = block.name;
         el.size = block.size;
         el.type = block.mimeType;
         el.url = block.url;
-        el.status = block.status ?? 'idle';
         container.appendChild(el);
         break;
       }

package/skills/iyulab-chat-components/references/utilities/html-builder.md

@@ -0,0 +1,35 @@
+# HtmlBuilder
+
+```ts
+import { HtmlBuilder } from '@iyulab/chat-components';
+```
+
+Utility for building custom-element HTML strings, used internally by `u-marked-block` to inject `u-ref-tag`, `u-ref-card-group`, `u-code-block`, and `u-element-block` markup while rendering markdown. Useful if you're pre-building HTML fragments to feed into `u-marked-block` (e.g. custom preprocessing) instead of writing template strings by hand.
+
+```ts
+HtmlBuilder.build('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
+// → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
+```
+
+---
+
+## API
+
+### `HtmlBuilder.build(tag, attrs?, content?): string`
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `tag` | `string` | Custom element tag name (e.g. `"u-ref-tag"`) |
+| `attrs` | `Record<string, string \| boolean \| object \| null \| undefined>` | Attribute map (default `{}`) |
+| `content` | `string` | Inner HTML string, assumed already safe — no internal escaping (default `''`) |
+
+**Attribute value rules:**
+
+| Value | Result |
+|-------|--------|
+| `null` / `undefined` | Attribute omitted |
+| `false` | Attribute omitted |
+| `true` | Key only, no value (e.g. `disabled`) |
+| `object` | `JSON.stringify`'d, then HTML-attribute-escaped |
+| `href` / `src` keys | Escaped via the URL-safe escaper (blocks `javascript:` etc.) |
+| other `string` | HTML-attribute-escaped |

package/skills/iyulab-chat-components/references/utilities/prompt-builder.md

@@ -0,0 +1,73 @@
+# ElementPromptBuilder
+
+```ts
+import { ElementPromptBuilder } from '@iyulab/chat-components';
+import type { ElementSchema } from '@iyulab/chat-components';
+```
+
+Singleton utility that registers element schemas and generates LLM system prompt instructions for the `block-json` extra system. No manual parsing is needed — `u-marked-block` automatically renders `block-json` code fences via `u-element-block` (see [../extra-system.md](../extra-system.md)).
+
+For the 4 built-in extras (chart/images/map/video), you usually don't need to touch this API directly — `@iyulab/chat-components/extra` exports a ready-built `prompt` string:
+
+```ts
+import { prompt } from '@iyulab/chat-components/extra';
+
+const systemPrompt = `You are a helpful assistant.\n\n${prompt}`;
+```
+
+---
+
+## Overview
+
+```ts
+const builder = ElementPromptBuilder.instance;
+
+// Register a custom element schema
+builder.add({
+  tag: 'my-custom-block',
+  description: 'Display a custom visualization',
+  properties: {
+    data: { type: 'array', description: 'Data array' }
+  },
+  required: ['data']
+});
+
+// Inject into LLM system prompt
+const instruction = builder.build();
+```
+
+When the LLM outputs a `block-json` fence, `u-marked-block` renders it automatically via `u-element-block`:
+
+````
+```block-json
+{
+  "tag": "my-custom-block",
+  "properties": { "data": [1, 2, 3] }
+}
+```
+````
+
+---
+
+## API
+
+### `ElementPromptBuilder.instance`
+
+Returns the singleton. Created on first access.
+
+### `.add(schema: ElementSchema): this`
+
+Registers a custom element schema. Throws if the same `tag` is already registered.
+
+```ts
+interface ElementSchema {
+  tag: string;
+  description: string;
+  properties?: Record<string, JsonSchema>;
+  required?: string[];
+}
+```
+
+### `.build(): string`
+
+Returns LLM system prompt instructions for all registered schemas, injected into the `element-prompt.md` template. Returns an empty string if nothing is registered.

package/dist/_virtual/_glob-assets_raw/intent-prompt.md.1907474e.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/intent-prompt.md.1907474e
-var intent_prompt_md_default = "## Interactive Intents\n\nYou can guide the user with interactive intents by appending `intent-json` fenced code blocks at the end of your response. These intents can suggest follow-up questions, offer buttons to click, or provide other interactive elements that help the user continue the conversation.\n\n**Output format (the fence language must be `intent-json`):**\n```intent-json\n{\n  \"type\": \"intent-type-here\",\n  \"properties\" : {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these STRICTLY. Violation means the feature will not work:**\n1. The fenced block language identifier must be `intent-json`, not `json` or anything else.\n2. `type` must be one of the exact strings listed below. Do not invent new types.\n3. place ALL intent blocks at the very end of your response, after all prose content.\n4. Output valid JSON only — no comments, no trailing commas, etc.\n\n---\n\n{{INTENT_DOCS}}\n";
-//#endregion
-export { intent_prompt_md_default as default };

package/dist/_virtual/_glob-assets_raw/view-prompt.md.e0dbcffe.js

@@ -1,4 +0,0 @@
-//#region \0glob-assets_raw/view-prompt.md.e0dbcffe
-var view_prompt_md_default = "## Renderable Views\n\nYou can render interactive visual views inside your response.\nWhen a view would make your answer clearer or more useful, output a `view-json` fenced code block.\n\n**Output format (the fence language must be `view-json`):**\n```view-json\n{\n  \"tag\": \"view-tag-here\",\n  \"properties\": {\n    \"key\": \"value\"\n  }\n}\n```\n\n**Rules — follow these strictly:**\n1. The fenced block language identifier must be `view-json`, not `json` or anything else.\n2. `tag` must be one of the exact strings listed below. Never invent a tag.\n3. Output valid JSON — no comments, no trailing commas.\n\n---\n\n{{VIEW_DOCS}}\n";
-//#endregion
-export { view_prompt_md_default as default };

package/dist/chart.d.ts

@@ -1 +0,0 @@
-export * from './components/views/UChartView.js';

package/dist/chart.js

@@ -1,2 +0,0 @@
-import { UChartView } from "./components/views/UChartView.js";
-export { UChartView };

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

@@ -1,49 +0,0 @@
-import { PropertyValues, TemplateResult } from 'lit';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { JsonNode } from '../../types/JsonNode.js';
-/**
- * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
- */
-export declare class UJsonBlock extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 초기 확장 상태를 관리하는 속성입니다. */
-    expanded: boolean;
-    /** JSON 데이터 (속성으로 전달 가능) */
-    value: JsonNode;
-    state: Record<string, boolean>;
-    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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-json-block': UJsonBlock;
-    }
-}

package/dist/components/blocks/UJsonBlock.js

@@ -1,130 +0,0 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { styles } from "./UJsonBlock.styles.js";
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { UElement } from "@iyulab/components/dist/components/UElement.js";
-import { map } from "lit/directives/map.js";
-import { when } from "lit/directives/when.js";
-import { jsonAttrConverter } from "@iyulab/components/dist/utilities/converters.js";
-//#region src/components/blocks/UJsonBlock.ts
-var _ref;
-var UJsonBlock = class UJsonBlock extends UElement {
-	constructor(..._args) {
-		super(..._args);
-		this.expanded = true;
-		this.value = {};
-		this.state = {};
-		this.isValueType = (value) => {
-			return value !== Object(value);
-		};
-	}
-	static {
-		this.styles = [super.styles, styles];
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.setAttribute("tabindex", "0");
-	}
-	willUpdate(changedProperties) {
-		super.willUpdate(changedProperties);
-		if (changedProperties.has("value") || changedProperties.has("expanded")) this.state = this.setState(this.value);
-	}
-	render() {
-		return html`
-      <div part="base">
-        ${this.renderNode(this.value)}
-      </div>
-    `;
-	}
-	/**
-	* JsonNode를 렌더링합니다.
-	* @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
-	* @param parent - 부모 노드의 경로
-	*/
-	renderNode(value, parent = "") {
-		return this.isValueType(value) ? this.renderValue(value) : this.renderObject(value, parent);
-	}
-	/**
-	* JsonValue를 렌더링합니다.
-	* @param node - JsonValue (string, number, boolean, null 등)
-	*/
-	renderValue(node) {
-		const type = node === null ? "null" : Array.isArray(node) ? "array" : typeof node === "object" ? "object" : typeof node;
-		return html`
-      <span part="${type}" class="${type}" role="treeitem">
-        ${JSON.stringify(node)}
-      </span>
-    `;
-	}
-	/**
-	* JsonObject 또는 JsonArray를 렌더링합니다.
-	* @param node - JsonObject 또는 JsonArray
-	* @param depth - 현재 깊이
-	*/
-	renderObject(node, parent) {
-		return html`
-      <ul part="object" role="group">
-        ${map(Object.entries(node), ([key, value]) => {
-			const path = parent ? `${parent}.${key}` : key;
-			const isValue = this.isValueType(value);
-			const isExpanded = this.state[path] ?? this.expanded;
-			return html`
-            <li part="property" role="treeitem"
-                data-path="${path}"
-                aria-expanded="${isExpanded ? "true" : "false"}">
-              <span part="key"
-                    class="key"
-                    ?collapsable="${!isValue}"
-                    ?collapsed="${!isValue && !isExpanded}"
-                    @click=${!isValue ? () => this.handlePropertyKeyClick(path) : null}>
-                ${key}:
-                ${when(!isValue && !isExpanded, () => this.renderPreview(value))}
-              </span>
-
-              ${when(isValue || isExpanded, () => this.renderNode(value, path))}
-            </li>`;
-		})}
-      </ul>
-    `;
-	}
-	/**
-	* 노드의 미리보기를 렌더링합니다.
-	* @param node - JsonObject 또는 JsonArray
-	*/
-	renderPreview(node) {
-		return html`
-      <span part="preview" class="preview">
-        ${Array.isArray(node) ? node.length === 0 ? "[ ]" : `[ ${node.length} items ]` : Object.keys(node).length === 0 ? "{ }" : `{ ${Object.keys(node).length} properties }`}
-      </span>
-    `;
-	}
-	/** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
-	setState(value, parent = "") {
-		if (typeof value !== "object" || value === null) return {};
-		const state = {};
-		Object.entries(value).forEach(([key, item]) => {
-			const path = parent ? `${parent}.${key}` : key;
-			state[path] = this.expanded;
-			Object.assign(state, this.setState(item, path));
-		});
-		return state;
-	}
-	/** 노드 확장/축소 클릭 핸들러 */
-	handlePropertyKeyClick(path) {
-		const isExpanded = this.state[path] ?? false;
-		this.state = {
-			...this.state,
-			[path]: !isExpanded
-		};
-	}
-};
-__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UJsonBlock.prototype, "expanded", void 0);
-__decorate([property({
-	type: Object,
-	converter: jsonAttrConverter()
-}), __decorateMetadata("design:type", Object)], UJsonBlock.prototype, "value", void 0);
-__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Record !== "undefined" && Record) === "function" ? _ref : Object)], UJsonBlock.prototype, "state", void 0);
-UJsonBlock = __decorate([customElement("u-json-block")], UJsonBlock);
-//#endregion
-export { UJsonBlock };

package/dist/components/blocks/UJsonBlock.styles.js

@@ -1,115 +0,0 @@
-import { css } from "lit";
-//#region src/components/blocks/UJsonBlock.styles.ts
-var styles = css`
-  :host {
-    --indent-size: 2em;
-    
-    --json-property-color: #0451a5;
-    --json-string-color: #a31515;
-    --json-number-color: #098658;
-    --json-boolean-color: #0000ff;
-    --json-null-color: #0000ff;
-    --json-preview-color: #999999;
-    --json-arrow-color: #666968;
-    --json-guide-color: #c0c0c0;
-  }
-  :host-context([theme="dark"]) {
-    --json-property-color: #9cdcfe;
-    --json-string-color: #ce9178;
-    --json-number-color: #b5cea8;
-    --json-boolean-color: #569cd6;
-    --json-null-color: #569CD6;
-    --json-preview-color: #999999;
-    --json-arrow-color: #d4d4d4;
-    --json-guide-color: #3c3c3c;
-  }
-
-  :host {
-    display: block;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: 1.5;
-  }
-
-  .key {
-    color: var(--json-property-color);
-    display: inline-flex;
-    align-items: center;
-  }
-  .key[collapsable] {
-    cursor: pointer;
-    user-select: none;
-  }
-  .key[collapsable]::before {
-    display: inline-flex;
-    font-size: 0.5em;
-    content: '▶';
-    align-items: center;
-    justify-content: center;
-
-    transform: rotate(90deg);
-    transition: transform 0.2s ease-out;
-    margin-right: 0.5em;
-
-    color: var(--json-arrow-color);
-  }
-  .key[collapsable][collapsed]::before {
-    transform: rotate(0);
-  }
-
-  .preview {
-    color: var(--json-preview-color);
-    margin-left: 0.5em;
-  }
-
-  .string {
-    color: var(--json-string-color);
-  }
-
-  .number {
-    color: var(--json-number-color);
-  }
-
-  .boolean {
-    color: var(--json-boolean-color);
-  }
-
-  .null {
-    color: var(--json-null-color);
-  }
-
-  /* object styles */
-  ul {
-    position: relative;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    clear: both;
-  }
-
-  /* property styles */
-  li {
-    position: relative;
-    list-style: none;
-    outline: none;
-  }
-
-  /* nested property styles */
-  li ul > li {
-    position: relative;
-    margin-left: var(--indent-size);
-    padding-left: 0px;
-  }
-
-  /* guide line styles */
-  ul ul::before {
-    content: '';
-    border-left: 1px solid var(--json-guide-color);
-    position: absolute;
-    left: calc(1.5em / 2 - 1px);
-    top: 0.2em;
-    bottom: 0.2em;
-  }
-`;
-//#endregion
-export { styles };

package/dist/components/blocks/UThinkBlock.d.ts

@@ -1,35 +0,0 @@
-import { PropertyValues } from 'lit';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/**
- * 추론 내용을 표시하는 블록입니다.
- * 로딩 중일 때는 "Thinking..." 메시지를 표시하고, 내용 펼치기/접기 기능을 제공합니다.
- */
-export declare class UThinkBlock extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 컨텐츠가 로딩 중인지 여부 */
-    loading: boolean;
-    /** 컨텐츠가 접혀있는지 여부 */
-    collapsed: boolean;
-    /** 컨텐츠 업데이트 시 자동으로 스크롤할지 여부 */
-    autoScroll: boolean;
-    /** 추론 컨텐츠의 내용 */
-    value?: string;
-    bodyEl: HTMLDivElement;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 컨텐츠 스크롤을 맨 아래로 이동
-     * @returns 스크롤 작업이 시작되었는지 여부 (bodyEl이 존재할 때만 true)
-     */
-    scrollToBottom(): boolean;
-    /**
-     * 사용자의 스크롤 인터럽트 처리
-     * 휠이나 터치 입력 시 자동 스크롤 중지
-     */
-    private handleUserInterrupt;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-think-block": UThinkBlock;
-    }
-}