@iyulab/chat-components 0.4.0 → 0.5.1

package/dist/components/blocks/UFileBlock.js

@@ -0,0 +1,154 @@
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { styles } from "./UFileBlock.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import "@iyulab/components/dist/components/spinner/USpinner.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/blocks/UFileBlock.ts
+var UFileBlock = class UFileBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.removable = false;
+		this.handleDownloadClick = (e) => {
+			e.stopPropagation();
+			if (!this.url) return;
+			const a = document.createElement("a");
+			a.href = this.url;
+			a.download = this.name || "unknown-file";
+			a.target = "_blank";
+			a.rel = "noopener noreferrer";
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+		};
+		this.handleRemoveClick = (e) => {
+			e.stopPropagation();
+			if (this.fire("remove")) this.remove();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="thumbnail">
+        <u-spinner 
+          ?hidden=${this.status !== "uploading"}
+        ></u-spinner>  
+        <u-icon
+          ?hidden=${this.status !== "error"}
+          lib="bootstrap" 
+          name="file-earmark-x"
+        ></u-icon>
+        <u-icon
+          ?hidden=${this.status && this.status !== "idle"}
+          lib="bootstrap" 
+          name=${this.resolveIcon(this.type)}
+        ></u-icon>
+        <u-button class="download-btn"
+          ?hidden=${!this.url || this.status === "uploading" || this.status === "error"}
+          title="Download"
+          @click=${this.handleDownloadClick}>
+          <u-icon lib="bootstrap" name="download"></u-icon>
+        </u-button>
+      </div>
+
+      <div class="info">
+        <div class="name">${this.name}</div>
+        <div class="meta">
+          <span class="type">
+            ${this.resolveExt(this.name, this.type)}
+          </span>
+          <span class="size">
+            ${this.formatSize(this.size || 0)}
+          </span>
+        </div>
+      </div>
+      
+      <u-button class="remove-btn"
+        ?hidden=${!this.removable}
+        title="Remove"
+        @click=${this.handleRemoveClick}>
+        <u-icon lib="internal" name="x-lg"></u-icon>
+      </u-button>
+    `;
+	}
+	/** 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";
+		if ([
+			"application/json",
+			"application/javascript",
+			"application/typescript",
+			"application/xml",
+			"text/html",
+			"text/css",
+			"text/javascript",
+			"text/x-python",
+			"text/x-java-source"
+		].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();
+		}
+		return mimeType ? {
+			"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"
+		}[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`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UFileBlock.prototype, "removable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], UFileBlock.prototype, "status", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "name", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "type", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UFileBlock.prototype, "size", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UFileBlock.prototype, "url", void 0);
+UFileBlock = __decorate([customElement("u-file-block")], UFileBlock);
+//#endregion
+export { UFileBlock };

package/dist/components/blocks/{UFilesBlock.styles.js → UFileBlock.styles.js}

@@ -1,20 +1,13 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UFileBlock.styles.ts
+var styles = css`
   :host {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 6px;
-    font-size: 14px;
-    width: 100%;
-  }
-
-  .item {
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: center;
     min-width: 0;
+    max-width: 200px;
     gap: 10px;
     padding: 8px 10px;
     border: 1px solid var(--u-border-color);
@@ -23,40 +16,16 @@ const styles = css`
     overflow: visible;
     cursor: pointer;
     transition: background-color 0.12s ease, border-color 0.12s ease;
+    font-size: 14px;
   }
