Merge pull request langchain-ai#46 from snifhex/sachin/add-html-synta…

…x-highlighting feat: Add HTML syntax highlighting
mojowebs · Oct 18, 2024 · 6eef340 · 6eef340
2 parents f35aac3 + 2df0e8a
commit 6eef340
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@assistant-ui/react-markdown": "^0.2.18",
     "@assistant-ui/react-syntax-highlighter": "^0.0.13",
     "@codemirror/lang-cpp": "^6.0.2",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-java": "^6.0.1",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-php": "^6.0.1",

diff --git a/src/agent/open-canvas/nodes/generateArtifact.ts b/src/agent/open-canvas/nodes/generateArtifact.ts
@@ -45,7 +45,7 @@ export const generateArtifact = async (
               "The language of the artifact to generate. " +
                 " If generating code, it should be the programming language. " +
                 "For programming languages, ensure it's one of the following" +
-                "'javascript' | 'typescript' | 'cpp' | 'java' | 'php' | 'python' | 'other'"
+                "'javascript' | 'typescript' | 'cpp' | 'java' | 'php' | 'python' | 'html' | 'other'"
             ),
           artifact: z
             .string()

diff --git a/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts b/src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts
@@ -46,6 +46,9 @@ export const rewriteCodeArtifactTheme = async (
       case "python":
         newLanguage = "Python";
         break;
+      case "html":
+        newLanguage = "HTML";
+        break;
     }
     formattedPrompt = PORT_LANGUAGE_CODE_ARTIFACT_PROMPT.replace(
       "{newLanguage}",

diff --git a/src/components/ProgrammingLanguageList.tsx b/src/components/ProgrammingLanguageList.tsx
@@ -5,7 +5,9 @@ interface ProgrammingLanguageListProps {
   handleSubmit: (portLanguage: ProgrammingLanguageOptions) => Promise<void>;
 }
 
-export function ProgrammingLanguageList(props: ProgrammingLanguageListProps) {
+export function ProgrammingLanguageList(
+  props: Readonly<ProgrammingLanguageListProps>
+) {
   return (
     <div className="flex flex-col gap-3 items-center w-full text-left">
       <TooltipIconButton
@@ -62,6 +64,15 @@ export function ProgrammingLanguageList(props: ProgrammingLanguageListProps) {
       >
         <p>Python</p>
       </TooltipIconButton>
+      <TooltipIconButton
+        tooltip="HTML"
+        variant="ghost"
+        className="transition-colors w-full h-fit"
+        delayDuration={400}
+        onClick={async () => await props.handleSubmit("html")}
+      >
+        <p>HTML</p>
+      </TooltipIconButton>
     </div>
   );
 }
diff --git a/src/components/artifacts/CodeRenderer.tsx b/src/components/artifacts/CodeRenderer.tsx
@@ -6,17 +6,17 @@ import { cpp } from "@codemirror/lang-cpp";
 import { java } from "@codemirror/lang-java";
 import { php } from "@codemirror/lang-php";
 import { python } from "@codemirror/lang-python";
-
 import styles from "./CodeRenderer.module.css";
 import { cleanContent } from "@/lib/normalize_string";
+import { html } from "@codemirror/lang-html";
 
 export interface CodeRendererProps {
   artifact: Artifact;
   setArtifactContent: (id: string, content: string) => void;
   editorRef: MutableRefObject<EditorView | null>;
 }
 
-export function CodeRenderer(props: CodeRendererProps) {
+export function CodeRenderer(props: Readonly<CodeRendererProps>) {
   let extensions: any[] = [];
   if (props.artifact.language === "javascript") {
     extensions = [javascript({ jsx: true, typescript: false })];
@@ -30,6 +30,8 @@ export function CodeRenderer(props: CodeRendererProps) {
     extensions = [php()];
   } else if (props.artifact.language === "python") {
     extensions = [python()];
+  } else if (props.artifact.language === "html") {
+    extensions = [html()];
   }
 
   if (!props.artifact.content) {

diff --git a/src/components/artifacts/actions_toolbar/code/PortToLanguage.tsx b/src/components/artifacts/actions_toolbar/code/PortToLanguage.tsx
@@ -24,6 +24,8 @@ const prettifyLanguage = (language: ProgrammingLanguageOptions) => {
       return "Java";
     case "python":
       return "Python";
+    case "html":
+      return "HTML";
     default:
       return language;
   }

diff --git a/src/lib/get_language_template.ts b/src/lib/get_language_template.ts
@@ -31,6 +31,13 @@ echo "Hello, World!";
 
 if __name__ == "__main__":
     main()`;
+    case "html":
+      return `<!DOCTYPE html>
+<html>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>`;
     default:
       return "// No quickstart content available for this language";
   }

diff --git a/src/types.ts b/src/types.ts
@@ -56,7 +56,8 @@ export type ProgrammingLanguageOptions =
   | "cpp"
   | "java"
   | "php"
-  | "python";
+  | "python"
+  | "html";
 
 export type ArtifactLengthOptions = "shortest" | "short" | "long" | "longest";
 

diff --git a/yarn.lock b/yarn.lock
@@ -123,7 +123,7 @@
     "@lezer/common" "^1.0.2"
     "@lezer/css" "^1.1.7"
 
-"@codemirror/lang-html@^6.0.0":
+"@codemirror/lang-html@^6.0.0", "@codemirror/lang-html@^6.4.9":
   version "6.4.9"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.9.tgz#d586f2cc9c341391ae07d1d7c545990dfa069727"
   integrity sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==
@@ -5428,8 +5428,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5517,7 +5525,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==