@iyulab/chat-components 0.1.0

package/dist/components/blocks/UToolBlock.styles.js

@@ -0,0 +1,107 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    font-size: 14px;
+  }
+
+  .container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .header u-icon[name="eye"] {
+    font-size: 16px;
+    color: var(--u-blue-500);
+  }
+  .header u-icon[name="check-lg"] {
+    color: var(--u-green-500);
+  }
+  .header u-icon[name="x-lg"] {
+    color: var(--u-red-500);
+  }
+  .header .display {
+    flex: 1;
+    font-size: inherit;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .body {
+    display: block;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    width: 100%;
+    max-height: 260px;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) transparent;
+  }
+  .body .viewer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 4px 8px;
+  }
+  .body .viewer:not(:last-child) {
+    border-bottom: 1px dashed var(--u-border-color);
+  }
+  .body .viewer .label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    font-weight: 400;
+    width: 1.5em;
+    height: 1.5em;
+  }
+  .body .viewer u-json-viewer {
+    width: calc(100% - 1.5em);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: 1.5;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 4px 12px;
+  }
+  .footer u-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 8px;
+    font-size: 12px;
+  }
+  .footer u-icon[name="check-lg"] {
+    color: var(--u-green-500);
+  }
+  .footer u-icon[name="x-lg"] {
+    color: var(--u-red-500);
+  }
+`;
+
+export { styles };

package/dist/components/buttons/UAttachButton.component.d.ts

@@ -0,0 +1,24 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 파일 첨부 버튼 컴포넌트입니다.
+ */
+export declare class UAttachButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    input: HTMLInputElement;
+    /** 첨부 파일 유형 제한, 컴마로 구분된 MIME 타입 문자열 (예: "image/*,application/pdf") */
+    accept?: string;
+    /** 다중 파일 선택 가능 여부 */
+    multiple: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 버튼 클릭 핸들러
+     */
+    private openFileExplorer;
+    /**
+     * 파일 선택 이벤트 핸들러
+     */
+    private handleFileSelected;
+}

package/dist/components/buttons/UAttachButton.component.js

@@ -0,0 +1,78 @@
+import { html } from 'lit';
+import { query, 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 './UAttachButton.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 UAttachButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.multiple = false;
+    /**
+     * 버튼 클릭 핸들러
+     */
+    this.openFileExplorer = () => {
+      if (!this.input) return;
+      this.input.click();
+    };
+    /**
+     * 파일 선택 이벤트 핸들러
+     */
+    this.handleFileSelected = (e) => {
+      const target = e.target;
+      const files = target.files;
+      if (!files || files.length === 0) return;
+      this.emit("select-files", files);
+      target.value = "";
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.openFileExplorer);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.openFileExplorer);
+    super.disconnectedCallback();
+  }
+  render() {
+    return html`
+      <u-icon 
+        lib="internal" 
+        name="paperclip"
+      ></u-icon>
+      <input type="file"
+        ?multiple=${this.multiple}
+        .accept=${this.accept || ""}
+        @change=${this.handleFileSelected}
+      />
+    `;
+  }
+}
+__decorateClass([
+  query('input[type="file"]')
+], UAttachButton.prototype, "input");
+__decorateClass([
+  property({ type: String })
+], UAttachButton.prototype, "accept");
+__decorateClass([
+  property({ type: Boolean })
+], UAttachButton.prototype, "multiple");
+
+export { UAttachButton };

package/dist/components/buttons/UAttachButton.d.ts

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

package/dist/components/buttons/UAttachButton.js

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

package/dist/components/buttons/UAttachButton.styles.d.ts

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

package/dist/components/buttons/UAttachButton.styles.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    display: inline-flex;
+    padding: 8px;
+    font-size: 16px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  :host(:hover) {
+    background-color: var(--u-neutral-100, #f3f4f6);
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+`;
+
+export { styles };

package/dist/components/buttons/UCopyButton.component.d.ts

@@ -0,0 +1,25 @@
+import { nothing } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
+ */
+export declare class UCopyButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 버튼의 모드를 설정합니다. 기본은 'symbol'입니다. */
+    mode: 'badge' | 'symbol';
+    /** 클립보드 복사 상태를 나타내는 플래그입니다. */
+    isCopied: boolean;
+    /** 복사할 텍스트를 설정합니다. */
+    value?: string;
+    /** 클립보드 복사 후 재사용 대기 시간 (ms) */
+    delay: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /**
+     * 클립보드에 텍스트를 복사하는 메서드입니다.
+     * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.
+     */
+    private copyToClipboard;
+}