-  .item:hover {
+  :host(:hover) {
     background-color: var(--u-neutral-100);
     border-color: var(--u-border-color-strong);
   }
 
-  /* uploading */
-  .item[phase="uploading"] {
-    border-color: var(--u-blue-400);
-    background-color: var(--u-blue-0);
-    cursor: default;
-  }
-  .item[phase="uploading"] .thumbnail {
-    background-color: var(--u-blue-100);
-    color: var(--u-blue-600);
-  }
-  .item[phase="uploading"]:hover {
-    background-color: var(--u-blue-0);
-    border-color: var(--u-blue-400);
-  }
-
-  /* error */
-  .item[phase="error"] {
-    border-color: var(--u-red-400);
-    background-color: var(--u-red-0);
-  }
-  .item[phase="error"] .thumbnail {
-    background-color: var(--u-red-100);
+  u-icon[name="file-earmark-x"] {
     color: var(--u-red-600);
   }
-  .item[phase="error"]:hover {
-    background-color: var(--u-red-0);
-    border-color: var(--u-red-500);
-  }
 
   .thumbnail {
     position: relative;
@@ -70,20 +39,8 @@ const styles = css`
     font-size: 16px;
     border-radius: 6px;
     background-color: var(--u-neutral-200);
-  }
-
-  .thumbnail-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 6px;
-    font-size: 14px;
-    background-color: color-mix(in srgb, currentColor 15%, transparent);
-  }
-  .item[phase="uploading"] .thumbnail-overlay {
-    animation: pulse 1.4s ease-in-out infinite;
+    transition: background 0.15s ease;
+    overflow: hidden;
   }
 
   .info {
@@ -125,33 +82,6 @@ const styles = css`
     font-variant-numeric: tabular-nums;
   }
 
-  .error-msg {
-    display: flex;
-    align-items: center;
-    gap: 3px;
-    color: var(--u-red-600);
-    font-size: 10px;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .upload-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    border-radius: 0 0 8px 8px;
-    border: none;
-    overflow: hidden;
-  }
-  .upload-progress::part(indicator) {
-    background-color: var(--u-blue-500);
-    border-radius: 0 0 8px 8px;
-  }
-
   .download-btn {
     position: absolute;
     inset: 0;
@@ -165,7 +95,7 @@ const styles = css`
     pointer-events: none;
     transition: opacity 0.15s ease;
   }
-  .item:hover .download-btn {
+  .thumbnail:hover .download-btn {
     opacity: 1;
     pointer-events: auto;
   }
@@ -186,21 +116,13 @@ const styles = css`
     pointer-events: none;
     transition: opacity 0.12s ease, background-color 0.12s ease;
   }
-  .item:hover .remove-btn {
+  :host(:hover) .remove-btn {
     opacity: 1;
     pointer-events: auto;
   }
   .remove-btn:hover {
     background-color: var(--u-red-600);
   }
-  .remove-btn:active {
-    background-color: var(--u-red-700);
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50%       { opacity: 0.4; }
-  }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,49 @@
-import { UJsonBlock } from './UJsonBlock.component.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { JsonNode } from '../../types/JsonNode.js';
+/**
+ * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
+ */
+export declare class UJsonBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 초기 확장 상태를 관리하는 속성입니다. */
+    expanded: boolean;
+    /** JSON 데이터 (속성으로 전달 가능) */
+    value: JsonNode;
+    state: Record<string, boolean>;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    /**
+     * JsonNode를 렌더링합니다.
+     * @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+     * @param parent - 부모 노드의 경로
+     */
+    private renderNode;
+    /**
+     * JsonValue를 렌더링합니다.
+     * @param node - JsonValue (string, number, boolean, null 등)
+     */
+    private renderValue;
+    /**
+     * JsonObject 또는 JsonArray를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     * @param depth - 현재 깊이
+     */
+    private renderObject;
+    /**
+     * 노드의 미리보기를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     */
+    private renderPreview;
+    /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+    private setState;
+    private isValueType;
+    /** 노드 확장/축소 클릭 핸들러 */
+    private handlePropertyKeyClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-json-block': UJsonBlock;
     }
 }
-export { UJsonBlock };

package/dist/components/blocks/UJsonBlock.js

@@ -1,5 +1,130 @@
-import { UJsonBlock } from './UJsonBlock.component.js';
-
-UJsonBlock.define("u-json-block");
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.0/helpers/decorate.js";
+import { styles } from "./UJsonBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { map } from "lit/directives/map.js";
+import { when } from "lit/directives/when.js";
+import { jsonAttrConverter } from "@iyulab/components/dist/utilities/converters.js";
+//#region src/components/blocks/UJsonBlock.ts
+var _ref;
+var UJsonBlock = class UJsonBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = true;
+		this.value = {};
+		this.state = {};
+		this.isValueType = (value) => {
+			return value !== Object(value);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "0");
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("value") || changedProperties.has("expanded")) this.state = this.setState(this.value);
+	}
+	render() {
+		return html`
+      <div part="base">
+        ${this.renderNode(this.value)}
+      </div>
+    `;
+	}
+	/**
+	* JsonNode를 렌더링합니다.
+	* @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+	* @param parent - 부모 노드의 경로
+	*/
+	renderNode(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 = 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)}
+      </span>
+    `;
+	}
+	/**
+	* JsonObject 또는 JsonArray를 렌더링합니다.
+	* @param node - JsonObject 또는 JsonArray
+	* @param depth - 현재 깊이
+	*/
+	renderObject(node, parent) {
+		return html`
+      <ul part="object" role="group">
+        ${map(Object.entries(node), ([key, value]) => {
+			const path = parent ? `${parent}.${key}` : key;
+			const isValue = this.isValueType(value);
+			const isExpanded = this.state[path] ?? this.expanded;
+			return html`
+            <li part="property" role="treeitem"
+                data-path="${path}"
+                aria-expanded="${isExpanded ? "true" : "false"}">
+              <span part="key"
+                    class="key"
+                    ?collapsable="${!isValue}"
+                    ?collapsed="${!isValue && !isExpanded}"
+                    @click=${!isValue ? () => this.handlePropertyKeyClick(path) : null}>
+                ${key}:
+                ${when(!isValue && !isExpanded, () => this.renderPreview(value))}
+              </span>
 
+              ${when(isValue || isExpanded, () => this.renderNode(value, path))}
+            </li>`;
+		})}
+      </ul>
+    `;
+	}
+	/**
+	* 노드의 미리보기를 렌더링합니다.
+	* @param node - JsonObject 또는 JsonArray
+	*/
+	renderPreview(node) {
+		return html`
+      <span part="preview" class="preview">
+        ${Array.isArray(node) ? node.length === 0 ? "[ ]" : `[ ${node.length} items ]` : Object.keys(node).length === 0 ? "{ }" : `{ ${Object.keys(node).length} properties }`}
+      </span>
+    `;
+	}
+	/** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+	setState(value, parent = "") {
+		if (typeof value !== "object" || value === null) return {};
+		const state = {};
+		Object.entries(value).forEach(([key, item]) => {
+			const path = parent ? `${parent}.${key}` : key;
+			state[path] = this.expanded;
+			Object.assign(state, this.setState(item, path));
+		});
+		return state;
+	}
+	/** 노드 확장/축소 클릭 핸들러 */
+	handlePropertyKeyClick(path) {
+		const isExpanded = this.state[path] ?? false;
+		this.state = {
+			...this.state,
+			[path]: !isExpanded
+		};
+	}
+};
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UJsonBlock.prototype, "expanded", void 0);
+__decorate([property({
+	type: Object,
+	converter: jsonAttrConverter()
+}), __decorateMetadata("design:type", Object)], UJsonBlock.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Record !== "undefined" && Record) === "function" ? _ref : Object)], UJsonBlock.prototype, "state", void 0);
+UJsonBlock = __decorate([customElement("u-json-block")], UJsonBlock);
+//#endregion
 export { UJsonBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UJsonBlock.styles.ts
+var styles = css`
   :host {
     --indent-size: 2em;
     
@@ -111,5 +111,5 @@ const styles = css`
     bottom: 0.2em;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,49 @@
-import { UMarkedBlock } from './UMarkedBlock.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { ReferenceCitation } from '../../types/References.js';
+/**
+ * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
+ *
+ * 주의:
+ * - refs로 삽입되는 커스텀 태그(u-ref-*)는 속성/내용을 모두 escape하여 XSS를 방지합니다.
+ * - 코드블록 내부는 HTML을 전부 텍스트로 취급(escape)하며, refs 태그는 통째 제거합니다.
+ * - 인덱스 기반 삽입(ref.endIndex)이 깨지지 않도록 "normalize(제로폭 제거)"를 insertRefs 전에 1회 수행합니다.
+ */
+export declare class UMarkedBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
+    value?: string;
+    /** 컨텐츠의 인용 출처들입니다. */
+    refs?: ReferenceCitation[];
+    private parser;
+    private placeholder;
+    private queued;
+    private timer?;
+    disconnectedCallback(): void;
+    protected shouldUpdate(_changedProperties: PropertyValues): boolean;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
+    /**
+     * 코드블록은 별도의 컴포넌트로 렌더링 합니다.
+     */
+    private renderCode;
+    /**
+     * 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
+     * 셀 내부의 인라인 마크다운(볼드, 코드, br 등)도 HTML로 변환합니다.
+     */
+    private renderTable;
+    /**
+     * 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+     * 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
+     */
+    private insertRefs;
+    /**
+     * 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.
+     */
+    private removeRefs;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-marked-block": UMarkedBlock;
     }
 }
-export { UMarkedBlock };