Developer AI VQA Cont. (#2186)

* leave comment on `.arrowdown` * replace `mdxA` with `InlineLink` * add TODOs on a11y * update welcome text - same as 6e70cc1 * 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 <[email protected]> Co-authored-by: Kendall Strautman Swarthout <[email protected]>
hashicorp · Oct 18, 2023 · 66ba2a4 · 66ba2a4 · vercel · Oct 18, 2023
1 parent bc58e5a
commit 66ba2a4
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 143 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,24 +21,40 @@ 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')
 			}}
 		/>
 	)
 }
+
+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
@@ -116,7 +116,7 @@
 	}
 }
 
-.badges {
+.headerRightSlotWrap {
 	/* composition */
 	composes: g-hide-on-mobile from global;