@iyulab/chat-components 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.3.0 (2026-01-22)
+
+- Renamed `TextBlockReference` to `ReferenceCitation` and field `name` to `label`
+- Updated `url` field in `ReferenceSource` to be optiona
+- Added `URefBlock` component for displaying multiple reference sources
+- Enhanced `URefCard` and `URefTag` components with improved functionality
+
 ## 0.2.0 (2026-01-16)
 
 ### Added

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

@@ -1,5 +1,5 @@
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { TextBlockReference } from '../../types/BlockReference';
+import { ReferenceCitation } from '../../types/References.js';
 /**
  * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
  *
@@ -15,7 +15,7 @@ export declare class UMarkedBlock extends BaseElement {
     /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
     value?: string;
     /** 컨텐츠의 인용 출처들입니다. */
-    refs?: TextBlockReference[];
+    refs?: ReferenceCitation[];
     render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
     /**
      * 인용/출처 참조객체가 있을때 문자열에 출처태그를 삽입합니다.

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

@@ -69,8 +69,8 @@ class UMarkedBlock extends BaseElement {
     reversed.forEach((ref) => {
       const sources = ref.sources ?? [];
       const firstSource = sources.at(0);
-      const tagName = this.escapeHTML(ref.name ?? "");
-      const tagLink = this.escapeHTML(firstSource?.url ?? "#");
+      const tagName = this.escapeHTML(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
+      const tagLink = this.escapeHTML(firstSource?.url ?? "");
       let tooltip = "";
       if (firstSource && sources.length === 1) {
         tooltip = this.buildCard(firstSource, true);
@@ -88,8 +88,8 @@ class UMarkedBlock extends BaseElement {
    * 참조 카드 엘리먼트를 안전하게 빌드합니다.
    */
   buildCard(source, slot) {
-    const type = this.escapeHTML(source.type ?? "");
-    const href = this.escapeHTML(source.url ?? "#");
+    const type = this.escapeHTML(source.type || "web");
+    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 ?? "");

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

@@ -0,0 +1,17 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { ReferenceSource } from '../../types/References.js';
+/**
+ * 레퍼런스 정보를 블록 형태로 표시하는 컴포넌트입니다.
+ * 단일 또는 다중 레퍼런스 카드를 그리드 레이아웃으로 표시합니다.
+ */
+export declare class URefBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 접힘 상태 @default: true */
+    collapsed: boolean;
+    /** 블록 제목 */
+    heading?: string;
+    /** 출처 목록 */
+    sources?: ReferenceSource[];
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,74 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { URefCard } from '../references/URefCard.component.js';
+import { styles } from './URefBlock.styles.js';
+import { repeat } from 'lit/directives/repeat.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 URefBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.collapsed = true;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-ref-card": URefCard
+    };
+  }
+  render() {
+    return html`
+      <button class="header" @click=${() => this.collapsed = !this.collapsed}>
+        <u-icon
+          ?collapsed=${this.collapsed}
+          lib="internal" 
+          name="chevron-down"
+        ></u-icon>
+        <div class="title">
+          ${this.heading || "References"}
+        </div>
+        <div style="flex: 1;"></div>
+        <div class="count">
+          ${this.sources ? this.sources.length : 0}
+        </div>
+      </button>
+
+      <div class="body" ?collapsed=${this.collapsed}>
+        ${repeat(this.sources || [], (_, idx) => idx, (source) => {
+      return html`
+            <u-ref-card
+              .type=${source.type}
+              .href=${source.url}
+              .heading=${source.title}
+              .tags=${source.tags}
+            >
+              ${source.snippet || ""}
+            </u-ref-card>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], URefBlock.prototype, "collapsed");
+__decorateClass([
+  property({ type: String })
+], URefBlock.prototype, "heading");
+__decorateClass([
+  property({ type: Array })
+], URefBlock.prototype, "sources");
+
+export { URefBlock };

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

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

