phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-26 11:14:04 +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

14
ui/litellm-dashboard/package-lock.json generated
View file

@ -23,7 +23,7 @@
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0"
"react-syntax-highlighter": "^15.6.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",
@ -3420,6 +3420,11 @@
"node": "*"
}
},
"node_modules/highlightjs-vue": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
"integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA=="
},
"node_modules/html-url-attributes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
@ -6277,12 +6282,13 @@
}
},
"node_modules/react-syntax-highlighter": {
"version": "15.5.0",
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
"integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
"version": "15.6.1",
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
"integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
"dependencies": {
"@babel/runtime": "^7.3.1",
"highlight.js": "^10.4.1",
"highlightjs-vue": "^1.0.0",
"lowlight": "^1.17.0",
"prismjs": "^1.27.0",
"refractor": "^3.6.0"

2
ui/litellm-dashboard/package.json
View file

@ -24,7 +24,7 @@
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18",
"react-markdown": "^9.0.1",
"react-syntax-highlighter": "^15.5.0"
"react-syntax-highlighter": "^15.6.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.7",

26
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;
@ -321,7 +322,32 @@ const ChatUI: React.FC<ChatUIProps> = ({
wordBreak: "break-word",
maxWidth: "100%"
}}>
<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>