@iyulab/chat-components 0.1.1 → 0.3.0

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

@@ -0,0 +1,54 @@
+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 { 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';
+
+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 URefTag extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
+        <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>
+    `;
+  }
+  /** 링크 클릭 핸들러 */
+  handleAnchorClick(e) {
+    if (!this.href) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], URefTag.prototype, "href");
+
+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,24 @@
 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/blocks/URefBlock.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/JsonNode';
+export type * from './types/References';
+export type * from './events/UCancelEvent';
+export type * from './events/USubmitEvent';

package/dist/index.js

@@ -1,22 +1,38 @@
 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/blocks/URefBlock.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 { UAttachButton } from './components/buttons/UAttachButton.component.js';
 export { UCodeBlock } from './components/blocks/UCodeBlock.component.js';
+export { UCopyButton } from './components/buttons/UCopyButton.component.js';
+export { UDotLoader } from './components/loaders/UDotLoader.component.js';
+export { UJsonBlock } from './components/blocks/UJsonBlock.component.js';
 export { UMarkedBlock } from './components/blocks/UMarkedBlock.component.js';
+export { UMessage } from './components/message/UMessage.component.js';
+export { UPrompt } from './components/prompt/UPrompt.component.js';
+export { URefBlock } from './components/blocks/URefBlock.component.js';
+export { URefCard } from './components/references/URefCard.component.js';
+export { URefCardGroup } from './components/references/URefCardGroup.component.js';
+export { URefTag } from './components/references/URefTag.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 { 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 { UMessage } from './components/message/UMessage.component.js';
+export { UVoteButton } from './components/buttons/UVoteButton.component.js';

package/dist/types/BlockItem.d.ts

@@ -0,0 +1,42 @@
+import { ReferenceSource, ReferenceCitation } from './References';
+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?: ReferenceCitation[];
+}
+/** 툴 사용 블록입니다. */
+export interface ToolBlockItem {
+    type: "tool";
+    /** 도구 블록 제목 */
+    title?: string;
+    /** 도구 블록 입력값(json) */
+    input?: JsonNode;
+    /** 도구 블록 출력값(json) */
+    output?: JsonNode;
+}
+/** 출처 정보 */
+export interface ReferenceBlockItem {
+    type: "reference";
+    /** 출처 목록 */
+    sources: ReferenceSource[];
+}
+/**
+ * 타입별 메시지 컨텐츠 아이템
+ */
+export type BlockItem = (ThinkingBlockItem | TextBlockItem | MarkdownBlockItem | ToolBlockItem | ReferenceBlockItem);

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/types/References.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 참조에서 사용되는 원본 내용입니다.
+ */
+export interface ReferenceSource {
+    /** 자료의 종류 입니다. */
+    type: 'web' | 'document';
+    /** 참조 링크 URL */
+    url?: string;
+    /** 제목 */
+    title?: string;
+    /** 발췌 내용 */
+    snippet?: string;
+    /** 태그 */
+    tags?: string[];
+}
+/**
+ * 본문 내 참조 인용 정보입니다.
+ */
+export interface ReferenceCitation {
+    /** 참조 텍스트 시작 위치 (문자 인덱스) */
+    startIndex: number;
+    /** 참조 텍스트 종료 위치 (문자 인덱스) */
+    endIndex: number;
+    /** 본문에 표시될 참조 라벨 (예: [1], (Smith et al., 2023)) */
+    label?: string;
+    /** 원본 참조 내용 */
+    sources: ReferenceSource[];
+}

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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -37,29 +37,28 @@
     }
   },
   "scripts": {
-    "start": "vite",
+    "test": "vite",
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "0.1.10",
+    "@iyulab/components": "0.2.0",
     "dompurify": "^3.3.1",
     "highlight.js": "^11.11.1",
-    "lit": "^3.3.1",
+    "lit": "^3.3.2",
     "marked": "^17.0.1",
-    "marked-alert": "^2.1.2",
-    "marked-footnote": "^1.4.0",
     "marked-katex-extension": "^5.1.6"
   },
   "devDependencies": {
-    "@lit/react": "^1.0.8",
     "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.3",
+    "@lit/react": "^1.0.8",
+    "@types/node": "^25.0.9",
     "eslint": "^9.39.2",
     "eslint-plugin-lit": "^2.1.1",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
+    "openai": "^6.16.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0",
-    "vite": "^7.3.0",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
 }

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

@@ -1,13 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-/**
- * 메시지 전송/중단 버튼 컴포넌트입니다.
- */
-export declare class USendButton extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    /** 로딩 상태 (로딩 중일 때 중단 버튼으로 변경됨) */
-    mode: "send" | "stop" | "retry";
-    /** 비활성화 상태 */
-    disabled: boolean;
-    render(): import('lit-html').TemplateResult<1>;
-}

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

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

package/dist/components/buttons/USendButton.js

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

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

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    display: inline-flex;
-    padding: 8px;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    border: 1px solid var(--u-border-color, #d1d5db);
-    background-color: var(--u-neutral-200, #e5e7eb);
-    cursor: pointer;
-  }
-  :host(:hover) {
-    background-color: var(--u-neutral-300, #d1d5db);
-  }
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-`;
-
-export { styles };

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

@@ -1,19 +0,0 @@
-import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-export type ThinkingValue = "low" | "medium" | "high" | "none";
-/**
- * 모델이 추론을 사용하고자 할 때 사용하는 버튼입니다.
- */
-export declare class UThinkButton extends BaseElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof BaseElement>;
-    private readonly states;
-    /** 비활성화 상태 */
-    disabled: boolean;
-    /** 추론 활성화 값 */
-    value: ThinkingValue;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 현재 추론 상태에 따라 아이콘 이름을 반환합니다. */
-    private getIconName;
-    /** 현재 추론 상태를 변경합니다. */
-    private changeValue;
-}

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

