Slots

Overviews

Customization

Slots

Overview

A slot is a part of a component that can be overridden and/or customized. You can replace any (almost any) component in the chat with a custom one.

ℹ️

Components that you pass via slots or coreSlots as CUI Kit children can use the internal chat context. See Slots and Core Slots to learn about the available values.

Slots in ChatPage and Chat are divided into coreSlots and slots. In the History component, slots are grouped into slots.

Basic usage

You can override a slot by providing a custom component to the slots prop. Also, you can pass props to any slot using the slotProps prop:

Collapse code

Expand code

slots={{
  sendMessageIcon: SendIcon,
}}
slotProps={{
  sendMessageButton: {
    size: 'large',
      sx: {
      color: (theme) => theme.palette.secondary.main,
    },
  },
}}

import * as React from "react";
import {
  ChatPage,
  useAssistantAnswerMock,
  Thread,
} from "@plteam/chat-ui";
import Box from "@mui/material/Box";
import SendIcon from '@mui/icons-material/Send';

const App: React.FC = () => {
  const threads: Thread[] = [{
    id: "1",
    title: "Custom slots",
    messages: [
      {
        id: "1",
        content: "Hi! Do you know anything about traveling to Japan?",
        role: "user",
      },
      {
        id: "2",
        content: "Hi! Yes, I know a bit. What specifically do you want to know? Transportation, culture, or something else?",
        role: "assistant",
      },
      {
        id: "3",
        content: "I'm curious about transportation. How does the train system work?",
        role: "user",
      },
      {
        id: "4",
        content: "Japan has an excellent train system. There are high-speed trains called Shinkansen connecting major cities, and regional lines are great for shorter trips.",
        role: "assistant",
      },
    ],
    date: "2024-11-16 08:07:54"
  }];

  const { onUserMessageSent, handleStopMessageStreaming } =
    useAssistantAnswerMock();

  return (
    <Box height="100dvh" width="100dvw">
      <ChatPage
        initialThread={threads[0]}
        threads={threads}
        handleStopMessageStreaming={handleStopMessageStreaming}
        defaultTextFieldValue="See you later!"
        slots={{
          sendMessageIcon: SendIcon,
        }}
        slotProps={{
          sendMessageButton: {
            size: 'large',
            sx: {
              color: (theme) => theme.palette.secondary.main,
            },
          },
        }}
        onUserMessageSent={onUserMessageSent}
      />
    </Box>
  );
}

export default App;

Constructor