Angular 채팅 개요

채팅 컴포넌트는 애플리케이션 내 대화형 인터페이스를 구축하는 데 완벽한 솔루션을 제공합니다. 고객 지원 도구, 협업 작업 공간, 챗봇 어시스턴트 등 어떤 형태로든 Chat 컴포넌트는 필요한 기본 요소를 제공합니다: 문자 메시지 송수신, 파일 첨부 업로드, 빠른 답장 제안 표시 표시, 상대방이 답변을 작성할 때 타이핑 표시 표시 등.

정적인 메시지 목록과 달리, 채팅 구성 요소는 인터랙티브하며 실시간 통신을 위해 설계되었습니다. 입력, 렌더링, 사용자 상호작용을 관리하면서 메시지와 첨부파일이 어떻게 표시되는지 완전히 제어할 수 있습니다. 또한 레이아웃이나 시각적 요소의 모든 부분을 덮어쓸 수 있는 광범위한 렌더링 API를 제공합니다.

Installation

시작하려면 Ignite UI for Angular 패키지와 UI를 구동하는 웹 컴포넌트 Ignite UI 하나를 설치하세요:

npm install igniteui-angular igniteui-webcomponents

IgxChatComponent이벤트, 템플릿, DI, 변경 감지, 파이프 등 Angular 바인딩을 제공하며, 시각적 채팅 UI는 웹 컴포넌트에 의해 렌더링됩니다. 두 가지 모두 설치하면 채팅이 Angular에서 네이티브로 동작하면서도 전체 웹 컴포넌트 UI를 활용할 수 있습니다.

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

설치가 완료되면 프로젝트에 컴포넌트를 가져올 수 있습니다:

import { Component } from '@angular/core';
import { IgxChatComponent } from "igniteui-angular/chat";

@Component({
  ...
})
export class AppComponent { ... }

Usage

채팅 옵션을 정의하고 템플릿에 바인딩하세요:

import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat";

public options: IgxChatOptions  = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

<igx-chat 
    [options]="options"
    [messages]="messages">
</igx-chat>

여기서 속성은currentUserId 구성 요소에 어떤 메시지가 "발신"(현재 사용자가 보낸)인지, "수신"(타인이 보낸)인지 알려줍니다. 채팅headerText 창에 제목이 제공됩니다.

렌더링 후에는 바인드 메시지 배열을 업데이트하여 프로그래밍적으로 메시지를 추가할 수 있습니다:

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

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

Inputs

채팅 컴포넌트는 상태와 구성을 제어할 수 있는 여러 핵심 속성을 제공합니다:

이름	설명
messages	채팅에 표시되는 메시지 배열(IgcChatMessage[])입니다. 여기에 바인딩하여 표시되는 메시지를 제어할 수 있습니다.
draftMessage	현재 전송되지 않은 메시지는 다음을 포함하는 및 선택 사항text으로 표시됩니다attachments. 이는 메시지 초안을 저장하거나 복원하는 데 유용합니다.
options	현재 사용자 ID, 입력 자리 표시자, 허용된 파일 유형, 빠른 답변 제안, 타이핑 동작 등 채팅 설정IgxChatOptions () 등이 있습니다.
templates	메시지 내용, 입력, 첨부파일 및 채팅 UI의 다른 부분을 위한 맞춤형 Angular 템플릿(IgxChatTemplates)을 제공합니다.

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

Attachments

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

public options: IgxChatOptions = {
  acceptedFiles="image/*,.pdf",
};

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

public options: IgxChatOptions = {
  disableInputAttachments: true,
};

Suggestions

빠른 답장 제안은 사용자가 즉시 답장할 수 있도록 미리 정의된 답변을 제공합니다. 이 기능은 특히 챗봇, 고객 서비스 흐름, 또는 사용자를 체계적인 프로세스를 안내할 때 유용합니다. 제안 속성에 문자열 배열을 결합하여 제안을 제공할 수 있습니다. 이 속성을 통해suggestionsPosition 입력 영역 아래에 표시하거나 메시지 목록 아래에 표시할 수 있습니다.

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

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

Typing Indicator

상대방이 타이핑하는 모습을 볼 수 있을 때 대화가 더 자연스럽게 느껴집니다. 채팅 컴포넌트는 옵션 객체의 속성을 통해isTyping이 동작을 제공합니다. true로 설정하면 채팅에서 메시지 아래에 미묘한 타이핑 표시가 표시됩니다:

public options: IgxChatOptions = {
  isTyping: true
};

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

Custom Templates

채팅 컴포넌트는 기본 UI로 바로 작동하지만, 많은 애플리케이션이 외관과 느낌을 맞춤화해야 합니다. 예를 들어, 읽음 확인 표시를 추가하거나, 아바타를 표시하거나, 입력 영역을 음성 녹음 버튼으로 대체하는 등의 방법이 있습니다. 채팅 컴포넌트는 Angular 템플릿을 사용하여 이 필요를 해결합니다. 템플릿은 입력을templates 통해 제공되며, 강하게 타이핑된 Angular 지시문을 사용합니다.

사용 가능한 템플릿

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

