@iyulab/chat-components 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 0.4.0 (2026-03-03)
+
+### Breaking Changes
+- `UMessage`의 `items` prop이 제거됨 — slot 방식으로 블록 컴포넌트를 직접 삽입해야 함
+- `UMessage`의 `BaseElement` 의존성이 `UElement`로 변경됨
+
+### Added
+
+#### Widget System
+- `UWidget` - 위젯 컨테이너 컴포넌트 (widget-json 블록 기반 동적 렌더링)
+- `UImagesWidget` - 이미지 갤러리 위젯 (스크롤 가능한 이미지 목록 표시)
+- `UVideoWidget` - 비디오 임베드 위젯 (YouTube, Vimeo, 직접 URL 지원)
+- `UMapWidget` - OpenStreetMap 기반 지도 위젯 (위경도 좌표 및 마커 표시)
+- `UChartWidget` - Chart.js 기반 차트 위젯 (bar, line, pie, doughnut 등 8가지 타입, PNG/JSON 다운로드, 전체화면, 다크모드 테마 자동 감지)
+
+#### Action System
+- `UQuestionAction` - 클릭 가능한 선택지를 제공하는 질문 액션 컴포넌트 (action-json 블록 기반)
+
+#### New Block Types
+- `UFilesBlock` - 파일 첨부 목록 표시 블록 (파일명, 크기, MIME 타입, 다운로드 URL 지원, 삭제 버튼 옵션)
+- `UTableBlock` - 테이블 표시 블록
+
+#### New Types
+- `JsonSchema` - LLM용 JSON Schema 타입 (`BooleanJsonSchema`, `StringJsonSchema`, `NumberJsonSchema`, `ArrayJsonSchema`, `ObjectJsonSchema`)
+- `ActionDefinition`, `ActionSchema`, `PresetAction` - 액션 정의 및 프리셋 타입
+- `WidgetDefinition`, `PresetWidget` - 위젯 정의 및 프리셋 타입 (`Images`, `Video`, `Map`, `Chart`)
+- `FilesBlockItem`, `FileItem` - 파일 블록 타입
+- `MessageFit` - 메시지 너비 설정 타입 (`full` | `auto`)
+
+#### New Utilities
+- `ActionPromptBuilder` - LLM 액션 프롬프트 자동 생성 유틸리티
+- `WidgetPromptBuilder` - LLM 위젯 프롬프트 자동 생성 유틸리티
+
+### Changed
+- `UMessage`: `BaseElement` → `UElement` 로 변경, `items` prop 제거 및 slot 기반 렌더링으로 전환, `fit` 속성(`MessageFit`) 추가
+- `UMarkedBlock`: 마크다운 렌더링 로직 전면 개선
+- `UPrompt`: 스타일 개선
+
+### Removed
+- `UDotLoader` 컴포넌트 제거
+
+---
+
 ## 0.3.0 (2026-01-22)
 
 - Renamed `TextBlockReference` to `ReferenceCitation` and field `name` to `label`

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,3 @@
+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.d.ts

@@ -0,0 +1,18 @@
+import { nothing } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 질문/선택지 제안 블록 컴포넌트
+ *
+ * LLM이 질문 텍스트(`question`)와 클릭 선택지(`choices`)를 제시하고,
+ * `input: true`일 때는 사용자가 직접 텍스트를 입력할 수도 있습니다.
+ */
+export declare class UQuestionAction extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    /** LLM이 제시하는 질문 텍스트 */
+    question?: string;
+    /** 클릭 가능한 선택지 목록 */
+    choices: string[];
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    private handleChoiceClick;
+}

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

@@ -0,0 +1,58 @@
+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

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

