syntax highlighting

silvanmelchior · Aug 13, 2023 · 21b046f · 21b046f
1 parent d65e746
commit 21b046f
Show file tree

Hide file tree

Showing 4 changed files with 454 additions and 4 deletions.
diff --git a/ui/app/session/approval/interpreter_io.tsx b/ui/app/session/approval/interpreter_io.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Approver } from "@/app/session/approval/approver";
 import Running from "@/app/session/approval/running";
 import useScroller from "@/app/helper/scroller";
@@ -11,6 +13,7 @@ export default function InterpreterIO({
   autoApprove,
   disabled,
   busy,
+  language,
 }: {
   title: string;
   content: string | null;
@@ -19,6 +22,7 @@ export default function InterpreterIO({
   autoApprove: boolean;
   disabled: boolean;
   busy: boolean;
+  language: string;
 }) {
   const scrollRef = useScroller(content);
 
@@ -28,12 +32,24 @@ export default function InterpreterIO({
       <div
         className={`flex-1 ${
           busy ? "bg-neutral-100" : "bg-neutral-50"
-        } whitespace-pre overflow-auto h-0 font-mono mt-2 p-2 ${
+        } overflow-auto h-0 mt-2 ${
           askApprove ? "border-red-400" : "border-transparent"
         } border-2`}
         ref={scrollRef}
       >
-        {busy ? <Running /> : content}
+        {busy ? (
+          <div className="m-2">
+            <Running />
+          </div>
+        ) : (
+          <SyntaxHighlighter
+            language={language}
+            style={docco}
+            className="!overflow-x-visible"
+          >
+            {content ?? ""}
+          </SyntaxHighlighter>
+        )}
       </div>
       <div className="flex justify-end items-center my-2">
         <div>

diff --git a/ui/app/session/session.tsx b/ui/app/session/session.tsx
@@ -122,6 +122,7 @@ export default function Session({
               approver={approverIn}
               disabled={error !== null}
               busy={false}
+              language="python"
             />
           </div>
         </div>
@@ -135,6 +136,7 @@ export default function Session({
               approver={approverOut}
               disabled={error !== null}
               busy={chatRoundState === "waiting for interpreter"}
+              language="text"
             />
           </div>
         </div>