package/dist/components/blocks/URefBlock.js

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

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

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

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

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  /* 헤더 영역 */
+  .header {
+    all: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    color: var(--u-txt-color-strong);
+    user-select: none;
+    cursor: pointer;
+  }
+  .header:hover {
+    color: var(--u-txt-color-hover);
+  }
+  .header:focus-visible {
+    outline: 2px solid rgba(100, 150, 250, 0.6);
+    outline-offset: 2px;
+  }
+
+  u-icon {
+    color: inherit;
+    font-size: 1em;
+    transition: transform 0.2s ease-in-out;
+  }
+  u-icon[collapsed] {
+    transform: rotate(-90deg);
+  }
+
+  .title {
+    color: inherit;
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 600;
+    color: var(--u-text-color-weak);
+  }
+
+  .count {
+    color: inherit;
+    font-size: 0.75em;
+    font-weight: 400;
+    line-height: 2em;
+  }
+
+  /* 바디 영역 */
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    margin-top: 0.75em;
+    transition: all 0.3s ease-in-out;
+  }
+  .body[collapsed] {
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  .body u-ref-card {
+    width: 100%;
+  }
+`;
+
+export { styles };

package/dist/components/message/UMessage.component.js

@@ -6,6 +6,7 @@ import { UTextBlock } from '../blocks/UTextBlock.component.js';
 import { UMarkedBlock } from '../blocks/UMarkedBlock.component.js';
 import { UThinkBlock } from '../blocks/UThinkBlock.component.js';
 import { UToolBlock } from '../blocks/UToolBlock.component.js';
+import { URefBlock } from '../blocks/URefBlock.component.js';
 import { UDotLoader } from '../loaders/UDotLoader.component.js';
 import { styles } from './UMessage.styles.js';
 
@@ -34,6 +35,7 @@ class UMessage extends BaseElement {
       "u-marked-block": UMarkedBlock,
       "u-think-block": UThinkBlock,
       "u-tool-block": UToolBlock,
+      "u-ref-block": URefBlock,
       "u-dot-loader": UDotLoader
     };
   }
@@ -58,7 +60,11 @@ class UMessage extends BaseElement {
                 .heading=${item.title}
                 .input=${item.input}
                 .output=${item.output}
-              ></u-tool-block>` : nothing)}
+              ></u-tool-block>` : item.type === "reference" ? html`
+              <u-ref-block
+                .heading=${"References"}
+                .sources=${item.sources}
+              ></u-ref-block>` : nothing)}
         <u-dot-loader
           ?hidden=${!this.loading}
         ></u-dot-loader>

package/dist/components/references/URefCard.component.d.ts

@@ -9,14 +9,16 @@ export declare class URefCard extends BaseElement {
     /** 카드 타입 (web 또는 document) */
     type: 'web' | 'document';
     /** 외부 링크 URL */
-    href: string;
+    href?: string;
     /** 카드 타이틀 */
     heading?: string;
     /** 태그 목록 */
     tags?: string[];
     render(): import('lit-html').TemplateResult<1>;
+    /** 링크 클릭 핸들러 */
+    private handleAnchorClick;
     /** URL에서 Google의 파비콘 URL을 반환합니다. */
     private getFaviconUrl;
     /** URL에서 도메인 사이트 주소를 반환합니다. */
-    private getPageTitle;
+    private getDomainName;
 }

package/dist/components/references/URefCard.component.js

@@ -19,7 +19,6 @@ class URefCard extends BaseElement {
   constructor() {
     super(...arguments);
     this.type = "web";
-    this.href = "#";
   }
   static {
     this.styles = [super.styles, styles];
@@ -31,14 +30,15 @@ class URefCard extends BaseElement {
   }
   render() {
     return html`
-      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
         <div class="header">
           <img class="favicon" 
             src="${this.getFaviconUrl(this.href)}" 
             alt="favicon"
           />
           <div class="title" title="${ifDefined(this.heading)}">
-            ${this.heading || this.getPageTitle(this.href)}
+            ${this.heading || this.getDomainName(this.href)}
           </div>
 
           <div style="flex: 1;"></div>
