Overriding User Data

export const pikaConfig: PikaConfig = {
    // ... other configuration
    siteFeatures: {
        userDataOverrides: {
            enabled: true,

            // Optional: Specify which user types can use this feature (defaults to ['internal-user'])
            userTypesAllowed: ['internal-user'],

            // Optional: Customize UI text

            // The name of the menu item that will appear to authorized users underneath the settings button
            menuItemTitle: 'Switch Account Context',

            // The title of the Dialog that opens to allow users to override data
            dialogTitle: 'Account Override',

            // A description that appears in the dialog explaining to users what the dialog is for
            dialogDescription: 'Select the account context to use for this chat app.',

            // Optional: Force users to provide overrides if missing required data
            promptUserIfAnyOfTheseCustomUserDataAttributesAreMissing: ['accountId', 'accountType']
        }
    }
};

const chatApp: ChatApp = {
    chatAppId: 'customer-support',
    // ... other chat app settings
    features: {
        userDataOverride: {
            featureId: 'userDataOverride',
            enabled: false // Disable for this chat app
        }
    }
};

// Example: Force override if these are missing from user.customData
promptUserIfAnyOfTheseCustomUserDataAttributesAreMissing: [
    'accountId', // Checks user.customData.accountId
    'accountType', // Checks user.customData.accountType
    'company.name', // Checks user.customData.company.name
    'permissions.level' // Checks user.customData.permissions.level
];

import type { AuthenticatedUser, ChatApp, RecordOrUndef } from 'pika-shared/types/chatbot/chatbot-types';

/**
 * Get initial data for the override dialog
 */
export async function getInitialDataForUserDataOverrideDialog(user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>, chatApp: ChatApp): Promise<unknown | undefined> {
    // Return existing override data if available
    if (user.overrideData && user.overrideData[chatApp.chatAppId]) {
        const overrideData = user.overrideData[chatApp.chatAppId];

        // Transform stored data back to UI format
        return {
            accountId: overrideData.accountId,
            accountName: overrideData.accountName,
            accountType: overrideData.accountType
        };
    }

    return undefined;
}

/**
 * Get values for auto-complete inputs
 */
export async function getValuesForAutoComplete(
    componentName: string,
    valueProvidedByUser: string,
    user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>,
    chatApp: ChatApp
): Promise<unknown[] | undefined> {
    // Example: Return filtered account list based on search
    if (componentName === 'accountSelector') {
        if (!valueProvidedByUser || valueProvidedByUser.trim() === '') {
            // Return first 20 accounts
            return getAccounts()
                .slice(0, 20)
                .map((account) => ({
                    value: account.id,
                    label: account.name,
                    secondaryLabel: account.type
                }));
        }

        // Return filtered results
        const searchTerm = valueProvidedByUser.toLowerCase();
        return getAccounts()
            .filter((account) => account.id.toLowerCase().includes(searchTerm) || account.name.toLowerCase().includes(searchTerm))
            .slice(0, 20)
            .map((account) => ({
                value: account.id,
                label: account.name,
                secondaryLabel: account.type
            }));
    }

    return undefined;
}

/**
 * Process posted override data
 */
export async function userOverrideDataPostedFromDialog(
    user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>,
    chatApp: ChatApp,
    overrideData: unknown | undefined
): Promise<RecordOrUndef> {
    if (!overrideData) {
        return undefined; // Clear overrides
    }

    const data = overrideData as any;

    // Transform UI data to storage format
    // MUST return Record<string, string | undefined>
    return {
        accountId: data.accountId,
        accountName: data.accountName,
        accountType: data.accountType
        // Add any other fields your application needs
    };
}

// Helper function - replace with your actual data source
function getAccounts() {
    // In real implementation, fetch from your database/API
    return [
        { id: 'acct-001', name: 'Acme Corp', type: 'enterprise' },
        { id: 'acct-002', name: 'Beta Industries', type: 'standard' }
        // ... more accounts
    ];
}

