@iyulab/chat-components 0.4.0 → 0.5.0

package/dist/components/widgets/UImagesWidget.component.js

@@ -1,164 +0,0 @@
-import { nothing, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UCarousel } from '@iyulab/components/dist/components/carousel/UCarousel.component.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { styles } from './UImagesWidget.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 UImagesWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.items = [];
-    this.index = null;
-    this.open = (i) => {
-      this.index = i;
-    };
-    this.close = () => {
-      this.index = null;
-    };
-    this.prev = () => {
-      if (this.index !== null && this.index > 0) {
-        this.index--;
-      }
-    };
-    this.next = () => {
-      if (this.index !== null && this.index < this.items.length - 1) {
-        this.index++;
-      }
-    };
-    this.handlePrevClick = (e) => {
-      e.stopPropagation();
-      this.prev();
-    };
-    this.handleNextClick = (e) => {
-      e.stopPropagation();
-      this.next();
-    };
-    this.handleKeyDown = (e) => {
-      if (this.index === null) return;
-      if (e.key === "Escape") this.close();
-      else if (e.key === "ArrowLeft") this.prev();
-      else if (e.key === "ArrowRight") this.next();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-carousel": UCarousel,
-      "u-icon": UIcon
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    document.removeEventListener("keydown", this.handleKeyDown);
-    super.disconnectedCallback();
-  }
-  render() {
-    if (!this.items?.length) return nothing;
-    const count = this.items.length;
-    return html`
-      <u-carousel
-        .loop=${false}
-        .navigation=${false}
-        .pagination=${true}
-        .draggable=${true}
-        .slidesPerView=${Math.min(count, 3)}
-        .gap=${8}
-      >
-        ${repeat(this.items, (item, i) => html`
-          <div class="slide" 
-            @click=${() => this.open(i)}>
-            <img 
-              src=${item.src} 
-              alt=${item.alt || ""} 
-              loading="lazy" 
-            />
-            <div class="caption"
-              ?hidden=${!item.caption}>
-              ${item.caption}
-            </div>
-          </div>
-        `)}
-      </u-carousel>
-
-      ${this.renderLightbox()}
-    `;
-  }
-  renderLightbox() {
-    const idx = this.index;
-    if (idx === null) return nothing;
-    if (idx < 0 || idx >= this.items.length) return nothing;
-    const item = this.items[idx];
-    if (!item) return nothing;
-    const total = this.items.length;
-    const translateX = `calc(15vw - ${idx} * (70vw + 16px))`;
-    return html`
-      <div class="lb-overlay">
-
-        <!-- 상단: 카운터(중앙) + 닫기 버튼(우측) -->
-        <header class="lb-header">
-          <div class="lb-counter" ?hidden=${total <= 1}>
-            ${idx + 1} / ${total}
-          </div>
-          <button class="lb-close" @click=${this.close}>
-            <u-icon lib="internal" name="x-lg"></u-icon>
-          </button>
-        </header>
-
-        <!-- 중앙: 뷰포트 + 이전/다음 버튼(absolute 오버레이) -->
-        <div class="lb-body">
-          <div class="lb-viewport">
-            <div class="lb-track" style="transform:translateX(${translateX})">
-              ${repeat(this.items, (img, i) => html`
-                <div class="lb-slide" ?active=${i === idx}>
-                  <img src=${img.src} alt=${img.alt || ""} />
-                </div>
-              `)}
-            </div>
-          </div>
-
-          <button class="lb-nav prev"
-            ?hidden=${idx <= 0}
-            @click=${this.handlePrevClick}>
-            <u-icon lib="internal" name="chevron-left"></u-icon>
-          </button>
-
-          <button class="lb-nav next"
-            ?hidden=${idx >= total - 1}
-            @click=${this.handleNextClick}>
-            <u-icon lib="internal" name="chevron-right"></u-icon>
-          </button>
-        </div>
-
-        <!-- 하단: 캡션 -->
-        <footer class="lb-footer" ?hidden=${!item.caption}>
-          <p class="lb-caption">${item.caption}</p>
-        </footer>
-
-      </div>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Array })
-], UImagesWidget.prototype, "items");
-__decorateClass([
-  state()
-], UImagesWidget.prototype, "index");
-
-export { UImagesWidget };

package/dist/components/widgets/UImagesWidget.d.ts

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

package/dist/components/widgets/UImagesWidget.js

@@ -1,5 +0,0 @@
-import { UImagesWidget } from './UImagesWidget.component.js';
-
-UImagesWidget.define("u-images-widget");
-
-export { UImagesWidget };

package/dist/components/widgets/UMapWidget.component.js

@@ -1,65 +0,0 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { styles } from './UMapWidget.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 UMapWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.zoom = 15;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  render() {
-    if (this.lat == null || this.lng == null) return nothing;
-    const offset = 360 / Math.pow(2, this.zoom);
-    const bbox = `${this.lng - offset},${this.lat - offset},${this.lng + offset},${this.lat + offset}`;
-    const embedUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${this.lat},${this.lng}`;
-    const linkUrl = `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lng}#map=${this.zoom}/${this.lat}/${this.lng}`;
-    return html`
-      <iframe 
-        src="${embedUrl}" 
-        loading="lazy"
-      ></iframe>
-      <a class="caption" 
-        ?hidden=${!this.label && !this.description}  
-        href="${linkUrl}" 
-        target="_blank" 
-        rel="noopener"
-      >
-        <strong>${this.label}</strong>
-        <span>${this.description}</span>
-      </a>
-    `;
-  }
-}
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "lat");
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "lng");
-__decorateClass([
-  property({ type: Number })
-], UMapWidget.prototype, "zoom");
-__decorateClass([
-  property({ type: String })
-], UMapWidget.prototype, "label");
-__decorateClass([
-  property({ type: String })
-], UMapWidget.prototype, "description");
-
-export { UMapWidget };

