@iyulab/chat-components 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Changelog
+
+## 0.1.0 (2025-12-19)
+- Initial library version release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Iyulab, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# @iyulab/chat-components
+
+대화형 LLM 채팅 인터페이스를 구현하기 위해 필요한 컴포넌트들을 제공합니다.
+현재 개발중으로, 일부 컴포넌트는 미완성 상태입니다.
+
+## 📦 Insta
+
+```bash
+npm install @iyulab/chat-components
+```
+
+## 🚀 Usage
+
+```javascript
+import '@iyulab/chat-components';
+```
+
+## 📄 LI
+
+MIT © iyulab

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

@@ -0,0 +1,24 @@
+import { nothing } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 코드 블록을 렌더링하는 컴포넌트입니다.
+ * 언어와 코드를 받아 syntax highlighting을 적용합니다.
+ */
+export declare class UCodeBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 코드 블록의 헤더를 숨길지 여부를 지정합니다. */
+    headless: boolean;
+    /** 코드 언어를 지정합니다. */
+    language: string;
+    /** 표시할 코드 내용입니다. */
+    value?: string;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /**
+     * 코드에 구문 강조를 적용합니다.
+     * @param value 코드 문자열
+     * @param lang 코드 언어
+     * @returns 구문 강조가 적용된 HTML 문자열
+     */
+    private parse;
+}

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

@@ -0,0 +1,65 @@
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import hljs from 'highlight.js';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UCopyButton } from '../buttons/UCopyButton.component.js';
+import { styles } from './UCodeBlock.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 UCodeBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.headless = false;
+    this.language = "plaintext";
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-copy-button": UCopyButton
+    };
+  }
+  render() {
+    if (!this.value) return nothing;
+    const lang = hljs.getLanguage(this.language) ? this.language : "plaintext";
+    return html`
+      <div class="header" ?hidden=${this.headless}>
+        <span class="language">${lang}</span>
+        <u-copy-button mode="badge" .value="${this.value}"></u-copy-button>
+      </div>
+      ${unsafeHTML(`<pre class="hljs">${this.parse(this.value, lang)}</pre>`)}
+    `;
+  }
+  /**
+   * 코드에 구문 강조를 적용합니다.
+   * @param value 코드 문자열
+   * @param lang 코드 언어
+   * @returns 구문 강조가 적용된 HTML 문자열
+   */
+  parse(value, lang) {
+    return hljs.highlight(value, {
+      language: lang
+    }).value;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCodeBlock.prototype, "headless");
+__decorateClass([
+  property({ type: String })
+], UCodeBlock.prototype, "language");
+__decorateClass([
+  property({ type: String })
+], UCodeBlock.prototype, "value");
+
+export { UCodeBlock };

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

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

package/dist/components/blocks/UCodeBlock.js

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

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

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

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

@@ -0,0 +1,175 @@
+import { css } from 'lit';
+
+const styles = css`
+  :host {
+    --hljs-text-color: #24292e;
+    --hljs-background-color: #ffffff;
+    --hljs-keyword-color: #d73a49;
+    --hljs-entity-color: #6f42c1;
+    --hljs-constant-color: #005cc5;
+    --hljs-string-color: #032f62;
+    --hljs-variable-color: #e36209;
+    --hljs-comment-color: #6a737d;
+    --hljs-entity-tag-color: #22863a;
+    --hljs-markup-heading-color: #005cc5;
+    --hljs-markup-list-color: #735c0f;
+    --hljs-addition-color: #22863a;
+    --hljs-addition-bg-color: #f0fff4;
+    --hljs-deletion-color: #b31d28;
+    --hljs-deletion-bg-color: #ffeef0;
+  }
+  :host-context([theme="dark"]) {
+    --hljs-text-color: #c9d1d9;
+    --hljs-background-color: #0d1117;
+    --hljs-keyword-color: #ff7b72;
+    --hljs-entity-color: #d2a8ff;
+    --hljs-constant-color: #79c0ff;
+    --hljs-string-color: #a5d6ff;
+    --hljs-variable-color: #ffa657;
+    --hljs-comment-color: #8b949e;
+    --hljs-entity-tag-color: #7ee787;
+    --hljs-markup-heading-color: #1f6feb;
+    --hljs-markup-list-color: #f2cc60;
+    --hljs-addition-color: #aff5b4;
+    --hljs-addition-bg-color: #033a16;
+    --hljs-deletion-color: #ffdcd7;
+    --hljs-deletion-bg-color: #67060c;
+  }
+
+  :host {
+    display: block;
+    width: 100%;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background-color: var(--u-neutral-100);
+    padding: 8px 16px;
+  }
+
+  .header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    font-weight: 300;
+    color: var(--u-txt-color-strong);
+    margin-bottom: 12px;
+    user-select: none;
+  }
+
+  /* highlight.js styles */
+  .hljs {
+    display: block;
+    overflow-x: auto;
+    margin: 0;
+    padding: 0;
+    color: var(--hljs-text-color);
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
+    font-size: 14px;
+    line-height: 1.45;
+    white-space: pre;
+    scrollbar-width: thin;
+    scrollbar-color: var(--u-scrollbar-color) transparent;
+    scrollbar-gutter: stable;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    color: var(--hljs-keyword-color);
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    color: var(--hljs-entity-color);
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    color: var(--hljs-constant-color);
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    color: var(--hljs-string-color);
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    color: var(--hljs-variable-color);
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    color: var(--hljs-comment-color);
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    color: var(--hljs-entity-tag-color);
+  }
+
+  .hljs-subst {
+    color: var(--hljs-text-color);
+  }
+
+  .hljs-section {
+    color: var(--hljs-markup-heading-color);
+    font-weight: bold;
+  }
+
+  .hljs-bullet {
+    color: var(--hljs-markup-list-color);
+  }
+
+  .hljs-emphasis {
+    color: var(--hljs-text-color);
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    color: var(--hljs-text-color);
+    font-weight: bold;
+  }
+
+  .hljs-addition {
+    color: var(--hljs-addition-color);
+    background-color: var(--hljs-addition-bg-color);
+  }
+
+  .hljs-deletion {
+    color: var(--hljs-deletion-color);
+    background-color: var(--hljs-deletion-bg-color);
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    color: currentColor;
+  }
+`;
+
+export { styles };

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

