@iyulab/chat-components 0.4.0 → 0.5.0

package/dist/components/prompt/UPrompt.component.js

@@ -1,113 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { UTextBlock } from '../blocks/UTextBlock.component.js';
-import { styles } from './UPrompt.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 UPrompt extends UElement {
-  constructor() {
-    super(...arguments);
-    this.loading = false;
-    this.minRows = 1;
-    this.maxRows = 10;
-    this.handleSendButtonClick = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.send();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton,
-      "u-text-block": UTextBlock
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", "0");
-  }
-  render() {
-    return html`
-      <slot name="header"></slot>
-
-      <u-text-block part="input"
-        editable
-        .minRows=${this.minRows}
-        .maxRows=${this.maxRows}
-        .value=${this.value}
-        .placeholder=${this.placeholder}
-        @input=${this.handleTextBlockInput}
-        @keydown=${this.handleTextBlockKeydown}
-      ></u-text-block>
-      
-      <div class="control" part="control">
-        <slot name="left-actions"></slot>
-        <div style="flex: 1;"></div>
-        <slot name="right-actions"></slot>
-        
-        <u-button class="send-btn" part="send-btn"
-          ?disabled=${!this.loading && !this.value}
-          @click=${this.handleSendButtonClick}>
-          <u-icon
-            lib="internal"
-            name=${this.loading ? "stop-circle" : "arrow-up"}
-          ></u-icon>
-        </u-button>
-      </div>
-      
-      <slot name="footer"></slot>
-    `;
-  }
-  send() {
-    const value = this.value?.trim();
-    if (this.loading) {
-      this.emit("u-cancel");
-    } else if (value) {
-      this.emit("u-submit", { value: this.value });
-      this.value = "";
-    } else ;
-  }
-  handleTextBlockInput(e) {
-    e.preventDefault();
-    const target = e.target;
-    this.value = target.value;
-  }
-  handleTextBlockKeydown(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      this.send();
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UPrompt.prototype, "loading");
-__decorateClass([
-  property({ type: Number })
-], UPrompt.prototype, "minRows");
-__decorateClass([
-  property({ type: Number })
-], UPrompt.prototype, "maxRows");
-__decorateClass([
-  property({ type: String })
-], UPrompt.prototype, "placeholder");
-__decorateClass([
-  property({ type: String })
-], UPrompt.prototype, "value");
-
-export { UPrompt };

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

