Web Components Chat 정보

    Ignite UI for Web Components Chat 구성 요소는 애플리케이션에서 대화형 인터페이스를 구축하기 위한 완벽한 솔루션을 제공합니다. 고객 지원 도구, 협업 작업 공간 또는 챗봇 도우미를 만드는 경우 Chat 구성 요소는 문자 메시지 보내기 및 받기, 첨부 파일 업로드, 빠른 답장 제안 표시, 다른 참가자가 응답을 작성할 때 입력 표시기 표시 등 필요한 빌딩 블록을 제공합니다.

    정적 메시지 목록과 달리 구성 요소는 IgcChatComponent 대화형이며 실시간 통신을 위해 설계되었습니다. 입력, 렌더링 및 사용자 상호 작용을 관리하는 동시에 메시지와 첨부 파일이 표시되는 방식을 완전히 제어할 수 있습니다. 또한 레이아웃 또는 시각적 개체의 모든 부분을 재정의할 수 있는 광범위한 렌더링 API를 노출합니다.

    Installation

    시작하려면 다음 명령을 실행하여 Ignite UI for Web Components 설치합니다.

    npm install igniteui-webcomponents

    설치가 완료되면 프로젝트에서 구성 요소를 가져와 등록하여 사용자 지정 요소로 사용할 수 있도록 할 수 있습니다.

    import { defineComponents, IgcChatComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChatComponent);

    CSS 파일에는 기본 테마 중 하나가 포함되어 있습니다. 다른 테마로 바꾸거나 애플리케이션의 브랜딩과 일치하도록 하려면 IgcChatComponent 사용자 지정 테마를 만들 수 있습니다.

    Usage

    를 IgcChatComponent 사용하는 가장 간단한 방법은 다음과 같이 선언하는 것입니다.

    const options: IgcChatOptions = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

    <igc-chat id="myChat" .options=${options}>
</igc-chat>

    여기서 속성은 currentUserId 어떤 메시지가 "발신"(현재 사용자가 보냄)과 "수신"(다른 사용자가 보냄)인지 구성 요소에 알려줍니다. 채팅 headerText 창의 제목을 제공합니다.

    렌더링되면 프로그래밍 방식으로 메시지를 추가할 수 있습니다.

    const chat = document.getElementById('myChat');
const newMessage = {
  id: '1',
  sender: 'me',
  text: 'Hello! How can I help you?',
  timestamp: Date.now().toString()
};
chat.messages = [...chat.messages, newMessage ];

    이 접근 방식을 사용하면 Chat을 서버 엔드포인트, 챗봇 엔진 또는 협업 앱 백엔드와 같은 자체 데이터 소스에 쉽게 연결할 수 있습니다.

    Properties

    구성 요소는 IgcChatComponent 상태 및 구성을 제어할 수 있는 몇 가지 주요 속성을 노출합니다.

    이름 설명
    messages 채팅에 표시되는 메시지 배열(ChatMessage[])입니다. 여기에 바인딩하여 표시되는 메시지를 제어할 수 있습니다.
    draftMessage 현재 전송되지 않은 메시지는 다음을 포함하는 및 선택 사항text으로 표시됩니다attachments. 이는 메시지 초안을 저장하거나 복원하는 데 유용합니다.
    options 채팅 구성(IgcChatOptions)예: 현재 사용자 ID, 입력 자리 표시자, 허용되는 파일 형식, 빠른 회신 제안, 입력 지연 및 사용자 지정 렌더러.
    resourceStrings 레이블, 헤더 및 시스템 텍스트에 대한 지역화된 리소스 문자열입니다. 이 속성을 사용하여 구성 요소를 다른 언어에 맞게 조정합니다.

    이러한 속성을 사용하면 Chat의 UI를 애플리케이션의 상태 및 백엔드와 간단하게 동기화할 수 있습니다.

    Attachments

    현대의 대화는 텍스트에만 국한되는 경우가 거의 없습니다. 채팅 구성 요소에는 첨부 파일에 대한 지원이 내장되어 있어 사용자가 이미지, 문서 및 기타 파일을 공유할 수 있습니다. 기본적으로 입력 영역에는 첨부 버튼이 포함되어 있습니다. 다음 속성을 설정하여 허용되는 파일 형식을 제어할 수 있습니다. acceptedFiles​

    const options: IgcChatOptions = {
  acceptedFiles="image/*,.pdf",
};

    이 예에서 사용자는 이미지와 PDF 파일만 업로드할 수 있습니다. 사용 사례에 첨부 파일이 필요하지 않은 경우 쉽게 끌 수 있습니다.

    const options: IgcChatOptions = {
  disableInputAttachments: true,
};

    Suggestions

    빠른 답장 제안은 사용자에게 탭하여 즉시 답장할 수 있는 사전 정의된 답장을 제공합니다. 이 기능은 챗봇, 고객 서비스 흐름 또는 구조화된 프로세스를 통해 사용자를 안내할 때 특히 유용합니다. 문자열 배열을 suggestions 속성에 바인딩하여 제안을 제공할 수 있습니다. suggestions-position이 속성을 사용하면 입력 영역 아래 또는 메시지 목록 아래와 같이 표시되는 위치를 제어할 수 있습니다.

    const options: IgcChatOptions = {
  currentUserId: "me",
  suggestions: ['Yes', 'No', 'Maybe later'],
  suggestionsPosition: "below-input"
};

    <igc-chat
  .options=${options}>