• 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

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

Custom Message Content

<igx-chat
        [options]="options"
        [messages]="messages"
        [templates]="{ messageContent: messageContent }">
</igx-chat>
<ng-template #messageContent let-message igxChatMessageContext>
  <div class="custom-message">
    <strong>{{ message.sender }}:</strong> {{ message.text }}
  </div>
</ng-template>

Here:

• let-message메시지 객체를 노출합니다.
• 이 지침은igxChatMessageContext 메시지 템플릿의 올바른 타이핑을 보장합니다.

Custom Input Area

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

<igx-chat
  [options]="options"
  [templates]="{ input: customInput }">
</igx-chat>

<ng-template #customInput let-input igxChatInputContext>
  <div class="custom-input">
    <textarea [(ngModel)]="input.value"></textarea>
    <button (click)="speechToText()">🎤</button>
  </div>
</ng-template>

Extending Input Actions

채팅 컴포넌트는 기본 동작(업로드와 전송)을 유지하되 추가 제어를 추가할 때 유용한 두 가지 템플릿을 제공합니다:

• inputActionsStart– 내장 업로드 버튼 뒤에 커스텀 콘텐츠를 삽입할 수 있습니다.
• inputActionsEnd– 내장 전송 버튼 후에 커스텀 콘텐츠를 삽입할 수 있습니다.

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

<igx-chat
  [options]="options"
  [templates]="{
    inputActionsStart: inputStart,
    inputActionsEnd: inputEnd
  }">
</igx-chat>

<ng-template #inputStart>
  <button class="icon-btn">🎤</button>
</ng-template>

<ng-template #inputEnd>
  <button (click)="ask()">Ask</button>
  <button class="icon-btn">⋮</button>
</ng-template>

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

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

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

Markdown Support

채팅 컴포넌트에는 파이프를 통한fromMarkdown 마크다운 콘텐츠 지원이 포함되어 있어 메시지 텍스트를 안전한 HTML로 변환합니다. 이를 통해 메시지를 형식화된 텍스트, 링크, 목록, 심지어 구문이 강조된 코드 블록까지 표시할 수 있으며, 모든 렌더링된 HTML은 보안을 위해 소독됩니다.

마크다운 렌더링은 성능 문제로 비동기적으로 수행되므로, 파이프는fromMarkdown Angular의async 파이프와 결합되어야 합니다.

예시 — 템플릿 내에서 마크다운을 렌더링하기:

<ng-template #messageContent let-message igxChatMessageContext>
    <div [innerHTML]="message.text | fromMarkdown | async"></div>
</ng-template>

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

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

구문 강조

파이프는fromMarkdown 코드 블록의 구문 강조 기능도 지원합니다. 메시지에 펜싱 코드()js...가 포함될 경우, VS Code에서 사용하는 고화질 코드 형광터인 Shiki를 사용해 렌더링됩니다. 기본적으로 github-light 테마를 사용하는 자바스크립트, TypeScript, HTML, CSS에 대한 하이라이트가 포함되어 있습니다.

예시 — 메시지에 다음 내용이 포함될 때:

Here is a JavaScript example:
\`\`\`ts
function greet(name: string) {
  return `Hello, ${name}!`;
}
\`\`\`

채팅 메시지 내 출력은 다음과 같이 나타납니다:

• 자동 문법 강조
• Theme-aware styling (github-light / github-dark)
• Proper indentation and monospaced font
• 추가 설정은 필요 없으며, 기본 테마가 자동으로 로드됩니다.

Outputs (Events)

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

• messageCreated – 새 메시지가 생성되는 경우.
• messageReact – 메시지가 반응될 때.
• attachmentClick – 첨부파일이 클릭되는 경우.
• attachmentAdded – 첨부파일이 추가되는 경우.
• attachmentRemoved – 부착물이 제거될 때.
• attachmentDrag – 첨부파일을 끌고 가는 동안.
• attachmentDrop(애착 삭제) – 애착이 끊기는 경우.
• 타이핑Change – 타이핑 상태가 바뀔 때.
• inputFocus / inputBlur – input focus events.
• inputChange – 입력 값이 변하는 경우.

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

<igx-chat
        [options]="options"
        [messages]="messages"
        (messageCreated)="onMessageCreated($event)">
</igx-chat>

스타일링

채팅 컴포넌트는 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	첨부 파일에 표시되는 파일 이름의 스타일을 지정합니다.

예

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);
}

이렇게 하면 기능을 대체하지 않고도 브랜드에 맞게 스타일Chat 링할 수 있습니다.

Slots

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

이 슬롯들은 헤더나 제안 영역에 맞춤 UI를 삽입할 수 있게 해줍니다:

<igx-chat>
  <span slot="actions">
    <button class="icon">⚙️</button>
  </span>
</igx-chat>

루트 스타일 채택(adoptRootStyles)

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

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

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

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

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

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

API Reference

• IgxChatComponent
• IgxChatOptions
• IgxChatTemplates
• IgxChatMessageContextDirective
• IgxChatInputContextDirective
• IgxChatAttachmentContextDirective
• Styling & Themes

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular