Developer AI (#2128)

AI-powered Q&A w/ Document Citation 

Builds on work from
- #2148
- #2151
- #2155
- #2157
- #2161
- #2163

next-auth.d.ts

@@ -31,6 +31,8 @@ declare module 'next-auth' {
 			/** The user's nickname. */
 			nickname?: string | null
 		} & DefaultSession['user']
+		/* Key-value store of additional session data */
+		meta: Record<string, unknown>
 	}
 
 	/** The OAuth profile returned from your provider */

package.json

@@ -148,6 +148,7 @@
 		"@tanstack/react-query-devtools": "^4.0.10",
 		"@types/cors": "^2.8.12",
 		"@types/google-spreadsheet": "^3.2.2",
+		"@vercel/edge-config": "^0.2.1",
 		"@vercel/fetch": "^6.2.0",
 		"adm-zip": "^0.5.9",
 		"algoliasearch": "^4.13.0",
@@ -171,6 +172,7 @@
 		"mdast": "^3.0.0",
 		"mdast-util-to-string": "^2.0.0",
 		"moize": "^6.1.0",
+		"ms": "^2.1.3",
 		"next": "^13.0.5",
 		"next-auth": "^4.23.1",
 		"next-mdx-remote": "^3.0.8",
@@ -190,6 +192,7 @@
 		"react-hot-toast": "^2.2.0",
 		"react-instantsearch-hooks-web": "^6.33.0",
 		"react-intersection-observer": "^8.33.1",
+		"react-markdown": "^8.0.7",
 		"react-player": "^2.9.0",
 		"rehype-sanitize": "^5.0.1",
 		"remark-gfm": "^3.0.1",

src/components/chatbox/ai-feature-toast.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react'
+import Cookies from 'js-cookie'
+import { IconWand24 } from '@hashicorp/flight-icons/svg-react/wand-24'
+
+import { toast, ToastColor } from 'components/toast'
+import useAuthentication from 'hooks/use-authentication'
+
+import { CmdCtrlIcon } from 'components/command-bar/components/cmd-ctrl-icon'
+import { KIcon } from 'components/command-bar/components/k-icon'
+import Badge from 'components/badge'
+
+const COOKIE_IGNORE_AI_TOAST = 'dev-dot-ignore-ai-toast'
+const COOKIE_HAS_SEEN_AI_TOAST = 'dev-dot-has-seen-ai-toast'
+const COOKIE_EXPIRES_AT = new Date('12/25/2024') // arbitrary date
+
+const TOAST_AUTO_DISMISS_MS = 15000
+
+export function AIFeatureToast() {
+	const { session } = useAuthentication()
+
+	useEffect(() => {
+		// skip toast if we're past the expiration date
+		if (new Date() > COOKIE_EXPIRES_AT) {
+			return
+		}
+
+		// skip toast if user has previously dismissed it
+		if (Cookies.get(COOKIE_IGNORE_AI_TOAST)) {
+			return
+		}
+
+		// skip toast if it's already been seen
+		if (Cookies.get(COOKIE_HAS_SEEN_AI_TOAST)) {
+			return
+		}
+
+		if (session?.meta.isAIEnabled) {
+			toast({
+				color: ToastColor.highlight,
+				icon: <IconWand24 />,
+				title: 'Welcome to the Developer AI closed beta',
+				description: (
+					<>
+						Try it out in our{' '}
+						<Badge
+							ariaLabel="Command or control key"
+							color="neutral-dark-mode"
+							icon={<CmdCtrlIcon />}
+							size="small"
+						/>{' '}
+						<Badge
+							ariaLabel="K key"
+							color="neutral-dark-mode"
+							icon={<KIcon />}
+							size="small"
+						/>{' '}
+						menu!
+					</>
+				),
+				autoDismiss: TOAST_AUTO_DISMISS_MS,
+				onDismissCallback: () => {
+					// when user dismisses the toast, we should ignore it going forwards
+					Cookies.set(COOKIE_IGNORE_AI_TOAST, true, {
+						expires: COOKIE_EXPIRES_AT,
+					})
+					// remove extra cookie
+					Cookies.remove(COOKIE_HAS_SEEN_AI_TOAST)
+				},
+				dismissOnRouteChange: false,
+			})
+
+			// if the user didn't explicitly dismiss the toast, show it again in 24 hours
+			// this is a simple means to boost discoverability / awareness
+			Cookies.set(COOKIE_HAS_SEEN_AI_TOAST, true, {
+				expires: 1, // https://github.com/js-cookie/js-cookie?tab=readme-ov-file#expires
+			})
+		}
+	}, [session?.meta.isAIEnabled])
+
+	// no dom elements are needed for this component
+	return null
+}

src/components/chatbox/chatbox.module.css

@@ -0,0 +1,105 @@
+.chat {
+	height: 100%;
+	background: var(--token-color-palette-neutral-100);
+	display: flex;
+	flex-direction: column;
+	z-index: 9999;
+	justify-content: space-between;
+}
+
+.messageList {
+	overflow-y: auto;
+	max-height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+.arrowdown {
+	position: absolute;
+	top: -52px;
+	right: 20px;
+}
+
+.bottom {
+	position: relative; /* for absolute positioned arrow down button */
+	padding: 16px 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	background: var(--token-color-surface-primary);
+	border-top: 1px solid var(--token-color-border-primary);
+}
+
+.question {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-end;
+	padding: 8px 0;
+	gap: 12px;
+	background: var(--token-color-surface-primary);
+}
+.questionIcon {
+	height: 40px;
+	width: 40px;
+	padding: 8px;
+
+	/* See prior art: https://hashicorp-mktg.sourcegraph.com/github.com/hashicorp/web/-/blob/apps/www/views/state-of-the-cloud/2021/components/hero/style.module.css?L18-19 */
+	& :global(.loading) {
+		animation: hds-flight-icon-animation-rotation 9s linear infinite;
+		animation-duration: 0.7s;
+	}
+}
+
+.purple {
+	color: var(--token-color-foreground-highlight-on-surface);
+}
+
+@keyframes hds-flight-icon-animation-rotation {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	box-sizing: border-box;
+	font: inherit;
+	font-size: 100%;
+	vertical-align: baseline;
+	text-decoration: none;
+	-webkit-tap-highlight-color: transparent;
+	outline: transparent;
+}
+
+.textarea {
+	composes: g-focus-ring-from-box-shadow from global;
+
+	/* Body/300/Medium */
+	composes: hds-typography-body-300 from global;
+	composes: hds-font-weight-medium from global;
+	appearance: none;
+	border-radius: 5px;
+	padding: 8px 4px;
+	display: flex;
+	flex: 1;
+	height: 100%;
+	resize: none;
+	background: transparent;
+}
+.button {
+	height: 24px;
+	width: 24px;
+	background: transparent;
+	&:focus {
+		outline: auto;
+	}
+}
+
+.disclaimer {
+	color: var(--token-color-foreground-faint); /* #656a76 */
+	display: block;
+	padding: 8px 0 0 10px;
+}