Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

AI Chat Log

Version 1.0.0GithubStorybook

An AI Chat Log is a collection of AI Chat components for displaying conversations between a human and an AI bot.

Installation

Installation page anchor
yarn add @twilio-paste/ai-chat-log - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {
  AIChatLog,
  AIChatMessage,
  AIChatMessageAuthor,
  AIChatMessageBody,
  AIChatMessageFeedback,
  AIChatMessageLoading,
  AIChatMessageMeta,
} from "@twilio-paste/ai-chat-log";

export const Basic = () => {
  return (
    <AIChatLog>
      <AIChatMessage variant="user">
        <AIChatMessageAuthor aria-label="You said">Gibby Radki</AIChatMessageAuthor>
        <AIChatMessageBody>
          Hi, I'm getting errors codes when sending an SMS.
        </AIChatMessageBody>
      </AIChatMessage>
      <AIChatMessage variant="bot">
        <AIChatMessageAuthor aria-label="AI said">Good Bot</AIChatMessageAuthor>
        <AIChatMessageBody>
          Error codes can be returned from various parts of the process. What error codes are you encountering?
        </AIChatMessageBody>
         <AIChatMessageActionGroup aria-label="Feedback form">
          <AIChatMessageAction>
            Is this helpful?
            <Button variant="reset" size="reset">
              <ThumbsUpIcon decorative={false} title="like result" />
            </Button>
            <Button variant="reset" size="reset">
              <ThumbsDownIcon decorative={false} title="dislike result" />
            </Button>
          </AIChatMessageAction>
          <AIChatMessageAction>
            <Button variant="reset" size="reset">
              <RefreshIcon decorative={true}/> Rewrite
            </Button>
            <Button variant="reset" size="reset">
              <CopyIcon decorative={true}/> Copy
            </Button>
          </AIChatMessageAction>
        </AIChatMessageActionGroup>
      </AIChatMessage>
    </AIChatLog>
  );
};

Props

Props page anchor

AIChatMessage

AIChatMessage page anchor

variant RequiredRequired

The variant of the message to distiguish between user and bot messages

Type
AIMessageVariants

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE

id

Custom id for the message body

Type
string
Default
unique ID

AIChatMessageActionGroup

AIChatMessageActionGroup page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE_ACTION_GROUP

AIChatMessageBody

AIChatMessageBody page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE_BODY

id

Type
never

size

Use a larger font size and line height for fullscreen experiences.

Type
"default" | "fullScreen"
Default
default

AIChatMessageAuthor

AIChatMessageAuthor page anchor

aria-label RequiredRequired

Screen reader label for the author

Type
string

avatarIcon

Custom svg for the user Avatar's icon to override the default Avatar content. See Avatar API documentation for more information.

Type
FC<PropsWithChildren<GenericIconProps>>

avatarName

Custom name for the user Avatar's initials to override the default Avatar content. See Avatar API documentation for more information.

Type
string

avatarSrc

Custom src path for the user Avatar's image to override the default Avatar content. See Avatar API documentation for more information.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE_AUTHOR

AIChatMessageActionCard

AIChatMessageActionCard page anchor

aria-label RequiredRequired

Label for the action card for screen readers

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE_ACTION_CARD

AIChatMessageLoading

AIChatMessageLoading page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
AI_CHAT_MESSAGE_LOADING

i18nAIScreenReaderText

I18n accessible screen reader text to give context to the "Stop generating" button when onStopLoading is passed for non-english languages. Should read as a sentence, e.g. "Stop generating AI response".

Type
string
Default
AI response

i18nStopGeneratingLabel

I18n label text for the "Stop generating" button when onStopLoading is passed for non-english languages.

Type
string
Default
Stop generating

onStopLoading

Function to call when "Stop generating AI response" button is clicked. If not provided, the button will not be rendered.

Type
() => void

AIChatLog

AIChatLog page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'AI_CHAT_LOG'

AIChatLogger

AIChatLogger page anchor

aiChats RequiredRequired

Array of AIs in the log. Use with useAIChatLogger()

Type
AIChat[]
Default
null