@iyulab/chat-components 0.1.0 → 0.2.0

package/dist/components/blocks/UThinkBlock.component.d.ts

@@ -1,5 +1,4 @@
 import { PropertyValues } from 'lit';
-import { nothing } from 'lit/html.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 /**
  * 추론 내용을 표시하는 블록입니다.
@@ -8,7 +7,7 @@ import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 export declare class UThinkBlock extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    bodyEl: HTMLElement;
+    bodyEl: HTMLDivElement;
     /** 컨텐츠가 로딩 중인지 여부 */
     loading: boolean;
     /** 컨텐츠가 접혀있는지 여부 */
@@ -16,13 +15,9 @@ export declare class UThinkBlock extends BaseElement {
     /** 추론 컨텐츠의 내용 */
     value?: string;
     protected updated(changedProperties: PropertyValues): void;
-    render(): typeof nothing | import('lit-html').TemplateResult<1>;
-    /**
-     * 컨텐츠 접기/펼치기 토글
-     */
-    private toggleCollapsed;
+    render(): import('lit-html').TemplateResult<1>;
     /**
      * 컨텐츠가 로딩 중일 때, 스크롤을 맨 아래로 이동
      */
-    private scrollBodyContent;
+    private scrollToBottom;
 }

package/dist/components/blocks/UThinkBlock.component.js

@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { nothing } from 'lit/html.js';
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
 import { UIcon } from '@iyulab/components/dist/components/icon/UIcon.component.js';
+import { UMarkedBlock } from './UMarkedBlock.component.js';
 import { styles } from './UThinkBlock.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -19,17 +19,10 @@ class UThinkBlock extends BaseElement {
     super(...arguments);
     this.loading = false;
     this.collapsed = true;
-    /**
-     * 컨텐츠 접기/펼치기 토글
-     */
-    this.toggleCollapsed = () => {
-      if (this.loading) return;
-      this.collapsed = !this.collapsed;
-    };
     /**
      * 컨텐츠가 로딩 중일 때, 스크롤을 맨 아래로 이동
      */
