Chat

Category

Configuration

Example

Description

Content

Information

Session information data. Use this to control the display of the chat list. This configuration accepts an array of objects with the following format. The chat component renders the session content from top to bottom according to the array order:

• id: The unique ID of the session.

• createAt: The timestamp when the session was created.

• updateAt: The timestamp when the session was updated.

• role: The role in the session. Can be `user` or `assistant`.

• content: The content of the session.

• parentId: Optional. The ID of the associated conversation.

Welcome message

Welcome message configuration. Use this to configure the content and style of the chat component's welcome message. The main configuration items are as follows:

• Type: The display type of the welcome message. Options are `Text` or `Card`. If you select `Card`, you can configure quick messages.

• Content: The text of the welcome message.

• Font size: The font size of the welcome message text.

• Quick messages: This takes effect when the type is set to `Card`. It displays multiple quick-send messages below the welcome message text. The specific configuration is as follows:

  • Title: The display text.

  • Type: The trigger behavior. Options are `Send message` or `Custom`.

  • Content: This takes effect when the type is `Send message`. It defines the content the user sends after triggering the quick message.

  • Event: This takes effect when the type is `Custom`. It defines the custom event handler to be triggered by the quick message.

User content configuration

User content configuration. Use this to configure the content and style of the user role's chat bubbles in the session stream. The main configuration items are as follows:

• Profile picture: The content of the chat bubble's profile picture. You can configure an image URL or text.

• Name: The name content of the chat bubble.

• Background color: The background color of the session bubble.Corresponding CSS property: background-color. See MDN web docs.

• Padding: The padding of the chat bubble. Corresponds to the CSS `padding` property. For more information, see the MDN documentation.

• Border: The border of the session bubble, which corresponds to the CSS border property. For more information, see the MDN documentation.

• Border radius: The border radius of the session bubble. Corresponding CSS property: border-radius. For more information, see the MDN documentation.

• Text color: The color of the text in the chat bubble.

• Font size: The font size of text in a session bubble. This corresponds to the font-size CSS property. For more information, see MDN documentation.

• Enable extra area: Defines whether to display extra rendered content below the session content.

• Extra information: Defines the content to be rendered in the extra area. The content supports Markdown rendering.

Assistant content configuration

Assistant content configuration. Use this to configure the content and style of the assistant role's chat bubbles in the session stream. The configuration items are the same as those for the user content configuration.

Action bar

Action bar. Use this to configure the content and trigger behavior of the interactive toolbar that appears when you hover over a chat bubble. The action bar configuration consists of the following properties:

• Title: The title displayed when you hover over an action item.

• Type: The type of behavior triggered when an action item is clicked. Options are `Regenerate`, `Copy`, `Play`, and `Custom`. The trigger behaviors for each type are as follows:

  • Regenerate: Resends the associated question or the question itself for the content in the chat bubble area.

  • Copy: Copies the content of the chat bubble area to the clipboard.

  • Play: Uses the configured text-to-speech service to play the current message.

  • Custom: Triggers a custom event.

• Text-to-speech: This takes effect when using the `Play` behavior. It is used to play the current message. For more information, see Text-to-speech (Alibaba Cloud Intelligent Speech Interaction).

• Icon: The icon displayed for the action item.

• Icon color: The color of the icon for the action item.

• Hide: Specifies whether to hide the action item.

• Position: The position where the action item appears. Options are `Toolbar`, `Dropdown`, or `Both`. If you select `Dropdown`, the action item is collapsed into the last item of the action bar.

Hide input area

Hide input area. Specifies whether to hide the input area of the chat component.

Input area configuration

Input area configuration. Defines the style and content of the chat component's input area. The specific configuration items are as follows:

• Placeholder content: The placeholder content for the input box.

• Variant: The appearance of the input box.

• Help bar: Configuration for quick message items above the input box. You can configure the following properties:

  • Title: The display content of the quick message item.

  • Style: The appearance style of the quick message item. Options are `Tag`, `Link`, or `Button`.

  • Type: The behavior triggered when the quick message item is clicked. Options are `Send message` or `Custom`.

  • Content: This takes effect when the type is `Send message`. It defines the content sent by the user role after clicking the quick message item.

• Speech input: You can disable this or use the `Click to talk` mode.

• Speech-to-text: This takes effect when speech input is enabled. It is used to convert audio to text. For more information, see Speech-to-text (Alibaba Cloud Intelligent Speech Interaction).

• Image input: Specifies whether to enable image input. If enabled, sent messages can include images.

• Image upload path: This takes effect when image input is enabled. Use this to select the upload path for images in the system file storage.

