@zellio/chat-react-native 0.0.0-stage → 1.0.0

package/ios/vendor/swift/ZellioChat/Views/ChatRootView.swift

@@ -0,0 +1,154 @@
+#if canImport(SwiftUI) && canImport(UIKit)
+import SwiftUI
+import UIKit
+
+struct ThreadRepresentable: UIViewControllerRepresentable {
+    let controller: ThreadController
+    let theme: ChatTheme
+    let services: ThreadServices
+
+    func makeUIViewController(context: Context) -> ThreadViewController {
+        ThreadViewController(controller: controller, theme: theme, services: services)
+    }
+
+    func updateUIViewController(_ uiViewController: ThreadViewController, context: Context) {
+        uiViewController.update(theme: theme, services: services)
+    }
+
+    static func dismantleUIViewController(_ uiViewController: ThreadViewController, coordinator: ()) {
+        uiViewController.teardown()
+    }
+}
+
+struct ThreadScreen: View {
+    @Environment(\.chatTheme) private var theme
+    @ObservedObject var model: ChatModel
+    let onClose: () -> Void
+
+    private var title: String {
+        if case .thread(let id?) = model.route, let name = model.conversations.first(where: { $0.id == id })?.agentName, !name.isEmpty { return name }
+        return theme.brandName
+    }
+
+    private var subtitle: String {
+        let strings = theme.strings
+        if model.config?.online == false { return strings.string("banner.outsideHours") }
+        return model.config?.snapshot.behavior.replyExpectation.resolve(theme.locale) ?? strings.string("banner.online")
+    }
+
+    private var services: ThreadServices {
+        let engine = model.engine
+        let config = model.config
+        return ThreadServices(
+            canAttach: model.allowsAttachments,
+            greeting: config?.snapshot.screens.greeting.resolve(theme.locale) ?? theme.strings.string("thread.greeting"),
+            soundEnabled: config?.snapshot.appearance.soundEnabled ?? false,
+            upload: { data, name, mime, progress in try await engine.upload(data: data, fileName: name, mimeType: mime, progress: progress) }
+        )
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            bar
+            DividerLine()
+            if let banner = model.banner { BannerBar(banner: banner) }
+            if let controller = model.activeThread {
+                ThreadRepresentable(controller: controller, theme: theme, services: services)
+                    .ignoresSafeArea(.keyboard, edges: .bottom)
+                    .id(ObjectIdentifier(controller))
+            } else {
+                Spacer()
+            }
+        }
+        .background(theme.bg.ignoresSafeArea())
+    }
+
+    private var bar: some View {
+        let strings = theme.strings
+        return HStack(spacing: 6) {
+            if model.canGoBack && !model.isChatOnly {
+                IconButton(symbol: "chevron.backward", label: strings.string("common.back"), color: theme.ink, action: { model.goBack() })
+            } else {
+                Spacer().frame(width: 8)
+            }
+            LogoView(logoURL: model.config?.logoUrl, size: 32, radius: 10)
+            VStack(alignment: .leading, spacing: 0) {
+                Text(title).chatFont(.screenTitle).foregroundColor(theme.ink).lineLimit(1)
+                    .accessibilityAddTraits(.isHeader)
+                HStack(spacing: 5) {
+                    if model.config?.online != false { StatusDot(color: theme.ok) }
+                    Text(subtitle).chatFont(.secondary, size: 12.5).foregroundColor(theme.ink2).lineLimit(1)
+                }
+            }
+            .padding(.leading, 4)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            IconButton(symbol: "xmark", label: strings.string("common.close"), color: theme.ink2, action: onClose)
+        }
+        .padding(.horizontal, 8)
+        .padding(.vertical, 4)
+        .background(theme.bg)
+    }
+}
+
+/// The whole chat UI: routes between screens and sets language, direction and theme for everything inside.
+struct ChatRootView: View {
+    @ObservedObject var model: ChatModel
+    @Environment(\.colorScheme) private var colorScheme
+    let onClose: () -> Void
+    var onStatusBarStyle: ((UIStatusBarStyle) -> Void)?
+
+    /// On Home the status bar sits on the header. Everywhere else it sits on the background.
+    private func statusBarStyle(_ theme: ChatTheme) -> UIStatusBarStyle {
+        let lightContent: Bool
+        if model.route == .home, theme.headerStyle != .light {
+            lightContent = Contrast.luminance(theme.palette.onPrimary) > 0.5
+        } else {
+            lightContent = theme.palette.isDark
+        }
+        return lightContent ? .lightContent : .darkContent
+    }
+
+    var body: some View {
+        let theme = model.theme(systemDark: colorScheme == .dark)
+        let style = statusBarStyle(theme)
+        content(theme)
+            .onAppear { onStatusBarStyle?(style) }
+            .onChange(of: style) { onStatusBarStyle?($0) }
+            .environment(\.chatTheme, theme)
+            .environment(\.layoutDirection, theme.layoutDirection)
+            .environment(\.locale, ChatFormat.formatter(theme.locale))
+            .task { await model.start() }
+    }
+
+    @ViewBuilder
+    private func content(_ theme: ChatTheme) -> some View {
+        ZStack {
+            if model.route != .consent {
+                theme.bg.ignoresSafeArea()
+            }
+            switch model.route {
+            case .loading:
+                SkeletonView()
+            case .consent:
+                ConsentView(model: model, onDecline: onClose)
+            case .home:
+                HomeView(model: model, onClose: onClose)
+            case .list:
+                ConversationListView(model: model, onClose: onClose)
+            case .thread:
+                ThreadScreen(model: model, onClose: onClose)
+            case .unavailable:
+                MessageStateView(symbol: "headphones", text: theme.strings.string("state.unavailable"),
+                                 buttonTitle: theme.strings.string("attachment.close"), onClose: onClose, onButton: onClose)
+            case .loginNeeded:
+                MessageStateView(symbol: "person.crop.circle", text: theme.strings.string("state.loginNeeded"),
+                                 buttonTitle: theme.strings.string("attachment.close"), onClose: onClose, onButton: onClose)
+            case .loadFailed:
+                MessageStateView(symbol: "wifi.slash", text: theme.strings.string("state.loadFailed"),
+                                 buttonTitle: theme.strings.string("state.retry"), onClose: onClose, onButton: { Task { await model.retry() } })
+            }
+        }
+        .animation(MotionPolicy.reduced ? nil : .easeOut(duration: 0.18), value: model.route)
+    }
+}
+#endif

