@iyulab/chat-components 0.6.0 → 0.7.0

package/dist/components/blocks/UThinkBlock.js

@@ -1,87 +0,0 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.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,74 +0,0 @@
-import { css } from "lit";
-//#region src/components/blocks/UThinkBlock.styles.ts
-var styles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-size: 14px;
-    border: 1px solid var(--u-border-color);
-    border-radius: 8px;
-  }
-
-  .header {
-    width: 100%;
-    padding: 8px;
-    border-radius: inherit;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    user-select: none;
-    cursor: pointer;
-  }
-  .header:hover {
-    background: linear-gradient(var(--u-neutral-100), transparent);
-  }
-  .header:active {
-    background: linear-gradient(var(--u-neutral-200), transparent);
-  }
-
-  .header .prefix-icon {
-    color: var(--u-yellow-800);
-    transition: all 0.3s ease-in-out;
-  }
-  .header .prefix-icon[loading] {
-    animation: pulse-glow 3s ease-in-out infinite;
-  }
-  .header .title {
-    flex: 1;
-    font-size: inherit;
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .body {
-    font-size: inherit;
-    font-weight: 300;
-    line-height: 1.5;
-    padding: 8px;
-    max-height: 210px;
-    overflow: auto;
-  }
-  .body u-marked-block {
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-  }
-
-  @keyframes pulse-glow {
-    0%, 100% {
-      opacity: 1;
-      filter: brightness(1);
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.7;
-      filter: brightness(1.3);
-      transform: scale(1.1);
-    }
-  }
-`;
-//#endregion
-export { styles };

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

@@ -1,24 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { JsonNode } from '../../types/JsonNode.js';
-/**
- * 툴 사용 블록 컴포넌트입니다.
- */
-export declare class UToolBlock extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 로딩 상태 */
-    loading: boolean;
-    /** 블록 접힘 여부 */
-    collapsed: boolean;
-    /** 헤딩 텍스트 */
-    title: string;
-    /** 입력 데이터 (JSON Object) */
-    input?: JsonNode;
-    /** 출력 데이터 (JSON Object) */
-    output?: JsonNode;
-    render(): import('lit-html').TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-tool-block": UToolBlock;
-    }
-}

package/dist/components/blocks/UToolBlock.js

@@ -1,70 +0,0 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import "./UJsonBlock.js";
-import { styles } from "./UToolBlock.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 { UElement } from "@iyulab/components/dist/components/UElement.js";
-import { jsonAttrConverter } from "@iyulab/components/dist/utilities/converters.js";
-//#region src/components/blocks/UToolBlock.ts
-var UToolBlock = class UToolBlock extends UElement {
-	constructor(..._args) {
-		super(..._args);
-		this.loading = false;
-		this.collapsed = true;
-		this.title = "";
-	}
-	static {
-		this.styles = [super.styles, styles];
-	}
-	render() {
-		return html`
-      <div class="header"  @click=${() => this.collapsed = !this.collapsed}>
-        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon lib="bootstrap" name="tools"></u-icon>`}
-        <div class="title">
-          ${this.title || "Tool Usage"}
-        </div>
-        <u-icon
-          lib="internal"
-          name=${this.collapsed ? "plus-lg" : "dash-lg"}
-        ></u-icon>
-      </div>
-
-      <div class="body" part="body" scrollable ?hidden=${this.collapsed}>
-        <div class="input-view" ?hidden=${!this.input}>
-          <u-json-block
-            .value=${this.input || {}}
-          ></u-json-block>
-        </div>
-        <div class="output-view" ?hidden=${!this.output}>
-          <u-icon lib="internal" name="chevron-down"></u-icon>
-          <u-json-block
-            .value=${this.output || {}}
-          ></u-json-block>
-        </div>
-      </div>
-    `;
-	}
-};
-__decorate([property({
-	type: Boolean,
-	reflect: true
-}), __decorateMetadata("design:type", Boolean)], UToolBlock.prototype, "loading", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-}), __decorateMetadata("design:type", Boolean)], UToolBlock.prototype, "collapsed", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UToolBlock.prototype, "title", void 0);
-__decorate([property({
-	type: Object,
-	converter: jsonAttrConverter()
-}), __decorateMetadata("design:type", Object)], UToolBlock.prototype, "input", void 0);
-__decorate([property({
-	type: Object,
-	converter: jsonAttrConverter()
-}), __decorateMetadata("design:type", Object)], UToolBlock.prototype, "output", void 0);
-UToolBlock = __decorate([customElement("u-tool-block")], UToolBlock);
-//#endregion
-export { UToolBlock };

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