@@ -62,8 +62,16 @@ class URefCard extends BaseElement {
       </a>
     `;
   }
+  /** 링크 클릭 핸들러 */
+  handleAnchorClick(e) {
+    if (!this.href) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
   /** URL에서 Google의 파비콘 URL을 반환합니다. */
   getFaviconUrl(url) {
+    if (!url) return `/favicon.ico`;
     try {
       const hostname = new URL(url).hostname;
       return `https://www.google.com/s2/favicons?sz=64&domain=${hostname}`;
@@ -72,11 +80,12 @@ class URefCard extends BaseElement {
     }
   }
   /** URL에서 도메인 사이트 주소를 반환합니다. */
-  getPageTitle(url) {
+  getDomainName(url) {
+    if (!url) return "";
     try {
       return new URL(url).hostname;
     } catch {
-      return "Unkown";
+      return "";
     }
   }
 }

package/dist/components/references/URefTag.component.d.ts

@@ -6,6 +6,8 @@ export declare class URefTag extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
     /** 인용 출처 소스 데이터 */
-    href: string;
+    href?: string;
     render(): import('lit-html').TemplateResult<1>;
+    /** 링크 클릭 핸들러 */
+    private handleAnchorClick;
 }

package/dist/components/references/URefTag.component.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
@@ -15,10 +16,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class URefTag extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.href = "#";
-  }
   static {
     this.styles = [super.styles, styles];
   }
@@ -30,7 +27,8 @@ class URefTag extends BaseElement {
   }
   render() {
     return html`
-      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
         <slot></slot>
       </a>
 
@@ -41,6 +39,13 @@ class URefTag extends BaseElement {
       </u-tooltip>
     `;
   }
