Merge branch 'main' into newer-simpler-stream-algo

8 files changed, 157 insertions, 21 deletions

diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx
index 0aae0bbb..b0de13ac 100644
--- a/extension/react-app/src/components/CodeBlock.tsx
+++ b/extension/react-app/src/components/CodeBlock.tsx
@@ -5,28 +5,27 @@ import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
 
 import { Clipboard, CheckCircle } from "@styled-icons/heroicons-outline";
 
+import StyledCode from "./StyledCode";
+
 const StyledPre = styled.pre`
   overflow-y: scroll;
   word-wrap: normal;
   border: 0.5px solid gray;
   border-radius: ${defaultBorderRadius};
   background-color: ${secondaryDark};
-  padding: 8px;
-  padding-top: 14px;
-  padding-bottom: 16px;
+  position: relative;
 `;
 
-const StyledCode = styled.code``;
+const CopyButtonDiv = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+`;
 
 const StyledCopyButton = styled.button<{ visible: boolean }>`
-  /* position: relative; */
-  float: right;
   border: none;
-  background-color: ${secondaryDark};
+  background-color: transparent;
   cursor: pointer;
-  padding: 0;
-  /* margin: 4px; */
-  margin-top: -6px;
 
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
 `;
@@ -62,9 +61,55 @@ function CopyButton(props: { textToCopy: string; visible: boolean }) {
   );
 }
 
-function CodeBlock(props: { language?: string; children: string }) {
+function CodeBlock(props: { children: string }) {
+  const [result, setResult] = useState<AutoHighlightResult | undefined>(
+    undefined
+  );
   useEffect(() => {
-    hljs.highlightAll();
+    const result = hljs.highlightAuto(
+      (props.children as any).props.children[0],
+      [
+        "python",
+        "javascript",
+        "typescript",
+        "bash",
+        "html",
+        "css",
+        "json",
+        "yaml",
+        "markdown",
+        "sql",
+        "java",
+        "c",
+        "cpp",
+        "csharp",
+        "go",
+        "kotlin",
+        "php",
+        "ruby",
+        "rust",
+        "scala",
+        "swift",
+        "dart",
+        "haskell",
+        "perl",
+        "r",
+        "matlab",
+        "powershell",
+        "lua",
+        "elixir",
+        "clojure",
+        "groovy",
+        "julia",
+        "vbnet",
+        "objectivec",
+        "fsharp",
+        "erlang",
+        "ocaml",
+      ]
+    );
+    console.log(result);
+    setResult(result);
   }, [props.children]);
   const [hovered, setHovered] = useState<boolean>(false);
 
@@ -77,11 +122,15 @@ function CodeBlock(props: { language?: string; children: string }) {
         setHovered(false);
       }}
     >
-      <CopyButton
-        visible={hovered}
-        textToCopy={(props.children as any).props.children[0]}
-      />
-      <StyledCode>{props.children}</StyledCode>
+      <CopyButtonDiv>
+        <CopyButton
+          visible={hovered}
+          textToCopy={(props.children as any).props.children[0]}
+        />
+      </CopyButtonDiv>
+      <StyledCode language={result?.language}>
+        {(props.children as any).props.children[0]}
+      </StyledCode>
     </StyledPre>
   );
 }
diff --git a/extension/react-app/src/components/ContinueButton.tsx b/extension/react-app/src/components/ContinueButton.tsx
index c6117bf9..ef6719b7 100644
--- a/extension/react-app/src/components/ContinueButton.tsx
+++ b/extension/react-app/src/components/ContinueButton.tsx
@@ -1,6 +1,8 @@
 import styled, { keyframes } from "styled-components";
 import { Button } from ".";
 import { Play } from "@styled-icons/heroicons-outline";
+import { useSelector } from "react-redux";
+import { RootStore } from "../redux/store";
 
 let StyledButton = styled(Button)`
   margin: auto;
