@iyulab/chat-components 0.1.0

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

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    position: relative;
+    padding: 8px;
+    font-size: 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  :host(:hover) {
+    background-color: var(--u-neutral-100);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+  /* u-icon 스타일 */
+  :host([value="low"]) u-icon {
+    filter: brightness(0.8);
+    color: var(--u-yellow-700);
+  }
+  :host([value="medium"]) u-icon {
+    color: var(--u-yellow-700);
+  }
+  :host([value="high"]) u-icon {
+    color: var(--u-yellow-700);
+  }
+  /* indicators 스타일 */
+  :host([value="low"]) .indicators > span:last-child {
+    background-color: var(--u-yellow-700);
+  }
+  :host([value="medium"]) .indicators > span:nth-last-child(-n+2) {
+    background-color: var(--u-yellow-700);
+  }
+  :host([value="high"]) .indicators > span {
+    background-color: var(--u-yellow-700);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
+  u-icon {
+    font-size: inherit;
+    color: #e0e0e0;
+    transition: color 0.3s ease, filter 0.3s ease;
+  }
+
+  .indicators {
+    height: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .indicators > span {
+    width: 0.5em;
+    height: 0.2em;
+    border-radius: 2px;
+    background-color: #e0e0e0;
+    transition: background-color 0.3s ease;
+  }
+`;
+
+export { styles };

package/dist/components/json-viewer/UJsonViewer.component.d.ts

@@ -0,0 +1,44 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { JsonNode } from './UJsonViewer.lib.js';
+/**
+ * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
+ */
+export declare class UJsonViewer extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    state: Record<string, boolean>;
+    /** 초기 확장 상태를 관리하는 속성입니다. */
+    expanded: boolean;
+    /** JSON 데이터 (속성으로 전달 가능) */
+    value: JsonNode;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    /**
+     * JsonNode를 렌더링합니다.
+     * @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+     * @param parent - 부모 노드의 경로
+     */
+    private renderNode;
+    /**
+     * JsonValue를 렌더링합니다.
+     * @param node - JsonValue (string, number, boolean, null 등)
+     */
+    private renderValue;
+    /**
+     * JsonObject 또는 JsonArray를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     * @param depth - 현재 깊이
+     */
+    private renderObject;
+    /**
+     * 노드의 미리보기를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     */
+    private renderPreview;
+    /** 노드 확장/축소 클릭 핸들러 */
+    private toggle;
+    /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+    private setState;
+}

package/dist/components/json-viewer/UJsonViewer.component.js

@@ -0,0 +1,137 @@
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { isValueType, getNodeName, jsonConverter } from './UJsonViewer.lib.js';
+import { styles } from './UJsonViewer.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 UJsonViewer extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.state = {};
+    this.expanded = true;
+    this.value = {};
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("value") || changedProperties.has("expanded")) {
+      this.state = this.setState(this.value);
+    }
+  }
+  render() {
+    return html`
+      <div part="base">
+        ${this.renderNode(this.value)}
+      </div>
+    `;
+  }
+  /**
+   * JsonNode를 렌더링합니다.
+   * @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+   * @param parent - 부모 노드의 경로
+   */
+  renderNode(value, parent = "") {
+    return isValueType(value) ? this.renderValue(value) : this.renderObject(value, parent);
+  }
+  /**
+   * JsonValue를 렌더링합니다.
+   * @param node - JsonValue (string, number, boolean, null 등)
+   */
+  renderValue(node) {
+    const type = getNodeName(node);
+    return html`
+      <span part="${type}" class="${type}" role="treeitem">
+        ${JSON.stringify(node)}
+      </span>
+    `;
+  }
+  /**
+   * JsonObject 또는 JsonArray를 렌더링합니다.
+   * @param node - JsonObject 또는 JsonArray
+   * @param depth - 현재 깊이
+   */
+  renderObject(node, parent) {
+    return html`
+      <ul part="object" role="group">
+        ${map(Object.entries(node), ([key, value]) => {
+      const path = parent ? `${parent}.${key}` : key;
+      const isValue = isValueType(value);
+      const isExpanded = this.state[path] ?? this.expanded;
+      return html`
+            <li part="property" role="treeitem"
+                data-path="${path}"
+                aria-expanded="${isExpanded ? "true" : "false"}">
+              <span part="key"
+                    class="key"
+                    ?collapsable="${!isValue}"
+                    ?collapsed="${!isValue && !isExpanded}"
+                    @click=${!isValue ? () => this.toggle(path) : null}>
+                ${key}:
+                ${when(!isValue && !isExpanded, () => this.renderPreview(value))}
+              </span>
+
+              ${when(isValue || isExpanded, () => this.renderNode(value, path))}
+            </li>`;
+    })}
+      </ul>
+    `;
+  }
+  /**
+   * 노드의 미리보기를 렌더링합니다.
+   * @param node - JsonObject 또는 JsonArray
+   */
+  renderPreview(node) {
+    return html`
+      <span part="preview" class="preview">
+        ${Array.isArray(node) ? node.length === 0 ? "[ ]" : `[ ${node.length} items ]` : Object.keys(node).length === 0 ? "{ }" : `{ ${Object.keys(node).length} properties }`}
+      </span>
+    `;
+  }
+  /** 노드 확장/축소 클릭 핸들러 */
+  toggle(path) {
+    const isExpanded = this.state[path] ?? false;
+    this.state = { ...this.state, [path]: !isExpanded };
+  }
+  /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+  setState(value, parent = "") {
+    if (typeof value !== "object" || value === null) return {};
+    const state2 = {};
+    Object.entries(value).forEach(([key, item]) => {
+      const path = parent ? `${parent}.${key}` : key;
+      state2[path] = this.expanded;
+      Object.assign(state2, this.setState(item, path));
+    });
+    return state2;
+  }
+}
+__decorateClass([
+  state()
+], UJsonViewer.prototype, "state");
+__decorateClass([
+  property({ type: Boolean })
+], UJsonViewer.prototype, "expanded");
+__decorateClass([
+  property({ type: Object, converter: jsonConverter })
+], UJsonViewer.prototype, "value");
+
+export { UJsonViewer };

package/dist/components/json-viewer/UJsonViewer.d.ts

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

package/dist/components/json-viewer/UJsonViewer.js

@@ -0,0 +1,5 @@
+import { UJsonViewer } from './UJsonViewer.component.js';
+
+UJsonViewer.define("u-json-viewer");
+
+export { UJsonViewer };

package/dist/components/json-viewer/UJsonViewer.lib.d.ts

@@ -0,0 +1,16 @@
+export type JsonValue = string | number | boolean | null;
+export type JsonObject = {
+    [x: string]: JsonNode;
+};
+export type JsonArray = Array<JsonNode>;
+export type JsonNode = JsonValue | JsonObject | JsonArray;
+/**
+ * 이 컨버터는 JsonNode 타입을 사용하여 JSON 데이터를 처리합니다.
+ * 문자열 어트리뷰트로 전달된 JSON 문자열을 객체로 변환/직렬화합니다.
+ */
+export declare const jsonConverter: {
+    fromAttribute: (value: string | null) => JsonNode;
+    toAttribute: (value: JsonNode) => string;
+};
+export declare const isValueType: (value: JsonNode) => boolean;
+export declare const getNodeName: (value: JsonNode) => string;

package/dist/components/json-viewer/UJsonViewer.lib.js

@@ -0,0 +1,28 @@
+const jsonConverter = {
+  fromAttribute: (value) => {
+    if (!value || !value.trim()) return {};
+    try {
+      return JSON.parse(value);
+    } catch {
+      return {};
+    }
+  },
+  toAttribute: (value) => {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "{}";
+    }
+  }
+};
+const isValueType = (value) => {
+  return value !== Object(value);
+};
+const getNodeName = (value) => {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  if (typeof value === "object") return "object";
+  return typeof value;
+};
+
+export { getNodeName, isValueType, jsonConverter };

package/dist/components/json-viewer/UJsonViewer.styles.d.ts

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

package/dist/components/json-viewer/UJsonViewer.styles.js

@@ -0,0 +1,115 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --indent-size: 2em;
+    
+    --json-property-color: #0451a5;
+    --json-string-color: #a31515;
+    --json-number-color: #098658;
+    --json-boolean-color: #0000ff;
+    --json-null-color: #0000ff;
+    --json-preview-color: #999999;
+    --json-arrow-color: #666968;
+    --json-guide-color: #c0c0c0;
+  }
+  :host-context([theme="dark"]) {
+    --json-property-color: #9cdcfe;
+    --json-string-color: #ce9178;
+    --json-number-color: #b5cea8;
+    --json-boolean-color: #569cd6;
+    --json-null-color: #569CD6;
+    --json-preview-color: #999999;
+    --json-arrow-color: #d4d4d4;
+    --json-guide-color: #3c3c3c;
+  }
+
+  :host {
+    display: block;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.5;
+  }
+
+  .key {
+    color: var(--json-property-color);
+    display: inline-flex;
+    align-items: center;
+  }
+  .key[collapsable] {
+    cursor: pointer;
+    user-select: none;
+  }
+  .key[collapsable]::before {
+    display: inline-flex;
+    font-size: 0.5em;
+    content: '▶';
+    align-items: center;
+    justify-content: center;
+
+    transform: rotate(90deg);
+    transition: transform 0.2s ease-out;
+    margin-right: 0.5em;
+
+    color: var(--json-arrow-color);
+  }
+  .key[collapsable][collapsed]::before {
+    transform: rotate(0);
+  }
+
+  .preview {
+    color: var(--json-preview-color);
+    margin-left: 0.5em;
+  }
+
+  .string {
+    color: var(--json-string-color);
+  }
+
+  .number {
+    color: var(--json-number-color);
+  }
+
+  .boolean {
+    color: var(--json-boolean-color);
+  }
+
+  .null {
+    color: var(--json-null-color);
+  }
+
+  /* object styles */
+  ul {
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    clear: both;
+  }
+
+  /* property styles */
+  li {
+    position: relative;
+    list-style: none;
+    outline: none;
+  }
+
+  /* nested property styles */
+  li ul > li {
+    position: relative;
+    margin-left: var(--indent-size);
+    padding-left: 0px;
+  }
+
+  /* guide line styles */
+  ul ul::before {
+    content: '';
+    border-left: 1px solid var(--json-guide-color);
+    position: absolute;
+    left: calc(1.5em / 2 - 1px);
+    top: 0.2em;
+    bottom: 0.2em;
+  }
+`;
+
+export { styles };

package/dist/components/message/UMessage.component.d.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { BlockItem } from './UMessage.types.js';
+export declare class UMessage extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    items?: BlockItem[];
+    timestamp?: string;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * 텍스트 및 마크다운 블록의 내용을 모아서 하나의 문자열로 반환합니다.
+     */
+    private getTextValue;
+}

package/dist/components/message/UMessage.component.js

@@ -0,0 +1,104 @@
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UCopyButton } from '../buttons/UCopyButton.component.js';
+import { UTextBlock } from '../blocks/UTextBlock.component.js';
+import { UMarkedBlock } from '../blocks/UMarkedBlock.component.js';
+import { UThinkBlock } from '../blocks/UThinkBlock.component.js';
+import { UToolBlock } from '../blocks/UToolBlock.component.js';
+import { format } from '../../internals/date-helpers.js';
+import { styles } from './UMessage.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 UMessage extends BaseElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * 텍스트 및 마크다운 블록의 내용을 모아서 하나의 문자열로 반환합니다.
+     */
+    this.getTextValue = (items) => {
+      if (!items) return "";
+      return items.reduce((acc, item) => {
+        if (item.type === "text" || item.type === "markdown") {
+          return acc ? acc + "\n" + (item.value || "") : item.value || "";
+        }
+        return acc;
+      }, "");
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-text-block": UTextBlock,
+      "u-marked-block": UMarkedBlock,
+      "u-think-block": UThinkBlock,
+      "u-tool-block": UToolBlock,
+      "u-copy-button": UCopyButton
+    };
+  }
+  render() {
+    return html`
+      <div class="container">
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="body" part="body">
+          ${this.items && this.items.length > 0 ? repeat(this.items, (_, idx) => idx, (item, idx) => {
+      return item.type === "text" ? html`
+                  <u-text-block 
+                    .value=${item.value}
+                  ></u-text-block>` : item.type === "markdown" ? html`
+                  <u-marked-block 
+                    .value=${item.value}
+                  ></u-marked-block>` : item.type === "thinking" ? html`
+                  <u-think-block 
+                    ?loading=${this.items?.length === (idx || 0) + 1}
+                    .value=${item.value}
+                  ></u-think-block>` : item.type === "tool" ? html`
+                  <u-tool-block
+                    .index=${idx}
+                    .status=${item.status}
+                    .name=${item.name}
+                    .input=${item.input}
+                    .output=${item.output}
+                  ></u-tool-block>` : nothing;
+    }) : html`
+              <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <circle class="dot" cx="4" cy="12" r="3"/>
+                  <circle class="dot d1" cx="12" cy="12" r="3"/>
+                  <circle class="dot d2" cx="20" cy="12" r="3"/>
+              </svg>`}
+        </div>
+        <div class="footer" part="footer">
+          <u-copy-button
+            .value=${this.getTextValue(this.items)}
+          ></u-copy-button>
+          <slot name="footer"></slot>
+          <div style="flex:1;"></div>
+          <div class="timestamp">
+            ${format(this.timestamp)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Array })
+], UMessage.prototype, "items");
+__decorateClass([
+  property({ type: String })
+], UMessage.prototype, "timestamp");
+
+export { UMessage };

package/dist/components/message/UMessage.d.ts

@@ -0,0 +1,8 @@
+import { UMessage } from './UMessage.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-message": UMessage;
+    }
+}
+export { UMessage };
+export type * from './UMessage.types';

package/dist/components/message/UMessage.js

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

package/dist/components/message/UMessage.styles.d.ts

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

package/dist/components/message/UMessage.styles.js

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    display: block;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 8px;
+    border: none;
+    border-radius: 8px;
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 0px;
+    gap: 12px;
+    font-size: 12px;
+  }
+
+  .loader {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+  }
+
+  .dot {
+    animation: bounce_action 1.05s infinite
+  }
+  .d1 {
+    animation-delay:.1s
+  }
+  .d2 {
+    animation-delay:.2s
+  }
+
+  @keyframes bounce_action {
+    0%,57.14% {
+      animation-timing-function: cubic-bezier(0.33,.66,.66,1);
+      transform: translate(0);
+    }
+    28.57% {
+      animation-timing-function: cubic-bezier(0.33,0,.66,.33);
+      transform: translateY(-6px);
+    }
+    100% {
+      transform: translate(0);
+    }
+  }
+`;
+
+export { styles };

package/dist/components/message/UMessage.types.d.ts

@@ -0,0 +1,21 @@
+export interface TextBlockItem {
+    type: "text";
+    value?: string;
+}
+export interface MarkdownBlockItem {
+    type: "markdown";
+    value?: string;
+}
+export interface ThinkingBlockItem {
+    type: "thinking";
+    value?: string;
+}
+export type ToolBlockStatus = ("pending" | "paused" | "inProgress" | "success" | "failure");
+export interface ToolBlockItem {
+    type: "tool";
+    status: ToolBlockStatus;
+    name?: string;
+    input?: string;
+    output?: string;
+}
+export type BlockItem = (TextBlockItem | MarkdownBlockItem | ThinkingBlockItem | ToolBlockItem);

package/dist/events/UStopEvent.d.ts

@@ -0,0 +1,6 @@
+export type UStopEvent = CustomEvent<undefined>;
+declare global {
+    interface HTMLElementEventMap {
+        'u-stop': UStopEvent;
+    }
+}

package/dist/events/USubmitEvent.d.ts

@@ -0,0 +1,6 @@
+export type USubmitEvent = CustomEvent<string>;
+declare global {
+    interface HTMLElementEventMap {
+        'u-submit': USubmitEvent;
+    }
+}