Base Settings

import { type InkeepBaseSettings } from "@inkeep/cxkit-types";

// Simple configuration
const baseSettings: InkeepBaseSettings = {
  // Core authentication and branding
  env: "production",
  apiKey: "YOUR_API_KEY",
  organizationDisplayName: "Your Organization",
  primaryBrandColor: "#26D6FF", // See "Theme Customization" section for advanced theming options
  shouldBypassCaptcha: false, // Only enable with server-side API keys

  // User identification - See "User Properties" section for all options
  userProperties: {
    id: "user-id",
    email: "user@example.com",
    name: "User Name",
  },

  // Optional: Analytics configuration - See "Analytics Configuration" section
  privacyPreferences: {
    optOutAnalyticalCookies: false,
    optOutAllAnalytics: false,
  },

  // Optional: Color mode sync - See "Color Mode" section for advanced options
  colorMode: {
    sync: {
      target: document.documentElement,
      attributes: ["data-theme"],
      isDarkMode: (attrs) => attrs["data-theme"] === "dark",
    },
  },
};

// Advanced configuration with enterprise features
const baseSettings: InkeepBaseSettings = {
  env: process.env.NODE_ENV,
  apiKey: process.env.INKEEP_API_KEY,
  organizationDisplayName: "Enterprise Corp",
  primaryBrandColor: "#0A2463",
  aiApiBaseUrl: "https://api.enterprise.com/inkeep",
  analyticsApiBaseUrl: "https://analytics.enterprise.com",
  userProperties: {
    id: getUserId(),
    email: getUserEmail(),
    name: getUserName(),
    role: getUserRole(),
    team: getCurrentTeam(),
  },
  userAuthToken: getAuthToken(),
  analyticsProperties: {
    url: window.location.href,
  },
  tags: ["enterprise", "self-hosted", getCurrentRegion()],
};

interface UserProperties {
  /**
   * The user ID.
   */
  id?: string;
  /**
   * The user email.
   */
  email?: string;
  /**
   * The user name.
   */
  name?: string;
  /**
   * The user cohorts.
   */
  cohorts?: string[];
}

// Basic user configuration
const baseSettings: InkeepBaseSettings = {
  userProperties: {
    id: "user-123",
    email: "user@example.com",
    name: "John Doe",
  },
};

// Advanced user configuration
const baseSettings: InkeepBaseSettings = {
  userProperties: {
    id: "user-456",
    email: "jane@enterprise.com",
    name: "Jane Smith",
    cohorts: ["admin", "engineering"],
  },
  userAuthToken: "jwt-token-here",
};

interface PrivacyPreferences {
  /**
   * Whether to opt out of analytical cookies
   */
  optOutAnalyticalCookies?: boolean;
  /**
   * Whether to opt out of functional cookies
   */
  optOutFunctionalCookies?: boolean;
  /**
   * Whether to opt out of all analytics. When true, conversations and event data are not sent to Inkeep.
   */
  optOutAllAnalytics?: boolean;
}

// Basic analytics configuration
const baseSettings: InkeepBaseSettings = {
  // ...
  privacyPreferences: {
    optOutAnalyticalCookies: false,
    optOutFunctionalCookies: false,
    optOutAllAnalytics: false,
  },
};

// Privacy-focused configuration
const baseSettings: InkeepBaseSettings = {
  // ...
  privacyPreferences: {
    optOutAnalyticalCookies: true,
    optOutFunctionalCookies: true,
    optOutAllAnalytics: true,
  },
};

type InkeepCallbackEvent = InkeepEventWithCommon & {
  userProperties: UserProperties;
  eventName: string;
  properties: {
    componentType?: any;
    tags?: string[];
    [key: string]: any;
  };
};

// Basic event handling
const baseSettings: InkeepBaseSettings = {
  // ...
  onEvent: (event) => {
    console.log("Event:", event.eventName, event.properties);
    analytics.track(event.eventName, event.properties);
  },
};

interface ColorMode {
  // ...
  sync?: {
    target: HTMLElement | string;
    attributes: string[];
    isDarkMode: (attributes: Record<string, string | null>) => boolean;
    onChange?: (colorMode: string) => void;
  };
}