package/dist/components/widgets/UMapWidget.d.ts

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

package/dist/components/widgets/UMapWidget.js

@@ -1,5 +0,0 @@
-import { UMapWidget } from './UMapWidget.component.js';
-
-UMapWidget.define("u-map-widget");
-
-export { UMapWidget };

package/dist/components/widgets/UMapWidget.styles.d.ts

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

package/dist/components/widgets/UVideoWidget.component.js

@@ -1,106 +0,0 @@
-import { nothing, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { styles } from './UVideoWidget.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 UVideoWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.ratio = "16:9";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {};
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("ratio")) {
-      this.style.setProperty("--video-ratio", this.ratio.replace(":", " / "));
-    }
-  }
-  render() {
-    if (!this.src) return nothing;
-    if (this.isYouTube(this.src)) {
-      const videoId = this.extractYouTubeId(this.src);
-      if (videoId) {
-        return html`
-          <div class="video-wrapper">
-            <iframe
-              src="https://www.youtube.com/embed/${videoId}"
-              loading="lazy"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        `;
-      }
-    }
-    if (this.isVimeo(this.src)) {
-      const videoId = this.extractVimeoId(this.src);
-      if (videoId) {
-        return html`
-          <div class="video-wrapper">
-            <iframe
-              src="https://player.vimeo.com/video/${videoId}"
-              loading="lazy"
-              allow="autoplay; fullscreen; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        `;
-      }
-    }
-    return html`
-      <video
-        src=${this.src}
-        poster=${ifDefined(this.poster)}
-        controls
-        playsinline
-      ></video>
-    `;
-  }
-  isYouTube(url) {
-    return /youtube\.com|youtu\.be/i.test(url);
-  }
-  isVimeo(url) {
-    return /vimeo\.com/i.test(url);
-  }
-  extractYouTubeId(url) {
-    const patterns = [
-      /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/,
-      /youtube\.com\/embed\/([^&\s]+)/
-    ];
-    for (const pattern of patterns) {
-      const match = url.match(pattern);
-      if (match && match[1]) return match[1];
-    }
-    return null;
-  }
-  extractVimeoId(url) {
-    const match = url.match(/vimeo\.com\/(\d+)/);
-    return match ? match[1] : null;
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "src");
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "poster");
-__decorateClass([
-  property({ type: String })
-], UVideoWidget.prototype, "ratio");
-
-export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.d.ts

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

