From f52831b0f22641752916c169d60163d7a14890df Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 25 Sep 2024 14:36:50 +0530 Subject: [PATCH 1/5] feat(ai-chat-error): add stories --- .../ai-chat-log/stories/errors.stories.tsx | 386 ++++++++++++++++++ 1 file changed, 386 insertions(+) create mode 100644 packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx diff --git a/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx new file mode 100644 index 0000000000..01a24885fd --- /dev/null +++ b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx @@ -0,0 +1,386 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable import/no-extraneous-dependencies */ + +import { Alert } from "@twilio-paste/alert"; +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; +import { HelpText } from "@twilio-paste/help-text"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon"; +import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon"; +import { RepeatIcon } from "@twilio-paste/icons/esm/RepeatIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; +import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; +import { ClearEditorPlugin } from "@twilio-paste/lexical-library"; +import { Text } from "@twilio-paste/text"; +import * as React from "react"; + +import { Callout, CalloutHeading, CalloutText } from "../../callout/src"; +import { + SummaryDetail, + SummaryDetailContent, + SummaryDetailHeading, + SummaryDetailHeadingContent, + SummaryDetailToggleButton, +} from "../../summary-detail/src"; +import { + AIChatLog, + AIChatMessage, + AIChatMessageActionCard, + AIChatMessageActionGroup, + AIChatMessageAuthor, + AIChatMessageBody, +} from "../src"; + +export default { + title: "Components/AI Chat Log/Errors", + component: AIChatLog, +}; + +const Composer = (): JSX.Element => { + return ( + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + ); +}; + +export const MessageGenerationError = (): React.ReactNode => { + return ( + <> + + + + You + + Message filtered (30007) + + + Good Bot + + + There was an error generating a response. + + Please try again, if the error persists please contact us. + + + + + + + + + + + + + + + ); +}; + +MessageGenerationError.parameters = { + a11y: { + disable: true, + }, +}; + +export const AIActionClickError = (): React.ReactNode => { + return ( + <> + + + + You + + Message filtered (30007) + + + Good Bot + + We recommend reviewing our guidelines on filtering and scaling to better manage high volumes of messages. + + + + + + + + + + The action couldn’t be completed. + + Please try again, if the error persists please contact us. + + + + + + + + + + ); +}; + +AIActionClickError.parameters = { + a11y: { + disable: true, + }, +}; + +export const ActionGroupError = (): React.ReactNode => { + return ( + <> + + + + You + + Message body text + + + Good Bot + + Message body text + + + + + + + View data sources + + + + Data Content + + + + + + Is this helpful? + + + + + + + + + The action couldn’t be completed. Please try again. + + + + + + + + ); +}; + +ActionGroupError.parameters = { + a11y: { + disable: true, + }, +}; + +export const SendingMessageError = (): React.ReactNode => { + return ( + <> + + + + You + + + Messages from +1 234-292-2349 are failing due to the following top 3 errors which occurred in the past 7 + days: + + + + + + + + + + Is this helpful? + + + + + + + + + Good Bot + + Message body text + + + + + + + View data sources + + + + Data Content + + + + + + + Message failed to send + + + + + + + + + + + + ); +}; + +SendingMessageError.parameters = { + a11y: { + disable: true, + }, +}; + +export const SystemError = (): React.ReactNode => { + return ( + <> + + + + You + + Message body text + + + Good Bot + + Message body text + + + + + + + View data sources + + + + Data Content + + + + + + Is this helpful? + + + + + + + + + + + + + +
+ Something went wrong. +
+ If this issue persists please contact us through our help center. + + + + + + + + ); +}; + +SystemError.parameters = { + a11y: { + disable: true, + }, +}; From 12c83bcca68733b49024d606e7d48650670b3131 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 25 Sep 2024 14:47:07 +0530 Subject: [PATCH 2/5] feat(ai-chat-error): add AI responses errors to error state pattern --- .../src/pages/patterns/error-state/index.mdx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/paste-website/src/pages/patterns/error-state/index.mdx b/packages/paste-website/src/pages/patterns/error-state/index.mdx index e125eb58fa..7cbc312bc4 100644 --- a/packages/paste-website/src/pages/patterns/error-state/index.mdx +++ b/packages/paste-website/src/pages/patterns/error-state/index.mdx @@ -361,6 +361,26 @@ When possible, use an icon and color to indicate an error. When using only an ic
+### AI responses errors + + + + + + + + + + + + + + + + +
TypeRecommended phrasing(s)Notes
An error generating or regenerating a responseThere was an error generating a response.
Please try again, if the error persists please contact us.		If the error is associated to the user’s input having incomplete information use “Please rephrase your message”
+
+ Work with engineers to try to avoid an endless “try again” loop. Explore whether you can offer a series of things to check if the user hits a particular error several times in a row. ## Variations @@ -377,7 +397,7 @@ An empty state is also an error state when content fails to load. Error empty st ### Metrics cards -When cards are used as part of a dashboard to display metrics, error states can occur on individual cards because the data populating a particular card isn’t available. Since these cards are usually small, use error iconography paired with a 3-5 word error message. +When cards are used as part of a dashboard to display metrics, error states can occur on individual cards because the data populating a particular card isn’t available. Since these cards are usually small, use error iconography paired with a 3-5 word error message. ## Specific component guidance From e1e59e4c31d5faa73b47df1f82accdf80782d11d Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 25 Sep 2024 17:01:50 +0530 Subject: [PATCH 3/5] feat(ai-chat-error): add error states to docs --- .../ai-chat-log/stories/errors.stories.tsx | 14 - .../component-examples/AIChatLogExamples.ts | 406 +++++++++++++++++- .../pages/components/ai-chat-log/index.mdx | 254 ++++++++++- 3 files changed, 640 insertions(+), 34 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx index 01a24885fd..aacdaa552d 100644 --- a/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx @@ -270,20 +270,6 @@ export const SendingMessageError = (): React.ReactNode => { Good Bot Message body text - - - - - - - View data sources - - - - Data Content - - - diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts index 5c77fae426..0e736ef9ae 100644 --- a/packages/paste-website/src/component-examples/AIChatLogExamples.ts +++ b/packages/paste-website/src/component-examples/AIChatLogExamples.ts @@ -188,7 +188,7 @@ const AIChatLogExample = () => { - Good Bot + Good Bot {}} /> @@ -308,3 +308,407 @@ const AvatarExample = () => { render( )`.trim(); + +export const messageGenerationError = ` +const MessageGenerationError = () => { + return ( + <> + + + + You + + Message filtered (30007) + + + Good Bot + + + There was an error generating a response. + + Please try again, if the error persists please contact us. + + + + + + + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + + + ); +}; + +render( + +)`.trim(); + +export const aIActionClickError = ` +const AIActionClickError = () => { + return ( + <> + + + + You + + Message filtered (30007) + + + Good Bot + + We recommend reviewing our guidelines on filtering and scaling to better manage high volumes of messages. + + + + + + + + + + The action couldn’t be completed. + + Please try again, if the error persists please contact us. + + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + + + ); +}; + +render( + +)`.trim(); + +export const actionGroupError = ` +const ActionGroupError = () => { + return ( + <> + + + + You + + Message body text + + + Good Bot + + Message body text + + + + + + View data sources + + + Data Content + + + + + + Is this helpful? + + + + + + + + + The action couldn’t be completed. Please try again. + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + + + ); +}; + +render( + +)`.trim(); + +export const sendingMessageError = ` +const SendingMessageError = () => { + return ( + <> + + + + You + + + Messages from +1 234-292-2349 are failing due to the following top 3 errors which occurred in the past 7 + days: + + + + + + + + + + Is this helpful? + + + + + + + + + Good Bot + + Message body text + + + + Message failed to send + + + + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + + + ); +}; + +render( + +)`.trim(); + +export const systemError = ` +const SystemError = () => { + return ( + <> + + + + You + + Message body text + + + Good Bot + + Message body text + + + + + + + View data sources + + + + Data Content + + + + + + Is this helpful? + + + + + + + + + + + + + +
+ Something went wrong. +
+ If this issue persists please contact us through our help center. + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + > + + + + + + + + + + ); +}; + +render( + +)`.trim(); diff --git a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx index 49ac0088c0..0563aaa6d8 100644 --- a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx +++ b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx @@ -6,47 +6,63 @@ export const meta = { slug: "/components/ai-chat-log/", }; -import { uid } from "@twilio-paste/uid-library"; -import { HelpText } from "@twilio-paste/help-text"; -import { Button } from "@twilio-paste/button"; -import { ButtonGroup } from "@twilio-paste/button-group"; -import { Stack } from "@twilio-paste/stack"; -import { Paragraph } from "@twilio-paste/paragraph"; import { AIChatLog, + AIChatLogger, AIChatMessage, + AIChatMessageActionCard, + AIChatMessageActionGroup, AIChatMessageAuthor, AIChatMessageBody, AIChatMessageLoading, - AIChatLogger, useAIChatLogger, - AIChatMessageActionCard, - AIChatMessageActionGroup, } from "@twilio-paste/ai-chat-log"; -import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; -import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; -import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon"; +import Changelog from "@twilio-paste/ai-chat-log/CHANGELOG.md"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { HelpText } from "@twilio-paste/help-text"; import { CopyIcon } from "@twilio-paste/icons/esm/CopyIcon"; import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon"; -import Changelog from "@twilio-paste/ai-chat-log/CHANGELOG.md"; +import { RefreshIcon } from "@twilio-paste/icons/esm/RefreshIcon"; +import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; +import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Stack } from "@twilio-paste/stack"; +import { uid } from "@twilio-paste/uid-library"; -import { SidebarCategoryRoutes } from "../../../constants"; import Logo from "../../../assets/logo.svg"; +import { SidebarCategoryRoutes } from "../../../constants"; +import packageJson from "@twilio-paste/ai-chat-log/package.json"; +import { Anchor } from "@twilio-paste/anchor"; +import { Box } from "@twilio-paste/box"; +import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { RepeatIcon } from "@twilio-paste/icons/esm/RepeatIcon"; +import { ClearEditorPlugin } from "@twilio-paste/lexical-library"; +import { SummaryDetail, SummaryDetailContent, SummaryDetailHeading, SummaryDetailHeadingContent, SummaryDetailToggleButton } from "@twilio-paste/summary-detail"; import { + aIActionClickError, + actionGroupError, + aiChatLoggerExample, + avatarExample, basicBotMessage, basicHumanMessage, + botWithBodyActions, botWithFeedback, - botWithLoadingStopButton, botWithLoading, + botWithLoadingStopButton, kitchenSink, - aiChatLoggerExample, - botWithBodyActions, - avatarExample, + messageGenerationError, + sendingMessageError, + systemError, } from "../../../component-examples/AIChatLogExamples"; -import packageJson from "@twilio-paste/ai-chat-log/package.json"; import ComponentPageLayout from "../../../layouts/ComponentPageLayout"; import { getFeature, getNavigationData } from "../../../utils/api"; +import { Text } from "@twilio-paste/text"; +import { Alert } from "@twilio-paste/alert"; export default ComponentPageLayout; @@ -362,3 +378,203 @@ You can push or pop a chat based on an action or event. In this example it's bas ## Composition Notes Keep any generated responses from the AI contained in the `AIChatMessageBody` component. Each chat message should only have one `AIChatMessageBody` component. + +### Error States + +- Don’t accumulate error states in one screen, just display one error at a time, starting with the most critical one, until the user recovers. +- Check content guidelines for [error states](/patterns/error-state#recommended-phrasings-and-templates). +- Include another way for users to contact support if the error persists. + +#### Message content error + +**An error generating or regenerating a response** + +- Use a Callout to show an inline error. +- The Callout should replace the body message if no response was generated, or appear between the AI Chat Message Body and the AI Chat Message Action if the response is incomplete. +- Include an in-chat action to recover (For example: regenerate or try again) +- Include a way for users to contact support if the error persists. + + + {messageGenerationError} + + +**An error when clicking on an Action that generates an AI response** + +- The Callout is placed under the response and action +- Include another way for users to contact support if the error persists. + + + {aIActionClickError} + + +#### AI Chat Message Action Group Error + +**An error when clicking actions on AI messages (clicking buttons, links)** + +- Use Help text error variant for actions not directly tied to generating a response or continuing the conversation, such as copying text or rating a response. + + + {actionGroupError} + + +#### Sending errors + +**An error sending a message** + +- The error is placed in the Message Action Card +- Include an action to recover + + + {sendingMessageError} + + +#### System errors + +**Chat History Errors, Timeouts, Network errors...etc.** + +- An Alert will be placed above the chat composer +- The Alert will be dismissed once the user refreshes the page or when the error is resolved + + + {systemError} + From fa19efedd27468dec036011834c0b39cb7500f62 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 27 Sep 2024 19:20:20 +0530 Subject: [PATCH 4/5] feat(ai-chat-error): update docs --- .../paste-website/src/pages/components/ai-chat-log/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx index 0563aaa6d8..feb662d0cb 100644 --- a/packages/paste-website/src/pages/components/ai-chat-log/index.mdx +++ b/packages/paste-website/src/pages/components/ai-chat-log/index.mdx @@ -390,7 +390,7 @@ Keep any generated responses from the AI contained in the `AIChatMessageBody` co **An error generating or regenerating a response** - Use a Callout to show an inline error. -- The Callout should replace the body message if no response was generated, or appear between the AI Chat Message Body and the AI Chat Message Action if the response is incomplete. +- The Callout should replace the body message if no response was generated, or appear between the `AIChatMessageBody` and the `AIChatMessageActionGroup` if the response is incomplete. - Include an in-chat action to recover (For example: regenerate or try again) - Include a way for users to contact support if the error persists. @@ -541,7 +541,7 @@ Keep any generated responses from the AI contained in the `AIChatMessageBody` co **Chat History Errors, Timeouts, Network errors...etc.** -- An Alert will be placed above the chat composer +- An Alert will be placed above the Chat Composer - The Alert will be dismissed once the user refreshes the page or when the error is resolved Date: Mon, 30 Sep 2024 21:12:02 +0530 Subject: [PATCH 5/5] feat(ai-chat-error): fix Sending Message Error story --- .../ai-chat-log/stories/errors.stories.tsx | 12 ++++++------ .../src/component-examples/AIChatLogExamples.ts | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx index aacdaa552d..e4f4f62fa4 100644 --- a/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/errors.stories.tsx @@ -232,10 +232,8 @@ export const SendingMessageError = (): React.ReactNode => { return ( <> - - - You - + + Good Bot Messages from +1 234-292-2349 are failing due to the following top 3 errors which occurred in the past 7 days: @@ -266,8 +264,10 @@ export const SendingMessageError = (): React.ReactNode => { - - Good Bot + + + You + Message body text diff --git a/packages/paste-website/src/component-examples/AIChatLogExamples.ts b/packages/paste-website/src/component-examples/AIChatLogExamples.ts index 0e736ef9ae..a1622bae7b 100644 --- a/packages/paste-website/src/component-examples/AIChatLogExamples.ts +++ b/packages/paste-website/src/component-examples/AIChatLogExamples.ts @@ -534,10 +534,8 @@ const SendingMessageError = () => { return ( <> - - - You - + + Good Bot Messages from +1 234-292-2349 are failing due to the following top 3 errors which occurred in the past 7 days: @@ -568,8 +566,10 @@ const SendingMessageError = () => { - - Good Bot + + + You + Message body text