// Basic color mode configuration
const baseSettings: InkeepBaseSettings = {
  // ...
  colorMode: {
    sync: {
      target: document.documentElement,
      attributes: ["data-theme"],
      isDarkMode: (attrs) => attrs["data-theme"] === "dark",
    },
  },
};

// Advanced color mode configuration
const advancedSettings: InkeepBaseSettings = {
  // ...
  colorMode: {
    sync: {
      target: document.documentElement,
      attributes: ["data-theme", "class"],
      isDarkMode: (attrs) => {
        const preference = localStorage.getItem("theme");
        return (
          preference === "dark" ||
          attrs["data-theme"] === "dark" ||
          attrs["class"]?.includes("dark") ||
          window.matchMedia("(prefers-color-scheme: dark)").matches
        );
      },
      onChange: (mode) => {
        localStorage.setItem("theme", mode);
        updateThemeColor(mode);
      },
    },
  },
};

interface UserTheme {
  // ...
  syntaxHighlighter?: {
    lightTheme?: any;
    darkTheme?: any;
  };
  primaryColors?: PrimaryColors;
  varsClassName?: string;
  styles?: Array<{
    key: string;
    type: "link" | "style";
    value: string;
  }>;
  disableLoadingDefaultFont?: boolean;
}

// Basic theme configuration
const baseSettings: InkeepBaseSettings = {
  // ...
  theme: {
    primaryColors: {
      medium: "#26D6FF",
      light: "#60a5fa",
      strong: "#1d4ed8",
    },
    styles: [
      {
        key: "chat-container",
        type: "style",
        value: ".ikp-chat { border-radius: 8px; }",
      },
    ],
  },
};

// Advanced theme configuration
const baseSettings: InkeepBaseSettings = {
  // ...
  theme: {
    primaryColors: {
      mediumSubtle: "rgba(38, 214, 255, 0.3)",
      strong: "#1d4ed8",
      stronger: "#1e40af",
    },
    syntaxHighlighter: {
      lightTheme: themes.github,
      darkTheme: themes.dracula,
    },
    styles: [
      {
        key: "google-fonts",
        type: "link",
        value:
          "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
      },
      {
        key: "custom-theme",
        type: "style",
        value: `
          .ikp-chat {
            width: min(95vw, 600px);
            border-radius: clamp(8px, 2vw, 16px);
            background: var(--ikp-color-background);
            @media (max-width: 768px) {
              width: 100vw;
              border-radius: 0;
            }
          }
        `,
      },
    ],
  },
};

type InkeepCustomIcon =
  | {
      builtIn: AvailableBuiltInIcons;
    }
  | {
      custom: string; // url of svg or png of icon
    };

type CustomIconMap = {
  [K in keyof CustomIcons]?: InkeepCustomIcon;
};

const baseSettings: InkeepBaseSettings = {
  env: "production",
  apiKey: "YOUR_API_KEY",
  organizationDisplayName: "Enterprise Corp",
  primaryBrandColor: "#26D6FF",
  customIcons: {
    search: {
      builtIn: "LuBookOpen",
    },
    close: {
      custom: "https://assets.enterprise.com/icons/close.svg",
    },
    chat: {
      builtIn: "LuMessageSquare",
    },
  },
};

type URLParametersConfig = {
  urlQueryParamsToAppend?: {
    [key: string]: string | number | boolean;
  };
};

// Basic URL parameters configuration
const baseSettings: InkeepBaseSettings = {
  urlQueryParamsToAppend: {
    utm_source: "widget",
    user_id: "123",
  },
};

// Advanced URL parameters configuration
const baseSettings: InkeepBaseSettings = {
  urlQueryParamsToAppend: {
    utm_source: window.location.hostname,
    utm_medium: "widget",
    user_id: getUserId(),
    team_id: getTeamId(),
    features: getEnabledFeatures().join(","),
    session: getSessionId(),
  },
};

export interface SearchAndChatFilters {
  attributes?: {
    [key: string]: any;
  };
}