@iyulab/chat-components 0.3.0 → 0.5.0

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

@@ -1,7 +1,24 @@
-import { UToolBlock } from './UToolBlock.component.js';
+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;
     }
 }
-export { UToolBlock };

package/dist/components/blocks/UToolBlock.js

@@ -1,5 +1,70 @@
-import { UToolBlock } from './UToolBlock.component.js';
-
-UToolBlock.define("u-tool-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 "./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,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UToolBlock.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: column;
@@ -62,5 +62,5 @@ const styles = css`
     flex-direction: column;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,26 @@
-import { UAttachButton } from './UAttachButton.component.js';
+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;
     }
 }
-export { UAttachButton };

package/dist/components/buttons/UAttachButton.js

@@ -1,5 +1,63 @@
-import { UAttachButton } from './UAttachButton.component.js';
-
-UAttachButton.define("u-attach-button");
+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 "./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,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/buttons/UAttachButton.styles.ts
+var styles = css`
   :host(:empty) u-tooltip {
     display: none;
   }
@@ -10,5 +10,5 @@ const styles = css`
     font-size: 16px;
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,7 +1,24 @@
-import { UCopyButton } from './UCopyButton.component.js';
+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;
     }
 }
-export { UCopyButton };

package/dist/components/buttons/UCopyButton.js

@@ -1,5 +1,59 @@
-import { UCopyButton } from './UCopyButton.component.js';
-
-UCopyButton.define("u-copy-button");
+import { styles } from "./UCopyButton.styles.js";
+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 { 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,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/buttons/UCopyButton.styles.ts
+var styles = css`
   :host(:empty) u-tooltip {
     display: none;
   }
@@ -14,5 +14,5 @@ const styles = css`
     color: var(--u-green-500);
   }
 `;
-
+//#endregion
 export { styles };

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

@@ -1,8 +1,19 @@
-import { UVoteButton } from './UVoteButton.component.js';
+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;
     }
 }
-export { UVoteButton };
-export type { VoteValue } from './UVoteButton.component.js';

package/dist/components/buttons/UVoteButton.js

@@ -1,5 +1,64 @@
-import { UVoteButton } from './UVoteButton.component.js';
-
-UVoteButton.define("u-vote-button");
+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 "./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.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/buttons/UVoteButton.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: row;
@@ -15,5 +15,5 @@ const styles = css`
     font-size: 16px;
   }
 `;
-
+//#endregion
 export { styles };

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

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

package/dist/components/intents/UQuestionIntent.js

@@ -0,0 +1,41 @@
+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 "./UQuestionIntent.styles.js";
+import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@iyulab/components/dist/components/button/UButton.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/intents/UQuestionIntent.ts
+var UQuestionIntent = class UQuestionIntent extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.choices = [];
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		if (!this.choices || this.choices.length === 0) return nothing;
+		return html`
+      <p class="question" ?hidden=${!this.question}>${this.question}</p>
+      <div class="choices">
+        ${repeat(this.choices, (value, index) => html`
+          <u-button @click=${() => this.handleChoiceClick(index)}>
+            ${value}
+          </u-button>
+        `)}
+      </div>
+    `;
+	}
+	handleChoiceClick(index) {
+		const value = this.choices[index];
+		if (!value) return;
+		this.fire("choice", { detail: { value } });
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UQuestionIntent.prototype, "question", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UQuestionIntent.prototype, "choices", void 0);
+UQuestionIntent = __decorate([customElement("u-question-intent")], UQuestionIntent);
+//#endregion
+export { UQuestionIntent };

package/dist/components/intents/UQuestionIntent.styles.js

@@ -0,0 +1,43 @@
+import { css } from "lit";
+//#region src/components/intents/UQuestionIntent.styles.ts
+var styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    margin: 0.75em 0;
+  }
+
+  .question {
+    margin: 0 0 0.25em;
+    font-size: 0.9em;
+    color: var(--u-txt-color-weak);
+    line-height: 1.5;
+  }
+
+  .choices {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4em;
+  }
+
+  u-button {
+    display: block;
+    width: fit-content;
+    padding: 0.5em 0.75em;
+    font-size: 0.875em;
+    justify-content: flex-start;
+    line-height: 1.4;
+    border-radius: 10px;
+    box-shadow: 0 1px 2px var(--u-shadow-color-weaker);
+    transition: all 0.15s ease;
+  }
+  u-button:hover {
+    transform: translateY(-1px);
+  }
+  u-button:active {
+    transform: translateY(0);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/message/UMessage.d.ts

@@ -1,7 +1,23 @@
-import { UMessage } from './UMessage.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/** 메시지 variant 타입 */
+export type MessageVariant = 'default' | 'bubble';
+/** 메시지 위치 타입 */
+export type MessagePosition = 'left' | 'right';
+/** 메시지 너비 타입 */
+export type MessageFit = 'full' | 'auto';
+/**
+ * 채팅 메시지 컴포넌트입니다.
+ * 슬롯을 통해 다양한 블록 컴포넌트를 자유롭게 배치할 수 있습니다.
+ */
+export declare class UMessage extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    loading: boolean;
+    variant: MessageVariant;
+    position: MessagePosition;
+    render(): import('lit-html').TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-message": UMessage;
     }
 }
-export { UMessage };

package/dist/components/message/UMessage.js

@@ -1,5 +1,50 @@
-import { UMessage } from './UMessage.component.js';
+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 "./UMessage.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/message/UMessage.ts
+var UMessage = class UMessage extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.loading = false;
+		this.variant = "default";
+		this.position = "left";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <slot name="header"></slot>
 
-UMessage.define("u-message");
+      <div class="body" part="body" variant=${this.variant} position=${this.position}>
+        <slot></slot>
+        <svg class="dot-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          ?hidden=${!this.loading}>
+          <circle class="d0" cx="4" cy="12" r="3" />
+          <circle class="d1" cx="12" cy="12" r="3" />
+          <circle class="d2" cx="20" cy="12" r="3" />
+        </svg>
+      </div>
 
+      <slot name="footer" ?hidden=${this.loading}></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UMessage.prototype, "loading", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMessage.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UMessage.prototype, "position", void 0);
+UMessage = __decorate([customElement("u-message")], UMessage);
+//#endregion
 export { UMessage };