package/dist/components/actions/UQuestionAction.js

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

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

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin: 0.75em 0;
+  }
+
+  .question {
+    margin: 0 0 0.25em;
+    font-size: 0.9em;
+    color: var(--u-txt-color-weak);
+    line-height: 1.5;
+  }
+
+  .choices {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4em;
+  }
+
+  u-button {
+    display: block;
+    width: fit-content;
+    padding: 0.5em 0.75em;
+    font-size: 0.875em;
+    justify-content: flex-start;
+    line-height: 1.4;
+    border-radius: 10px;
+    box-shadow: 0 1px 2px var(--u-shadow-color-weaker);
+    transition: all 0.15s ease;
+  }
+  u-button:hover {
+    background-color: var(--u-blue-0);
+    border-color: var(--u-blue-400);
+    transform: translateY(-1px);
+  }
+  u-button:active {
+    transform: translateY(0);
+  }
+`;
+
+export { styles };

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

@@ -1,13 +1,15 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 코드 블록을 렌더링하는 컴포넌트입니다.
  * 언어와 코드를 받아 syntax highlighting을 적용합니다.
  */
-export declare class UCodeBlock extends BaseElement {
+export declare class UCodeBlock extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 클립보드 복사 상태를 나타내는 플래그입니다. */
     isCopied: boolean;
+    /** 코드 블록이 로딩 중인지 여부를 나타냅니다. */
+    loading: boolean;
     /** 코드 블록의 헤더를 숨길지 여부를 지정합니다. */
     headless: boolean;
     /** 코드 언어를 지정합니다. */

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

@@ -2,7 +2,9 @@ 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 { 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';
 
@@ -15,10 +17,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UCodeBlock extends BaseElement {
+class UCodeBlock extends UElement {
   constructor() {
     super(...arguments);
     this.isCopied = false;
+    this.loading = false;
     this.headless = false;
     this.lang = "plaintext";
     /**
@@ -36,6 +39,8 @@ class UCodeBlock extends BaseElement {
   }
   static {
     this.dependencies = {
+      "u-icon": UIcon,
+      "u-spinner": USpinner,
       "u-copy-button": UCopyButton
     };
   }
@@ -44,9 +49,13 @@ class UCodeBlock extends BaseElement {
     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>
@@ -63,6 +72,9 @@ class UCodeBlock extends BaseElement {
 __decorateClass([
   state()
 ], UCodeBlock.prototype, "isCopied");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCodeBlock.prototype, "loading");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UCodeBlock.prototype, "headless");

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

@@ -51,9 +51,15 @@ const styles = css`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    gap: 12px;
     margin-bottom: 12px;
     user-select: none;
   }
+  .header .status {
+    display: inline-flex;
+    font-size: 12px;
+    color: var(--u-txt-color-strong);
+  }
   .header .lang {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;

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

@@ -0,0 +1,22 @@
+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;
+}

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