package/dist/components/widgets/UVideoWidget.js

@@ -1,5 +0,0 @@
-import { UVideoWidget } from './UVideoWidget.component.js';
-
-UVideoWidget.define("u-video-widget");
-
-export { UVideoWidget };

package/dist/components/widgets/UVideoWidget.styles.d.ts

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

package/dist/components/widgets/UWidget.component.js

@@ -1,140 +0,0 @@
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
-import { USkeleton } from '@iyulab/components/dist/components/skeleton/USkeleton.component.js';
-import { styles } from './UWidget.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;
-};
-const DEFAULT_BLACKLIST = ["innerHTML", "outerHTML", "textContent", "innerText", "outerText", "srcdoc"];
-class UWidget extends UJsonElement {
-  constructor() {
-    super(...arguments);
-    this.loading = false;
-    this.blacklist = DEFAULT_BLACKLIST;
-    this.element = null;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-skeleton": USkeleton
-    };
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("tag")) {
-      this.updateElement(this.tag);
-    }
-    if (changedProperties.has("properties") && this.element) {
-      this.updateProperties(this.element, this.properties);
-    }
-    if (changedProperties.has("blacklist") && this.element && this.properties) {
-      this.updateProperties(this.element, this.properties);
-    }
-  }
-  render() {
-    if (this.loading === true) {
-      return html`
-        <div class="sk-container">
-          <div class="sk-card">
-            <u-skeleton effect="shimmer" width="100%" height="5em"   shape="default"></u-skeleton>
-            <u-skeleton effect="shimmer" width="80%"  height="0.8em" shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="40%"  height="0.75em" shape="rounded"></u-skeleton>
-          </div>
-          <div class="sk-doc">
-            <u-skeleton effect="shimmer" width="40%"  height="0.75em" shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="80%"  height="0.75em" shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="60%" height="0.8em"  shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="100%" height="0.8em"  shape="rounded"></u-skeleton>
-            <u-skeleton effect="shimmer" width="80%"  height="0.8em"  shape="rounded"></u-skeleton>
-          </div>
-        </div>`;
-    }
-    if (this.element != null) {
-      return this.element;
-    }
-    return nothing;
-  }
-  /** 
-   * `loading`이 `true`인 경우, 에러 UI로 대체하지 않습니다. 
-   */
-  async error(error) {
-    if (this.loading) return;
-    await super.error(error);
-  }
-  /**
-   * `tag` 프로퍼티에 등록된 커스텀 엘리먼트를 렌더링하는 컴포넌트입니다.
-   * `tag`가 변경될 때마다 등록된 커스텀 엘리먼트를 새로 생성하여 렌더링합니다.
-   * `tag`가 유효하지 않거나 등록된 커스텀 엘리먼트가 아닌 경우, 에러 처리합니다.
-   */
-  updateElement(tag) {
-    tag = tag?.trim();
-    if (!tag) {
-      this.element = null;
-      void super.error(new Error("Tag is required"));
-      return;
-    }
-    if (!customElements.get(tag)) {
-      this.element = null;
-      void super.error(new Error(`Unknown tag: ${tag}`));
-      return;
-    }
-    this.element = document.createElement(tag);
-  }
-  /**
-   * `properties` 객체의 키가 렌더링된 엘리먼트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
-   * `properties` 객체에 위험한 프로퍼티가 포함되어 있는지 검증하여, 유효한 경우에만 할당합니다.
-   * 할당 중 오류가 발생한 경우, 에러 처리합니다.
-   */
-  updateProperties(element, props) {
-    if (this.validateProperties(props)) {
-      try {
-        Object.assign(element, props);
-      } catch (error) {
-        void super.error(error);
-      }
-    } else {
-      void super.error(new Error(`Not allowed properties: ${JSON.stringify(props)}`));
-    }
-  }
-  /**
-   * `properties` 객체에 위험한 프로퍼티가 포함되어 있는지 검증합니다.
-   * DOM 조작이나 이벤트 핸들러로 악용될 수 있는 프로퍼티를 최소한으로 차단합니다.
-   */
-  validateProperties(props) {
-    if (typeof props !== "object" || props === null || Array.isArray(props)) {
-      return false;
-    }
-    const obj = props;
-    for (const key of Object.keys(obj)) {
-      if (this.blacklist.includes(key)) return false;
-    }
-    return true;
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UWidget.prototype, "loading");
-__decorateClass([
-  property({ type: String })
-], UWidget.prototype, "tag");
-__decorateClass([
-  property({ type: Object })
-], UWidget.prototype, "properties");
-__decorateClass([
-  property({ type: Array })
-], UWidget.prototype, "blacklist");
-__decorateClass([
-  state()
-], UWidget.prototype, "element");
-
-export { UWidget };

