@iyulab/chat-components 0.1.0

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

@@ -0,0 +1,37 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 텍스트를 표시하거나 편집할 수 있는 블록 컴포넌트입니다.
+ */
+export declare class UTextBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    textareaEl: HTMLTextAreaElement;
+    preEl: HTMLPreElement;
+    /** 편집 가능 여부 */
+    editable: boolean;
+    /** 스펠체크 여부 */
+    spellcheck: boolean;
+    /** 플레이스홀더 텍스트 */
+    placeholder?: string;
+    /** 최소 행 수, 기본값은 1 */
+    minRows: number;
+    /** 최대 행 수 */
+    maxRows?: number;
+    /** 텍스트 블록의 내용 */
+    value?: string;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * textarea에 포커스를 줍니다.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * 텍스트 입력시 value를 업데이트하고 이벤트를 재전파합니다.
+     */
+    private updateValueFrom;
+    /**
+     * pre 엘리먼트에 주입될 값을 정규화합니다.
+     */
+    private normalizeValue;
+}

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

@@ -0,0 +1,123 @@
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { styles } from './UTextBlock.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 UTextBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.editable = false;
+    this.spellcheck = false;
+    this.minRows = 1;
+    /**
+     * 텍스트 입력시 value를 업데이트하고 이벤트를 재전파합니다.
+     */
+    this.updateValueFrom = (event) => {
+      event.stopPropagation();
+      this.value = this.textareaEl.value;
+      this.dispatchEvent(new InputEvent("input", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        data: this.value,
+        inputType: event.inputType,
+        isComposing: event.isComposing,
+        dataTransfer: event.dataTransfer,
+        detail: event.detail,
+        targetRanges: event.getTargetRanges(),
+        view: event.view
+      }));
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("minRows") && this.minRows > 0) {
+      const lineHeight = parseFloat(getComputedStyle(this.preEl).lineHeight);
+      this.preEl.style.minHeight = `${this.minRows * lineHeight}px`;
+    }
+    if (changedProperties.has("maxRows") && this.maxRows && this.maxRows > 0 && this.maxRows > this.minRows) {
+      const lineHeight = parseFloat(getComputedStyle(this.preEl).lineHeight);
+      this.preEl.style.maxHeight = `${this.maxRows * lineHeight}px`;
+    }
+    if (changedProperties.has("editable") && this.editable) {
+      requestAnimationFrame(() => {
+        this.textareaEl.focus();
+        this.textareaEl.setSelectionRange(this.value?.length || 0, this.value?.length || 0);
+      });
+    }
+  }
+  render() {
+    return html`
+      <div class="container">
+        <textarea
+          name="message"
+          placeholder=${this.placeholder || ""}
+          spellcheck=${this.spellcheck}
+          .readOnly=${!this.editable}
+          .value=${this.value || ""}
+          @input=${this.updateValueFrom}
+        ></textarea>
+        <pre
+          .textContent=${this.normalizeValue(this.value)}
+        ></pre>
+      </div>
+    `;
+  }
+  /**
+   * textarea에 포커스를 줍니다.
+   */
+  focus(options) {
+    this.textareaEl.focus(options);
+  }
+  /**
+   * pre 엘리먼트에 주입될 값을 정규화합니다.
+   */
+  normalizeValue(value) {
+    if (!value) return "​";
+    if (value.endsWith("\n")) {
+      return value + "​";
+    }
+    return value;
+  }
+}
+__decorateClass([
+  query("textarea")
+], UTextBlock.prototype, "textareaEl");
+__decorateClass([
+  query("pre")
+], UTextBlock.prototype, "preEl");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UTextBlock.prototype, "editable");
+__decorateClass([
+  property({ type: Boolean })
+], UTextBlock.prototype, "spellcheck");
+__decorateClass([
+  property({ type: String })
+], UTextBlock.prototype, "placeholder");
+__decorateClass([
+  property({ type: Number })
+], UTextBlock.prototype, "minRows");
+__decorateClass([
+  property({ type: Number })
+], UTextBlock.prototype, "maxRows");
+__decorateClass([
+  property({ type: String })
+], UTextBlock.prototype, "value");
+
+export { UTextBlock };

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

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

