Feat/enhance markdown style

.changeset/small-pandas-shout.md

@@ -0,0 +1,5 @@
+---
+'@llamaindex/chat-ui': patch
+---
+
+Add feature to customize markdown style, optionally can pass message as parameter to message content

README.md

@@ -169,9 +169,8 @@ Inside the markdown component, we use [highlight.js](https://highlightjs.org/) f
 If your app is using code, latex or pdf files, you'll need to import their CSS files:
 
 ```tsx
-import '@llamaindex/chat-ui/styles/code.css'
-import '@llamaindex/chat-ui/styles/katex.css'
-import '@llamaindex/chat-ui/styles/pdf.css'
+import '@llamaindex/chat-ui/styles/markdown.css' // code, latex and custom markdown styling
+import '@llamaindex/chat-ui/styles/pdf.css' // pdf styling
 ```
 
 The `code.css` file uses the `atom-one-dark` theme from highlight.js by default. There are a lot of others to choose from: https://highlightjs.org/demo

apps/web/app/api/chat/route.ts

@@ -35,7 +35,7 @@ export async function POST(request: NextRequest) {
     return LlamaIndexAdapter.toDataStreamResponse(response, {
       data: vercelStreamData,
       callbacks: {
-        onFinal: async () => {
+        onCompletion: async () => {
           await vercelStreamData.close()
         },
       },

apps/web/app/layout.tsx

@@ -1,6 +1,5 @@
 import './globals.css'
-import '@llamaindex/chat-ui/styles/code.css'
-import '@llamaindex/chat-ui/styles/katex.css'
+import '@llamaindex/chat-ui/styles/markdown.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 

packages/chat-ui/src/chat/annotation.ts

@@ -96,10 +96,12 @@ export function getSourceAnnotationData(
     MessageAnnotationType.SOURCES
   )
   if (data.length > 0) {
-    const sourceData = data[0]
-    if (sourceData.nodes) {
-      sourceData.nodes = preprocessSourceNodes(sourceData.nodes)
-    }
+    return [
+      {
+        ...data[0],
+        nodes: data[0].nodes ? preprocessSourceNodes(data[0].nodes) : [],
+      },
+    ]
   }
   return data
 }

packages/chat-ui/src/chat/chat-message.tsx

@@ -57,6 +57,7 @@ interface ChatMessageContentProps extends React.PropsWithChildren {
   content?: ContentDisplayConfig[]
   isLoading?: boolean
   append?: ChatHandler['append']
+  message?: Message // in case you want to customize the message
 }
 
 interface ChatMessageActionsProps extends React.PropsWithChildren {
@@ -119,7 +120,8 @@ function ChatMessageAvatar(props: ChatMessageAvatarProps) {
 }
 
 function ChatMessageContent(props: ChatMessageContentProps) {
-  const { message, isLast } = useChatMessage()
+  const { message: defaultMessage, isLast } = useChatMessage()
+  const message = props.message ?? defaultMessage
   const annotations = message.annotations as MessageAnnotation[] | undefined
 
   const contents = useMemo<ContentDisplayConfig[]>(() => {
@@ -189,7 +191,7 @@ function ChatMessageContent(props: ChatMessageContentProps) {
   )
 
   return (
-    <div className={cn('flex flex-1 flex-col gap-4', props.className)}>
+    <div className={cn('flex min-w-0 flex-1 flex-col gap-4', props.className)}>
       {children}
     </div>
   )

packages/chat-ui/src/styles/markdown.css

@@ -0,0 +1,130 @@
+@import '~highlight.js/styles/atom-one-dark-reasonable.css';
+@import '~katex/dist/katex.min.css';
+
+.custom-markdown ul {
+  list-style-type: disc;
+  margin-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.custom-markdown ol {
+  list-style-type: decimal;
+  margin-left: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.custom-markdown li {
+  margin-bottom: 5px;
+}
+
+.custom-markdown ol ol {
+  list-style: lower-alpha;
+}
+
+.custom-markdown ul ul,
+.custom-markdown ol ol {
+  margin-left: 20px;
+}
+
+.custom-markdown img {
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin: 10px 0;
+}
+
+.custom-markdown a {
+  text-decoration: underline;
+  color: #007bff;
+}
+
+.custom-markdown h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.custom-markdown h6 {
+  font-size: 16px;
+}
+
+.custom-markdown h5 {
+  font-size: 18px;
+}
+
+.custom-markdown h4 {
+  font-size: 20px;
+}
+
+.custom-markdown h3 {
+  font-size: 22px;
+}
+
+.custom-markdown h2 {
+  font-size: 24px;
+}
+
+.custom-markdown h1 {
+  font-size: 26px;
+}
+
+.custom-markdown hr {
+  border: 0;
+  border-top: 1px solid #e1e4e8;
+  margin: 20px 0;
+}
+
+.custom-markdown table {
+  width: 100%;
+  margin: 20px 0;
+  overflow-x: auto;
+  display: block;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.custom-markdown table caption {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #666;
+  text-align: left;
+}
+
+.custom-markdown thead {
+  border-bottom: 1px solid #e1e4e8;
+}
+
+.custom-markdown th {
+  height: 48px;
+  padding: 16px;
+  text-align: left;
+  vertical-align: middle;
+  font-weight: 500;
+  color: #666;
+}
+
+.custom-markdown td {
+  padding: 16px;
+  vertical-align: middle;
+  border-bottom: 1px solid #e1e4e8;
+}
+
+.custom-markdown tr {
+  transition: background-color 0.2s;
+}
+
+.custom-markdown tr:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.custom-markdown tfoot {
+  border-top: 1px solid #e1e4e8;
+  background-color: rgba(0, 0, 0, 0.03);
+  font-weight: 500;
+}

packages/chat-ui/src/widgets/markdown.tsx

@@ -78,86 +78,6 @@ export function Markdown({
 
   return (
     <div>
-      <style>{`
-        .custom-markdown ul {
-          list-style-type: disc;
-          margin-left: 20px;
-          margin-top: 20px;
-          margin-bottom: 20px;
-        }
-
-        .custom-markdown ol {
-          list-style-type: decimal;
-          margin-left: 20px;
-          margin-top: 20px;
-          margin-bottom: 20px;
-        }
-
-        .custom-markdown li {
-          margin-bottom: 5px;
-        }
-
-        .custom-markdown ol ol {
-          list-style: lower-alpha;
-        }
-
-        .custom-markdown ul ul,
-        .custom-markdown ol ol {
-          margin-left: 20px;
-        }
-
-        .custom-markdown img {
-          border-radius: 8px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          margin: 10px 0;
-        }
-
-        .custom-markdown a {
-          text-decoration: underline;
-          color: #007bff;
-        }
-
-        .custom-markdown h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          font-weight: bold;
-          margin-bottom: 20px;
-          margin-top: 20px;
-        }
-
-        .custom-markdown h6 {
-          font-size: 16px;
-        }
-
-        .custom-markdown h5 {
-          font-size: 18px;
-        }
-
-        .custom-markdown h4 {
-          font-size: 20px;
-        }
-
-        .custom-markdown h3 {
-          font-size: 22px;
-        }
-
-        .custom-markdown h2 {
-          font-size: 24px;
-        }
-
-        .custom-markdown h1 {
-          font-size: 26px;
-        }
-
-        .custom-markdown hr {
-          border: 0;
-          border-top: 1px solid #e1e4e8;
-          margin: 20px 0;
-        }
-      `}</style>
       <MemoizedReactMarkdown
         className="prose dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 custom-markdown break-words"
         remarkPlugins={[remarkGfm, remarkMath]}