</igc-chat>

    이 접근 방식은 반복적인 답변을 입력할 필요성을 줄여 사용자 상호 작용을 간소화하고 안내 대화의 전반적인 경험을 향상시키는 데 도움이 됩니다.

    Typing Indicator

    참가자가 상대방이 입력하는 것을 볼 수 있을 때 대화가 더 자연스럽게 느껴집니다. Chat 구성 요소는 options 개체의 속성을 통해 isTyping이 동작을 제공합니다. true로 설정하면 채팅의 메시지 아래에 미묘한 입력 표시기가 표시됩니다.

    const options: IgcChatOptions = {
  isTyping: true
};

    이 기능은 일반적으로 백 엔드 서비스에서 입력 이벤트를 수신할 때 프로그래밍 방식으로 전환됩니다.

    Custom Renderers

    Chat 구성 요소는 기본 UI와 함께 즉시 작동하지만 많은 애플리케이션이 모양과 느낌을 맞춤설정해야 합니다. 예를 들어 읽음 확인을 추가하거나, 아바타를 표시하거나, 입력 영역을 음성 녹음 버튼으로 바꿀 수 있습니다. 구성 요소는 IgcChatComponent 렌더러 시스템을 통해 이러한 요구 사항을 해결합니다. 렌더러는 단순히 UI의 지정된 부분에 대한 템플릿을 반환하는 함수입니다. 원하는 만큼 렌더러를 재정의할 수 있습니다.

    ChatTemplateRenderer

    모든 렌더러는 동일한 함수 서명을 따릅니다.

    export type ChatTemplateRenderer<T> = (ctx: T) => unknown;

    ctx 매개 변수는 렌더링되는 항목에 따라 다른 컨텍스트 데이터를 제공합니다.

    Renderer Contexts

    Context Type Provided Data
    ChatRenderContext instance(채팅 구성 요소 인스턴스)를 사용합니다.
    ChatInputRenderContext 상속ChatRenderContext 그리고attachments (배열IgcChatMessageAttachment) 및value (현재 입력 텍스트).
    ChatMessageRenderContext 상속ChatRenderContext 및 추가IgcChatMessage (렌더링되는 것).IgcChatMessage​
    ChatAttachmentRenderContext 상속ChatMessageRenderContext 및 추가attachment (렌더링되는 것).IgcChatMessageAttachment​

    사용 가능한 렌더러

    채팅의 다음 부분을 사용자 지정할 수 있습니다.

    • Message-level: message, messageHeader, messageContent, messageAttachments, messageActions
    • Attachment-level: attachment, attachmentHeader, attachmentContent
    • Input-level: input, inputActions, inputActionsStart, inputActionsEnd, inputAttachments, fileUploadButton, sendButton
    • Suggestions: suggestionPrefix
    • Miscellaneous: typingIndicator

    이 수준의 세분성은 전체 채팅 레이아웃을 다시 작성하지 않고도 한 부분(예: 첨부 파일의 모양)만 조정할 수 있음을 의미합니다.

    예: 사용자 지정 메시지 콘텐츠

    이 예제에서는 메시지 풍선을 사용자 고유의 템플릿으로 바꾸는 방법을 보여 줍니다.

    const options = {
  renderers: {
    messageContent: (ctx) => {
      const { message } = ctx;
      return html`<div class="bubble custom">${message.content}</div>`;
    }
  }
};

    Example: Custom Input Area

    기본적으로 채팅 입력은 텍스트 영역입니다. 음성 입력 단추 추가와 같이 보다 맞춤화된 환경을 제공하기 위해 재정의할 수 있습니다.

    const options = {
  renderers: {
    input: (ctx) => html`
      <textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
      <button @click=${() => alert('Voice input!')}>🎤</button>
    `
  }
};

    예: 입력 작업 확장

    이 구성 요소는 IgcChatComponent 기본 작업(업로드 및 보내기)을 유지하되 추가 컨트롤로 확장하려는 경우에 유용한 두 개의 렌더러를 제공합니다.

    • inputActionsStart– 내장된 업로드 버튼 뒤에 사용자 정의 콘텐츠를 삽입할 수 있습니다.
    • inputActionsEnd– 내장된 보내기 버튼 뒤에 사용자 지정 콘텐츠를 삽입할 수 있습니다.

    예를 들어 업로드 버튼 뒤에 음성 녹음 버튼을 추가하거나 보내기 버튼 뒤에 추가 옵션 메뉴를 추가할 수 있습니다. 다음 예제에서는 기본 업로드 단추가 유지되지만 그 옆에 마이크 단추가 추가됩니다. 다른 쪽 끝에서는 기본 보내기 버튼을 제거하고 사용자 지정 질문 버튼과 "더보기" 메뉴로 대체합니다.

    const _actionsStartTemplate = () => html`
  <igc-icon-button variant="flat">🎤</igc-icon-button>
`;

