[HACK week] Allow merchants to use their own API keys for AI-powered features

Experiments/Experiments/DefaultFeatureFlagService.swift

@@ -95,6 +95,8 @@ public struct DefaultFeatureFlagService: FeatureFlagService {
             return buildConfig == .localDeveloper || buildConfig == .alpha
         case .backgroundProductImageUpload:
             return buildConfig == .localDeveloper || buildConfig == .alpha
+        case .allowMerchantAIAPIKey:
+            return buildConfig == .localDeveloper || buildConfig == .alpha
         default:
             return true
         }

Experiments/Experiments/FeatureFlag.swift

@@ -204,4 +204,8 @@ public enum FeatureFlag: Int {
     /// Supports uploading product images in background
     ///
     case backgroundProductImageUpload
+
+    /// Allows merchants to use their own API keys for AI-powered features
+    ///
+    case allowMerchantAIAPIKey
 }

Networking/Networking/Mapper/AIProductMapper.swift

@@ -14,4 +14,12 @@ struct AIProductMapper: Mapper {
             .removingSuffix("```")
         return try decoder.decode(AIProduct.self, from: Data(textCompletion.utf8))
     }
+
+    func map(dictionary: [String: Any]) throws -> AIProduct {
+        // For non-network requests we pass [String: Any] to the map() as data, however decoding
+        // relies on mapping to a JetpackAIQueryResponse model, which fails in the direct API usage key
+        let decoder = JSONDecoder()
+        let data = try JSONSerialization.data(withJSONObject: dictionary)
+        return try decoder.decode(AIProduct.self, from: data)
+    }
 }

WooCommerce/Classes/Analytics/WooAnalyticsEvent+ProductCreationAI.swift

@@ -12,16 +12,17 @@ extension WooAnalyticsEvent {
             case description
             case field
             case featureWordCount = "feature_word_count"
+            case aiSource = "ai_source"
         }
 
         static func entryPointDisplayed() -> WooAnalyticsEvent {
             WooAnalyticsEvent(statName: .productCreationAIEntryPointDisplayed,
                               properties: [:])
         }
 
