InKeep: Add AI Embedded on Docs Homepage

content/docs/introduction.md

@@ -3,9 +3,7 @@ title: Neon documentation
 updatedOn: '2024-11-19T20:27:25.090Z'
 ---
 
-Neon is a serverless Postgres platform designed to help you build reliable and scalable applications faster. We separate compute and storage to offer modern developer features such as autoscaling, branching, point-in-time restore, and more. Get started today with our [generous free plan](https://console.neon.tech).
-
-<CTA title="Did you know?" description="Neon's database branching can help you integrate Postgres into your development workflow. Branch your data like code. <a href='/docs/get-started-with-neon/workflow-primer'>Read our primer</a> to learn&nbsp;how." isIntro></CTA>
+<InkeepEmbedded />
 
 ## Get started
 

package.json

@@ -113,7 +113,7 @@
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
-    "prettier": "^3.4.0",
+    "prettier": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "prisma": "^5.19.1",
     "shiki": "^1.1.1",

src/components/shared/content/content.jsx

@@ -27,6 +27,7 @@ import AnchorHeading from 'components/shared/anchor-heading';
 import CodeBlock from 'components/shared/code-block';
 import ComputeCalculator from 'components/shared/compute-calculator';
 import CtaBlock from 'components/shared/cta-block';
+import InkeepEmbedded from 'components/shared/inkeep-embedded';
 import Link from 'components/shared/link';
 import getCodeProps from 'lib/rehype-code-props';
 
@@ -143,6 +144,7 @@ const getComponents = (withoutAnchorHeading, isReleaseNote, isPostgres, isUseCas
   UseCaseContext,
   ComputeCalculator,
   SubscriptionForm,
+  InkeepEmbedded,
   ...sharedComponents,
 });
 

src/components/shared/inkeep-embedded/index.js

@@ -0,0 +1,3 @@
+import InkeepEmbedded from './inkeep-embedded';
+
+export default InkeepEmbedded;

src/components/shared/inkeep-embedded/inkeep-embedded.jsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { InkeepEmbeddedChat } from '@inkeep/uikit';
+
+import { aiChatSettings, baseSettings } from 'lib/inkeep-settings';
+
+const inkeepEmbeddedChatProps = {
+  baseSettings: {
+    ...baseSettings,
+    theme: {
+      components: {
+        AIChatPageWrapper: {
+          defaultProps: {
+            size: 'expand', // 'shrink-vertically' 'expand', 'default', 'full-viewport'
+            variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow'
+          },
+        },
+      },
+      tokens: {
+        fonts: {
+          body: 'var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+        },
+        colors: {
+          'gray.800': '#000',
+        },
+      },
+    },
+  },
+  aiChatSettings: {
+    ...aiChatSettings,
+    introMessage:
+      "<span style='font-size:16px;'>Neon is a serverless Postgres platform designed to help you build reliable and scalable applications faster. We separate compute and storage to offer modern developer features such as autoscaling, branching, point-in-time restore, and more.<br/><br/> How can I help you today?</span>",
+  },
+};
+
+const InkeepEmbedded = () => (
+  <div>
+    <InkeepEmbeddedChat {...inkeepEmbeddedChatProps} />
+  </div>
+);
+
+export default InkeepEmbedded;

src/lib/inkeep-settings.js

@@ -29,6 +29,8 @@ const aiChatSettings = {
   botAvatarSrcUrl: '/inkeep/images/example.svg',
   botAvatarDarkSrcUrl: '/inkeep/images/example.svg',
   userAvatarSrcUrl: '/inkeep/images/user.svg',
+  isChatSharingEnabled: true,
+  shareChatUrlBasePath: 'https://neon.tech/docs/introduction',
 };
 
 export { baseSettings, searchSettings, aiChatSettings };