const _actionsEndTemplate = (ctx: ChatRenderContext) => html`
  <div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>
`;

const options = {
  renderers: {
    inputActionsStart: _actionsStartTemplate,
    inputActionsEnd: _actionsEndTemplate,
    sendButton: () => nothing,
  },
};

    이 설정에서는 다음을 수행합니다.

    • 업로드 버튼은 그대로 유지됩니다.
    • 마이크 버튼이 그 뒤에 추가됩니다(inputActionsStart).
    • 기본 보내기 버튼이 제거되고 사용자 지정 질문 버튼과 "더보기" 아이콘(inputActionsEnd)으로 대체됩니다.

    이 접근 방식은 채팅 입력 표시줄에 대한 완전한 유연성을 제공하여 입력 영역을 처음부터 다시 빌드하지 않고도 작업을 추가, 제거 또는 재정렬할 수 있습니다.

    Markdown Rendering

    Chat 구성 요소에는 기본 패키지의 진입점에서 igniteui-webcomponents/extras 내보내는 도우미를 통한 createMarkdownRenderer Markdown 콘텐츠에 대한 기본 제공 지원이 포함되어 있습니다. 이를 통해 서식이 지정된 텍스트, 링크, 목록, 구문이 강조 표시된 코드 블록이 포함된 메시지를 표시하는 동시에 렌더링된 모든 HTML이 보안을 위해 삭제되도록 할 수 있습니다.

    [!Note] To use the Markdown renderer, you need to install the following peer dependencies in your project:

    npm install marked marked-shiki shiki dompurify

    기본적으로 메시지는 일반 텍스트로 렌더링됩니다. Markdown 지원을 사용하도록 설정하려면 아래와 같이 messageContent 렌더러를 재정의하고 Markdown 렌더러를 사용할 수 있습니다.

    import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';

// Create a reusable Markdown renderer instance
const markdownRenderer = await createMarkdownRenderer();

