diff --git a/.vscode/launch.json b/.vscode/launch.json index 54d282cc8a..8967930402 100644 --- a/.vscode/launch.json +++ b/.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" diff --git a/core/commands/slash/comment.ts b/core/commands/slash/comment.ts index 929763bf3e..e3b601c04d 100644 --- a/core/commands/slash/comment.ts +++ b/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", diff --git a/core/commands/slash/edit.ts b/core/commands/slash/edit.ts index a0fbfdd26a..a3c3ed91ce 100644 --- a/core/commands/slash/edit.ts +++ b/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 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) + diff --git a/gui/src/components/markdown/CodeBlockToolbar.tsx b/gui/src/components/markdown/CodeBlockToolbar.tsx index 84e5211928..c7f695f00c 100644 --- a/gui/src/components/markdown/CodeBlockToolbar.tsx +++ b/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 }} diff --git a/gui/src/components/markdown/PreWithToolbar.tsx b/gui/src/components/markdown/PreWithToolbar.tsx index a5df415f10..3731109f51 100644 --- a/gui/src/components/markdown/PreWithToolbar.tsx +++ b/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"; diff --git a/gui/src/components/markdown/StyledCode.tsx b/gui/src/components/markdown/StyledCode.tsx deleted file mode 100644 index c5ed010147..0000000000 --- a/gui/src/components/markdown/StyledCode.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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) => ( - - {props.children} - -); - -export default StyledCode; diff --git a/gui/src/components/markdown/StyledMarkdownPreview.tsx b/gui/src/components/markdown/StyledMarkdownPreview.tsx index 7ae3c9a619..afdc88ec5c 100644 --- a/gui/src/components/markdown/StyledMarkdownPreview.tsx +++ b/gui/src/components/markdown/StyledMarkdownPreview.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) => ( - - {word}{" "} - - )); - } else { - return {child}; - } - }) - .flat(); - - return active && children !== textWhenActiveStarted ? ( -

{words}

- ) : ( -

{children}

- ); + 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 ? ( - + ) : ( @@ -181,31 +162,6 @@ const StyledMarkdownPreview = memo(function StyledMarkdownPreview( {codeProps.children} ); }, - // pre: ({ node, ...preProps }) => { - // const codeString = - // preProps.children?.[0]?.props?.children?.[0].trim() || ""; - // const monacoEditor = ( - // - // ); - // return props.showCodeBorder ? ( - // - // - // - // ) : ( - // - // ); - // }, - // p: ({ node, ...props }) => { - // return ; - // }, }, }, }); diff --git a/gui/src/hooks/useChatHandler.ts b/gui/src/hooks/useChatHandler.ts index a61f131967..fa7e019459 100644 --- a/gui/src/hooks/useChatHandler.ts +++ b/gui/src/hooks/useChatHandler.ts @@ -1,5 +1,4 @@ import { Dispatch } from "@reduxjs/toolkit"; - import { JSONContent } from "@tiptap/react"; import { ChatHistory, diff --git a/gui/src/pages/gui.tsx b/gui/src/pages/gui.tsx index caaff7ea69..2de4e5f6b1 100644 --- a/gui/src/pages/gui.tsx +++ b/gui/src/pages/gui.tsx @@ -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.