@iyulab/chat-components 0.1.1 → 0.3.0

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

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UShareButton.styles.js';
+
+class UShareButton extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="share"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+
+export { UShareButton };

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

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

package/dist/components/buttons/UShareButton.js

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

package/dist/components/buttons/UShareButton.styles.d.ts

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

package/dist/components/buttons/UShareButton.styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,15 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/** 투표 상태 타입 */
+export type VoteValue = 'none' | 'up' | 'down';
+/**
+ * 투표 버튼 컴포넌트입니다.
+ */
+export declare class UVoteButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 현재 투표 상태 */
+    value: VoteValue;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleUpButtonClick;
+    private handleDownButtonClick;
+}

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

@@ -0,0 +1,70 @@
+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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UVoteButton.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 UVoteButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.value = "none";
+    this.handleUpButtonClick = () => {
+      this.value = this.value === "up" ? "none" : "up";
+      this.emit("u-change", { value: this.value });
+    };
+    this.handleDownButtonClick = () => {
+      this.value = this.value === "down" ? "none" : "down";
+      this.emit("u-change", { value: this.value });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button class="up-btn" part="up-btn"
+        variant="borderless"
+        @click=${this.handleUpButtonClick}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.value === "up" ? "hand-thumbs-up-fill" : "hand-thumbs-up"}
+        ></u-icon>
+      </u-button>
+      <u-button class="down-btn" part="down-btn"
+        variant="borderless"
+        @click=${this.handleDownButtonClick}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.value === "down" ? "hand-thumbs-down-fill" : "hand-thumbs-down"}
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UVoteButton.prototype, "value");
+
+export { UVoteButton };

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

@@ -0,0 +1,8 @@
+import { UVoteButton } from './UVoteButton.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-vote-button': UVoteButton;
+    }
+}
+export { UVoteButton };
+export type { VoteValue } from './UVoteButton.component.js';

package/dist/components/buttons/UVoteButton.js

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

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

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

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

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

package/dist/components/loaders/UDotLoader.component.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 점 3개 로더 컴포넌트입니다.
+ */
+export declare class UDotLoader extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { styles } from './UDotLoader.styles.js';
+
+class UDotLoader extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  render() {
+    return html`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <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>
+    `;
+  }
+}
+
+export { UDotLoader };

package/dist/components/loaders/UDotLoader.d.ts

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

package/dist/components/loaders/UDotLoader.js

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

package/dist/components/loaders/UDotLoader.styles.d.ts

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

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,12 @@ 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 { URefBlock } from '../blocks/URefBlock.component.js';
+import { UDotLoader } from '../loaders/UDotLoader.component.js';
 import { styles } from './UMessage.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -22,18 +22,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 +35,56 @@ class UMessage extends BaseElement {
       "u-marked-block": UMarkedBlock,
       "u-think-block": UThinkBlock,
       "u-tool-block": UToolBlock,
-      "u-copy-button": UCopyButton
+      "u-ref-block": URefBlock,
+      "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>` : 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>
       </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;
+}