@@ -1,66 +0,0 @@
-import { css } from "lit";
-//#region src/components/blocks/UToolBlock.styles.ts
-var styles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-size: 14px;
-    border: 1px solid var(--u-border-color);
-    border-radius: 8px;
-  }
-
-  .header {
-    width: 100%;
-    padding: 8px;
-    border-radius: inherit;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    cursor: pointer;
-    user-select: none;
-  }
-  .header:hover {
-    background: linear-gradient(var(--u-neutral-100), transparent);
-  }
-  .header:active {
-    background: linear-gradient(var(--u-neutral-200), transparent);
-  }
-
-  .header u-icon[name="tools"] {
-    color: var(--u-blue-800);
-  }
-  .header .title {
-    flex: 1;
-    font-size: inherit;
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  .body {
-    display: block;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    width: 100%;
-    max-height: 260px;
-    padding: 8px;
-    overflow: auto;
-  }
-  .body u-json-viewer {
-    font-size: inherit;
-    font-family: inherit;
-    line-height: 1.5;
-  }
-  .body u-icon[name="chevron-down"] {
-    align-self: center;
-    font-size: 16px;
-    color: var(--u-neutral-600, #4b5563);
-  }
-  .body .output-view {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-//#endregion
-export { styles };

package/dist/components/buttons/UAttachButton.d.ts

@@ -1,26 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/**
- * 파일 첨부 버튼 컴포넌트입니다.
- */
-export declare class UAttachButton extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 첨부 파일 유형 제한, 컴마로 구분된 MIME 타입 문자열 (예: "image/*,application/pdf") */
-    accept?: string;
-    /** 다중 파일 선택 가능 여부 */
-    multiple: boolean;
-    input?: HTMLInputElement;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 버튼 클릭 핸들러
-     */
-    private handleButtonClick;
-    /**
-     * 파일 선택 이벤트 핸들러
-     */
-    private handleInputChange;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-attach-button": UAttachButton;
-    }
-}

package/dist/components/buttons/UAttachButton.js

@@ -1,63 +0,0 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { styles } from "./UAttachButton.styles.js";
-import { html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import "@iyulab/components/dist/components/icon/UIcon.js";
-import "@iyulab/components/dist/components/button/UButton.js";
-import "@iyulab/components/dist/components/tooltip/UTooltip.js";
-import { UElement } from "@iyulab/components/dist/components/UElement.js";
-//#region src/components/buttons/UAttachButton.ts
-var _ref;
-var UAttachButton = class UAttachButton extends UElement {
-	constructor(..._args) {
-		super(..._args);
-		this.multiple = false;
-		this.handleButtonClick = () => {
-			if (!this.input) return;
-			this.input.click();
-		};
-		this.handleInputChange = (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-			const target = e.target;
-			const files = target.files;
-			if (!files || files.length === 0) return;
-			this.fire("attach", { detail: { files: Array.from(files) } });
-			target.value = "";
-		};
-	}
-	static {
-		this.styles = [super.styles, styles];
-	}
-	render() {
-		return html`
-      <u-button part="base"
-        variant="ghost"
-        @click=${this.handleButtonClick}>
-        <u-icon part="icon" 
-          lib="bootstrap" 
-          name="paperclip"
-        ></u-icon>
-      </u-button>
-
-      <u-tooltip for="u-button" placement="bottom" distance="8">
-        <slot></slot>
-      </u-tooltip>
-      
-      <input 
-        hidden
-        type="file"
-        ?multiple=${this.multiple}
-        .accept=${this.accept || "*"}
-        @change=${this.handleInputChange}
-      />
-    `;
-	}
-};
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UAttachButton.prototype, "accept", void 0);
-__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UAttachButton.prototype, "multiple", void 0);
-__decorate([query("input[type=\"file\"]"), __decorateMetadata("design:type", typeof (_ref = typeof HTMLInputElement !== "undefined" && HTMLInputElement) === "function" ? _ref : Object)], UAttachButton.prototype, "input", void 0);
-UAttachButton = __decorate([customElement("u-attach-button")], UAttachButton);
-//#endregion
-export { UAttachButton };

