diff --git a/app/src/components/dnd/DragHandle.tsx b/app/src/components/dnd/DragHandle.tsx index d63bfd047e..bd6e383e8e 100644 --- a/app/src/components/dnd/DragHandle.tsx +++ b/app/src/components/dnd/DragHandle.tsx @@ -12,7 +12,7 @@ function DragHandle() { css={css` cursor: grab; background-color: var(--ac-global-color-grey-200); - border: 1px solid var(--ac-global-color-grey-500); + border: 1px solid var(--ac-global-color-grey-400); color: var(--ac-global-text-color-900); display: flex; align-items: center; diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx index 2cd0dd93a0..bed0f4edd2 100644 --- a/app/src/pages/playground/Playground.tsx +++ b/app/src/pages/playground/Playground.tsx @@ -17,27 +17,30 @@ import { PlaygroundRunButton } from "./PlaygroundRunButton"; export function Playground(props: InitialPlaygroundState) { return ( - - + - Playground - - - - API Keys - - + + Playground + + + + API Keys + + + - - - + + + ); } @@ -45,7 +48,7 @@ export function Playground(props: InitialPlaygroundState) { function PlaygroundInstances() { const instances = usePlaygroundContext((state) => state.instances); return ( - + {instances.map((instance, i) => ( diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx index 15067fb679..4cab471195 100644 --- a/app/src/pages/playground/PlaygroundChatTemplate.tsx +++ b/app/src/pages/playground/PlaygroundChatTemplate.tsx @@ -4,7 +4,15 @@ import { DragDropProvider } from "@dnd-kit/react"; import { useSortable } from "@dnd-kit/react/sortable"; import { css } from "@emotion/react"; -import { Card, TextArea } from "@arizeai/components"; +import { + Button, + Card, + Flex, + Icon, + Icons, + TextArea, + View, +} from "@arizeai/components"; import { DragHandle } from "@phoenix/components/dnd/DragHandle"; import { move } from "@phoenix/components/dnd/helpers/move"; @@ -12,6 +20,7 @@ import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext"; import { useChatMessageStyles } from "@phoenix/hooks/useChatMessageStyles"; import { ChatMessage, + generateMessageId, PlaygroundChatTemplate as PlaygroundChatTemplateType, } from "@phoenix/store"; @@ -79,6 +88,43 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) { ); })} + + + } />} + onClick={() => { + updateInstance({ + instanceId: id, + patch: { + template: { + __type: "chat", + messages: [ + ...template.messages, + { + id: generateMessageId(), + role: "user", + content: "", + }, + ], + }, + }, + }); + }} + > + Message + + + ); } @@ -128,7 +174,30 @@ function SortableMessageItem({ }} /> } - extra={} + extra={ + + } />} + variant="default" + size="compact" + onClick={() => { + updateInstance({ + instanceId: playgroundInstanceId, + patch: { + template: { + __type: "chat", + messages: template.messages.filter( + (msg) => msg.id !== message.id + ), + }, + }, + }); + }} + /> + + + } > { + // Don't bubble up any keyboard events from the text area as to not interfere with DND + e.stopPropagation(); + }} > state.instances.length); const isSingleInstance = numInstances == 1; return ( - - - + + + + + - - - + + + + + ); } + +const PanelContent = (props: PropsWithChildren) => ( + + + {props.children} + + +); diff --git a/app/src/pages/playground/PlaygroundTemplate.tsx b/app/src/pages/playground/PlaygroundTemplate.tsx index 861adc8722..643fca727b 100644 --- a/app/src/pages/playground/PlaygroundTemplate.tsx +++ b/app/src/pages/playground/PlaygroundTemplate.tsx @@ -30,7 +30,7 @@ export function PlaygroundTemplate(props: PlaygroundTemplateProps) { return (