@iyulab/chat-components 0.3.0 → 0.5.0

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

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

package/dist/components/blocks/UTableBlock.js

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

@@ -0,0 +1,133 @@
+import { css } from "lit";
+//#region src/components/blocks/UTableBlock.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    margin: 8px 0;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background-color: var(--u-neutral-100);
+    border-bottom: 1px solid var(--u-border-color);
+    gap: 8px;
+  }
+
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toolbar-search {
+    flex: 1;
+    max-width: 200px;
+    font-size: 12px;
+  }
+
+  .toolbar-count {
+    font-size: 12px;
+    color: var(--u-txt-color-weak);
+  }
+
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .toolbar-right u-button {
+    font-size: 12px;
+    padding: 0.25em 0.5em;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: 480px;
+    width: 100%;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 14px;
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  thead tr {
+    background-color: var(--u-neutral-100);
+  }
+
+  th {
+    padding: 8px 12px;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 2px solid var(--u-border-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+  }
+  th:hover {
+    background-color: var(--u-neutral-200);
+  }
+  th:hover .sort-icon {
+    opacity: 0.7;
+  }
+  th[active] {
+    color: var(--u-primary, #4a90e2);
+  }
+  th[active] .sort-icon {
+    opacity: 1;
+  }
+
+  th .sort-icon {
+    display: inline-flex;
+    margin-left: 4px;
+    font-size: 12px;
+    opacity: 0.3;
+    transition: opacity 0.15s;
+  }
+
+  tbody tr {
+    background-color: var(--u-neutral-0);
+  }
+  tbody tr:hover td {
+    background-color: var(--u-neutral-50, rgba(0,0,0,0.02));
+  }
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--u-border-color);
+    vertical-align: top;
+  }
+
+  th[align="left"], td[align="left"] {
+    text-align: left; 
+  }
+  th[align="center"], td[align="center"] { 
+    text-align: center; 
+  }
+  th[align="right"], td[align="right"] { 
+    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 };

package/dist/components/blocks/UTextBlock.js

@@ -1,5 +1,95 @@
-import { UTextBlock } from './UTextBlock.component.js';
-
-UTextBlock.define("u-text-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 "./UTextBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/blocks/UTextBlock.ts
+var _ref, _ref2;
+var UTextBlock = class UTextBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.editable = false;
+		this.spellcheck = false;
+		this.minRows = 1;
+		this.updateValueFrom = (event) => {
+			event.stopPropagation();
+			this.value = this.textareaEl.value;
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				cancelable: true,
+				data: this.value,
+				inputType: event.inputType,
+				isComposing: event.isComposing,
+				dataTransfer: event.dataTransfer,
+				detail: event.detail,
+				targetRanges: event.getTargetRanges(),
+				view: event.view
+			}));
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("minRows") && this.minRows > 0) {
+			const lineHeight = parseFloat(getComputedStyle(this.preEl).lineHeight);
+			this.preEl.style.minHeight = `${this.minRows * lineHeight}px`;
+		}
+		if (changedProperties.has("maxRows") && this.maxRows && this.maxRows > 0 && this.maxRows > this.minRows) {
+			const lineHeight = parseFloat(getComputedStyle(this.preEl).lineHeight);
+			this.preEl.style.maxHeight = `${this.maxRows * lineHeight}px`;
+		}
+		if (changedProperties.has("editable") && this.editable) requestAnimationFrame(() => {
+			this.textareaEl.focus();
+			this.textareaEl.setSelectionRange(this.value?.length || 0, this.value?.length || 0);
+		});
+	}
+	render() {
+		return html`
+      <div class="container">
+        <textarea
+          name="message"
+          placeholder=${this.placeholder || ""}
+          spellcheck=${this.spellcheck}
+          .readOnly=${!this.editable}
+          .value=${this.value || ""}
+          @input=${this.updateValueFrom}
+        ></textarea>
+        <pre
+          .textContent=${this.normalizeValue(this.value)}
+        ></pre>
+      </div>
+    `;
+	}
+	/**
+	* textarea에 포커스를 줍니다.
+	*/
+	focus(options) {
+		this.textareaEl.focus(options);
+	}
+	/**
+	* pre 엘리먼트에 주입될 값을 정규화합니다.
+	*/
+	normalizeValue(value) {
+		if (!value) return "​";
+		if (value.endsWith("\n")) return value + "​";
+		return value;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTextBlock.prototype, "editable", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextBlock.prototype, "spellcheck", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextBlock.prototype, "placeholder", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UTextBlock.prototype, "minRows", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UTextBlock.prototype, "maxRows", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextBlock.prototype, "value", void 0);
+__decorate([query("textarea"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLTextAreaElement !== "undefined" && HTMLTextAreaElement) === "function" ? _ref : Object)], UTextBlock.prototype, "textareaEl", void 0);
+__decorate([query("pre"), __decorateMetadata("design:type", typeof (_ref2 = typeof HTMLPreElement !== "undefined" && HTMLPreElement) === "function" ? _ref2 : Object)], UTextBlock.prototype, "preEl", void 0);
+UTextBlock = __decorate([customElement("u-text-block")], UTextBlock);
+//#endregion
 export { UTextBlock };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UTextBlock.styles.ts
