@iyulab/chat-components 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,7 +1,30 @@
 # Changelog
 
+## 0.2.0 (2026-01-16)
+
+### Added
+- New components: `UPrompt`, `UDotLoader` for enhanced chat UI
+- Reference components: `URefCard`, `URefCardGroup`, `URefTag` for displaying references
+- New button components: `UReportButton`, `URetryButton`, `UShareButton`, `UVoteButton`
+- `UCancelEvent` to replace `UStopEvent`
+- Type definitions: `BlockItem`, `BlockReference`, `JsonNode`
+- Utility converters for data transformation
+- Test utilities: generator.ts, messages.ts
+
+### Changed
+- Renamed UJsonViewer to UJsonBlock for consistency
+- Enhanced styling and functionality across multiple block components
+- Updated button components styling and behavior (UAttachButton, UCopyButton)
+- Improved UMessage component structure and styling
+
+### Removed
+- Deprecated buttons: USendButton, UThinkButton
+- UStopEvent (replaced by UCancelEvent)
+- UMessage.types.ts (types moved to dedicated types directory)
+- Internal date-helpers utility
+
 ## 0.1.1 (2025-12-19)
-Update package.json exports field with correct paths
+- Update package.json exports field with correct paths
 
 ## 0.1.0 (2025-12-19)
 - Initial library version release

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

@@ -1,4 +1,3 @@
-import { nothing } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 /**
  * 코드 블록을 렌더링하는 컴포넌트입니다.
@@ -7,18 +6,18 @@ import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 export declare class UCodeBlock extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
+    isCopied: boolean;
     /** 코드 블록의 헤더를 숨길지 여부를 지정합니다. */
     headless: boolean;
     /** 코드 언어를 지정합니다. */
-    language: string;
+    lang: string;
     /** 표시할 코드 내용입니다. */
     value?: string;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    render(): import('lit-html').TemplateResult<1>;
     /**
-     * 코드에 구문 강조를 적용합니다.
-     * @param value 코드 문자열
-     * @param lang 코드 언어
-     * @returns 구문 강조가 적용된 HTML 문자열
+     * slot에 할당된 코드를 value로 설정합니다.
+     * 이 기능을 통해 HTML 내에 직접 코드를 작성할 수 있습니다.
      */
-    private parse;
+    private handleSlotChange;
 }

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

@@ -1,5 +1,5 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
+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';
@@ -18,8 +18,18 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UCodeBlock extends BaseElement {
   constructor() {
     super(...arguments);
+    this.isCopied = false;
     this.headless = false;
-    this.language = "plaintext";
+    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];
@@ -30,34 +40,35 @@ class UCodeBlock extends BaseElement {
     };
   }
   render() {
-    if (!this.value) return nothing;
-    const lang = hljs.getLanguage(this.language) ? this.language : "plaintext";
+    const lang = hljs.getLanguage(this.lang) ? this.lang : "plaintext";
+    const value = this.value || "";
     return html`
       <div class="header" ?hidden=${this.headless}>
-        <span class="language">${lang}</span>
-        <u-copy-button mode="badge" .value="${this.value}"></u-copy-button>
+        <span class="lang">
+          ${lang}
+        </span>
+        <u-copy-button
+          .value=${value}
+        ></u-copy-button>
       </div>
-      ${unsafeHTML(`<pre class="hljs">${this.parse(this.value, lang)}</pre>`)}
-    `;
-  }
-  /**
-   * 코드에 구문 강조를 적용합니다.
-   * @param value 코드 문자열
-   * @param lang 코드 언어
-   * @returns 구문 강조가 적용된 HTML 문자열
-   */
-  parse(value, lang) {
-    return hljs.highlight(value, {
+
+      <pre class="hljs">${unsafeHTML(hljs.highlight(value, {
       language: lang
-    }).value;
+    }).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 })
-], UCodeBlock.prototype, "language");
+  property({ type: String, reflect: true })
+], UCodeBlock.prototype, "lang");
 __decorateClass([
   property({ type: String })
 ], UCodeBlock.prototype, "value");

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