package/dist/components/buttons/UAttachButton.styles.js

@@ -1,14 +0,0 @@
-import { css } from "lit";
-//#region src/components/buttons/UAttachButton.styles.ts
-var styles = css`
-  :host(:empty) u-tooltip {
-    display: none;
-  }
-
-  u-button {
-    color: var(--u-txt-color-weak);
-    font-size: 16px;
-  }
-`;
-//#endregion
-export { styles };

package/dist/components/buttons/UCopyButton.d.ts

@@ -1,24 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/**
- * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
- */
-export declare class UCopyButton extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 클립보드 복사 후 재사용 대기 시간 (ms) */
-    delay: number;
-    /** 복사할 텍스트를 설정합니다. */
-    value?: string;
-    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
-    isCopied: boolean;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 클립보드에 텍스트를 복사하는 메서드입니다.
-     * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.
-     */
-    private copyToClipboard;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-copy-button": UCopyButton;
-    }
-}

package/dist/components/buttons/UCopyButton.js

@@ -1,59 +0,0 @@
-import { styles } from "./UCopyButton.styles.js";
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "@iyulab/components/dist/components/icon/UIcon.js";
-import "@iyulab/components/dist/components/icon-button/UIconButton.js";
-import "@iyulab/components/dist/components/button/UButton.js";
-import "@iyulab/components/dist/components/tooltip/UTooltip.js";
-import { UElement } from "@iyulab/components/dist/components/UElement.js";
-//#region src/components/buttons/UCopyButton.ts
-var UCopyButton = class UCopyButton extends UElement {
-	constructor(..._args) {
-		super(..._args);
-		this.delay = 1e3;
-		this.isCopied = false;
-		this.copyToClipboard = async () => {
-			if (!this.value) return;
-			if (this.isCopied) return;
-			try {
-				await window.navigator.clipboard.writeText(this.value);
-				if (this.delay <= 0) return;
-				this.isCopied = true;
-				setTimeout(() => {
-					this.isCopied = false;
-				}, this.delay);
-			} catch (error) {
-				console.error("Failed to copy text to clipboard:", error);
-				this.isCopied = false;
-			}
-		};
-	}
-	static {
-		this.styles = [super.styles, styles];
-	}
-	render() {
-		return html`
-      <u-button part="base" 
-        variant="ghost"
-        ?disabled=${this.isCopied}
-        @click=${this.copyToClipboard}>
-        <u-icon part="icon"
-          lib="bootstrap"
-          name=${this.isCopied ? "check-lg" : "copy"}
-        ></u-icon>
-      </u-button>
-
-      <u-tooltip for="u-button" placement="bottom" distance="8">
-        <slot></slot>
-      </u-tooltip>
-    `;
-	}
-};
-__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UCopyButton.prototype, "delay", void 0);
-__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCopyButton.prototype, "value", void 0);
-__decorate([state(), __decorateMetadata("design:type", Boolean)], UCopyButton.prototype, "isCopied", void 0);
-UCopyButton = __decorate([customElement("u-copy-button")], UCopyButton);
-//#endregion
-export { UCopyButton };

package/dist/components/buttons/UCopyButton.styles.js

@@ -1,18 +0,0 @@
-import { css } from "lit";
-//#region src/components/buttons/UCopyButton.styles.ts
-var styles = css`
-  :host(:empty) u-tooltip {
-    display: none;
-  }
-
-  u-button {
-    color: var(--u-txt-color-weak);
-    font-size: 16px;
-  }
-
-  u-icon[name="check-lg"] {
-    color: var(--u-green-500);
-  }
-`;
-//#endregion
-export { styles };

