React Chat 정보

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

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

설치

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

npm install igniteui-react

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

import { IgrChat } from "igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

CSS 파일에는 기본 테마 중 하나가 포함되어 있습니다. 다른IgrChatComponent 테마로 대체하거나 애플리케이션의 브랜딩에 맞게 맞춤 테마를 만들 수도 있습니다.

용법

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

import { IgrChat, IgrChatOptions } from 'igniteui-react';

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

return (
  <IgrChat options={options} />
);

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

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

import { useRef } from 'react';
import { IgrChat } from 'igniteui-react';

const ChatExample = () => {
  const chatRef = useRef<IgrChat>(null);

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

  return (
    <>
      <IgrChat ref={chatRef} options={{ currentUserId: 'me', headerText: 'Support Chat' }} />
      <button onClick={sendMessage}>Send Message</button>
    </>
  );
};

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

속성

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

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

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

Attachments

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

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

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

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

제안

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

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

return (
  <IgrChat ref={chatRef} options={{ options }} />
);

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

Typing Indicator

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

const options: IgrChatOptions = {
  isTyping: true
};

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

Custom Renderers

채팅 컴포넌트는 기본 UI로 바로 작동하지만, 많은 애플리케이션이 외관과 느낌을 맞춤화해야 합니다. 예를 들어, 읽음 확인 표시를 추가하거나, 아바타를 표시하거나, 입력 영역을 음성 녹음 버튼으로 대체하는 등의 방법이 있습니다. 이 컴포넌트는IgrChatComponent 렌더러 시스템으로 이 요구를 해결합니다. 렌더러는 단순히 UI의 특정 부분에 대한 템플릿을 반환하는 함수입니다. 렌더러를 원할 만큼 많거나 적게 오버라이드할 수 있습니다.

ChatTemplateRenderer

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

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

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

Renderer Contexts

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

사용 가능한 렌더러

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

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 (
        <div className="bubble custom">${message.content}</div>
      );
    }
  }
};

Example: Custom Input Area

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

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

예: 입력 작업 확장

이 컴포넌트는IgrChatComponent 기본 동작(업로드와 전송)을 유지하되 추가 컨트롤로 확장하고 싶을 때 유용한 두 가지 렌더러를 제공합니다:

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

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

const _actionsStartTemplate = () => (
  <IgrIconButton variant="flat">🎤</IgrIconButton>
);

const _actionsEndTemplate = (ctx) => (
  <div>
    <IgrButton onClick={() => handleCustomSendClick(ctx.instance)}>Ask</IgrButton>
    <IgrIconButton variant="flat" name="more_horiz"></IgrIconButton>
  </div>
);

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

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

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

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

Markdown Rendering

채팅 컴포넌트는 메인 패키지의 진입 지점에서createMarkdownRenderer 내보내는 헬퍼를 통한 igniteui-react/extras Markdown 콘텐츠 내장을 포함합니다. 이를 통해 메시지를 형식화된 텍스트, 링크, 목록, 심지어 구문이 강조된 코드 블록까지 표시할 수 있으며, 모든 렌더링된 HTML은 보안을 위해 소독됩니다.

[! 참고] Markdown 렌더러를 사용하려면 프로젝트에 다음과 같은 피어 의존성을 설치해야 합니다:

npm install marked marked-shiki shiki dompurify

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