@@ -1,73 +0,0 @@
-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 { styles } from './UThinkButton.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 UThinkButton extends BaseElement {
-  constructor() {
-    super(...arguments);
-    this.states = ["none", "low", "medium", "high"];
-    this.disabled = false;
-    this.value = "none";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon
-    };
-  }
-  render() {
-    return html`
-      <div class="container" @click="${this.changeValue}">
-        <u-icon lib="internal" name=${this.getIconName()}></u-icon>
-        <div class="indicators">
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-      </div>
-    `;
-  }
-  /** 현재 추론 상태에 따라 아이콘 이름을 반환합니다. */
-  getIconName() {
-    switch (this.value) {
-      case "low":
-        return "lightbulb";
-      case "medium":
-        return "lightbulb";
-      case "high":
-        return "lightbulb-fill";
-      default:
-        return "lightbulb-off";
-    }
-  }
-  /** 현재 추론 상태를 변경합니다. */
-  changeValue() {
-    if (this.disabled) return;
-    this.value ||= "none";
-    const currentIdx = this.states.indexOf(this.value);
-    const nextIdx = (currentIdx + 1) % this.states.length;
-    this.value = this.states[nextIdx];
-    this.emit("change", this.value);
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UThinkButton.prototype, "disabled");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UThinkButton.prototype, "value");
-
-export { UThinkButton };

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

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

package/dist/components/buttons/UThinkButton.js

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

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

@@ -1,72 +0,0 @@
-import { css } from 'lit';
-
-const styles = css`
-  :host {
-    position: relative;
-    padding: 8px;
-    font-size: 16px;
-    border-radius: 8px;
-    cursor: pointer;
-    user-select: none;
-  }
-  :host(:hover) {
-    background-color: var(--u-neutral-100);
-  }
-  :host([disabled]) {
-    opacity: 0.5;
-    pointer-events: none;
-    background-color: transparent;
-    cursor: not-allowed;
-  }
-  /* u-icon 스타일 */
-  :host([value="low"]) u-icon {
-    filter: brightness(0.8);
-    color: var(--u-yellow-700);
-  }
-  :host([value="medium"]) u-icon {
-    color: var(--u-yellow-700);
-  }
-  :host([value="high"]) u-icon {
-    color: var(--u-yellow-700);
-  }
-  /* indicators 스타일 */
-  :host([value="low"]) .indicators > span:last-child {
-    background-color: var(--u-yellow-700);
-  }
-  :host([value="medium"]) .indicators > span:nth-last-child(-n+2) {
-    background-color: var(--u-yellow-700);
-  }
-  :host([value="high"]) .indicators > span {
-    background-color: var(--u-yellow-700);
-  }
-
-  .container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-  }
-
-  u-icon {
-    font-size: inherit;
-    color: #e0e0e0;
-    transition: color 0.3s ease, filter 0.3s ease;
-  }
-
-  .indicators {
-    height: 1em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .indicators > span {
-    width: 0.5em;
-    height: 0.2em;
-    border-radius: 2px;
-    background-color: #e0e0e0;
-    transition: background-color 0.3s ease;
-  }
-`;
-
-export { styles };

package/dist/components/json-viewer/UJsonViewer.d.ts

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

package/dist/components/json-viewer/UJsonViewer.js

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

package/dist/components/json-viewer/UJsonViewer.lib.d.ts

@@ -1,16 +0,0 @@
-export type JsonValue = string | number | boolean | null;
-export type JsonObject = {
-    [x: string]: JsonNode;
-};
-export type JsonArray = Array<JsonNode>;
-export type JsonNode = JsonValue | JsonObject | JsonArray;
-/**
- * 이 컨버터는 JsonNode 타입을 사용하여 JSON 데이터를 처리합니다.
- * 문자열 어트리뷰트로 전달된 JSON 문자열을 객체로 변환/직렬화합니다.
- */
-export declare const jsonConverter: {
-    fromAttribute: (value: string | null) => JsonNode;
-    toAttribute: (value: JsonNode) => string;
-};
-export declare const isValueType: (value: JsonNode) => boolean;
-export declare const getNodeName: (value: JsonNode) => string;