-    this.scrollBodyContent = () => {
+    this.scrollToBottom = () => {
       if (!this.bodyEl) return;
       requestAnimationFrame(() => {
         this.bodyEl.scrollTo({
@@ -44,26 +37,39 @@ class UThinkBlock extends BaseElement {
   }
   static {
     this.dependencies = {
-      "u-icon": UIcon
+      "u-icon": UIcon,
+      "u-marked-block": UMarkedBlock
     };
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("value") && this.loading) {
-      this.scrollBodyContent();
+    if (changedProperties.has("value") && this.value) {
+      this.scrollToBottom();
     }
   }
   render() {
-    if (!this.value) return nothing;
     return html`
-      <div class="container">
-        <div class="header" @click=${this.toggleCollapsed}>
-          ${this.loading ? html`<div class="title dots">🤔 Thinking</div>` : html`<div class="title">💡 Thought</div>
-          ${this.collapsed ? html`<u-icon lib="internal" name="plus-lg"></u-icon>` : html`<u-icon lib="internal" name="dash-lg"></u-icon>`}`}
-        </div>
-        <div class="body scroll" ?collapsed=${!this.loading && this.collapsed}>
-          ${this.value}
-        </div>
+      <div class="header" part="header"
+        @click=${() => this.collapsed = !this.collapsed}>
+        <u-icon class="prefix-icon"
+          ?loading=${this.loading}
+          lib="internal"
+          name="lightbulb-fill"
+        ></u-icon>
+        <span class="title">
+          ${this.loading ? "Thinking..." : "Thought"}
+        </span>
+        <u-icon class="suffix-icon"
+          lib="internal" 
+          name=${this.collapsed ? "plus-lg" : "dash-lg"}
+        ></u-icon>
+      </div>
+      
+      <div class="body" part="body" scrollable 
+        ?hidden=${this.collapsed}>
+        <u-marked-block
+          .value=${this.value}
+        ></u-marked-block>
       </div>
     `;
   }
@@ -75,7 +81,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UThinkBlock.prototype, "loading");
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], UThinkBlock.prototype, "collapsed");
 __decorateClass([
   property({ type: String })

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

@@ -2,45 +2,39 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    --loading-rows: 3;
-    --max-rows: 10;
-  }
-
-  :host {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-  :host([loading]) .header {
-    pointer-events: none;
-    cursor: wait;
-  }
-  :host([loading]) .body {
-    overflow: hidden !important;
-    max-height: calc(1.5em * var(--loading-rows) + 8px);
-    animation: pulse_action 1.5s infinite;
-    pointer-events: none;
-    cursor: wait;
-  }
-
-  .container {
     display: flex;
     flex-direction: column;
     width: 100%;
+    font-size: 14px;
     border: 1px solid var(--u-border-color);
     border-radius: 8px;
-    font-size: 14px;
   }
 
   .header {
     width: 100%;
+    padding: 8px;
+    border-radius: inherit;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding: 8px;
-    cursor: pointer;
+    gap: 8px;
     user-select: none;
+    cursor: pointer;
+  }
+  .header:hover {
+    background: linear-gradient(var(--u-neutral-100), transparent);
+  }
+  .header:active {
+    background: linear-gradient(var(--u-neutral-200), transparent);
+  }
+
+  .header .prefix-icon {
+    color: var(--u-yellow-800);
+    transition: all 0.3s ease-in-out;
+  }
+  .header .prefix-icon[loading] {
+    animation: pulse-glow 3s ease-in-out infinite;
   }
   .header .title {
     flex: 1;
@@ -48,44 +42,31 @@ const styles = css`
     font-weight: 600;
     line-height: 1;
   }
-  .header .title.dots::after {
-    content: '';
-    animation: dots_action 1.5s infinite;
-  }
 
   .body {
-    overflow: auto;
-    padding: 8px;
-    max-height: calc(1.5em * var(--max-rows) + 8px);
     font-size: inherit;
-    line-height: 1.5;
     font-weight: 300;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    transition: max-height 0.15s ease, padding 0.15s ease;
-  }
-  .body[collapsed] {
-    overflow: hidden !important;
-    padding: 0;
-    max-height: 0;
+    line-height: 1.5;
+    padding: 8px;
+    max-height: 210px;
+    overflow: auto;
   }
-
-  @keyframes dots_action {
-    0%, 20% { content: ' '; }
-    40% { content: ' .'; }
-    60% { content: ' ..'; }
-    80%, 100% { content: ' ...'; }
+  .body u-marked-block {
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
   }
 
-  @keyframes pulse_action {
-    0% {
-      box-shadow: inset 0px -20px 20px -15px rgb(0, 0, 0, 0.1);
+  @keyframes pulse-glow {
+    0%, 100% {
+      opacity: 1;
+      filter: brightness(1);
+      transform: scale(1);
     }
     50% {
-      box-shadow: inset 0px -20px 20px -15px rgb(0, 0, 0, 0.2);
-    }
-    100% {
-      box-shadow: inset 0px -20px 20px -15px rgb(0, 0, 0, 0.1);
+      opacity: 0.7;
+      filter: brightness(1.3);
+      transform: scale(1.1);
     }
   }
 `;

package/dist/components/blocks/UToolBlock.component.d.ts

@@ -1,16 +1,20 @@
 import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
-import { ToolBlockStatus } from '../message/UMessage.types.js';
+import { JsonNode } from '../../types/JsonNode.js';
+/**
+ * 툴 사용 블록 컴포넌트입니다.
+ */
 export declare class UToolBlock extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 로딩 상태 */
+    loading: boolean;
+    /** 블록 접힘 여부 */
     collapsed: boolean;
-    status: ToolBlockStatus;
-    index?: number;
-    name?: string;
-    input?: string;
-    output?: string;
+    /** 헤딩 텍스트 */
+    heading?: string;
+    /** 입력 데이터 (JSON Object) */
+    input?: JsonNode;
+    /** 출력 데이터 (JSON Object) */
+    output?: JsonNode;
     render(): import('lit-html').TemplateResult<1>;
-    private parseJson;
-    handleClickConfirm(): void;
-    handleClickDeny(): void;
 }

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

@@ -1,11 +1,10 @@
-import { nothing, html } from 'lit';
+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 { UTooltip } from '@iyulab/components/dist/components/tooltip/UTooltip.component.js';
-import { UButton } from '@iyulab/components/dist/components/button/UButton.component.js';
 import { USpinner } from '@iyulab/components/dist/components/spinner/USpinner.component.js';
-import { UJsonViewer } from '../json-viewer/UJsonViewer.component.js';
+import { UJsonBlock } from './UJsonBlock.component.js';
+import { jsonAttrConverter } from '../../utilities/converters.js';
 import { styles } from './UToolBlock.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -20,8 +19,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UToolBlock extends BaseElement {
   constructor() {
     super(...arguments);
+    this.loading = false;
     this.collapsed = true;
-    this.status = "pending";
   }
   static {
     this.styles = [super.styles, styles];
@@ -29,98 +28,53 @@ class UToolBlock extends BaseElement {
   static {
     this.dependencies = {
       "u-icon": UIcon,
-      "u-tooltip": UTooltip,
-      "u-button": UButton,
       "u-spinner": USpinner,
-      "u-json-viewer": UJsonViewer
+      "u-json-block": UJsonBlock
     };
   }
   render() {
     return html`
-      <div class="container">
-        <div class="header"  @click=${() => this.collapsed = !this.collapsed}>
-          ${this.status === "pending" || this.status === "paused" ? html`<u-icon lib="internal" name="eye"></u-icon>` : this.status === "inProgress" ? html`<u-spinner></u-spinner>` : this.status === "success" ? html`<u-icon lib="internal" name="check-lg"></u-icon>` : this.status === "failure" ? html`<u-icon lib="internal" name="x-lg"></u-icon>` : nothing}
-          <div class="display">
-            Tool Call [${this.name}]
-          </div>
-          <u-icon
-            lib="internal"
-            name=${this.collapsed ? "plus-lg" : "dash-lg"}
-          ></u-icon>
+      <div class="header"  @click=${() => this.collapsed = !this.collapsed}>
+        ${this.loading ? html`<u-spinner></u-spinner>` : html`<u-icon lib="internal" name="tools"></u-icon>`}
+        <div class="title">
+          ${this.heading || "Tool Usage"}
         </div>
+        <u-icon
+          lib="internal"
+          name=${this.collapsed ? "plus-lg" : "dash-lg"}
+        ></u-icon>
+      </div>
 
-        <div class="body" ?hidden=${this.collapsed}>
-          <div class="viewer" ?hidden=${!this.input}>
-            <div class="label">
-              <u-icon lib="internal" name="chevron-right"></u-icon>
-              <u-tooltip placement="left">Input</u-tooltip>
-            </div>
-            <u-json-viewer
-              .value=${this.parseJson(this.input)}
-            ></u-json-viewer>
-          </div>
-          <div class="viewer" ?hidden=${!this.output}>
-            <div class="label">
-              <u-icon lib="internal" name="chevron-right"></u-icon>
-              <u-tooltip placement="left">Output</u-tooltip>
-            </div>
-            <u-json-viewer
-              .value=${this.parseJson(this.output)}
-            ></u-json-viewer>
-          </div>
+      <div class="body" part="body" scrollable ?hidden=${this.collapsed}>
+        <div class="input-view" ?hidden=${!this.input}>
+          <u-json-block
+            .value=${this.input || {}}
+          ></u-json-block>
         </div>
-
-        <div class="footer" ?hidden=${this.status !== "paused"}>
-          <u-button @click=${this.handleClickConfirm}>
-            <u-icon slot="prefix" lib="internal" name="check-lg"></u-icon>
-            Confirm
-          </u-button>
-          <u-button @click=${this.handleClickDeny}>
-            <u-icon slot="prefix" lib="internal" name="x-lg"></u-icon>
-            Deny
-          </u-button>
+        <div class="output-view" ?hidden=${!this.output}>
+          <u-icon lib="internal" name="chevron-down"></u-icon>
+          <u-json-block
+            .value=${this.output || {}}
+          ></u-json-block>
         </div>
       </div>
     `;
   }
-  parseJson(value) {
-    if (!value || !value.trim()) return {};
-    try {
-      return JSON.parse(value);
-    } catch {
-      return value;
-    }
-  }
-  handleClickConfirm() {
-    this.emit("tool-approval", {
-      index: this.index,
-      isApproved: true
-    });
-  }
-  handleClickDeny() {
-    this.emit("tool-approval", {
-      index: this.index,
-      isApproved: false
-    });
-  }
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], UToolBlock.prototype, "collapsed");
+], UToolBlock.prototype, "loading");
 __decorateClass([
-  property({ type: String })
-], UToolBlock.prototype, "status");
-__decorateClass([
-  property({ type: Number })
-], UToolBlock.prototype, "index");
+  property({ type: Boolean, reflect: true })
+], UToolBlock.prototype, "collapsed");
 __decorateClass([
   property({ type: String })
-], UToolBlock.prototype, "name");
+], UToolBlock.prototype, "heading");
 __decorateClass([
-  property({ type: String })
+  property({ type: Object, converter: jsonAttrConverter })
 ], UToolBlock.prototype, "input");
 __decorateClass([
-  property({ type: String })
+  property({ type: Object, converter: jsonAttrConverter })
 ], UToolBlock.prototype, "output");
 
 export { UToolBlock };

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;
   }
 `;