feat(prompts): Display basic LLM details on Prompt Details pages (#6104)

* feat(prompts): Display basic LLM details on Prompt Details pages

* Remove extraneous export

app/src/pages/prompt/PromptLLM.tsx

@@ -0,0 +1,62 @@
+import React, { PropsWithChildren } from "react";
+import { graphql, useFragment } from "react-relay";
+
+import { List, ListItem } from "@arizeai/components";
+
+import {
+  Disclosure,
+  DisclosurePanel,
+  DisclosureTrigger,
+  Flex,
+  Text,
+  View,
+} from "@phoenix/components";
+import { ModelProviders } from "@phoenix/constants/generativeConstants";
+import { PromptLLM__main$key } from "@phoenix/pages/prompt/__generated__/PromptLLM__main.graphql";
+
+const ModelProviderItem = ({
+  keyName,
+  children,
+}: PropsWithChildren<{
+  keyName: string;
+}>) => (
+  <ListItem listSize="small">
+    <View paddingStart="size-100" paddingEnd="size-100">
+      <Flex direction="row" justifyContent="space-between">
+        <Text size="XS" color="text-700">
+          {keyName}
+        </Text>
+        <Text size="XS">{children}</Text>
+      </Flex>
+    </View>
+  </ListItem>
+);
+
+type PromptLLMProps = {
+  promptVersion: PromptLLM__main$key;
+};
+
+export function PromptLLM({ promptVersion }: PromptLLMProps) {
+  const data = useFragment<PromptLLM__main$key>(
+    graphql`
+      fragment PromptLLM__main on PromptVersion {
+        model: modelName
+        provider: modelProvider
+      }
+    `,
+    promptVersion
+  );
+  return (
+    <Disclosure id="llm">
+      <DisclosureTrigger>LLM</DisclosureTrigger>
+      <DisclosurePanel>
+        <List listSize="small">
+          <ModelProviderItem keyName="Model">{data.model}</ModelProviderItem>
+          <ModelProviderItem keyName="Provider">
+            {ModelProviders[data.provider as ModelProvider] ?? data.provider}
+          </ModelProviderItem>
+        </List>
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}

app/src/pages/prompt/PromptModelConfigurationCard.tsx

@@ -11,6 +11,7 @@ import {
 } from "@phoenix/components";
 import { PromptModelConfigurationCard__main$key } from "@phoenix/pages/prompt/__generated__/PromptModelConfigurationCard__main.graphql";
 import { PromptInvocationParameters } from "@phoenix/pages/prompt/PromptInvocationParameters";
+import { PromptLLM } from "@phoenix/pages/prompt/PromptLLM";
 import { PromptOutputSchema } from "@phoenix/pages/prompt/PromptOutputSchema";
 import { PromptTools } from "@phoenix/pages/prompt/PromptTools";
 
@@ -22,6 +23,9 @@ export function PromptModelConfigurationCard({
   const promptVersion = useFragment<PromptModelConfigurationCard__main$key>(
     graphql`
       fragment PromptModelConfigurationCard__main on PromptVersion {
+        model: modelName
+        provider: modelProvider
+        ...PromptLLM__main
         ...PromptInvocationParameters__main
         ...PromptTools__main
         ...PromptOutputSchemaFragment
@@ -37,11 +41,13 @@ export function PromptModelConfigurationCard({
     >
       <DisclosureGroup
         defaultExpandedKeys={[
+          "llm",
           "invocation-parameters",
           "tools",
           "output-schema",
         ]}
       >
+        <PromptLLM promptVersion={promptVersion} />
         <Disclosure id="invocation-parameters">
           <DisclosureTrigger>Invocation Parameters</DisclosureTrigger>
           <DisclosurePanel>