From 66ba2a4ff52397f493367eb165c70b74343fa565 Mon Sep 17 00:00:00 2001
From: Kevin Wang <kwangsan@gmail.com>
Date: Wed, 18 Oct 2023 16:03:38 -0400
Subject: [PATCH] Developer AI VQA Cont. (#2186)

* leave comment on `.arrowdown`

* replace `mdxA` with `InlineLink`

* add TODOs on a11y

* update welcome text
- same as https://github.com/hashicorp/dev-portal/pull/2181/commits/6e70cc116e631144622c400383e8e02ed387cc28

* show finished element

* add TODOs

* lazyload `Finished` component

* remove button overrides

* update placeholder

* Update src/components/chatbox/welcome-message.tsx

* remove welcome message body text

* update back button styles

* fix: don't lazy import finished component

* adjust button size

* feat: adds ai feedback button to command bar header (#2203)

* feat: adds command bar right header slot

* update feedback form url

* update buttons

* adjut to arrow 16

* adds ai link

* open in new tab

---------

Co-authored-by: Kendall Strautman <kendallstrautman@gmail.com>
Co-authored-by: Kendall Strautman Swarthout <36613477+kendallstrautman@users.noreply.github.com>
---
 src/components/chatbox/Markdown.tsx           |  4 +-
 src/components/chatbox/chatbox.module.css     | 12 +--
 src/components/chatbox/chatbox.tsx            | 12 ++-
 src/components/chatbox/message.module.css     |  4 +-
 src/components/chatbox/message.tsx            | 86 ++++++++--------
 src/components/chatbox/welcome-message.tsx    | 97 +++++++------------
 .../command-bar/commands/chat/chat.module.css | 10 +-
 .../command-bar/commands/chat/index.tsx       | 29 +++++-
 .../dialog/command-bar-dialog.module.css      |  2 +-
 .../command-bar/components/dialog/header.tsx  | 38 ++++----
 src/components/command-bar/types.ts           |  1 +
 src/constants/ai-feedback-form.ts             |  2 +
 12 files changed, 154 insertions(+), 143 deletions(-)
 create mode 100644 src/constants/ai-feedback-form.ts

diff --git a/src/components/chatbox/Markdown.tsx b/src/components/chatbox/Markdown.tsx
index ddac282e8d..198ea550ba 100644
--- a/src/components/chatbox/Markdown.tsx
+++ b/src/components/chatbox/Markdown.tsx
@@ -10,7 +10,7 @@ import { rehypeCodePlugins } from 'lib/rehype-code-plugins'
 
 import { MdxPre } from 'components/dev-dot-content/mdx-components/mdx-code-blocks'
 import Text from 'components/text'
-import { MdxA } from 'components/dev-dot-content/mdx-components'
+import InlineLink from 'components/inline-link'
 
 interface MarkdownProps {
 	markdown: string
@@ -27,7 +27,7 @@ export default function Markdown({ markdown, className }: MarkdownProps) {
 					<Text /* Body/200/Medium */ size={200} weight="medium" {...props} />
 				),
 				// @ts-expect-error - ignore type mismatch
-				a: MdxA,
+				a: InlineLink,
 			}}
 			remarkPlugins={[remarkGfm]}
 			// @ts-expect-error - ignore type mismatch
diff --git a/src/components/chatbox/chatbox.module.css b/src/components/chatbox/chatbox.module.css
index cbe5f7b6a3..67f649d825 100644
--- a/src/components/chatbox/chatbox.module.css
+++ b/src/components/chatbox/chatbox.module.css
@@ -21,13 +21,6 @@
 }
 
 .arrowdown {
-	/* button overrides - start */
-	height: 28px;
-	width: 28px;
-	padding: unset;
-
-	/* button overrides - end */
-
 	position: absolute;
 	top: -52px;
 	right: 20px;
@@ -117,3 +110,8 @@
 	display: block;
 	padding: 8px 0 0 10px;
 }
