feat: add new AI Chat mode for docs

neondatabase · Dec 17, 2024 · 2d6621d · 2d6621d
1 parent 08f9e03
commit 2d6621d
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 93 deletions.
diff --git a/content/docs/introduction.md b/content/docs/introduction.md
@@ -3,7 +3,9 @@ title: Neon documentation
 updatedOn: '2024-11-28T11:50:49.805Z'
 ---
 
-<InkeepEmbedded />
+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>
 
 ## Get started
 

diff --git a/public/inkeep/css/base.css b/public/inkeep/css/base.css
@@ -0,0 +1,55 @@
+.ikp-ai-chat-footer__footer {
+  align-items: center;
+}
+
+.ikp-tagline {
+  align-items: center;
+  position: relative;
+}
+
+.ikp-tagline > div {
+  display: none;
+}
+
+.ikp-tagline > a > div:before {
+  content: 'Powered by';
+  font-weight: normal;
+}
+
+.ikp-tagline:after {
+  content: '';
+  margin-left: 1.5rem;
+  width: 64px;
+  height: 18px;
+  background: url('/inkeep/images/neon-logo.svg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: grayscale(1);
+}
+
+.ikp-tagline:before {
+  content: '&';
+  position: absolute;
+  right: 64px;
+  color: #889096;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+[data-theme='dark'] {
+  .ikp-tagline:before {
+    color: #ffffff7a;
+  }
+
+  .ikp-tagline:after {
+    background: url('/inkeep/images/neon-white-logo.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: grayscale(1);
+    opacity: 0.48;
+  }
+}
diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css
@@ -0,0 +1,13 @@
+.ikp-message-header{
+  display: none;
+}
+
+.chat-title {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 36px;
+  font-weight: 500;
+  line-height: 125%;
+  letter-spacing: -0.04em;
+}
diff --git a/public/inkeep/css/inkeep-chat.css → public/inkeep/css/modal.css b/public/inkeep/css/inkeep-chat.css → public/inkeep/css/modal.css
@@ -1,6 +1,7 @@
 :where(.inkeep-widget-vars){
   font-family: inherit;
 }
+
 .ikp-modal__backdrop {
   backdrop-filter: blur(0px);
   background: rgba(12, 13, 13, 0.3);
@@ -10,6 +11,7 @@
   padding: 0;
   width: 28px;
   margin-right: 12px;
+  display: none;
 }
 
 .ikp-message-header__avatar-box{
@@ -228,48 +230,6 @@
   opacity: 0.9;
 }
 
-.ikp-ai-chat-footer__footer {
-  align-items: center;
-}
-
-.ikp-tagline {
-  align-items: center;
-  position: relative;
-}
-
-.ikp-tagline > div {
-  display: none;
-}
-
-.ikp-tagline > a > div:before {
-  content: 'Powered by';
-  font-weight: normal;
-}
-
-
-.ikp-tagline:after {
-  content: '';
-  margin-left: 1.5rem;
-  width: 64px;
-  height: 18px;
-  background: url('/inkeep/images/neon-logo.svg');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  filter: grayscale(1);
-}
-
-.ikp-tagline:before {
-  content: '&';
-  position: absolute;
-  right: 64px;
-  color: #889096;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
 [data-theme='dark'] {
   .ikp-modal__backdrop {
     background: rgba(12, 13, 13, 0.8);
@@ -336,19 +296,6 @@
   .ikp-modal__closeTrigger{
     opacity: 1;
   }
-
-  .ikp-tagline:before {
-    color: #ffffff7a;
-  }
-
-  .ikp-tagline:after {
-    background: url('/inkeep/images/neon-white-logo.svg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    filter: grayscale(1);
-    opacity: 0.48;
-  }
 }
 
 @media (max-width: 1024px) {

diff --git a/src/app/docs/chat/page.jsx b/src/app/docs/chat/page.jsx
@@ -0,0 +1,16 @@
+import InkeepEmbedded from 'components/shared/inkeep-embedded';
+import SEO_DATA from 'constants/seo-data';
+import getMetadata from 'utils/get-metadata';
+
+export const metadata = getMetadata(SEO_DATA.docsChat);
+
+const DocsChat = () => (
+  <div className="col-span-12 flex h-[calc(100vh-215px)] w-full items-center justify-center">
+    <h1 className="sr-only">Neon AI Chat</h1>
+    <div className="w-[640px]">
+      <InkeepEmbedded />
+    </div>
+  </div>
+);
+
+export default DocsChat;
diff --git a/src/app/docs/layout.jsx b/src/app/docs/layout.jsx
@@ -34,7 +34,7 @@ const NeonDocsLayout = async ({ children }) => {
           basePath={DOCS_BASE_PATH}
         />
 
-        <div className="-ml-[350px] w-full 3xl:ml-0">
+        <div className="w-full">
           <Container
             className="grid w-full flex-1 grid-cols-12 gap-x-8 pb-20 pt-9 xl:block lg:pt-4"
             size="1408"

diff --git a/src/components/shared/header/header.jsx b/src/components/shared/header/header.jsx
@@ -210,7 +210,7 @@ const Header = async ({
       >
         {isDocPage ? (
           <div className="flex">
-            <span className="hidden w-[350px] shrink-0 3xl:block xl:w-[302px] lg:hidden" />
+            <span className="w-[350px] shrink-0 xl:w-[302px] lg:hidden" />
             <Container
               className="z-10 grid w-full grid-cols-12 items-center gap-x-8 xl:flex xl:justify-between xl:gap-x-5 lg:pr-32 md:pr-24"
               size="1408"

diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx
@@ -1,42 +1,67 @@
 'use client';
 
 import { InkeepEmbeddedChat } from '@inkeep/uikit';
+import { useTheme } from 'next-themes';
+import { PropTypes } from 'prop-types';
 
 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'
-          },
-        },
+const InkeepEmbedded = ({ isDarkTheme = false }) => {
+  const { theme, systemTheme } = useTheme();
+
+  let themeMode;
+  switch (true) {
+    case isDarkTheme:
+      themeMode = 'dark';
+      break;
+    case theme === 'system':
+      themeMode = systemTheme;
+      break;
+    default:
+      themeMode = theme;
+  }
+
+  const inkeepEmbeddedChatProps = {
+    baseSettings: {
+      ...baseSettings,
+      colorMode: {
+        forcedColorMode: themeMode,
       },
-      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"',
+      theme: {
+        stylesheetUrls: ['/inkeep/css/base.css', '/inkeep/css/chat.css'],
+        components: {
+          AIChatPageWrapper: {
+            defaultProps: {
+              size: 'expand', // 'shrink-vertically' 'expand', 'default', 'full-viewport'
+              variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow'
+            },
+          },
         },
-        colors: {
-          'gray.800': '#000',
+        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: {
+            'grayDark.900': '#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>",
-  },
+    aiChatSettings: {
+      ...aiChatSettings,
+      introMessage: "<span class='chat-title'>What do you want to know?</span>",
+    },
+  };
+
+  return (
+    <div>
+      <InkeepEmbeddedChat {...inkeepEmbeddedChatProps} />
+    </div>
+  );
 };
 
-const InkeepEmbedded = () => (
-  <div>
-    <InkeepEmbeddedChat {...inkeepEmbeddedChatProps} />
-  </div>
-);
+InkeepEmbedded.propTypes = {
+  isDarkTheme: PropTypes.bool,
+};
 
 export default InkeepEmbedded;
diff --git a/src/components/shared/inkeep-trigger/inkeep-trigger.jsx b/src/components/shared/inkeep-trigger/inkeep-trigger.jsx
@@ -61,12 +61,14 @@ const InkeepTrigger = ({
   const inkeepCustomTriggerProps = {
     isOpen,
     onClose: handleClose,
-    stylesheetUrls: ['/inkeep/css/inkeep-chat.css'],
     baseSettings: {
       ...baseSettings,
       colorMode: {
         forcedColorMode: themeMode,
       },
+      theme: {
+        stylesheetUrls: ['/inkeep/css/base.css', '/inkeep/css/modal.css'],
+      },
     },
     modalSettings: {
       defaultView: defaultModalView,

diff --git a/src/constants/links.js b/src/constants/links.js
@@ -30,6 +30,7 @@ export default {
   // Docs
   docs: '/docs',
   docsHome: '/docs/introduction',
+  docsChat: '/docs/chat',
   ai: '/docs/ai/ai-intro',
   api: '/docs/reference/api-reference',
   authorize: '/docs/guides/neon-authorize',

diff --git a/src/constants/seo-data.js b/src/constants/seo-data.js
@@ -9,13 +9,6 @@ export default {
       'The database you love, on a serverless platform designed to help you build reliable and scalable applications faster.',
     pathname: '',
   },
-  ai: {
-    title: 'Powering next gen AI apps with Postgres — Neon',
-    description:
-      'Scale your transformative LLM applications to millions of users with vector indexes and similarity search in Neon.',
-    imagePath: '/images/social-previews/ai.jpg',
-    pathname: LINKS.ai,
-  },
   awsIsrael: {
     title: 'AWS Launches in Israel — Neon',
     description: 'Neon is delighted to support the 2023 launch of AWS in Israel.',
@@ -80,6 +73,11 @@ export default {
     imagePath: '/images/social-previews/developer-days-1.jpg',
     pathname: LINKS.developerDays1,
   },
+  docsChat: {
+    title: 'Neon AI Chat',
+    description: 'AI assistant trained on documentation, help articles, and other content',
+    pathname: LINKS.docsChat,
+  },
   enterprise: {
     title: 'Neon for Enterprises: Postgres Fleets - Neon',
     description: