feat(playground): add non streaming option to ui

app/schema.graphql

@@ -70,7 +70,6 @@ type BooleanInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: Boolean
 }
@@ -80,7 +79,6 @@ type BoundedFloatInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: Float
   minValue: Float!
@@ -871,7 +869,6 @@ type FloatInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: Float
 }
@@ -968,7 +965,6 @@ type IntInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: Int
 }
@@ -994,7 +990,6 @@ interface InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
 }
 
 input InvocationParameterInput {
@@ -1019,7 +1014,6 @@ type JSONInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: JSON
 }
@@ -1108,6 +1102,7 @@ type Mutation {
   patchUser(input: PatchUserInput!): UserMutationPayload!
   patchViewer(input: PatchViewerInput!): UserMutationPayload!
   deleteUsers(input: DeleteUsersInput!): Void
+  generateChatCompletion(input: ChatCompletionInput!): String!
 }
 
 """An object with a Globally Unique ID"""
@@ -1545,7 +1540,6 @@ type StringInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: String
 }
@@ -1555,7 +1549,6 @@ type StringListInvocationParameter implements InvocationParameterBase {
   canonicalName: CanonicalParameterName
   label: String!
   required: Boolean!
-  hidden: Boolean!
   invocationInputField: InvocationInputField!
   defaultValue: [String!]
 }

app/src/contexts/FeatureFlagsContext.tsx

@@ -3,10 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 import { Dialog, DialogContainer, Switch, View } from "@arizeai/components";
 