+var styles = css`
   :host {
     display: block;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -67,5 +67,5 @@ const styles = css`
     min-height: 1.5em;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,35 @@
-import { UThinkBlock } from './UThinkBlock.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 추론 내용을 표시하는 블록입니다.
+ * 로딩 중일 때는 "Thinking..." 메시지를 표시하고, 내용 펼치기/접기 기능을 제공합니다.
+ */
+export declare class UThinkBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 컨텐츠가 로딩 중인지 여부 */
+    loading: boolean;
+    /** 컨텐츠가 접혀있는지 여부 */
+    collapsed: boolean;
+    /** 컨텐츠 업데이트 시 자동으로 스크롤할지 여부 */
+    autoScroll: boolean;
+    /** 추론 컨텐츠의 내용 */
+    value?: string;
+    bodyEl: HTMLDivElement;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 컨텐츠 스크롤을 맨 아래로 이동
+     * @returns 스크롤 작업이 시작되었는지 여부 (bodyEl이 존재할 때만 true)
+     */
+    scrollToBottom(): boolean;
+    /**
+     * 사용자의 스크롤 인터럽트 처리
+     * 휠이나 터치 입력 시 자동 스크롤 중지
+     */
+    private handleUserInterrupt;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-think-block": UThinkBlock;
     }
 }
-export { UThinkBlock };

package/dist/components/blocks/UThinkBlock.js

@@ -1,5 +1,87 @@
-import { UThinkBlock } from './UThinkBlock.component.js';
-
-UThinkBlock.define("u-think-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 "./UMarkedBlock.js";
+import { styles } from "./UThinkBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/blocks/UThinkBlock.ts
+var _ref;
+var UThinkBlock = class UThinkBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.loading = false;
+		this.collapsed = true;
+		this.autoScroll = false;
+		this.handleUserInterrupt = () => {
+			if (this.autoScroll) this.autoScroll = false;
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("value") && this.autoScroll) this.scrollToBottom();
+	}
+	render() {
+		return html`
+      <div class="header" part="header"
+        @click=${() => this.collapsed = !this.collapsed}>
+        <u-icon class="prefix-icon"
+          ?loading=${this.loading}
+          lib="bootstrap"
+          name="lightbulb-fill"
+        ></u-icon>
+        <span class="title">
+          ${this.loading ? "Thinking..." : "Thought"}
+        </span>
+        <u-icon class="suffix-icon"
+          lib="internal" 
+          name=${this.collapsed ? "plus-lg" : "dash-lg"}
+        ></u-icon>
+      </div>
+      
+      <div class="body" part="body" scrollable 
+        ?hidden=${this.collapsed}
+        @wheel=${this.handleUserInterrupt}
+        @touchstart=${this.handleUserInterrupt}>
+        <u-marked-block
+          .value=${this.value}
+        ></u-marked-block>
+      </div>
+    `;
+	}
+	/**
+	* 컨텐츠 스크롤을 맨 아래로 이동
+	* @returns 스크롤 작업이 시작되었는지 여부 (bodyEl이 존재할 때만 true)
+	*/
+	scrollToBottom() {
+		if (!this.bodyEl) return false;
+		requestAnimationFrame(() => {
+			this.bodyEl.scrollTo({
+				top: this.bodyEl.scrollHeight,
+				behavior: "smooth"
+			});
+		});
+		return true;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UThinkBlock.prototype, "loading", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UThinkBlock.prototype, "collapsed", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-scroll"
+}), __decorateMetadata("design:type", Boolean)], UThinkBlock.prototype, "autoScroll", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UThinkBlock.prototype, "value", void 0);
+__decorate([query(".body"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLDivElement !== "undefined" && HTMLDivElement) === "function" ? _ref : Object)], UThinkBlock.prototype, "bodyEl", void 0);
+UThinkBlock = __decorate([customElement("u-think-block")], UThinkBlock);
+//#endregion
 export { UThinkBlock };

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

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