phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 03:04:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Admin UI - 2) UI chat should render the output in markdown (#7460)

Browse source 
* chat ui improvement

* ui - handle md text
This commit is contained in:
Ishaan Jaff 2024-12-28 16:47:08 -08:00 • committed by GitHub
parent 65bf83b163
commit 978fc0e7a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

30
ui/litellm-dashboard/src/components/chat_ui.tsx
View file

@ -28,6 +28,7 @@ import openai from "openai";
import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { Typography } from "antd";
import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism';
interface ChatUIProps {
accessToken: string | null;
@ -319,9 +320,34 @@ const ChatUI: React.FC<ChatUIProps> = ({
<div style={{
whiteSpace: "pre-wrap",
wordBreak: "break-word",
maxWidth: "100%"
maxWidth: "100%"
}}>
{message.content}
<ReactMarkdown
components={{
code({node, inline, className, children, ...props}: React.ComponentPropsWithoutRef<'code'> & {
inline?: boolean;
node?: any;
}) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
style={coy as any}
language={match[1]}
PreTag="div"
{...props}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
}
}}
>
{message.content}
</ReactMarkdown>
</div>
</TableCell>
</TableRow>