채팅 API · Needless UI

가져오기

import-chat.ts

import { NuiChat, NuiChatSession, nuiEventStream } from '@needless-ui/angular/chat';

NuiChat

대화와 입력창을 한데 묶은 컴포넌트입니다.

셀렉터: nui-chat

NuiChat: 속성
이름	타입	기본값	설명
`session`입력	`NuiChatSession`		표시할 대화.
`assistant`입력	`string`	`'Assistant'`	어시스턴트의 이름. 스크린 리더가 읽는 제목에 쓰입니다.
`headingLevel`입력	`number`	`3`	스크린 리더에만 보이는 각 메시지 제목의 수준. 응답 안의 제목은 한 단계 더 깊어집니다.
`announce`입력	`'reply' \| 'notice' \| 'off'`	`'reply'`	응답이 완료되면 스크린 리더가 읽어 줄 내용: 전체, 짧은 알림, 또는 없음.
`images`입력	`boolean`	`false`	응답 안의 이미지를 표시합니다. 끄면 이미지의 텍스트가 이미지로 가는 링크가 됩니다.
`value`양방향	`string`	`''`	작성 중인 텍스트.
`placeholder`입력	`string`		비어 있는 필드에 표시되는 힌트.
`suggestions`입력	`string[]`	`[]`	클릭 한 번으로 보낼 수 있는 프롬프트. 첫 메시지 전까지 표시됩니다.
`sendOn`입력	`'enter' \| 'mod+enter'`	`'enter'`	Enter로 보낼지, Ctrl 또는 ⌘ + Enter로 보낼지 여부.
`disabled`입력	`boolean`	`false`	입력창에서 메시지를 보내지 못하게 합니다.
`attach`입력	`boolean`	`false`	파일을 받습니다: 선택, 붙여넣기, 끌어다 놓기.
`accept`입력	`string`	`''`	받을 파일 종류. `<input type="file">`과 같은 형식입니다.
`maxFiles`입력	`number`	`10`	메시지 하나에 첨부할 수 있는 파일 수.
`maxSize`입력	`number`	`20_000_000`	받을 수 있는 가장 큰 파일 크기(바이트).
`labels`입력	`NuiChatLabelsInput`		채팅이 표시하거나 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
`rated`출력	`{ message, rating }`		사용자가 평가한 응답을 평가와 함께 내보내며, 평가를 취소하면 `null`을 내보냅니다.
`focus`메서드	`() => void`		텍스트 필드에 포커스를 줍니다.
`scrollToEnd`메서드	`(behavior?) => void`		최신 메시지로 스크롤하고 계속 따라갑니다.

NuiChatSession

DOM이 없는 대화 자체입니다. 컴포넌트 안에서 respond, messages, id 옵션으로 만듭니다.

NuiChatSession: 속성
이름	타입	설명
`respond`속성	`(request) => NuiChatReply`	직접 구현합니다. `request.messages`에 대한 응답을 작성하고, `request.signal`이 중단되면 멈춥니다.
`messages`속성	`Signal<NuiChatMessage[]>`	화면에 보이는 대화.
`all`속성	`Signal<NuiChatMessage[]>`	모든 버전의 모든 메시지. 저장했다가 `messages`로 다시 전달합니다.
`busy`속성	`Signal<boolean>`	응답을 받는 중인지 여부.
`send`메서드	`(text, files?) => Promise<void>`	메시지를 보내고 응답을 요청합니다.
`stop`메서드	`() => void`	응답을 중지하고, 그때까지 작성된 내용은 유지합니다.
`retry`메서드	`(message?) => Promise<void>`	다시 요청합니다. 새 응답은 이전 응답 옆에 버전으로 남습니다.
`edit`메서드	`(message, text) => Promise<void>`	사용자 메시지 중 하나의 새 버전을 보냅니다.
`versions`메서드	`(message) => NuiChatMessage[]`	메시지의 모든 버전. 오래된 것부터 나열됩니다.
`show`메서드	`(message) => void`	대화를 이 버전으로 전환합니다.
`rate`메서드	`(message, 'up' \| 'down' \| null) => void`	응답에 대한 사용자의 평가를 기록합니다.
`remove, load, clear`메서드	`(…) => void`	메시지와 그 뒤의 내용을 제거하거나, 대화를 교체하거나, 처음부터 다시 시작합니다.

NuiChatMessage

메시지 하나입니다. parent가 같은 메시지는 서로의 버전입니다.

NuiChatMessage: 속성
이름	타입	설명
`id, parent`속성	`string, string \| null`	메시지의 키와, 이 메시지가 뒤따르는 메시지의 키.
`role`속성	`'user' \| 'assistant'`	작성자.
`text`속성	`string`	어시스턴트는 Markdown, 사용자는 일반 텍스트.
`status`속성	`'pending' \| 'streaming' \| 'done' \| 'stopped' \| 'error'`	대기 중부터 완료까지, 응답의 진행 상태.
`reasoning`속성	`string`	모델이 답하기 전에 한 생각.
`tools`속성	`NuiChatTool[]`	호출한 도구와 그 상태, 입력, 출력.
`sources`속성	`{ url, title? }[]`	참고한 페이지.
`attachments`속성	`NuiChatAttachment[]`	함께 보낸 파일.
`rating`속성	`'up' \| 'down' \| null`	사용자의 평가.
`data`속성	`unknown`	모델 이름처럼 함께 보관할 그 밖의 데이터.

NuiChatToolTemplate

날씨 카드처럼 도구 호출을 그립니다. 컨텍스트에는 호출과 그 메시지가 들어 있습니다.

셀렉터: ng-template[nuiChatTool]

NuiChatToolTemplate: 속성
이름	타입	기본값	설명
`nuiChatTool`입력	`string`		도구 이름. 지정하지 않으면 다른 템플릿이 지정하지 않은 모든 호출을 그립니다.

NuiChatThread

직접 만든 레이아웃을 위한, 대화만 있는 컴포넌트입니다. nui-chat의 입력 중 대화에 관한 것을 받습니다.

셀렉터: nui-chat-thread

NuiChatComposer

입력창만 있는 컴포넌트입니다. nui-chat의 입력 중 메시지 작성에 관한 것을 받습니다.

셀렉터: nui-chat-composer

NuiServerEvent

nuiEventStream이 이벤트마다 내보내는 값입니다. nuiTextStream은 일반 텍스트를, nuiJsonStream은 JSON Lines를 읽으며, 셋 모두 fetch 응답을 받습니다.

NuiServerEvent: 속성
이름	타입	기본값	설명
`event`속성	`string`	`'message'`	이벤트 이름.
`data`속성	`string`		이벤트의 data 줄을 이어 붙인 것.
`id`속성	`string`		스트림이 마지막으로 보낸 id.

NuiChatError

respond에서 던지면 그 메시지가 표시됩니다. 다른 오류는 일반적인 메시지로 표시되므로 내부 정보가 새어 나가지 않습니다.