@iyulab/chat-components 0.1.0 → 0.2.0

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 380px;
+    padding: 6px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background: var(--u-panel-bg-color);
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    padding: 6px;
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  a:hover {
+    color: var(--u-blue-600);
+    background-color: var(--u-neutral-50);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .favicon {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .badge {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    line-height: 1;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+  .badge[type="web"] {
+    color: var(--u-blue-700);
+    background: var(--u-blue-0);
+  }
+  .badge[type="document"] {
+    color: var(--u-green-700);
+    background: var(--u-green-0);
+  }
+  .badge u-icon {
+    color: inherit;
+  }
+
+  .body {
+    display: -webkit-box;
+    color: var(--u-txt-color-weak);
+    font-size: 12px;
+    line-height: 1.5;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+  }
+
+  .footer {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+
+  .tag {
+    font-size: 10px;
+    line-height: 1.4;
+    color: var(--u-txt-color-weak);
+    background: var(--u-neutral-100);
+    padding: 2px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+`;
+
+export { styles };

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

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

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

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+import { state } 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 { URefCard } from './URefCard.component.js';
+import { styles } from './URefCardGroup.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 URefCardGroup extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.cards = [];
+    this.currentIndex = 0;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-ref-card": URefCard
+    };
+  }
+  render() {
+    return html`
+      <div class="header">
+        <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) {
+    const slot = e.target;
+    const elements = slot.assignedElements({ flatten: true });
+    this.cards = elements.filter((el) => el instanceof URefCard);
+    this.switch(0);
+  }
+}
+__decorateClass([
+  state()
+], URefCardGroup.prototype, "cards");
+__decorateClass([
+  state()
+], URefCardGroup.prototype, "currentIndex");
+
+export { URefCardGroup };

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

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

package/dist/components/references/URefCardGroup.js

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

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

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

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

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 380px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background: var(--u-panel-bg-color);
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    color: var(--u-txt-color-weak);
+    background-color: var(--u-neutral-100);
+    border-bottom: 1px solid var(--u-border-color);
+    user-select: none;
+  }
+
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .nav-button:hover u-icon {
+    opacity: 0.6;
+  }
+  .nav-button u-icon {
+    color: inherit;
+  }
+
+  .page-indicator {
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .viewport {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .track {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    will-change: transform;
+    transition: transform 260ms ease;
+  }
+
+  /* slot 안의 각 카드가 한 페이지(100%)를 차지하도록 */
+  ::slotted(u-ref-card) {
+    flex: 0 0 100%;
+    border: none;
+  }
+`;
+
+export { styles };

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

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

package/dist/components/{buttons/USendButton.component.js → references/URefTag.component.js}

@@ -1,8 +1,9 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.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 './USendButton.styles.js';
+import { styles } from './URefTag.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,34 +14,36 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class USendButton extends BaseElement {
+class URefTag extends BaseElement {
   constructor() {
     super(...arguments);
-    this.mode = "send";
-    this.disabled = false;
+    this.href = "#";
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-tooltip": UTooltip
     };
   }
   render() {
     return html`
-      <u-icon
-        lib="internal"
-        name=${this.mode === "send" ? "arrow-up" : this.mode === "stop" ? "ban" : this.mode === "retry" ? "arrow-clockwise" : ""}
-      ></u-icon>
+      <a href="${this.href}" target="_blank" rel="noopener noreferrer">
+        <slot></slot>
+      </a>
+
+      <u-icon lib="internal" name="box-arrow-up-right"></u-icon>
+
+      <u-tooltip interactive placement="bottom" distance="4">
+        <slot name="tooltip"></slot>
+      </u-tooltip>
     `;
   }
 }
 __decorateClass([
   property({ type: String })
-], USendButton.prototype, "mode");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], USendButton.prototype, "disabled");
+], URefTag.prototype, "href");
 
-export { USendButton };
+export { URefTag };

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

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

package/dist/components/references/URefTag.js

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

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

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

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

@@ -0,0 +1,51 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    color: var(--u-neutral-800);
+    font-size: 10px;
+    border: 1px solid var(--u-neutral-300);
+    border-radius: 9999px;
+    background-color: var(--u-neutral-100);
+    padding: 2px 6px;
+    transition: background-color 0.2s ease-in-out;
+    cursor: pointer;
+  }
+  :host(:hover) {
+    color: var(--u-neutral-100);
+    background-color: var(--u-neutral-900);
+  }
+
+  a {
+    min-width: 1em;
+    max-width: 6em;
+    display: inline-block;
+    text-decoration: none;
+    color: inherit;
+    line-height: 1.5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  u-icon {
+    color: inherit;
+    font-size: inherit;
+  }
+
+  u-tooltip {
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  u-tooltip[visible] {
+    opacity: 1;
+  }
+`;
+
+export { styles };

package/dist/events/UCancelEvent.d.ts

@@ -0,0 +1,6 @@
+export type UCancelEvent = CustomEvent<undefined>;
+declare global {
+    interface HTMLElementEventMap {
+        'u-cancel': UCancelEvent;
+    }
+}

package/dist/index.d.ts

@@ -1,13 +1,23 @@
 export * from './components/blocks/UCodeBlock.js';
+export * from './components/blocks/UJsonBlock.js';
 export * from './components/blocks/UMarkedBlock.js';
 export * from './components/blocks/UTextBlock.js';
 export * from './components/blocks/UThinkBlock.js';
 export * from './components/blocks/UToolBlock.js';
 export * from './components/buttons/UAttachButton.js';
 export * from './components/buttons/UCopyButton.js';
-export * from './components/buttons/USendButton.js';
-export * from './components/buttons/UThinkButton.js';
-export * from './components/json-viewer/UJsonViewer.js';
+export * from './components/buttons/UVoteButton.js';
+export * from './components/buttons/UReportButton.js';
+export * from './components/buttons/URetryButton.js';
+export * from './components/buttons/UShareButton.js';
+export * from './components/loaders/UDotLoader.js';
 export * from './components/message/UMessage.js';
-export type { UStopEvent } from './events/UStopEvent';
-export type { USubmitEvent } from './events/USubmitEvent';
+export * from './components/prompt/UPrompt.js';
+export * from './components/references/URefTag.js';
+export * from './components/references/URefCard.js';
+export * from './components/references/URefCardGroup.js';
+export type * from './types/BlockItem';
+export type * from './types/BlockReference';
+export type * from './types/JsonNode';
+export type * from './events/UCancelEvent';
+export type * from './events/USubmitEvent';

package/dist/index.js

@@ -1,22 +1,36 @@
 import './components/blocks/UCodeBlock.js';
+import './components/blocks/UJsonBlock.js';
 import './components/blocks/UMarkedBlock.js';
 import './components/blocks/UTextBlock.js';
 import './components/blocks/UThinkBlock.js';
 import './components/blocks/UToolBlock.js';
 import './components/buttons/UAttachButton.js';
 import './components/buttons/UCopyButton.js';
-import './components/buttons/USendButton.js';
-import './components/buttons/UThinkButton.js';
-import './components/json-viewer/UJsonViewer.js';
+import './components/buttons/UVoteButton.js';
+import './components/buttons/UReportButton.js';
+import './components/buttons/URetryButton.js';
+import './components/buttons/UShareButton.js';
+import './components/loaders/UDotLoader.js';
 import './components/message/UMessage.js';
+import './components/prompt/UPrompt.js';
+import './components/references/URefTag.js';
+import './components/references/URefCard.js';
+import './components/references/URefCardGroup.js';
 export { UCodeBlock } from './components/blocks/UCodeBlock.component.js';
+export { UJsonBlock } from './components/blocks/UJsonBlock.component.js';
 export { UMarkedBlock } from './components/blocks/UMarkedBlock.component.js';
 export { UTextBlock } from './components/blocks/UTextBlock.component.js';
 export { UThinkBlock } from './components/blocks/UThinkBlock.component.js';
 export { UToolBlock } from './components/blocks/UToolBlock.component.js';
 export { UAttachButton } from './components/buttons/UAttachButton.component.js';
 export { UCopyButton } from './components/buttons/UCopyButton.component.js';
-export { USendButton } from './components/buttons/USendButton.component.js';
-export { UThinkButton } from './components/buttons/UThinkButton.component.js';
-export { UJsonViewer } from './components/json-viewer/UJsonViewer.component.js';
+export { UVoteButton } from './components/buttons/UVoteButton.component.js';
+export { UReportButton } from './components/buttons/UReportButton.component.js';
+export { URetryButton } from './components/buttons/URetryButton.component.js';
+export { UShareButton } from './components/buttons/UShareButton.component.js';
+export { UDotLoader } from './components/loaders/UDotLoader.component.js';
 export { UMessage } from './components/message/UMessage.component.js';
+export { UPrompt } from './components/prompt/UPrompt.component.js';
+export { URefTag } from './components/references/URefTag.component.js';
+export { URefCard } from './components/references/URefCard.component.js';
+export { URefCardGroup } from './components/references/URefCardGroup.component.js';

package/dist/types/BlockItem.d.ts

@@ -0,0 +1,36 @@
+import { BlockReference } from './BlockReference';
+import { JsonNode } from './JsonNode';
+/** LLM 추론 텍스트 블록입니다. */
+export interface ThinkingBlockItem {
+    type: "thinking";
+    /** 추론 텍스트 내용 */
+    value?: string;
+}
+/** 일반 텍스트 블록입니다. */
+export interface TextBlockItem {
+    type: "text";
+    /** 텍스트 내용 */
+    value?: string;
+}
+/** 마크다운 텍스트 블록입니다. */
+export interface MarkdownBlockItem {
+    type: "markdown";
+    /** 마크다운 텍스트 */
+    value?: string;
+    /** 마크다운 내 인용 출처들 */
+    refs?: BlockReference[];
+}
+/** 툴 사용 블록입니다. */
+export interface ToolBlockItem {
+    type: "tool";
+    /** 도구 블록 제목 */
+    title?: string;
+    /** 도구 블록 입력값(json) */
+    input?: JsonNode;
+    /** 도구 블록 출력값(json) */
+    output?: JsonNode;
+}
+/**
+ * 타입별 메시지 컨텐츠 아이템
+ */
+export type BlockItem = (ThinkingBlockItem | TextBlockItem | MarkdownBlockItem | ToolBlockItem);

package/dist/types/BlockReference.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 블록 참조에서 사용되는 참조 내용입니다.
+ */
+export interface ReferenceSource {
+    /** 자료의 종류 입니다. */
+    type: 'web' | 'document';
+    /** 참조 링크 URL */
+    url: string;
+    /** 제목 */
+    title?: string;
+    /** 발췌 내용 */
+    snippet?: string;
+    /** 태그 */
+    tags?: string[];
+}
+/**
+ * 텍스트 컨텐츠 내 인용 참조 블록
+ */
+export interface TextBlockReference {
+    /** 인용 출처 이름 */
+    name: string;
+    /** 참조 텍스트 시작 위치 (문자 인덱스) */
+    startIndex: number;
+    /** 참조 텍스트 종료 위치 (문자 인덱스) */
+    endIndex: number;
+    /** 원본 참조 내용 */
+    sources: ReferenceSource[];
+}
+/**
+ * 메시지 컨텐츠 내에서 인용 참조 블록
+ */
+export type BlockReference = TextBlockReference;

package/dist/types/JsonNode.d.ts

@@ -0,0 +1,20 @@
+/** JSON 값 타입 */
+export type JsonValue = string | number | boolean | null;
+/** JSON 객체 타입 */
+export type JsonObject = {
+    [x: string]: JsonNode;
+};
+/** JSON 배열 타입 */
+export type JsonArray = Array<JsonNode>;
+/**
+ * JSON 데이터 구조에서 사용할 수 있는 모든 유형의 노드를 표현합니다.
+ * JsonValue(원시값), JsonObject(객체), JsonArray(배열) 중 하나가 될 수 있습니다.
+ *
+ * @example
+ * ```typescript
+ * const primitiveNode: JsonNode = "string value";
+ * const objectNode: JsonNode = { key: "value" };
+ * const arrayNode: JsonNode = [1, 2, 3];
+ * ```
+ */
+export type JsonNode = JsonValue | JsonObject | JsonArray;

package/dist/utilities/converters.d.ts

@@ -0,0 +1,9 @@
+import { JsonNode } from '../types/JsonNode';
+/**
+ * 이 컨버터는 JsonNode 타입을 사용하여 JSON 데이터를 처리합니다.
+ * 문자열 어트리뷰트로 전달된 JSON 문자열을 객체로 변환/직렬화합니다.
+ */
+export declare const jsonAttrConverter: {
+    fromAttribute: (value: string | null) => JsonNode;
+    toAttribute: (value: JsonNode) => string;
+};

package/dist/utilities/converters.js

@@ -0,0 +1,19 @@
+const jsonAttrConverter = {
+  fromAttribute: (value) => {
+    if (!value || !value.trim()) return {};
+    try {
+      return JSON.parse(value);
+    } catch {
+      return {};
+    }
+  },
+  toAttribute: (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "{}";
+    }
+  }
+};
+
+export { jsonAttrConverter };