@iyulab/chat-components 0.4.0 → 0.5.1

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.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.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/{actions/UQuestionAction.component.d.ts → intents/UQuestionIntent.d.ts}

@@ -6,9 +6,8 @@ import { UElement } from '@iyulab/components/dist/components/UElement.js';
  * LLM이 질문 텍스트(`question`)와 클릭 선택지(`choices`)를 제시하고,
  * `input: true`일 때는 사용자가 직접 텍스트를 입력할 수도 있습니다.
  */
-export declare class UQuestionAction extends UElement {
+export declare class UQuestionIntent extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
     /** LLM이 제시하는 질문 텍스트 */
     question?: string;
     /** 클릭 가능한 선택지 목록 */
@@ -16,3 +15,8 @@ export declare class UQuestionAction extends UElement {
     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.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.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/{actions/UQuestionAction.styles.js → intents/UQuestionIntent.styles.js}

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/intents/UQuestionIntent.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: column;
@@ -33,13 +33,11 @@ const styles = css`
     transition: all 0.15s ease;
   }
   u-button:hover {
-    background-color: var(--u-blue-0);
-    border-color: var(--u-blue-400);
     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.124.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.124.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 };

package/dist/components/message/UMessage.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/message/UMessage.styles.ts
+var styles = css`
   :host {
     width: auto;
     max-width: 100%;
@@ -76,5 +76,5 @@ const styles = css`
     }
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/prompt/UPrompt.d.ts

@@ -1,7 +1,42 @@
-import { UPrompt } from './UPrompt.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { FileBlockItem } from '../../types/BlockItem.js';
+/**
+ * 채팅 입력 컴포넌트입니다.
+ * 텍스트 입력 영역과 우측에 액션 버튼을 배치할 수 있는 슬롯을 제공합니다.
+ */
+export declare class UPrompt extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 로딩 상태 여부 */
+    loading: boolean;
+    /** 최소 행 수 */
+    minRows: number;
+    /** 최대 행 수 */
+    maxRows: number;
+    /** 입력 필드의 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 입력 필드의 값 */
+    value?: string;
+    /** 입력 첨부 파일 목록 */
+    files?: FileBlockItem[];
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 입력된 텍스트와 첨부 파일을 제출하거나, 로딩 중인 경우 취소 이벤트를 발생시킵니다.
+     * 텍스트 또는 첨부 파일이 없는 경우에는 아무런 동작도 하지 않습니다.
+     */
+    submit(): void;
+    /**
+     * 0.4.x 호환을 위한 legacy 이벤트를 함께 발행합니다.
+     * `u-submit`/`u-cancel`은 0.6.0에서 제거 예정.
+     */
+    private dispatchLegacy;
+    private handleRemoveFile;
+    private handleTextBlockInput;
+    private handleTextBlockKeydown;
+    private handleSendButtonClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-prompt": UPrompt;
     }
 }
-export { UPrompt };

package/dist/components/prompt/UPrompt.js

@@ -1,5 +1,142 @@
-import { UPrompt } from './UPrompt.component.js';
+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 "../blocks/UFileBlock.js";
+import { styles } from "./UPrompt.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 { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/prompt/UPrompt.ts
+var UPrompt = class UPrompt extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.loading = false;
+		this.minRows = 1;
+		this.maxRows = 10;
+		this.handleSendButtonClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.submit();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "0");
+	}
+	render() {
+		return html`
+      <slot name="header"></slot>
 
-UPrompt.define("u-prompt");
+      <div class="files" part="files"
+        ?hidden=${!this.files || this.files.length === 0}>
+        ${repeat(this.files || [], (_, i) => i, (file, index) => html`
+          <u-file-block
+            data-index=${index}
+            .removable=${true}
+            .status=${file.status}
+            .name=${file.name}
+            .type=${file.mimeType}
+            .size=${file.size}
+            @remove=${this.handleRemoveFile}
+          ></u-file-block>
+        `)}
+      </div>
 
+      <u-text-block class="input" part="input"
+        .editable=${true}
+        .minRows=${this.minRows}
+        .maxRows=${this.maxRows}
+        .value=${this.value}
+        .placeholder=${this.placeholder}
+        @input=${this.handleTextBlockInput}
+        @keydown=${this.handleTextBlockKeydown}
+      ></u-text-block>
+      
+      <div class="control" part="control">
+        <slot name="left-actions"></slot>
+        <div style="flex: 1;"></div>
+        <slot name="right-actions"></slot>
+        
+        <u-button class="send-btn" part="send-btn"
+          ?disabled=${!this.loading && !this.value}
+          @click=${this.handleSendButtonClick}>
+          <u-icon
+            lib="bootstrap"
+            name=${this.loading ? "stop-circle" : "arrow-up"}
+          ></u-icon>
+        </u-button>
+      </div>
+      
+      <slot name="footer"></slot>
+    `;
+	}
+	/**
+	* 입력된 텍스트와 첨부 파일을 제출하거나, 로딩 중인 경우 취소 이벤트를 발생시킵니다.
+	* 텍스트 또는 첨부 파일이 없는 경우에는 아무런 동작도 하지 않습니다.
+	*/
+	submit() {
+		if (this.loading) {
+			const stopDetail = {};
+			this.fire("stop", { detail: stopDetail });
+			this.dispatchLegacy("u-cancel", stopDetail);
+			return;
+		}
+		const hasValue = this.value && this.value.trim() !== "";
+		const hasFiles = this.files && this.files.length > 0;
+		if (hasValue || hasFiles) {
+			const sendDetail = {
+				value: this.value?.trim() ?? "",
+				files: this.files ? [...this.files] : void 0
+			};
+			this.fire("send", { detail: sendDetail });
+			this.dispatchLegacy("u-submit", sendDetail);
+		}
+	}
+	/**
+	* 0.4.x 호환을 위한 legacy 이벤트를 함께 발행합니다.
+	* `u-submit`/`u-cancel`은 0.6.0에서 제거 예정.
+	*/
+	dispatchLegacy(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+			detail
+		}));
+	}
+	handleRemoveFile(e) {
+		e.stopPropagation();
+		const index = e.target.dataset.index;
+		if (index !== void 0 && this.files) {
+			this.files = this.files.filter((_, i) => i !== Number(index));
+			this.relay(e);
+		}
+	}
+	handleTextBlockInput(e) {
+		e.preventDefault();
+		this.value = e.target.value;
+	}
+	handleTextBlockKeydown(e) {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			this.submit();
+		}
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UPrompt.prototype, "loading", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UPrompt.prototype, "minRows", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UPrompt.prototype, "maxRows", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UPrompt.prototype, "placeholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UPrompt.prototype, "value", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UPrompt.prototype, "files", void 0);
+UPrompt = __decorate([customElement("u-prompt")], UPrompt);
+//#endregion
 export { UPrompt };

package/dist/components/prompt/UPrompt.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/prompt/UPrompt.styles.ts
+var styles = css`
   :host {
     position: relative;
     display: flex;
@@ -38,7 +38,17 @@ const styles = css`
     mask-composite: exclude;
   }
 
-  u-text-block {
+  .files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  .files u-file-block {
+    flex: 0 1 auto;
+  }
+
+  .input {
     flex: 1;
     padding: 8px;
   }
@@ -66,5 +76,5 @@ const styles = css`
     100% { background-position: 0% 0; }
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/references/URefCard.d.ts

@@ -1,7 +1,35 @@
-import { URefCard } from './URefCard.component.js';
+import { UDataElement } from '@iyulab/components/dist/components/UDataElement.js';
+/**
+ * 참조 소스를 카드 형태로 표시하는 공통 컴포넌트입니다.
+ * Web과 Document 타입 모두 지원합니다.
+ */
+export declare class URefCard extends UDataElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    /** 카드 타입 (web 또는 document) */
+    type: 'web' | 'document';
+    /** 외부 링크 URL */
+    url?: string;
+    /** 카드 타이틀 */
+    title: string;
+    /** 카드 본문 스니펫 */
+    snippet?: string;
+    /** 태그 목록 */
+    tags?: string[];
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * UDataElement의 기본 동작을 오버라이드하여 에러를 처리합니다.
+     * 콘솔 출력만 수행합니다.
+     */
+    protected error(error: unknown): Promise<void>;
+    /** 링크 클릭 핸들러 */
+    private handleAnchorClick;
+    /** URL에서 Google의 파비콘 URL을 반환합니다. */
+    private getFaviconUrl;
+    /** URL에서 도메인 사이트 주소를 반환합니다. */
+    private getDomainName;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-ref-card": URefCard;
     }
 }
-export { URefCard };

package/dist/components/references/URefCard.js

@@ -1,5 +1,100 @@
-import { URefCard } from './URefCard.component.js';
+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 "./URefCard.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { arrayAttrConverter } from "@iyulab/components/dist/utilities/converters.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { UDataElement } from "@iyulab/components/dist/components/UDataElement.js";
+//#region src/components/references/URefCard.ts
+var URefCard = class URefCard extends UDataElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "web";
+		this.title = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <a href="${ifDefined(this.url)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
+        <div class="header">
+          <img class="favicon" 
+            src="${this.getFaviconUrl(this.url)}" 
+            alt="favicon"
+          />
+          <div class="title">
+            ${this.title || this.getDomainName(this.url)}
+          </div>
 
-URefCard.define("u-ref-card");
+          <div style="flex: 1;"></div>
 
+          <div class="badge" type=${this.type}>
+            <u-icon 
+              lib="bootstrap" 
+              name=${this.type === "web" ? "globe" : "file-earmark"}
+            ></u-icon>
+            ${this.type.toUpperCase()}
+          </div>
+        </div>
+
+        <div class="body">
+          ${this.snippet}
+        </div>
+        
+        <div class="footer" ?hidden=${!this.tags || this.tags.length === 0}>
+          ${this.tags?.map((tag) => html`<span class="tag">${tag}</span>`)}
+        </div>
+      </a>
+    `;
+	}
+	/**
+	* UDataElement의 기본 동작을 오버라이드하여 에러를 처리합니다.
+	* 콘솔 출력만 수행합니다.
+	*/
+	error(error) {
+		return Promise.resolve(console.error("Error in URefCard:", error));
+	}
+	/** 링크 클릭 핸들러 */
+	handleAnchorClick(e) {
+		if (!this.url) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+	/** URL에서 Google의 파비콘 URL을 반환합니다. */
+	getFaviconUrl(url) {
+		if (!url) return `/favicon.ico`;
+		try {
+			return `https://www.google.com/s2/favicons?sz=64&domain=${new URL(url).hostname}`;
+		} catch {
+			return `/favicon.ico`;
+		}
+	}
+	/** URL에서 도메인 사이트 주소를 반환합니다. */
+	getDomainName(url) {
+		if (!url) return "";
+		try {
+			return new URL(url).hostname;
+		} catch {
+			return "";
+		}
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", String)], URefCard.prototype, "type", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefCard.prototype, "url", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefCard.prototype, "title", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefCard.prototype, "snippet", void 0);
+__decorate([property({
+	type: Array,
+	converter: arrayAttrConverter((v) => v)
+}), __decorateMetadata("design:type", Array)], URefCard.prototype, "tags", void 0);
+URefCard = __decorate([customElement("u-ref-card")], URefCard);
+//#endregion
 export { URefCard };

package/dist/components/references/URefCard.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/references/URefCard.styles.ts
+var styles = css`
   :host {
     display: block;
     width: 380px;
@@ -99,5 +99,5 @@ const styles = css`
     white-space: nowrap;
   }
 `;
-
+//#endregion
 export { styles };