html encoding to support html characters in the preview (#1340)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> Add HTML encoding in `render-part.tsx` to handle HTML characters in
text previews using the `he` library.
> 
>   - **Behavior**:
> - Use `he.encode()` in `render-part.tsx` to encode HTML characters in
text previews.
>     - Handles both parsed JSON strings and regular strings.
>   - **Dependencies**:
> - Add `he` and `@types/he` to `package.json` in `playground-common`
and `web-panel`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 67a60c2. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

typescript/playground-common/package.json

@@ -93,6 +93,7 @@
     "@rjsf/validator-ajv8": "^5.15.0",
     "@shikijs/rehype": "^1.24.4",
     "@tanstack/react-table": "^8.10.7",
+    "@types/he": "^1.2.3",
     "@types/react-slick": "^0.23.13",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript/vfs": "^1.6.0",
@@ -114,6 +115,7 @@
     "codemirror-copilot": "^0.0.7",
     "hast": "^1.0.0",
     "hast-util-has-property": "^3.0.0",
+    "he": "^1.2.0",
     "js-tiktoken": "^1.0.10",
     "json-schema-empty": "^1.1.1",
     "json-schema-faker": "^0.5.6",

typescript/playground-common/src/shared/baml-project-panel/playground-panel/prompt-preview/render-part.tsx

@@ -1,6 +1,7 @@
 import type { WasmChatMessagePart, WasmParam, WasmTestCase } from '@gloo-ai/baml-schema-wasm-web'
 import { RenderPromptPart } from './render-text'
 import { WebviewMedia } from './webview-media'
+import he from 'he'
 
 export const RenderPart: React.FC<{
   part: WasmChatMessagePart
@@ -17,11 +18,11 @@ export const RenderPart: React.FC<{
             if (typeof parsed === 'object') {
               return Object.values(parsed).filter((val): val is string => typeof val === 'string')
             } else {
-              return [parsed]
+              return [he.encode(parsed)]
             }
           } catch {
             // If parsing fails, treat it as a regular string
-            return [input.value]
+            return [he.encode(input.value)]
           }
         }
         if (typeof input.value === 'object') {
@@ -31,7 +32,8 @@ export const RenderPart: React.FC<{
       })
     }
 
-    const text = part.as_text()
+    // this makes it so that we can escape html
+    const text = he.encode(part.as_text() ?? '')
     const allChunks = extractStringValues(testCase?.inputs ?? [])
     const highlightChunks = allChunks.filter((chunk) => {
       if (!chunk || !text) return false

typescript/vscode-ext/packages/web-panel/package.json

@@ -66,6 +66,7 @@
     "githubLight": "link:@uiw/react-json-view/githubLight",
     "hast": "^1.0.0",
     "hast-util-has-property": "^3.0.0",
+    "he": "^1.2.0",
     "jotai": "^2.8.0",
     "js-tiktoken": "^1.0.10",
     "json-schema-empty": "^1.1.1",
@@ -99,6 +100,7 @@
   "devDependencies": {
     "@githubocto/tailwind-vscode": "^1.0.5",
     "@types/hast": "^3.0.4",
+    "@types/he": "^1.2.3",
     "@types/node": "^20.12.12",
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18.2.74",