@iyulab/chat-components 0.6.0 → 0.7.0

package/dist/react/UVideoBlock.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UVideoBlock as UVideoBlockElement } from '../components-extra/UVideoBlock.js';
+
+export const UVideoBlock = createComponent({
+  react: React,
+  tagName: 'u-video-block',
+  elementClass: UVideoBlockElement,
+  events: {},
+});

package/dist/react/index.d.ts

@@ -1,22 +1,15 @@
-export { UView, UViewProps } from './UView';
-export { UVideoView, UVideoViewProps } from './UVideoView';
-export { UMapView, UMapViewProps } from './UMapView';
-export { UImagesView, UImagesViewProps } from './UImagesView';
+export { UVideoBlock, UVideoBlockProps } from './UVideoBlock';
+export { UMapBlock, UMapBlockProps } from './UMapBlock';
+export { UImagesBlock, UImagesBlockProps } from './UImagesBlock';
 export { URefTag, URefTagProps } from './URefTag';
 export { URefCardGroup, URefCardGroupProps } from './URefCardGroup';
 export { URefCard, URefCardProps } from './URefCard';
 export { UPrompt, UPromptProps } from './UPrompt';
 export { UMessage, UMessageProps } from './UMessage';
-export { UQuestionIntent, UQuestionIntentProps } from './UQuestionIntent';
-export { UVoteButton, UVoteButtonProps } from './UVoteButton';
-export { UCopyButton, UCopyButtonProps } from './UCopyButton';
-export { UAttachButton, UAttachButtonProps } from './UAttachButton';
-export { UToolBlock, UToolBlockProps } from './UToolBlock';
-export { UThinkBlock, UThinkBlockProps } from './UThinkBlock';
 export { UTextBlock, UTextBlockProps } from './UTextBlock';
 export { UTableBlock, UTableBlockProps } from './UTableBlock';
 export { URefBlock, URefBlockProps } from './URefBlock';
 export { UMarkedBlock, UMarkedBlockProps } from './UMarkedBlock';
-export { UJsonBlock, UJsonBlockProps } from './UJsonBlock';
 export { UFileBlock, UFileBlockProps } from './UFileBlock';
+export { UElementBlock, UElementBlockProps } from './UElementBlock';
 export { UCodeBlock, UCodeBlockProps } from './UCodeBlock';

package/dist/react/index.js

@@ -1,22 +1,15 @@
-export { UView } from './UView.js';
-export { UVideoView } from './UVideoView.js';
-export { UMapView } from './UMapView.js';
-export { UImagesView } from './UImagesView.js';
+export { UVideoBlock } from './UVideoBlock.js';
+export { UMapBlock } from './UMapBlock.js';
+export { UImagesBlock } from './UImagesBlock.js';
 export { URefTag } from './URefTag.js';
 export { URefCardGroup } from './URefCardGroup.js';
 export { URefCard } from './URefCard.js';
 export { UPrompt } from './UPrompt.js';
 export { UMessage } from './UMessage.js';
-export { UQuestionIntent } from './UQuestionIntent.js';
-export { UVoteButton } from './UVoteButton.js';
-export { UCopyButton } from './UCopyButton.js';
-export { UAttachButton } from './UAttachButton.js';
-export { UToolBlock } from './UToolBlock.js';
-export { UThinkBlock } from './UThinkBlock.js';
 export { UTextBlock } from './UTextBlock.js';
 export { UTableBlock } from './UTableBlock.js';
 export { URefBlock } from './URefBlock.js';
 export { UMarkedBlock } from './UMarkedBlock.js';
-export { UJsonBlock } from './UJsonBlock.js';
 export { UFileBlock } from './UFileBlock.js';
+export { UElementBlock } from './UElementBlock.js';
 export { UCodeBlock } from './UCodeBlock.js';

package/dist/types/BlockItem.d.ts

