diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx index a42d067d144cf..815bf6511fc6f 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx @@ -48,6 +48,16 @@ export const LongText: Story = { }, }; +export const Markdown: Story = { + args: { + notification: { + ...MockNotification, + read_at: null, + content: "Hello **world**!", + }, + }, +}; + export const UnreadFocus: Story = { args: { notification: { diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx index 3a8809c38f890..e097a6e296963 100644 --- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx +++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx @@ -3,7 +3,9 @@ import { Avatar } from "components/Avatar/Avatar"; import { Button } from "components/Button/Button"; import { SquareCheckBig } from "lucide-react"; import type { FC } from "react"; +import Markdown from "react-markdown"; import { Link as RouterLink } from "react-router-dom"; +import { cn } from "utils/cn"; import { relativeTime } from "utils/time"; type InboxItemProps = { @@ -26,8 +28,13 @@ export const InboxItem: FC = ({
- - {notification.content} + + {notification.content}
{notification.actions.map((action) => {