@@ -0,0 +1,24 @@
+import { nothing } from 'lit';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+/**
+ * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
+ */
+export declare class UMarkedBlock extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    private parser;
+    /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
+    value?: string;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
+    /**
+     * 마크다운 문자열을 HTML로 변환합니다.
+     * @param value 변환할 마크다운 문자열
+     * @returns 변환된 HTML 문자열
+     */
+    private parse;
+    /**
+     * HTML 속성에 안전하게 삽입하기 위해 특수문자를 이스케이프합니다.
+     * @param value 원본 문자열
+     */
+    private sanitizeCode;
+}

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

@@ -0,0 +1,80 @@
+import { nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Marked } from 'marked';
+import markedAlert from 'marked-alert';
+import markedFootnote from 'marked-footnote';
+import markedKatex from 'marked-katex-extension';
+import { BaseElement } from '@iyulab/components/dist/components/BaseElement.js';
+import { UCodeBlock } from './UCodeBlock.component.js';
+import { styles } from './UMarkedBlock.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 UMarkedBlock extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.parser = new Marked({
+      pedantic: false,
+      // 엄격한 마크다운 규격 준수하지 않음 (markdown.pl을 따르지 않음)
+      gfm: true,
+      // GitHub Flavored Markdown 사용
+      breaks: true,
+      // 단순 줄바꿈 또한 <br> 태그로 변환
+      silent: true,
+      // 파싱 오류 발생 시 예외를 발생시키지 않고 메시지를 출력
+      renderer: {
+        code: ({ text, lang }) => {
+          lang ||= "plaintext";
+          text = this.sanitizeCode(text);
+          return `<u-code-block language="${lang}" value="${text}"></u-code-block>`;
+        }
+      }
+    }).use(markedAlert()).use(markedFootnote()).use(markedKatex({ output: "mathml" }));
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-code-block": UCodeBlock
+    };
+  }
+  render() {
+    if (!this.value) return nothing;
+    return html`
+      <div class="markdown-body">
+        ${unsafeHTML(this.parse(this.value))}
+      </div>
+    `;
+  }
+  /**
+   * 마크다운 문자열을 HTML로 변환합니다.
+   * @param value 변환할 마크다운 문자열
+   * @returns 변환된 HTML 문자열
+   */
+  parse(value) {
+    value = value.replace(/\u200B|\u200C|\u200D|\u200E|\u200F|\uFEFF/g, "");
+    value = this.parser.parse(value, { async: false });
+    return value;
+  }
+  /**
+   * HTML 속성에 안전하게 삽입하기 위해 특수문자를 이스케이프합니다.
+   * @param value 원본 문자열
+   */
+  sanitizeCode(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+}
+__decorateClass([
+  property({ type: String })
+], UMarkedBlock.prototype, "value");
+
+export { UMarkedBlock };

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

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

package/dist/components/blocks/UMarkedBlock.js

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

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

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