package/dist/components/blocks/UTextBlock.js

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

package/dist/components/blocks/UTextBlock.styles.d.ts

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

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

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: currentColor;
+    background-color: transparent;
+  }
+
+  .container {
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+
+  textarea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    display: block;
+    border: none;
+    outline: none;
+    resize: none;
+    color: inherit;
+    background-color: inherit;
+    
+    /* 동일 스타일 크기 싱크 */
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) transparent;
+  }
+  textarea[readonly] {
+    cursor: default;
+  }
+
+  /* 숨김 처리 */
+  pre {
+    visibility: hidden;
+    position: relative;
+    display: block;
+    color: red;
+
+    /* 동일 스타일 크기 싱크 */
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    overflow: auto;
+    scrollbar-width: thin;
+
+    pointer-events: none;
+    min-height: 1.5em;
+  }
+`;
+
+export { styles };

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

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

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

@@ -0,0 +1,84 @@
+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 { styles } from './UThinkBlock.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 UThinkBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.loading = false;
+    this.collapsed = true;
+    /**
+     * 컨텐츠 접기/펼치기 토글
+     */
+    this.toggleCollapsed = () => {
+      if (this.loading) return;
+      this.collapsed = !this.collapsed;
+    };
+    /**
+     * 컨텐츠가 로딩 중일 때, 스크롤을 맨 아래로 이동
+     */
+    this.scrollBodyContent = () => {
+      if (!this.bodyEl) return;
+      requestAnimationFrame(() => {
+        this.bodyEl.scrollTo({
+          top: this.bodyEl.scrollHeight,
+          behavior: "smooth"
+        });
+      });
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon
+    };
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value") && this.loading) {
+      this.scrollBodyContent();
+    }
+  }
+  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>
+    `;
+  }
+}
+__decorateClass([
+  query(".body")
+], UThinkBlock.prototype, "bodyEl");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UThinkBlock.prototype, "loading");
+__decorateClass([
+  property({ type: Boolean })
+], UThinkBlock.prototype, "collapsed");
+__decorateClass([
+  property({ type: String })
+], UThinkBlock.prototype, "value");
+
+export { UThinkBlock };

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

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

package/dist/components/blocks/UThinkBlock.js

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

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

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

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

@@ -0,0 +1,93 @@
+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%;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    font-size: 14px;
+  }
+
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .header .title {
+    flex: 1;
+    font-size: inherit;
+    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;
+  }
+
+  @keyframes dots_action {
+    0%, 20% { content: ' '; }
+    40% { content: ' .'; }
+    60% { content: ' ..'; }
+    80%, 100% { content: ' ...'; }
+  }
+
+  @keyframes pulse_action {
+    0% {
+      box-shadow: inset 0px -20px 20px -15px rgb(0, 0, 0, 0.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);
+    }
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,16 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { ToolBlockStatus } from '../message/UMessage.types.js';
+export declare class UToolBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    collapsed: boolean;
+    status: ToolBlockStatus;
+    index?: number;
+    name?: string;
+    input?: string;
+    output?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    private parseJson;
+    handleClickConfirm(): void;
+    handleClickDeny(): void;
+}

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

@@ -0,0 +1,126 @@
+import { nothing, 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 { styles } from './UToolBlock.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 UToolBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.collapsed = true;
+    this.status = "pending";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": UIcon,
+      "u-tooltip": UTooltip,
+      "u-button": UButton,
+      "u-spinner": USpinner,
+      "u-json-viewer": UJsonViewer
+    };
+  }
+  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>
+
+        <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>
+
+        <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>
+      </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");
+__decorateClass([
+  property({ type: String })
+], UToolBlock.prototype, "status");
+__decorateClass([
+  property({ type: Number })
+], UToolBlock.prototype, "index");
+__decorateClass([
+  property({ type: String })
+], UToolBlock.prototype, "name");
+__decorateClass([
+  property({ type: String })
+], UToolBlock.prototype, "input");
+__decorateClass([
+  property({ type: String })
+], UToolBlock.prototype, "output");
+
+export { UToolBlock };

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

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

package/dist/components/blocks/UToolBlock.js

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

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

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