@@ -1,27 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
-/**
- * 참조 소스를 카드 형태로 표시하는 공통 컴포넌트입니다.
- * Web과 Document 타입 모두 지원합니다.
- */
-export declare class URefCard extends UJsonElement {
-    static styles: (import('lit').CSSResult | import('lit').CSSResultGroup[])[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 카드 타입 (web 또는 document) */
-    type: 'web' | 'document';
-    /** 외부 링크 URL */
-    url?: string;
-    /** 카드 타이틀 */
-    title: string;
-    /** 카드 본문 스니펫 */
-    snippet?: string;
-    /** 태그 목록 */
-    tags?: string[];
-    render(): import('lit-html').TemplateResult<1>;
-    /** 링크 클릭 핸들러 */
-    private handleAnchorClick;
-    /** URL에서 Google의 파비콘 URL을 반환합니다. */
-    private getFaviconUrl;
-    /** URL에서 도메인 사이트 주소를 반환합니다. */
-    private getDomainName;
-}

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

@@ -1,109 +0,0 @@
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { arrayAttrConverter } from '@iyulab/components/dist/utilities/converters.js';
-import { UJsonElement } from '@iyulab/components/dist/components/UJsonElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { styles } from './URefCard.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 URefCard extends UJsonElement {
-  constructor() {
-    super(...arguments);
-    this.type = "web";
-    this.title = "";
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon
-    };
-  }
-  render() {
-    return html`
-      <a href="${ifDefined(this.url)}" target="_blank" rel="noopener noreferrer"
-        @click=${this.handleAnchorClick}>
-        <div class="header">
-          <img class="favicon" 
-            src="${this.getFaviconUrl(this.url)}" 
-            alt="favicon"
-          />
-          <div class="title">
-            ${this.title || this.getDomainName(this.url)}
-          </div>
-
-          <div style="flex: 1;"></div>
-
-          <div class="badge" type=${this.type}>
-            <u-icon 
-              lib="internal" 
-              name=${this.type === "web" ? "globe" : "file-earmark"}
-            ></u-icon>
-            ${this.type.toUpperCase()}
-          </div>
-        </div>
-
-        <div class="body">
-          ${this.snippet}
-        </div>
-        
-        <div class="footer" ?hidden=${!this.tags || this.tags.length === 0}>
-          ${this.tags?.map((tag) => html`<span class="tag">${tag}</span>`)}
-        </div>
-      </a>
-    `;
-  }
-  /** 링크 클릭 핸들러 */
-  handleAnchorClick(e) {
-    if (!this.url) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-  /** URL에서 Google의 파비콘 URL을 반환합니다. */
-  getFaviconUrl(url) {
-    if (!url) return `/favicon.ico`;
-    try {
-      const hostname = new URL(url).hostname;
-      return `https://www.google.com/s2/favicons?sz=64&domain=${hostname}`;
-    } catch {
-      return `/favicon.ico`;
-    }
-  }
-  /** URL에서 도메인 사이트 주소를 반환합니다. */
-  getDomainName(url) {
-    if (!url) return "";
-    try {
-      return new URL(url).hostname;
-    } catch {
-      return "";
-    }
-  }
-}
-__decorateClass([
-  property({ type: String, reflect: true })
-], URefCard.prototype, "type");
-__decorateClass([
-  property({ type: String })
-], URefCard.prototype, "url");
-__decorateClass([
-  property({ type: String })
-], URefCard.prototype, "title");
-__decorateClass([
-  property({ type: String })
-], URefCard.prototype, "snippet");
-__decorateClass([
-  property({ type: Array, converter: arrayAttrConverter((v) => v) })
-], URefCard.prototype, "tags");
-
-export { URefCard };

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

@@ -1,26 +0,0 @@
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { URefCard } from './URefCard.component.js';
-/**
- * 여러 참조 카드를 그룹으로 표시하는 컴포넌트입니다.
- * 페이지네이션 기능을 제공하여 각 카드를 하나씩 탐색할 수 있습니다.
- * 카드가 1개 이하인 경우 페이지네이션 UI는 자동으로 숨겨집니다.
- */
-export declare class URefCardGroup extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    /** 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

@@ -1,88 +0,0 @@
-import { html } from 'lit';
-import { state } from 'lit/decorators.js';
-import { UElement } from '@iyulab/components/dist/components/UElement.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 UElement {
-  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" ?hidden=${this.cards.length <= 1}>
-        <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/URefTag.component.d.ts

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

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

@@ -1,54 +0,0 @@
-import { 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 { 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 UElement {
-  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/widgets/UChartWidget.component.js

@@ -1,180 +0,0 @@
-import { nothing, html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { Chart } from 'chart.js/auto';
-import { UElement } from '@iyulab/components/dist/components/UElement.js';
-import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
-import { styles } from './UChartWidget.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 UChartWidget extends UElement {
-  constructor() {
-    super(...arguments);
-    this.error = null;
-    this.chartjs = null;
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-button": UButton
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.observer = new MutationObserver(() => {
-      this.applyTheme();
-      this.createChart();
-    });
-    this.observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["theme"]
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.observer?.disconnect();
-    this.destroyChart();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("data") || changedProperties.has("type") || changedProperties.has("options")) {
-      this.createChart();
-    }
-  }
-  render() {
-    if (!this.data) return nothing;
-    return html`
-      <div class="toolbar">
-        <div class="toolbar-left"></div>
-        <div class="toolbar-right">
-          <u-button title="PNG Download" @click=${this.handleDownloadPNG}>
-            PNG
-            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
-          </u-button>
-          <u-button title="JSON Download" @click=${this.handleDownloadJSON}>
-            JSON
-            <u-icon slot="suffix" lib="internal" name="download"></u-icon>
-          </u-button>
-          <u-button title="Full Screen" @click=${this.handleFullscreen}>
-            <u-icon lib="internal" name="box-arrow-up-right"></u-icon>
-          </u-button>
-        </div>
-      </div>
-      <div class="viewport">
-        <canvas></canvas>
-        <div class="error-overlay" ?hidden=${!this.error}>
-          <u-icon lib="internal" name="exclamation-triangle-fill"></u-icon>
-          <span>${this.error}</span>
-        </div>
-      </div>
-    `;
-  }
-  /** Chart.js로 차트 생성 */
-  createChart() {
-    if (!this.canvas) return;
-    if (!this.type || !this.data) return;
-    this.destroyChart();
-    this.error = null;
-    const ctx = this.canvas.getContext("2d");
-    if (!ctx) {
-      this.error = "Canvas 2D context를 가져올 수 없습니다.";
-      return;
-    }
-    try {
-      this.applyTheme();
-      this.chartjs = new Chart(ctx, {
-        type: this.type,
-        data: this.data,
-        options: {
-          responsive: true,
-          maintainAspectRatio: true,
-          ...this.options
-        }
-      });
-    } catch (e) {
-      this.error = e instanceof Error ? e.message : String(e);
-    }
-  }
-  /** 기존 차트 인스턴스 제거 */
-  destroyChart() {
-    if (this.chartjs) {
-      this.chartjs.destroy();
-      this.chartjs = null;
-    }
-  }
-  /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-  applyTheme() {
-    const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
-    const textColor = css("--u-txt-color");
-    const weakColor = css("--u-txt-color-weak");
-    const borderColor = css("--u-border-color");
-    const bgColor = css("--u-bg-color");
-    Chart.defaults.color = textColor;
-    Chart.defaults.borderColor = borderColor;
-    Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
-    Chart.defaults.plugins.tooltip.titleColor = textColor;
-    Chart.defaults.plugins.tooltip.bodyColor = weakColor;
-    Chart.defaults.plugins.tooltip.borderColor = borderColor;
-    Chart.defaults.plugins.tooltip.borderWidth = 1;
-    Chart.defaults.scale.ticks.color = weakColor;
-    Chart.defaults.scale.grid.color = borderColor;
-  }
-  handleDownloadPNG() {
-    if (!this.chartjs) return;
-    const url = this.chartjs.toBase64Image("image/png", 1);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "chart-image.png";
-    a.click();
-  }
-  handleDownloadJSON() {
-    if (!this.data) return;
-    const json = JSON.stringify(this.data, null, 2);
-    const blob = new Blob([json], { type: "application/json;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "chart-data.json";
-    a.click();
-    URL.revokeObjectURL(url);
-  }
-  handleFullscreen() {
-    const target = this.viewport ?? this;
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    } else {
-      target.requestFullscreen?.();
-    }
-  }
-}
-__decorateClass([
-  property({ type: String })
-], UChartWidget.prototype, "type");
-__decorateClass([
-  property({ type: Object })
-], UChartWidget.prototype, "data");
-__decorateClass([
-  property({ type: Object })
-], UChartWidget.prototype, "options");
-__decorateClass([
-  query("canvas")
-], UChartWidget.prototype, "canvas");
-__decorateClass([
-  query(".viewport")
-], UChartWidget.prototype, "viewport");
-__decorateClass([
-  state()
-], UChartWidget.prototype, "error");
-
-export { UChartWidget };

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

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

package/dist/components/widgets/UChartWidget.js

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