const options = {
  renderers: {
    messageContent: async ({ message }) => markdownRenderer(message),
  }
};

    이 예에서는 다음을 수행합니다.

    • 각 메시지의 텍스트 속성은 표시된 라이브러리를 사용하여 Markdown으로 구문 분석됩니다.
    • 렌더러는 DOMPurify를 사용하여 출력을 삭제합니다.
    • 링크는 안전한 rel 속성이 있는 새 탭에서 자동으로 열립니다.

    구문 강조

    마크다운 렌더러는 Shiki를 사용하는 코드 블록에 대한 구문 강조 표시도 지원합니다. 기본적으로 github-light 테마를 사용하여 JavaScript, TypeScript, HTML 및 CSS에 대한 강조 표시가 포함됩니다. MarkdownRendererOptions를 통해 이 동작을 사용자 지정할 수 있습니다.

    const markdownRenderer = await createMarkdownRenderer({
  theme: { light: 'min-light' },
  languages: ['javascript', 'python']
});

    이렇게 하면 GitHub 어두운 테마로 스타일이 지정된 JavaScript, Python 및 Go에 대한 강조 표시된 코드 블록이 활성화됩니다.

    Configuration Options

    옵션 설명
    noHighlighter Iftrue는 구문 강조 표시를 완전히 비활성화합니다.
    languages 강조 표시된 코드 블록에서 지원할 프로그래밍 언어 목록입니다.
    theme 적용할 시키 테마를 지정하는 개체입니다. 및light 모드에 대한dark 별도의 값을 지원합니다(예: ,).{ light: 'github-light', dark: 'github-dark' }​
    sanitizer 최종 HTML을 삭제하는 사용자 정의 함수입니다. 기본값은 입니다DOMPurify.sanitize.

    이벤트

    애플리케이션 로직과 통합하기 위해 Chat 구성 요소는 일련의 이벤트를 내보냅니다.

    • igcMessageCreated – 새 메시지가 생성될 때.
    • igcMessageReact – 메시지가 반응할 때.
    • igcAttachmentClick – 첨부 파일을 클릭할 때.
    • igcAttachmentAdded – 첨부 파일이 추가될 때.
    • igcAttachmentRemoved – 첨부 파일이 제거될 때.
    • igcAttachmentDrag – 첨부 파일을 드래그하는 동안.
    • igcAttachmentDrop – 첨부 파일이 삭제될 때.
    • igcTypingChange – 상태 변경을 입력할 때.
    • igcInputFocus / igcInputBlur – input focus events.
    • igcInputChange – 입력 값이 변경될 때.

    이러한 이벤트를 수신하고 백엔드와 동기화할 수 있습니다.

    chat.addEventListener('igcMessageCreated', (e) => {
  console.log('Message:', e.detail);
});

    Styling

    이 구성 요소는 IgcChatComponent 모양과 구조를 세밀하게 사용자 정의하기 위해 CSS 부분과 슬롯을 모두 노출합니다.

    CSS Parts

    부품명 설명
    chat-container 기본 채팅 컨테이너의 스타일을 지정합니다.
    header 채팅 헤더 컨테이너의 스타일을 지정합니다.
    prefix 채팅 제목 앞의 요소(예: 아바타)의 스타일을 지정합니다.
    title 채팅 헤더 제목의 스타일을 지정합니다.
    message-area-container 메시지 및 (선택 사항) 제안을 포함하는 컨테이너의 스타일을 지정합니다.
    message-list 메시지 목록 컨테이너의 스타일을 지정합니다.
    message-item 각 메시지 래퍼의 스타일을 지정합니다.
    typing-indicator 입력 표시기 컨테이너의 스타일을 지정합니다.
    typing-dot 개별 입력 표시기 점의 스타일을 지정합니다.
    suggestions-container 모든 제안을 포함하는 컨테이너의 스타일을 지정합니다.
    suggestions-header 제안 헤더의 스타일을 지정합니다.
    suggestion 각 제안 항목의 스타일을 지정합니다.
    suggestion-prefix 제안의 아이콘 또는 접두사의 스타일을 지정합니다.
    suggestion-title 제안의 텍스트/제목 스타일을 지정합니다.
    empty-state 메시지가 없을 때 빈 상태 컨테이너의 스타일을 지정합니다.
    input-area-container 채팅 입력 영역 주위에 래퍼의 스타일을 지정합니다.
    input-container 기본 입력 컨테이너의 스타일을 지정합니다.
    input-attachments-container 입력에서 첨부 파일에 대한 컨테이너의 스타일을 지정합니다.
    input-attachment-container 입력 영역에서 단일 부착물의 스타일을 지정합니다.
    input-attachment-name 첨부 파일의 파일 이름에 스타일을 지정합니다.
    input-attachment-icon 첨부 파일의 아이콘에 스타일을 지정합니다.
    text-input 메시지를 입력하기 위한 텍스트 입력 필드의 스타일을 지정합니다.
    input-actions-container 입력 작업에 대한 컨테이너의 스타일을 지정합니다.
    input-actions-start 기본 파일 업로드 후 입력 시작 시 작업 그룹의 스타일을 지정합니다.
    input-actions-end 입력 끝에 있는 작업 그룹의 스타일을 지정합니다.
    file-upload-container 파일 업로드 입력에 대한 컨테이너의 스타일을 지정합니다.
    file-upload 파일 업로드 입력 자체의 스타일을 지정합니다.
    send-button-container 보내기 단추 주위에 컨테이너의 스타일을 지정합니다.
    send-button 보내기 단추의 스타일을 지정합니다.
    message-container 단일 메시지의 컨테이너 스타일을 지정합니다.
    message-list (forwarded) 내부 메시지 목록의 스타일을 지정합니다.
    message-header 메시지의 헤더(예: 보낸 사람, 타임스탬프)의 스타일을 지정합니다.
    message-content 메시지의 텍스트 내용에 스타일을 지정합니다.
    message-attachments-container 메시지 첨부 파일의 컨테이너 스타일을 지정합니다.
    message-attachment 단일 메시지 첨부 파일의 스타일을 지정합니다.
    message-actions-container 메시지 작업을 포함하는 컨테이너의 스타일을 지정합니다.
    message-sent 현재 사용자가 보낸 것으로 표시된 메시지의 스타일을 지정합니다.
    attachment-header 부착 블록의 머리글 스타일을 지정합니다.
    attachment-content 첨부 블록의 컨텐츠 스타일을 지정합니다.
    attachment-icon 첨부 파일의 아이콘에 스타일을 지정합니다.
    file-name 첨부 파일에 표시되는 파일 이름의 스타일을 지정합니다.

    Slots

    슬롯 이름 설명
    prefix 채팅 제목 앞에 콘텐츠(예: 아바타 또는 아이콘)를 삽입하기 위한 슬롯입니다.
    title 채팅 제목 콘텐츠를 재정의하기 위한 슬롯입니다.
    actions 헤더 작업(예: 버튼, 메뉴)을 삽입하기 위한 슬롯입니다.
    suggestions-header 제안 목록에 대한 사용자 지정 헤더를 렌더링하기 위한 슬롯입니다.
    suggestions 빠른 회신 제안의 사용자 지정 목록을 렌더링하기 위한 슬롯입니다.
    suggestions-actions 추가 작업을 렌더링하기 위한 슬롯입니다.
    suggestion 단일 제안 항목을 렌더링하기 위한 슬롯입니다.
    empty-state 메시지가 없을 때 표시되는 슬롯입니다.

    루트 스타일 채택(adoptRootStyles)

    Chat 구성 요소의 옵션에는 고급 스타일 시나리오를 위한 특수 플래그가 포함되어 있습니다.

    옵션 유형 기본 설명
    adoptRootStyles boolean 거짓 언제true, 구성 요소는 Shadow DOM 내부에서 렌더링된 콘텐츠(예: 사용자 정의 렌더러에서)가 문서의 루트에서 스타일을 상속하도록 허용합니다. 이렇게 하면 스타일링에 대한 빠른 해결 방법을 제공하지만 프로덕션 사용에는 권장되지 않습니다.

    이 속성은 사용자 정의 렌더링 템플릿에 전역 CSS를 적용할 때 Shadow DOM 캡슐화를 처리하지 않으려는 경우에 유용할 수 있습니다. 그러나 다음과 같은 장단점이 있습니다.

    • ✅ 편의성: 전역 스타일(문서에서)이 사용자 정의 메시지 렌더러에 영향을 줄 수 있습니다.
    • ⚠️ 위험: 캡슐화가 중단되고 전역 CSS가 의도치 않게 내부 시각적 개체를 변경하는 스타일 누출로 이어질 수 있습니다.
    • 🔒 일회성 설정: 이 옵션은 초기화 시에만 설정할 수 있습니다. 런타임에 변경해도 효과가 없습니다.

    이 속성을 사용하기 전에 표준 웹 구성 요소 스타일 지정 접근 방식을 사용하는 것이 좋습니다.

    • CSS 변수 및 ::p art API – 노출된 부분과 변수를 통해 사용자 정의하는 것을 선호합니다.
    • <link> 요소 – 더 큰 스타일시트의 경우 Shadow DOM 내부에 삽입합니다.
    • 인라인 <style> 태그 – 작은 범위 스타일 재정의의 경우.

    예

    igc-chat::part(header) {
  background: var(--ig-primary-100);
}

igc-chat::part(message-container) {
  border-radius: 12px;
  padding: 0.5rem;
}

igc-chat::part(empty-state) {
  font-style: italic;
  color: var(--ig-gray-500);
}

    이를 통해 기능을 대체하지 않고도 브랜드에 맞게 스타일을 IgcChatComponent 지정할 수 있습니다.

    API Reference

    Additional Resources