+  /** 링크 클릭 핸들러 */
+  handleAnchorClick(e) {
+    if (!this.href) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
 }
 __decorateClass([
   property({ type: String })

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/blocks/UMarkedBlock.js';
 export * from './components/blocks/UTextBlock.js';
 export * from './components/blocks/UThinkBlock.js';
 export * from './components/blocks/UToolBlock.js';
+export * from './components/blocks/URefBlock.js';
 export * from './components/buttons/UAttachButton.js';
 export * from './components/buttons/UCopyButton.js';
 export * from './components/buttons/UVoteButton.js';
@@ -17,7 +18,7 @@ export * from './components/references/URefTag.js';
 export * from './components/references/URefCard.js';
 export * from './components/references/URefCardGroup.js';
 export type * from './types/BlockItem';
-export type * from './types/BlockReference';
 export type * from './types/JsonNode';
+export type * from './types/References';
 export type * from './events/UCancelEvent';
 export type * from './events/USubmitEvent';

package/dist/index.js

@@ -4,6 +4,7 @@ import './components/blocks/UMarkedBlock.js';
 import './components/blocks/UTextBlock.js';
 import './components/blocks/UThinkBlock.js';
 import './components/blocks/UToolBlock.js';
+import './components/blocks/URefBlock.js';
 import './components/buttons/UAttachButton.js';
 import './components/buttons/UCopyButton.js';
 import './components/buttons/UVoteButton.js';
@@ -16,21 +17,22 @@ import './components/prompt/UPrompt.js';
 import './components/references/URefTag.js';
 import './components/references/URefCard.js';
 import './components/references/URefCardGroup.js';
-export { UCodeBlock } from './components/blocks/UCodeBlock.component.js';
-export { UJsonBlock } from './components/blocks/UJsonBlock.component.js';
-export { UMarkedBlock } from './components/blocks/UMarkedBlock.component.js';
-export { UTextBlock } from './components/blocks/UTextBlock.component.js';
-export { UThinkBlock } from './components/blocks/UThinkBlock.component.js';
-export { UToolBlock } from './components/blocks/UToolBlock.component.js';
 export { UAttachButton } from './components/buttons/UAttachButton.component.js';
+export { UCodeBlock } from './components/blocks/UCodeBlock.component.js';
 export { UCopyButton } from './components/buttons/UCopyButton.component.js';
-export { UVoteButton } from './components/buttons/UVoteButton.component.js';
-export { UReportButton } from './components/buttons/UReportButton.component.js';
-export { URetryButton } from './components/buttons/URetryButton.component.js';
-export { UShareButton } from './components/buttons/UShareButton.component.js';
 export { UDotLoader } from './components/loaders/UDotLoader.component.js';
+export { UJsonBlock } from './components/blocks/UJsonBlock.component.js';
+export { UMarkedBlock } from './components/blocks/UMarkedBlock.component.js';
 export { UMessage } from './components/message/UMessage.component.js';
 export { UPrompt } from './components/prompt/UPrompt.component.js';
-export { URefTag } from './components/references/URefTag.component.js';
+export { URefBlock } from './components/blocks/URefBlock.component.js';
 export { URefCard } from './components/references/URefCard.component.js';
 export { URefCardGroup } from './components/references/URefCardGroup.component.js';
+export { URefTag } from './components/references/URefTag.component.js';
+export { UReportButton } from './components/buttons/UReportButton.component.js';
+export { URetryButton } from './components/buttons/URetryButton.component.js';
+export { UShareButton } from './components/buttons/UShareButton.component.js';
+export { UTextBlock } from './components/blocks/UTextBlock.component.js';
+export { UThinkBlock } from './components/blocks/UThinkBlock.component.js';
+export { UToolBlock } from './components/blocks/UToolBlock.component.js';
+export { UVoteButton } from './components/buttons/UVoteButton.component.js';

package/dist/types/BlockItem.d.ts

@@ -1,4 +1,4 @@
-import { BlockReference } from './BlockReference';
+import { ReferenceSource, ReferenceCitation } from './References';
 import { JsonNode } from './JsonNode';
 /** LLM 추론 텍스트 블록입니다. */
 export interface ThinkingBlockItem {
@@ -17,8 +17,8 @@ export interface MarkdownBlockItem {
     type: "markdown";
     /** 마크다운 텍스트 */
     value?: string;
-    /** 마크다운 내 인용 출처들 */
-    refs?: BlockReference[];
+    /** 마크다운 내 인용 정보 들 */
+    refs?: ReferenceCitation[];
 }
 /** 툴 사용 블록입니다. */
 export interface ToolBlockItem {
@@ -30,7 +30,13 @@ export interface ToolBlockItem {
     /** 도구 블록 출력값(json) */
     output?: JsonNode;
 }
+/** 출처 정보 */
+export interface ReferenceBlockItem {
+    type: "reference";
+    /** 출처 목록 */
+    sources: ReferenceSource[];
+}
 /**
  * 타입별 메시지 컨텐츠 아이템
  */
-export type BlockItem = (ThinkingBlockItem | TextBlockItem | MarkdownBlockItem | ToolBlockItem);
+export type BlockItem = (ThinkingBlockItem | TextBlockItem | MarkdownBlockItem | ToolBlockItem | ReferenceBlockItem);

package/dist/types/{BlockReference.d.ts → References.d.ts}

@@ -1,11 +1,11 @@
 /**
- * 블록 참조에서 사용되는 참조 내용입니다.
+ * 참조에서 사용되는 원본 내용입니다.
  */
 export interface ReferenceSource {
     /** 자료의 종류 입니다. */
     type: 'web' | 'document';
     /** 참조 링크 URL */
-    url: string;
+    url?: string;
     /** 제목 */
     title?: string;
     /** 발췌 내용 */
@@ -14,19 +14,15 @@ export interface ReferenceSource {
     tags?: string[];
 }
 /**
- * 텍스트 컨텐츠 내 인용 참조 블록
+ * 본문 내 참조 인용 정보입니다.
  */
-export interface TextBlockReference {
-    /** 인용 출처 이름 */
-    name: string;
+export interface ReferenceCitation {
     /** 참조 텍스트 시작 위치 (문자 인덱스) */
     startIndex: number;
     /** 참조 텍스트 종료 위치 (문자 인덱스) */
     endIndex: number;
+    /** 본문에 표시될 참조 라벨 (예: [1], (Smith et al., 2023)) */
+    label?: string;
     /** 원본 참조 내용 */
     sources: ReferenceSource[];
 }
-/**
- * 메시지 컨텐츠 내에서 인용 참조 블록
- */
-export type BlockReference = TextBlockReference;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -37,7 +37,7 @@
     }
   },
   "scripts": {
-    "start": "vite",
+    "test": "vite",
     "build": "eslint && vite build"
   },
   "dependencies": {
@@ -57,7 +57,7 @@
     "globals": "^17.0.0",
     "openai": "^6.16.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }