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) {
),
// @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 = () => {
{textContentScrollBarIsVisible && !isLoading ? (
}
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{' '}
+
+ HashiCorp’s AI Policy
+
+ .
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 = ({
})}
>
-
-
- ) : (
-
- )
- }
- aria-label="Copy results to clipboard"
- text={isCopied ? 'Copied' : 'Copy'}
- onClick={handleCopy}
- />
+ {
+ /* if a rating has been selected, show Finished element */
+ rating !== 0 ? (
+
+ ) : (
+
+
+ ) : (
+
+ )
+ }
+ aria-label="Copy results to clipboard"
+ text={isCopied ? 'Copied' : 'Copy'}
+ onClick={handleCopy}
+ />
- }
- aria-label="Like this response"
- onClick={async () => {
- setRating(1) // do an optimistic UI update
- await handleFeedback({ rating: 1 })
- }}
- />
+ }
+ aria-label="Like this response"
+ onClick={async () => {
+ setRating(1) // do an optimistic UI update
+ await handleFeedback({ rating: 1 })
+ }}
+ />
- }
- aria-label="Dislike this response"
- onClick={async () => {
- setRating(-1) // do an optimistic UI update
- await handleFeedback({ rating: -1 })
- }}
- />
-
+
}
+ aria-label="Dislike this response"
+ onClick={async () => {
+ setRating(-1) // do an optimistic UI update
+ await handleFeedback({ rating: -1 })
+ }}
+ />
+
+ )
+ }
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: ,
+ heading: 'Personalized recommendations',
+ },
+ {
+ icon: ,
+ heading: 'Natural language conversations',
+ },
+ {
+ icon: ,
+ heading: 'Tap into the HashiCorp knowledge base',
+ },
+]
+
export const WelcomeMessage = () => {
return (
@@ -26,80 +43,36 @@ export const WelcomeMessage = () => {
weight="medium"
size={400}
>
- Welcome to Developer AI
+ Developer AI
- 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.
-
-
-
-
- Personalized recommendations
-
-
- Coming soon...
-
-
-
-
-
-
-
- Natural language conversations
-
-
- Coming soon...
-
+ {rightColumn.map(({ icon, heading }, i) => (
+
+ {icon}
+
+
+ {heading}
+
+
-
-
-
-
-
- Knowledge base
-
-
- Yes
-
-
-
+ ))}
)
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 = () => {
}
+ size="medium"
+ icon={ }
iconPosition="leading"
- text="Return to Search"
+ text="Return to search"
type="button"
onClick={() => {
setCurrentCommand('search')
@@ -29,13 +32,29 @@ const BackButton = () => {
/>
)
}
+
+const FeedbackButton = () => {
+ return (
+ }
+ iconPosition="trailing"
+ text="Share feedback"
+ href={AI_FEEDBACK_FORM}
+ opensInNewTab
+ />
+ )
+}
+
const chatCommand: CommandBarCommand = {
name: 'chat',
icon: ,
inputProps: {
- placeholder: () => 'Hide me',
+ placeholder: () => 'Return to search',
},
DialogBody: ChatBox,
+ headerRightSlot: ,
}
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 ? (
{
) : null}
-
-
}
- size="small"
- type="outlined"
- />
-
}
- size="small"
- type="outlined"
- />
+
+ {currentCommand.headerRightSlot ? (
+ currentCommand.headerRightSlot
+ ) : (
+
+ }
+ size="small"
+ type="outlined"
+ />
+ }
+ size="small"
+ type="outlined"
+ />
+
+ )}
)
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'