-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ResponseActions): Add ResponseActions to Messages
Messages should have buttons for feedback and other actions. Users should be able to configure as many of these as they wish on a per message basis.
- Loading branch information
1 parent
a6cfe66
commit 7f419dd
Showing
11 changed files
with
260 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
packages/module/src/ResponseActions/ResponseActionButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; | ||
|
|
||
| export interface ResponseActionButtonProps { | ||
| /** Aria-label for the button */ | ||
| ariaLabel?: string; | ||
| /** Icon for the button */ | ||
| icon: React.ReactNode; | ||
| /** On-click handler for the button */ | ||
| onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined; | ||
| /** Class name for the button */ | ||
| className?: string; | ||
| /** Props to control if the attach button should be disabled */ | ||
| isDisabled?: boolean; | ||
| /** Content shown in the tooltip */ | ||
| tooltipContent?: string; | ||
| /** Props to control the PF Tooltip component */ | ||
| tooltipProps?: TooltipProps; | ||
| } | ||
|
|
||
| export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps> = ({ | ||
| ariaLabel, | ||
| className, | ||
| icon, | ||
| isDisabled, | ||
| onClick, | ||
| tooltipContent, | ||
| tooltipProps | ||
| }) => ( | ||
| <Tooltip | ||
| id={`pf-chatbot__tooltip-response-action-${tooltipContent}`} | ||
| content={tooltipContent} | ||
| position="bottom" | ||
| entryDelay={tooltipProps?.entryDelay || 0} | ||
| exitDelay={tooltipProps?.exitDelay || 0} | ||
| distance={tooltipProps?.distance || 8} | ||
| animationDuration={tooltipProps?.animationDuration || 0} | ||
| {...tooltipProps} | ||
| > | ||
| <Button | ||
| variant="plain" | ||
| className={`pf-chatbot__button--response-action ${className ?? ''}`} | ||
| aria-describedby={`pf-chatbot__tooltip-response-action-${tooltipContent}`} | ||
| aria-label={ariaLabel} | ||
| icon={ | ||
| <Icon isInline size="lg"> | ||
| {icon} | ||
| </Icon> | ||
| } | ||
| isDisabled={isDisabled} | ||
| onClick={onClick} | ||
| size="sm" | ||
| ></Button> | ||
| </Tooltip> | ||
| ); | ||
|
|
||
| export default ResponseActionButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .pf-chatbot__response-actions { | ||
| display: grid; | ||
| gap: var(--pf-t--global--spacer--xs); | ||
| grid-template-columns: repeat(auto-fit, minmax(0, max-content)); | ||
|
|
||
| .pf-v6-c-button { | ||
| border-radius: var(--pf-t--global--border--radius--pill); | ||
| width: 2.3125rem; | ||
| height: 2.3125rem; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| .pf-v6-c-button__icon { | ||
| color: var(--pf-t--global--icon--color--subtle); | ||
| } | ||
|
|
||
| // Interactive states | ||
| &:hover, | ||
| &:focus { | ||
| .pf-v6-c-button__icon { | ||
| color: var(--pf-t--global--icon--color--subtle); | ||
| } | ||
| } | ||
| } | ||
| } |
101 changes: 101 additions & 0 deletions
101
packages/module/src/ResponseActions/ResponseActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from 'react'; | ||
| import { | ||
| CopyIcon, | ||
| ExternalLinkAltIcon, | ||
| VolumeUpIcon, | ||
| OutlinedThumbsUpIcon, | ||
| OutlinedThumbsDownIcon | ||
| } from '@patternfly/react-icons'; | ||
| import ResponseActionButton from './ResponseActionButton'; | ||
| import { TooltipProps } from '@patternfly/react-core'; | ||
|
|
||
| export interface ActionProps { | ||
| /** Aria-label for the button */ | ||
| ariaLabel?: string; | ||
| /** On-click handler for the button */ | ||
| onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined; | ||
| /** Class name for the button */ | ||
| className?: string; | ||
| /** Props to control if the attach button should be disabled */ | ||
| isDisabled?: boolean; | ||
| /** Content shown in the tooltip */ | ||
| tooltipContent?: string; | ||
| /** Props to control the PF Tooltip component */ | ||
| tooltipProps?: TooltipProps; | ||
| } | ||
|
|
||
| export interface ResponseActionProps { | ||
| /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */ | ||
| actions: { | ||
| positive?: ActionProps; | ||
| negative?: ActionProps; | ||
| copy?: ActionProps; | ||
| share?: ActionProps; | ||
| listen?: ActionProps; | ||
| }; | ||
| } | ||
|
|
||
| export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => { | ||
| const { positive, negative, copy, share, listen } = actions; | ||
| return ( | ||
| <div className="pf-chatbot__response-actions"> | ||
| {positive && ( | ||
| <ResponseActionButton | ||
| ariaLabel={positive.ariaLabel ?? 'Good response'} | ||
| onClick={positive.onClick} | ||
| className={positive.className} | ||
| isDisabled={positive.isDisabled} | ||
| tooltipContent={positive.tooltipContent ?? 'Good response'} | ||
| tooltipProps={positive.tooltipProps} | ||
| icon={<OutlinedThumbsUpIcon />} | ||
| ></ResponseActionButton> | ||
| )} | ||
| {negative && ( | ||
| <ResponseActionButton | ||
| ariaLabel={negative.ariaLabel ?? 'Bad response'} | ||
| onClick={negative.onClick} | ||
| className={negative.className} | ||
| isDisabled={negative.isDisabled} | ||
| tooltipContent={negative.tooltipContent ?? 'Bad response'} | ||
| tooltipProps={negative.tooltipProps} | ||
| icon={<OutlinedThumbsDownIcon />} | ||
| ></ResponseActionButton> | ||
| )} | ||
| {copy && ( | ||
| <ResponseActionButton | ||
| ariaLabel={copy.ariaLabel ?? 'Copy'} | ||
| onClick={copy.onClick} | ||
| className={copy.className} | ||
| isDisabled={copy.isDisabled} | ||
| tooltipContent={copy.tooltipContent ?? 'Copy'} | ||
| tooltipProps={copy.tooltipProps} | ||
| icon={<CopyIcon />} | ||
| ></ResponseActionButton> | ||
| )} | ||
| {share && ( | ||
| <ResponseActionButton | ||
| ariaLabel={share.ariaLabel ?? 'Share'} | ||
| onClick={share.onClick} | ||
| className={share.className} | ||
| isDisabled={share.isDisabled} | ||
| tooltipContent={share.tooltipContent ?? 'Share'} | ||
| tooltipProps={share.tooltipProps} | ||
| icon={<ExternalLinkAltIcon />} | ||
| ></ResponseActionButton> | ||
| )} | ||
| {listen && ( | ||
| <ResponseActionButton | ||
| ariaLabel={listen.ariaLabel ?? 'Listen'} | ||
| onClick={listen.onClick} | ||
| className={listen.className} | ||
| isDisabled={listen.isDisabled} | ||
| tooltipContent={listen.tooltipContent ?? 'Listen'} | ||
| tooltipProps={listen.tooltipProps} | ||
| icon={<VolumeUpIcon />} | ||
| ></ResponseActionButton> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ResponseActions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { default } from './ResponseActions'; | ||
|
|
||
| export * from './ResponseActions'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters