From 6ded564ee5d14b3e8de78ffbc83ccba5cad15411 Mon Sep 17 00:00:00 2001 From: Andy Hattemer Date: Tue, 26 Nov 2024 17:24:13 -0500 Subject: [PATCH 01/27] feat: add ai to docs home --- content/docs/introduction.md | 4 +- src/components/shared/content/content.jsx | 2 + .../shared/inkeep-embedded/index.js | 3 ++ .../inkeep-embedded/inkeep-embedded.jsx | 42 +++++++++++++++++++ src/lib/inkeep-settings.js | 2 + 5 files changed, 50 insertions(+), 3 deletions(-) create mode 100644 src/components/shared/inkeep-embedded/index.js create mode 100644 src/components/shared/inkeep-embedded/inkeep-embedded.jsx diff --git a/content/docs/introduction.md b/content/docs/introduction.md index c8a7d76a5e..3f02eed9e5 100644 --- a/content/docs/introduction.md +++ b/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). - - + ## Get started diff --git a/src/components/shared/content/content.jsx b/src/components/shared/content/content.jsx index e793f16f4a..0047aed64e 100644 --- a/src/components/shared/content/content.jsx +++ b/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, }); diff --git a/src/components/shared/inkeep-embedded/index.js b/src/components/shared/inkeep-embedded/index.js new file mode 100644 index 0000000000..f31bf52b5a --- /dev/null +++ b/src/components/shared/inkeep-embedded/index.js @@ -0,0 +1,3 @@ +import InkeepEmbedded from './inkeep-embedded'; + +export default InkeepEmbedded; diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx new file mode 100644 index 0000000000..f339b78dd8 --- /dev/null +++ b/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: + "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.

