@iyulab/chat-components 0.3.0 → 0.4.0

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UVoteButton extends BaseElement {
+class UVoteButton extends UElement {
   constructor() {
     super(...arguments);
     this.value = "none";
@@ -57,8 +57,11 @@ class UVoteButton extends BaseElement {
         ></u-icon>
       </u-button>
 
-      <u-tooltip for="u-button" placement="bottom" distance="8">
-        <slot></slot>
+      <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>
     `;
   }

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

@@ -1,19 +1,19 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { BlockItem } from '../../types/BlockItem';
+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 BaseElement {
+export declare class UMessage extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
+    loading: boolean;
     variant: MessageVariant;
     position: MessagePosition;
-    loading: boolean;
-    items?: BlockItem[];
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -1,13 +1,6 @@
-import { nothing, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { UTextBlock } from '../blocks/UTextBlock.component.js';
-import { UMarkedBlock } from '../blocks/UMarkedBlock.component.js';
-import { UThinkBlock } from '../blocks/UThinkBlock.component.js';
-import { UToolBlock } from '../blocks/UToolBlock.component.js';
-import { URefBlock } from '../blocks/URefBlock.component.js';
-import { UDotLoader } from '../loaders/UDotLoader.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { styles } from './UMessage.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -19,72 +12,45 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UMessage extends BaseElement {
+class UMessage extends UElement {
   constructor() {
     super(...arguments);
+    this.loading = false;
     this.variant = "default";
     this.position = "left";
-    this.loading = false;
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
-    this.dependencies = {
-      "u-text-block": UTextBlock,
-      "u-marked-block": UMarkedBlock,
-      "u-think-block": UThinkBlock,
-      "u-tool-block": UToolBlock,
-      "u-ref-block": URefBlock,
-      "u-dot-loader": UDotLoader
-    };
+    this.dependencies = {};
   }
   render() {
     return html`
       <slot name="header"></slot>
-      
+
       <div class="body" part="body" variant=${this.variant} position=${this.position}>
-        ${repeat(this.items || [], (_, idx) => idx, (item, idx) => item.type === "text" ? html`
-              <u-text-block
-                .value=${item.value}
-              ></u-text-block>` : item.type === "markdown" ? html`
-              <u-marked-block
-                .value=${item.value}
-                .refs=${item.refs}
-              ></u-marked-block>` : item.type === "thinking" ? html`
-              <u-think-block 
-                .value=${item.value}
-              ></u-think-block>` : item.type === "tool" ? html`
-              <u-tool-block
-                index=${idx}
-                .heading=${item.title}
-                .input=${item.input}
-                .output=${item.output}
-              ></u-tool-block>` : item.type === "reference" ? html`
-              <u-ref-block
-                .heading=${"References"}
-                .sources=${item.sources}
-              ></u-ref-block>` : nothing)}
-        <u-dot-loader
-          ?hidden=${!this.loading}
-        ></u-dot-loader>
+        <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>
     `;
   }
 }
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UMessage.prototype, "loading");
 __decorateClass([
   property({ type: String, reflect: true })
 ], UMessage.prototype, "variant");
 __decorateClass([
   property({ type: String, reflect: true })
 ], UMessage.prototype, "position");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UMessage.prototype, "loading");
-__decorateClass([
-  property({ type: Array })
-], UMessage.prototype, "items");
 
 export { UMessage };

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

@@ -2,17 +2,11 @@ import { css } from 'lit';
 
 const 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,9 +38,42 @@ 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);
+    }
   }
 `;
 

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

@@ -1,11 +1,11 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 채팅 입력 컴포넌트입니다.
  * 텍스트 입력 영역과 우측에 액션 버튼을 배치할 수 있는 슬롯을 제공합니다.
  */
-export declare class UPrompt extends BaseElement {
+export declare class UPrompt extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 로딩 상태 여부 */
     loading: boolean;
     /** 최소 행 수 */

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { UTextBlock } from '../blocks/UTextBlock.component.js';
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class UPrompt extends BaseElement {
+class UPrompt extends UElement {
   constructor() {
     super(...arguments);
     this.loading = false;

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

@@ -2,6 +2,7 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
+    position: relative;
     display: flex;
     flex-direction: column;
     padding: 12px;
@@ -14,6 +15,28 @@ 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;
+  }
 
   u-text-block {
     flex: 1;
@@ -37,6 +60,11 @@ const styles = css`
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  @keyframes border-shimmer {
+    0%   { background-position: 100% 0; }
+    100% { background-position: 0% 0; }
+  }
 `;
 
 export { styles };

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

@@ -1,17 +1,20 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
 /**
  * 참조 소스를 카드 형태로 표시하는 공통 컴포넌트입니다.
  * Web과 Document 타입 모두 지원합니다.
  */
-export declare class URefCard extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+export declare class URefCard extends UJsonElement {
+    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
+    static dependencies: Record<string, typeof UElement>;
     /** 카드 타입 (web 또는 document) */
     type: 'web' | 'document';
     /** 외부 링크 URL */
-    href?: string;
+    url?: string;
     /** 카드 타이틀 */
-    heading?: string;
+    title: string;
+    /** 카드 본문 스니펫 */
+    snippet?: string;
     /** 태그 목록 */
     tags?: string[];
     render(): import('lit-html').TemplateResult<1>;

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

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { arrayAttrConverter } from '@iyulab/components/dist/utilities/converters.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { styles } from './URefCard.styles.js';
 
@@ -15,10 +15,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class URefCard extends BaseElement {
+class URefCard extends UJsonElement {
   constructor() {
     super(...arguments);
     this.type = "web";
+    this.title = "";
   }
   static {
     this.styles = [super.styles, styles];
@@ -30,15 +31,15 @@ class URefCard extends BaseElement {
   }
   render() {
     return html`
-      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+      <a href="${ifDefined(this.url)}" target="_blank" rel="noopener noreferrer"
         @click=${this.handleAnchorClick}>
         <div class="header">
           <img class="favicon" 
-            src="${this.getFaviconUrl(this.href)}" 
+            src="${this.getFaviconUrl(this.url)}" 
             alt="favicon"
           />
-          <div class="title" title="${ifDefined(this.heading)}">
-            ${this.heading || this.getDomainName(this.href)}
+          <div class="title">
+            ${this.title || this.getDomainName(this.url)}
           </div>
 
           <div style="flex: 1;"></div>
@@ -53,7 +54,7 @@ class URefCard extends BaseElement {
         </div>
 
         <div class="body">
-          <slot></slot>
+          ${this.snippet}
         </div>
         
         <div class="footer" ?hidden=${!this.tags || this.tags.length === 0}>
@@ -64,7 +65,7 @@ class URefCard extends BaseElement {
   }
   /** 링크 클릭 핸들러 */
   handleAnchorClick(e) {
-    if (!this.href) {
+    if (!this.url) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -94,10 +95,13 @@ __decorateClass([
 ], URefCard.prototype, "type");
 __decorateClass([
   property({ type: String })
-], URefCard.prototype, "href");
+], URefCard.prototype, "url");
 __decorateClass([
   property({ type: String })
-], URefCard.prototype, "heading");
+], URefCard.prototype, "title");
+__decorateClass([
+  property({ type: String })
+], URefCard.prototype, "snippet");
 __decorateClass([
   property({ type: Array, converter: arrayAttrConverter((v) => v) })
 ], URefCard.prototype, "tags");

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

@@ -1,12 +1,13 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { URefCard } from './URefCard.component.js';
 /**
  * 여러 참조 카드를 그룹으로 표시하는 컴포넌트입니다.
  * 페이지네이션 기능을 제공하여 각 카드를 하나씩 탐색할 수 있습니다.
+ * 카드가 1개 이하인 경우 페이지네이션 UI는 자동으로 숨겨집니다.
  */
-export declare class URefCardGroup extends BaseElement {
+export declare class URefCardGroup extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** slot으로 받은 카드 엘리먼트들 */
     cards: URefCard[];
     /** 현재 표시 중인 카드의 인덱스 */

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

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { state } from 'lit/decorators.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { URefCard } from './URefCard.component.js';
 import { styles } from './URefCardGroup.styles.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class URefCardGroup extends BaseElement {
+class URefCardGroup extends UElement {
   constructor() {
     super(...arguments);
     this.cards = [];
@@ -31,7 +31,7 @@ class URefCardGroup extends BaseElement {
   }
   render() {
     return html`
-      <div class="header">
+      <div class="header" ?hidden=${this.cards.length <= 1}>
         <button class="nav-button"
           @click=${this.handlePreviousButtonClick}>
           <u-icon lib="internal" name="chevron-left"></u-icon>

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

@@ -1,10 +1,10 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * 인용 태그 컴포넌트입니다.
  */
-export declare class URefTag extends BaseElement {
+export declare class URefTag extends UElement {
     static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
+    static dependencies: Record<string, typeof UElement>;
     /** 인용 출처 소스 데이터 */
     href?: string;
     render(): import('lit-html').TemplateResult<1>;

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

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
 import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
 import { styles } from './URefTag.styles.js';
@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class URefTag extends BaseElement {
+class URefTag extends UElement {
   static {
     this.styles = [super.styles, styles];
   }

package/dist/components/widgets/UChartWidget.component.d.ts

@@ -0,0 +1,36 @@
+import { nothing, PropertyValues } from 'lit';
+import { ChartType, ChartData, ChartOptions } from 'chart.js/auto';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * 차트 위젯 컴포넌트
+ * Chart.js를 사용하여 다양한 차트를 렌더링
+ */
+export declare class UChartWidget extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof UElement>;
+    /** 차트 유형 (bar, line, pie 등) */
+    type?: ChartType;
+    /** 차트 데이터 */
+    data?: ChartData;
+    /** 차트 옵션 */
+    options?: ChartOptions;
+    private canvas?;
+    private viewport?;
+    /** 차트 생성 에러 메시지 */
+    private error;
+    private chartjs;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    /** Chart.js로 차트 생성 */
+    private createChart;
+    /** 기존 차트 인스턴스 제거 */
+    private destroyChart;
+    /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
+    private applyTheme;
+    private handleDownloadPNG;
+    private handleDownloadJSON;
+    private handleFullscreen;
+}