fix: scaffolding for future language syntax highlighting

Author: Patrick-Erichsen

.vscode/launch.json

@@ -17,10 +17,7 @@
         "--extensionDevelopmentPath=${workspaceFolder}/extensions/vscode"
       ],
       "pauseForSourceMap": false,
-      "outFiles": [
-        "${workspaceFolder}/extensions/vscode/out/extension.js",
-        "/Users/natesesti/.continue/config.ts"
-      ],
+      "outFiles": ["${workspaceFolder}/extensions/vscode/out/extension.js"],
       "preLaunchTask": "vscode-extension:build",
       "env": {
         // "CONTROL_PLANE_ENV": "local"

core/commands/slash/comment.ts

@@ -1,5 +1,5 @@
-import { SlashCommand } from "../../index.js";
-import EditSlashCommand from "./edit.js";
+import { SlashCommand } from "../../";
+import EditSlashCommand from "./edit";
 
 const CommentSlashCommand: SlashCommand = {
   name: "comment",

core/commands/slash/edit.ts

@@ -5,18 +5,18 @@ import {
   fixCodeLlamaFirstLineIndentation,
   stopAtLines,
   streamWithNewLines,
-} from "../../autocomplete/lineStream.js";
-import { streamLines } from "../../diff/util.js";
-import { ContextItemWithId, ILLM, SlashCommand } from "../../index.js";
-import { stripImages } from "../../llm/images.js";
+} from "../../autocomplete/lineStream";
+import { streamLines } from "../../diff/util";
+import { ContextItemWithId, ILLM, SlashCommand } from "../../";
+import { stripImages } from "../../llm/images";
 import {
   dedentAndGetCommonWhitespace,
   getMarkdownLanguageTagForFile,
-} from "../../util/index.js";
+} from "../../util/";
 import {
   contextItemToRangeInFileWithContents,
   type RangeInFileWithContents,
-} from "../util.js";
+} from "../util";
 
 const PROMPT = `Take the file prefix and suffix into account, but only rewrite the code_to_edit as specified in the user_request. The code you write in modified_code_to_edit will replace the code between the code_to_edit tags. Do NOT preface your answer or write anything other than code. The </modified_code_to_edit> tag should be written to indicate the end of the modified code section. Do not ever use nested tags.
 
@@ -62,13 +62,6 @@ export async function getPromptParts(
 ) {
   const maxTokens = Math.floor(model.contextLength / 2);
 
-  const TOKENS_TO_BE_CONSIDERED_LARGE_RANGE = tokenLimit ?? 1200;
-  // if (model.countTokens(rif.contents) > TOKENS_TO_BE_CONSIDERED_LARGE_RANGE) {
-  //   throw new Error(
-  //     "\n\n**It looks like you've selected a large range to edit, which may take a while to complete. If you'd like to cancel, click the 'X' button above. If you highlight a more specific range, Continue will only edit within it.**"
-  //   );
-  // }
-
   const BUFFER_FOR_FUNCTIONS = 400;
   let totalTokens =
     model.countTokens(fullFileContents + PROMPT + input) +

gui/src/components/markdown/CodeBlockToolbar.tsx

@@ -72,8 +72,6 @@ function isTerminalCodeBlock(language: string | undefined, text: string) {
 
 function CodeBlockToolBar(props: CodeBlockToolBarProps) {
   const ideMessenger = useContext(IdeMessengerContext);
-
-  const [copied, setCopied] = useState(false);
   const [applying, setApplying] = useState(false);
 
   return (
@@ -85,8 +83,8 @@ function CodeBlockToolBar(props: CodeBlockToolBarProps) {
               isTerminalCodeBlock(props.language, props.text)
                 ? "Run in terminal"
                 : applying
-                  ? "Applying..."
-                  : "Apply to current file"
+                ? "Applying..."
+                : "Apply to current file"
             }
             disabled={applying}
             style={{ backgroundColor: vscEditorBackground }}

gui/src/components/markdown/PreWithToolbar.tsx

@@ -19,10 +19,7 @@ function childrenToText(children: any) {
   return children.map((child: any) => childToText(child)).join("");
 }
 
-function PreWithToolbar(props: {
-  children: any;
-  language: string | undefined;
-}) {
+function PreWithToolbar(props: { children: any; language: string | null }) {
   const uiConfig = useUIConfig();
   const toolbarBottom = uiConfig?.codeBlockToolbarPosition == "bottom";
 

gui/src/components/markdown/StyledCode.tsx

@@ -1,7 +1,6 @@
-import React, { memo, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { memo, useEffect } from "react";
 import { useRemark } from "react-remark";
-import rehypeHighlight from "rehype-highlight";
+import rehypeHighlight, { Options } from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 import styled from "styled-components";
@@ -12,11 +11,11 @@ import {
   vscEditorBackground,
   vscForeground,
 } from "..";
-import { RootState } from "../../redux/store";
 import { getFontSize } from "../../util";
 import LinkableCode from "./LinkableCode";
 import PreWithToolbar from "./PreWithToolbar";
 import { SyntaxHighlightedPre } from "./SyntaxHighlightedPre";
+import { common } from "lowlight";
 import "./katex.css";
 import "./markdown.css";
 
@@ -59,19 +58,9 @@ const StyledMarkdown = styled.div<{
   }
 
   background-color: ${vscBackground};
-  font-family:
-    var(--vscode-font-family),
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
+  font-family: var(--vscode-font-family), system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Open Sans", "Helvetica Neue", sans-serif;
   font-size: ${(props) => props.fontSize || getFontSize()}px;
   padding-left: 8px;
   padding-right: 8px;
@@ -92,41 +81,19 @@ interface StyledMarkdownPreviewProps {
   scrollLocked?: boolean;
 }
 
-const FadeInWords: React.FC = (props: any) => {
-  const { children, ...otherProps } = props;
+const HLJS_LANGUAGE_CLASSNAME_PREFIX = "language-";
 
-  const active = useSelector((store: RootState) => store.state.active);
+const getLanuageFromClassName = (className: any): string | null => {
+  if (!className || typeof className !== "string") {
+    return null;
+  }
 
-  const [textWhenActiveStarted, setTextWhenActiveStarted] = useState(
-    props.children,
-  );
+  const language = className
+    .split(" ")
+    .find((word) => word.startsWith(HLJS_LANGUAGE_CLASSNAME_PREFIX))
+    ?.split("-")[1];
 
-  useEffect(() => {
-    if (active) {
-      setTextWhenActiveStarted(children);
-    }
-  }, [active]);
-
-  // Split the text into words
-  const words = children
-    .map((child) => {
-      if (typeof child === "string") {
-        return child.split(" ").map((word, index) => (
-          <span className="fade-in-span" key={index}>
-            {word}{" "}
-          </span>
-        ));
-      } else {
-        return <span className="fade-in-span">{child}</span>;
-      }
-    })
-    .flat();
-
-  return active && children !== textWhenActiveStarted ? (
-    <p {...otherProps}>{words}</p>
-  ) : (
-    <p>{children}</p>
-  );
+  return language;
 };
 
 const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
@@ -147,7 +114,21 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
         };
       },
     ],
-    rehypePlugins: [rehypeHighlight as any, {}, rehypeKatex as any, {}],
+    rehypePlugins: [
+      rehypeKatex as any,
+      {},
+      [
+        rehypeHighlight as any,
+        {
+          // Note: This is the default behavior, but leaving this here for scaffolding to
+          // add unsupported languages in the future.
+          // https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
+          languages: { ...common },
+        } as Options,
+
+        ,
+      ],
+    ],
     rehypeReactOptions: {
       components: {
         a: ({ node, ...props }) => {
@@ -158,12 +139,12 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
           );
         },
         pre: ({ node, ...preProps }) => {
-          const language = preProps?.children?.[0]?.props?.className
-            ?.split(" ")
-            .find((word) => word.startsWith("language-"))
-            ?.split("-")[1];
+          const childrenClassName = preProps?.children?.[0]?.props?.className;
+
           return props.showCodeBorder ? (
-            <PreWithToolbar language={language}>
+            <PreWithToolbar
+              language={getLanuageFromClassName(childrenClassName)}
+            >
               <SyntaxHighlightedPre {...preProps}></SyntaxHighlightedPre>
             </PreWithToolbar>
           ) : (
@@ -181,31 +162,6 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview(
             <LinkableCode {...codeProps}>{codeProps.children}</LinkableCode>
           );
         },
-        //   pre: ({ node, ...preProps }) => {
-        //     const codeString =
-        //       preProps.children?.[0]?.props?.children?.[0].trim() || "";
-        //     const monacoEditor = (
-        //       <MonacoCodeBlock
-        //         showBorder={props.showCodeBorder}
-        //         language={
-        //           preProps.children?.[0]?.props?.className?.split("-")[1] ||
-        //           "typescript"
-        //         }
-        //         preProps={preProps}
-        //         codeString={codeString}
-        //       />
-        //     );
-        //     return props.showCodeBorder ? (
-        //       <PreWithToolbar copyvalue={codeString}>
-        //         <SyntaxHighlightedPre {...preProps}></SyntaxHighlightedPre>
-        //       </PreWithToolbar>
-        //     ) : (
-        //       <SyntaxHighlightedPre {...preProps}></SyntaxHighlightedPre>
-        //     );
-        //   },
-        // p: ({ node, ...props }) => {
-        //   return <FadeInWords {...props}></FadeInWords>;
-        // },
       },
     },
   });

gui/src/components/markdown/StyledMarkdownPreview.tsx

@@ -1,5 +1,4 @@
 import { Dispatch } from "@reduxjs/toolkit";
-
 import { JSONContent } from "@tiptap/react";
 import {
   ChatHistory,

gui/src/hooks/useChatHandler.ts

@@ -134,38 +134,6 @@ const NewSessionButton = styled.div`
   cursor: pointer;
 `;
 
-const ThreadHead = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 18px 6px 0 6px;
-`;
-
-const THREAD_AVATAR_SIZE = 15;
-
-const ThreadAvatar = styled.div`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: rgba(248, 248, 248, 0.75);
-  color: #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(136, 136, 136, 0.3);
-`;
-
-const ThreadUserTitle = styled.div`
-  text-transform: capitalize;
-  font-weight: 500;
-  margin-bottom: 2px;
-`;
-
-const ThreadUserName = styled.div`
-  font-size: ${getFontSize() - 3}px;
-  color: ${lightGray};
-`;
-
 function fallbackRender({ error, resetErrorBoundary }: any) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.