SwiftyChat

SwiftyChat

가볍고 크로스 플랫폼을 지원하는 SwiftUI 채팅 UI 프레임워크입니다.
AI 챗봇, 고객 지원, 메시징 앱에 완벽합니다.

설치 •
빠른 시작 •
메시지 유형 •
테마 •
AI & 챗봇 •
커스텀 셀

Flutter 버전도 제공됩니다.

SwiftyChat을 선택하는 이유

11가지 메시지 종류 — 텍스트, 이미지, 비디오, 위치, 캐러셀, 빠른 답장, 링크 미리보기, 연락처, 로딩 표시 등
SwiftUI environment를 통한 완전한 스타일 커스터마이징이 가능한 5가지 데모 테마
크로스 플랫폼 — 단일 코드베이스로 iOS 17+ 및 macOS 14+ 지원
선형 헤더 계산과 원격 이미지 로딩을 통한 지연 메시지 렌더링
챗봇 지원 — AI/봇 인터페이스를 위해 설계된 캐러셀, 빠른 답장, 로딩 상태
가벼움 — Kingfisher가 유일한 패키지 의존성
필요한 모든 유형에 대한 커스텀 메시지 셀
자동 크기 조정 셀을 통한 가로 방향 지원
위치를 설정할 수 있는 사용자 아바타
탭 및 스크롤 시 키보드 닫기
하단 또는 특정 메시지로 스크롤
PiP(Picture-in-Picture) 비디오 재생
텍스트 말풍선의 모서리별 둥글기
여러 줄 입력 바 ( BasicInputView )
Attributed string / 마크다운 지원

미리보기
아래에 모든 메시지 종류가 표시됩니다. 이는 iPhone 17 Pro 시뮬레이터에서 캡처한 현재 화면이며, 스크린샷은 라이트/다크 설정을 따릅니다. 전체 메시지 갤러리를 열어 두 모습을 나란히 비교해 보세요.

텍스트 및 이모지
이미지
캡션이 있는 이미지

위치
연락처
캐러셀

비디오
링크 미리보기
빠른 답장

로딩 및 커스텀 콘텐츠
이 클로즈업은 로컬 픽스처를 사용하여 라이브러리에서 렌더링됩니다. 커스텀 셀에는 자체 SwiftUI 뷰를 포함할 수 있습니다.

로딩 표시
커스텀 SwiftUI 셀

답장 인용, 네이티브 키보드 레이아웃, 5가지 데모 테마 전체는 스타일 가이드를 참조하세요.

설치
Swift Package Manager
Xcode에서 File → Add Package Dependencies 를 통해 SwiftyChat을 추가하세요:

https://github.com/EnesKaraosman/SwiftyChat.git

또는 Package.swift 에 추가하세요:

dependencies: [
. package ( url : " https://github.com/EnesKaraosman/SwiftyChat.git " , from : " 4.3.0 " )
]
빠른 시작
import SwiftyChat

struct ContentView : View {
@ State private var messages : [ YourMessage ] = [ ]
@ State private var message = " "
@ State private var scrollToBottom = false

var body : some View {
ChatView ( messages : $messages , scrollToBottom : $scrollToBottom ) {
BasicInputView (
message : $message ,
placeholder : " Type something " ,
onCommit : { messageKind in
messages . append ( /* your message */ )
}
)
}
. environment ( \ . chatStyle , ChatMessageCellStyle ( ) )
}
}

YourMessage 는 ChatMessage 프로토콜(연관된 ChatUser 타입을 가짐)을 준수해야 합니다. 완전한 구현은 SwiftyChatDemo 앱을 참조하세요.

메시지 종류
public enum ChatMessageKind : CustomStringConvertible {
case text ( String ) // 이모지만 있는 메시지의 경우 자동 크기 조정
case image ( ImageLoadingKind ) // 로컬 (UIImage/NSImage) 또는 원격 (URL)
case imageText ( ImageLoadingKind , String ) // 캡션이 있는 이미지
case location ( LocationItem ) // MapKit 핀
case contact ( ContactItem ) // 공유 가능한 연락처 카드
case quickReply ( [ QuickReplyItem ] ) // 탭 가능한 옵션, 선택 후 자동 비활성화
case carousel ( [ CarouselItem ] ) // 버튼이 있는 스크롤 가능한 카드
case video ( VideoItem ) // PiP 지원 비디오
case linkPreview ( LinkPreviewItem ) // 앱에서 제공하는 URL 메타데이터 표시
case loading // 애니메이션 로딩 표시
case custom ( Any ) // 자체 메시지 유형
}
커스터마이징
입력 뷰
내장된 BasicInputView 가 포함되어 있습니다. 그대로 사용하거나 직접 만들 수 있습니다 — ChatView 는 inputView 클로저를 통해 모든 뷰를 허용합니다.

버전 4.3.0에는 선택적 첨부 버튼이 있는 통합 컴포저가 포함되어 있습니다. onAttachment 를 제공하여 피커를 여세요. 기존 이니셜라이저는 계속 작동합니다:

BasicInputView (
message : $message ,
placeholder : " Write a message… " ,
onAttachment : { isPickerPresented = true } ,
onCommit : sendMessage
)

컴포저
키보드 포함

데모의 텍스트 채팅은 페이지네이션, 스트리밍 답장, 답장 인용, 전송 상태, iOS 사진/비디오 피커를 추가합니다. ChatMessage 에는 nil 기본값을 가진 선택적 replyPreview 및 deliveryStatus 속성이 있어 기존 메시지 유형도 계속 컴파일됩니다.

대화 탐색
버전 4.3.0에는 읽지 않음 표시, 최신으로 스크롤 버튼, 답장 탐색, 재시도 액션이 추가되었습니다:

