iOS AI Chat - Improve show/dismiss animation

DuckDuckGo/MainViewController.swift

@@ -1712,13 +1712,10 @@ class MainViewController: UIViewController {
     }
 
     private func openAIChat() {
-        let logoImage = UIImage(named: "Logo")
-        let title = UserText.aiChatTitle
+
 
         let roundedPageSheet = RoundedPageSheetContainerViewController(
             contentViewController: aiChatViewController,
-            logoImage: logoImage,
-            title: title,
             allowedOrientation: .portrait)
 
         present(roundedPageSheet, animated: true, completion: nil)
@@ -2990,4 +2987,8 @@ extension MainViewController: AIChatViewControllerDelegate {
         loadUrlInNewTab(url, inheritedAttribution: nil)
         viewController.dismiss(animated: true)
     }
+
+    func aiChatViewControllerDidFinish(_ viewController: AIChatViewController) {
+        viewController.dismiss(animated: true)
+    }
 }

DuckDuckGo/RoundedPageContainer/RoundedPageSheetContainerViewController.swift

@@ -21,21 +21,14 @@ import UIKit
 
 final class RoundedPageSheetContainerViewController: UIViewController {
     let contentViewController: UIViewController
-    private let logoImage: UIImage?
-    private let titleText: String
     private let allowedOrientation: UIInterfaceOrientationMask
+    let backgroundView = UIView()
 
-    private lazy var titleBarView: TitleBarView = {
-        let titleBarView = TitleBarView(logoImage: logoImage, title: titleText) { [weak self] in
-            self?.closeController()
-        }
-        return titleBarView
-    }()
+    private var interactiveDismissalTransition: UIPercentDrivenInteractiveTransition?
+    private var isInteractiveDismissal = false
 
-    init(contentViewController: UIViewController, logoImage: UIImage?, title: String, allowedOrientation: UIInterfaceOrientationMask = .all) {
+    init(contentViewController: UIViewController, allowedOrientation: UIInterfaceOrientationMask = .all) {
         self.contentViewController = contentViewController
-        self.logoImage = logoImage
-        self.titleText = title
         self.allowedOrientation = allowedOrientation
         super.init(nibName: nil, bundle: nil)
         modalPresentationStyle = .custom
@@ -60,21 +53,52 @@ final class RoundedPageSheetContainerViewController: UIViewController {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        view.backgroundColor = .black
+        view.backgroundColor = .clear
 
-        setupTitleBar()
+        setupBackgroundView()
         setupContentViewController()
     }
 
-    private func setupTitleBar() {
-        view.addSubview(titleBarView)
-        titleBarView.translatesAutoresizingMaskIntoConstraints = false
+    @objc private func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
+        let translation = gesture.translation(in: view)
+        let velocity = gesture.velocity(in: view)
+        let progress = translation.y / view.bounds.height
+
+        switch gesture.state {
+        case .began:
+            isInteractiveDismissal = true
+            interactiveDismissalTransition = UIPercentDrivenInteractiveTransition()
+            dismiss(animated: true, completion: nil)
+        case .changed:
+            interactiveDismissalTransition?.update(progress)
+        case .ended, .cancelled:
+            let shouldDismiss = progress > 0.3 || velocity.y > 1000
+            if shouldDismiss {
+                interactiveDismissalTransition?.finish()
+            } else {
+                interactiveDismissalTransition?.cancel()
+                UIView.animate(withDuration: 0.2, animations: {
+                    self.view.transform = .identity
+                })
+            }
+            isInteractiveDismissal = false
+            interactiveDismissalTransition = nil
+        default:
+            break
+        }
+    }
+
+    private func setupBackgroundView() {
+        view.addSubview(backgroundView)
+
+        backgroundView.backgroundColor = .black
+        backgroundView.translatesAutoresizingMaskIntoConstraints = false
 
         NSLayoutConstraint.activate([
-            titleBarView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
-            titleBarView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            titleBarView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-            titleBarView.heightAnchor.constraint(equalToConstant: 44)
+            backgroundView.topAnchor.constraint(equalTo: view.topAnchor),
+            backgroundView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+            backgroundView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            backgroundView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
         ])
     }
 
@@ -84,7 +108,7 @@ final class RoundedPageSheetContainerViewController: UIViewController {
         contentViewController.view.translatesAutoresizingMaskIntoConstraints = false
 
         NSLayoutConstraint.activate([
-            contentViewController.view.topAnchor.constraint(equalTo: titleBarView.bottomAnchor), // Below the title bar
+            contentViewController.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             contentViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
             contentViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             contentViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor)
@@ -95,6 +119,9 @@ final class RoundedPageSheetContainerViewController: UIViewController {
         contentViewController.view.clipsToBounds = true
 
         contentViewController.didMove(toParent: self)
+
+        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
+        contentViewController.view.addGestureRecognizer(panGesture)
     }
 
     @objc func closeController() {
@@ -110,70 +137,8 @@ extension RoundedPageSheetContainerViewController: UIViewControllerTransitioning
     func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
         return RoundedPageSheetDismissalAnimator()
     }
-}
-
-final private class TitleBarView: UIView {
-    private let imageView: UIImageView
-    private let titleLabel: UILabel
-    private let closeButton: UIButton
-
-    init(logoImage: UIImage?, title: String, closeAction: @escaping () -> Void) {
-        imageView = UIImageView(image: logoImage)
-        titleLabel = UILabel()
-        closeButton = UIButton(type: .system)
-
-        super.init(frame: .zero)
-
-        setupView(title: title, closeAction: closeAction)
-    }
-
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
-    }
-
-    private func setupView(title: String, closeAction: @escaping () -> Void) {
-        backgroundColor = .clear
-
-        imageView.contentMode = .scaleAspectFit
-        imageView.translatesAutoresizingMaskIntoConstraints = false
-
-        let imageSize: CGFloat = 28
-        NSLayoutConstraint.activate([
-            imageView.widthAnchor.constraint(equalToConstant: imageSize),
-            imageView.heightAnchor.constraint(equalToConstant: imageSize)
-        ])
-
-        titleLabel.text = title
-        titleLabel.font = UIFont.systemFont(ofSize: 17, weight: .semibold)
-        titleLabel.textColor = .white
-        titleLabel.translatesAutoresizingMaskIntoConstraints = false
-
-        closeButton.setImage(UIImage(named: "Close-24"), for: .normal)
-        closeButton.tintColor = .white
-        closeButton.translatesAutoresizingMaskIntoConstraints = false
-        closeButton.addTarget(self, action: #selector(closeButtonTapped), for: .touchUpInside)
-
-        addSubview(imageView)
-        addSubview(titleLabel)
-        addSubview(closeButton)
-
-        NSLayoutConstraint.activate([
-            imageView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor, constant: 16),
-            imageView.centerYAnchor.constraint(equalTo: centerYAnchor),
-
-            titleLabel.leadingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: 8),
-            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
-
-            closeButton.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor, constant: -16),
-            closeButton.centerYAnchor.constraint(equalTo: centerYAnchor)
-        ])
-
-        self.closeAction = closeAction
-    }
-
-    private var closeAction: (() -> Void)?
 
-    @objc private func closeButtonTapped() {
-        closeAction?()
+    func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
+        return isInteractiveDismissal ? interactiveDismissalTransition : nil
     }
 }

DuckDuckGo/RoundedPageContainer/RoundedPageSheetPresentationAnimator.swift

@@ -21,9 +21,11 @@ import UIKit
 
 enum AnimatorConstants {
     static let duration: TimeInterval = 0.4
+    static let springDamping: CGFloat = 0.9
+    static let springVelocity: CGFloat = 0.5
 }
 
-class RoundedPageSheetPresentationAnimator: NSObject, UIViewControllerAnimatedTransitioning {
+final class RoundedPageSheetPresentationAnimator: NSObject, UIViewControllerAnimatedTransitioning {
     func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
         return AnimatorConstants.duration
     }
@@ -39,16 +41,22 @@ class RoundedPageSheetPresentationAnimator: NSObject, UIViewControllerAnimatedTr
         toView.alpha = 0
         contentView.transform = CGAffineTransform(translationX: 0, y: containerView.bounds.height)
 
-        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
+        UIView.animate(withDuration: AnimatorConstants.duration,
+                       delay: 0,
+                       usingSpringWithDamping: AnimatorConstants.springDamping,
+                       initialSpringVelocity: AnimatorConstants.springVelocity,
+                       options: .curveEaseInOut,
+                       animations: {
             toView.alpha = 1
             contentView.transform = .identity
         }, completion: { finished in
             transitionContext.completeTransition(finished)
         })
     }
 }
