@iyulab/chat-components 0.3.0 → 0.4.0

package/dist/utilities/ActionPromptBuilder.js

@@ -0,0 +1,93 @@
+import template from '../assets/action-prompt.md.js';
+import { PRESET_ACTION_LIST, PRESET_ACTION_DEFINITIONS } from '../types/Actions.js';
+
+class ActionPromptBuilder {
+  constructor() {
+    this.actions = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 싱글톤 인스턴스를 반환합니다. 최초 호출 시 인스턴스가 생성됩니다.
+   */
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new ActionPromptBuilder();
+    }
+    return this._instance;
+  }
+  /**
+   * Action 정의를 등록합니다. 같은 type이 이미 등록되어 있으면 에러를 던집니다.
+   * @throws {Error} 같은 type의 action이 이미 등록된 경우
+   */
+  add(definition) {
+    if (this.actions.has(definition.type)) {
+      throw new Error(`Action with type "${definition.type}" is already registered.`);
+    }
+    this.actions.set(definition.type, definition);
+    return this;
+  }
+  /**
+   * 미리 정의된 프리셋 Action을 등록합니다.
+   * @example
+   * ActionPromptBuilder.use(PresetAction.Questions);
+   * ActionPromptBuilder.use(PresetAction.All);
+   */
+  use(flags) {
+    for (const flag of PRESET_ACTION_LIST) {
+      if (flags & flag) {
+        const definition = PRESET_ACTION_DEFINITIONS.get(flag);
+        if (definition && !this.actions.has(definition.type)) {
+          this.actions.set(definition.type, definition);
+        }
+      }
+    }
+    return this;
+  }
+  /**
+   * 등록된 action들에 대한 LLM 시스템 프롬프트 인스트럭션을 생성합니다.
+   */
+  build() {
+    if (this.actions.size === 0) return "";
+    const defs = Array.from(this.actions.values());
+    const actionList = defs.map((d) => `- \`${d.type}\`: ${d.description}`).join("\n");
+    const actionDocs = defs.map((def) => {
+      const lines = [
+        `### ${def.type}`,
+        "",
+        def.description,
+        "",
+        `**Type:** \`${def.type}\``
+      ];
+      if (def.properties) {
+        lines.push(
+          "",
+          "**Properties (JSON Schema):**",
+          "```json",
+          JSON.stringify({ type: "object", properties: def.properties }, null, 2),
+          "```"
+        );
+      }
+      return lines.join("\n");
+    }).join("\n\n---\n\n");
+    return template.replace("{{ACTION_LIST}}", actionList).replace("{{ACTION_DOCS}}", actionDocs);
+  }
+  /**
+   * LLM 응답 텍스트에서 `action-json` 코드블록을 추출합니다.
+   * 
+   * @param value - LLM 응답 텍스트
+   * @returns `[actions, rest]` — actions는 파싱된 JSON 객체 배열, rest는 블록이 제거된 나머지 텍스트
+   */
+  parse(value) {
+    const pattern = /```action-json\s*([\s\S]*?)```/g;
+    const actions = [];
+    const rest = value.replace(pattern, (_, json) => {
+      try {
+        actions.push(JSON.parse(json.trim()));
+      } catch {
+      }
+      return "";
+    }).trim();
+    return [actions, rest];
+  }
+}
+
+export { ActionPromptBuilder };

package/dist/utilities/WidgetPromptBuilder.d.ts

@@ -0,0 +1,28 @@
+import { PresetWidget, WidgetDefinition } from '../types/Widgets.js';
+/**
+ * 위젯 등록, LLM 인스트럭션 빌드, HTML 렌더링을 통합 제공하는 유틸리티
+ */
+export declare class WidgetPromptBuilder {
+    private static _instance;
+    private widgets;
+    /**
+     * 싱글톤 인스턴스를 반환합니다. 최초 호출 시 인스턴스가 생성됩니다.
+     */
+    static get instance(): WidgetPromptBuilder;
+    /**
+     * 위젯 정의를 등록합니다. 같은 이름의 위젯이 이미 등록되어 있으면 에러를 던집니다.
+     * @throws {Error} 같은 이름의 위젯이 이미 등록된 경우 또는 같은 태그의 커스텀 요소가 다른 클래스에 의해 정의된 경우
+     */
+    add(definition: WidgetDefinition): WidgetPromptBuilder;
+    /**
+     * 미리 정의된 프리셋 위젯을 사용합니다.
+     * @example
+     * WidgetRegistry.use(Widget.Images | Widget.Chart);
+     * WidgetRegistry.use(Widget.All);
+     */
+    use(flags: PresetWidget): WidgetPromptBuilder;
+    /**
+     * 등록된 위젯들에 대한 LLM 인스트럭션 문자열을 생성합니다.
+     */
+    build(): string;
+}