<script lang="ts">
    import Combobox from '$ui/pika/combobox/combobox.svelte';
    import type { UserOverrideDataCommand } from 'pika-shared/types/chatbot/chatbot-types';

    // Required props interface
    interface Props {
        isValid: boolean | string;
        initialDataFromServer: unknown | undefined;
        disabled: boolean;
        getValuesForAutoComplete: (componentName: string, valueProvidedByUser: string) => Promise<void>;
        valuesForAutoComplete: Record<string, unknown[] | undefined>;
        userDataOverrideOperationInProgress: Record<UserOverrideDataCommand, boolean>;
        dataChanged: boolean;
    }

    let {
        isValid = $bindable(),
        dataChanged = $bindable(),
        initialDataFromServer,
        getValuesForAutoComplete,
        valuesForAutoComplete,
        userDataOverrideOperationInProgress,
        disabled,
    }: Props = $props();

    // Component state
    let selectedAccount = $state(initialDataFromServer as Account | undefined);
    let loading = $derived(userDataOverrideOperationInProgress['getValuesForAutoComplete']);

    const accountOptions = $derived.by(() => {
        return (valuesForAutoComplete?.['accountSelector'] ?? []) as Account[];
    });

    // Required methods
    export function reset() {
        selectedAccount = initialDataFromServer as Account | undefined;
        dataChanged = false;
        isValid = false;
    }

    export async function getDataToPostToServer(): Promise<unknown | undefined> {
        return selectedAccount;
    }

    // Event handlers
    function valueChanged(value: Account) {
        selectedAccount = value;

        // Check if data has changed
        const initialAccount = initialDataFromServer as Account | undefined;
        const hasChanged = !areAccountsEqual(initialAccount, selectedAccount);

        dataChanged = hasChanged;
        isValid = selectedAccount ? true : 'Please select an account';
    }

    async function onSearchValueChanged(value: string) {
        await getValuesForAutoComplete('accountSelector', value);
    }

    function areAccountsEqual(a: Account | undefined, b: Account | undefined): boolean {
        if (!a && !b) return true;
        if (!a || !b) return false;
        return a.accountId === b.accountId &&
               a.accountName === b.accountName &&
               a.accountType === b.accountType;
    }

    interface Account {
        accountId: string;
        accountName: string;
        accountType: string;
    }
</script>

<div class="space-y-4">
    <div class="text-sm text-muted-foreground">
        Select the account context for this chat session:
    </div>

    <Combobox
        value={selectedAccount}
        mapping={{
            value: (value) => value.accountId,
            label: (value) => value.accountName,
            secondaryLabel: (value) => value.accountType,
        }}
        options={accountOptions}
        onValueChanged={valueChanged}
        {onSearchValueChanged}
        {loading}
        optionTypeName="account"
        optionTypeNamePlural="accounts"
        widthClasses="w-full"
        showValueInListEntries={true}
        minCharactersForSearch={1}
        {disabled}
    />

    {#if typeof isValid === 'string'}
        <div class="text-sm text-red-500">{isValid}</div>
    {/if}
</div>

export function getValuesForAutoComplete(
    componentName: string,
    valueProvidedByUser: string,
    user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>,
    chatApp: ChatApp
): unknown[] | undefined {
    switch (componentName) {
        case 'accountSelector':
            return getAccountOptions(valueProvidedByUser);
        case 'departmentSelector':
            return getDepartmentOptions(valueProvidedByUser);
        case 'regionSelector':
            return getRegionOptions(valueProvidedByUser);
        default:
            return undefined;
    }
}

export function userOverrideDataPostedFromDialog(user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>, chatApp: ChatApp, overrideData: unknown | undefined): RecordOrUndef {
    if (!overrideData) return undefined;

    const data = overrideData as ComplexOverrideData;

    // Flatten complex data to string key-value pairs
    return {
        accountId: data.account.id,
        accountName: data.account.name,
        accountType: data.account.type,
        department: data.department,
        region: data.location.region,
        permissions: JSON.stringify(data.permissions) // Store complex data as JSON
    };
}

export async function getValuesForAutoComplete(
    componentName: string,
    valueProvidedByUser: string,
    user: AuthenticatedUser<RecordOrUndef, RecordOrUndef>,
    chatApp: ChatApp
): Promise<unknown[] | undefined> {
    if (componentName === 'customerSelector') {
        try {
            const response = await fetch(`/api/customers/search?q=${valueProvidedByUser}`, {
                headers: {
                    Authorization: `Bearer ${getApiToken()}`
                }
            });

            const customers = await response.json();
            return customers.map((customer) => ({
                value: customer.id,
                label: customer.name,
                secondaryLabel: customer.type
            }));
        } catch (error) {
            console.error('Failed to fetch customers:', error);
            return [];
        }
    }

    return undefined;
}

export class PikaChatCustomStackDefs {
    public static addStackResourcesBeforeWeCreateThePikaChatConstruct(scope: PikaChatStack): void {
        // Add permissions for API Gateway calls
        scope.stack.webapp.taskRole.addToPolicy(
            new iam.PolicyStatement({
                actions: ['execute-api:Invoke'],
                resources: ['arn:aws:execute-api:us-east-1:123456789012:api-id/stage/GET/customers']
            })
        );

        // Add permissions for DynamoDB access
        scope.stack.webapp.taskRole.addToPolicy(
            new iam.PolicyStatement({
                actions: ['dynamodb:Query', 'dynamodb:GetItem'],
                resources: ['arn:aws:dynamodb:us-east-1:123456789012:table/customers']
            })
        );
    }
}