Customization

Overviews

Customization

This functionality is currently under development.

Slots

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. coreSlots allows you to replace the basic components used throughout the chat, such as Button, IconButton, etc.

ℹ️

See Slots and Core Slots to learn about the available values.

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 threadsJson from '../testThreads.json';
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] = React.useState<Thread[]>(threadsJson);

  const { onUserMessageSent, handleStopMessageStreaming } =
    useAssistantAnswerMock();

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

export default App;

Reasoning