363 lines
16 KiB
Swift
363 lines
16 KiB
Swift
//
|
|
// ChatRoomView.swift
|
|
// SodaLive
|
|
//
|
|
// Created by klaus on 9/2/25.
|
|
//
|
|
|
|
import SwiftUI
|
|
import Kingfisher
|
|
import UIKit
|
|
|
|
struct ChatRoomView: View {
|
|
|
|
@StateObject var viewModel = ChatRoomViewModel()
|
|
|
|
@AppStorage("can") private var can: Int = UserDefaults.int(forKey: .can)
|
|
|
|
let roomId: Int
|
|
|
|
var body: some View {
|
|
BaseView(isLoading: $viewModel.isLoading) {
|
|
if !viewModel.isHideBg {
|
|
ChatRoomBgView(url: viewModel.chatRoomBgImageUrl)
|
|
}
|
|
|
|
if !viewModel.isResetting {
|
|
VStack(spacing: 0) {
|
|
HStack(spacing: 12) {
|
|
Image("ic_back")
|
|
.resizable()
|
|
.frame(width: 24, height: 24)
|
|
.onTapGesture {
|
|
AppState.shared.back()
|
|
}
|
|
|
|
KFImage(URL(string: viewModel.characterProfileUrl))
|
|
.placeholder {
|
|
Image(systemName: "person.crop.circle")
|
|
.resizable()
|
|
.scaledToFit()
|
|
}
|
|
.resizable()
|
|
.frame(width: 36, height: 36)
|
|
.clipShape(Circle())
|
|
|
|
VStack(alignment: .leading, spacing: 4) {
|
|
Text(viewModel.characterName)
|
|
.font(.custom(Font.preBold.rawValue, size: 12))
|
|
.foregroundColor(.white)
|
|
.lineLimit(1)
|
|
.truncationMode(.tail)
|
|
|
|
Text(viewModel.characterType.rawValue)
|
|
.font(.custom(Font.preBold.rawValue, size: 10))
|
|
.foregroundColor(.white)
|
|
.padding(.horizontal, 4)
|
|
.padding(.vertical, 2)
|
|
.background(
|
|
Color(hex:
|
|
viewModel.characterType == .Clone ?
|
|
"0020C9" : "009D68"
|
|
)
|
|
)
|
|
.cornerRadius(6)
|
|
}
|
|
|
|
Spacer()
|
|
|
|
HStack(spacing: 4) {
|
|
Image("ic_can")
|
|
.resizable()
|
|
.frame(width: 20, height: 20)
|
|
|
|
Text("\(can)")
|
|
.font(.custom(Font.preRegular.rawValue, size: 16))
|
|
.foregroundColor(.white)
|
|
}
|
|
.padding(.horizontal, 10)
|
|
.padding(.vertical, 5)
|
|
.background(Color(hex: "263238"))
|
|
.cornerRadius(30)
|
|
|
|
Image("ic_seemore_vertical_white")
|
|
.resizable()
|
|
.frame(width: 24, height: 24)
|
|
.onTapGesture {
|
|
viewModel.isShowingChatSettingsView = true
|
|
}
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 8)
|
|
.frame(width: screenSize().width, height: 60)
|
|
|
|
HStack(spacing: 8) {
|
|
Image(systemName: "info.circle.fill")
|
|
.resizable()
|
|
.frame(width: 20, height: 20)
|
|
|
|
Text(
|
|
viewModel.characterType == .Character
|
|
? "보이스온 AI캐릭터톡은 대화의 자유도가 높아 대화에 참여하는 당신은 누구든 될 수 있습니다.\n세계관 속 캐릭터로 대화를 하거나 새로운 인물로 캐릭터와 당신만의 스토리를 만들어보세요.\n※ AI캐릭터톡은 오픈베타 서비스 중이며, 캐릭터의 대화가 어색하거나 불완전할 수 있습니다."
|
|
: "AI Clone은 크리에이터의 정보를 기반으로 대화하지만, 모든 정보를 완벽하게 반영하거나 실제 대화와 일치하지 않을 수 있습니다."
|
|
)
|
|
.font(.custom(Font.preRegular.rawValue, size: 12))
|
|
.foregroundColor(.white)
|
|
|
|
Image(systemName: "chevron.up")
|
|
.resizable()
|
|
.scaledToFit()
|
|
.frame(width: 20)
|
|
}
|
|
.padding(12)
|
|
.background(Color(hex: "13181B").opacity(0.7))
|
|
.cornerRadius(16)
|
|
.frame(width: screenSize().width - 48)
|
|
|
|
GeometryReader { geometry in
|
|
ScrollViewReader { proxy in
|
|
ScrollView(.vertical, showsIndicators: false) {
|
|
LazyVStack(spacing: 16) {
|
|
ForEach(0..<viewModel.messages.count, id: \.self) { index in
|
|
let message = viewModel.messages[index]
|
|
if message.mine {
|
|
UserMessageItemView(message: message)
|
|
.id(index)
|
|
} else {
|
|
AiMessageItemView(
|
|
message: message,
|
|
characterName: viewModel.characterName
|
|
) {
|
|
if message.hasAccess {
|
|
viewModel.showImageViewer(message.imageUrl)
|
|
} else {
|
|
viewModel.selectedMessage = message
|
|
viewModel.selectedMessageIndex = index
|
|
}
|
|
}
|
|
.id(index)
|
|
}
|
|
}
|
|
|
|
if viewModel.showQuotaNoticeView {
|
|
ChatQuotaNoticeItemView(remainingTime: viewModel.countdownText) {
|
|
viewModel.purchaseChatQuota()
|
|
}
|
|
.id(viewModel.messages.count)
|
|
.padding(.bottom, 12)
|
|
.onAppear {
|
|
withAnimation(.easeOut(duration: 0.3)) {
|
|
proxy.scrollTo(viewModel.messages.count, anchor: .bottom)
|
|
}
|
|
}
|
|
}
|
|
|
|
if viewModel.showSendingMessage {
|
|
TypingIndicatorItemView(
|
|
characterName: viewModel.characterName,
|
|
characterProfileUrl: viewModel.characterProfileUrl
|
|
)
|
|
.id(viewModel.messages.count)
|
|
}
|
|
}
|
|
.padding(.horizontal, 24)
|
|
.frame(minHeight: geometry.size.height, alignment: .bottom)
|
|
}
|
|
.onChange(of: viewModel.messages.count) { _ in
|
|
if !viewModel.messages.isEmpty {
|
|
withAnimation(.easeOut(duration: 0.3)) {
|
|
proxy.scrollTo(
|
|
viewModel.showSendingMessage ?
|
|
viewModel.messages.count :
|
|
viewModel.messages.count - 1,
|
|
anchor: .bottom
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.frame(width: screenSize().width)
|
|
.frame(maxHeight: .infinity)
|
|
|
|
if !viewModel.showQuotaNoticeView {
|
|
HStack(spacing: 8) {
|
|
HStack(spacing: 0) {
|
|
ZStack(alignment: .leading) {
|
|
if viewModel.messageText.isEmpty {
|
|
Text("메시지를 입력하세요.")
|
|
.font(.custom(Font.preRegular.rawValue, size: 14))
|
|
.foregroundColor(Color(hex: "78909C"))
|
|
}
|
|
|
|
TextField("", text: $viewModel.messageText)
|
|
.font(.custom(Font.preRegular.rawValue, size: 14))
|
|
.foregroundColor(.white)
|
|
.onSubmit {
|
|
viewModel.sendMessage()
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.vertical, 13)
|
|
.background(Color(hex: "263238"))
|
|
.cornerRadius(999)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 999)
|
|
.stroke(Color(hex: "263238"), lineWidth: 1)
|
|
)
|
|
|
|
Button(action: {
|
|
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
|
|
viewModel.sendMessage()
|
|
}) {
|
|
Image("ic_message_send")
|
|
.resizable()
|
|
.frame(width: 24, height: 24)
|
|
}
|
|
}
|
|
.padding(.horizontal, 12)
|
|
.padding(.vertical, 12)
|
|
.frame(width: screenSize().width)
|
|
}
|
|
}
|
|
}
|
|
|
|
if let message = viewModel.selectedMessage, viewModel.selectedMessageIndex >= 0 {
|
|
SodaDialog(
|
|
title: "잠금된 메시지",
|
|
desc: "이 메시지를 \(message.price ?? 5)캔으로 잠금해제 하시겠습니까?",
|
|
confirmButtonTitle: "잠금해제",
|
|
confirmButtonAction: {
|
|
viewModel.purchaseChatMessage()
|
|
},
|
|
cancelButtonTitle: "취소"
|
|
) {
|
|
viewModel.selectedMessage = nil
|
|
viewModel.selectedMessageIndex = -1
|
|
}
|
|
}
|
|
|
|
if viewModel.isShowingChatSettingsView {
|
|
ChatSettingsView(
|
|
isShowing: $viewModel.isShowingChatSettingsView,
|
|
isHideBg: $viewModel.isHideBg,
|
|
onTapChangeBg: { viewModel.isShowingChangeBgView = true },
|
|
onTapResetChatRoom: { viewModel.isShowingChatResetConfirmDialog = true }
|
|
)
|
|
}
|
|
|
|
if viewModel.isShowingChangeBgView {
|
|
ChatBgSelectionView(
|
|
characterId: viewModel.characterId,
|
|
selectedBgImageId: viewModel.chatRoomBgImageId,
|
|
onTapBgImage: {
|
|
viewModel.setBackgroundImage(imageItem: $0)
|
|
},
|
|
isShowing: $viewModel.isShowingChangeBgView
|
|
)
|
|
}
|
|
|
|
if viewModel.isShowingChatResetConfirmDialog {
|
|
ZStack {
|
|
Color.black.opacity(0.7)
|
|
|
|
SodaDialog(
|
|
title: "대화 초기화",
|
|
desc: "지금까지의 대화가 모두 초기화 되고 새롭게 대화를 시작합니다.",
|
|
confirmButtonTitle: "30캔으로 초기화",
|
|
confirmButtonAction: {
|
|
viewModel.resetChatRoom()
|
|
viewModel.isShowingChatResetConfirmDialog = false
|
|
},
|
|
cancelButtonTitle: "취소",
|
|
cancelButtonAction: {
|
|
viewModel.isShowingChatResetConfirmDialog = false
|
|
}
|
|
)
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
|
|
if viewModel.isResetting {
|
|
ZStack {
|
|
Color.black.opacity(0.7)
|
|
|
|
VStack(spacing: 0) {
|
|
ActivityIndicatorView()
|
|
.frame(width: 100, height: 100)
|
|
|
|
Text("대화 초기화 중...")
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
}
|
|
.sheet(isPresented: $viewModel.isShowImageViewer) {
|
|
ImageViewerView(
|
|
images: viewModel.ownedImageUrls,
|
|
selectedIndex: $viewModel.selectedImageIndex
|
|
)
|
|
}
|
|
.onAppear {
|
|
viewModel.getMemberInfo()
|
|
viewModel.enterRoom(roomId: roomId)
|
|
}
|
|
.onDisappear {
|
|
viewModel.stopTimer()
|
|
}
|
|
.popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
|
|
GeometryReader { geo in
|
|
HStack {
|
|
Spacer()
|
|
Text(viewModel.errorMessage)
|
|
.padding(.vertical, 13.3)
|
|
.frame(width: geo.size.width - 66.7, alignment: .center)
|
|
.font(.custom(Font.medium.rawValue, size: 12))
|
|
.background(Color.button)
|
|
.foregroundColor(Color.white)
|
|
.multilineTextAlignment(.center)
|
|
.cornerRadius(20)
|
|
.padding(.top, 66.7)
|
|
Spacer()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct ChatRoomBgView: View {
|
|
|
|
let url: String?
|
|
|
|
var body: some View {
|
|
GeometryReader { geo in
|
|
let width = geo.size.width
|
|
let height = width * 3 / 2
|
|
|
|
ZStack {
|
|
if let url = url {
|
|
KFImage(URL(string: url))
|
|
.resizable()
|
|
.scaledToFill()
|
|
.frame(width: width, height: height)
|
|
.clipped()
|
|
.ignoresSafeArea()
|
|
}
|
|
|
|
Color.black
|
|
.opacity(0.6)
|
|
.ignoresSafeArea()
|
|
}
|
|
.frame(width: width, height: height)
|
|
.clipped()
|
|
}
|
|
.aspectRatio(2/3, contentMode: .fit)
|
|
}
|
|
}
|
|
|
|
#Preview {
|
|
ChatRoomView(roomId: 0)
|
|
}
|