-
 class RoundedPageSheetDismissalAnimator: NSObject, UIViewControllerAnimatedTransitioning {
+    private var animator: UIViewPropertyAnimator?
+
     func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
         return AnimatorConstants.duration
     }
@@ -58,14 +66,54 @@ class RoundedPageSheetDismissalAnimator: NSObject, UIViewControllerAnimatedTrans
               let fromView = fromViewController.view,
               let contentView = fromViewController.contentViewController.view else { return }
 
+        let fromBackgroundView = fromViewController.backgroundView
         let containerView = transitionContext.containerView
 
-        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
-            fromView.alpha = 0
+        UIView.animate(withDuration: AnimatorConstants.duration,
+                       delay: 0,
+                       usingSpringWithDamping: AnimatorConstants.springDamping,
+                       initialSpringVelocity: AnimatorConstants.springVelocity,
+                       options: .curveEaseInOut,
+                       animations: {
+            fromBackgroundView.alpha = 0
             contentView.transform = CGAffineTransform(translationX: 0, y: containerView.bounds.height)
         }, completion: { finished in
             fromView.removeFromSuperview()
             transitionContext.completeTransition(finished)
         })
     }
+
+    func interruptibleAnimator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating {
+        if let existingAnimator = animator {
+            return existingAnimator
+        }
+
+        guard let fromViewController = transitionContext.viewController(forKey: .from) as? RoundedPageSheetContainerViewController,
+              let fromView = fromViewController.view,
+              let contentView = fromViewController.contentViewController.view else {
+            fatalError("Invalid view controller setup")
+        }
+
+        let containerView = transitionContext.containerView
+        let fromBackgroundView = fromViewController.backgroundView
+
+        let animator = UIViewPropertyAnimator(duration: AnimatorConstants.duration,
+                                              dampingRatio: AnimatorConstants.springDamping) {
+            fromBackgroundView.alpha = 0
+            contentView.transform = CGAffineTransform(translationX: 0, y: containerView.bounds.height)
+        }
+
+        animator.addCompletion { position in
+            switch position {
+            case .end:
+                fromView.removeFromSuperview()
+                transitionContext.completeTransition(true)
+            default:
+                transitionContext.completeTransition(false)
+            }
+        }
+
+        self.animator = animator
+        return animator
+    }
 }