@@ -1,13 +1,4 @@
 import { ReferenceSource, ReferenceCitation } from './References';
-import { JsonNode } from './JsonNode';
-/** LLM 추론 텍스트 블록입니다. */
-export interface ThinkingBlockItem {
-    type: "thinking";
-    /** 추론 중 로딩 상태 여부 */
-    loading?: boolean;
-    /** 추론 텍스트 내용 */
-    value?: string;
-}
 /** 일반 텍스트 블록입니다. */
 export interface TextBlockItem {
     type: "text";
@@ -25,8 +16,6 @@ export interface MarkdownBlockItem {
 /** 파일 하나의 데이터 구조입니다. */
 export interface FileBlockItem {
     type: "file";
-    /** 파일 상태 */
-    status?: "idle" | "uploading" | "error";
     /** 파일 이름 */
     name?: string;
     /** 파일 크기 (bytes) */
@@ -38,18 +27,6 @@ export interface FileBlockItem {
     /** 실제 파일 데이터 (선택적, 필요에 따라 사용) */
     data?: any;
 }
-/** 툴 사용 블록입니다. */
-export interface ToolBlockItem {
-    type: "tool";
-    /** 툴 사용 중 로딩 상태 여부 */
-    loading?: boolean;
-    /** 도구 블록 제목 */
-    title?: string;
-    /** 도구 블록 입력값(json) */
-    input?: JsonNode;
-    /** 도구 블록 출력값(json) */
-    output?: JsonNode;
-}
 /** 출처 정보 */
 export interface ReferenceBlockItem {
     type: "reference";
@@ -59,4 +36,4 @@ export interface ReferenceBlockItem {
 /**
  * 타입별 메시지 컨텐츠 아이템
  */
-export type BlockItem = (ThinkingBlockItem | TextBlockItem | MarkdownBlockItem | FileBlockItem | ToolBlockItem | ReferenceBlockItem);
+export type BlockItem = (TextBlockItem | MarkdownBlockItem | FileBlockItem | ReferenceBlockItem);

package/dist/types/{JsonSchema.d.ts → Schema.d.ts}

@@ -57,3 +57,16 @@ export interface ObjectJsonSchema extends BaseJsonSchema {
     additionalProperties?: boolean;
 }
 export type JsonSchema = BooleanJsonSchema | StringJsonSchema | NumberJsonSchema | ArrayJsonSchema | ObjectJsonSchema;
+/**
+ * Element(부가 렌더링 블록)를 정의하는 구조체
+ */
+export interface ElementSchema {
+    /** 등록할 커스텀 엘리먼트 태그명 */
+    tag: string;
+    /** LLM용 설명 */
+    description: string;
+    /** LLM용 속성 스키마 */
+    properties?: Record<string, JsonSchema>;
+    /** 필수 속성 목록 */
+    required?: string[];
+}

package/dist/utilities/HtmlBuilder.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 커스텀 엘리먼트 HTML 문자열을 생성하는 유틸리티입니다.
+ */
+export declare class HtmlBuilder {
+    /**
+     * 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+     *
+     * 속성 값 처리 규칙:
+     * - `null` / `undefined` → 해당 속성 생략
+     * - `false` (boolean)   → 해당 속성 생략
+     * - `true`  (boolean)   → 값 없이 키만 출력 (예: `disabled`)
+     * - `object`            → `JSON.stringify` 후 `escapeHtmlAttr`
+     * - `href` / `src` 키  → `escapeHtmlHref` 적용
+     * - 그 외 string       → `escapeHtmlAttr` 적용
+     *
+     * `content`는 이미 안전한 HTML 문자열이라고 가정합니다 (내부 escape 없음).
+     *
+     * @param tag     - 커스텀 엘리먼트 태그 이름 (예: `"u-ref-tag"`)
+     * @param attrs   - 속성 객체
+     * @param content - 내부 HTML 문자열 (기본값: `""`)
+     * @returns 생성된 HTML 문자열
+     *
+     * @example
+     * HtmlBuilder.build('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
+     * // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
+     */
+    static build(tag: string, attrs?: Record<string, string | boolean | object | null | undefined>, content?: string): string;
+}

package/dist/utilities/HtmlBuilder.js

@@ -0,0 +1,41 @@
+import { escapeHtmlAttr, escapeHtmlHref } from "./sanitizers.js";
+//#region src/utilities/HtmlBuilder.ts
+var URL_ATTR = /* @__PURE__ */ new Set(["href", "src"]);
+/**
+* 커스텀 엘리먼트 HTML 문자열을 생성하는 유틸리티입니다.
+*/
+var HtmlBuilder = class {
+	/**
+	* 지정한 태그, 속성, 내용으로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
+	*
+	* 속성 값 처리 규칙:
+	* - `null` / `undefined` → 해당 속성 생략
+	* - `false` (boolean)   → 해당 속성 생략
+	* - `true`  (boolean)   → 값 없이 키만 출력 (예: `disabled`)
+	* - `object`            → `JSON.stringify` 후 `escapeHtmlAttr`
+	* - `href` / `src` 키  → `escapeHtmlHref` 적용
+	* - 그 외 string       → `escapeHtmlAttr` 적용
+	*
+	* `content`는 이미 안전한 HTML 문자열이라고 가정합니다 (내부 escape 없음).
+	*
+	* @param tag     - 커스텀 엘리먼트 태그 이름 (예: `"u-ref-tag"`)
+	* @param attrs   - 속성 객체
+	* @param content - 내부 HTML 문자열 (기본값: `""`)
+	* @returns 생성된 HTML 문자열
+	*
+	* @example
+	* HtmlBuilder.build('u-ref-tag', { href: 'https://example.com', disabled: true }, 'Click');
+	* // → '<u-ref-tag href="https://example.com" disabled>Click</u-ref-tag>'
+	*/
+	static build(tag, attrs = {}, content = "") {
+		const attrStr = Object.entries(attrs).flatMap(([k, v]) => {
+			if (v === void 0 || v == null || v === false) return [];
+			if (v === true) return [k];
+			const raw = typeof v === "object" ? JSON.stringify(v) : String(v);
+			return [`${k}="${URL_ATTR.has(k) ? escapeHtmlHref(raw) : escapeHtmlAttr(raw)}"`];
+		}).join(" ");
+		return attrStr ? `<${tag} ${attrStr}>${content}</${tag}>` : `<${tag}>${content}</${tag}>`;
+	}
+};
+//#endregion
+export { HtmlBuilder };

package/dist/utilities/PromptBuilder.d.ts

@@ -0,0 +1,21 @@
+import { ElementSchema } from '../types/Schema.js';
+/**
+ * Element(부가 렌더링 블록) 등록, LLM 인스트럭션 빌드, HTML 렌더링을 통합 제공하는 유틸리티
+ */
+export declare class ElementPromptBuilder {
+    private static _instance;
+    private elements;
+    /**
+     * 싱글톤 인스턴스를 반환합니다. 최초 호출 시 인스턴스가 생성됩니다.
+     */
+    static get instance(): ElementPromptBuilder;
+    /**
+     * Element 정의를 등록합니다. 같은 태그가 이미 등록되어 있으면 에러를 던집니다.
+     * @throws {Error} 같은 태그가 이미 등록된 경우
+     */
+    add(schema: ElementSchema): ElementPromptBuilder;
+    /**
+     * 등록된 Element들에 대한 LLM 인스트럭션 문자열을 생성합니다.
+     */
+    build(): string;
+}

package/dist/utilities/PromptBuilder.js

@@ -0,0 +1,60 @@
+import element_prompt_md_default from "../_virtual/_glob-assets_raw/element-prompt.md.7047ffcc.js";
+//#region src/utilities/PromptBuilder.ts
+/**
+* Element(부가 렌더링 블록) 등록, LLM 인스트럭션 빌드, HTML 렌더링을 통합 제공하는 유틸리티
+*/
+var ElementPromptBuilder = class ElementPromptBuilder {
+	constructor() {
+		this.elements = /* @__PURE__ */ new Map();
+	}
+	/**
+	* 싱글톤 인스턴스를 반환합니다. 최초 호출 시 인스턴스가 생성됩니다.
+	*/
+	static get instance() {
+		if (!this._instance) this._instance = new ElementPromptBuilder();
+		return this._instance;
+	}
+	/**
+	* Element 정의를 등록합니다. 같은 태그가 이미 등록되어 있으면 에러를 던집니다.
+	* @throws {Error} 같은 태그가 이미 등록된 경우
+	*/
+	add(schema) {
+		if (this.elements.has(schema.tag)) throw new Error(`Element with tag "${schema.tag}" is already registered.`);
+		this.elements.set(schema.tag, schema);
+		return this;
+	}
+	/**
+	* 등록된 Element들에 대한 LLM 인스트럭션 문자열을 생성합니다.
+	*/
+	build() {
+		if (this.elements.size === 0) return "";
+		const docs = Array.from(this.elements.values()).map((def) => {
+			return [
+				`### ${def.tag}`,
+				"",
+				"**JSON Schema:**",
+				"```block-json",
+				JSON.stringify({
+					type: "object",
+					description: def.description,
+					properties: {
+						tag: {
+							type: "string",
+							enum: [def.tag]
+						},
+						properties: {
+							type: "object",
+							properties: def.properties || {},
+							required: def.required || []
+						}
+					},
+					required: ["tag"]
+				}, null, 2),
+				"```"
+			].join("\n");
+		}).join("\n\n---\n\n");
+		return element_prompt_md_default.replace("{{EXTRA_DOCS}}", docs);
+	}
+};
+//#endregion
+export { ElementPromptBuilder };

package/dist/utilities/icons.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utilities/icons.js

@@ -0,0 +1,52 @@
+import alert_triangle_fill_svg_default from "../_virtual/_glob-assets_raw/alert-triangle-fill.svg.4cfc4305.js";
+import arrows_sort_svg_default from "../_virtual/_glob-assets_raw/arrows-sort.svg.dda43a85.js";
+import code_svg_default from "../_virtual/_glob-assets_raw/code.svg.c69bc144.js";
+import download_svg_default from "../_virtual/_glob-assets_raw/download.svg.bce82177.js";
+import external_link_svg_default from "../_virtual/_glob-assets_raw/external-link.svg.a9f7f02d.js";
+import file_code_svg_default from "../_virtual/_glob-assets_raw/file-code.svg.0e706f93.js";
+import file_music_svg_default from "../_virtual/_glob-assets_raw/file-music.svg.b9970203.js";
+import file_spreadsheet_svg_default from "../_virtual/_glob-assets_raw/file-spreadsheet.svg.8c03bdfa.js";
+import file_text_svg_default from "../_virtual/_glob-assets_raw/file-text.svg.85bdd923.js";
+import file_type_pdf_svg_default from "../_virtual/_glob-assets_raw/file-type-pdf.svg.bc12db6d.js";
+import file_zip_svg_default from "../_virtual/_glob-assets_raw/file-zip.svg.76dde660.js";
+import file_svg_default from "../_virtual/_glob-assets_raw/file.svg.28f5d6f1.js";
+import photo_svg_default from "../_virtual/_glob-assets_raw/photo.svg.cc273cc1.js";
+import player_stop_fill_svg_default from "../_virtual/_glob-assets_raw/player-stop-fill.svg.5378b752.js";
+import send_svg_default from "../_virtual/_glob-assets_raw/send.svg.02326253.js";
+import sort_ascending_letters_svg_default from "../_virtual/_glob-assets_raw/sort-ascending-letters.svg.14a3df67.js";
+import sort_descending_letters_svg_default from "../_virtual/_glob-assets_raw/sort-descending-letters.svg.3e03647c.js";
+import video_svg_default from "../_virtual/_glob-assets_raw/video.svg.c183f03c.js";
+import world_svg_default from "../_virtual/_glob-assets_raw/world.svg.cd9903c8.js";
+import { IconRegistry } from "@iyulab/components/dist/utilities/icons.js";
+//#region src/utilities/icons.ts
+/**
+* vite의 `import.meta.glob`을 사용하여 chat-components 전용 SVG 아이콘을 빌드 시점에 번들링합니다.
+* 네트워크 요청 없이 즉시 조회 가능하며, 런타임 동안 불변입니다.
+*/
+var InternalChatIconBundle = new Map(Object.entries(/* #__PURE__ */ Object.assign({
+	"../assets/icons/alert-triangle-fill.svg": alert_triangle_fill_svg_default,
+	"../assets/icons/arrows-sort.svg": arrows_sort_svg_default,
+	"../assets/icons/code.svg": code_svg_default,
+	"../assets/icons/download.svg": download_svg_default,
+	"../assets/icons/external-link.svg": external_link_svg_default,
+	"../assets/icons/file-code.svg": file_code_svg_default,
+	"../assets/icons/file-music.svg": file_music_svg_default,
+	"../assets/icons/file-spreadsheet.svg": file_spreadsheet_svg_default,
+	"../assets/icons/file-text.svg": file_text_svg_default,
+	"../assets/icons/file-type-pdf.svg": file_type_pdf_svg_default,
+	"../assets/icons/file-zip.svg": file_zip_svg_default,
+	"../assets/icons/file.svg": file_svg_default,
+	"../assets/icons/photo.svg": photo_svg_default,
+	"../assets/icons/player-stop-fill.svg": player_stop_fill_svg_default,
+	"../assets/icons/send.svg": send_svg_default,
+	"../assets/icons/sort-ascending-letters.svg": sort_ascending_letters_svg_default,
+	"../assets/icons/sort-descending-letters.svg": sort_descending_letters_svg_default,
+	"../assets/icons/video.svg": video_svg_default,
+	"../assets/icons/world.svg": world_svg_default
+})).map(([path, module]) => {
+	return [path.split("/").pop()?.replace(".svg", "") || "", module];
+}).filter(([name]) => name !== ""));
+IconRegistry.register("internal-chat", (name) => {
+	return InternalChatIconBundle.get(name);
+});
+//#endregion

package/dist/utilities/sanitizers.d.ts

@@ -0,0 +1,35 @@
+/**
+ * HTML 출력 시 XSS 방지를 위한 escape 유틸
+ *
+ * 컨텍스트에 맞는 함수를 사용해야 합니다.
+ *
+ * - escapeHtmlText : HTML 텍스트 노드에 삽입할 때
+ * - escapeHtmlAttr : HTML attribute 값에 삽입할 때
+ * - escapeHtmlHref : href/src 같은 URL attribute에 삽입할 때
+ */
+/**
+ * Zero Width Space / LTR / RTL mark / BOM 등
+ * 화면에 표시되지 않는 유니코드 문자를 제거합니다.
+ */
+export declare function stripZeroWidth(value: string): string;
+/**
+ * HTML 텍스트 노드(context)에 삽입할 문자열을 escape합니다.
+ *
+ * 예:
+ *   <script> → &lt;script&gt;
+ */
+export declare function escapeHtmlText(value: string): string;
+/**
+ * HTML attribute 값(context)에 삽입할 문자열을 escape합니다.
+ *
+ * 예:
+ *   <div title="{value}">
+ */
+export declare function escapeHtmlAttr(value: string): string;
+/**
+ * href / src attribute용 문자열 처리
+ *
+ * 예:
+ *  <a href="{value}">
+ */
+export declare function escapeHtmlHref(value: string): string;

package/dist/utilities/sanitizers.js

@@ -0,0 +1,75 @@
+//#region src/utilities/sanitizers.ts
+/**
+* HTML 출력 시 XSS 방지를 위한 escape 유틸
+*
+* 컨텍스트에 맞는 함수를 사용해야 합니다.
+*
+* - escapeHtmlText : HTML 텍스트 노드에 삽입할 때
+* - escapeHtmlAttr : HTML attribute 값에 삽입할 때
+* - escapeHtmlHref : href/src 같은 URL attribute에 삽입할 때
+*/
+/**
+* Zero Width Space / LTR / RTL mark / BOM 등
+* 화면에 표시되지 않는 유니코드 문자를 제거합니다.
+*/
+function stripZeroWidth(value) {
+	const ZERO_WIDTH_REGEX = /[\u200B\u200C\u200D\u200E\u200F\uFEFF]/g;
+	return ZERO_WIDTH_REGEX.test(value) ? value.replace(ZERO_WIDTH_REGEX, "") : value;
+}
+/** HTML text context escape 대상 문자 */
+var HTML_TEXT_ESCAPE_REGEX = /[&<>"']/g;
+/** HTML text context escape용 문자 매핑 */
+var HTML_TEXT_ESCAPE_MAP = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+/**
+* HTML 텍스트 노드(context)에 삽입할 문자열을 escape합니다.
+*
+* 예:
+*   <script> → &lt;script&gt;
+*/
+function escapeHtmlText(value) {
+	return HTML_TEXT_ESCAPE_REGEX.test(value) ? value.replace(HTML_TEXT_ESCAPE_REGEX, (ch) => HTML_TEXT_ESCAPE_MAP[ch]) : value;
+}
+/** HTML attribute escape 대상 문자 */
+var HTML_ATTR_ESCAPE_REGEX = /[&<>"]/g;
+/** HTML attribute escape용 문자 매핑 */
+var HTML_ATTR_ESCAPE_MAP = {
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;"
+};
+/**
+* HTML attribute 값(context)에 삽입할 문자열을 escape합니다.
+* 
+* 예:
+*   <div title="{value}">
+*/
+function escapeHtmlAttr(value) {
+	return HTML_ATTR_ESCAPE_REGEX.test(value) ? value.replace(HTML_ATTR_ESCAPE_REGEX, (ch) => HTML_ATTR_ESCAPE_MAP[ch]) : value;
+}
+/** protocol 우회 공격 방지를 위한 공백/제어문자 제거 */
+var HREF_STRIP_CHARS_REGEX = /[\u0000-\u001F\u007F\s]+/g;
+/** href/src에서 차단해야 하는 위험 protocol */
+var HREF_UNSAFE_PROTOCOL_REGEX = /^(?:javascript|data|vbscript):/i;
+/**
+* href / src attribute용 문자열 처리
+*
+* 예:
+*  <a href="{value}">
+*/
+function escapeHtmlHref(value) {
+	let normalized = stripZeroWidth(value).trim();
+	if (HREF_STRIP_CHARS_REGEX.test(normalized)) normalized = normalized.replace(HREF_STRIP_CHARS_REGEX, "");
+	normalized = normalized.replace(/\\/g, "/");
+	if (normalized.startsWith("//")) return "#";
+	if (HREF_UNSAFE_PROTOCOL_REGEX.test(normalized)) return "#";
+	return escapeHtmlAttr(normalized);
+}
+//#endregion
+export { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -26,32 +26,27 @@
   ],
   "type": "module",
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./chart": {
-      "types": "./dist/chart.d.ts",
-      "import": "./dist/chart.js"
-    },
+    "./extra": "./dist/extra.js",
     "./dist/*": "./dist/*",
     "./react": "./dist/react/index.js",
     "./react/*": "./dist/react/*"
   },
   "scripts": {
-    "test": "vite",
+    "start": "vite",
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.6",
+    "@iyulab/components": "^1.5.0",
     "highlight.js": "^11.11.1",
-    "html2canvas": "^1.4.1",
-    "katex": "^0.16.0",
+    "katex": "^0.17.0",
     "lit": "^3.3.3",
-    "marked": "^18.0.3",
-    "marked-katex-extension": "^5.1.8"
+    "marked": "^18.0.5",
+    "marked-katex-extension": "^5.1.10"
   },
   "peerDependencies": {
     "@lit/react": ">=1.0.8",
@@ -71,16 +66,16 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@types/node": "^25.8.0",
+    "@types/node": "^26.1.0",
     "chart.js": "^4.5.1",
     "eslint": "^9.39.4",
     "eslint-plugin-lit": "^2.3.1",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
-    "openai": "^6.37.0",
+    "globals": "^17.7.0",
+    "openai": "^6.45.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0"
+    "typescript-eslint": "^8.63.0",
+    "vite": "^8.1.3",
+    "vite-plugin-dts": "^5.0.3"
   }
 }

package/skills/iyulab-chat-components/SKILL.md

@@ -1,10 +1,10 @@
 ---
 name: iyulab-chat-components
-description: LLM chat UI component library. Covers all u-* custom elements for building chat interfaces — message rendering, chat input, markdown/code blocks, file attachments, reference citations, and the Intent/View system. Use when working with @iyulab/chat-components package.
+description: LLM chat UI component library. Covers all u-* custom elements for building chat interfaces — message rendering, chat input, markdown/code/table/file blocks, reference citations, and the block-json Extra system (chart/images/map/video). Use when working with @iyulab/chat-components package.
 license: MIT
 metadata:
   author: iyulab
-  version: "0.5.2"
+  version: "0.7.0"
 ---
 
 # @iyulab/chat-components
@@ -43,21 +43,13 @@ import '@iyulab/chat-components/dist/components/prompt/UPrompt.js';
 
 ### Content Blocks
 
-- [`u-marked-block`](./references/components/marked-block.md) — Renders markdown to HTML. KaTeX math, code highlighting, citation insertion, view-json/intent-json handling
+- [`u-marked-block`](./references/components/marked-block.md) — Renders markdown to HTML. KaTeX math, code highlighting, citation insertion, `block-json` extra handling
 - [`u-code-block`](./references/components/code-block.md) — Highlight.js code block with language label and clipboard copy
 - [`u-text-block`](./references/components/text-block.md) — Plain text display or editable textarea
-- [`u-think-block`](./references/components/think-block.md) — LLM reasoning (thinking) block. Collapse/expand, auto-scroll
-- [`u-tool-block`](./references/components/tool-block.md) — Tool call input/output display. Collapse/expand
-- [`u-file-block`](./references/components/file-block.md) — File attachment card. Type icon, upload status, download, remove
+- [`u-file-block`](./references/components/file-block.md) — File attachment card. Type icon or image/video thumbnail, click-to-preview, remove
 - [`u-ref-block`](./references/components/ref-block.md) — Reference source group block. Collapse/expand, grid of ref cards
-- [`u-json-block`](./references/components/json-block.md) — Visualizes JSON data as a collapsible tree
 - [`u-table-block`](./references/components/table-block.md) — Markdown table renderer. Column sort, search filter, CSV/XLS download
-
-### Action Buttons
-
-- [`u-copy-button`](./references/components/copy-button.md) — Clipboard copy button; icon changes after copy
-- [`u-vote-button`](./references/components/vote-button.md) — Thumbs-up / thumbs-down vote button pair
-- [`u-attach-button`](./references/components/attach-button.md) — File picker button; fires `attach` event with selected files
+- [`u-element-block`](./references/components/element-block.md) — Generic dynamic custom-element renderer, used internally to render `block-json` extras
 
 ### Reference Components
 
@@ -65,43 +57,36 @@ import '@iyulab/chat-components/dist/components/prompt/UPrompt.js';
 - [`u-ref-card`](./references/components/ref-card.md) — Reference source card. web/document type, favicon, tags
 - [`u-ref-card-group`](./references/components/ref-card-group.md) — Paginated group of reference cards
 
-### Intent Components
-
-- [`u-question-intent`](./references/components/question-intent.md) — LLM-generated question with clickable choice buttons
+### Extra Components (optional, `@iyulab/chat-components/extra`)
 
-### View Components
+Not part of the core entrypoint — see [./references/extra-system.md](./references/extra-system.md) for setup.
 
-- [`u-images-view`](./references/components/images-view.md) — Image gallery (carousel + lightbox)
-- [`u-video-view`](./references/components/video-view.md) — YouTube / Vimeo / direct video file player
-- [`u-chart-view`](./references/components/chart-view.md) — Chart.js charts (bar, line, pie, etc.)
-- [`u-map-view`](./references/components/map-view.md) — OpenStreetMap embed
-- [`u-view`](./references/components/view.md) — Dynamic custom element renderer (runtime for view-json blocks)
+- [`u-images-block`](./references/components/images-block.md) — Image gallery (carousel + lightbox)
+- [`u-video-block`](./references/components/video-block.md) — YouTube / Vimeo / direct video file player
+- [`u-chart-block`](./references/components/chart-block.md) — Chart.js charts (bar, line, pie, etc.)
+- [`u-map-block`](./references/components/map-block.md) — OpenStreetMap embed
 
 ---
 
 ## Utilities
 
-- [`IntentPromptBuilder`](./references/utilities/intent-prompt-builder.md) — Build LLM system prompt instructions for intents and parse intent-json responses
-- [`ViewPromptBuilder`](./references/utilities/view-prompt-builder.md) — Build LLM system prompt instructions for views
+- [`ElementPromptBuilder`](./references/utilities/prompt-builder.md) — Build LLM system prompt instructions for `block-json` extras/elements
+- [`HtmlBuilder`](./references/utilities/html-builder.md) — Build custom-element HTML strings (used internally by `u-marked-block`)
 
 ---
 
 ## Types
 
-- [`BlockItem`](./references/types.md) — Union type for message content blocks (text, markdown, file, tool, reference, thinking)
+- [`BlockItem`](./references/types.md) — Union type for message content blocks (text, markdown, file, reference)
 - `ReferenceSource` / `ReferenceCitation` — Citation source and inline citation position types
-- `IntentDefinition` / `PresetIntent` — Intent definition and preset bit flags
-- `ViewDefinition` / `PresetView` — View definition and preset bit flags
+- `ElementSchema` / `JsonSchema` — Schema types for registering `block-json` extras/elements with `ElementPromptBuilder`
 
 ---
 
 ## Events
 
 | Event | Source | Detail Type | Description |
-|-------|--------|-------------|-------------|
-| `send` | `u-prompt` | `unknown` | Send button clicked or Enter pressed |
-| `stop` | `u-prompt` | `unknown` | Stop button clicked while loading |
-| `attach` | `u-attach-button` | `{ files: File[] }` | File selection completed |
-| `choice` | `u-question-intent` | `{ value: string }` | Choice button clicked |
-| `change` | `u-vote-button` | `Event` | Vote state changed |
+|-------|--------|-------------|--------------|
+| `send` | `u-prompt` | `SendEventDetail` (`{ value, files? }`) | Send button clicked or Enter pressed. Non-bubbling |
+| `stop` | `u-prompt` | `StopEventDetail` (`{}`) | Stop button clicked while loading. Non-bubbling |
 | `remove` | `u-file-block` | `RemoveEventDetail` | Remove button clicked |