@iyulab/chat-components 0.1.1 → 0.2.0

package/dist/components/loaders/UDotLoader.styles.js

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+
+const styles = css`
+  svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  circle {
+    animation: bounce 1.05s infinite;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+  circle.d1 {
+    animation-delay: 0.1s;
+  }
+
+  circle.d2 {
+    animation-delay: 0.2s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    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);
+    }
+  }
+`;
+
+export { styles };

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

@@ -1,13 +1,19 @@
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { BlockItem } from './UMessage.types.js';
+import { BlockItem } from '../../types/BlockItem';
+/** 메시지 variant 타입 */
+export type MessageVariant = 'default' | 'bubble';
+/** 메시지 위치 타입 */
+export type MessagePosition = 'left' | 'right';
+/**
+ * 채팅 메시지 컴포넌트입니다.
+ * 다양한 유형의 블록 아이템과 인용 출처를 렌더링할 수 있습니다.
+ */
 export declare class UMessage extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    variant: MessageVariant;
+    position: MessagePosition;
+    loading: boolean;
     items?: BlockItem[];
-    timestamp?: string;
     render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 텍스트 및 마크다운 블록의 내용을 모아서 하나의 문자열로 반환합니다.
-     */
-    private getTextValue;
 }

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

@@ -2,12 +2,11 @@ import { nothing, 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 { UCopyButton } from '../buttons/UCopyButton.component.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 { format } from '../../internals/date-helpers.js';
+import { UDotLoader } from '../loaders/UDotLoader.component.js';
 import { styles } from './UMessage.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -22,18 +21,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UMessage extends BaseElement {
   constructor() {
     super(...arguments);
-    /**
-     * 텍스트 및 마크다운 블록의 내용을 모아서 하나의 문자열로 반환합니다.
-     */
-    this.getTextValue = (items) => {
-      if (!items) return "";
-      return items.reduce((acc, item) => {
-        if (item.type === "text" || item.type === "markdown") {
-          return acc ? acc + "\n" + (item.value || "") : item.value || "";
-        }
-        return acc;
-      }, "");
-    };
+    this.variant = "default";
+    this.position = "left";
+    this.loading = false;
   }
   static {
     this.styles = [super.styles, styles];
@@ -44,61 +34,51 @@ class UMessage extends BaseElement {
       "u-marked-block": UMarkedBlock,
       "u-think-block": UThinkBlock,
       "u-tool-block": UToolBlock,
-      "u-copy-button": UCopyButton
+      "u-dot-loader": UDotLoader
     };
   }
   render() {
     return html`
-      <div class="container">
-        <div class="header" part="header">
-          <slot name="header"></slot>
-        </div>
-        <div class="body" part="body">
-          ${this.items && this.items.length > 0 ? repeat(this.items, (_, idx) => idx, (item, idx) => {
-      return item.type === "text" ? html`
-                  <u-text-block 
-                    .value=${item.value}
-                  ></u-text-block>` : item.type === "markdown" ? html`
-                  <u-marked-block 
-                    .value=${item.value}
-                  ></u-marked-block>` : item.type === "thinking" ? html`
-                  <u-think-block 
-                    ?loading=${this.items?.length === (idx || 0) + 1}
-                    .value=${item.value}
-                  ></u-think-block>` : item.type === "tool" ? html`
-                  <u-tool-block
-                    .index=${idx}
-                    .status=${item.status}
-                    .name=${item.name}
-                    .input=${item.input}
-                    .output=${item.output}
-                  ></u-tool-block>` : nothing;
-    }) : html`
-              <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                  <circle class="dot" cx="4" cy="12" r="3"/>
-                  <circle class="dot d1" cx="12" cy="12" r="3"/>
-                  <circle class="dot d2" cx="20" cy="12" r="3"/>
-              </svg>`}
-        </div>
-        <div class="footer" part="footer">
-          <u-copy-button
-            .value=${this.getTextValue(this.items)}
-          ></u-copy-button>
-          <slot name="footer"></slot>
-          <div style="flex:1;"></div>
-          <div class="timestamp">
-            ${format(this.timestamp)}
-          </div>
-        </div>
+      <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>` : nothing)}
+        <u-dot-loader
+          ?hidden=${!this.loading}
+        ></u-dot-loader>
       </div>