package/dist/utilities/WidgetPromptBuilder.js

@@ -0,0 +1,87 @@
+import template from '../assets/widget-prompt.md.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { PRESET_WIDGET_LIST, PRESET_WIDGET_DEFINITIONS } from '../types/Widgets.js';
+
+class WidgetPromptBuilder {
+  constructor() {
+    this.widgets = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 싱글톤 인스턴스를 반환합니다. 최초 호출 시 인스턴스가 생성됩니다.
+   */
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new WidgetPromptBuilder();
+    }
+    return this._instance;
+  }
+  /**
+   * 위젯 정의를 등록합니다. 같은 이름의 위젯이 이미 등록되어 있으면 에러를 던집니다.
+   * @throws {Error} 같은 이름의 위젯이 이미 등록된 경우 또는 같은 태그의 커스텀 요소가 다른 클래스에 의해 정의된 경우
+   */
+  add(definition) {
+    if (this.widgets.has(definition.tag)) {
+      throw new Error(`Widget with tag "${definition.tag}" is already registered.`);
+    }
+    const constructor = customElements.get(definition.tag);
+    if (constructor && constructor !== definition.element) {
+      throw new Error(`Custom element with tag "${definition.tag}" is already defined to a different class.`);
+    }
+    if (definition.element.prototype instanceof UElement) {
+      definition.element.define(definition.tag);
+    } else {
+      customElements.define(definition.tag, definition.element);
+    }
+    this.widgets.set(definition.tag, definition);
+    return this;
+  }
+  /**
+   * 미리 정의된 프리셋 위젯을 사용합니다.
+   * @example
+   * WidgetRegistry.use(Widget.Images | Widget.Chart);
+   * WidgetRegistry.use(Widget.All);
+   */
+  use(flags) {
+    for (const flag of PRESET_WIDGET_LIST) {
+      if (flags & flag) {
+        const definition = PRESET_WIDGET_DEFINITIONS.get(flag);
+        if (definition) {
+          this.add(definition);
+        }
+      }
+    }
+    return this;
+  }
+  /**
+   * 등록된 위젯들에 대한 LLM 인스트럭션 문자열을 생성합니다.
+   */
+  build() {
+    if (this.widgets.size === 0) return "";
+    const widgets = Array.from(this.widgets.values());
+    const widgetList = widgets.map((w) => `- \`${w.tag}\`: ${w.description}`).join("\n");
+    const widgetDocs = widgets.map((w) => {
+      const lines = [
+        `### ${w.tag}`,
+        "",
+        `**Tag:** \`${w.tag}\``
+      ];
+      if (w.properties) {
+        lines.push(
+          "",
+          "**Properties (JSON Schema):**",
+          "```json",
+          JSON.stringify({
+            type: "object",
+            properties: w.properties,
+            ...w.required ? { required: w.required } : {}
+          }, null, 2),
+          "```"
+        );
+      }
+      return lines.join("\n");
+    }).join("\n\n---\n\n");
+    return template.replace("{{WIDGET_LIST}}", widgetList).replace("{{WIDGET_DOCS}}", widgetDocs);
+  }
+}
+
+export { WidgetPromptBuilder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -41,23 +41,23 @@
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "0.2.0",
-    "dompurify": "^3.3.1",
+    "@iyulab/components": "^0.4.0",
+    "chart.js": "^4.5.1",
     "highlight.js": "^11.11.1",
     "lit": "^3.3.2",
-    "marked": "^17.0.1",
-    "marked-katex-extension": "^5.1.6"
+    "marked": "^17.0.3",
+    "marked-katex-extension": "^5.1.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.3",
     "@lit/react": "^1.0.8",
-    "@types/node": "^25.0.9",
-    "eslint": "^9.39.2",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^17.0.0",
-    "openai": "^6.16.0",
+    "@types/node": "^25.3.2",
+    "eslint": "^9.39.3",
+    "eslint-plugin-lit": "^2.2.1",
+    "globals": "^17.3.0",
+    "openai": "^6.25.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }

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

@@ -1,9 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/dist/components/loaders/UDotLoader.js

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

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

@@ -1,50 +0,0 @@
-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 };