From de12642058eeca896b8c99371b7bdb54d4a31b8d Mon Sep 17 00:00:00 2001 From: snifhex Date: Fri, 18 Oct 2024 03:40:12 +0530 Subject: [PATCH 1/3] feat: add html syntax highlighter in code renderer --- package.json | 1 + src/components/artifacts/CodeRenderer.tsx | 6 ++++-- yarn.lock | 23 +++++++++++++++++++---- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 50f43100..a4e9a0ac 100644 --- 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/components/artifacts/CodeRenderer.tsx b/src/components/artifacts/CodeRenderer.tsx index 6ad69b64..99593fad 100644 --- a/src/components/artifacts/CodeRenderer.tsx +++ b/src/components/artifacts/CodeRenderer.tsx @@ -6,9 +6,9 @@ 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; @@ -16,7 +16,7 @@ export interface CodeRendererProps { editorRef: MutableRefObject; } -export function CodeRenderer(props: CodeRendererProps) { +export function CodeRenderer(props: Readonly) { 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/yarn.lock b/yarn.lock index 600cec27..82f26588 100644 --- 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== From b9932a74dc14856edbed42c67fb5dbe03d84db7b Mon Sep 17 00:00:00 2001 From: snifhex Date: Fri, 18 Oct 2024 03:42:14 +0530 Subject: [PATCH 2/3] feat: add html in programming language options --- src/components/ProgrammingLanguageList.tsx | 13 ++++++++++++- .../actions_toolbar/code/PortToLanguage.tsx | 2 ++ src/lib/get_language_template.ts | 7 +++++++ src/types.ts | 3 ++- 4 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/ProgrammingLanguageList.tsx b/src/components/ProgrammingLanguageList.tsx index e86703cf..9eb2a2d7 100644 --- a/src/components/ProgrammingLanguageList.tsx +++ b/src/components/ProgrammingLanguageList.tsx @@ -5,7 +5,9 @@ interface ProgrammingLanguageListProps { handleSubmit: (portLanguage: ProgrammingLanguageOptions) => Promise; } -export function ProgrammingLanguageList(props: ProgrammingLanguageListProps) { +export function ProgrammingLanguageList( + props: Readonly +) { return (

Python

 + await props.handleSubmit("html")} + > +

HTML

+
); } diff --git a/src/components/artifacts/actions_toolbar/code/PortToLanguage.tsx b/src/components/artifacts/actions_toolbar/code/PortToLanguage.tsx index 6e7cfcf9..8e8a8625 100644 --- 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 index d35b3b3d..2f1e1084 100644 --- 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 ` + + +

Hello, World!

+ +`; default: return "// No quickstart content available for this language"; } diff --git a/src/types.ts b/src/types.ts index 8b808b43..e22ba470 100644 --- 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"; From 2df0e8a7e30752c48a7897402abcef2d1904960b Mon Sep 17 00:00:00 2001 From: snifhex Date: Fri, 18 Oct 2024 03:46:50 +0530 Subject: [PATCH 3/3] feat: add llm structured output for generating artifacts to include HTML as a language --- src/agent/open-canvas/nodes/generateArtifact.ts | 2 +- src/agent/open-canvas/nodes/rewriteCodeArtifactTheme.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/agent/open-canvas/nodes/generateArtifact.ts b/src/agent/open-canvas/nodes/generateArtifact.ts index 90347c24..b804c152 100644 --- 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 index 245f440b..d364e494 100644 --- 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}",