How can I help you today?", + }, +}; + +const InkeepEmbedded = () => ( +
+ +
+); + +export default InkeepEmbedded; diff --git a/src/lib/inkeep-settings.js b/src/lib/inkeep-settings.js index bd57862800..6597ff6954 100644 --- a/src/lib/inkeep-settings.js +++ b/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 }; From 76f1971041eb94917f031f0454d3e91ae6f4cade Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Tue, 26 Nov 2024 22:25:42 +0000 Subject: [PATCH 02/27] chore: format content markdown files with Prettier --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4c3068ab41..b372ab839a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -95,7 +95,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", @@ -20711,9 +20711,9 @@ } }, "node_modules/prettier": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.0.tgz", - "integrity": "sha512-/OXNZcLyWkfo13ofOW5M7SLh+k5pnIs07owXK2teFpnfaOEcycnSy7HQxldaVX1ZP/7Q8oO1eDuQJNwbomQq5Q==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz", + "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==", "dev": true, "license": "MIT", "bin": { diff --git a/package.json b/package.json index fa4bde09d2..82b32aecd5 100644 --- a/package.json +++ b/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", From 2d6621d7a0ee9203ec03bb8be1e581142ab8c9f2 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Tue, 17 Dec 2024 21:40:16 +0100 Subject: [PATCH 03/27] feat: add new AI Chat mode for docs --- content/docs/introduction.md | 4 +- public/inkeep/css/base.css | 55 +++++++++++++ public/inkeep/css/chat.css | 13 +++ .../inkeep/css/{inkeep-chat.css => modal.css} | 57 +------------ src/app/docs/chat/page.jsx | 16 ++++ src/app/docs/layout.jsx | 2 +- src/components/shared/header/header.jsx | 2 +- .../inkeep-embedded/inkeep-embedded.jsx | 79 ++++++++++++------- .../shared/inkeep-trigger/inkeep-trigger.jsx | 4 +- src/constants/links.js | 1 + src/constants/seo-data.js | 12 ++- 11 files changed, 152 insertions(+), 93 deletions(-) create mode 100644 public/inkeep/css/base.css create mode 100644 public/inkeep/css/chat.css rename public/inkeep/css/{inkeep-chat.css => modal.css} (86%) create mode 100644 src/app/docs/chat/page.jsx diff --git a/content/docs/introduction.md b/content/docs/introduction.md index dc3a3c59b1..102e41111f 100644 --- a/content/docs/introduction.md +++ b/content/docs/introduction.md @@ -3,7 +3,9 @@ title: Neon documentation updatedOn: '2024-11-28T11:50:49.805Z' --- - +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). + + ## Get started diff --git a/public/inkeep/css/base.css b/public/inkeep/css/base.css new file mode 100644 index 0000000000..e36359e6a0 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css new file mode 100644 index 0000000000..5def2ee4d2 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/public/inkeep/css/inkeep-chat.css b/public/inkeep/css/modal.css similarity index 86% rename from public/inkeep/css/inkeep-chat.css rename to public/inkeep/css/modal.css index 1fec3a06f1..c8d67a3681 100644 --- a/public/inkeep/css/inkeep-chat.css +++ b/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 new file mode 100644 index 0000000000..790be23c44 --- /dev/null +++ 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 = () => ( +
+

Neon AI Chat

+
+ +
+
+); + +export default DocsChat; diff --git a/src/app/docs/layout.jsx b/src/app/docs/layout.jsx index 19c221eab5..6487ddbdb9 100644 --- a/src/app/docs/layout.jsx +++ b/src/app/docs/layout.jsx @@ -34,7 +34,7 @@ const NeonDocsLayout = async ({ children }) => { basePath={DOCS_BASE_PATH} /> -
+
{isDocPage ? (
- + { + 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: - "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.

How can I help you today?", - }, + aiChatSettings: { + ...aiChatSettings, + introMessage: "What do you want to know?", + }, + }; + + return ( +
+ +
+ ); }; -const InkeepEmbedded = () => ( -
- -
-); +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 index d75f923896..ab464d01dd 100644 --- 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 index 1cf5177442..38a038bd97 100644 --- 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 index 4b88839182..09c9ba2785 100644 --- 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: From e138f7575fb2c7e1919ab3a165b054f6e0d78c2d Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Wed, 18 Dec 2024 10:02:08 +0100 Subject: [PATCH 04/27] test: hide inkeep chat to test vercel build issue --- src/app/docs/chat/page.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/docs/chat/page.jsx b/src/app/docs/chat/page.jsx index 790be23c44..8d4550f5fd 100644 --- a/src/app/docs/chat/page.jsx +++ b/src/app/docs/chat/page.jsx @@ -1,4 +1,4 @@ -import InkeepEmbedded from 'components/shared/inkeep-embedded'; +// import InkeepEmbedded from 'components/shared/inkeep-embedded'; import SEO_DATA from 'constants/seo-data'; import getMetadata from 'utils/get-metadata'; @@ -7,9 +7,7 @@ export const metadata = getMetadata(SEO_DATA.docsChat); const DocsChat = () => (

Neon AI Chat

-
- -
+
{/* */}
); From ad3f565cb5b495cbf4d771d9726d8cde6ff78679 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Wed, 18 Dec 2024 17:14:21 +0100 Subject: [PATCH 05/27] fix: return inkeep chat to docs chat page --- src/app/docs/chat/page.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/docs/chat/page.jsx b/src/app/docs/chat/page.jsx index 8d4550f5fd..790be23c44 100644 --- a/src/app/docs/chat/page.jsx +++ b/src/app/docs/chat/page.jsx @@ -1,4 +1,4 @@ -// import InkeepEmbedded from 'components/shared/inkeep-embedded'; +import InkeepEmbedded from 'components/shared/inkeep-embedded'; import SEO_DATA from 'constants/seo-data'; import getMetadata from 'utils/get-metadata'; @@ -7,7 +7,9 @@ export const metadata = getMetadata(SEO_DATA.docsChat); const DocsChat = () => (

Neon AI Chat

-
{/* */}
+
+ +
); From 7e24a96123d25c22a60ad4657e15055b0881ab94 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 00:34:03 +0100 Subject: [PATCH 06/27] fix: docs sidebar website links and back to docs link --- content/docs/sidebar.yaml | 6 +++--- src/components/pages/doc/menu/item/item.jsx | 7 ++++--- src/components/pages/doc/menu/menu.jsx | 16 +++++----------- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/content/docs/sidebar.yaml b/content/docs/sidebar.yaml index 60c3637ac2..83a579def9 100644 --- a/content/docs/sidebar.yaml +++ b/content/docs/sidebar.yaml @@ -561,7 +561,7 @@ - title: AWS Lambda slug: guides/aws-lambda - title: Azure Functions - slug: https://neon.tech/guides/query-postgres-azure-functions + slug: guides/query-postgres-azure-functions tag: new - title: Trigger serverless functions with Inngest slug: guides/trigger-serverless-functions @@ -776,7 +776,7 @@ tag: community icon: management - title: Find your template - slug: https://neon.tech/templates + slug: /templates icon: languages - title: Examples repo slug: https://github.com/neondatabase/examples @@ -784,7 +784,7 @@ - section: Postgres items: - title: PostgreSQL Tutorial - slug: https://neon.tech/postgresql/tutorial + slug: /postgresql/tutorial icon: get-started - title: Neon Postgres guides slug: postgresql/introduction diff --git a/src/components/pages/doc/menu/item/item.jsx b/src/components/pages/doc/menu/item/item.jsx index a57d0409b7..e1082ad328 100644 --- a/src/components/pages/doc/menu/item/item.jsx +++ b/src/components/pages/doc/menu/item/item.jsx @@ -24,7 +24,8 @@ const Item = ({ const pathname = usePathname(); const currentSlug = pathname.replace(basePath, ''); - const externalSlug = slug && slug.startsWith('http') ? slug : null; + const externalSlug = slug?.startsWith('http') ? slug : null; + const websiteSlug = slug?.startsWith('/') && `${process.env.NEXT_PUBLIC_DEFAULT_SITE_URL}${slug}`; const docSlug = root ? slug : `${basePath}${slug}/`; const LinkTag = slug ? Link : 'button'; @@ -46,8 +47,8 @@ const Item = ({ : 'font-normal text-gray-new-40 hover:text-black-new dark:text-gray-new-80 dark:hover:text-white' )} type={slug ? undefined : 'button'} - to={slug ? externalSlug || docSlug : undefined} - target={externalSlug ? '_blank' : '_self'} + to={slug ? externalSlug || websiteSlug || docSlug : undefined} + target={externalSlug || websiteSlug ? '_blank' : '_self'} icon={externalSlug && 'external'} onClick={handleClick} > diff --git a/src/components/pages/doc/menu/menu.jsx b/src/components/pages/doc/menu/menu.jsx index 61912ab222..cdf0269dff 100644 --- a/src/components/pages/doc/menu/menu.jsx +++ b/src/components/pages/doc/menu/menu.jsx @@ -4,7 +4,6 @@ import { useRef, useEffect } from 'react'; import Link from 'components/shared/link'; import { DOCS_BASE_PATH } from 'constants/docs'; -import LINKS from 'constants/links'; import ArrowBackIcon from 'icons/docs/sidebar/arrow-back.inline.svg'; import Item from './item'; @@ -107,11 +106,6 @@ const Menu = ({ const isLastActive = activeMenuList[lastDepth]?.title === title || (isRootMenu && lastDepth === 0); - const backLinkPath = basePath === DOCS_BASE_PATH ? '/' : LINKS.docs; - const docsHomePath = LINKS.docsHome; - const postgresHomePath = LINKS.postgresqltutorial; - const homePath = basePath === DOCS_BASE_PATH ? docsHomePath : postgresHomePath; - // update menu height and scroll menu to top useEffect(() => { if (isLastActive && menuRef.current && menuRef.current.scrollHeight > 0 && setMenuHeight) { @@ -129,7 +123,7 @@ const Menu = ({ return (
- {/* back to docs link */} - {isRootMenu && basePath !== DOCS_BASE_PATH && ( + {/* back to Docs link */} + {isRootMenu && customType && (
- {customType?.title || 'Back to Docs'} + Back to Docs
)} From 18824379a929f40dd265c05a0f16fdd6dcbb21b6 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 00:37:09 +0100 Subject: [PATCH 07/27] chore: remove strange data-attribute from postgres layout --- src/app/postgresql/layout.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/postgresql/layout.jsx b/src/app/postgresql/layout.jsx index e0b1d6d747..a53aefd3ff 100644 --- a/src/app/postgresql/layout.jsx +++ b/src/app/postgresql/layout.jsx @@ -26,10 +26,7 @@ const NeonPostgresLayout = async ({ children }) => { headerWithBorder hasThemesSupport > -
+
Date: Thu, 19 Dec 2024 00:55:00 +0100 Subject: [PATCH 08/27] feat: move docs search to sidebar, remove AI search --- public/inkeep/css/modal.css | 288 ------------------ src/app/postgresql/layout.jsx | 2 +- src/components/pages/doc/sidebar/sidebar.jsx | 77 +++-- src/components/shared/header/header.jsx | 7 +- .../inkeep-ai-button/images/sparks.inline.svg | 11 - .../shared/inkeep-ai-button/index.js | 3 - .../inkeep-ai-button/inkeep-ai-button.jsx | 37 --- .../shared/inkeep-trigger/inkeep-trigger.jsx | 10 +- src/components/shared/layout/layout.jsx | 3 - 9 files changed, 50 insertions(+), 388 deletions(-) delete mode 100644 src/components/shared/inkeep-ai-button/images/sparks.inline.svg delete mode 100644 src/components/shared/inkeep-ai-button/index.js delete mode 100644 src/components/shared/inkeep-ai-button/inkeep-ai-button.jsx diff --git a/public/inkeep/css/modal.css b/public/inkeep/css/modal.css index c8d67a3681..f5be98fac9 100644 --- a/public/inkeep/css/modal.css +++ b/public/inkeep/css/modal.css @@ -7,315 +7,27 @@ background: rgba(12, 13, 13, 0.3); } -.ikp-message-header{ - padding: 0; - width: 28px; - margin-right: 12px; - display: none; -} - -.ikp-message-header__avatar-box{ - width: 28px; - height: 28px; - border-radius: 100%; - background-color: rgba(0, 204, 136, 0.1); -} - -.ikp-message-header__avatar-user{ - display: flex!important; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - background: #E4E5E7; -} - .ikp-modal-widget__content{ - top: 140px; box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.06); border: 1px solid #E4E5E7; background: #FAFAFA; border-radius: 10px; } -.ikp-modal-widget__content .ikp-max-h_min\(85vh\,_900px\){ - max-height: min(calc(100vh - 200px),900px) -} - -.ikp-switch-to-search-button{ - display: none; -} - -.ikp-ai-chat-footer__content-wrapper{ - padding: 0 0 20px; - background-image: none; -} - -.ikp-chat-bubble__message-content-wrapper{ - padding-right: 0; - justify-content: flex-start; -} - -.ikp-chat-bubble__message-content-wrapper > .ikp-h_48px{ - height: 28px; - margin-bottom: 24px; -} -.ikp-chat-bubble__message-content-wrapper ol, -.ikp-chat-bubble__message-content-wrapper ul{ - padding-left: 20px; -} -.ikp-chat-bubble__message-content-wrapper > div{ - font-size: 16px; - color: #0C0D0D; -} - -.ikp-ai-chat-footer__content{ - padding: 0 20px; -} - -.ikp-ai-chat__message-box{ - box-shadow: none; - border-radius: 4px; - border: 1px solid #C9CBCF; - padding: 0; -} -.ikp-ai-chat__message-input{ - margin-left: 0; - padding: 8px 10px 0; - min-height: 40px; -} -.ikp-ai-chat__send-button:disabled{ - visibility: hidden; -} - -.ikp-ai-chat__message-box-wrapper{ - max-width: 100%; -} -.ikp-ai-chat__message-box{ - background-color: #fff; -} - -.ikp-ai-chat__toolbar-header{ - font-weight: 500; - font-size: 20px; - line-height: 1.125; - color: #0C0D0D; -} - -.ikp-message__divider-wrapper{ - display: none; -} -.ikp-messages__wrapper{ - font-size: 16px; -} -.ikp-messages__wrapper>div:first-child{ - padding: 0px; - -} -.ikp-messages__wrapper>div:first-child .ikp-message-header{ - display: none; -} -.ikp-messages__wrapper>div:first-child .ikp-message-header + div{ - padding-right: 0; -} -.ikp-messages__wrapper>div:first-child .ikp-message-header + div > div:first-child{ - display: none; -} -.ikp-messages__wrapper>div:first-child .ikp-message-header + div > div:last-child{ - margin-top: 0; -} - -.ikp-quick-question-button__wrapper::after { - display: none; -} - -.ikp-quick-question-button{ - position: relative; - padding: 8px 10px; - border-radius: 4px; - border: none; - background: none; - justify-content: flex-start; - color: #0C0D0D; - font-size: 16px; -} -.ikp-quick-question-button:hover{ - background: rgba(36, 38, 40, 0.06); -} -.ikp-quick-question-button::before{ - content: ''; - flex-shrink: 1; - width: 28px; - height: 28px; - border-radius: 100%; - background-color: rgba(0, 204, 136, 0.1); - margin-right: 12px; -} -.ikp-quick-question-button::after{ - content: ''; - position: absolute; - top: 14px; - left: 16px; - width: 16px; - height: 16px; - background: url('/inkeep/images/example.svg') no-repeat; -} -.ikp-quick-question-button__highlight{ - display: none; -} - -.ikp-quick-questions__label{ - margin-top: 6px; - margin-bottom: 8px; - padding-left: 20px; - font-size: 16px; - color: #797D86; - text-transform: none; - letter-spacing: 0; - font-weight: normal; - - & + div{ - flex-direction: column; - gap: 0; - margin: 0px 10px; - - &>div{ - margin-right: 0; - margin-bottom: 0; - - &:last-child{ - margin-bottom: 24px; - } - } - } -} - -.ikp-chat-bubble__wrapper{ - padding: 0px; -} -.ikp-chat-bubble__user-message, -.ikp-chat-bubble__bot-message{ - padding: 10px 40px 10px 20px; -} - -.ikp-chat-bubble__user-message{ - background: rgba(36, 38, 40, 0.04); - color: #797D86; -} - -.ikp-chat-bubble__user-message-content{ - margin-bottom: 0; -} - -.ikp-ai-chat__header, -.ikp-ai-chat-footer, -.ikp-ai-chat__scrollable-page-content{ - background: #FAFAFA; -} -.ikp-ai-chat__scrollable-page-content{ - padding-top: 18px; -} - -.ikp-ai-chat__header::after{ - color: #FAFAFA; -} -.ikp-ai-chat__header-toolbar{ - padding: 18px 20px 0px; -} - -.ikp-ai-chat-footer__content-wrapper::before{ - background: linear-gradient(180deg, transparent 0%, #FAFAFA 100%); -} -.ikp-modal__closeTrigger{ - opacity: 0.9; -} - [data-theme='dark'] { .ikp-modal__backdrop { background: rgba(12, 13, 13, 0.8); } - .ikp-ai-chat__header, - .ikp-ai-chat-footer, - .ikp-ai-chat__scrollable-page-content{ - background: #131415; - } - .ikp-ai-chat__header::after{ - color: #131415; - } - .ikp-ai-chat-footer__content-wrapper::before{ - background: linear-gradient(180deg, transparent 0%, #131415 100%); - } - .ikp-ai-chat__toolbar-header{ - color: #fff; - } - .ikp-modal-widget__content{ box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.5); border: 1px solid #303236; background: #131415; } - - .ikp-message-header__avatar-box{ - background-color: rgba(0, 229, 153, 0.1); - } - .ikp-message-header__avatar-user{ - background-color: #242628; - } - .ikp-chat-bubble__user-message{ - background: rgba(36, 38, 40, 0.4); - } - .ikp-chat-bubble__message-content-wrapper > div{ - color: #fff; - } - .ikp-chat-bubble__message-content-wrapper > div .ikp-chat-bubble__user-message-content{ - color: #94979E; - } - .ikp-quick-questions__label{ - color: #797D86; - } - - .ikp-quick-question-button{ - color: #fff; - } - .ikp-quick-question-button:hover{ - background: rgba(36, 38, 40, 0.6); - } - - .ikp-quick-question-button::before { - background: rgba(0, 229, 153, 0.1); - } - - .ikp-ai-chat__message-box{ - background-color: #0C0D0D; - } - - .ikp-ai-chat__message-box{ - border: 1px solid #303236; - } - .ikp-modal__closeTrigger{ - opacity: 1; - } -} - -@media (max-width: 1024px) { - .ikp-modal-widget__content{ - top: 100px; - } - - .ikp-modal-widget__content .ikp-max-h_min\(85vh\,_900px\){ - max-height: min(calc(100vh - 192px),900px) - } } @media (max-width: 528px) { - .ikp-modal-widget__content{ - border-radius: 0px; - } .ikp-modal__closeTrigger:hover{ background: transparent; } - .ikp-modal-widget__content{ - top: 0px; - } } \ No newline at end of file diff --git a/src/app/postgresql/layout.jsx b/src/app/postgresql/layout.jsx index a53aefd3ff..89d5fc8ec0 100644 --- a/src/app/postgresql/layout.jsx +++ b/src/app/postgresql/layout.jsx @@ -18,7 +18,6 @@ const NeonPostgresLayout = async ({ children }) => { { slug="index" basePath={POSTGRESQL_BASE_PATH} customType={customType} + isPostgresPage />
diff --git a/src/components/pages/doc/sidebar/sidebar.jsx b/src/components/pages/doc/sidebar/sidebar.jsx index 78a0b2a96a..e3faa2de34 100644 --- a/src/components/pages/doc/sidebar/sidebar.jsx +++ b/src/components/pages/doc/sidebar/sidebar.jsx @@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'; import PropTypes from 'prop-types'; import { useState, useRef, useEffect } from 'react'; +import InkeepTrigger from 'components/shared/inkeep-trigger'; import Link from 'components/shared/link'; import Logo from 'components/shared/logo'; import { HOME_MENU_ITEM } from 'constants/docs'; @@ -51,7 +52,14 @@ export const getActiveItems = (items, currentSlug, result = [], parents = []) => }, result); }; -const Sidebar = ({ className = null, sidebar, slug, basePath, customType }) => { +const Sidebar = ({ + className = null, + sidebar, + slug, + basePath, + customType, + isPostgresPage = false, +}) => { const pathname = usePathname(); const currentSlug = pathname.replace(basePath, ''); @@ -83,12 +91,7 @@ const Sidebar = ({ className = null, sidebar, slug, basePath, customType }) => { className )} > -
+
{ {customType?.title || 'Docs'}
- +
); @@ -137,6 +151,7 @@ Sidebar.propTypes = { title: PropTypes.string, link: PropTypes.string, }), + isPostgresPage: PropTypes.bool, }; export default Sidebar; diff --git a/src/components/shared/header/header.jsx b/src/components/shared/header/header.jsx index 7da20de6fa..c33bb2b687 100644 --- a/src/components/shared/header/header.jsx +++ b/src/components/shared/header/header.jsx @@ -5,7 +5,6 @@ import { Suspense } from 'react'; import Button from 'components/shared/button'; import Container from 'components/shared/container'; import GithubStarCounter from 'components/shared/github-star-counter'; -import InkeepTrigger from 'components/shared/inkeep-trigger'; import Link from 'components/shared/link'; import MobileMenu from 'components/shared/mobile-menu'; import LINKS from 'constants/links'; @@ -192,7 +191,6 @@ const Header = async ({ isStickyOverlay = false, showSearchInput = false, isDocPage = false, - isPostgresPage = false, withBorder = false, searchIndexName = null, customType = null, @@ -231,9 +229,7 @@ const Header = async ({ {customType?.title || 'Docs'}
-
- -
+
@@ -273,7 +269,6 @@ Header.propTypes = { isStickyOverlay: PropTypes.bool, showSearchInput: PropTypes.bool, isDocPage: PropTypes.bool, - isPostgresPage: PropTypes.bool, withBorder: PropTypes.bool, searchIndexName: PropTypes.string, customType: PropTypes.shape({ diff --git a/src/components/shared/inkeep-ai-button/images/sparks.inline.svg b/src/components/shared/inkeep-ai-button/images/sparks.inline.svg deleted file mode 100644 index b0ca3963b8..0000000000 --- a/src/components/shared/inkeep-ai-button/images/sparks.inline.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/shared/inkeep-ai-button/index.js b/src/components/shared/inkeep-ai-button/index.js deleted file mode 100644 index a956713397..0000000000 --- a/src/components/shared/inkeep-ai-button/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import InkeepAIButton from './inkeep-ai-button'; - -export default InkeepAIButton; diff --git a/src/components/shared/inkeep-ai-button/inkeep-ai-button.jsx b/src/components/shared/inkeep-ai-button/inkeep-ai-button.jsx deleted file mode 100644 index 73de9f5143..0000000000 --- a/src/components/shared/inkeep-ai-button/inkeep-ai-button.jsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client'; - -import clsx from 'clsx'; -import PropTypes from 'prop-types'; - -import SparksIcon from './images/sparks.inline.svg'; - -const InkeepAIButton = ({ className, topOffset, handleClick }) => ( - -); - -InkeepAIButton.propTypes = { - className: PropTypes.string, - topOffset: PropTypes.number, - handleClick: PropTypes.func, -}; - -export default InkeepAIButton; diff --git a/src/components/shared/inkeep-trigger/inkeep-trigger.jsx b/src/components/shared/inkeep-trigger/inkeep-trigger.jsx index ab464d01dd..5742fe1e28 100644 --- a/src/components/shared/inkeep-trigger/inkeep-trigger.jsx +++ b/src/components/shared/inkeep-trigger/inkeep-trigger.jsx @@ -6,9 +6,8 @@ import { useTheme } from 'next-themes'; import PropTypes from 'prop-types'; import { useCallback, useEffect, useState } from 'react'; -import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; +import { baseSettings } from 'lib/inkeep-settings'; -import InkeepAIButton from '../inkeep-ai-button'; import InkeepSearch from '../inkeep-search'; const InkeepCustomTrigger = dynamic( @@ -20,8 +19,6 @@ const InkeepTrigger = ({ className = null, isNotFoundPage = false, isDarkTheme = false, - topOffset, - showAIButton = false, isPostgresPage = false, }) => { const [isOpen, setIsOpen] = useState(false); @@ -72,7 +69,7 @@ const InkeepTrigger = ({ }, modalSettings: { defaultView: defaultModalView, - askAILabel: 'Ask Neon AI', + isModeSwitchingEnabled: false, }, searchSettings: { tabSettings: { @@ -81,7 +78,6 @@ const InkeepTrigger = ({ : ['Neon Docs', 'PostgreSQL Tutorial', 'All'], }, }, - aiChatSettings, }; const handleClick = (type) => { @@ -96,7 +92,6 @@ const InkeepTrigger = ({ handleClick={handleClick} isNotFoundPage={isNotFoundPage} /> - {showAIButton && } ); @@ -105,7 +100,6 @@ const InkeepTrigger = ({ InkeepTrigger.propTypes = { className: PropTypes.string, topOffset: PropTypes.number, - showAIButton: PropTypes.bool, isNotFoundPage: PropTypes.bool, isDarkTheme: PropTypes.bool, isPostgresPage: PropTypes.bool, diff --git a/src/components/shared/layout/layout.jsx b/src/components/shared/layout/layout.jsx index 0852a4f349..49ac18c1c1 100644 --- a/src/components/shared/layout/layout.jsx +++ b/src/components/shared/layout/layout.jsx @@ -19,7 +19,6 @@ const Layout = ({ hasThemesSupport = false, showSearchInput = false, isDocPage = false, - isPostgresPage = false, searchIndexName = null, customType = null, }) => ( @@ -36,7 +35,6 @@ const Layout = ({ hasThemesSupport={hasThemesSupport} showSearchInput={showSearchInput} isDocPage={isDocPage} - isPostgresPage={isPostgresPage} withBorder={headerWithBorder} searchIndexName={searchIndexName} customType={customType} @@ -64,7 +62,6 @@ Layout.propTypes = { headerWithBorder: PropTypes.bool, showSearchInput: PropTypes.bool, isDocPage: PropTypes.bool, - isPostgresPage: PropTypes.bool, hasThemesSupport: PropTypes.bool, searchIndexName: PropTypes.string, customType: PropTypes.shape({ From 7ffc22526a9ac0f1e42ff7a248bdeacaaf5cb908 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 01:03:55 +0100 Subject: [PATCH 09/27] fix: docs chat page dynamic import --- .../shared/inkeep-embedded/inkeep-embedded.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index 2a1b839d14..bcc46807c2 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -1,11 +1,16 @@ 'use client'; -import { InkeepEmbeddedChat } from '@inkeep/uikit'; +import dynamic from 'next/dynamic'; import { useTheme } from 'next-themes'; import { PropTypes } from 'prop-types'; import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; +const InkeepEmbeddedChat = dynamic( + () => import('@inkeep/uikit').then((mod) => mod.InkeepEmbeddedChat), + { ssr: false } +); + const InkeepEmbedded = ({ isDarkTheme = false }) => { const { theme, systemTheme } = useTheme(); @@ -32,8 +37,8 @@ const InkeepEmbedded = ({ isDarkTheme = false }) => { components: { AIChatPageWrapper: { defaultProps: { - size: 'expand', // 'shrink-vertically' 'expand', 'default', 'full-viewport' - variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow' + size: 'expand', + variant: 'no-shadow', }, }, }, From edea8b213c05ebb0e95a90fe3f8e5dd21f506859 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 10:29:48 +0100 Subject: [PATCH 10/27] feat: add docs toggler in header, add skeleton loader to inkeep chat --- src/app/docs/chat/page.jsx | 4 +-- src/app/docs/layout.jsx | 3 +- src/app/layout.jsx | 2 +- src/components/shared/header/header.jsx | 30 ++++++++++++++++++- .../inkeep-embedded/inkeep-embedded.jsx | 18 ++++++++--- src/components/shared/layout/layout.jsx | 3 ++ src/styles/skeleton.css | 2 +- 7 files changed, 51 insertions(+), 11 deletions(-) diff --git a/src/app/docs/chat/page.jsx b/src/app/docs/chat/page.jsx index 790be23c44..2ee80f723c 100644 --- a/src/app/docs/chat/page.jsx +++ b/src/app/docs/chat/page.jsx @@ -7,9 +7,7 @@ export const metadata = getMetadata(SEO_DATA.docsChat); const DocsChat = () => (

Neon AI Chat

-
- -
+
); diff --git a/src/app/docs/layout.jsx b/src/app/docs/layout.jsx index 6487ddbdb9..f2847bc16d 100644 --- a/src/app/docs/layout.jsx +++ b/src/app/docs/layout.jsx @@ -6,8 +6,9 @@ import Layout from 'components/shared/layout'; import { DOCS_BASE_PATH } from 'constants/docs'; import { getSidebar } from 'utils/api-docs'; -const NeonDocsLayout = async ({ children }) => { +const NeonDocsLayout = async ({ children, currentPath }) => { const sidebar = await getSidebar(); + console.log(currentPath); return ( { }; Sidebar.propTypes = themePropTypes; +const DocNavButton = ({ src, title, isActive }) => ( + + {title} + +); + +DocNavButton.propTypes = { + src: PropTypes.string, + title: PropTypes.string, + isActive: PropTypes.bool, +}; + const Header = async ({ className = null, theme = null, @@ -191,6 +212,7 @@ const Header = async ({ isStickyOverlay = false, showSearchInput = false, isDocPage = false, + isDocChatPage = false, withBorder = false, searchIndexName = null, customType = null, @@ -229,7 +251,12 @@ const Header = async ({ {customType?.title || 'Docs'}
-
+
+
+ + +
+
@@ -269,6 +296,7 @@ Header.propTypes = { isStickyOverlay: PropTypes.bool, showSearchInput: PropTypes.bool, isDocPage: PropTypes.bool, + isDocChatPage: PropTypes.bool, withBorder: PropTypes.bool, searchIndexName: PropTypes.string, customType: PropTypes.shape({ diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index bcc46807c2..da5cf4367f 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -6,9 +6,18 @@ import { PropTypes } from 'prop-types'; import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; +const Skeleton = () => ( +
+ + + + +
+); + const InkeepEmbeddedChat = dynamic( () => import('@inkeep/uikit').then((mod) => mod.InkeepEmbeddedChat), - { ssr: false } + { ssr: false, loading: () => } ); const InkeepEmbedded = ({ isDarkTheme = false }) => { @@ -37,8 +46,8 @@ const InkeepEmbedded = ({ isDarkTheme = false }) => { components: { AIChatPageWrapper: { defaultProps: { - size: 'expand', - variant: 'no-shadow', + size: 'expand', // 'shrink-vertically' 'expand', 'default', 'full-viewport' + variant: 'no-shadow', // 'no-shadow' or 'container-with-shadow' }, }, }, @@ -59,7 +68,8 @@ const InkeepEmbedded = ({ isDarkTheme = false }) => { }; return ( -
+
+ {/* */}
); diff --git a/src/components/shared/layout/layout.jsx b/src/components/shared/layout/layout.jsx index 49ac18c1c1..e4412cb113 100644 --- a/src/components/shared/layout/layout.jsx +++ b/src/components/shared/layout/layout.jsx @@ -19,6 +19,7 @@ const Layout = ({ hasThemesSupport = false, showSearchInput = false, isDocPage = false, + isDocChatPage = false, searchIndexName = null, customType = null, }) => ( @@ -35,6 +36,7 @@ const Layout = ({ hasThemesSupport={hasThemesSupport} showSearchInput={showSearchInput} isDocPage={isDocPage} + isDocChatPage={isDocChatPage} withBorder={headerWithBorder} searchIndexName={searchIndexName} customType={customType} @@ -62,6 +64,7 @@ Layout.propTypes = { headerWithBorder: PropTypes.bool, showSearchInput: PropTypes.bool, isDocPage: PropTypes.bool, + isDocChatPage: PropTypes.bool, hasThemesSupport: PropTypes.bool, searchIndexName: PropTypes.string, customType: PropTypes.shape({ diff --git a/src/styles/skeleton.css b/src/styles/skeleton.css index 0d7cffa6c3..14c480a6aa 100644 --- a/src/styles/skeleton.css +++ b/src/styles/skeleton.css @@ -19,7 +19,7 @@ ); } .skeleton { - @apply relative h-5 w-full rounded-[70px] bg-[#f5f5f5] dark:bg-gray-3; + @apply relative block min-h-5 w-full rounded-xl bg-[#f5f5f5] dark:bg-gray-3; &::after { @apply white-line dark:black-line absolute inset-0 -translate-x-full content-['']; From ae401a1692d45786b939d99c33a5ec9f5a03a656 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 12:08:44 +0100 Subject: [PATCH 11/27] refactor: remove unused tailwind variables --- tailwind.config.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 0999707e29..a58ed23b9c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -130,16 +130,10 @@ module.exports = { wider: '0.04em', }, boxShadow: { - tooltip: '0px 2px 20px rgba(0, 0, 0, 0.3)', social: 'inset 0px -2px 10px rgba(255, 255, 255, 0.15)', contact: '0px 4px 10px 0px rgba(0, 0, 0, .5), 0px 4px 30px 0px rgba(0, 0, 0, .5)', }, backgroundImage: ({ theme }) => ({ - 'button-overlay': 'linear-gradient(0deg, rgba(12,13,13,0) 0%, rgba(12,13,13,1) 100%);', - 'community-light': - 'radial-gradient(100% 2244.95% at 100% 100%, rgba(217, 238, 242, 0.5) 0%, rgba(217, 238, 242, 0.1) 70.08%);', - 'community-dark': - 'radial-gradient(100% 2244.95% at 100% 100%, #262626 0%, rgba(38, 38, 38, 0.1) 63.96%);', 'subscribe-sm': 'linear-gradient(160deg, rgba(173, 224, 235, 0) 23%, rgba(173, 224, 235, 0.45) 50%, rgba(173, 224, 235, 0) 77%);', 'pricing-table-featured-column': From 909ea346915ed32127847842dc1eba0c9a856429 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 12:29:33 +0100 Subject: [PATCH 12/27] feat: dark mode styles for header docs button --- src/app/docs/layout.jsx | 3 +-- .../shared/gradient-border/gradient-border.jsx | 18 ++++++++++++++++++ src/components/shared/gradient-border/index.js | 3 +++ src/components/shared/header/header.jsx | 15 +++++++++------ tailwind.config.js | 3 +++ 5 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 src/components/shared/gradient-border/gradient-border.jsx create mode 100644 src/components/shared/gradient-border/index.js diff --git a/src/app/docs/layout.jsx b/src/app/docs/layout.jsx index f2847bc16d..6487ddbdb9 100644 --- a/src/app/docs/layout.jsx +++ b/src/app/docs/layout.jsx @@ -6,9 +6,8 @@ import Layout from 'components/shared/layout'; import { DOCS_BASE_PATH } from 'constants/docs'; import { getSidebar } from 'utils/api-docs'; -const NeonDocsLayout = async ({ children, currentPath }) => { +const NeonDocsLayout = async ({ children }) => { const sidebar = await getSidebar(); - console.log(currentPath); return ( ( + +); + +GradientBorder.propTypes = { + className: PropTypes.string, +}; + +export default GradientBorder; diff --git a/src/components/shared/gradient-border/index.js b/src/components/shared/gradient-border/index.js new file mode 100644 index 0000000000..f610d45739 --- /dev/null +++ b/src/components/shared/gradient-border/index.js @@ -0,0 +1,3 @@ +import GradientBorder from './gradient-border'; + +export default GradientBorder; diff --git a/src/components/shared/header/header.jsx b/src/components/shared/header/header.jsx index eba9631132..02892dea1a 100644 --- a/src/components/shared/header/header.jsx +++ b/src/components/shared/header/header.jsx @@ -5,7 +5,9 @@ import { Suspense } from 'react'; import Button from 'components/shared/button'; import Container from 'components/shared/container'; import GithubStarCounter from 'components/shared/github-star-counter'; +import GradientBorder from 'components/shared/gradient-border'; import Link from 'components/shared/link'; +import Logo from 'components/shared/logo'; import MobileMenu from 'components/shared/mobile-menu'; import LINKS from 'constants/links'; import MENUS from 'constants/menus.js'; @@ -13,8 +15,6 @@ import ChevronIcon from 'icons/chevron-down.inline.svg'; import ArrowIcon from 'icons/header/arrow-right.inline.svg'; import { getGithubStars } from 'utils/get-github-data'; -import Logo from '../logo'; - import HeaderWrapper from './header-wrapper'; const themePropTypes = { @@ -188,14 +188,17 @@ const DocNavButton = ({ src, title, isActive }) => ( {title} + {isActive && ( + + )} ); @@ -252,7 +255,7 @@ const Header = async ({
-
+
diff --git a/tailwind.config.js b/tailwind.config.js index a58ed23b9c..cd17c38c97 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -134,6 +134,9 @@ module.exports = { contact: '0px 4px 10px 0px rgba(0, 0, 0, .5), 0px 4px 30px 0px rgba(0, 0, 0, .5)', }, backgroundImage: ({ theme }) => ({ + 'header-docs-button-border': + 'radial-gradient(54.19% 83.93% at 50% 3.57%, rgba(255, 255, 255, 0.55), transparent),' + + 'linear-gradient(0deg, #303236, #303236)', 'subscribe-sm': 'linear-gradient(160deg, rgba(173, 224, 235, 0) 23%, rgba(173, 224, 235, 0.45) 50%, rgba(173, 224, 235, 0) 77%);', 'pricing-table-featured-column': From 032de886fb705f23c2f285c710579a5a619d4c4a Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 12:41:13 +0100 Subject: [PATCH 13/27] feat: update docs chat styles --- public/inkeep/css/chat.css | 20 ++++++++++++++++++- .../inkeep-embedded/inkeep-embedded.jsx | 11 +++++----- src/styles/skeleton.css | 2 +- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index 5def2ee4d2..27c350a841 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -10,4 +10,22 @@ font-weight: 500; line-height: 125%; letter-spacing: -0.04em; -} \ No newline at end of file +} + +.ikp-fs_2xs { + display: none; +} + +.ikp-d_flex.ikp-flex_column.ikp-justify_flex-end.ikp-grow_2.ikp-overflow_visible.ikp-pr_3 { + padding: 0; +} + +.ikp-d_flex.ikp-flex_row.ikp-gap_0.ikp-flex-wrap_wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 12px; +} + +.ikp-mr_2.ikp-mb_2 { + margin: 0; +} diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index da5cf4367f..f0aaf6a80c 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -7,10 +7,10 @@ import { PropTypes } from 'prop-types'; import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; const Skeleton = () => ( -
- - - +
+ + +
); @@ -68,8 +68,7 @@ const InkeepEmbedded = ({ isDarkTheme = false }) => { }; return ( -
- {/* */} +
); diff --git a/src/styles/skeleton.css b/src/styles/skeleton.css index 14c480a6aa..0a86d7faf2 100644 --- a/src/styles/skeleton.css +++ b/src/styles/skeleton.css @@ -19,7 +19,7 @@ ); } .skeleton { - @apply relative block min-h-5 w-full rounded-xl bg-[#f5f5f5] dark:bg-gray-3; + @apply relative block min-h-5 w-full rounded-lg bg-[#f5f5f5] dark:bg-gray-3; &::after { @apply white-line dark:black-line absolute inset-0 -translate-x-full content-['']; From 80da9227b964abd0e8de93b14076e18d64511a97 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Thu, 19 Dec 2024 17:25:35 +0100 Subject: [PATCH 14/27] refactor: move AI Chat page out from Docs, update chat styles --- public/inkeep/css/chat.css | 27 +++++++--- src/app/ai-chat/page.jsx | 52 +++++++++++++++++++ src/app/docs/chat/page.jsx | 14 ----- src/components/pages/doc/sidebar/sidebar.jsx | 2 +- src/components/shared/header/header.jsx | 8 +-- .../inkeep-embedded/inkeep-embedded.jsx | 2 +- src/components/shared/layout/layout.jsx | 10 ++-- src/constants/links.js | 2 +- src/constants/seo-data.js | 10 ++-- 9 files changed, 91 insertions(+), 36 deletions(-) create mode 100644 src/app/ai-chat/page.jsx delete mode 100644 src/app/docs/chat/page.jsx diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index 27c350a841..a26ee7eb58 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -1,8 +1,5 @@ -.ikp-message-header{ - display: none; -} - -.chat-title { +/* intro title */ +.intro-title { display: block; width: 100%; text-align: center; @@ -12,20 +9,38 @@ letter-spacing: -0.04em; } -.ikp-fs_2xs { +/* header icon */ +.ikp-message-header{ display: none; } +.ikp-chat-bubble__wrapper .ikp-message-header{ + display: flex; +} +/* header */ .ikp-d_flex.ikp-flex_column.ikp-justify_flex-end.ikp-grow_2.ikp-overflow_visible.ikp-pr_3 { padding: 0; } +/* examples grid */ .ikp-d_flex.ikp-flex_row.ikp-gap_0.ikp-flex-wrap_wrap { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12px; } +/* examples title */ .ikp-mr_2.ikp-mb_2 { margin: 0; } + +/* examples title */ +.ikp-fs_2xs { + display: none; +} + +/* inner scroll */ +.ikp-d_flex.ikp-touch_none.ikp-select_none.ikp-w_10px.ikp-border-l_1px_solid_transparent.ikp-border-t_none.ikp-p_1px { + display: none; +} + diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx new file mode 100644 index 0000000000..1379463dd7 --- /dev/null +++ b/src/app/ai-chat/page.jsx @@ -0,0 +1,52 @@ +import MobileNav from 'components/pages/doc/mobile-nav'; +import Sidebar from 'components/pages/doc/sidebar'; +import Container from 'components/shared/container'; +import InkeepEmbedded from 'components/shared/inkeep-embedded'; +import Layout from 'components/shared/layout'; +import { DOCS_BASE_PATH } from 'constants/docs'; +import SEO_DATA from 'constants/seo-data'; +import { getSidebar } from 'utils/api-docs'; +import getMetadata from 'utils/get-metadata'; + +export const metadata = getMetadata(SEO_DATA.aiChat); + +const AiChatPage = async () => { + const sidebar = await getSidebar(); + + return ( + +
+ + + + + +

Neon AI Chat

+ + +
+ + ); +}; + +export default AiChatPage; diff --git a/src/app/docs/chat/page.jsx b/src/app/docs/chat/page.jsx deleted file mode 100644 index 2ee80f723c..0000000000 --- a/src/app/docs/chat/page.jsx +++ /dev/null @@ -1,14 +0,0 @@ -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 = () => ( -
-

Neon AI Chat

- -
-); - -export default DocsChat; diff --git a/src/components/pages/doc/sidebar/sidebar.jsx b/src/components/pages/doc/sidebar/sidebar.jsx index e3faa2de34..51b26d9632 100644 --- a/src/components/pages/doc/sidebar/sidebar.jsx +++ b/src/components/pages/doc/sidebar/sidebar.jsx @@ -111,7 +111,7 @@ const Sidebar = ({ )} > diff --git a/src/components/shared/header/header-wrapper/header-wrapper.jsx b/src/components/shared/header/header-wrapper/header-wrapper.jsx index b96547d088..cc1d918add 100644 --- a/src/components/shared/header/header-wrapper/header-wrapper.jsx +++ b/src/components/shared/header/header-wrapper/header-wrapper.jsx @@ -36,7 +36,7 @@ const HeaderWrapper = ({ return (
{ }; Sidebar.propTypes = themePropTypes; -const DocNavButton = ({ src, title, isActive }) => ( - - {title} - {isActive && ( - - )} - -); - -DocNavButton.propTypes = { - src: PropTypes.string, - title: PropTypes.string, - isActive: PropTypes.bool, -}; - const Header = async ({ className = null, theme = null, @@ -232,10 +208,10 @@ const Header = async ({ withBorder={withBorder} > {isDocPage ? ( -
+
@@ -248,25 +224,22 @@ const Header = async ({ isHeader /> {customType?.title || 'Docs'}
-
-
- - -
+
+
-
+
) : ( - +
( -
- - - - +
+ + + +
); @@ -68,7 +68,7 @@ const InkeepEmbedded = ({ isDarkTheme = false }) => { }; return ( -
+
); diff --git a/src/lib/inkeep-settings.js b/src/lib/inkeep-settings.js index 39a0548633..7bff6ee511 100644 --- a/src/lib/inkeep-settings.js +++ b/src/lib/inkeep-settings.js @@ -38,8 +38,7 @@ const searchSettings = { const aiChatSettings = { botName: 'Neon AI', - placeholder: 'How can I help you?', - quickQuestionsLabel: 'Examples', + placeholder: 'Ask anything...', quickQuestions: [ 'What’s Neon?', 'How do I sign up for Neon?', @@ -51,6 +50,20 @@ const aiChatSettings = { userAvatarSrcUrl: '/inkeep/images/user.svg', isChatSharingEnabled: true, shareChatUrlBasePath: 'https://neon.tech/docs/introduction', + getHelpCallToActions: [ + { + type: 'OPEN_LINK', + icon: { builtIn: 'FaDiscord' }, + name: 'Discord', + url: 'https://discord.gg/92vNTzKDGp', + }, + { + type: 'OPEN_LINK', + icon: { builtIn: 'FaGithub' }, + name: 'GitHub', + url: 'https://github.com/neondatabase/neon', + }, + ], }; export { baseSettings, searchSettings, aiChatSettings }; diff --git a/src/styles/skeleton.css b/src/styles/skeleton.css index 0a86d7faf2..5cb029905f 100644 --- a/src/styles/skeleton.css +++ b/src/styles/skeleton.css @@ -12,14 +12,14 @@ .black-line { background-image: linear-gradient( 90deg, - rgba(26, 26, 26, 0) 0, - rgba(26, 26, 26, 0.3) 20%, - rgba(26, 26, 26, 0.7) 60%, - rgba(26, 26, 26, 0) + rgba(48, 50, 54, 0) 0, + rgba(48, 50, 54, 0.3) 20%, + rgba(48, 50, 54, 0.7) 60%, + rgba(48, 50, 54, 0) ); } .skeleton { - @apply relative block min-h-5 w-full rounded-lg bg-[#f5f5f5] dark:bg-gray-3; + @apply relative block min-h-5 w-full rounded-lg bg-[#f5f5f5] dark:bg-gray-new-10; &::after { @apply white-line dark:black-line absolute inset-0 -translate-x-full content-['']; From 3afefa0e6f0ed39f2dcf925ec8f33911ebd56c41 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Fri, 20 Dec 2024 00:35:49 +0100 Subject: [PATCH 16/27] feat: ai chat mobile styles --- public/inkeep/css/chat.css | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index f3777ddd53..d32dba232a 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -2,7 +2,8 @@ .ikp-ai-chat__header{ display: none; } -.ikp-d_flex.ikp-flex_row.ikp-pos_relative.ikp-overflow_visible.ikp-py_4.ikp-px_8 { + +.ikp-d_flex.ikp-pos_relative.ikp-overflow_visible.ikp-py_4 { padding: 0; .ikp-d_flex.ikp-flex_column.ikp-justify_flex-end.ikp-grow_2.ikp-overflow_visible.ikp-pr_3 { @@ -30,6 +31,17 @@ letter-spacing: -0.04em; margin-bottom: 24px; } +@media (max-width: 1023px) { + .intro-title { + font-size: 32px; + margin-bottom: 4px; + } +} +@media (max-width: 767px) { + .intro-title { + font-size: 24px; + } +} /* quick questions grid */ .ikp-d_flex.ikp-flex_row.ikp-gap_0.ikp-flex-wrap_wrap { @@ -44,16 +56,16 @@ .ikp-mr_2.ikp-mb_2 { margin: 0; } -.ikp-quick-question-button { - justify-content: flex-start; - font-size: 16px; -} -.ikp-quick-question-button:after { +.ikp-quick-question-button__wrapper:after { background: #FFFFFF; } -[data-theme='dark'] .ikp-quick-question-button:after { +[data-theme='dark'] .ikp-quick-question-button__wrapper:after { background: #0C0D0D; } +.ikp-quick-question-button { + justify-content: flex-start; + font-size: 16px; +} /* quick questions title */ .ikp-fs_2xs { From 6f4c247d4fe43bbaabcf0782d399e38f71ca84d7 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Fri, 20 Dec 2024 12:06:47 +0100 Subject: [PATCH 17/27] test: align AI Chat page layout with classic Docs --- src/app/ai-chat/page.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index 9d84bba6dc..ff50f4220f 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -41,10 +41,13 @@ const AiChatPage = async () => { basePath={DOCS_BASE_PATH} /> - +

Neon AI Chat

-
+
From f7a15722c57f1d82f24c501b34a5073d467cae8d Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Fri, 20 Dec 2024 16:34:07 +0100 Subject: [PATCH 18/27] feat: update ai chat styles --- public/inkeep/css/chat.css | 89 ++++++++++++++++++- public/inkeep/images/example.svg | 13 +-- public/inkeep/images/user.svg | 7 +- .../pages/doc/mode-toggler/mode-toggler.jsx | 15 ++-- tailwind.config.js | 3 + 5 files changed, 110 insertions(+), 17 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index d32dba232a..31823b49c7 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -34,7 +34,6 @@ @media (max-width: 1023px) { .intro-title { font-size: 32px; - margin-bottom: 4px; } } @media (max-width: 767px) { @@ -77,6 +76,17 @@ display: none; } +/* content */ +.ikp-content-parser__ul { + padding-left: 28px; + padding-bottom: 12px; +} + +/* messages wrapper */ +.ikp-messages__wrapper { + max-height: calc(100vh - 420px); +} + /* message box */ .ikp-ai-chat__message-box { height: 120px; @@ -90,7 +100,80 @@ border-color: #303236; } -/* footer */ +/* content */ +.ikp-message__wrapper > div:first-child { + padding: 24px 40px; +} +.ikp-chat-bubble__message-content-wrapper > .ikp-h_48px { + height: auto; +} +.ikp-chat-bubble__user-message-content { + margin: 0; +} +.ikp-chat-bubble__user-message { + justify-content: flex-end; +} +.ikp-chat-bubble__user-message .ikp-message-header { + padding: 0 12px; + height: 24px; +} +.ikp-chat-bubble__bot-message .ikp-message-header { + position: absolute; + left: 0; + top: 20px; + padding: 0; +} +.ikp-message-header__avatar-box, +.ikp-bot-avatar__box { + width: 28px; + height: 28px; +} +.ikp-chat-bubble__message-content-wrapper { + padding: 0; +} +/* first title */ +.ikp-chat-bubble__message-content-wrapper > div:first-child > p:first-child strong { + margin-bottom: 12px; + font-size: 20px; + font-weight: 600; + line-height: 125%; + letter-spacing: -0.02em; +} +/* content text */ +.ikp-chat-bubble__message-content-wrapper > div:first-child { + font-size: 16px; +} +.ikp-content-parser__li { + list-style-position: outside; +} .ikp-ai-chat-footer__content { padding: 0; -} \ No newline at end of file +} + +/* sources */ +.ikp-citation-sources-header { + margin-bottom: 12px; + font-size: 18px; + font-weight: 600; + line-height: 125%; + letter-spacing: -0.02em; + color: white; +} +.ikp-result-card:hover .ikp-result-card__container { + background: rgba(0, 229, 153, 0.06); + border-color: rgba(0, 229, 153, 0.25); +} + +/* footer buttons */ +.ikp-btn--size_xs { + padding: 0 10px; + height: 30px; + border-radius: 4px; + border: 1px solid #242628; + background: #0C0D0D; + font-size: 14px; + font-weight: 400; + line-height: 100%; + letter-spacing: -0.02em; +} + diff --git a/public/inkeep/images/example.svg b/public/inkeep/images/example.svg index e193a8f132..8a011c6da9 100644 --- a/public/inkeep/images/example.svg +++ b/public/inkeep/images/example.svg @@ -1,11 +1,12 @@ - - - - + + + + + - - + + diff --git a/public/inkeep/images/user.svg b/public/inkeep/images/user.svg index 86399c8dba..fdbc3eb53b 100644 --- a/public/inkeep/images/user.svg +++ b/public/inkeep/images/user.svg @@ -1,4 +1,5 @@ - - - + + + + diff --git a/src/components/pages/doc/mode-toggler/mode-toggler.jsx b/src/components/pages/doc/mode-toggler/mode-toggler.jsx index 65e6d7977a..6cb15856ae 100644 --- a/src/components/pages/doc/mode-toggler/mode-toggler.jsx +++ b/src/components/pages/doc/mode-toggler/mode-toggler.jsx @@ -9,16 +9,21 @@ const ToggleButton = ({ src, title, isActive }) => ( {title} {isActive && ( - + )} ); @@ -32,7 +37,7 @@ ToggleButton.propTypes = { const ModeToggler = ({ className, isAiChatPage = false }) => (
diff --git a/tailwind.config.js b/tailwind.config.js index cd17c38c97..0771b870ad 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -135,6 +135,9 @@ module.exports = { }, backgroundImage: ({ theme }) => ({ 'header-docs-button-border': + 'radial-gradient(78.71% 83.93% at 50% 3.57%, rgba(255, 255, 255, 0.78), transparent),' + + 'linear-gradient(0deg, #BCBEC2, #BCBEC2)', + 'header-docs-button-border-dark': 'radial-gradient(54.19% 83.93% at 50% 3.57%, rgba(255, 255, 255, 0.55), transparent),' + 'linear-gradient(0deg, #303236, #303236)', 'subscribe-sm': From 25fa369ee972598b91648733e18042adfaca2154 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Fri, 20 Dec 2024 16:39:59 +0100 Subject: [PATCH 19/27] fix: footer buttons light theme fix --- public/inkeep/css/chat.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index 31823b49c7..89e3b84a38 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -169,11 +169,15 @@ padding: 0 10px; height: 30px; border-radius: 4px; - border: 1px solid #242628; - background: #0C0D0D; + border: 1px solid #E4E5E7; + background: #FFFFFF; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.02em; } +[data-theme='dark'] .ikp-btn--size_xs { + border-color: #242628; + background: #0C0D0D; +} From 1376ff61a2fd194ca3913674b3d946d65599790f Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 10:56:49 +0100 Subject: [PATCH 20/27] feat: update chat styles --- public/inkeep/css/chat.css | 59 ++++++++++++++++++++++++++++++++++---- 1 file changed, 54 insertions(+), 5 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index 89e3b84a38..f265d1a411 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -64,6 +64,10 @@ .ikp-quick-question-button { justify-content: flex-start; font-size: 16px; + color: #494B50; +} +[data-theme='dark'] .ikp-quick-question-button { + color: #C9CBCF; } /* quick questions title */ @@ -116,6 +120,7 @@ .ikp-chat-bubble__user-message .ikp-message-header { padding: 0 12px; height: 24px; + overflow: visible; } .ikp-chat-bubble__bot-message .ikp-message-header { position: absolute; @@ -133,7 +138,8 @@ } /* first title */ .ikp-chat-bubble__message-content-wrapper > div:first-child > p:first-child strong { - margin-bottom: 12px; + display: block; + margin-bottom: -16px; font-size: 20px; font-weight: 600; line-height: 125%; @@ -149,6 +155,23 @@ .ikp-ai-chat-footer__content { padding: 0; } +/* source links */ +.ikp-content-parser__sup a { + color: #0055FF; + background-color: #0055ff33; +} +[data-theme='dark'] .ikp-content-parser__sup a { + color: #00E599; + background-color: #00e59933; +} + +/* copy, like, dislike buttons */ +.ikp-btn--variant_iconButton:hover { + color: #0055FF; +} +[data-theme='dark'] .ikp-btn--variant_iconButton:hover { + color: #00E599; +} /* sources */ .ikp-citation-sources-header { @@ -157,11 +180,26 @@ font-weight: 600; line-height: 125%; letter-spacing: -0.02em; + color: #0C0D0D; +} +[data-theme='dark'] .ikp-citation-sources-header { color: white; } .ikp-result-card:hover .ikp-result-card__container { - background: rgba(0, 229, 153, 0.06); - border-color: rgba(0, 229, 153, 0.25); + background: #0055FF0f; + border-color: #0055FF40; +} +[data-theme='dark'] .ikp-result-card:hover .ikp-result-card__container { + background: #00e5990f; + border-color: #00e59940; +} +.ikp-result-card__icon, +.ikp-result-card__hover-icon { + color: #0055FF; +} +[data-theme='dark'] .ikp-result-card__icon, +[data-theme='dark'] .ikp-result-card__hover-icon { + color: #00E599; } /* footer buttons */ @@ -170,14 +208,25 @@ height: 30px; border-radius: 4px; border: 1px solid #E4E5E7; - background: #FFFFFF; + background-color: #FFFFFF; font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.02em; + color: #494B50; + transition: color 0.2s, border-color 0.2s, background-color 0.2s; +} +.ikp-btn--size_xs:hover { + background: var(--ikp-colors-gray-alpha-50); } [data-theme='dark'] .ikp-btn--size_xs { border-color: #242628; - background: #0C0D0D; + background-color: #0d0d0d; + color: #C9CBCF; +} +[data-theme='dark'] .ikp-btn--size_xs:hover { + border-color: var(--ikp-colors-white-alpha-300); + background-color: #262626; + color: #C9CBCF; } From ff98fa6d5d66e7ef4ceb70603da3661585f128c7 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 13:01:16 +0100 Subject: [PATCH 21/27] feat: update adaptives --- public/inkeep/css/chat.css | 116 ++++++++++++++++-- .../images/{example.svg => bot-dark.svg} | 0 public/inkeep/images/bot.svg | 12 ++ public/inkeep/images/user-dark.svg | 5 + public/inkeep/images/user.svg | 6 +- src/app/ai-chat/page.jsx | 4 +- .../inkeep-embedded/inkeep-embedded.jsx | 6 +- 7 files changed, 134 insertions(+), 15 deletions(-) rename public/inkeep/images/{example.svg => bot-dark.svg} (100%) create mode 100644 public/inkeep/images/bot.svg create mode 100644 public/inkeep/images/user-dark.svg diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index f265d1a411..d977194ffb 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -29,7 +29,7 @@ font-weight: 500; line-height: 125%; letter-spacing: -0.04em; - margin-bottom: 24px; + margin: 24px 0; } @media (max-width: 1023px) { .intro-title { @@ -88,7 +88,12 @@ /* messages wrapper */ .ikp-messages__wrapper { - max-height: calc(100vh - 420px); + max-height: calc(100vh - 400px); +} +@media (max-width: 767px) { + .ikp-messages__wrapper { + max-height: calc(100vh - 460px); + } } /* message box */ @@ -103,11 +108,49 @@ background: #131415; border-color: #303236; } +/* send button */ +.ikp-ai-chat__send-button { + background: #E4E5E7; + border-radius: 100%; + width: 32px; + height: 32px; + min-width: 0; +} +.ikp-ai-chat__send-button:hover { + background: #D4D5D7; +} +.ikp-ai-chat__send-button svg { + color: #94979E; + margin-top: -2px; + margin-right: -2px; +} +[data-theme='dark'] .ikp-ai-chat__send-button { + background: #242628; +} +[data-theme='dark'] .ikp-ai-chat__send-button:hover { + background: #303236; +} +[data-theme='dark'] .ikp-ai-chat__send-button svg { + color: #E4E5E7; +} /* content */ .ikp-message__wrapper > div:first-child { padding: 24px 40px; } +@media (max-width: 612px) { + .ikp-message__wrapper > div:first-child { + padding: 24px 0; + } +} +.ikp-message__divider-wrapper { + padding-inline: 40px; +} +@media (max-width: 612px) { + .ikp-message__divider-wrapper { + padding-inline: 0; + } +} .ikp-chat-bubble__message-content-wrapper > .ikp-h_48px { height: auto; } @@ -118,7 +161,8 @@ justify-content: flex-end; } .ikp-chat-bubble__user-message .ikp-message-header { - padding: 0 12px; + padding: 0; + margin-right: 12px; height: 24px; overflow: visible; } @@ -128,18 +172,62 @@ top: 20px; padding: 0; } +@media (max-width: 612px) { + .ikp-message-header { + margin-bottom: 16px; + } + .ikp-chat-bubble__bot-message .ikp-message-header { + position: unset; + } +} .ikp-message-header__avatar-box, +.ikp-message-header__avatar-user, .ikp-bot-avatar__box { width: 28px; height: 28px; } +@media (max-width: 612px) { + .ikp-message-header__avatar-box { + width: auto; + } +} +.ikp-message-header__avatar-user { + margin-top: -3px; +} +.ikp-message-header__avatar-user, +.ikp-bot-avatar__box { + background-image: none; + background-size: contain; +} +.ikp-message-header__avatar-user { + background-image: url('/inkeep/images/user.svg'); +} +.ikp-bot-avatar__box { + background-image: url('/inkeep/images/bot.svg'); +} +[data-theme='dark'] .ikp-message-header__avatar-user { + background-image: url('/inkeep/images/user-dark.svg'); +} +[data-theme='dark'] .ikp-bot-avatar__box { + background-image: url('/inkeep/images/bot-dark.svg'); +} +.ikp-message-header__avatar-user img, +.ikp-bot-avatar__box svg { + display: none; +} .ikp-chat-bubble__message-content-wrapper { padding: 0; } +.ikp-message-header__name { + color: #0055FF; + background-color: #0055ff33; +} +[data-theme='dark'] .ikp-message-header__name { + color: #00E599; + background-color: #00e59933; +} /* first title */ .ikp-chat-bubble__message-content-wrapper > div:first-child > p:first-child strong { - display: block; - margin-bottom: -16px; font-size: 20px; font-weight: 600; line-height: 125%; @@ -185,11 +273,11 @@ [data-theme='dark'] .ikp-citation-sources-header { color: white; } -.ikp-result-card:hover .ikp-result-card__container { +.ikp-result-card:is(:focus,:hover,[data-focus]) .ikp-result-card__container { background: #0055FF0f; border-color: #0055FF40; } -[data-theme='dark'] .ikp-result-card:hover .ikp-result-card__container { +[data-theme='dark'] .ikp-result-card:is(:focus,:hover,[data-focus]) .ikp-result-card__container { background: #00e5990f; border-color: #00e59940; } @@ -202,6 +290,20 @@ color: #00E599; } +/* footer */ +.ikp-ai-chat-footer__content-wrapper { + padding-bottom: 0; +} +.ikp-ai-chat-footer__footer { + height: auto; +} +@media (max-width: 612px) { + .ikp-ai-chat-footer__footer { + flex-direction: column-reverse; + align-items: flex-start; + gap: 12px; + } +} /* footer buttons */ .ikp-btn--size_xs { padding: 0 10px; diff --git a/public/inkeep/images/example.svg b/public/inkeep/images/bot-dark.svg similarity index 100% rename from public/inkeep/images/example.svg rename to public/inkeep/images/bot-dark.svg diff --git a/public/inkeep/images/bot.svg b/public/inkeep/images/bot.svg new file mode 100644 index 0000000000..481417558f --- /dev/null +++ b/public/inkeep/images/bot.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/inkeep/images/user-dark.svg b/public/inkeep/images/user-dark.svg new file mode 100644 index 0000000000..fdbc3eb53b --- /dev/null +++ b/public/inkeep/images/user-dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/inkeep/images/user.svg b/public/inkeep/images/user.svg index fdbc3eb53b..7ab5164789 100644 --- a/public/inkeep/images/user.svg +++ b/public/inkeep/images/user.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index ff50f4220f..dbac37780b 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -24,7 +24,7 @@ const AiChatPage = async () => { isHeaderSticky headerWithBorder hasThemesSupport - hideFooter + // hideFooter >
{ /> diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index 280193153e..27bf1e353f 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -8,10 +8,10 @@ import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; const Skeleton = () => (
- - + + - +
); From 8bc0012fe6ac71fcc65204ac586f7802263133a8 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 13:33:14 +0100 Subject: [PATCH 22/27] fix: 100dvh fixes for mobile --- public/inkeep/css/chat.css | 4 ++-- src/app/ai-chat/page.jsx | 2 +- src/components/pages/doc/mobile-nav/mobile-nav.jsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index d977194ffb..a3f5118bfe 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -88,11 +88,11 @@ /* messages wrapper */ .ikp-messages__wrapper { - max-height: calc(100vh - 400px); + max-height: calc(100dvh - 400px); } @media (max-width: 767px) { .ikp-messages__wrapper { - max-height: calc(100vh - 460px); + max-height: calc(100dvh - 460px); } } diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index dbac37780b..2b895cc183 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -42,7 +42,7 @@ const AiChatPage = async () => { /> diff --git a/src/components/pages/doc/mobile-nav/mobile-nav.jsx b/src/components/pages/doc/mobile-nav/mobile-nav.jsx index 68fda465c2..51279250a2 100644 --- a/src/components/pages/doc/mobile-nav/mobile-nav.jsx +++ b/src/components/pages/doc/mobile-nav/mobile-nav.jsx @@ -145,7 +145,7 @@ const MobileNav = ({ className = null, sidebar, slug, basePath, customName, cust Date: Mon, 23 Dec 2024 13:54:03 +0100 Subject: [PATCH 23/27] fix: 100svh fixes for mobile --- public/inkeep/css/chat.css | 13 +++++++------ src/app/ai-chat/page.jsx | 2 +- .../pages/doc/mode-toggler/mode-toggler.jsx | 2 +- .../shared/inkeep-embedded/inkeep-embedded.jsx | 8 ++++---- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index a3f5118bfe..d005384f47 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -39,6 +39,7 @@ @media (max-width: 767px) { .intro-title { font-size: 24px; + margin: 0 0 12px; } } @@ -88,12 +89,7 @@ /* messages wrapper */ .ikp-messages__wrapper { - max-height: calc(100dvh - 400px); -} -@media (max-width: 767px) { - .ikp-messages__wrapper { - max-height: calc(100dvh - 460px); - } + max-height: calc(100svh - 400px); } /* message box */ @@ -108,6 +104,11 @@ background: #131415; border-color: #303236; } +@media (max-width: 612px) { + .ikp-ai-chat__message-box { + height: 64px; + } +} /* send button */ .ikp-ai-chat__send-button { background: #E4E5E7; diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index 2b895cc183..06e95190ee 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -42,7 +42,7 @@ const AiChatPage = async () => { /> diff --git a/src/components/pages/doc/mode-toggler/mode-toggler.jsx b/src/components/pages/doc/mode-toggler/mode-toggler.jsx index 6cb15856ae..b9165fc3de 100644 --- a/src/components/pages/doc/mode-toggler/mode-toggler.jsx +++ b/src/components/pages/doc/mode-toggler/mode-toggler.jsx @@ -37,7 +37,7 @@ ToggleButton.propTypes = { const ModeToggler = ({ className, isAiChatPage = false }) => (
diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index 27bf1e353f..841dbe6da8 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -8,10 +8,10 @@ import { aiChatSettings, baseSettings } from 'lib/inkeep-settings'; const Skeleton = () => (
- - - - + + + +
); From 875f159e23e64197ae64bae4c85143ef8e06e582 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 16:17:32 +0100 Subject: [PATCH 24/27] fix: fixes for mobile --- public/inkeep/css/chat.css | 32 +++++++++++++++++-- src/app/ai-chat/page.jsx | 4 +-- .../inkeep-embedded/inkeep-embedded.jsx | 2 +- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index d005384f47..a6f59f5a17 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -39,7 +39,6 @@ @media (max-width: 767px) { .intro-title { font-size: 24px; - margin: 0 0 12px; } } @@ -81,6 +80,23 @@ display: none; } +.ikp-ai-chat__scrollable-page-wrapper { + position: relative; +} +.ikp-ai-chat__scrollable-page-wrapper:before { + content: ''; + position: absolute; + z-index: 10; + top: 0; + left: 0; + width: 100%; + height: 12px; + background: linear-gradient(to bottom, white, transparent); +} +[data-theme='dark'] .ikp-ai-chat__scrollable-page-wrapper:before { + background: linear-gradient(to bottom, black, transparent); +} + /* content */ .ikp-content-parser__ul { padding-left: 28px; @@ -91,6 +107,16 @@ .ikp-messages__wrapper { max-height: calc(100svh - 400px); } +@media (max-width: 1023px) { + .ikp-messages__wrapper { + max-height: calc(100svh - 300px); + } +} +@media (max-width: 767px) { + .ikp-messages__wrapper { + max-height: calc(100svh - 328px); + } +} /* message box */ .ikp-ai-chat__message-box { @@ -104,9 +130,9 @@ background: #131415; border-color: #303236; } -@media (max-width: 612px) { +@media (max-width: 1023px) { .ikp-ai-chat__message-box { - height: 64px; + height: 56px; } } /* send button */ diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index 06e95190ee..293b34668d 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -42,10 +42,10 @@ const AiChatPage = async () => { /> - +

Neon AI Chat

diff --git a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx index 841dbe6da8..f7433a691c 100644 --- a/src/components/shared/inkeep-embedded/inkeep-embedded.jsx +++ b/src/components/shared/inkeep-embedded/inkeep-embedded.jsx @@ -10,7 +10,7 @@ const Skeleton = () => (
- +
); From 25a650d11f93d6694f494a007ad40a147abe9f0e Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 16:20:18 +0100 Subject: [PATCH 25/27] refactor: remove unused hideFooter --- src/app/ai-chat/page.jsx | 1 - src/components/shared/layout/layout.jsx | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/ai-chat/page.jsx b/src/app/ai-chat/page.jsx index 293b34668d..e6da7ece26 100644 --- a/src/app/ai-chat/page.jsx +++ b/src/app/ai-chat/page.jsx @@ -24,7 +24,6 @@ const AiChatPage = async () => { isHeaderSticky headerWithBorder hasThemesSupport - // hideFooter >
( <> @@ -47,7 +46,7 @@ const Layout = ({ > {children} - {!hideFooter &&
} +
@@ -67,7 +66,6 @@ Layout.propTypes = { isDocPage: PropTypes.bool, isAiChatPage: PropTypes.bool, hasThemesSupport: PropTypes.bool, - hideFooter: PropTypes.bool, searchIndexName: PropTypes.string, customType: PropTypes.shape({ title: PropTypes.string, From 963333d67f13f869efbecac249dc505c05a22989 Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 17:18:27 +0100 Subject: [PATCH 26/27] fix: add min-height for chat for horizontal mobiles --- public/inkeep/css/chat.css | 1 + 1 file changed, 1 insertion(+) diff --git a/public/inkeep/css/chat.css b/public/inkeep/css/chat.css index a6f59f5a17..da0302478b 100644 --- a/public/inkeep/css/chat.css +++ b/public/inkeep/css/chat.css @@ -105,6 +105,7 @@ /* messages wrapper */ .ikp-messages__wrapper { + min-height: 200px; max-height: calc(100svh - 400px); } @media (max-width: 1023px) { From 24e64cedd03d795b7981fc293e994342218cf63f Mon Sep 17 00:00:00 2001 From: Saimon Kataev Date: Mon, 23 Dec 2024 17:50:43 +0100 Subject: [PATCH 27/27] fix: use-cases sidebar position --- src/components/pages/doc/post/post.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pages/doc/post/post.jsx b/src/components/pages/doc/post/post.jsx index 11aeae2bc4..caa3520010 100644 --- a/src/components/pages/doc/post/post.jsx +++ b/src/components/pages/doc/post/post.jsx @@ -140,10 +140,10 @@ const Post = ({