fix: Hide Output Schema (response format) button on unsupported provi…

…der instances

Resolves #5385
Resolves #5384

app/src/pages/playground/InvocationParametersForm.tsx

@@ -172,13 +172,6 @@ type InvocationParametersFormProps = {
   instanceId: number;
 };
 
-/**
- * Azure openai has user defined model names but our invocation parameters query will never know
- * what they are. We will just pass in a stub model name and the query will fallback to the set
- * of invocation parameters that are defaults to our azure client.
- */
-const AZURE_MODEL_NAME = "AZURE_DEPLOYMENT";
-
 export const InvocationParametersForm = ({
   instanceId,
 }: InvocationParametersFormProps) => {
@@ -195,8 +188,13 @@ export const InvocationParametersForm = ({
   const filterInstanceModelInvocationParameters = usePlaygroundContext(
     (state) => state.filterInstanceModelInvocationParameters
   );
+  /**
+   * Azure openai has user defined model names but our invocation parameters query will never know
+   * what they are. We will just pass in an empty model name and the query will fallback to the set
+   * of invocation parameters that are defaults to our azure client.
+   */
   const modelNameToQuery =
-    model.provider !== "AZURE_OPENAI" ? model.modelName : AZURE_MODEL_NAME;
+    model.provider !== "AZURE_OPENAI" ? model.modelName : null;
   const { modelInvocationParameters } =
     useLazyLoadQuery<InvocationParametersFormQuery>(
       graphql`
@@ -245,24 +243,6 @@ export const InvocationParametersForm = ({
       { input: { providerKey: model.provider, modelName: modelNameToQuery } }
     );
 
-  useEffect(() => {
-    // filter invocation parameters to only include those that are supported by the model
-    if (modelInvocationParameters) {
-      filterInstanceModelInvocationParameters({
-        instanceId: instance.id,
-        modelSupportedInvocationParameters:
-          modelInvocationParameters as Mutable<
-            typeof modelInvocationParameters
-          >,
-        filter: constrainInvocationParameterInputsToDefinition,
-      });
-    }
-  }, [
-    filterInstanceModelInvocationParameters,
-    instance.id,
-    modelInvocationParameters,
-  ]);
-
   const onChange = useCallback(
     (field: InvocationParameter, value: unknown) => {
       const existingParameter = instance.model.invocationParameters.find(
@@ -295,6 +275,33 @@ export const InvocationParametersForm = ({
     [instance, updateInstanceModelInvocationParameters]
   );
 
+  useEffect(() => {
+    // filter invocation parameters to only include those that are supported by the model
+    // This will remove configured values that are not supported by the newly selected model
+    // Including invocation parameters managed outside of this form, like response_format
+    if (modelInvocationParameters) {
+      filterInstanceModelInvocationParameters({
+        instanceId: instance.id,
+        modelSupportedInvocationParameters:
+          modelInvocationParameters as Mutable<
+            typeof modelInvocationParameters
+          >,
+        filter: constrainInvocationParameterInputsToDefinition,
+      });
+    }
+  }, [
+    filterInstanceModelInvocationParameters,
+    instance.id,
+    modelInvocationParameters,
+  ]);
+
+  // It is safe to render this component if the model name is not set for non-azure models
+  // Hooks will still run to filter invocation parameters to only include those supported by the model
+  // but no form fields will be rendered if the model name is not set
+  if (model.modelName === null && model.provider !== "AZURE_OPENAI") {
+    return null;
+  }
+
   const fieldsForSchema = modelInvocationParameters
     .filter(
       (field) =>

app/src/pages/playground/ModelConfigButton.tsx

@@ -331,11 +331,9 @@ function ModelConfigDialogContent(props: ModelConfigDialogContentProps) {
               onChange={onModelNameChange}
             />
           )}
-          {instance.model.modelName ? (
+          <Suspense>
             <InvocationParametersForm instanceId={playgroundInstanceId} />
-          ) : (
-            <></>
-          )}
+          </Suspense>
         </Flex>
       </Form>
     </View>

app/src/pages/playground/PlaygroundChatTemplate.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useCallback, useState } from "react";
+import { useLazyLoadQuery } from "react-relay";
 import {
   DndContext,
   KeyboardSensor,
@@ -13,6 +14,7 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { graphql } from "relay-runtime";
 import { css } from "@emotion/react";
 
 import {
@@ -44,6 +46,7 @@ import {
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
 
+import { PlaygroundChatTemplateResponseFormatQuery } from "./__generated__/PlaygroundChatTemplateResponseFormatQuery.graphql";
 import { ChatMessageToolCallsEditor } from "./ChatMessageToolCallsEditor";
 import {
   RESPONSE_FORMAT_PARAM_CANONICAL_NAME,
@@ -87,6 +90,37 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
   if (!playgroundInstance) {
     throw new Error(`Playground instance ${id} not found`);
   }
+  // We don't care about the model name for Azure OpenAI
+  const modelNameQueryInput =
+    playgroundInstance.model.provider !== "AZURE_OPENAI"
+      ? (playgroundInstance.model?.modelName ?? null)
+      : null;
+  const { modelInvocationParameters } =
+    useLazyLoadQuery<PlaygroundChatTemplateResponseFormatQuery>(
+      graphql`
+        query PlaygroundChatTemplateResponseFormatQuery($input: ModelsInput!) {
+          modelInvocationParameters(input: $input) {
+            __typename
+            ... on InvocationParameterBase {
+              invocationName
+              canonicalName
+            }
+          }
+        }
+      `,
+      {
+        input: {
+          providerKey: playgroundInstance.model.provider,
+          modelName: modelNameQueryInput,
+        },
+      }
+    );
+
+  const supportsResponseFormat = modelInvocationParameters?.some(
+    (p) =>
+      p.canonicalName === RESPONSE_FORMAT_PARAM_CANONICAL_NAME ||
+      p.invocationName === RESPONSE_FORMAT_PARAM_NAME
+  );
   const hasTools = playgroundInstance.tools.length > 0;
   const hasResponseFormat =
     playgroundInstance.model.invocationParameters.find(
@@ -167,25 +201,27 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
         borderBottomWidth={hasTools || hasResponseFormat ? "thin" : undefined}
       >
         <Flex direction="row" justifyContent="end" gap="size-100">
-          <Button
-            variant="default"
-            size="compact"
-            aria-label="output schema"
-            icon={<Icon svg={<Icons.PlusOutline />} />}
-            disabled={hasResponseFormat}
-            onClick={() => {
-              upsertInvocationParameterInput({
-                instanceId: id,
-                invocationParameterInput: {
-                  valueJson: createOpenAIResponseFormat(),
-                  invocationName: RESPONSE_FORMAT_PARAM_NAME,
-                  canonicalName: RESPONSE_FORMAT_PARAM_CANONICAL_NAME,
-                },
-              });
-            }}
-          >
-            Output Schema
-          </Button>
+          {supportsResponseFormat ? (
+            <Button
+              variant="default"
+              size="compact"
+              aria-label="output schema"
+              icon={<Icon svg={<Icons.PlusOutline />} />}
+              disabled={hasResponseFormat}
+              onClick={() => {
+                upsertInvocationParameterInput({
+                  instanceId: id,
+                  invocationParameterInput: {
+                    valueJson: createOpenAIResponseFormat(),
+                    invocationName: RESPONSE_FORMAT_PARAM_NAME,
+                    canonicalName: RESPONSE_FORMAT_PARAM_CANONICAL_NAME,
+                  },
+                });
+              }}
+            >
+              Output Schema
+            </Button>
+          ) : null}
           <Button
             variant="default"
             aria-label="add tool"

app/src/pages/playground/PlaygroundTemplate.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 
 import {
   Button,
@@ -50,7 +50,9 @@ export function PlaygroundTemplate(props: PlaygroundTemplateProps) {
       }
     >
       {template.__type === "chat" ? (
-        <PlaygroundChatTemplate {...props} />
+        <Suspense>
+          <PlaygroundChatTemplate {...props} />
+        </Suspense>
       ) : (
         "Completion Template"
       )}