From 45755bbd2d52527bdbdfa58e4c7bd3e3577b1f79 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Tue, 15 Oct 2024 08:33:01 -0600
Subject: [PATCH] feat(playground): toggle for the template language (#5004)

---
 app/package.json                              |  2 +-
 app/pnpm-lock.yaml                            | 10 +++---
 app/src/components/templateEditor/types.ts    |  7 ++++
 app/src/pages/playground/Playground.tsx       | 10 ++++--
 .../playground/TemplateLanguageRadioGroup.tsx | 34 +++++++++++++++++++
 app/src/store/playground/playgroundStore.tsx  |  2 ++
 6 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 app/src/pages/playground/TemplateLanguageRadioGroup.tsx

diff --git a/app/package.json b/app/package.json
index 1cb7645a2f..f109aeb5f2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -6,7 +6,7 @@
   "license": "None",
   "private": true,
   "dependencies": {
-    "@arizeai/components": "^1.8.4",
+    "@arizeai/components": "^1.8.5",
     "@arizeai/openinference-semantic-conventions": "^0.10.0",
     "@arizeai/point-cloud": "^3.0.6",
     "@codemirror/autocomplete": "6.12.0",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index f31c4990ba..c55e6936c8 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
   .:
     dependencies:
       '@arizeai/components':
-        specifier: ^1.8.4
-        version: 1.8.4(@types/react@18.3.10)(eslint@8.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^1.8.5
+        version: 1.8.5(@types/react@18.3.10)(eslint@8.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@arizeai/openinference-semantic-conventions':
         specifier: ^0.10.0
         version: 0.10.0
@@ -274,8 +274,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@arizeai/components@1.8.4':
-    resolution: {integrity: sha512-pq7J01TPXpLRJJjRZSWpZX4XtlO/41zKEZv1l7un8Nv6Ol4RG7mf5i4h+QMDUmg5m2JXVNAb8GaRLRqESFM5tA==}
+  '@arizeai/components@1.8.5':
+    resolution: {integrity: sha512-l4WwJw2CwhY4X/sQZ60Hm4VmBqVP3UmBIVhXhZByJo62GbPEii7E2AFx+YQyA7XiUwI4hGZ5aThd5oAuLFr9ZQ==}
     engines: {node: '>=14'}
     peerDependencies:
       react: '>=18'
@@ -3804,7 +3804,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@arizeai/components@1.8.4(@types/react@18.3.10)(eslint@8.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@arizeai/components@1.8.5(@types/react@18.3.10)(eslint@8.57.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@emotion/react': 11.11.4(@types/react@18.3.10)(react@18.3.1)
       '@react-aria/breadcrumbs': 3.5.13(react@18.3.1)
diff --git a/app/src/components/templateEditor/types.ts b/app/src/components/templateEditor/types.ts
index ff45d4dc5e..20a7ccfd7c 100644
--- a/app/src/components/templateEditor/types.ts
+++ b/app/src/components/templateEditor/types.ts
@@ -2,3 +2,10 @@ import { TemplateLanguages } from "./constants";
 
 export type TemplateLanguage =
   (typeof TemplateLanguages)[keyof typeof TemplateLanguages];
+
+/**
+ * Type guard for the TemplateLanguage type
+ */
+export function isTemplateLanguage(v: string): v is TemplateLanguage {
+  return Object.values(TemplateLanguages).includes(v as TemplateLanguage);
+}
diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
index 6c5155e183..06b41e7eea 100644
--- a/app/src/pages/playground/Playground.tsx
+++ b/app/src/pages/playground/Playground.tsx
@@ -26,6 +26,7 @@ import { PlaygroundInputTypeTypeRadioGroup } from "./PlaygroundInputModeRadioGro
 import { PlaygroundOutput } from "./PlaygroundOutput";
 import { PlaygroundRunButton } from "./PlaygroundRunButton";
 import { PlaygroundTemplate } from "./PlaygroundTemplate";
+import { TemplateLanguageRadioGroup } from "./TemplateLanguageRadioGroup";
 
 export function Playground(props: InitialPlaygroundState) {
   return (
@@ -140,10 +141,15 @@ function PlaygroundContent() {
             <AccordionItem
               title="Prompts"
               id="prompts"
-              extra={<AddPromptButton />}
+              extra={
+                <Flex direction="row" gap="size-100" alignItems="center">
+                  <TemplateLanguageRadioGroup />
+                  <AddPromptButton />
+                </Flex>
+              }
             >
               <View height="100%" padding="size-200">
-                <Flex direction="row" gap="size-100">
+                <Flex direction="row" gap="size-200">
                   {instances.map((instance, i) => (
                     <div
                       key={i}
diff --git a/app/src/pages/playground/TemplateLanguageRadioGroup.tsx b/app/src/pages/playground/TemplateLanguageRadioGroup.tsx
new file mode 100644
index 0000000000..a967443312
--- /dev/null
+++ b/app/src/pages/playground/TemplateLanguageRadioGroup.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { Radio, RadioGroup } from "@arizeai/components";
+
+import { TemplateLanguages } from "@phoenix/components/templateEditor/constants";
+import { isTemplateLanguage } from "@phoenix/components/templateEditor/types";
+import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
+
+export function TemplateLanguageRadioGroup() {
+  const language = usePlaygroundContext((state) => state.templateLanguage);
+  const setLanguage = usePlaygroundContext(
+    (state) => state.setTemplateLanguage
+  );
+  return (
+    <RadioGroup
+      value={language}
+      variant="inline-button"
+      aria-label="Template Language"
+      size="compact"
+      onChange={(v) => {
+        if (isTemplateLanguage(v)) {
+          setLanguage(v);
+        }
+      }}
+    >
+      <Radio label="Mustache" value={TemplateLanguages.Mustache}>
+        Mustache
+      </Radio>
+      <Radio label="F-String" value={TemplateLanguages.FString}>
+        F-String
+      </Radio>
+    </RadioGroup>
+  );
+}
diff --git a/app/src/store/playground/playgroundStore.tsx b/app/src/store/playground/playgroundStore.tsx
index 11f6e21502..b0d41009f6 100644
--- a/app/src/store/playground/playgroundStore.tsx
+++ b/app/src/store/playground/playgroundStore.tsx
@@ -251,6 +251,8 @@ export const createPlaygroundStore = (
     },
     setTemplateLanguage: (templateLanguage: TemplateLanguage) => {
       set({ templateLanguage });
+      // Re-compute variables when the template language changes
+      get().calculateVariables();
     },
     calculateVariables: () => {
       const instances = get().instances;