@@ -39,10 +39,10 @@ const styles = css`
   :host {
     display: block;
     width: 100%;
+    padding: 8px 16px;
     border: 1px solid var(--u-border-color);
     border-radius: 8px;
     background-color: var(--u-neutral-100);
-    padding: 8px 16px;
   }
 
   .header {
@@ -51,28 +51,29 @@ const styles = css`
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
+    margin-bottom: 12px;
+    user-select: none;
+  }
+  .header .lang {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: 300;
     color: var(--u-txt-color-strong);
-    margin-bottom: 12px;
-    user-select: none;
   }
 
   /* highlight.js styles */
   .hljs {
     display: block;
-    overflow-x: auto;
     margin: 0;
     padding: 0;
     color: var(--hljs-text-color);
-    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
     font-size: 14px;
     line-height: 1.45;
     white-space: pre;
+    overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--u-scrollbar-color) transparent;
-    scrollbar-gutter: stable;
   }
 
   .hljs-doctag,

package/dist/components/{json-viewer/UJsonViewer.component.d.ts → blocks/UJsonBlock.component.d.ts}

@@ -1,10 +1,10 @@
 import { PropertyValues, TemplateResult } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { JsonNode } from './UJsonViewer.lib.js';
+import { JsonNode } from '../../types/JsonNode.js';
 /**
  * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
  */
