From 0f158dc098a14b339db45152e08105b1f5385480 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Tue, 26 Mar 2024 20:16:23 -0600 Subject: [PATCH] markdown highlighting --- app/package-lock.json | 96 +++++++++++++++++++++++++++++++ app/package.json | 1 + app/src/pages/trace/TracePage.tsx | 57 ++++++------------ 3 files changed, 114 insertions(+), 40 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 83bde1010e9..accf8e66229 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -14,6 +14,7 @@ "@arizeai/point-cloud": "^3.0.4", "@codemirror/autocomplete": "^6.12.0", "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.2.4", "@codemirror/lang-python": "^6.1.3", "@codemirror/view": "^6.23.1", "@react-three/drei": "^9.96.2", @@ -867,6 +868,48 @@ "@lezer/common": "^1.1.0" } }, + "node_modules/@codemirror/lang-css": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.2.1.tgz", + "integrity": "sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.2", + "@lezer/css": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-html": { + "version": "6.4.8", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.8.tgz", + "integrity": "sha512-tE2YK7wDlb9ZpAH6mpTPiYm6rhfdQKVDa5r9IwIFlwwgvVaKsCfuKKZoJGWsmMZIf3FQAuJ5CHMPLymOtg1hXw==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz", + "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, "node_modules/@codemirror/lang-json": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", @@ -876,6 +919,20 @@ "@lezer/json": "^1.0.0" } }, + "node_modules/@codemirror/lang-markdown": { + "version": "6.2.4", + "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.2.4.tgz", + "integrity": "sha512-UghkA1vSMs8bT7RSZM6vsIocigyah2bV00eRQuZy76401UmFZdsTsbQNBGdyxRQDOLeEvF5iFwap0BM8LKyd+g==", + "dependencies": { + "@codemirror/autocomplete": "^6.7.1", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.3.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.2.1", + "@lezer/markdown": "^1.0.0" + } + }, "node_modules/@codemirror/lang-python": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.1.3.tgz", @@ -2116,6 +2173,16 @@ "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" }, + "node_modules/@lezer/css": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.8.tgz", + "integrity": "sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, "node_modules/@lezer/highlight": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", @@ -2124,6 +2191,26 @@ "@lezer/common": "^1.0.0" } }, + "node_modules/@lezer/html": { + "version": "1.3.9", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.9.tgz", + "integrity": "sha512-MXxeCMPyrcemSLGaTQEZx0dBUH0i+RPl8RN5GwMAzo53nTsd/Unc/t5ZxACeQoyPUM5/GkPLRUs2WliOImzkRA==", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.13.tgz", + "integrity": "sha512-5IBr8LIO3xJdJH1e9aj/ZNLE4LSbdsx25wFmGRAZsj2zSmwAYjx26JyU/BYOCpRQlu1jcv1z3vy4NB9+UkfRow==", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, "node_modules/@lezer/json": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz", @@ -2142,6 +2229,15 @@ "@lezer/common": "^1.0.0" } }, + "node_modules/@lezer/markdown": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.2.0.tgz", + "integrity": "sha512-d7MwsfAukZJo1GpPrcPGa3MxaFFOqNp0gbqF+3F7pTeNDOgeJN1muXzx1XXDPt+Ac+/voCzsH7qXqnn+xReG/g==", + "dependencies": { + "@lezer/common": "^1.0.0", + "@lezer/highlight": "^1.0.0" + } + }, "node_modules/@lezer/python": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.11.tgz", diff --git a/app/package.json b/app/package.json index 91719eacbf8..fc6899f9a2d 100644 --- a/app/package.json +++ b/app/package.json @@ -11,6 +11,7 @@ "@arizeai/point-cloud": "^3.0.4", "@codemirror/autocomplete": "^6.12.0", "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.2.4", "@codemirror/lang-python": "^6.1.3", "@codemirror/view": "^6.23.1", "@react-three/drei": "^9.96.2", diff --git a/app/src/pages/trace/TracePage.tsx b/app/src/pages/trace/TracePage.tsx index f9b9bf32f53..a383c066bee 100644 --- a/app/src/pages/trace/TracePage.tsx +++ b/app/src/pages/trace/TracePage.tsx @@ -4,6 +4,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { useNavigate, useParams } from "react-router"; import { useSearchParams } from "react-router-dom"; import { json } from "@codemirror/lang-json"; +import { markdown } from "@codemirror/lang-markdown"; import { EditorView } from "@codemirror/view"; import { nord } from "@uiw/codemirror-theme-nord"; import CodeMirror from "@uiw/react-codemirror"; @@ -13,6 +14,7 @@ import { Alert, Card, CardProps, + Code, Content, ContextualHelp, Counter, @@ -707,13 +709,10 @@ function LLMSpanInfo(props: { span: Span; spanAttributes: AttributeObject }) { prompt template - 
-                        {promptTemplateObject.template}
-
+ embedded text - 
-                        {embedding[EMBEDDING_TEXT]}
-
+ ); @@ -1186,15 +1182,7 @@ function DocumentItem({ )} - 
-          {document[DOCUMENT_CONTENT]}
-
+ {metadata && ( <> @@ -1332,14 +1320,7 @@ function LLMMessage({ message }: { message: AttributeMessage }) { {message[MESSAGE_NAME] ? `: ${message[MESSAGE_NAME]}` : ""} {messageContent ? ( - 
-              {message[MESSAGE_CONTENT]}
-
+ ) : null} {toolCalls.length > 0 ? toolCalls.map((toolCall, idx) => { @@ -1431,14 +1412,7 @@ function LLMPromptsList({ prompts }: { prompts: string[] }) { padding="size-100" > - 
-                  {prompt}
-
+ @@ -1569,6 +1543,7 @@ function CodeBlock(props: { value: string; mimeType: MimeType }) { editable={false} theme={codeMirrorTheme} css={codeMirrorCSS} + data-mime-type={mimeType} /> ); break; @@ -1584,8 +1559,10 @@ function CodeBlock(props: { value: string; mimeType: MimeType }) { highlightActiveLineGutter: false, syntaxHighlighting: true, }} - extensions={[EditorView.lineWrapping]} + // We assume that most text in LLM systems utilize markdown formatting for now + extensions={[markdown(), EditorView.lineWrapping]} css={codeMirrorCSS} + data-mime-type={mimeType} /> ); break;