DuckDuckGo/UserText.swift

@@ -1352,7 +1352,6 @@ But if you *do* want a peek under the hood, you can find more information about
     static let duckPlayerContingencyMessageCTA = NSLocalizedString("duck-player.video-contingency-cta", value: "Learn More", comment: "Button for the message explaining to the user that Duck Player is not available so the user can learn more")
 
     // MARK: - AI Chat
-    public static let aiChatTitle = NSLocalizedString("aichat.title", value: "DuckDuckGo AI Chat", comment: "Title for DuckDuckGo AI Chat. Should not be translated")
     public static let aiChatFeatureName = NSLocalizedString("aichat.settings.title", value: "AI Chat", comment: "Settings screen cell text for AI Chat settings")
 
     public static let aiChatSettingsEnableFooter = NSLocalizedString("aichat.settings.enable.footer", value: "Turning this off will hide the AI Chat feature in the DuckDuckGo app.", comment: "Footer text for AI Chat settings")

DuckDuckGo/en.lproj/Localizable.strings

@@ -158,9 +158,6 @@
 /* Settings screen cell text for AI Chat settings */
 "aichat.settings.title" = "AI Chat";
 
-/* Title for DuckDuckGo AI Chat. Should not be translated */
-"aichat.title" = "DuckDuckGo AI Chat";
-
 /* No comment provided by engineer. */
 "alert.message.bookmarkAll" = "Existing bookmarks will not be duplicated.";
 

LocalPackages/AIChat/Package.swift

@@ -13,9 +13,15 @@ let package = Package(
             targets: ["AIChat"]
         ),
     ],
+    dependencies: [
+        .package(url: "https://github.com/duckduckgo/DesignResourcesKit", exact: "3.3.0")
+    ],
     targets: [
         .target(
             name: "AIChat",
+            dependencies: [
+                "DesignResourcesKit",
+            ],
             resources: [
                 .process("Resources/Assets.xcassets")
             ]