@iyulab/chat-components 0.3.0 → 0.5.0

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

@@ -1,18 +1,12 @@
-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%;
     display: flex;
     flex-direction: column;
   }
-  :host([variant="default"]) {
-    width: 100%;
-  }
-  :host([variant="bubble"]) {
-    width: auto;
-    min-width: 40px;
-    max-width: 80%;
-  }
   :host([position="left"]) {
     align-self: flex-start;
     align-items: flex-start;
@@ -44,10 +38,43 @@ const styles = css`
     border-bottom-right-radius: 4px;
   }
 
-  u-dot-loader {
-    font-size: 24px;
-    color: var(--u-neutral-800, #6b7280);
+  .dot-loader {
+    width: 24px;
+    height: 24px;
+    fill: var(--u-neutral-800, #6b7280);
+  }
+  .dot-loader circle {
+    animation: bounce 1.05s infinite;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  .dot-loader circle.d1 {
+    animation-delay: 0.1s;
+  }
+  .dot-loader circle.d2 {
+    animation-delay: 0.2s;
   }
-`;
 
+  @media (prefers-reduced-motion: reduce) {
+    .dot-loader circle {
+      animation: none;
+      transform: none;
+    }
+  }
+
+  @keyframes bounce {
+    0%,57.14% {
+      animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+      transform: translateY(0);
+    }
+    28.57% {
+      animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+      transform: translateY(-6px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+`;
+//#endregion
 export { styles };

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

@@ -1,7 +1,37 @@
-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;
+    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,121 @@
-import { UPrompt } from './UPrompt.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 "../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) {
+			this.fire("stop");
+			return;
+		}
+		const hasValue = this.value && this.value.trim() !== "";
+		const hasFiles = this.files && this.files.length > 0;
+		if (hasValue || hasFiles) this.fire("send");
+	}
+	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,7 +1,8 @@
-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;
     flex-direction: column;
     padding: 12px;
@@ -14,8 +15,40 @@ const styles = css`
     border-color: var(--u-neutral-400, #9ca3af);
     box-shadow: 0 0 0 1px var(--u-neutral-200, #9ca3af);
   }
+  :host([loading])::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 10px;
+    padding: 2px;
+    background: linear-gradient(90deg,
+      transparent 0%,
+      transparent 25%,
+      #f9a8d4 45%,
+      #fbbf24 55%,
+      transparent 75%,
+      transparent 100%
+    );
+    background-size: 300% 100%;
+    animation: border-shimmer 2s linear infinite;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  .files {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+  .files u-file-block {
+    flex: 0 1 auto;
+  }
 
-  u-text-block {
+  .input {
     flex: 1;
     padding: 8px;
   }
@@ -37,6 +70,11 @@ const styles = css`
     opacity: 0.5;
     cursor: not-allowed;
   }
-`;
 
+  @keyframes border-shimmer {
+    0%   { background-position: 100% 0; }
+    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.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.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 };

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

@@ -1,7 +1,30 @@
-import { URefCardGroup } from './URefCardGroup.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { URefCard } from './URefCard.js';
+/**
+ * 여러 참조 카드를 그룹으로 표시하는 컴포넌트입니다.
+ * 페이지네이션 기능을 제공하여 각 카드를 하나씩 탐색할 수 있습니다.
+ * 카드가 1개 이하인 경우 페이지네이션 UI는 자동으로 숨겨집니다.
+ */
+export declare class URefCardGroup extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** slot으로 받은 카드 엘리먼트들 */
+    cards: URefCard[];
+    /** 현재 표시 중인 카드의 인덱스 */
+    currentIndex: number;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 해당하는 인덱스에 해당하는 카드로 변경합니다.
+     */
+    switch(index: number): void;
+    /** 이전 카드로 이동합니다. */
+    private handlePreviousButtonClick;
+    /** 다음 카드로 이동합니다. */
+    private handleNextButtonClick;
+    /** slot 내용이 변경될 때 호출됩니다. */
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-ref-card-group": URefCardGroup;
     }
 }
-export { URefCardGroup };

package/dist/components/references/URefCardGroup.js

@@ -1,5 +1,70 @@
-import { URefCardGroup } from './URefCardGroup.component.js';
-
-URefCardGroup.define("u-ref-card-group");
-
+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 { URefCard } from "./URefCard.js";
+import { styles } from "./URefCardGroup.styles.js";
+import { html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import "@iyulab/components/dist/components/icon/UIcon.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/references/URefCardGroup.ts
+var URefCardGroup = class URefCardGroup extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.cards = [];
+		this.currentIndex = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <div class="header" ?hidden=${this.cards.length <= 1}>
+        <button class="nav-button"
+          @click=${this.handlePreviousButtonClick}>
+          <u-icon lib="internal" name="chevron-left"></u-icon>
+        </button>
+        
+        <span class="page-indicator">
+          ${this.currentIndex + 1} / ${this.cards.length}
+        </span>
+        
+        <button class="nav-button"
+          @click=${this.handleNextButtonClick}>
+          <u-icon lib="internal" name="chevron-right"></u-icon>
+        </button>
+      </div>
+      
+      <div class="viewport">
+        <div class="track" style=${`transform: translateX(-${this.currentIndex * 100}%);`}>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+	}
+	/**
+	* 해당하는 인덱스에 해당하는 카드로 변경합니다.
+	*/
+	switch(index) {
+		const len = this.cards.length;
+		if (len === 0) return;
+		this.currentIndex = index < 0 ? len - 1 : index >= len ? 0 : index;
+	}
+	/** 이전 카드로 이동합니다. */
+	handlePreviousButtonClick() {
+		this.switch(this.currentIndex - 1);
+	}
+	/** 다음 카드로 이동합니다. */
+	handleNextButtonClick() {
+		this.switch(this.currentIndex + 1);
+	}
+	/** slot 내용이 변경될 때 호출됩니다. */
+	handleSlotChange(e) {
+		this.cards = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof URefCard);
+		this.switch(0);
+	}
+};
+__decorate([state(), __decorateMetadata("design:type", Array)], URefCardGroup.prototype, "cards", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], URefCardGroup.prototype, "currentIndex", void 0);
+URefCardGroup = __decorate([customElement("u-ref-card-group")], URefCardGroup);
+//#endregion
 export { URefCardGroup };

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

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

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

@@ -1,7 +1,17 @@
-import { URefTag } from './URefTag.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 인용 태그 컴포넌트입니다.
+ */
+export declare class URefTag extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 인용 출처 소스 데이터 */
+    href?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 링크 클릭 핸들러 */
+    private handleAnchorClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-ref-tag': URefTag;
     }
 }
-export { URefTag };

package/dist/components/references/URefTag.js

@@ -1,5 +1,40 @@
-import { URefTag } from './URefTag.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 "./URefTag.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/tooltip/UTooltip.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/references/URefTag.ts
+var URefTag = class URefTag extends UElement {
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
+        <slot></slot>
+      </a>
 
-URefTag.define("u-ref-tag");
+      <u-icon lib="bootstrap" name="box-arrow-up-right"></u-icon>
 
+      <u-tooltip interactive placement="bottom" distance="4">
+        <slot name="tooltip"></slot>
+      </u-tooltip>
+    `;
+	}
+	/** 링크 클릭 핸들러 */
+	handleAnchorClick(e) {
+		if (!this.href) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefTag.prototype, "href", void 0);
+URefTag = __decorate([customElement("u-ref-tag")], URefTag);
+//#endregion
 export { URefTag };

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

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/references/URefTag.styles.ts
+var styles = css`
   :host {
     display: inline-flex;
     flex-direction: row;
@@ -47,5 +47,5 @@ const styles = css`
     opacity: 1;
   }
 `;
-
+//#endregion
 export { styles };