+
+      <slot name="footer" ?hidden=${this.loading}></slot>
     `;
   }
 }
+__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");
-__decorateClass([
-  property({ type: String })
-], UMessage.prototype, "timestamp");
 
 export { UMessage };

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

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export { UMessage };
-export type * from './UMessage.types';

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

@@ -2,70 +2,51 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: block;
-    font-family: 'Roboto', sans-serif;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  .container {
     display: flex;
     flex-direction: column;
   }
-
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  :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;
+  }
+  :host([position="right"]) {
+    align-self: flex-end;
+    align-items: flex-end;
   }
 
   .body {
+    width: 100%;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    padding: 8px;
-    border: none;
-    border-radius: 8px;
   }
-
-  .footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 0px;
-    gap: 12px;
-    font-size: 12px;
+  .body[variant="default"] {
+    padding: 12px;
+    background-color: transparent;
   }
-
-  .loader {
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-  }
-
-  .dot {
-    animation: bounce_action 1.05s infinite
+  .body[variant="bubble"] {
+    padding: 12px 18px;
+    border-radius: 18px;
+    background-color: var(--u-neutral-200, #f3f4f6);
   }
-  .d1 {
-    animation-delay:.1s
+  .body[variant="bubble"][position="left"] {
+    border-bottom-left-radius: 4px;
   }
-  .d2 {
-    animation-delay:.2s
+  .body[variant="bubble"][position="right"] {
+    border-bottom-right-radius: 4px;
   }
 
-  @keyframes bounce_action {
-    0%,57.14% {
-      animation-timing-function: cubic-bezier(0.33,.66,.66,1);
-      transform: translate(0);
-    }
-    28.57% {
-      animation-timing-function: cubic-bezier(0.33,0,.66,.33);
-      transform: translateY(-6px);
-    }
-    100% {
-      transform: translate(0);
-    }
+  u-dot-loader {
+    font-size: 24px;
+    color: var(--u-neutral-800, #6b7280);
   }
 `;
 

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

@@ -0,0 +1,25 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 채팅 입력 컴포넌트입니다.
+ * 텍스트 입력 영역과 우측에 액션 버튼을 배치할 수 있는 슬롯을 제공합니다.
+ */
+export declare class UPrompt extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 로딩 상태 여부 */
+    loading: boolean;
+    /** 최소 행 수 */
+    minRows: number;
+    /** 최대 행 수 */
+    maxRows: number;
+    /** 입력 필드의 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 입력 필드의 값 */
+    value?: string;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    send(): void;
+    private handleTextBlockInput;
+    private handleTextBlockKeydown;
+    private handleSendButtonClick;
+}

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

@@ -0,0 +1,113 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.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';
+import { styles } from './UPrompt.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class UPrompt extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.minRows = 1;
+    this.maxRows = 10;
+    this.handleSendButtonClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.send();
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-text-block": UTextBlock
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+  }
+  render() {
+    return html`
+      <slot name="header"></slot>
+
+      <u-text-block part="input"
+        editable
+        .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="internal"
+            name=${this.loading ? "stop-circle" : "arrow-up"}
+          ></u-icon>
+        </u-button>
+      </div>
+      
+      <slot name="footer"></slot>
+    `;
+  }
+  send() {
+    const value = this.value?.trim();
+    if (this.loading) {
+      this.emit("u-cancel");
+    } else if (value) {
+      this.emit("u-submit", { value: this.value });
+      this.value = "";
+    } else ;
+  }
+  handleTextBlockInput(e) {
+    e.preventDefault();
+    const target = e.target;
+    this.value = target.value;
+  }
+  handleTextBlockKeydown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      this.send();
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UPrompt.prototype, "loading");
+__decorateClass([
+  property({ type: Number })
+], UPrompt.prototype, "minRows");
+__decorateClass([
+  property({ type: Number })
+], UPrompt.prototype, "maxRows");
+__decorateClass([
+  property({ type: String })
+], UPrompt.prototype, "placeholder");
+__decorateClass([
+  property({ type: String })
+], UPrompt.prototype, "value");
+
+export { UPrompt };

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