-export declare class UJsonViewer extends BaseElement {
+export declare class UJsonBlock extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     state: Record<string, boolean>;
@@ -37,8 +37,9 @@ export declare class UJsonViewer extends BaseElement {
      * @param node - JsonObject 또는 JsonArray
      */
     private renderPreview;
-    /** 노드 확장/축소 클릭 핸들러 */
-    private toggle;
     /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
     private setState;
+    private isValueType;
+    /** 노드 확장/축소 클릭 핸들러 */
+    private handlePropertyKeyClick;
 }

package/dist/components/{json-viewer/UJsonViewer.component.js → blocks/UJsonBlock.component.js}

@@ -3,8 +3,8 @@ import { state, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { isValueType, getNodeName, jsonConverter } from './UJsonViewer.lib.js';
-import { styles } from './UJsonViewer.styles.js';
+import { jsonAttrConverter } from '../../utilities/converters.js';
+import { styles } from './UJsonBlock.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,12 +15,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UJsonViewer extends BaseElement {
+class UJsonBlock extends BaseElement {
   constructor() {
     super(...arguments);
     this.state = {};
     this.expanded = true;
     this.value = {};
+    this.isValueType = (value) => {
+      return value !== Object(value);
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -51,14 +54,14 @@ class UJsonViewer extends BaseElement {
    * @param parent - 부모 노드의 경로
    */
   renderNode(value, parent = "") {
-    return isValueType(value) ? this.renderValue(value) : this.renderObject(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 = getNodeName(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)}
@@ -75,7 +78,7 @@ class UJsonViewer extends BaseElement {
       <ul part="object" role="group">
         ${map(Object.entries(node), ([key, value]) => {
       const path = parent ? `${parent}.${key}` : key;
-      const isValue = isValueType(value);
+      const isValue = this.isValueType(value);
       const isExpanded = this.state[path] ?? this.expanded;
       return html`
             <li part="property" role="treeitem"
@@ -85,7 +88,7 @@ class UJsonViewer extends BaseElement {
                     class="key"
                     ?collapsable="${!isValue}"
                     ?collapsed="${!isValue && !isExpanded}"
-                    @click=${!isValue ? () => this.toggle(path) : null}>
+                    @click=${!isValue ? () => this.handlePropertyKeyClick(path) : null}>
                 ${key}:
                 ${when(!isValue && !isExpanded, () => this.renderPreview(value))}
               </span>
@@ -107,11 +110,6 @@ class UJsonViewer extends BaseElement {
       </span>
     `;
   }
-  /** 노드 확장/축소 클릭 핸들러 */
-  toggle(path) {
-    const isExpanded = this.state[path] ?? false;
-    this.state = { ...this.state, [path]: !isExpanded };
-  }
   /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
   setState(value, parent = "") {
     if (typeof value !== "object" || value === null) return {};
@@ -123,15 +121,20 @@ class UJsonViewer extends BaseElement {
     });
     return state2;
   }
+  /** 노드 확장/축소 클릭 핸들러 */
+  handlePropertyKeyClick(path) {
+    const isExpanded = this.state[path] ?? false;
+    this.state = { ...this.state, [path]: !isExpanded };
+  }
 }
 __decorateClass([
   state()
-], UJsonViewer.prototype, "state");
+], UJsonBlock.prototype, "state");
 __decorateClass([
   property({ type: Boolean })
-], UJsonViewer.prototype, "expanded");
+], UJsonBlock.prototype, "expanded");
 __decorateClass([
-  property({ type: Object, converter: jsonConverter })
-], UJsonViewer.prototype, "value");
+  property({ type: Object, converter: jsonAttrConverter })
+], UJsonBlock.prototype, "value");
 
-export { UJsonViewer };
+export { UJsonBlock };

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

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

package/dist/components/blocks/UJsonBlock.js

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

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

@@ -1,7 +1,12 @@
-import { nothing } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { TextBlockReference } from '../../types/BlockReference';
 /**
  * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
+ *
+ * 주의:
+ * - refs로 삽입되는 커스텀 태그(u-ref-*)는 속성/내용을 모두 escape하여 XSS를 방지합니다.
+ * - 코드블록 내부는 HTML을 전부 텍스트로 취급(escape)하며, refs 태그는 통째 제거합니다.
+ * - 인덱스 기반 삽입(ref.endIndex)이 깨지지 않도록 "normalize(제로폭 제거)"를 insert 전에 1회 수행합니다.
  */
 export declare class UMarkedBlock extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
@@ -9,16 +14,32 @@ export declare class UMarkedBlock extends BaseElement {
     private parser;
     /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
     value?: string;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    /** 컨텐츠의 인용 출처들입니다. */
+    refs?: TextBlockReference[];
+    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
     /**
-     * 마크다운 문자열을 HTML로 변환합니다.
-     * @param value 변환할 마크다운 문자열
-     * @returns 변환된 HTML 문자열
+     * 인용/출처 참조객체가 있을때 문자열에 출처태그를 삽입합니다.
+     * @param value 삽입할 마크다운 문자열
+     * @return 삽입된 마크다운 문자열
      */
-    private parse;
+    private insert;
     /**
-     * HTML 속성에 안전하게 삽입하기 위해 특수문자를 이스케이프합니다.
-     * @param value 원본 문자열
+     * 참조 카드 엘리먼트를 안전하게 빌드합니다.
      */
-    private sanitizeCode;
+    private buildCard;
+    /**
+     * Zero Width Space, LTR/RTL marks, BOM 등 특수 제어 문자를 제거합니다.
+     * (ref.endIndex 기준을 흔들지 않게 insert 전에 1회 수행)
+     */
+    private normalizeText;
+    /**
+     * 코드블록 내부 텍스트를 안전하게 처리합니다.
+     * - u-ref-tag는 통째로 제거(코드블록 안에서 UI 태그가 살아남는 것 방지)
+     * - 나머지는 전부 HTML escape
+     */
+    private sanitizeText;
+    /**
+     * HTML 텍스트 노드로 안전하게 삽입하기 위해 escape 합니다.
+     */
+    private escapeHTML;
 }

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

@@ -1,12 +1,14 @@
-import { nothing, html } from 'lit';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Marked } from 'marked';
-import markedAlert from 'marked-alert';
-import markedFootnote from 'marked-footnote';
 import markedKatex from 'marked-katex-extension';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { UCodeBlock } from './UCodeBlock.component.js';
+import { URefTag } from '../references/URefTag.component.js';
+import { URefCard } from '../references/URefCard.component.js';
+import { URefCardGroup } from '../references/URefCardGroup.component.js';
 import { styles } from './UMarkedBlock.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -23,58 +25,105 @@ class UMarkedBlock extends BaseElement {
     super(...arguments);
     this.parser = new Marked({
       pedantic: false,
-      // 엄격한 마크다운 규격 준수하지 않음 (markdown.pl을 따르지 않음)
       gfm: true,
-      // GitHub Flavored Markdown 사용
       breaks: true,
-      // 단순 줄바꿈 또한 <br> 태그로 변환
       silent: true,
-      // 파싱 오류 발생 시 예외를 발생시키지 않고 메시지를 출력
       renderer: {
         code: ({ text, lang }) => {
           lang ||= "plaintext";
-          text = this.sanitizeCode(text);
-          return `<u-code-block language="${lang}" value="${text}"></u-code-block>`;
+          const safeLang = this.escapeHTML(lang);
+          const safeText = this.sanitizeText(text);
+          return `<u-code-block lang="${safeLang}">${safeText}</u-code-block>`;
         }
       }
-    }).use(markedAlert()).use(markedFootnote()).use(markedKatex({ output: "mathml" }));
+    }).use(markedKatex({ output: "mathml" }));
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-code-block": UCodeBlock
+      "u-tooltip": UTooltip,
+      "u-code-block": UCodeBlock,
+      "u-ref-tag": URefTag,
+      "u-ref-card": URefCard,
+      "u-ref-card-group": URefCardGroup
     };
   }
   render() {
     if (!this.value) return nothing;
-    return html`
-      <div class="markdown-body">
-        ${unsafeHTML(this.parse(this.value))}
-      </div>
-    `;
+    let value = this.normalizeText(this.value);
+    if (this.refs && this.refs.length > 0) {
+      value = this.insert(value, this.refs);
+    }
+    const html = this.parser.parse(value, { async: false });
+    return unsafeHTML(html);
   }
   /**
-   * 마크다운 문자열을 HTML로 변환합니다.
-   * @param value 변환할 마크다운 문자열
-   * @returns 변환된 HTML 문자열
+   * 인용/출처 참조객체가 있을때 문자열에 출처태그를 삽입합니다.
+   * @param value 삽입할 마크다운 문자열
+   * @return 삽입된 마크다운 문자열
    */
