fix: Ensure prompt accordion interactables are always visible (#5536)

* fix: Ensure prompt accordion interactables are always visible - Make prompts accordion section responsive via min-widths, scrolling, truncated button texts - Hide Inputs section of playground when template language is None * Extract min/max width values into constants
Arize-ai · Nov 25, 2024 · 4cee860 · 4cee860
1 parent aa8c283
commit 4cee860
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 27 deletions.
diff --git a/app/src/pages/playground/ModelConfigButton.tsx b/app/src/pages/playground/ModelConfigButton.tsx
@@ -45,6 +45,12 @@ import {
 } from "./playgroundUtils";
 import { PlaygroundInstanceProps } from "./types";
 
+/**
+ * This is the maximum width of the model config button model name text.
+ * This is used to ensure that the model name text does not overflow the model config button.
+ */
+const MODEL_CONFIG_NAME_BUTTON_MAX_WIDTH = 150;
+
 const modelConfigFormCSS = css`
   display: flex;
   flex-direction: column;
@@ -169,10 +175,22 @@ export function ModelConfigButton(props: ModelConfigButtonProps) {
             setDialog(<ModelConfigDialog {...props} />);
           });
         }}
+        title={`${ModelProviders[instance.model.provider]} ${
+          instance.model.modelName || "--"
+        }`}
       >
         <Flex direction="row" gap="size-100" alignItems="center">
           <Text weight="heavy">{ModelProviders[instance.model.provider]}</Text>
-          <Text>{instance.model.modelName || "--"}</Text>
+          <div
+            css={css`
+              max-width: ${MODEL_CONFIG_NAME_BUTTON_MAX_WIDTH}px;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+            `}
+          >
+            <Text>{instance.model.modelName || "--"}</Text>
+          </div>
         </Flex>
       </Button>
       <DialogContainer

diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
@@ -24,6 +24,7 @@ import {
 import { Loading } from "@phoenix/components";
 import { ConfirmNavigationDialog } from "@phoenix/components/ConfirmNavigation";
 import { resizeHandleCSS } from "@phoenix/components/resize";
+import { TemplateLanguages } from "@phoenix/components/templateEditor/constants";
 import {
   PlaygroundProvider,
   usePlaygroundContext,
@@ -210,8 +211,17 @@ const playgroundInputOutputPanelContentCSS = css`
   overflow: auto;
 `;
 
+/**
+ * This width accomodates the model config button min-width, as well as chat message accordion
+ * header contents such as the chat message mode radio group for AI messages
+ */
+const PLAYGROUND_PROMPT_PANEL_MIN_WIDTH = 475;
+
 function PlaygroundContent() {
   const instances = usePlaygroundContext((state) => state.instances);
+  const templateLanguage = usePlaygroundContext(
+    (state) => state.templateLanguage
+  );
   const { datasetId } = useParams<{ datasetId: string }>();
   const isDatasetMode = datasetId != null;
   const numInstances = instances.length;
@@ -267,9 +277,13 @@ function PlaygroundContent() {
               >
                 {/* No padding on the right of the accordion item, it is handled by the stable scrollbar gutter */}
                 <View height="100%" paddingY="size-200" paddingStart="size-200">
-                  <Flex direction="row" gap="size-200">
+                  <Flex direction="row" gap="size-200" maxWidth="100%">
                     {instances.map((instance) => (
-                      <View key={instance.id} flex="1 1 0px">
+                      <View
+                        key={instance.id}
+                        minWidth={PLAYGROUND_PROMPT_PANEL_MIN_WIDTH}
+                        flex="1 1 0px"
+                      >
                         <PlaygroundTemplate
                           key={instance.id}
                           playgroundInstanceId={instance.id}
@@ -291,11 +305,13 @@ function PlaygroundContent() {
           ) : (
             <div css={playgroundInputOutputPanelContentCSS}>
               <Accordion arrowPosition="start" size="L">
-                <AccordionItem title="Inputs" id="input">
-                  <View padding="size-200" height={"100%"}>
-                    <PlaygroundInput />
-                  </View>
-                </AccordionItem>
+                {templateLanguage !== TemplateLanguages.NONE ? (
+                  <AccordionItem title="Inputs" id="input">
+                    <View padding="size-200" height={"100%"}>
+                      <PlaygroundInput />
+                    </View>
+                  </AccordionItem>
+                ) : null}
                 <AccordionItem title="Output" id="output">
                   <View padding="size-200" height="100%">
                     <Flex direction="row" gap="size-200">

diff --git a/app/src/pages/playground/TemplateLanguageRadioGroup.tsx b/app/src/pages/playground/TemplateLanguageRadioGroup.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { css } from "@emotion/react";
 
 import { Radio, RadioGroup } from "@arizeai/components";
 
@@ -12,26 +13,34 @@ export function TemplateLanguageRadioGroup() {
     (state) => state.setTemplateLanguage
   );
   return (
-    <RadioGroup
-      value={language}
-      variant="inline-button"
-      aria-label="Template Language"
-      size="compact"
-      onChange={(v) => {
-        if (isTemplateLanguage(v)) {
-          setLanguage(v);
+    <div
+      css={css`
+        & * {
+          white-space: nowrap;
         }
-      }}
+      `}
     >
-      <Radio label="None" value={TemplateLanguages.NONE}>
-        None
-      </Radio>
-      <Radio label="Mustache" value={TemplateLanguages.Mustache}>
-        Mustache
-      </Radio>
-      <Radio label="F-String" value={TemplateLanguages.FString}>
-        F-String
-      </Radio>
-    </RadioGroup>
+      <RadioGroup
+        value={language}
+        variant="inline-button"
+        aria-label="Template Language"
+        size="compact"
+        onChange={(v) => {
+          if (isTemplateLanguage(v)) {
+            setLanguage(v);
+          }
+        }}
+      >
+        <Radio label="None" value={TemplateLanguages.NONE}>
+          None
+        </Radio>
+        <Radio label="Mustache" value={TemplateLanguages.Mustache}>
+          Mustache
+        </Radio>
+        <Radio label="F-String" value={TemplateLanguages.FString}>
+          F-String
+        </Radio>
+      </RadioGroup>
+    </div>
   );
 }