feat(ui): render markdown in API error messages (i-am-bee#1593)

Signed-off-by: Petr Kadlec <[email protected]>
Signed-off-by: Petr Bulánek <[email protected]>
Co-authored-by: Petr Bulánek <[email protected]>
Signed-off-by: Eden Gilbert <[email protected]>

Author: 2 people

apps/agentstack-ui/src/components/ErrorMessage/ErrorMessage.tsx

@@ -6,6 +6,8 @@
 import { ActionableNotification, Button, InlineLoading } from '@carbon/react';
 import type { ReactNode } from 'react';
 
+import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx';
+
 import classes from './ErrorMessage.module.scss';
 
 interface Props {
@@ -21,7 +23,7 @@ export function ErrorMessage({ title, subtitle, onRetry, isRefetching, children
     <ActionableNotification title={title} kind="error" lowContrast hideCloseButton>
       {(subtitle || onRetry) && (
         <div className={classes.body}>
-          {subtitle && <p>{subtitle}</p>}
+          {subtitle && <MarkdownContent>{subtitle}</MarkdownContent>}
 
           {onRetry && (
             <Button size="sm" onClick={() => onRetry()} disabled={isRefetching}>

apps/agentstack-ui/src/components/MarkdownContent/MarkdownContent.tsx

@@ -7,40 +7,48 @@ import 'katex/dist/katex.min.css';
 
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import type { Components } from 'react-markdown';
 import Markdown from 'react-markdown';
-
-import type { UISourcePart } from '#modules/messages/types.ts';
+import type { PluggableList } from 'unified';
 
 import { components, type ExtendedComponents } from './components';
-import { CitationLink } from './components/CitationLink/CitationLink';
 import { Code } from './components/Code';
 import classes from './MarkdownContent.module.scss';
 import { rehypePlugins } from './rehype';
 import { remarkPlugins } from './remark';
 import { urlTransform } from './utils';
 
-interface Props {
-  isPending?: boolean;
-  sources?: UISourcePart[];
+export interface MarkdownContentProps {
+  codeBlocksExpanded?: boolean;
   children?: string;
   className?: string;
+  remarkPlugins?: PluggableList;
+  components?: Components;
 }
 
-export function MarkdownContent({ isPending, sources, className, children }: Props) {
+export function MarkdownContent({
+  codeBlocksExpanded,
+  className,
+  remarkPlugins: remarkPluginsProps,
+  components: componentsProps,
+  children,
+}: MarkdownContentProps) {
   const extendedComponents: ExtendedComponents = useMemo(
     () => ({
       ...components,
-      citationLink: ({ ...props }) => <CitationLink {...props} sources={sources} />,
-      code: ({ ...props }) => <Code {...props} forceExpand={isPending} />,
+      code: ({ ...props }) => <Code {...props} forceExpand={codeBlocksExpanded} />,
+      ...componentsProps,
     }),
-    [isPending, sources],
+    [codeBlocksExpanded, componentsProps],
   );
 
+  const extendedRemarkPlugins = useMemo(() => [...remarkPlugins, ...(remarkPluginsProps ?? [])], [remarkPluginsProps]);
+
   return (
     <div className={clsx(classes.root, className)}>
       <Markdown
         rehypePlugins={rehypePlugins}
-        remarkPlugins={remarkPlugins}
+        remarkPlugins={extendedRemarkPlugins}
         components={extendedComponents}
         urlTransform={urlTransform}
       >

apps/agentstack-ui/src/components/MarkdownContent/components/index.ts

@@ -6,7 +6,6 @@
 import type { JSX } from 'react';
 import type { Components } from 'react-markdown';
 
-import type { CitationLinkBaseProps } from './CitationLink/CitationLink';
 import { Code } from './Code';
 import { ExternalLink, type ExternalLinkProps } from './ExternalLink';
 import { Img } from './Img';
@@ -15,7 +14,6 @@ import { MermaidDiagram } from './MermaidDiagram';
 import { Table } from './Table';
 
 export interface ExtendedComponents extends Components {
-  citationLink?: (props: CitationLinkBaseProps) => JSX.Element;
   externalLink?: (props: ExternalLinkProps) => JSX.Element;
   mermaidDiagram?: (props: MermaidDiagramProps) => JSX.Element;
 }

apps/agentstack-ui/src/components/MarkdownContent/remark/index.ts

@@ -7,14 +7,12 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import type { PluggableList } from 'unified';
 
-import { remarkCitationLink } from './remarkCitationLink';
 import { remarkExternalLink } from './remarkExternalLink';
 import { remarkMermaid } from './remarkMermaid';
 
 export const remarkPlugins = [
   remarkGfm,
   [remarkMath, { singleDollarTextMath: false }],
   remarkMermaid,
-  remarkCitationLink,
   remarkExternalLink,
 ] satisfies PluggableList;

apps/agentstack-ui/src/contexts/Toast/ToastProvider.module.scss

@@ -39,12 +39,3 @@
     background-color: $layer;
   }
 }
-
-.apiError {
-  @include line-clamp(10);
-  margin-block-start: $spacing-02;
-  font-size: rem(12px);
-  font-family: font-family('mono');
-  padding-block: $spacing-03;
-  max-block-size: 10.2rem;
-}

apps/agentstack-ui/src/contexts/Toast/ToastProvider.tsx

@@ -10,6 +10,9 @@ import type { PropsWithChildren } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
+import { LineClampText } from '#components/LineClampText/LineClampText.tsx';
+import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx';
+
 import type { Toast, ToastWithKey } from './toast-context';
 import { ToastContext } from './toast-context';
 import classes from './ToastProvider.module.scss';
@@ -22,7 +25,7 @@ export function ToastProvider({ children }: PropsWithChildren) {
       setToasts((existing) => {
         const defaults = {
           lowContrast: true,
-          timeout: 10000,
+          timeout: 10_000,
           key: uuid(),
           date: new Date(),
         };
@@ -85,8 +88,12 @@ function Toast({ toast, onClose }: { toast: ToastWithKey; onClose: () => void })
 
       {(subtitle || apiError) && (
         <div className="cds--toast-notification__subtitle">
-          {subtitle && <div className={classes.subtitle}>{subtitle}</div>}
-          {apiError && <div className={classes.apiError}>{apiError}</div>}
+          {subtitle && <div>{subtitle}</div>}
+          {apiError && (
+            <LineClampText lines={8} useBlockElement>
+              <MarkdownContent>{apiError}</MarkdownContent>
+            </LineClampText>
+          )}
         </div>
       )}
     </ToastNotification>

apps/agentstack-ui/src/modules/messages/components/MessageContent.tsx

@@ -6,8 +6,8 @@
 import clsx from 'clsx';
 import { memo } from 'react';
 
-import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx';
 import type { UIMessage } from '#modules/messages/types.ts';
+import { ChatMarkdownContent } from '#modules/runs/components/ChatMarkdownContent/ChatMarkdownContent.tsx';
 
 import { useAgentRun } from '../../runs/contexts/agent-run';
 import { Role } from '../api/types';
@@ -42,9 +42,9 @@ export const MessageContent = memo(function MessageContent({ message }: Props) {
     }
 
     return (
-      <MarkdownContent className={classes.root} sources={sources} isPending={isPending}>
+      <ChatMarkdownContent className={classes.root} sources={sources} codeBlocksExpanded={isPending}>
         {content}
-      </MarkdownContent>
+      </ChatMarkdownContent>
     );
   } else if (secretPart || status?.isError) {
     return null;

apps/agentstack-ui/src/modules/runs/components/ChatMarkdownContent/ChatMarkdownContent.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { JSX } from 'react';
+import { useMemo } from 'react';
+import type { Components } from 'react-markdown';
+
+import type { MarkdownContentProps } from '#components/MarkdownContent/MarkdownContent.tsx';
+import { MarkdownContent } from '#components/MarkdownContent/MarkdownContent.tsx';
+import type { UISourcePart } from '#modules/messages/types.ts';
+import type { CitationLinkBaseProps } from '#modules/runs/components/ChatMarkdownContent/CitationLink/CitationLink.tsx';
+import { CitationLink } from '#modules/runs/components/ChatMarkdownContent/CitationLink/CitationLink.tsx';
+
+import { remarkCitationLink } from './CitationLink/remarkCitationLink';
+
+interface ChatComponents extends Components {
+  citationLink?: (props: CitationLinkBaseProps) => JSX.Element;
+}
+
+interface Props extends Omit<MarkdownContentProps, 'remarkPlugins' | 'components'> {
+  sources?: UISourcePart[];
+}
+
+const remarkPlugins = [remarkCitationLink];
+
+export function ChatMarkdownContent({ sources, ...props }: Props) {
+  const components: ChatComponents = useMemo(
+    () => ({
+      citationLink: ({ ...props }) => <CitationLink {...props} sources={sources} />,
+    }),
+    [sources],
+  );
+
+  return <MarkdownContent {...props} components={components} remarkPlugins={remarkPlugins} />;
+}