@iyulab/chat-components 0.1.1 → 0.3.0

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

@@ -0,0 +1,17 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { ReferenceSource } from '../../types/References.js';
+/**
+ * 레퍼런스 정보를 블록 형태로 표시하는 컴포넌트입니다.
+ * 단일 또는 다중 레퍼런스 카드를 그리드 레이아웃으로 표시합니다.
+ */
+export declare class URefBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 접힘 상태 @default: true */
+    collapsed: boolean;
+    /** 블록 제목 */
+    heading?: string;
+    /** 출처 목록 */
+    sources?: ReferenceSource[];
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,74 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { URefCard } from '../references/URefCard.component.js';
+import { styles } from './URefBlock.styles.js';
+import { repeat } from 'lit/directives/repeat.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 URefBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.collapsed = true;
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-ref-card": URefCard
+    };
+  }
+  render() {
+    return html`
+      <button class="header" @click=${() => this.collapsed = !this.collapsed}>
+        <u-icon
+          ?collapsed=${this.collapsed}
+          lib="internal" 
+          name="chevron-down"
+        ></u-icon>
+        <div class="title">
+          ${this.heading || "References"}
+        </div>
+        <div style="flex: 1;"></div>
+        <div class="count">
+          ${this.sources ? this.sources.length : 0}
+        </div>
+      </button>
+
+      <div class="body" ?collapsed=${this.collapsed}>
+        ${repeat(this.sources || [], (_, idx) => idx, (source) => {
+      return html`
+            <u-ref-card
+              .type=${source.type}
+              .href=${source.url}
+              .heading=${source.title}
+              .tags=${source.tags}
+            >
+              ${source.snippet || ""}
+            </u-ref-card>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], URefBlock.prototype, "collapsed");
+__decorateClass([
+  property({ type: String })
+], URefBlock.prototype, "heading");
+__decorateClass([
+  property({ type: Array })
+], URefBlock.prototype, "sources");
+
+export { URefBlock };

package/dist/components/blocks/URefBlock.d.ts

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

package/dist/components/blocks/URefBlock.js

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

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

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  /* 헤더 영역 */
+  .header {
+    all: unset;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5em;
+    color: var(--u-txt-color-strong);
+    user-select: none;
+    cursor: pointer;
+  }
+  .header:hover {
+    color: var(--u-txt-color-hover);
+  }
+  .header:focus-visible {
+    outline: 2px solid rgba(100, 150, 250, 0.6);
+    outline-offset: 2px;
+  }
+
+  u-icon {
+    color: inherit;
+    font-size: 1em;
+    transition: transform 0.2s ease-in-out;
+  }
+  u-icon[collapsed] {
+    transform: rotate(-90deg);
+  }
+
+  .title {
+    color: inherit;
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 600;
+    color: var(--u-text-color-weak);
+  }
+
+  .count {
+    color: inherit;
+    font-size: 0.75em;
+    font-weight: 400;
+    line-height: 2em;
+  }
+
+  /* 바디 영역 */
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+    margin-top: 0.75em;
+    transition: all 0.3s ease-in-out;
+  }
+  .body[collapsed] {
+    height: 0;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  .body u-ref-card {
+    width: 100%;
+  }
+`;
+
+export { styles };

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(): import('lit-html').TemplateResult<1> | typeof nothing;
-    /**
-     * 컨텐츠 접기/펼치기 토글
-     */
-    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 };