@iyulab/chat-components 0.4.0 → 0.5.0

package/dist/components/blocks/UMarkedBlock.js

@@ -1,5 +1,155 @@
-import { UMarkedBlock } from './UMarkedBlock.component.js';
-
-UMarkedBlock.define("u-marked-block");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "./UCodeBlock.js";
+import "../references/URefTag.js";
+import { URefCard } from "../references/URefCard.js";
+import "../references/URefCardGroup.js";
+import { UTableBlock } from "./UTableBlock.js";
+import { UView } from "../views/UView.js";
+import { styles } from "./UMarkedBlock.styles.js";
+import { nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { Marked, Parser } from "marked";
+import markedKatex from "marked-katex-extension";
+import { escapeHtmlText, stripZeroWidth } from "@iyulab/components/dist/utilities/sanitizers.js";
+import { buildElementHTML } from "@iyulab/components/dist/utilities/elements.js";
+//#region src/components/blocks/UMarkedBlock.ts
+var UMarkedBlock = class UMarkedBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.parser = new Marked({
+			pedantic: false,
+			gfm: true,
+			breaks: true,
+			silent: true,
+			renderer: {
+				code: (token) => this.renderCode(token),
+				table: (token) => this.renderTable(token)
+			}
+		}).use(markedKatex({ output: "mathml" }));
+		this.placeholder = new HtmlPlaceholder();
+		this.queued = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	disconnectedCallback() {
+		clearTimeout(this.timer);
+		super.disconnectedCallback();
+	}
+	shouldUpdate(_changedProperties) {
+		if (this.queued) return false;
+		return true;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("value")) {
+			if (this.queued) return;
+			this.queued = true;
+			this.timer = window.setTimeout(() => {
+				this.queued = false;
+				this.requestUpdate();
+			}, 80);
+		}
+	}
+	render() {
+		let value = this.value;
+		if (!value) return nothing;
+		this.placeholder.reset();
+		value = stripZeroWidth(value);
+		if (this.refs?.length) value = this.insertRefs(value, this.refs);
+		let html = this.parser.parse(value, { async: false });
+		return unsafeHTML(this.placeholder.restore(html));
+	}
+	/** 
+	* 코드블록은 별도의 컴포넌트로 렌더링 합니다.
+	*/
+	renderCode(token) {
+		const lang = token.lang ?? "plaintext";
+		const trimmed = token.raw.trimEnd();
+		const isClosed = trimmed.endsWith("```") || trimmed.endsWith("~~~");
+		if (lang === "view-json") return UView.buildHTML(token.text, { loading: !isClosed });
+		if (lang === "intent-json") return "";
+		const safeText = this.removeRefs(token.text);
+		return buildElementHTML("u-code-block", {
+			lang,
+			loading: !isClosed
+		}, safeText);
+	}
+	/**
+	* 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
+	* 셀 내부의 인라인 마크다운(볼드, 코드, br 등)도 HTML로 변환합니다.
+	*/
+	renderTable(token) {
+		const headers = token.header.map((h) => ({
+			text: h.tokens ? Parser.parseInline(h.tokens) : h.text,
+			align: h.align
+		}));
+		const rows = token.rows.map((row) => row.map((cell) => ({
+			text: cell.tokens ? Parser.parseInline(cell.tokens) : cell.text,
+			align: cell.align
+		})));
+		return UTableBlock.buildHTML({
+			headers,
+			rows
+		});
+	}
+	/**
+	* 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+	* 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
+	*/
+	insertRefs(value, refs) {
+		const sorted = [...refs].sort((a, b) => b.endIndex - a.endIndex);
+		for (const ref of sorted) {
+			const sources = ref.sources ?? [];
+			const label = escapeHtmlText(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
+			const link = sources.at(0)?.url;
+			let tooltip = "";
+			if (sources.length > 0) tooltip = buildElementHTML("u-ref-card-group", { slot: "tooltip" }, sources.map((s) => URefCard.buildHTML(s)).join(""));
+			const html = buildElementHTML("u-ref-tag", { href: link }, label + tooltip);
+			const key = this.placeholder.store(html);
+			value = value.slice(0, ref.endIndex) + key + value.slice(ref.endIndex);
+		}
+		return value;
+	}
+	/**
+	* 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.   
+	*/
+	removeRefs(value) {
+		value = value.replace(/<u-ref-tag\b[^>]*>[\s\S]*?<\/u-ref-tag>/gi, "");
+		value = value.replace(/<!--ref:\d+-->/g, "");
+		return value;
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMarkedBlock.prototype, "value", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UMarkedBlock.prototype, "refs", void 0);
+UMarkedBlock = __decorate([customElement("u-marked-block")], UMarkedBlock);
+/**
+* Marked 파싱 중 HTML이 GFM에 의해 오염되는 것을 방지하기 위해
+* HTML을 주석 플레이스홀더로 치환하고, 나중에 원래 HTML로 복원하는 유틸입니다.
+*/
+var HtmlPlaceholder = class {
+	constructor() {
+		this.map = {};
+		this.idx = 0;
+	}
+	reset() {
+		this.map = {};
+		this.idx = 0;
+	}
+	/** html을 저장하고 대응하는 플레이스홀더 키를 반환합니다. */
+	store(html) {
+		const key = `<!--ref:${this.idx++}-->`;
+		this.map[key] = html;
+		return key;
+	}
+	/** html 안의 등록된 모든 플레이스홀더를 원래 HTML로 복원합니다. */
+	restore(html) {
+		if (this.idx === 0) return html;
+		return html.replace(/<!--ref:\d+-->/g, (key) => this.map[key] ?? "");
+	}
+};
+//#endregion
 export { UMarkedBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UMarkedBlock.styles.ts
+var styles = css`
   /* github-markdown styles */
   :host {
     --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -575,5 +575,5 @@ const styles = css`
     margin: 0 -1.6em .25em .2em;
   }
 `;
-
+//#endregion
 export { styles };

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

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

package/dist/components/blocks/URefBlock.js

@@ -1,5 +1,60 @@
-import { URefBlock } from './URefBlock.component.js';
-
-URefBlock.define("u-ref-block");
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../references/URefCard.js";
+import { styles } from "./URefBlock.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/blocks/URefBlock.ts
+var URefBlock = class URefBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.collapsed = true;
+		this.title = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	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.title || "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}
+              .url=${source.url}
+              .title=${source.title || ""}
+              .snippet=${source.snippet || ""}
+              .tags=${source.tags}
+            ></u-ref-card>
+          `;
+		})}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], URefBlock.prototype, "collapsed", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefBlock.prototype, "title", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], URefBlock.prototype, "sources", void 0);
+URefBlock = __decorate([customElement("u-ref-block")], URefBlock);
+//#endregion
 export { URefBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/URefBlock.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: column;
@@ -71,5 +71,5 @@ const styles = css`
     width: 100%;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,52 @@
-import { UTableBlock } from './UTableBlock.component.js';
+import { UDataElement } from '@iyulab/components/dist/components/UDataElement.js';
+/** 테이블 셀 데이터 타입 */
+export interface TableCell {
+    /** 셀에 표시할 텍스트 내용 */
+    text: string;
+    /** 셀 내용의 정렬 방식. 기본값은 "left" */
+    align: "left" | "center" | "right" | null;
+}
+/** 테이블 정렬 상태 */
+export interface SortState {
+    /** 현재 정렬 기준이 되는 컬럼 인덱스. -1이면 정렬 안 된 상태 */
+    index: number;
+    /** 정렬 방향. "asc"는 오름차순, "desc"는 내림차순 */
+    dir: "asc" | "desc";
+}
+/**
+ * 마크다운 테이블 데이터를 렌더링하는 컴포넌트입니다.
+ * 컬럼 정렬, CSV 다운로드 기능을 지원합니다.
+ * light DOM 내 `<script type="application/json">` 에서 데이터를 자동으로 읽어냅니다.
+ */
+export declare class UTableBlock extends UDataElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    /** 테이블 헤더 목록. 각 헤더는 { text, align } 형식입니다. */
+    headers: TableCell[];
+    /** 테이블 행 목록. 각 행은 셀 배열입니다. */
+    rows: TableCell[][];
+    private loading;
+    private sort;
+    private search;
+    private searchCache?;
+    private searchTimer;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
+     * 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+     */
+    private renderHighlightedText;
+    /**
+     * 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
+     */
+    private getFilteredSortedRows;
+    private handleSearchInput;
+    private handleSortColumn;
+    private handleDownloadCSV;
+    private handleDownloadXLS;
+    private triggerDownload;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-table-block": UTableBlock;
     }
 }
-export { UTableBlock };

package/dist/components/blocks/UTableBlock.js

@@ -1,5 +1,198 @@
-import { UTableBlock } from './UTableBlock.component.js';
-
-UTableBlock.define("u-table-block");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UTableBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UDataElement } from "@iyulab/components/dist/components/UDataElement.js";
+import { repeat } from "lit/directives/repeat.js";
+import "@iyulab/components/dist/components/skeleton/USkeleton.js";
+//#region src/components/blocks/UTableBlock.ts
+var UTableBlock = class UTableBlock extends UDataElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headers = [];
+		this.rows = [];
+		this.loading = false;
+		this.sort = {
+			index: -1,
+			dir: "asc"
+		};
+		this.search = "";
+		this.searchTimer = null;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		const rows = this.getFilteredSortedRows();
+		return html`
+      <div class="toolbar">
+        <div class="toolbar-left">
+          <u-input
+            class="toolbar-search"
+            type="search"
+            placeholder="Search..."
+            .value=${this.search}
+            @input=${this.handleSearchInput}
+          >
+            <u-icon slot="prefix" lib="internal" name="search"></u-icon>
+          </u-input>
+          <span class="toolbar-count">
+            ${rows.length} / ${this.rows.length} Rows
+          </span>
+        </div>
+        <div class="toolbar-right">
+          <u-button @click=${this.handleDownloadXLS} title="Excel Download">
+            XLS
+            <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
+          </u-button>
+          <u-button @click=${this.handleDownloadCSV} title="CSV Download">
+            CSV
+            <u-icon slot="suffix" lib="bootstrap" name="download"></u-icon>
+          </u-button>
+        </div>
+      </div>
+      <div class="table-wrapper" scrollable>
+        <table>
+          <thead ?hidden=${!this.headers.length}>
+            <tr>
+              ${repeat(this.headers, (_, i) => i, (h, i) => {
+			const isActive = this.sort.index === i;
+			return html`
+                  <th
+                    ?active=${isActive}
+                    align=${h.align ?? "left"}
+                    @click=${() => this.handleSortColumn(i)}
+                  >
+                    ${unsafeHTML(h.text)}
+                    <u-icon
+                      class="sort-icon"
+                      lib="bootstrap"
+                      name=${isActive ? this.sort.dir === "asc" ? "sort-alpha-up" : "sort-alpha-down" : "arrow-down-up"}
+                    ></u-icon>
+                  </th>
+                `;
+		})}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.loading ? html`
+                <tr>
+                  <td colspan=${this.headers.length || 1}>
+                    <u-skeleton width="80%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="60%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="70%" height="1.2em"></u-skeleton>
+                    <u-skeleton width="50%" height="1.2em"></u-skeleton>
+                  </td>
+                </tr>
+              ` : repeat(rows, (_, i) => i, (row) => html`
+                <tr>
+                  ${repeat(row, (_, j) => j, (cell) => html`
+                    <td align=${cell.align ?? "left"}>
+                      ${unsafeHTML(this.renderHighlightedText(cell.text))}
+                    </td>
+                  `)}
+                </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+	}
+	/**
+	* 하이라이트 렌더링: search 기준으로 매칭되는 부분을 <mark>로 감쌉니다.
+	* 내부적으로 안전하게 escape한 뒤 매칭을 위해 RegExp를 사용합니다.
+	*/
+	renderHighlightedText(text) {
+		const q = this.search.trim();
+		if (!q) return text;
+		const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const re = new RegExp(`(${escaped})`, "gi");
+		const parts = String(text).split(re);
+		if (parts.length === 1) return text;
+		return parts.map((p, idx) => idx % 2 === 1 ? `<mark>${p}</mark>` : p).join("");
+	}
+	/**
+	* 현재 검색어와 정렬 상태에 따라 필터링 및 정렬된 행 목록을 반환합니다.
+	*/
+	getFilteredSortedRows() {
+		let rows = this.rows;
+		const q = this.search.trim();
+		if (q) {
+			const qLower = q.toLowerCase();
+			rows = rows.filter((row) => row.some((cell) => cell.text.toLowerCase().includes(qLower)));
+		}
+		const { index, dir } = this.sort;
+		if (index < 0) return rows;
+		return [...rows].sort((a, b) => {
+			const av = a[index]?.text ?? "";
+			const bv = b[index]?.text ?? "";
+			const an = Number(av);
+			const bn = Number(bv);
+			const cmp = !isNaN(an) && !isNaN(bn) ? an - bn : av.localeCompare(bv, void 0, { sensitivity: "base" });
+			return dir === "asc" ? cmp : -cmp;
+		});
+	}
+	handleSearchInput(e) {
+		this.searchCache = e.target.value || "";
+		if (this.searchTimer !== null) window.clearTimeout(this.searchTimer);
+		this.loading = true;
+		this.searchTimer = window.setTimeout(() => {
+			this.search = this.searchCache || "";
+			this.loading = false;
+			this.searchTimer = null;
+		}, 250);
+	}
+	handleSortColumn(index) {
+		if (this.sort.index === index) this.sort = {
+			...this.sort,
+			dir: this.sort.dir === "asc" ? "desc" : "asc"
+		};
+		else this.sort = {
+			index,
+			dir: "asc"
+		};
+	}
+	handleDownloadCSV() {
+		const escCsv = (v) => v.includes(",") || v.includes("\"") || v.includes("\n") ? `"${v.replace(/"/g, "\"\"")}"` : v;
+		const lines = [this.headers.map((h) => escCsv(h.text)).join(","), ...this.rows.map((row) => row.map((cell) => escCsv(cell.text)).join(","))];
+		const blob = new Blob([lines.join("\n")], { type: "text/csv;charset=utf-8;" });
+		this.triggerDownload(`table-${Date.now()}.csv`, blob);
+	}
+	handleDownloadXLS() {
+		const escXml = (v) => v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		const cell = (v) => `<Cell><Data ss:Type="String">${escXml(v)}</Data></Cell>`;
+		const row = (cells) => `<Row>${cells.map(cell).join("")}</Row>`;
+		const xml = [
+			`<?xml version="1.0" encoding="UTF-8"?>`,
+			`<?mso-application progid="Excel.Sheet"?>`,
+			`<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"`,
+			` xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">`,
+			`<Worksheet ss:Name="Sheet1"><Table>`,
+			row(this.headers.map((h) => h.text)),
+			...this.rows.map((r) => row(r.map((c) => c.text))),
+			`</Table></Worksheet></Workbook>`
+		].join("\n");
+		const blob = new Blob([xml], { type: "application/vnd.ms-excel;charset=utf-8;" });
+		this.triggerDownload(`table-${Date.now()}.xls`, blob);
+	}
+	triggerDownload(filename, blob) {
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = filename;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+};
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UTableBlock.prototype, "headers", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UTableBlock.prototype, "rows", void 0);
+__decorate([state(), __decorateMetadata("design:type", Boolean)], UTableBlock.prototype, "loading", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UTableBlock.prototype, "sort", void 0);
+__decorate([state(), __decorateMetadata("design:type", String)], UTableBlock.prototype, "search", void 0);
+UTableBlock = __decorate([customElement("u-table-block")], UTableBlock);
+//#endregion
 export { UTableBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UTableBlock.styles.ts
+var styles = css`
   :host {
     display: block;
     width: 100%;
@@ -66,7 +66,6 @@ const styles = css`
 
   thead {
     position: sticky;
-    z-index: 10;
     top: 0;
   }
 
@@ -130,5 +129,5 @@ const styles = css`
     text-align: right; 
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,41 @@
-import { UTextBlock } from './UTextBlock.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 텍스트를 표시하거나 편집할 수 있는 블록 컴포넌트입니다.
+ */
+export declare class UTextBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 편집 가능 여부 */
+    editable: boolean;
+    /** 스펠체크 여부 */
+    spellcheck: boolean;
+    /** 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 최소 행 수, 기본값은 1 */
+    minRows: number;
+    /** 최대 행 수 */
+    maxRows?: number;
+    /** 텍스트 블록의 내용 */
+    value?: string;
+    textareaEl: HTMLTextAreaElement;
+    preEl: HTMLPreElement;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * textarea에 포커스를 줍니다.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * 텍스트 입력시 value를 업데이트하고 이벤트를 재전파합니다.
+     */
+    private updateValueFrom;
+    /**
+     * pre 엘리먼트에 주입될 값을 정규화합니다.
+     */
+    private normalizeValue;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-text-block": UTextBlock;
     }
 }
-export { UTextBlock };