@iyulab/chat-components 0.1.1 → 0.2.0

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.2.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -41,25 +41,24 @@
     "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.0",
+    "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;

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

@@ -1,28 +0,0 @@
-const jsonConverter = {
-  fromAttribute: (value) => {
-    if (!value || !value.trim()) return {};
-    try {
-      return JSON.parse(value);
-    } catch {
-      return {};
-    }
-  },
-  toAttribute: (value) => {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return "{}";
-    }
-  }
-};
-const isValueType = (value) => {
-  return value !== Object(value);
-};
-const getNodeName = (value) => {
-  if (value === null) return "null";
-  if (Array.isArray(value)) return "array";
-  if (typeof value === "object") return "object";
-  return typeof value;
-};
-
-export { getNodeName, isValueType, jsonConverter };

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

@@ -1,21 +0,0 @@
-export interface TextBlockItem {
-    type: "text";
-    value?: string;
-}
-export interface MarkdownBlockItem {
-    type: "markdown";
-    value?: string;
-}
-export interface ThinkingBlockItem {
-    type: "thinking";
-    value?: string;
-}
-export type ToolBlockStatus = ("pending" | "paused" | "inProgress" | "success" | "failure");
-export interface ToolBlockItem {
-    type: "tool";
-    status: ToolBlockStatus;
-    name?: string;
-    input?: string;
-    output?: string;
-}
-export type BlockItem = (TextBlockItem | MarkdownBlockItem | ThinkingBlockItem | ToolBlockItem);

package/dist/events/UStopEvent.d.ts

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

package/dist/internals/date-helpers.d.ts

@@ -1,8 +0,0 @@
-/**
- * 문자열 날짜를 현지 시간으로 비교하여 시간 경과를 표시합니다.
- */
-export declare const since: (value?: string) => string;
-/**
- * 문자열 날짜를 현지 시간으로 기본 포맷
- */
-export declare const format: (value?: string, options?: Intl.DateTimeFormatOptions) => string;

package/dist/internals/date-helpers.js

@@ -1,27 +0,0 @@
-const format = (value, options) => {
-  if (!value) return "";
-  const today = /* @__PURE__ */ new Date();
-  const locale = navigator.language;
-  const defaultOptions = {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit"
-  };
-  let date = new Date(value);
-  const offset = value.endsWith("Z") ? 0 : date.getTimezoneOffset() * 60 * 1e3;
-  date = new Date(date.getTime() - offset);
-  if (date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()) {
-    const timeFormatter = new Intl.DateTimeFormat(locale, {
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-    return timeFormatter.format(date);
-  } else {
-    const formatter = new Intl.DateTimeFormat(locale, { ...defaultOptions, ...options });
-    return formatter.format(date);
-  }
-};
-
-export { format };