import { createMarkdownRenderer } from 'igniteui-react/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`	If`true`는 구문 강조 표시를 완전히 비활성화합니다.
`languages`	강조 표시된 코드 블록에서 지원할 프로그래밍 언어 목록입니다.
`theme`	시키 테마를 적용할 수 있는 오브젝트. 와 모드에`light` 대해 별도의 값을 지원합니다(예:`dark`.`{ light: 'github-light', dark: 'github-dark' }`
`sanitizer`	최종 HTML을 삭제하는 사용자 정의 함수입니다. 기본값은 입니다`DOMPurify.sanitize`.

이벤트

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

onMessageCreated – 새 메시지가 생성될 때.
onMessageReact – 메시지가 반응할 때.
onAttachmentClick – 첨부 파일을 클릭할 때.
onAttachmentAdded – 첨부 파일이 추가될 때.
onAttachmentRemoved – 첨부 파일이 제거될 때.
onAttachmentDrag – 첨부 파일을 드래그하는 동안.
onAttachmentDrop – 첨부 파일이 삭제될 때.
onTypingChange – when typing status changes.
onInputFocus / onInputBlur – input focus events.
onInputChange – 입력 값이 변경될 때.

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

const chatRef = useRef<IgrChat>(null);
chatRef.current.addEventListener('onMessageCreated', (e) => {
  console.log('Message:', e.detail);
});

스타일링

이 컴포넌트는IgrChatComponent CSS 부품과 슬롯을 모두 노출하여 외관과 구조를 세밀하게 커스터마이즈할 수 있게 합니다.

CSS 부분

부품명	설명
"챗-컨테이너"	기본 채팅 컨테이너의 스타일을 지정합니다.
"헤더"	채팅 헤더 컨테이너의 스타일을 지정합니다.
"접두사"	채팅 제목 앞의 요소(예: 아바타)의 스타일을 지정합니다.
"제목"	채팅 헤더 제목의 스타일을 지정합니다.
"메시지-영역-컨테이너"	메시지 및 (선택 사항) 제안을 포함하는 컨테이너의 스타일을 지정합니다.
"메시지 목록"	메시지 목록 컨테이너의 스타일을 지정합니다.
"메시지-항목"	각 메시지 래퍼의 스타일을 지정합니다.
"타이핑 표시기"	입력 표시기 컨테이너의 스타일을 지정합니다.
"타이핑-닷"	개별 입력 표시기 점의 스타일을 지정합니다.
"제안-용기"	모든 제안을 포함하는 컨테이너의 스타일을 지정합니다.
"제안-헤더"	제안 헤더의 스타일을 지정합니다.
"제안"	각 제안 항목의 스타일을 지정합니다.
"제안-접두사"	제안의 아이콘 또는 접두사의 스타일을 지정합니다.
"제안-제목"	제안의 텍스트/제목 스타일을 지정합니다.
"빈 상태"	메시지가 없을 때 빈 상태 컨테이너의 스타일을 지정합니다.
"입력-영역-컨테이너"	채팅 입력 영역 주위에 래퍼의 스타일을 지정합니다.
"입력 컨테이너"	기본 입력 컨테이너의 스타일을 지정합니다.
"input-attachments-container"	입력에서 첨부 파일에 대한 컨테이너의 스타일을 지정합니다.
"입력-부착-컨테이너"	입력 영역에서 단일 부착물의 스타일을 지정합니다.
"input-attachment-name"	첨부 파일의 파일 이름에 스타일을 지정합니다.
"입력-첨부-아이콘"	첨부 파일의 아이콘에 스타일을 지정합니다.
"텍스트 입력"	메시지를 입력하기 위한 텍스트 입력 필드의 스타일을 지정합니다.
"입력-행동-컨테이너"	입력 작업에 대한 컨테이너의 스타일을 지정합니다.
"입력-행동-시작"	기본 파일 업로드 후 입력 시작 시 작업 그룹의 스타일을 지정합니다.
"입력-행동-종료"	입력 끝에 있는 작업 그룹의 스타일을 지정합니다.
"파일-업로드-컨테이너"	파일 업로드 입력에 대한 컨테이너의 스타일을 지정합니다.
"파일-업로드"	파일 업로드 입력 자체의 스타일을 지정합니다.
"전송 버튼-컨테이너"	보내기 단추 주위에 컨테이너의 스타일을 지정합니다.
"전송 버튼"	보내기 단추의 스타일을 지정합니다.
"메시지-컨테이너"	단일 메시지의 컨테이너 스타일을 지정합니다.
"메시지 목록 (전달됨)"	내부 메시지 목록의 스타일을 지정합니다.
"메시지-헤더"	메시지의 헤더(예: 보낸 사람, 타임스탬프)의 스타일을 지정합니다.
"메시지-내용"	메시지의 텍스트 내용에 스타일을 지정합니다.
"message-attachments-container"	메시지 첨부 파일의 컨테이너 스타일을 지정합니다.
"메시지-첨부"	단일 메시지 첨부 파일의 스타일을 지정합니다.
"메시지-행동-컨테이너"	메시지 작업을 포함하는 컨테이너의 스타일을 지정합니다.
"메시지 전송"	현재 사용자가 보낸 것으로 표시된 메시지의 스타일을 지정합니다.
"첨부 헤더"	부착 블록의 머리글 스타일을 지정합니다.
"attachment-content"	첨부 블록의 컨텐츠 스타일을 지정합니다.
"첨부 아이콘"	첨부 파일의 아이콘에 스타일을 지정합니다.
"파일명"	첨부 파일에 표시되는 파일 이름의 스타일을 지정합니다.

Slots

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

루트 스타일 채택(adoptRootStyles)

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

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

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

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

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

CSS 변수 및 ::p art API – 노출된 부분과 변수를 통해 사용자 정의하는 것을 선호합니다.
"" elements – For larger stylesheets, inject them inside the Shadow DOM.
인라인 "