package/dist/components/buttons/UVoteButton.d.ts

@@ -1,19 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/** 투표 상태 타입 */
-export type VoteValue = 'none' | 'up' | 'down';
-/**
- * 투표 버튼 컴포넌트입니다.
- */
-export declare class UVoteButton extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** 현재 투표 상태 */
-    value: VoteValue;
-    render(): import('lit-html').TemplateResult<1>;
-    private handleUpButtonClick;
-    private handleDownButtonClick;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-vote-button': UVoteButton;
-    }
-}

package/dist/components/buttons/UVoteButton.js

@@ -1,64 +0,0 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { styles } from "./UVoteButton.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/button/UButton.js";
-import "@iyulab/components/dist/components/tooltip/UTooltip.js";
-import { UElement } from "@iyulab/components/dist/components/UElement.js";
-//#region src/components/buttons/UVoteButton.ts
-var UVoteButton = class UVoteButton extends UElement {
-	constructor(..._args) {
-		super(..._args);
-		this.value = "none";
-		this.handleUpButtonClick = () => {
-			this.value = this.value === "up" ? "none" : "up";
-			this.dispatchEvent(new Event("change", {
-				bubbles: true,
-				composed: true
-			}));
-		};
-		this.handleDownButtonClick = () => {
-			this.value = this.value === "down" ? "none" : "down";
-			this.dispatchEvent(new Event("change", {
-				bubbles: true,
-				composed: true
-			}));
-		};
-	}
-	static {
-		this.styles = [super.styles, styles];
-	}
-	render() {
-		return html`
-      <u-button class="up-btn" part="up-btn"
-        variant="ghost"
-        @click=${this.handleUpButtonClick}>
-        <u-icon part="icon"
-          lib="bootstrap"
-          name=${this.value === "up" ? "hand-thumbs-up-fill" : "hand-thumbs-up"}
-        ></u-icon>
-      </u-button>
-      <u-button class="down-btn" part="down-btn"
-        variant="ghost"
-        @click=${this.handleDownButtonClick}>
-        <u-icon part="icon"
-          lib="bootstrap"
-          name=${this.value === "down" ? "hand-thumbs-down-fill" : "hand-thumbs-down"}
-        ></u-icon>
-      </u-button>
-
-      <u-tooltip for=".up-btn" placement="bottom" distance="8">
-        <slot name="up"></slot>
-      </u-tooltip>
-      <u-tooltip for=".down-btn" placement="bottom" distance="8">
-        <slot name="down"></slot>
-      </u-tooltip>
-    `;
-	}
-};
-__decorate([property({ type: String }), __decorateMetadata("design:type", Object)], UVoteButton.prototype, "value", void 0);
-UVoteButton = __decorate([customElement("u-vote-button")], UVoteButton);
-//#endregion
-export { UVoteButton };

package/dist/components/buttons/UVoteButton.styles.d.ts

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

package/dist/components/buttons/UVoteButton.styles.js

@@ -1,19 +0,0 @@
-import { css } from "lit";
-//#region src/components/buttons/UVoteButton.styles.ts
-var styles = css`
-  :host {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  :host(:empty) u-tooltip {
-    display: none;
-  }
-
-  u-button {
-    color: var(--u-txt-color-weak);
-    font-size: 16px;
-  }
-`;
-//#endregion
-export { styles };

package/dist/components/intents/UQuestionIntent.d.ts

@@ -1,22 +0,0 @@
-import { nothing } from 'lit';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-/**
- * 질문/선택지 제안 블록 컴포넌트
- *
- * LLM이 질문 텍스트(`question`)와 클릭 선택지(`choices`)를 제시하고,
- * `input: true`일 때는 사용자가 직접 텍스트를 입력할 수도 있습니다.
- */
-export declare class UQuestionIntent extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    /** LLM이 제시하는 질문 텍스트 */
-    question?: string;
-    /** 클릭 가능한 선택지 목록 */
-    choices: string[];
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
-    private handleChoiceClick;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "u-question-intent": UQuestionIntent;
-    }
-}