@@ -25,14 +27,21 @@ let StyledButton = styled(Button)`
 `;
 
 function ContinueButton(props: { onClick?: () => void; hidden?: boolean }) {
+  const vscMediaUrl = useSelector(
+    (state: RootStore) => state.config.vscMediaUrl
+  );
+
   return (
     <StyledButton
       hidden={props.hidden}
       className="m-auto"
       onClick={props.onClick}
     >
-      <Play />
-      {/* <img src={"/continue_arrow.png"} width="16px"></img> */}
+      {vscMediaUrl ? (
+        <img src={`${vscMediaUrl}/play_button.png`} width="22px" />
+      ) : (
+        <Play />
+      )}
       Continue
     </StyledButton>
   );
diff --git a/extension/react-app/src/components/DebugPanel.tsx b/extension/react-app/src/components/DebugPanel.tsx
index 30f38779..94dbac9e 100644
--- a/extension/react-app/src/components/DebugPanel.tsx
+++ b/extension/react-app/src/components/DebugPanel.tsx
@@ -6,6 +6,7 @@ import {
   setApiUrl,
   setVscMachineId,
   setSessionId,
+  setVscMediaUrl,
 } from "../redux/slices/configSlice";
 import { setHighlightedCode } from "../redux/slices/miscSlice";
 import { updateFileSystem } from "../redux/slices/debugContexSlice";
@@ -37,6 +38,7 @@ function DebugPanel(props: DebugPanelProps) {
           dispatch(setApiUrl(event.data.apiUrl));
           dispatch(setVscMachineId(event.data.vscMachineId));
           dispatch(setSessionId(event.data.sessionId));
+          dispatch(setVscMediaUrl(event.data.vscMediaUrl));
           break;
         case "highlightedCode":
           dispatch(setHighlightedCode(event.data.rangeInFile));
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index acaca9ce..30931f86 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -6,14 +6,20 @@ interface HeaderButtonWithTextProps {
   text: string;
   onClick?: (e: any) => void;
   children: React.ReactNode;
+  disabled?: boolean;
 }
 
 const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
   const [hover, setHover] = useState(false);
   return (
     <HeaderButton
+      disabled={props.disabled}
       style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
-      onMouseEnter={() => setHover(true)}
+      onMouseEnter={() => {
+        if (!props.disabled) {
+          setHover(true);
+        }
+      }}
       onMouseLeave={() => {
         setHover(false);
       }}
diff --git a/extension/react-app/src/components/LoadingCover.tsx b/extension/react-app/src/components/LoadingCover.tsx
new file mode 100644
index 00000000..a0f8f7a2
--- /dev/null
+++ b/extension/react-app/src/components/LoadingCover.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(
+    101.79deg,
+    #12887a 0%,
+    #87245c 32%,
+    #e12637 63%,
+    #ffb215 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index: 10;
+`;
+
+const StyledImg = styled.img`
+  /* add your styles here */
+`;
+
+const StyledDiv2 = styled.div`
+  width: 50%;
+  height: 5px;
+  background: white;
+  margin-top: 20px;
+`;
+
+interface LoadingCoverProps {
+  message: string;
+  hidden?: boolean;
+}
+
+const LoadingCover = (props: LoadingCoverProps) => {
+  return (
+    <StyledDiv style={{ display: props.hidden ? "none" : "inherit" }}>
+      <StyledImg src="continue.gif" alt="centered image" width="50%" />
+      <StyledDiv2></StyledDiv2>
+      <p>{props.message}</p>
+    </StyledDiv>
+  );
+};
+
+export default LoadingCover;
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 74a1c4e8..827d2d5f 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -200,6 +200,7 @@ function StepContainer(props: StepContainerProps) {
 
             <>
               <HeaderButtonWithText
+                disabled={props.historyNode.active as boolean}
                 onClick={(e) => {
                   e.stopPropagation();
                   props.onDelete();
diff --git a/extension/react-app/src/components/StyledCode.tsx b/extension/react-app/src/components/StyledCode.tsx
new file mode 100644
index 00000000..c5ed0101
--- /dev/null
+++ b/extension/react-app/src/components/StyledCode.tsx
@@ -0,0 +1,19 @@
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus as highlightStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface StyledCodeProps {
+  children: string;
+  language?: string;
+}
+
+const StyledCode = (props: StyledCodeProps) => (
+  <SyntaxHighlighter
+    customStyle={{ margin: "0" }}
+    style={highlightStyle}
+    language={props.language || "python"}
+  >
+    {props.children}
+  </SyntaxHighlighter>
+);
+
+export default StyledCode;
diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index e50a7686..2632e572 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -15,6 +15,7 @@ const DialogContainer = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  width: 75%;
 `;
 
 const Dialog = styled.div`
@@ -76,7 +77,6 @@ const TextDialog = (props: {
         <Dialog>
           <P>Thanks for your feedback. We'll get back to you soon!</P>
           <TextArea
-            cols={50}
             rows={10}
             ref={textAreaRef}
             onKeyDown={(e) => {