feat: GROW-272 - add inkeep to use-cases (demo) page

package.json

@@ -27,6 +27,7 @@
     "@emotion/styled": "^11.11.0",
     "@fingerprintjs/fingerprintjs-pro-react": "^2.6.2",
     "@fingerprintjs/fingerprintjs-pro-server-api": "^5.0.0",
+    "@inkeep/uikit": "^0.3.16",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
     "@radix-ui/react-accordion": "^1.1.2",

src/app/inkeep/chat-button/inkeep-chat-button.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { InkeepChatButtonProps } from '@inkeep/uikit';
+import useInkeepSettings from '../useInkeepSettings';
+
+const ChatButton = dynamic(() => import('@inkeep/uikit').then((mod) => mod.InkeepChatButton), {
+  ssr: false,
+});
+
+function InkeepChatButton() {
+  const { baseSettings, aiChatSettings, searchSettings, modalSettings } = useInkeepSettings();
+
+  const chatButtonProps: InkeepChatButtonProps = {
+    baseSettings,
+    aiChatSettings,
+    searchSettings,
+    modalSettings,
+  };
+
+  return <ChatButton {...chatButtonProps} />;
+}
+
+export default InkeepChatButton;

src/app/inkeep/useInkeepSettings.ts

@@ -0,0 +1,74 @@
+import type {
+  InkeepAIChatSettings,
+  InkeepSearchSettings,
+  InkeepBaseSettings,
+  InkeepModalSettings,
+} from '@inkeep/uikit';
+import { AIChatDisclaimerSettings } from '@inkeep/uikit';
+
+type InkeepSharedSettings = {
+  baseSettings: InkeepBaseSettings;
+  aiChatSettings: InkeepAIChatSettings;
+  searchSettings: InkeepSearchSettings;
+  modalSettings: InkeepModalSettings;
+};
+
+const useInkeepSettings = (): InkeepSharedSettings => {
+  const baseSettings: InkeepBaseSettings = {
+    apiKey: '64fc830c4e4bb4b94990b4a21712e89d79a7a6770efb4043',
+    integrationId: 'cm2kpiuzn04o2uk7k2mwkdy3n',
+    organizationId: 'org_d0VDri411QUR4Xi7',
+    primaryBrandColor: '#F04405',
+    //logEventCallback: customAnalyticsCallback,
+  };
+
+  const disclaimerSettings: AIChatDisclaimerSettings = {
+    isDisclaimerEnabled: true,
+    disclaimerLabel: 'Information',
+    disclaimerTooltip:
+      'Powered by our friends at Inkeep, this AI assistant uses information from our documentation and website. Please do not provide sensitive or personal information. AI answers are not guaranteed to be accurate in all cases. For complex issues, consult our official documentation or contact support.',
+  };
+
+  const modalSettings: InkeepModalSettings = {};
+
+  const searchSettings: InkeepSearchSettings = {};
+
+  const aiChatSettings: InkeepAIChatSettings = {
+    chatSubjectName: 'Fingerprint',
+    botAvatarSrcUrl: 'https://fingerprint.com/img/uploads/fpjs-small-logo-for-email.png',
+    disclaimerSettings: disclaimerSettings,
+    getHelpCallToActions: [
+      {
+        name: 'Contact support',
+        url: 'https://fingerprint.com/support/',
+        icon: {
+          builtIn: 'IoChatbubblesOutline',
+        },
+      },
+      {
+        name: 'GitHub',
+        url: 'https://github.com/fingerprintjs',
+        icon: {
+          builtIn: 'FaGithub',
+        },
+      },
+      {
+        name: 'Discord',
+        url: 'https://discord.gg/ad6R2ttHVX',
+        icon: {
+          builtIn: 'FaDiscord',
+        },
+      },
+    ],
+    quickQuestions: [
+      'How to implement a webhook handler on identification events?',
+      'How to track visitors across multiple domains?',
+      'Fingerprint Identification vs FingerprintJS?',
+      'How to proxy requests through my own domain?',
+    ],
+  };
+
+  return { baseSettings, aiChatSettings, searchSettings, modalSettings };
+};
+
+export default useInkeepSettings;

src/app/page.tsx

@@ -8,6 +8,7 @@ import { TEST_IDS } from '../client/testIDs';
 import { Fragment } from 'react';
 import { Metadata } from 'next';
 import { generateMetadata } from '../client/seo';
+import InkeepChatButton from './inkeep/chat-button/inkeep-chat-button';
 
 export const metadata: Metadata = generateMetadata({
   title: 'Fingerprint Use Cases | Discover Device Intelligence Use Cases',
@@ -58,6 +59,7 @@ export default function Index() {
           </div>
         ))}
       </div>
+      <InkeepChatButton />
     </>
   );
 }