• File input: Specifies whether to enable file input. If enabled, sent messages can include files. To process uploaded files, see the documentation for the platform where your Large Language Model (LLM) is hosted. If you are integrating with the Alibaba Cloud Model Studio platform, see How to quickly build an Alibaba Cloud Model Studio chat application with file interaction capabilities.

• File upload path: This takes effect when file input is enabled. Use this to select the upload path for files in the system file storage.

• Send button loading: If enabled, the send button is set to a loading state, and messages cannot be sent.

Display name

Display name. Specifies whether to display the name of the user or assistant role in the chat bubble.

Enable MagicPen enhanced rendering

If you enable this option, the chat bubble content will support HTML tag rendering. However, this may cause rendering conflicts with other components.

Enable profile picture and content on separate lines

If you enable this option, the profile picture and chat content are displayed on separate lines.

Enable TOC

If you enable this option, you can use `## Contents` in Markdown to generate a table of contents.

Custom Tags

Lets you customize the rendering mode for non-standard HTML tags, such as <tag> and <ref>.

Interaction

Hide

Hide. For more information, see Common properties.

Keep layout when hidden

Keep layout when hidden. For more information, see Common properties.

Loading

Loading. Specifies whether the chat component shows a loading state.

AI integration operation

AI integration operation. Use this to associate the chat component with an `Alibaba Cloud Model Studio agent application integration operation` or an `Alibaba Cloud Model Studio model ensemble operation`. For more information, see Integrate with Alibaba Cloud Model Studio applications and Integrate with Alibaba Cloud Model Studio models.

Advanced options

Advanced options. You can configure the following properties:

• Performance options: Controls the text rendering behavior for chat replies. To support browsers with lower performance, consider switching the option to `Balanced` or `Speed-first`.

• Scroll behavior: Controls the animation behavior for streaming chat reply content.

Style

Margin

Margin. For more information, see Common properties.

Mode

Mode. The arrangement of user and assistant roles in the chat component. Options are `Document` or `Chat`. In `Document` mode, the session content for both assistant and user roles is left-aligned.

Background image

Sets one or more background images, corresponding to the CSS property: background-image. For more information, see the MDN documentation.

Background color

Sets the background color. Corresponding CSS property: background-color. See the MDN documentation

Border radius

Sets the corner radius of the outer border, corresponding to the CSS property: border-radius. For more information, see the MDN documentation

Border

Sets the border property, which corresponds to the CSS border property. For more information, see MDN Web Docs.

Top border

Sets the top border properties, corresponding to the CSS `border-top` property. See the MDN documentation for details.

Bottom border

Sets the properties for the bottom border. This corresponds to the CSS property: border-bottom. For more information, see the MDN documentation.

Left border

Sets the left border properties, which correspond to the CSS property: border-left. See MDN documentation for details.

Right border

Sets the right border properties. This corresponds to the CSS property: border-right. See details on MDN.

Name

Type

Example

Description

chats

Array<{

id: string

createAt: number;

updateAt: number;

role: user | assistant;

content: string;

parentId?: string;

}>

chat1.chats

The session data of the chat component.

loading

boolean

chat1.loading

The current loading state of the chat component.

setChats

func

chat1.setChats(xxx)

Sets the session data for the chat component.

clearChats

func

chat1.clearChats()

Clears the session data of the chat component.

setLoading

func

chat1.setLoading(false)

Sets the loading state of the chat component.

clearLoading

func

chat1.clearLoading()

Clears the loading state of the chat component.

sendMessage

func

chat1.sendMessage('Have you eaten?')

Sends a message as the user role in the chat component.

clearMessage

func

chat1.clearMessage()

Clears the current session stream of the chat component.

stopGenerateMessage

func

chat1.stopGenerateMessage()

Stops the process of the current streaming response in the chat component.

setMessageContent

func

chat1.setMessageContent({id: xxxxx, content: xxxx})

Changes the content of the session data for a specified ID.

scrollToBottom

func

chat1.scrollToBottom()

Scrolls the chat component's session stream to the bottom.

Configuration

Description

The event triggered when content is sent.

The event triggered when a response is complete.

The event triggered when an image is uploaded successfully. (This takes effect only when image input is enabled).

The event triggered when an image fails to upload. (This takes effect only when image input is enabled).

The event triggered when an image is deleted. (This takes effect only when image input is enabled).

The event triggered when a file is uploaded successfully. (This takes effect only when file input is enabled).

The event triggered when a file fails to upload. (This takes effect only when file input is enabled).

The event triggered when a file is deleted. (This takes effect only when file input is enabled).