feat(playground): toggle for the template language (#5004)

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",

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);
+}

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}

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>
+  );
+}

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;