-        static func entryPointTapped() -> WooAnalyticsEvent {
+        static func entryPointTapped(_ aiSource: AISource) -> WooAnalyticsEvent {
             WooAnalyticsEvent(statName: .productCreationAIEntryPointTapped,
-                              properties: [:])
+                              properties: [Key.aiSource.rawValue: aiSource.rawValue])
         }
 
         static func productNameContinueTapped() -> WooAnalyticsEvent {

WooCommerce/Classes/Analytics/WooAnalyticsStat.swift

@@ -1088,6 +1088,7 @@ enum WooAnalyticsStat: String {
     case hubMenuSwitchStoreTapped = "hub_menu_switch_store_tapped"
     case hubMenuOptionTapped = "hub_menu_option_tapped"
     case hubMenuSettingsTapped = "hub_menu_settings_tapped"
+    case hubMenuAISettingsTapped = "hub_menu_ai_settings_tapped"
 
     // MARK: Coupons
     case couponsLoaded = "coupons_loaded"

WooCommerce/Classes/Authentication/Keychain+Entries.swift

@@ -26,4 +26,11 @@ extension Keychain {
         get { self[WooConstants.siteCredentialPassword] }
         set { self[WooConstants.siteCredentialPassword] = newValue }
     }
+
+    /// AI Provider API key
+    ///
+    var aiProviderAPIKey: String? {
+        get { self[WooConstants.aiProviderAPIKey] }
+        set { self[WooConstants.aiProviderAPIKey] = newValue }
+    }
 }

WooCommerce/Classes/System/WooConstants.swift

@@ -33,6 +33,10 @@ public enum WooConstants {
     ///
     static let siteCredentialPassword = "siteCredentialPassword"
 
+    /// Keychain Access's Key for the AI API key entered by the merchant in AI settings
+    ///
+    static let aiProviderAPIKey = "aiProviderAPIKey"
+
     /// Keychain Access's Key for the current application password
     ///
     static let applicationPassword = "ApplicationPassword"

WooCommerce/Classes/ViewRelated/AI Settings/AISettingsView.swift

@@ -0,0 +1,230 @@
+import SwiftUI
+import Yosemite
+
+struct AISettingsView: View {
+    @ObservedObject private var viewModel: AISettingsViewModel
+
+    // If we're already providing AI capabilities via WPCOM or JPAI we can
+    // override API key usage
+    private var shouldUseWPCOMJPAISource: Bool {
+        guard let site = ServiceLocator.stores.sessionManager.defaultSite else {
+            return false
+        }
+        if site.isWordPressComStore || site.isAIAssistantFeatureActive {
+            return true
+        } else {
+            return false
+        }
+    }
+
+    init(viewModel: AISettingsViewModel) {
+        self.viewModel = viewModel
+    }
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 16) {
+                if shouldUseWPCOMJPAISource {
+                    Text(Localization.builtInAIEnabled)
+                        .font(.callout)
+                        .foregroundColor(.secondary)
+                        .padding()
+                        .background(
+                            RoundedRectangle(cornerRadius: 8)
+                                .fill(Color(.systemGray6))
+                        )
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 8)
+                                .stroke(Color(.gray), lineWidth: 1)
+                        )
+                        .padding(.bottom, 8)
+                        .frame(width: .infinity)
+                }
+
+                HStack {
+                    Text(Localization.aiProvider)
+                    Picker(Localization.selectProvider, selection: $viewModel.selectedProvider) {
+                        Text(Localization.openAI).tag("OpenAI")
+                        Text(Localization.anthropic).tag("Anthropic")
+                    }
+                    .pickerStyle(MenuPickerStyle())
+                    .onChange(of: viewModel.selectedProvider) { newValue in
+                        viewModel.updateProvider(newValue)
+                    }
+                    .disabled(shouldUseWPCOMJPAISource)
+                    .opacity(shouldUseWPCOMJPAISource ? 0.5 : 1.0)
+
+                    if shouldUseWPCOMJPAISource {
+                        Image(systemName: "lock.fill")
+                            .foregroundColor(.gray)
+                    }
+                }
+
+                HStack {
+                    Text(Localization.models)
+                    Picker(Localization.selectModel, selection: $viewModel.selectedModel) {
+                        ForEach(viewModel.selectedProvider == "OpenAI" ? viewModel.openAIModels : viewModel.anthropicModels, id: \.self) { model in
+                            Text(model).tag(model)
+                        }
+                    }
+                    .pickerStyle(MenuPickerStyle())
+                    .disabled(shouldUseWPCOMJPAISource)
+                    .opacity(shouldUseWPCOMJPAISource ? 0.5 : 1.0)
+
+                    if shouldUseWPCOMJPAISource {
+                        Image(systemName: "lock.fill")
+                            .foregroundColor(.gray)
+                    }
+                }
+
+                Divider()
+
+                VStack(alignment: .leading, spacing: 8) {
+                    HStack {
+                        TextField(
+                            Localization.enterAPIKey,
+                            text: Binding(
+                                get: { viewModel.isEditingApiKey ? viewModel.apiKey : "**********" },
+                                set: { newValue in if viewModel.isEditingApiKey { viewModel.apiKey = newValue } }
+                            )
+                        )
+                        .textFieldStyle(RoundedBorderTextFieldStyle(focused: viewModel.isEditingApiKey))
+                        .foregroundColor(.primary)
+                        .privacySensitive()
+                        .disabled(!viewModel.isEditingApiKey)
+
+                        if viewModel.isEditingApiKey, !viewModel.apiKey.isEmpty {
+                            Button(action: viewModel.clearApiKey) {
+                                Image(systemName: "xmark.circle.fill")
+                                    .foregroundColor(.gray)
+                            }
+                        }
+
+                        Button(action: viewModel.toggleEditing) {
+                            Text(viewModel.isEditingApiKey ? Localization.save : Localization.edit)
+                        }
+                        .disabled(shouldUseWPCOMJPAISource)
+                        .opacity(shouldUseWPCOMJPAISource ? 0.5 : 1.0)
+
+                        if shouldUseWPCOMJPAISource {
+                            Image(systemName: "lock.fill")
+                                .foregroundColor(.gray)
+                        }
+                    }
+
+                    Text(Localization.apiKeyDescription)
+                            .font(.caption)
+                            .foregroundColor(.secondary)
+
+                    Spacer()
+                }
+                Text(Localization.apiKeyDisclaimer)
+                    .font(.caption)
+                    .foregroundColor(.secondary)
+            }
+            .padding()
+            .onAppear {
+                viewModel.onAppear()
+                if shouldUseWPCOMJPAISource {
+                    viewModel.selectedProvider = "OpenAI"
+                    viewModel.selectedModel = "gpt-4o"
+                }
+            }
+        }
+        .navigationTitle(Localization.navigationTitle)
+    }
+}
+
+private extension AISettingsView {
+    enum Localization {
+        static let navigationTitle = NSLocalizedString(
+            "aiSettings.navigationTitle",
+            value: "AI Settings",
+            comment: "Navigation title for the AI Settings screen"
+        )
+
+        static let aiProvider = NSLocalizedString(
+            "aiSettings.aiProvider",
+            value: "Provider",
+            comment: "Label for the AI provider selection in AI settings"
+        )
+
+        static let selectProvider = NSLocalizedString(
+            "aiSettings.selectProvider",
+            value: "Select Provider",
+            comment: "Accessibility label for the AI provider picker"
+        )
+
+        static let openAI = NSLocalizedString(
+            "aiSettings.openAI",
+            value: "OpenAI",
+            comment: "Label for OpenAI provider option"
+        )
+
+        static let anthropic = NSLocalizedString(
+            "aiSettings.anthropic",
+            value: "Anthropic",
+            comment: "Label for Anthropic provider option"
+        )
+
+        static let models = NSLocalizedString(
+            "aiSettings.models",
+            value: "Models",
+            comment: "Label for the AI models selection"
+        )
+
+        static let selectModel = NSLocalizedString(
+            "aiSettings.selectModel",
+            value: "Select Model",
+            comment: "Accessibility label for the AI model picker"
+        )
+
+        static let enterAPIKey = NSLocalizedString(
+            "aiSettings.enterAPIKey",
+            value: "Enter API Key",
+            comment: "Placeholder text for the API key input field"
+        )
+
+        static let save = NSLocalizedString(
+            "aiSettings.save",
+            value: "Save",
+            comment: "Button title to save API key"
+        )
+
+        static let edit = NSLocalizedString(
+            "aiSettings.edit",
+            value: "Edit",
+            comment: "Button title to edit API key"
+        )
+
+        static let apiKeyDescription = NSLocalizedString(
+            "aiSettings.apiKeyDescription",
+            value: "Enter your API key to use AI generation at public API costs.",
+            comment: "Description text explaining the purpose of the API key"
+        )
+
+        static let builtInAIEnabled = NSLocalizedString(
+            "aiSettings.builtInAIEnabled",
+            value: "AI capabilities are already enabled for this site.",
+            comment: "Message displayed when built-in AI feature is enabled"
+        )
+
+        static func currentAISource(_ source: String) -> String {
+            String(format: NSLocalizedString(
+                "aiSettings.currentAISource",
+                value: "Current AI source: %@",
+                comment: "Label showing the current AI source being used. %@ shows the provider name (e.g. Jetpack)"
+            ), source)
+        }
+
+        static let apiKeyDisclaimer = NSLocalizedString(
+            "aiSettings.apiKeyDisclaimer",
+            value: "API keys open up access to potentially sensitive information. Do not share your API key with others or expose them.",
+            comment: "Warning message about keeping API keys secure"
+        )
+    }
+}
+
+#Preview {
+    AISettingsView(viewModel: AISettingsViewModel())
+}

