@iyulab/chat-components 0.1.1 → 0.3.0

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

@@ -0,0 +1,113 @@
+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 { 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 BaseElement {
+  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/prompt/UPrompt.d.ts

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

package/dist/components/prompt/UPrompt.js

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

package/dist/components/prompt/UPrompt.styles.d.ts

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

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

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+    border: 1px solid var(--u-border-color, #e0e0e0);
+    border-radius: 8px;
+    background-color: var(--u-bg-color);
+  }
+  :host(:focus-within) {
+    outline: none;
+    border-color: var(--u-neutral-400, #9ca3af);
+    box-shadow: 0 0 0 1px var(--u-neutral-200, #9ca3af);
+  }
+
+  u-text-block {
+    flex: 1;
+    padding: 8px;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  
+  .send-btn {
+    font-size: 16px;
+    color: var(--u-neutral-0);
+    background-color: var(--u-neutral-800);
+  }
+  .send-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,24 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 참조 소스를 카드 형태로 표시하는 공통 컴포넌트입니다.
+ * Web과 Document 타입 모두 지원합니다.
+ */
+export declare class URefCard extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 카드 타입 (web 또는 document) */
+    type: 'web' | 'document';
+    /** 외부 링크 URL */
+    href?: string;
+    /** 카드 타이틀 */
+    heading?: 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

@@ -0,0 +1,105 @@
+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 { BaseElement } from '@iyulab/components/dist/components/BaseElement.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 BaseElement {
+  constructor() {
+    super(...arguments);
+    this.type = "web";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  render() {
+    return html`
+      <a href="${ifDefined(this.href)}" target="_blank" rel="noopener noreferrer"
+        @click=${this.handleAnchorClick}>
+        <div class="header">
+          <img class="favicon" 
+            src="${this.getFaviconUrl(this.href)}" 
+            alt="favicon"
+          />
+          <div class="title" title="${ifDefined(this.heading)}">
+            ${this.heading || this.getDomainName(this.href)}
+          </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">
+          <slot></slot>
+        </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.href) {
+      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, "href");
+__decorateClass([
+  property({ type: String })
+], URefCard.prototype, "heading");
+__decorateClass([
+  property({ type: Array, converter: arrayAttrConverter((v) => v) })
+], URefCard.prototype, "tags");
+
+export { URefCard };

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

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

package/dist/components/references/URefCard.js

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

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

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

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

@@ -0,0 +1,103 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 380px;
+    padding: 6px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background: var(--u-panel-bg-color);
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    padding: 6px;
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  a:hover {
+    color: var(--u-blue-600);
+    background-color: var(--u-neutral-50);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .favicon {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .badge {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    line-height: 1;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+  .badge[type="web"] {
+    color: var(--u-blue-700);
+    background: var(--u-blue-0);
+  }
+  .badge[type="document"] {
+    color: var(--u-green-700);
+    background: var(--u-green-0);
+  }
+  .badge u-icon {
+    color: inherit;
+  }
+
+  .body {
+    display: -webkit-box;
+    color: var(--u-txt-color-weak);
+    font-size: 12px;
+    line-height: 1.5;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 8px;
+  }
+
+  .footer {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+
+  .tag {
+    font-size: 10px;
+    line-height: 1.4;
+    color: var(--u-txt-color-weak);
+    background: var(--u-neutral-100);
+    padding: 2px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+  }
+`;
+
+export { styles };

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

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

@@ -0,0 +1,88 @@
+import { html } from 'lit';
+import { state } 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 { 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 BaseElement {
+  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">
+        <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/URefCardGroup.d.ts

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

package/dist/components/references/URefCardGroup.js

@@ -0,0 +1,5 @@
+import { URefCardGroup } from './URefCardGroup.component.js';
+
+URefCardGroup.define("u-ref-card-group");
+
+export { URefCardGroup };

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

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

package/dist/components/references/URefCardGroup.styles.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 380px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background: var(--u-panel-bg-color);
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    color: var(--u-txt-color-weak);
+    background-color: var(--u-neutral-100);
+    border-bottom: 1px solid var(--u-border-color);
+    user-select: none;
+  }
+
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .nav-button:hover u-icon {
+    opacity: 0.6;
+  }
+  .nav-button u-icon {
+    color: inherit;
+  }
+
+  .page-indicator {
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .viewport {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .track {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    will-change: transform;
+    transition: transform 260ms ease;
+  }
+
+  /* slot 안의 각 카드가 한 페이지(100%)를 차지하도록 */
+  ::slotted(u-ref-card) {
+    flex: 0 0 100%;
+    border: none;
+  }
+`;
+
+export { styles };

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

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