package/dist/components/buttons/UCopyButton.component.js

@@ -0,0 +1,105 @@
+import { html, nothing } 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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UCopyButton.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 UCopyButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "symbol";
+    this.isCopied = false;
+    this.delay = 1e3;
+    /**
+     * 클립보드에 텍스트를 복사하는 메서드입니다.
+     * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.
+     */
+    this.copyToClipboard = async () => {
+      if (!this.value) return;
+      if (this.isCopied) return;
+      if (navigator.clipboard) {
+        await navigator.clipboard.writeText(this.value);
+      } else {
+        const area = document.createElement("textarea");
+        area.style.position = "fixed";
+        area.style.opacity = "0";
+        area.style.pointerEvents = "none";
+        area.value = this.value;
+        document.body.appendChild(area);
+        area.focus();
+        area.select();
+        try {
+          document.execCommand("copy");
+        } catch (err) {
+          console.error("Failed to copy: ", err);
+        } finally {
+          document.body.removeChild(area);
+        }
+      }
+      if (this.delay > 0) {
+        this.isCopied = true;
+        setTimeout(() => {
+          this.isCopied = false;
+        }, this.delay);
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-tooltip": UTooltip
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.copyToClipboard);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.copyToClipboard);
+    super.disconnectedCallback();
+  }
+  render() {
+    if (this.mode === "badge") {
+      return html`
+        <u-icon lib="internal" name=${this.isCopied ? "check-lg" : "copy"}></u-icon>
+        <span class="display">${this.isCopied ? "Copied!" : "Copy"}</span>
+      `;
+    } else if (this.mode === "symbol") {
+      return html`
+        <u-icon lib="internal" name=${this.isCopied ? "check-lg" : "copy"}></u-icon>
+        <u-tooltip for="u-icon" distance="6">
+          ${this.isCopied ? "Copied!" : "Copy"}
+        </u-tooltip>
+      `;
+    } else {
+      return nothing;
+    }
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], UCopyButton.prototype, "mode");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCopyButton.prototype, "isCopied");
+__decorateClass([
+  property({ type: String })
+], UCopyButton.prototype, "value");
+__decorateClass([
+  property({ type: Number })
+], UCopyButton.prototype, "delay");
+
+export { UCopyButton };

package/dist/components/buttons/UCopyButton.d.ts

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

package/dist/components/buttons/UCopyButton.js

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

package/dist/components/buttons/UCopyButton.styles.d.ts

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

package/dist/components/buttons/UCopyButton.styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    padding: 8px;
+    border-radius: 8px;
+    font-size: inherit;
+    color: inherit;
+    background-color: transparent;
+    cursor: pointer;
+  }
+  :host(:hover) {
+    background-color: var(--u-neutral-100, #f3f4f6);
+  }
+  :host([isCopied]) {
+    pointer-events: none;
+    background-color: transparent;
+  }
+  :host([mode="symbol"]) {
+    display: inline-flex;
+  }
+  :host([mode="badge"]) {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+  }
+  
+  u-icon {
+    font-size: inherit;
+  }
+  u-icon[name="copy"] {
+    color: inherit;
+  }
+  u-icon[name="check"] {
+    color: var(--u-green-500);
+  }
+
+  .display {
+    font-size: inherit;
+    color: inherit;
+    line-height: 1;
+  }
+`;
+
+export { styles };

package/dist/components/buttons/USendButton.component.d.ts

@@ -0,0 +1,13 @@
+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.component.js

@@ -0,0 +1,46 @@
+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 './USendButton.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 USendButton extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "send";
+    this.disabled = false;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  render() {
+    return html`
+      <u-icon
+        lib="internal"
+        name=${this.mode === "send" ? "arrow-up" : this.mode === "stop" ? "ban" : this.mode === "retry" ? "arrow-clockwise" : ""}
+      ></u-icon>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: String })
+], USendButton.prototype, "mode");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], USendButton.prototype, "disabled");
+
+export { USendButton };

package/dist/components/buttons/USendButton.d.ts

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

package/dist/components/buttons/USendButton.js

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

package/dist/components/buttons/USendButton.styles.d.ts

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

package/dist/components/buttons/USendButton.styles.js

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

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

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

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

package/dist/components/buttons/UThinkButton.js

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

package/dist/components/buttons/UThinkButton.styles.d.ts

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