@@ -0,0 +1,7 @@
+import { UPrompt } from './UPrompt.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-prompt": UPrompt;
+    }
+}
+export { UPrompt };

package/dist/components/prompt/UPrompt.js

@@ -0,0 +1,5 @@
+import { UPrompt } from './UPrompt.component.js';
+
+UPrompt.define("u-prompt");
+
+export { UPrompt };

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

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

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

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    border: 1px solid var(--u-border-color, #e0e0e0);
+    border-radius: 8px;
+    background-color: var(--u-bg-color);
+  }
+  :host(:focus-within) {
+    outline: none;
+    border-color: var(--u-neutral-400, #9ca3af);
+    box-shadow: 0 0 0 1px var(--u-neutral-200, #9ca3af);
+  }
+
+  u-text-block {
+    flex: 1;
+    padding: 8px;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  
+  .send-btn {
+    font-size: 16px;
+    color: var(--u-neutral-0);
+    background-color: var(--u-neutral-800);
+  }
+  .send-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,22 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 참조 소스를 카드 형태로 표시하는 공통 컴포넌트입니다.
+ * Web과 Document 타입 모두 지원합니다.
+ */
+export declare class URefCard extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 카드 타입 (web 또는 document) */
+    type: 'web' | 'document';
+    /** 외부 링크 URL */
+    href: string;
+    /** 카드 타이틀 */
+    heading?: string;
+    /** 태그 목록 */
+    tags?: string[];
+    render(): import('lit-html').TemplateResult<1>;
+    /** URL에서 Google의 파비콘 URL을 반환합니다. */
+    private getFaviconUrl;
+    /** URL에서 도메인 사이트 주소를 반환합니다. */
+    private getPageTitle;
+}

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

@@ -0,0 +1,96 @@
+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 { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { styles } from './URefCard.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class URefCard extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.type = "web";
+    this.href = "#";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  render() {
+    return html`
+      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
+        <div class="header">
+          <img class="favicon" 
+            src="${this.getFaviconUrl(this.href)}" 
+            alt="favicon"
+          />
+          <div class="title" title="${ifDefined(this.heading)}">
+            ${this.heading || this.getPageTitle(this.href)}
+          </div>
+
+          <div style="flex: 1;"></div>
+
+          <div class="badge" type=${this.type}>
+            <u-icon 
+              lib="internal" 
+              name=${this.type === "web" ? "globe" : "file-earmark"}
+            ></u-icon>
+            ${this.type.toUpperCase()}
+          </div>
+        </div>
+
+        <div class="body">
+          <slot></slot>
+        </div>
+        
+        <div class="footer" ?hidden=${!this.tags || this.tags.length === 0}>
+          ${this.tags?.map((tag) => html`<span class="tag">${tag}</span>`)}
+        </div>
+      </a>
+    `;
+  }
+  /** URL에서 Google의 파비콘 URL을 반환합니다. */
+  getFaviconUrl(url) {
+    try {
+      const hostname = new URL(url).hostname;
+      return `https://www.google.com/s2/favicons?sz=64&domain=${hostname}`;
+    } catch {
+      return `/favicon.ico`;
+    }
+  }
+  /** URL에서 도메인 사이트 주소를 반환합니다. */
+  getPageTitle(url) {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return "Unkown";
+    }
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], URefCard.prototype, "type");
+__decorateClass([
+  property({ type: String })
+], URefCard.prototype, "href");
+__decorateClass([
+  property({ type: String })
+], URefCard.prototype, "heading");
+__decorateClass([
+  property({ type: Array, converter: arrayAttrConverter((v) => v) })
+], URefCard.prototype, "tags");
+
+export { URefCard };

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

@@ -0,0 +1,7 @@
+import { URefCard } from './URefCard.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-ref-card": URefCard;
+    }
+}
+export { URefCard };

package/dist/components/references/URefCard.js

@@ -0,0 +1,5 @@
+import { URefCard } from './URefCard.component.js';
+
+URefCard.define("u-ref-card");
+
+export { URefCard };

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

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