Overviews
Message
Markup

Markup

Overview

CUI Kit fully supports Markdown formatting for message content. All Markdown is rendered using Material‑UI components.

This is a demonstration of Markdown rendering:

Customization

You can customize markdown components using slots or slotProps (see Slots). This is the role of all the markdownXXX component on the CUI Kit (markdownH1, markdownBlockquote, …).

This is an example of markdown customization:

Collapse code
Expand code
slots={{
  markdownBlockquote: BlockquoteStyled,
}}
slotProps={{
  markdownH1: {
    variant: "h4",
      color: "primary",
  },
  markdownH2: {
    variant: "h5",
      color: "primary",
  },
  markdownH3: {
    variant: "h6",
      color: "primary",
  },
}}
import * as React from "react";
import {
  ChatPage,
  useAssistantAnswerMock,
  Thread,
} from "@plteam/chat-ui";
import Box from "@mui/material/Box";
import { styled } from '@mui/material/styles';

const markdownString = `
# Heading level 1
            
## Heading level 2

### Heading level 3

Quote:

> Lorem ipsum odor amet, consectetuer adipiscing elit.
> Purus rhoncus donec maecenas conubia parturient odio vivamus.
> Augue vehicula mattis ex quisque malesuada.
> Ante fames pharetra cras lorem sociosqu himenaeos placerat quis nam. 
`;

const BlockquoteStyled = styled('blockquote')(({ theme }) => ({
  margin: 0,
  padding: theme.spacing(1),
  paddingLeft: theme.spacing(2),
  backgroundColor: '#fff0de',
  borderLeft: `4px solid`,
  borderColor: '#fdcf74',
  borderRadius: 6,
  color: '#333333',
  'p': {
    whiteSpace: 'break-spaces',
  }
}))

const App: React.FC = () => {
  const [threads] = React.useState<Thread[]>(
    [
      {
        id: "1",
        title: "Base syntax",
        messages: [
          {
            content: "Hello! Show me how you render markdown",
            role: "user",
          },
          {
            content: markdownString,
            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}
        onUserMessageSent={onUserMessageSent}
        slots={{
          markdownBlockquote: BlockquoteStyled,
        }}
        slotProps={{
          markdownH1: {
            variant: "h4",
            color: "primary",
          },
          markdownH2: {
            variant: "h5",
            color: "primary",
          },
          markdownH3: {
            variant: "h6",
            color: "primary",
          },
        }}
      />
    </Box>
  );
}

export default App;

Custom components

customMarkdownComponents allow you to render React components from markdown text.

Until the component text completes the typing animation, the skeleton component will be displayed.

Collapse code
Expand code
const customMarkdownComponents = React.useMemo(() =>
  [{
    name: "Chart",
    component: Chart,
    skeletonHeight: 300,
  }], []);

<ChatPage
  ...
  customMarkdownComponents={customMarkdownComponents}
/>
import * as React from "react";
import {
  ChatPage,
  MessageSentParams,
  Thread,
  useAssistantAnswerMock,
} from "@plteam/chat-ui";
import Box from "@mui/material/Box";
import { BarChart } from '@mui/x-charts/BarChart';

type ChartProps = {
  series: string,
};

const Chart: React.FC<ChartProps> = ({ series }) => {
  const seriesParsed = JSON.parse(series);

  return (
    <BarChart
      xAxis={[{ data: ['group A', 'group B', 'group C'] }]}
      series={seriesParsed}
      height={300}
    />
  )
};

const markdownString = `
Hello! Here is an example of a graph.

**Example**
<Chart series='[{ "data": ["4", "3", "5"] }, { "data": ["1", "6", "3"] }, { "data": ["2", "5", "6"] }]' />
`;

const App: React.FC = () => {
  const { streamGenerator } = useAssistantAnswerMock();
  const [threads] = React.useState<Thread[]>(
    [
      {
        id: "1",
        title: "Markdown custom components",
        messages: [
          {
            content: "Hi, can you make an example graph?",
            role: "user",
          },
          {
            content: markdownString,
            role: "assistant",
          },
        ],
        "date": "2024-11-16 08:07:54"
      }
    ]
  );

  const onUserMessageSent = React.useCallback(async (params: MessageSentParams) => {
    const stream = streamGenerator(markdownString, { delay: 100 });

    for await (const chunk of stream) {
      params.pushChunk(chunk);
    }

    params.onFinish();
  }, []);

  const customMarkdownComponents = React.useMemo(() =>
    [{
      name: "Chart",
      component: Chart,
      skeletonHeight: 300,
    }], []);

  return (
    <Box height="100dvh" width="100dvw">
      <ChatPage
        initialThread={threads[0]}
        threads={threads}
        customMarkdownComponents={customMarkdownComponents}
        onUserMessageSent={onUserMessageSent}
      />
    </Box>
  );
}

export default App;

ActionsAttachments