package/ios/vendor/swift/ZellioChat/Views/Components.swift

@@ -0,0 +1,335 @@
+#if canImport(SwiftUI) && canImport(UIKit)
+import SwiftUI
+import UIKit
+
+/// Loads images lazily. Memory cache plus a size-limited disk cache. Only https.
+final class ImageLoader {
+    static let shared = ImageLoader()
+
+    private let memory = NSCache<NSString, UIImage>()
+    private let session: URLSession
+
+    private init() {
+        memory.totalCostLimit = 40 * 1024 * 1024
+        let configuration = URLSessionConfiguration.default
+        configuration.urlCache = URLCache(memoryCapacity: 8 * 1024 * 1024, diskCapacity: 100 * 1024 * 1024, diskPath: "ai.zellio.chat.images")
+        configuration.requestCachePolicy = .returnCacheDataElseLoad
+        configuration.timeoutIntervalForRequest = 30
+        session = URLSession(configuration: configuration)
+    }
+
+    func cached(_ urlString: String) -> UIImage? { memory.object(forKey: urlString as NSString) }
+
+    /// Logout: customer photos must not stay on the phone.
+    func clear() {
+        memory.removeAllObjects()
+        session.configuration.urlCache?.removeAllCachedResponses()
+    }
+
+    enum Failure: Error { case notAllowed, expired, failed }
+
+    /// A larger file is never downloaded.
+    private static let maxDownloadBytes = 25 * 1024 * 1024
+    /// The long edge after decoding, so one photo cannot take hundreds of MB of memory.
+    private static let maxPixelEdge = 2048
+
+    /// Throws `.expired` for 403 so the caller can read the message page once more.
+    func load(_ urlString: String) async throws -> UIImage {
+        if let image = cached(urlString) { return image }
+        guard let url = URL(string: urlString), url.scheme?.lowercased() == "https" else { throw Failure.notAllowed }
+        do {
+            let (bytes, response) = try await session.bytes(from: url)
+            if let http = response as? HTTPURLResponse {
+                if http.statusCode == 403 { throw Failure.expired }
+                if !(200..<300).contains(http.statusCode) { throw Failure.failed }
+            }
+            let declared = response.expectedContentLength
+            if declared > Int64(Self.maxDownloadBytes) { throw Failure.failed }
+            var buffer = [UInt8]()
+            if declared > 0 { buffer.reserveCapacity(Int(declared)) }
+            for try await byte in bytes {
+                buffer.append(byte)
+                if buffer.count > Self.maxDownloadBytes { throw Failure.failed }
+            }
+            guard let image = ImagePrep.decode(Data(buffer), maxPixelEdge: Self.maxPixelEdge) else { throw Failure.failed }
+            let cost = image.cgImage.map { $0.bytesPerRow * $0.height } ?? buffer.count
+            memory.setObject(image, forKey: urlString as NSString, cost: cost)
+            return image
+        } catch let failure as Failure {
+            throw failure
+        } catch {
+            throw Failure.failed
+        }
+    }
+}
+
+struct RemoteImage<Placeholder: View>: View {
+    let urlString: String?
+    let placeholder: Placeholder
+    @State private var image: UIImage?
+
+    init(urlString: String?, @ViewBuilder placeholder: () -> Placeholder) {
+        self.urlString = urlString
+        self.placeholder = placeholder()
+        if let urlString = urlString { _image = State(initialValue: ImageLoader.shared.cached(urlString)) }
+    }
+
+    var body: some View {
+        Group {
+            if let image = image {
+                Image(uiImage: image).resizable().scaledToFill()
+            } else {
+                placeholder
+            }
+        }
+        .task(id: urlString) {
+            guard let urlString = urlString, image == nil else { return }
+            image = try? await ImageLoader.shared.load(urlString)
+        }
+    }
+}
+
+/// The brand logo, or a monogram of the first letter.
+struct LogoView: View {
+    @Environment(\.chatTheme) private var theme
+    let logoURL: String?
+    let size: CGFloat
+    let radius: CGFloat
+    var onGradient = false
+
+    var body: some View {
+        let monogram = String(theme.brandName.first ?? "Z").uppercased()
+        RemoteImage(urlString: logoURL) {
+            ZStack {
+                (onGradient ? Color.white.opacity(0.2) : theme.primary)
+                Text(monogram)
+                    .font(theme.fontName.map { Font.custom($0, fixedSize: size * 0.45) } ?? Font.system(size: size * 0.45, weight: .bold))
+                    .foregroundColor(onGradient ? theme.onPrimary : theme.onPrimary)
+            }
+        }
+        .frame(width: size, height: size)
+        .clipShape(RoundedRectangle(cornerRadius: radius, style: .continuous))
+        .accessibilityHidden(true)
+    }
+}
+
+struct AvatarView: View {
+    @Environment(\.chatTheme) private var theme
+    let name: String?
+    let urlString: String?
+    let size: CGFloat
+
+    var body: some View {
+        let initial = String((name ?? theme.brandName).first ?? "Z").uppercased()
+        RemoteImage(urlString: urlString) {
+            ZStack {
+                theme.avatarTone
+                Text(initial)
+                    .font(Font.system(size: size * 0.42, weight: .semibold))
+                    .foregroundColor(theme.avatarInk)
+            }
+        }
+        .frame(width: size, height: size)
+        .clipShape(Circle())
+        .accessibilityHidden(true)
+    }
+}
+
+struct IconButton: View {
+    let symbol: String
+    let label: String
+    let color: Color
+    var background: Color = .clear
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            Image(systemName: symbol)
+                .font(.system(size: 18, weight: .semibold))
+                .foregroundColor(color)
+                .frame(width: 44, height: 44)
+                .background(Circle().fill(background))
+                .contentShape(Circle())
+        }
+        .buttonStyle(PlainButtonStyle())
+        .accessibilityLabel(Text(label))
+    }
+}
+
+struct ChatCard<Content: View>: View {
+    @Environment(\.chatTheme) private var theme
+    let content: Content
+
+    init(@ViewBuilder content: () -> Content) { self.content = content() }
+
+    var body: some View {
+        VStack(spacing: 0) { content }
+            .background(theme.card)
+            .clipShape(RoundedRectangle(cornerRadius: CGFloat(Metrics.cardRadius), style: .continuous))
+            .overlay(RoundedRectangle(cornerRadius: CGFloat(Metrics.cardRadius), style: .continuous).stroke(theme.line, lineWidth: 1))
+            .shadow(color: theme.cardShadow, radius: 10, x: 0, y: 4)
+    }
+}
+
+struct DividerLine: View {
+    @Environment(\.chatTheme) private var theme
+    var body: some View { Rectangle().fill(theme.line).frame(height: 1) }
+}
+
+struct StatusDot: View {
+    let color: Color
+    var size: CGFloat = 7
+    var body: some View { Circle().fill(color).frame(width: size, height: size).accessibilityHidden(true) }
+}
+
+struct AttributionView: View {
+    @Environment(\.chatTheme) private var theme
+    var body: some View {
+        if theme.showAttribution {
+            Text(theme.strings.string("common.poweredBy"))
+                .chatFont(.caption)
+                .foregroundColor(theme.ink2)
+                .frame(maxWidth: .infinity)
+                .padding(.top, 14)
+                .padding(.bottom, 20)
+        }
+    }
+}
+
+/// A thin bar under the top bar.
+struct BannerBar: View {
+    @Environment(\.chatTheme) private var theme
+    let banner: ChatBanner
+
+    var body: some View {
+        let colors = palette
+        HStack(spacing: 8) {
+            Image(systemName: symbol).font(.system(size: 14, weight: .semibold)).accessibilityHidden(true)
+            Text(text).chatFont(.secondary, size: 13)
+            Spacer(minLength: 0)
+        }
+        .foregroundColor(colors.1)
+        .padding(.horizontal, 16)
+        .padding(.vertical, 9)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(colors.0)
+        .accessibilityElement(children: .combine)
+    }
+
+    private var symbol: String {
+        switch banner {
+        case .reconnecting: return "wifi.slash"
+        case .outsideHours: return "clock"
+        }
+    }
+
+    private var text: String {
+        switch banner {
+        case .reconnecting: return theme.strings.string("banner.reconnecting")
+        case .outsideHours(let text): return text
+        }
+    }
+
+    private var palette: (Color, Color) {
+        switch banner {
+        case .reconnecting:
+            return theme.palette.isDark
+                ? (Color(HexColor("#2E1A0E") ?? .black), Color(HexColor("#FDBA74") ?? .white))
+                : (Color(HexColor("#FFF3E8") ?? .white), Color(HexColor("#9A3D00") ?? .black))
+        case .outsideHours:
+            return (theme.bgAlt, theme.ink2)
+        }
+    }
+}
+
+struct PillButton: View {
+    @Environment(\.chatTheme) private var theme
+    let title: String
+    let symbol: String?
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: 8) {
+                if let symbol = symbol { Image(systemName: symbol).font(.system(size: 18, weight: .semibold)).accessibilityHidden(true) }
+                Text(title).chatFont(.message, weight: .semibold)
+            }
+            .foregroundColor(theme.onPrimary)
+            .padding(.horizontal, 24)
+            .frame(minHeight: 52)
+            .background(Capsule().fill(theme.primary))
+            .shadow(color: theme.primary.opacity(0.35), radius: 12, x: 0, y: 8)
+        }
+        .buttonStyle(PlainButtonStyle())
+    }
+}
+
+/// A calm placeholder while the first config loads.
+struct SkeletonView: View {
+    @Environment(\.chatTheme) private var theme
+    @State private var pulse = false
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            RoundedRectangle(cornerRadius: 12).fill(theme.bgAlt).frame(width: 40, height: 40)
+            RoundedRectangle(cornerRadius: 8).fill(theme.bgAlt).frame(width: 220, height: 28)
+            RoundedRectangle(cornerRadius: 8).fill(theme.bgAlt).frame(width: 160, height: 16)
+            RoundedRectangle(cornerRadius: CGFloat(Metrics.cardRadius)).fill(theme.bgAlt).frame(height: 120)
+            RoundedRectangle(cornerRadius: CGFloat(Metrics.cardRadius)).fill(theme.bgAlt).frame(height: 72)
+            Spacer()
+        }
+        .padding(20)
+        .opacity(pulse ? 0.55 : 1)
+        .onAppear {
+            if !MotionPolicy.reduced { withAnimation(.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) { pulse = true } }
+        }
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(Text(theme.strings.string("state.loading")))
+    }
+}
+
+/// An icon, one line, and a button. No technical words.
+struct MessageStateView: View {
+    @Environment(\.chatTheme) private var theme
+    let symbol: String
+    let text: String
+    let buttonTitle: String
+    let onClose: () -> Void
+    let onButton: () -> Void
+
+    var body: some View {
+        VStack(spacing: 0) {
+            HStack {
+                Spacer()
+                IconButton(symbol: "xmark", label: theme.strings.string("common.close"), color: theme.ink2, action: onClose)
+            }
+            .padding(.horizontal, 8)
+            Spacer()
+            VStack(spacing: 14) {
+                Image(systemName: symbol)
+                    .font(.system(size: 28, weight: .regular))
+                    .foregroundColor(theme.ink2)
+                    .frame(width: 64, height: 64)
+                    .background(RoundedRectangle(cornerRadius: 20, style: .continuous).fill(theme.bgAlt))
+                    .accessibilityHidden(true)
+                Text(text)
+                    .chatFont(.screenTitle, weight: .medium)
+                    .foregroundColor(theme.ink)
+                    .multilineTextAlignment(.center)
+                Button(action: onButton) {
+                    Text(buttonTitle)
+                        .chatFont(.message, size: 15.5, weight: .medium)
+                        .foregroundColor(theme.ink)
+                        .padding(.horizontal, 26)
+                        .frame(minHeight: 48)
+                        .overlay(Capsule().stroke(theme.line, lineWidth: 1))
+                }
+                .buttonStyle(PlainButtonStyle())
+            }
+            .padding(.horizontal, 44)
+            Spacer()
+            Spacer().frame(height: 80)
+        }
+    }
+}
+#endif