-type FeatureFlag =
-  | "playground"
-  | "playgroundNonStreaming"
-  | "playgroundWithDatasets";
+type FeatureFlag = "playground" | "playgroundWithDatasets";
 export type FeatureFlagsContextType = {
   featureFlags: Record<FeatureFlag, boolean>;
   setFeatureFlags: (featureFlags: Record<FeatureFlag, boolean>) => void;
@@ -16,7 +13,6 @@ export const LOCAL_STORAGE_FEATURE_FLAGS_KEY = "arize-phoenix-feature-flags";
 
 const DEFAULT_FEATURE_FLAGS: Record<FeatureFlag, boolean> = {
   playground: false,
-  playgroundNonStreaming: false,
   playgroundWithDatasets: false,
 };
 

app/src/pages/playground/InvocationParametersForm.tsx

@@ -11,6 +11,7 @@ import {
   InvocationParametersFormQuery$data,
 } from "./__generated__/InvocationParametersFormQuery.graphql";
 import { InvocationParameterInput } from "./__generated__/PlaygroundOutputSubscription.graphql";
+import { paramsToIgnoreInInvocationParametersForm } from "./constants";
 import { constrainInvocationParameterInputsToDefinition } from "./playgroundUtils";
 
 export type InvocationParameter = Mutable<
@@ -31,7 +32,7 @@ const InvocationParameterFormField = ({
   onChange,
 }: {
   field: InvocationParameter;
-  value: string | number | string[] | boolean | undefined;
+  value: string | number | readonly string[] | boolean | undefined;
   onChange: (value: string | number | string[] | boolean | undefined) => void;
 }) => {
   const { __typename } = field;
@@ -99,13 +100,35 @@ const toCamelCase = (str: string) =>
 const getInvocationParameterValue = (
   field: InvocationParameter,
   parameterInput: InvocationParameterInput
-): string | number | string[] | boolean | null | undefined => {
+): string | number | readonly string[] | boolean | null | undefined => {
   if (field.invocationInputField === undefined) {
     throw new Error("Invocation input field is required");
   }
-  return parameterInput[
-    toCamelCase(field.invocationInputField) as keyof InvocationParameterInput
-  ];
+  const maybeValue =
+    parameterInput[
+      toCamelCase(field.invocationInputField) as keyof InvocationParameterInput
+    ];
+  if (maybeValue != null) {
+    return maybeValue;
+  }
+  switch (field.__typename) {
+    case "InvocationParameterBase":
+      return null;
+    case "FloatInvocationParameter":
+    case "BoundedFloatInvocationParameter":
+      return field.floatDefaultValue;
+    case "IntInvocationParameter":
+      return field.intDefaultValue;
+    case "StringListInvocationParameter":
+      return field.stringListDefaultValue;
+    case "StringInvocationParameter":
+      return field.stringDefaultValue;
+    case "BooleanInvocationParameter":
+      return field.booleanDefaultValue;
+    default: {
+      return null;
+    }
+  }
 };
 
 const makeInvocationParameterInput = (
@@ -161,23 +184,23 @@ export const InvocationParametersForm = ({
               minValue
               maxValue
               invocationInputField
-              # defaultValueFloat: defaultValue
+              floatDefaultValue: defaultValue
             }
             ... on IntInvocationParameter {
               invocationInputField
-              # defaultValueInt: defaultValue
+              intDefaultValue: defaultValue
             }
             ... on StringInvocationParameter {
               invocationInputField
-              # defaultValueString: defaultValue
+              stringDefaultValue: defaultValue
             }
             ... on StringListInvocationParameter {
               invocationInputField
-              # defaultValueStringList: defaultValue
+              stringListDefaultValue: defaultValue
             }
             ... on BooleanInvocationParameter {
               invocationInputField
-              # defaultValueBool: defaultValue
+              booleanDefaultValue: defaultValue
             }
           }
         }
@@ -238,22 +261,30 @@ export const InvocationParametersForm = ({
     [instance, updateInstanceModelInvocationParameters]
   );
 
-  const fieldsForSchema = modelInvocationParameters.map((field) => {
-    const existingParameter = instance.model.invocationParameters.find(
-      (p) => p.invocationName === field.invocationName
-    );
-    const value = existingParameter
-      ? getInvocationParameterValue(field, existingParameter)
-      : undefined;
-    return (
-      <InvocationParameterFormField
-        key={field.invocationName}
-        field={field}
-        value={value === null ? undefined : value}
-        onChange={(value) => onChange(field, value)}
-      />
-    );
-  });
+  const fieldsForSchema = modelInvocationParameters
+    .filter(
+      (field) =>
+        !(
+          field.canonicalName != null &&
+          paramsToIgnoreInInvocationParametersForm.includes(field.canonicalName)
+        )
+    )
+    .map((field) => {
+      const existingParameter = instance.model.invocationParameters.find(
+        (p) => p.invocationName === field.invocationName
+      );
+      const value = existingParameter
+        ? getInvocationParameterValue(field, existingParameter)
+        : undefined;
+      return (
+        <InvocationParameterFormField
+          key={field.invocationName}
+          field={field}
+          value={value === null ? undefined : value}
+          onChange={(value) => onChange(field, value)}
+        />
+      );
+    });
 
   return (
     <Flex direction="column" gap="size-200">

app/src/pages/playground/Playground.tsx

@@ -44,7 +44,6 @@ export function Playground(props: Partial<PlaygroundProps>) {
   const modelConfigByProvider = usePreferencesContext(
     (state) => state.modelConfigByProvider
   );
-  const showStreamToggle = useFeatureFlag("playgroundNonStreaming");
   const [, setSearchParams] = useSearchParams();
 
   useEffect(() => {
@@ -59,9 +58,12 @@ export function Playground(props: Partial<PlaygroundProps>) {
     );
   }, [setSearchParams]);
 
+  const enableStreaming = window.Config.websocketsEnabled;
+
   return (
     <PlaygroundProvider
       {...props}
+      streaming={enableStreaming}
       modelConfigByProvider={modelConfigByProvider}
     >
       <div css={playgroundWrapCSS}>
@@ -78,7 +80,7 @@ export function Playground(props: Partial<PlaygroundProps>) {
           >
             <Heading level={1}>Playground</Heading>
             <Flex direction="row" gap="size-100" alignItems="center">
-              {showStreamToggle ? <PlaygroundStreamToggle /> : null}
+              {enableStreaming ? <PlaygroundStreamToggle /> : null}
               <PlaygroundCredentialsDropdown />
               <PlaygroundRunButton />
             </Flex>

app/src/pages/playground/PlaygroundChatTemplate.tsx

@@ -40,6 +40,7 @@ import {
   createOpenAIToolCall,
   generateMessageId,
   PlaygroundChatTemplate as PlaygroundChatTemplateType,
+  PlaygroundInstance,
 } from "@phoenix/store";
 import { assertUnreachable } from "@phoenix/typeUtils";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
@@ -156,14 +157,18 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
             size="compact"
             icon={<Icon svg={<Icons.PlusOutline />} />}
             onClick={() => {
+              const patch: Partial<PlaygroundInstance> = {
+                tools: [
+                  ...playgroundInstance.tools,
+                  createOpenAITool(playgroundInstance.tools.length + 1),
+                ],
+              };
+              if (playgroundInstance.tools.length === 0) {
+                patch.toolChoice = "auto";
+              }
               updateInstance({
                 instanceId: id,
-                patch: {
-                  tools: [
-                    ...playgroundInstance.tools,
-                    createOpenAITool(playgroundInstance.tools.length + 1),
-                  ],
-                },
+                patch,
               });
             }}
           >