@@ -0,0 +1,192 @@
+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 { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UProgressBar } from '@iyulab/components/dist/components/progress-bar/UProgressBar.component.js';
+import { styles } from './UFilesBlock.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 UFilesBlock extends UElement {
+  constructor() {
+    super(...arguments);
+    this.files = [];
+    this.removable = false;
+    this.handleDownloadClick = (e) => {
+      e.stopPropagation();
+      const index = e.currentTarget.dataset.index;
+      if (index == null) return;
+      const file = this.files.at(Number(index));
+      if (!file?.downloadUrl) return;
+      const a = document.createElement("a");
+      a.href = file.downloadUrl;
+      a.download = file.name;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    };
+    this.handleRemoveClick = (e) => {
+      e.stopPropagation();
+      const index = e.currentTarget.dataset.index;
+      if (index == null) return;
+      const file = this.files.at(Number(index));
+      if (!file) return;
+      this.emit("u-remove", { index, file });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-progress-bar": UProgressBar
+    };
+  }
+  render() {
+    if (!this.files?.length) return nothing;
+    return repeat(this.files, (_, i) => i, (f, i) => {
+      const phase = f.upload?.phase ?? "done";
+      const isUploading = phase === "uploading";
+      const isError = phase === "error";
+      return html`
+        <div class="item" phase=${phase}>
+          <div class="thumbnail">
+            <u-icon lib="bootstrap" name=${this.resolveIcon(f.type)}></u-icon>
+            <div class="thumbnail-overlay" ?hidden=${!isUploading}>
+              <u-icon lib="bootstrap" name="cloud-arrow-up"></u-icon>
+            </div>
+            <div class="thumbnail-overlay" ?hidden=${!isError}>
+              <u-icon lib="bootstrap" name="exclamation-circle-fill"></u-icon>
+            </div>
+            <u-button class="download-btn"
+              ?hidden=${!f.downloadUrl || isUploading}
+              data-index=${i}
+              title="Download"
+              variant="borderless"
+              @click=${this.handleDownloadClick}>
+              <u-icon lib="bootstrap" name="download"></u-icon>
+            </u-button>
+          </div>
+          <div class="info">
+            <div class="name" title=${f.name}>${f.name}</div>
+            <div class="meta">
+              <span class="type" ?hidden=${!f.type || isError}>
+                ${this.resolveExt(f.name, f.type)}
+              </span>
+              <span class="size" ?hidden=${f.size == null || isError}>
+                ${this.formatSize(f.size || 0)}
+              </span>
+              <span class="error-msg" ?hidden=${!isError}>
+                <u-icon lib="bootstrap" name="exclamation-triangle"></u-icon>
+                ${f.upload?.message ?? "File upload failed"}
+              </span>
+            </div>
+          </div>
+          <u-progress-bar class="upload-progress"
+            ?hidden=${!isUploading}
+            ?indeterminate=${f.upload?.progress == null}
+            value=${f.upload?.progress ?? 0}
+          ></u-progress-bar>
+          <u-button class="remove-btn"
+            ?hidden=${!this.removable}
+            data-index=${i}
+            title="Remove"
+            variant="borderless"
+            @click=${this.handleRemoveClick}>
+            <u-icon lib="bootstrap" name="x-lg"></u-icon>
+          </u-button>
+        </div>
+      `;
+    });
+  }
+  /** MIME 타입 → Bootstrap Icon 이름 */
+  resolveIcon(mimeType) {
+    if (!mimeType) return "file-earmark";
+    if (mimeType.startsWith("image/")) return "file-earmark-image";
+    if (mimeType.startsWith("video/")) return "file-earmark-play";
+    if (mimeType.startsWith("audio/")) return "file-earmark-music";
+    if (mimeType === "application/pdf") return "file-earmark-pdf";
+    const codeTypes = [
+      "application/json",
+      "application/javascript",
+      "application/typescript",
+      "application/xml",
+      "text/html",
+      "text/css",
+      "text/javascript",
+      "text/x-python",
+      "text/x-java-source"
+    ];
+    if (codeTypes.includes(mimeType) || mimeType.startsWith("text/x-"))
+      return "file-earmark-code";
+    if ([
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "text/csv"
+    ].includes(mimeType))
+      return "file-earmark-spreadsheet";
+    if ([
+      "application/zip",
+      "application/x-zip-compressed",
+      "application/x-tar",
+      "application/x-rar-compressed",
+      "application/gzip",
+      "application/x-7z-compressed"
+    ].includes(mimeType))
+      return "file-earmark-zip";
+    if (mimeType.startsWith("text/")) return "file-earmark-text";
+    return "file-earmark";
+  }
+  /** 파일명 또는 MIME 타입에서 확장자를 추출합니다. */
+  resolveExt(name, mimeType) {
+    if (name) {
+      const dot = name.lastIndexOf(".");
+      if (dot !== -1 && dot < name.length - 1)
+        return name.slice(dot + 1).toLowerCase();
+    }
+    const map = {
+      "image/jpeg": "jpg",
+      "image/png": "png",
+      "image/gif": "gif",
+      "image/webp": "webp",
+      "image/svg+xml": "svg",
+      "application/pdf": "pdf",
+      "text/plain": "txt",
+      "text/csv": "csv",
+      "application/json": "json",
+      "application/zip": "zip"
+    };
+    return mimeType ? map[mimeType] ?? mimeType.split("/").pop() ?? "" : "";
+  }
+  /** bytes → 읽기 좋은 크기 문자열 */
+  formatSize(bytes) {
+    if (bytes < 1024)
+      return `${bytes} B`;
+    if (bytes < 1024 ** 2)
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 ** 3)
+      return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+    return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], UFilesBlock.prototype, "files");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UFilesBlock.prototype, "removable");
+
+export { UFilesBlock };

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

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

package/dist/components/blocks/UFilesBlock.js

@@ -0,0 +1,5 @@
+import { UFilesBlock } from './UFilesBlock.component.js';
+
+UFilesBlock.define("u-files-block");
+
+export { UFilesBlock };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;