+
+.externalLink {
+	composes: root from '/src/components/inline-link/inline-link.module.css';
+	composes: primary from '/src/components/inline-link/inline-link.module.css';
+}
diff --git a/src/components/chatbox/chatbox.tsx b/src/components/chatbox/chatbox.tsx
index 72052536ff..7407d80c4c 100644
--- a/src/components/chatbox/chatbox.tsx
+++ b/src/components/chatbox/chatbox.tsx
@@ -360,7 +360,7 @@ const ChatBox = () => {
 				<div className={s.bottom}>
 					{textContentScrollBarIsVisible && !isLoading ? (
 						<Button
-							className={s.arrowdown}
+							size="small"
 							icon={<IconArrowDownCircle16 />}
 							onClick={handleArrowDownClick}
 							aria-label="Scroll to bottom"
@@ -432,7 +432,15 @@ const ChatBox = () => {
 						AI Disclaimer: Content generated by Developer AI may contain errors,
 						inconsistencies, or outdated information. It is provided as-is
 						without any warranties or guarantees of accuracy. Use of this
-						feature and related content is governed by HashiCorp’s AI Policy.
+						feature and related content is governed by{' '}
+						<a
+							href="https://www.hashicorp.com/ai-integration-policy"
+							className={s.externalLink}
+							target="_blank"
+						>
+							HashiCorp’s AI Policy
+						</a>
+						.
 					</Text>
 				</div>
 			</form>
diff --git a/src/components/chatbox/message.module.css b/src/components/chatbox/message.module.css
index 2780d9499c..da159c97d9 100644
--- a/src/components/chatbox/message.module.css
+++ b/src/components/chatbox/message.module.css
@@ -74,7 +74,7 @@
 
 .assistantMessageFooter {
 	width: 100%;
-	padding: 24px 0 0;
+	padding: 24px 0;
 }
 
 .assistantMessageFooterHidden {
@@ -85,7 +85,7 @@
 	display: block;
 	width: 100%;
 	border-bottom: 1px solid var(--token-color-palette-neutral-300);
-	margin-bottom: 24px;
+	margin-bottom: 40px;
 }
 
 .actionButtons {
diff --git a/src/components/chatbox/message.tsx b/src/components/chatbox/message.tsx
index 9b26408c5c..e50b9f6bf7 100644
--- a/src/components/chatbox/message.tsx
+++ b/src/components/chatbox/message.tsx
@@ -15,6 +15,7 @@ import { IconThumbsUp24 } from '@hashicorp/flight-icons/svg-react/thumbs-up-24'
 import { IconWand24 } from '@hashicorp/flight-icons/svg-react/wand-24'
 import { IconAlertDiamondFill24 } from '@hashicorp/flight-icons/svg-react/alert-diamond-fill-24'
 
+import { Finished } from 'components/feedback-form/components/finished'
 import Button from 'components/button'
 import Text from 'components/text'
 import IconTile from 'components/icon-tile'
@@ -138,46 +139,55 @@ const AssistantMessage = ({
 					})}
 				>
 					<span className={s.divider} />
-					<div className={s.actionButtons}>
-						<Button
-							size="small"
-							color="secondary"
-							icon={
-								isCopied ? (
-									<IconCheckSquare24 height={12} width={12} />
-								) : (
-									<IconClipboard24 height={12} width={12} />
-								)
-							}
-							aria-label="Copy results to clipboard"
-							text={isCopied ? 'Copied' : 'Copy'}
-							onClick={handleCopy}
-						/>
+					{
+						/* if a rating has been selected, show Finished element */
+						rating !== 0 ? (
+							<Finished
+								text={
+									'Thank you! Your feedback will help us improve our AI experience.'
+								}
+							/>
+						) : (
+							<div className={s.actionButtons}>
+								<Button
+									size="small"
+									color="secondary"
+									icon={
+										isCopied ? (
+											<IconCheckSquare24 height={12} width={12} />
+										) : (
+											<IconClipboard24 height={12} width={12} />
+										)
+									}
+									aria-label="Copy results to clipboard"
+									text={isCopied ? 'Copied' : 'Copy'}
+									onClick={handleCopy}
+								/>
 
-						<Button
-							size="small"
-							color="secondary"
-							disabled={rating == 1}
-							icon={<IconThumbsUp24 height={12} width={12} />}
-							aria-label="Like this response"
-							onClick={async () => {
-								setRating(1) // do an optimistic UI update
-								await handleFeedback({ rating: 1 })
-							}}
-						/>
+								<Button
+									size="small"
+									color="secondary"
+									icon={<IconThumbsUp24 height={12} width={12} />}
+									aria-label="Like this response"
+									onClick={async () => {
+										setRating(1) // do an optimistic UI update
+										await handleFeedback({ rating: 1 })
+									}}
+								/>
 
-						<Button
-							size="small"
-							color="secondary"
-							disabled={rating == -1}
-							icon={<IconThumbsDown24 height={12} width={12} />}
-							aria-label="Dislike this response"
-							onClick={async () => {
-								setRating(-1) // do an optimistic UI update
-								await handleFeedback({ rating: -1 })
-							}}
-						/>
-					</div>
+								<Button
+									size="small"
+									color="secondary"
+									icon={<IconThumbsDown24 height={12} width={12} />}
+									aria-label="Dislike this response"
+									onClick={async () => {
+										setRating(-1) // do an optimistic UI update
+										await handleFeedback({ rating: -1 })
+									}}
+								/>
+							</div>
+						)
+					}
 				</div>
 			</div>
 
diff --git a/src/components/chatbox/welcome-message.tsx b/src/components/chatbox/welcome-message.tsx
index b06bc72ae3..68daf75909 100644
--- a/src/components/chatbox/welcome-message.tsx
+++ b/src/components/chatbox/welcome-message.tsx
@@ -14,6 +14,23 @@ import Text from 'components/text'
 
 import s from './welcome-message.module.css'
 
+// this is an arbitrary, light abstraction to separate
+// the content/copy from the component
+const rightColumn = [
+	{
+		icon: <IconUser16 />,
+		heading: 'Personalized recommendations',
+	},
+	{
+		icon: <IconDiscussionCircle16 />,
+		heading: 'Natural language conversations',
+	},
+	{
+		icon: <IconBulb16 />,
+		heading: 'Tap into the HashiCorp knowledge base',
+	},
+]
+
 export const WelcomeMessage = () => {
 	return (
 		<div className={s.welcome}>
@@ -26,80 +43,36 @@ export const WelcomeMessage = () => {
 						weight="medium"
 						size={400}
 					>
-						Welcome to Developer AI
+						Developer AI
 					</Heading>
 					<Text /* Body/100/Medium */
 						className={s.faint}
 						size={100}
 						weight="medium"
 					>
-						Your personal AI-powered assistant, we’re ready to help you get the
-						most out of Developer. Let’s get started on this journey together.
+						Your AI-powered companion for finding reference materials,
+						architectural guidance, and product examples from HashiCorp. Ask me
+						anything to get started.
 					</Text>
 				</div>
 				<div className={s.spacer} />
 			</div>
 			<div className={classNames(s.col, s.right)}>
-				<div className={s.row}>
-					<IconUser16 />
-					<div>
-						<Heading /* Display/100/Medium */
-							className={s.strong}
-							level={4}
-							weight="medium"
-							size={100}
-						>
-							Personalized recommendations
-						</Heading>
-						<Text /* Body/100/Regular */
-							size={100}
-							weight="regular"
-							className={s.faint}
-						>
-							Coming soon...
-						</Text>
-					</div>
-				</div>
-				<div className={s.row}>
-					<IconDiscussionCircle16 />
-					<div>
-						<Heading /* Display/100/Medium */
-							className={s.strong}
-							level={4}
-							weight="medium"
-							size={100}
-						>
-							Natural language conversations
-						</Heading>
-						<Text /* Body/100/Regular */
-							className={s.faint}
-							size={100}
-							weight="regular"
-						>
-							Coming soon...
-						</Text>
+				{rightColumn.map(({ icon, heading }, i) => (
+					<div className={s.row} key={i}>
+						{icon}
+						<div>
+							<Heading /* Display/100/Medium */
+								className={s.strong}
+								level={4}
+								weight="medium"
+								size={100}
+							>
+								{heading}
+							</Heading>
+						</div>
 					</div>
-				</div>
-				<div className={s.row}>
-					<IconBulb16 />
-					<div>
-						<Heading /* Display/100/Medium */
-							className={s.strong}
-							level={4}
-							weight="medium"
-							size={100}
-						>
-							Knowledge base
-						</Heading>
-						<Text /* Body/100/Regular */
-							className={s.faint}
-							size={100}
-							weight="regular"
-						>
-							Yes
-						</Text>
-					</div>
-				</div>
+				))}
 			</div>
 		</div>
 	)
diff --git a/src/components/command-bar/commands/chat/chat.module.css b/src/components/command-bar/commands/chat/chat.module.css
index f0c026eda1..b07473a705 100644
--- a/src/components/command-bar/commands/chat/chat.module.css
+++ b/src/components/command-bar/commands/chat/chat.module.css
@@ -4,13 +4,9 @@
  */
 
 .backButton {
+	color: var(--token-color-foreground-primary);
+
 	& svg {
-		/* 
-			This overrides the default svg color set in
-			command-bar-dialog.module.css, which allows the button's svg 
-			element to correctly inherit the currentColor.
-			TODO: refactor command icons to always rely on currentColor
-		*/
-		color: unset;
+		color: inherit;
 	}
 }
diff --git a/src/components/command-bar/commands/chat/index.tsx b/src/components/command-bar/commands/chat/index.tsx
index cc07875508..da86a42365 100644
--- a/src/components/command-bar/commands/chat/index.tsx
+++ b/src/components/command-bar/commands/chat/index.tsx
@@ -3,13 +3,16 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { IconArrowLeft24 } from '@hashicorp/flight-icons/svg-react/arrow-left-24'
+import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
+import { IconArrowLeft16 } from '@hashicorp/flight-icons/svg-react/arrow-left-16'
 import { CommandBarCommand } from 'components/command-bar/types'
 import ChatBox from 'components/chatbox/chatbox'
 import { useCommandBar } from 'components/command-bar'
 import Button from 'components/button'
+import ButtonLink from 'components/button-link'
 
 import s from './chat.module.css'
+import { AI_FEEDBACK_FORM } from 'constants/ai-feedback-form'
 
 // A button with an icon and text w/ "back" functionality
 const BackButton = () => {
@@ -18,10 +21,10 @@ const BackButton = () => {
 		<Button
 			className={s.backButton}
 			color="tertiary"
-			size="large"
-			icon={<IconArrowLeft24 />}
+			size="medium"
+			icon={<IconArrowLeft16 />}
 			iconPosition="leading"
-			text="Return to Search"
+			text="Return to search"
 			type="button"
 			onClick={() => {
 				setCurrentCommand('search')
@@ -29,13 +32,29 @@ const BackButton = () => {
 		/>
 	)
 }
+
+const FeedbackButton = () => {
+	return (
+		<ButtonLink
+			color="tertiary"
+			size="medium"
+			icon={<IconExternalLink16 />}
+			iconPosition="trailing"
+			text="Share feedback"
+			href={AI_FEEDBACK_FORM}
+			opensInNewTab
+		/>
+	)
+}
+
 const chatCommand: CommandBarCommand = {
 	name: 'chat',
 	icon: <BackButton />,
 	inputProps: {
-		placeholder: () => 'Hide me',
+		placeholder: () => 'Return to search',
 	},
 	DialogBody: ChatBox,
+	headerRightSlot: <FeedbackButton />,
 }
 
 export default chatCommand
diff --git a/src/components/command-bar/components/dialog/command-bar-dialog.module.css b/src/components/command-bar/components/dialog/command-bar-dialog.module.css
index 57336aea96..23a5bd9bc8 100644
--- a/src/components/command-bar/components/dialog/command-bar-dialog.module.css
+++ b/src/components/command-bar/components/dialog/command-bar-dialog.module.css
@@ -116,7 +116,7 @@
 	}
 }
 
-.badges {
+.headerRightSlotWrap {
 	/* composition */
 	composes: g-hide-on-mobile from global;
 
diff --git a/src/components/command-bar/components/dialog/header.tsx b/src/components/command-bar/components/dialog/header.tsx
index 1c54e9c369..d437732b0d 100644
--- a/src/components/command-bar/components/dialog/header.tsx
+++ b/src/components/command-bar/components/dialog/header.tsx
@@ -22,7 +22,6 @@ const CommandBarDialogHeader = () => {
 		inputRef,
 		removeTag,
 		setCurrentInputValue,
-		setCurrentCommand,
 	} = commandBarState
 
 	const inputPlaceholder = currentCommand.inputProps.placeholder({
@@ -57,7 +56,6 @@ const CommandBarDialogHeader = () => {
 						value={currentInputValue}
 					/>
 				)}
-
 				{currentInputValue ? (
 					<div className={s.clearButtonWrapper}>
 						<button
@@ -72,21 +70,27 @@ const CommandBarDialogHeader = () => {
 					</div>
 				) : null}
 			</div>
-			<div className={s.badges}>
-				<Badge
-					ariaLabel="Command key"
-					color="neutral"
-					icon={<CmdCtrlIcon />}
-					size="small"
-					type="outlined"
-				/>
-				<Badge
-					ariaLabel="K key"
-					color="neutral"
-					icon={<KIcon />}
-					size="small"
-					type="outlined"
-				/>
+			<div className={s.headerRightSlotWrap}>
+				{currentCommand.headerRightSlot ? (
+					currentCommand.headerRightSlot
+				) : (
+					<div className={s.badges}>
+						<Badge
+							ariaLabel="Command key"
+							color="neutral"
+							icon={<CmdCtrlIcon />}
+							size="small"
+							type="outlined"
+						/>
+						<Badge
+							ariaLabel="K key"
+							color="neutral"
+							icon={<KIcon />}
+							size="small"
+							type="outlined"
+						/>
+					</div>
+				)}
 			</div>
 		</div>
 	)
diff --git a/src/components/command-bar/types.ts b/src/components/command-bar/types.ts
index 6640143dac..a03f435731 100644
--- a/src/components/command-bar/types.ts
+++ b/src/components/command-bar/types.ts
@@ -21,6 +21,7 @@ interface CommandBarCommand {
 		}) => string
 	}
 	DialogBody?: () => ReactElement
+	headerRightSlot?: ReactElement
 }
 
 type CommandBarTag = {
diff --git a/src/constants/ai-feedback-form.ts b/src/constants/ai-feedback-form.ts
new file mode 100644
index 0000000000..2345b8ecae
--- /dev/null
+++ b/src/constants/ai-feedback-form.ts
@@ -0,0 +1,2 @@
+export const AI_FEEDBACK_FORM =
+	'https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_1yKUuqzjnMZWk3c'