WooCommerce/Classes/ViewRelated/AI Settings/AISettingsViewModel.swift

@@ -0,0 +1,59 @@
+import SwiftUI
+import KeychainAccess
+
+final class AISettingsViewModel: ObservableObject {
+    private var keychain = Keychain(service: WooConstants.keychainServiceName)
+
+    @Published var apiKey: String // TODO: Make function and restrict set access
+    @Published var selectedModel: String
+    @Published var selectedProvider: String
+    @Published var isEditingApiKey: Bool
+
+    private let defaults: UserDefaults
+
+    let openAIModels = [
+        "gpt-4o",
+        "gpt-4-turbo",
+        "gpt-3.5-turbo"
+    ]
+
+    let anthropicModels = [
+        "claude-3-haiku-20240307"
+    ]
+
+    init(defaults: UserDefaults = .standard) {
+        self.defaults = defaults
+        self.apiKey = Keychain(service: WooConstants.keychainServiceName).aiProviderAPIKey ?? ""
+        self.selectedModel = defaults.string(forKey: "AIProviderModel") ?? ""
+        self.selectedProvider = defaults.string(forKey: "AIProvider") ?? ""
+        self.isEditingApiKey = false
+    }
+
+    func onAppear() {
+        isEditingApiKey = apiKey.isEmpty
+    }
+
+    func updateProvider(_ provider: String) {
+        selectedProvider = provider
+        selectedModel = provider == "OpenAI" ? openAIModels.first ?? "" : anthropicModels.first ?? ""
+        saveSettings()
+    }
+
+    func clearApiKey() {
+        apiKey = ""
+        keychain.aiProviderAPIKey = nil
+    }
+
+    func toggleEditing() {
+        if isEditingApiKey {
+            saveSettings()
+        }
+        isEditingApiKey.toggle()
+    }
+
+    private func saveSettings() {
+        keychain.aiProviderAPIKey = apiKey
+        defaults.setValue(selectedModel, forKey: "AIProviderModel")
+        defaults.setValue(selectedProvider, forKey: "AIProvider")
+    }
+}

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -69,6 +69,8 @@ struct HubMenu: View {
             ServiceLocator.analytics.track(event: .Blaze.blazeCampaignListEntryPointSelected(source: .menu))
         case HubMenuViewModel.PointOfSaleEntryPoint.id:
             viewModel.showsPOS = true
+        case HubMenuViewModel.AISettings.id:
+            ServiceLocator.analytics.track(.hubMenuAISettingsTapped)
         default:
             break
         }
@@ -183,6 +185,10 @@ private extension HubMenu {
                 BlazeCampaignListHostingControllerRepresentable(siteID: viewModel.siteID, selectedCampaignID: campaignID)
             case .blazeCampaignCreation:
                 BlazeCampaignListHostingControllerRepresentable(siteID: viewModel.siteID, startsCampaignCreationOnAppear: true)
+            case .aiSettings:
+                // TODO: Pass eligibility, so we know what's the AI source
+                let viewModel = AISettingsViewModel()
+                AISettingsView(viewModel: viewModel)
             }
         }
         .navigationBarTitleDisplayMode(.inline)