ChatView ( messages : $messages ) { /* input view */ }
. unreadMessages ( unreadMessageIDs )
. onReachedBottom { newestID in
markRead ( through : newestID )
}
. onRetryMessage { message in
resend ( message )
}
앱은 unreadMessageIDs , 읽음 지속성, 전송을 소유합니다. 구분선과 개수는 해당 집합에 ID가 있는 로드된 수신 메시지만 포함합니다. 페이지네이션과 편집은 읽지 않음 메시지를 생성하지 않습니다. 읽지 않음 추적 없이 버튼을 활성화하려면 .showsScrollToBottomButton() 을 사용하세요.

선택적 ChatMessage.replyToMessageID 를 설정하여 인용이 로드된 원본으로 이동하도록 하세요. 로드되지 않은 원본을 로드하려면 .onReplyPreviewTapped 를 사용한 다음, 삽입 후 기존 scrollTo 바인딩을 설정하세요. 기존 메시지 모델은 nil 대상을 상속합니다. 재시도 컨트롤은 재시도 핸들러가 제공될 때 실패한 발신 메시지에만 나타납니다. 전송이 진행됨에 따라 deliveryStatus 를 업데이트하세요.

텍스트 채팅 예제는 Demo actions 메뉴를 통해 이러한 액션을 보여줍니다.

읽지 않음 메시지 및 최신으로 돌아가기
답장 인용 및 실패한 전송 재시도

링크 미리보기
링크 메타데이터는 앱이 선택적 헬퍼를 호출할 때만 가져옵니다. 인메모리 캐시를 재사용하려면 하나의 로더 인스턴스를 유지하세요:

let loader = LinkPreviewMetadataLoader ( )
let preview = try await loader . preview ( for : url )
let kind = ChatMessageKind . linkPreview ( preview )
이 헬퍼는 Apple의 LinkPresentation을 사용하여 제목과 호스트를 가져옵니다. 설명이나 이미지 URL은 제공하지 않으므로 더 풍부한 미리보기를 위해서는 자체 LinkPreviewItem 을 제공하세요. macOS 호스트 앱은 원격 메타데이터를 가져오기 위해 네트워크 클라이언트 권한이 필요합니다.

스타일링
모든 시각적 측면은 ChatMessageCellStyle 을 통해 커스터마이징할 수 있습니다 — 텍스트 스타일, 가장자리 인셋, 아바타 스타일, 모든 메시지 유형에 대한 셀 스타일. .environment(\.chatStyle, yourStyle) 을 통해 주입하세요. 기본 텍스트 및 표면 색상은 라이트 및 다크 모양을 지원합니다. 커스텀 색상을 제공할 때는 두 모드에서 앱 배경에 대한 대비를 확인하세요.

전체 스타일 참조는 Styles.md , Dynamic Type 및 접근성 동작은 Accessibility.md , 커스텀 셀 유형은 CustomMessage.md 를 참조하세요.

사전 제작 테마

테마
설명

Modern
깔끔한 파란색, 미니멀 디자인

Classic
전통적인 파란색 메시징

Dark Neon
글로우 액센트가 있는 사이버펑크

Warm Sunset
오렌지 및 코랄 톤

Nature
숲에서 영감을 받은 녹색 톤

이 프리셋은 데모 앱 에 있습니다. Modern, Classic, Warm Sunset, Nature는 시스템 모양을 따릅니다. Dark Neon은 명시적으로 다크 모양을 사용합니다. 커스터마이징 및 스크린샷은 Styles.md 를 참조하세요.

AI & 챗봇 사용 사례
SwiftyChat은 AI 및 챗봇 인터페이스에 특히 적합합니다. 캐러셀, 빠른 답장 버튼, 로딩 표시, 링크 미리보기에 대한 내장 지원 덕분에 커스텀 셀 없이도 풍부한 대화형 UI를 구축할 수 있습니다:

struct Reply : QuickReplyItem {
let title : String
var payload : String { title }
}

// AI가 응답하는 동안 로딩 표시
messages . append ( Message ( user : bot , messageKind : . loading ) )

// 실제 응답으로 교체
messages [ messages . count - 1 ] = Message (
user : bot ,
messageKind : . text ( " Here's what I found... " )
)

// 후속 옵션을 빠른 답장으로 제공
messages . append ( Message (
user : bot ,
messageKind : . quickReply ( [
Reply ( title : " Tell me more " ) ,
Reply ( title : " Something else " ) ,
] )
) )
ChatGPT 스타일 앱, 고객 지원 봇, 인앱 어시스턴트를 만들고 계신가요? SwiftyChat이 UI 계층을 제공하므로 AI 로직에 집중할 수 있습니다.

테스트
swift test 로 패키지 테스트를 실행하세요. 여기에는 기본 색상 대비 검사와 라이트 및 다크 모드의 컴포넌트 렌더링이 포함됩니다. iOS 데모에는 기본 채팅 컨트롤, 페이지네이션, 가이드 대화, 테마, 메시지 액션, 고급 예제에 대한 Maestro 스모크 플로우도 있습니다. 부팅된 iOS 시뮬레이터에 SwiftyChatDemo를 빌드하고 설치한 후 maestro test --udid <simulator-udid> Tests/Smoke 를 실행하세요. 두 시스템 모양을 모두 실행하고 스크린샷을 재생성하는 방법은 모양 검증 을 참조하세요.

기여
기여를 환영합니다! 버그 수정, 새 기능, 문서 개선, 새 테마 등 어떤 것이든 도움을 주시면 감사하겠습니다.

가이드라인은 CONTRIBUTING.md 를 참조하세요.

감사의 말
MessageKit (UIKit) 및 Nio (SwiftUI)에서 영감을 받았습니다.

라이선스
SwiftyChat은 Apache 2.0 라이선스로 제공됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.