-  parse(value) {
-    value = value.replace(/\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF/g, "");
-    value = this.parser.parse(value, { async: false });
+  insert(value, refs) {
+    const reversed = [...refs].sort((a, b) => b.endIndex - a.endIndex);
+    reversed.forEach((ref) => {
+      const sources = ref.sources ?? [];
+      const firstSource = sources.at(0);
+      const tagName = this.escapeHTML(ref.name ?? "");
+      const tagLink = this.escapeHTML(firstSource?.url ?? "#");
+      let tooltip = "";
+      if (firstSource && sources.length === 1) {
+        tooltip = this.buildCard(firstSource, true);
+      }
+      if (sources.length > 1) {
+        const cards = sources.map((s) => this.buildCard(s, false)).join("");
+        tooltip = `<u-ref-card-group slot="tooltip">${cards}</u-ref-card-group>`;
+      }
+      const tag = `<u-ref-tag href="${tagLink}" title="${tagName}">${tagName}${tooltip}</u-ref-tag>`;
+      value = value.slice(0, ref.endIndex) + tag + value.slice(ref.endIndex);
+    });
     return value;
   }
   /**
-   * HTML 속성에 안전하게 삽입하기 위해 특수문자를 이스케이프합니다.
-   * @param value 원본 문자열
+   * 참조 카드 엘리먼트를 안전하게 빌드합니다.
+   */
+  buildCard(source, slot) {
+    const type = this.escapeHTML(source.type ?? "");
+    const href = this.escapeHTML(source.url ?? "#");
+    const heading = this.escapeHTML(source.title ?? "");
+    const tags = this.escapeHTML((source.tags ?? []).join(","));
+    const snippet = this.escapeHTML(source.snippet ?? "");
+    const slotAttr = slot ? ` slot="tooltip"` : "";
+    return `<u-ref-card${slotAttr} type="${type}" href="${href}" heading="${heading}" tags="${tags}">${snippet}</u-ref-card>`;
+  }
+  /**
+   * Zero Width Space, LTR/RTL marks, BOM 등 특수 제어 문자를 제거합니다.
+   * (ref.endIndex 기준을 흔들지 않게 insert 전에 1회 수행)
+   */
+  normalizeText(value) {
+    return value.replace(/\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF/g, "");
+  }
+  /**
+   * 코드블록 내부 텍스트를 안전하게 처리합니다.
+   * - u-ref-tag는 통째로 제거(코드블록 안에서 UI 태그가 살아남는 것 방지)
+   * - 나머지는 전부 HTML escape
+   */
+  sanitizeText(value) {
+    value = value.replace(/<u-ref-tag\b[^>]*>[\s\S]*?<\/u-ref-tag>/gi, "");
+    return this.escapeHTML(value);
+  }
+  /**
+   * HTML 텍스트 노드로 안전하게 삽입하기 위해 escape 합니다.
    */
-  sanitizeCode(value) {
-    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  escapeHTML(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
 }
 __decorateClass([
   property({ type: String })
 ], UMarkedBlock.prototype, "value");
+__decorateClass([
+  property({ type: Array })
+], UMarkedBlock.prototype, "refs");
 
 export { UMarkedBlock };