package/dist/components/widgets/UWidget.d.ts

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

package/dist/components/widgets/UWidget.js

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

package/dist/components/widgets/UWidget.styles.d.ts

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

package/dist/events/UCancelEvent.d.ts

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

package/dist/events/USubmitEvent.d.ts

@@ -1,6 +0,0 @@
-export type USubmitEvent = CustomEvent<string>;
-declare global {
-    interface HTMLElementEventMap {
-        'u-submit': USubmitEvent;
-    }
-}

package/dist/types/Actions.d.ts

@@ -1,24 +0,0 @@
-import { JsonSchema } from '../types/JsonSchema.js';
-/** LLM에서 action-json 블록으로 출력되는 구조입니다.*/
-export interface ActionSchema {
-    type: string;
-    properties?: Record<string, unknown>;
-}
-/** Action 정의 구조체 */
-export interface ActionDefinition {
-    /** action 식별자 (action-json의 "type" 필드와 매칭) */
-    type: string;
-    /** LLM용 설명 */
-    description: string;
-    /** LLM용 속성 스키마 */
-    properties?: Record<string, JsonSchema>;
-}
-/** 프리셋 Action 비트 플래그 */
-export declare enum PresetAction {
-    Questions = 1,
-    All = 1
-}
-/** 프리셋 Action 목록 (비트 플래그 순서대로) */
-export declare const PRESET_ACTION_LIST: readonly [PresetAction];
-/** 프리셋 Action 정의 매핑 */
-export declare const PRESET_ACTION_DEFINITIONS: Map<PresetAction, ActionDefinition>;

package/dist/types/Actions.js

@@ -1,34 +0,0 @@
-var PresetAction = /* @__PURE__ */ ((PresetAction2) => {
-  PresetAction2[PresetAction2["Questions"] = 1] = "Questions";
-  PresetAction2[PresetAction2["All"] = 1 /* Questions */] = "All";
-  return PresetAction2;
-})(PresetAction || {});
-const PRESET_ACTION_LIST = [
-  1 /* Questions */
-];
-const PRESET_ACTION_DEFINITIONS = /* @__PURE__ */ new Map([
-  [
-    1 /* Questions */,
-    {
-      type: "question",
-      description: "Present a question to the user with clickable choices",
-      properties: {
-        question: {
-          type: "string",
-          description: 'Optional question text displayed above the choices (e.g. "What would you like to explore?")',
-          examples: ["What would you like to do next?"]
-        },
-        choices: {
-          type: "array",
-          items: { type: "string" },
-          minItems: 1,
-          maxItems: 5,
-          description: "Clickable choice buttons (1–5 items)",
-          examples: [["What are the main differences?", "Can you show me an example?", "What should I learn next?"]]
-        }
-      }
-    }
-  ]
-]);
-
-export { PRESET_ACTION_DEFINITIONS, PRESET_ACTION_LIST, PresetAction };