@iyulab/chat-components 0.1.1 → 0.3.0

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

@@ -2,42 +2,37 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    height: auto;
+    font-size: 14px;
     border: 1px solid var(--u-border-color);
     border-radius: 8px;
-    font-size: 14px;
-  }
-
-  .container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
   }
 
   .header {
     width: 100%;
+    padding: 8px;
+    border-radius: inherit;
     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:hover {
+    background: linear-gradient(var(--u-neutral-100), transparent);
   }
-  .header u-icon[name="check-lg"] {
-    color: var(--u-green-500);
+  .header:active {
+    background: linear-gradient(var(--u-neutral-200), transparent);
   }
-  .header u-icon[name="x-lg"] {
-    color: var(--u-red-500);
+
+  .header u-icon[name="tools"] {
+    color: var(--u-blue-800);
   }
-  .header .display {
+  .header .title {
     flex: 1;
     font-size: inherit;
     font-weight: 600;
@@ -49,58 +44,22 @@ const styles = css`
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     width: 100%;
     max-height: 260px;
+    padding: 8px;
     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);
+  .body u-json-viewer {
     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;
+  .body u-icon[name="chevron-down"] {
+    align-self: center;
+    font-size: 16px;
+    color: var(--u-neutral-600, #4b5563);
   }
-  .footer u-button {
+  .body .output-view {
     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);
+    flex-direction: column;
   }
 `;
 

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

@@ -5,20 +5,18 @@ 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;
+    input?: HTMLInputElement;
     /** 첨부 파일 유형 제한, 컴마로 구분된 MIME 타입 문자열 (예: "image/*,application/pdf") */
     accept?: string;
     /** 다중 파일 선택 가능 여부 */
     multiple: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * 버튼 클릭 핸들러
      */
-    private openFileExplorer;
+    private handleButtonClick;
     /**
      * 파일 선택 이벤트 핸들러
      */
-    private handleFileSelected;
+    private handleInputChange;
 }

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

@@ -2,6 +2,8 @@ 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 { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { styles } from './UAttachButton.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -20,18 +22,22 @@ class UAttachButton extends BaseElement {
     /**
      * 버튼 클릭 핸들러
      */
-    this.openFileExplorer = () => {
+    this.handleButtonClick = () => {
       if (!this.input) return;
       this.input.click();
     };
     /**
      * 파일 선택 이벤트 핸들러
      */
-    this.handleFileSelected = (e) => {
+    this.handleInputChange = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       const target = e.target;
       const files = target.files;
       if (!files || files.length === 0) return;
-      this.emit("select-files", files);
+      this.emit("u-change", {
+        files: Array.from(files)
+      });
       target.value = "";
     };
   }
@@ -40,27 +46,32 @@ class UAttachButton extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
     };
   }
-  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"
+      <u-button part="base" 
+        variant="borderless"
+        @click=${this.handleButtonClick}>
+        <u-icon part="icon" 
+          lib="internal" 
+          name="paperclip"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+      
+      <input 
+        hidden
+        type="file"
         ?multiple=${this.multiple}
-        .accept=${this.accept || ""}
-        @change=${this.handleFileSelected}
+        .accept=${this.accept || "*"}
+        @change=${this.handleInputChange}
       />
     `;
   }

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

@@ -1,20 +1,13 @@
 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);
+  :host(:empty) u-tooltip {
+    display: none;
   }
 
-  input[type="file"] {
-    display: none;
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
   }
 `;
 

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

@@ -1,4 +1,3 @@
-import { nothing } from 'lit';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 /**
  * 클릭 시 클립보드에 텍스트를 복사하는 버튼입니다. 복사 상태를 표시하기 위해 아이콘이 변경됩니다.
@@ -6,17 +5,13 @@ 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(): import('lit-html').TemplateResult<1> | typeof nothing;
+    /** 복사할 텍스트를 설정합니다. */
+    value?: string;
+    render(): import('lit-html').TemplateResult<1>;
     /**
      * 클립보드에 텍스트를 복사하는 메서드입니다.
      * 복사 후 재사용 대기 시간이 설정되어 있으면, 일정 시간 후에 복사 가능 상태로 되돌립니다.

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

@@ -1,7 +1,8 @@
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { state, 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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
 import { styles } from './UCopyButton.styles.js';
 
@@ -17,7 +18,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UCopyButton extends BaseElement {
   constructor() {
     super(...arguments);
-    this.mode = "symbol";
     this.isCopied = false;
     this.delay = 1e3;
     /**
@@ -27,30 +27,16 @@ class UCopyButton extends BaseElement {
     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) {
+      try {
+        await window.navigator.clipboard.writeText(this.value);
+        if (this.delay <= 0) return;
         this.isCopied = true;
         setTimeout(() => {
           this.isCopied = false;
         }, this.delay);
+      } catch (error) {
+        console.error("Failed to copy text to clipboard:", error);
+        this.isCopied = false;
       }
     };
   }
@@ -60,46 +46,36 @@ class UCopyButton extends BaseElement {
   static {
     this.dependencies = {
       "u-icon": UIcon,
+      "u-button": UButton,
       "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;
-    }
+    return html`
+      <u-button part="base" 
+        variant="borderless"
+        ?disabled=${this.isCopied}
+        @click=${this.copyToClipboard}>
+        <u-icon part="icon"
+          lib="internal"
+          name=${this.isCopied ? "check-lg" : "copy"}
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
   }
 }
 __decorateClass([
-  property({ type: String, reflect: true })
-], UCopyButton.prototype, "mode");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  state()
 ], UCopyButton.prototype, "isCopied");
-__decorateClass([
-  property({ type: String })
-], UCopyButton.prototype, "value");
 __decorateClass([
   property({ type: Number })
 ], UCopyButton.prototype, "delay");
+__decorateClass([
+  property({ type: String })
+], UCopyButton.prototype, "value");
 
 export { UCopyButton };

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

@@ -1,46 +1,17 @@
 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(:empty) u-tooltip {
+    display: none;
   }
-  :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);
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
   }
 
-  .display {
-    font-size: inherit;
-    color: inherit;
-    line-height: 1;
+  u-icon[name="check-lg"] {
+    color: var(--u-green-500);
   }
 `;
 

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

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 신고 버튼 컴포넌트입니다.
+ */
+export declare class UReportButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './UReportButton.styles.js';
+
+class UReportButton extends BaseElement {
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
+    };
+  }
+  render() {
+    return html`
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="flag"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
+    `;
+  }
+}
+
+export { UReportButton };

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

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

package/dist/components/buttons/UReportButton.js

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

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

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,11 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 재시도 버튼 컴포넌트입니다.
+ */
+export declare class URetryButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 재생성 중인지 여부 */
+    loading: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/buttons/{USendButton.component.js → URetryButton.component.js}

@@ -2,7 +2,9 @@ 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';
+import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
+import { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
+import { styles } from './URetryButton.styles.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,34 +15,39 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class USendButton extends BaseElement {
+class URetryButton extends BaseElement {
   constructor() {
     super(...arguments);
-    this.mode = "send";
-    this.disabled = false;
+    this.loading = false;
   }
   static {
     this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-button": UButton,
+      "u-tooltip": UTooltip
     };
   }
   render() {
     return html`
-      <u-icon
-        lib="internal"
-        name=${this.mode === "send" ? "arrow-up" : this.mode === "stop" ? "ban" : this.mode === "retry" ? "arrow-clockwise" : ""}
-      ></u-icon>
+      <u-button part="base" 
+        variant="borderless">
+        <u-icon part="icon"
+          lib="internal"
+          name="arrow-repeat"
+        ></u-icon>
+      </u-button>
+
+      <u-tooltip for="u-button" placement="bottom" distance="8">
+        <slot></slot>
+      </u-tooltip>
     `;
   }
 }
-__decorateClass([
-  property({ type: String })
-], USendButton.prototype, "mode");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], USendButton.prototype, "disabled");
+], URetryButton.prototype, "loading");
 
-export { USendButton };
+export { URetryButton };

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

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

package/dist/components/buttons/URetryButton.js

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

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

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

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

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host(:empty) u-tooltip {
+    display: none;
+  }
+  :host([loading]) u-icon {
+    animation: spin 1s linear infinite;
+  }
+
+  u-button {
+    color: var(--u-txt-color-weak);
+    font-size: 16px;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,9 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 메시지 공유하기 버튼 컴포넌트입니다.
+ */
+export declare class UShareButton extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}