-
Notifications
You must be signed in to change notification settings - Fork 285
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(playground): accumulate errors while parsing span attributes #4941
Merged
Parker-Stafford
merged 7 commits into
playground
from
parker/4922-accumulate-errors-while-parsing
Oct 11, 2024
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
6ab48d8
feat(playground): accumulate errors while parsing span attributes
Parker-Stafford 447afb9
update tests to include message id's / tools
Parker-Stafford 43bf3ad
update output for runs
Parker-Stafford d2d3a3f
update comments / test names
Parker-Stafford 997127b
move parsing errors into span playground banners
Parker-Stafford 6721b1b
cleanup spanplaygroundpage
Parker-Stafford 6f79a05
add function to verify zod schema matches type
Parker-Stafford File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,12 @@ import { graphql, GraphQLSubscriptionConfig } from "relay-runtime"; | |
import { Card, Flex, Icon, Icons } from "@arizeai/components"; | ||
|
||
import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext"; | ||
import { ChatMessage, ChatMessageRole } from "@phoenix/store"; | ||
import { useChatMessageStyles } from "@phoenix/hooks/useChatMessageStyles"; | ||
import { | ||
ChatMessage, | ||
ChatMessageRole, | ||
generateMessageId, | ||
} from "@phoenix/store"; | ||
import { assertUnreachable } from "@phoenix/typeUtils"; | ||
|
||
import { | ||
|
@@ -15,11 +20,22 @@ import { | |
PlaygroundOutputSubscription$data, | ||
PlaygroundOutputSubscription$variables, | ||
} from "./__generated__/PlaygroundOutputSubscription.graphql"; | ||
import { isChatMessages } from "./playgroundUtils"; | ||
import { TitleWithAlphabeticIndex } from "./TitleWithAlphabeticIndex"; | ||
import { PlaygroundInstanceProps } from "./types"; | ||
|
||
interface PlaygroundOutputProps extends PlaygroundInstanceProps {} | ||
|
||
function PlaygroundOutputMessage({ message }: { message: ChatMessage }) { | ||
const styles = useChatMessageStyles(message.role); | ||
|
||
return ( | ||
<Card title={message.role} {...styles} variant="compact"> | ||
{message.content} | ||
</Card> | ||
); | ||
} | ||
|
||
export function PlaygroundOutput(props: PlaygroundOutputProps) { | ||
const instanceId = props.playgroundInstanceId; | ||
const instance = usePlaygroundContext((state) => | ||
|
@@ -29,22 +45,46 @@ export function PlaygroundOutput(props: PlaygroundOutputProps) { | |
state.instances.findIndex((instance) => instance.id === instanceId) | ||
); | ||
if (!instance) { | ||
return null; | ||
throw new Error("Playground instance not found"); | ||
} | ||
|
||
const runId = instance.activeRunId; | ||
const hasRunId = runId !== null; | ||
|
||
const OutputEl = useMemo(() => { | ||
if (hasRunId) { | ||
return ( | ||
<PlaygroundOutputText key={runId} playgroundInstanceId={instanceId} /> | ||
); | ||
} | ||
if (isChatMessages(instance.output)) { | ||
const messages = instance.output; | ||
|
||
return messages.map((message, index) => { | ||
return <PlaygroundOutputMessage key={index} message={message} />; | ||
}); | ||
} | ||
if (typeof instance.output === "string") { | ||
return ( | ||
<PlaygroundOutputMessage | ||
message={{ | ||
id: generateMessageId(), | ||
content: instance.output, | ||
role: ChatMessageRole.ai, | ||
}} | ||
/> | ||
); | ||
} | ||
return "click run to see output"; | ||
}, [hasRunId, instance.output, instanceId, runId]); | ||
|
||
return ( | ||
<Card | ||
title={<TitleWithAlphabeticIndex index={index} title="Output" />} | ||
collapsible | ||
variant="compact" | ||
> | ||
{hasRunId ? ( | ||
<PlaygroundOutputText key={runId} playgroundInstanceId={instanceId} /> | ||
) : ( | ||
"click run to see output" | ||
)} | ||
{OutputEl} | ||
</Card> | ||
); | ||
} | ||
|
@@ -104,27 +144,27 @@ function toGqlChatCompletionRole( | |
role: ChatMessageRole | ||
): ChatCompletionMessageRole { | ||
switch (role) { | ||
case "system": | ||
case ChatMessageRole.system: | ||
return "SYSTEM"; | ||
case "user": | ||
case ChatMessageRole.user: | ||
return "USER"; | ||
case "tool": | ||
case ChatMessageRole.tool: | ||
return "TOOL"; | ||
case "ai": | ||
case ChatMessageRole.ai: | ||
return "AI"; | ||
default: | ||
assertUnreachable(role); | ||
} | ||
} | ||
|
||
function PlaygroundOutputText(props: PlaygroundInstanceProps) { | ||
const instance = usePlaygroundContext( | ||
(state) => state.instances[props.playgroundInstanceId] | ||
const instances = usePlaygroundContext((state) => state.instances); | ||
const instance = instances.find( | ||
(instance) => instance.id === props.playgroundInstanceId | ||
); | ||
const markPlaygroundInstanceComplete = usePlaygroundContext( | ||
(state) => state.markPlaygroundInstanceComplete | ||
); | ||
const [output, setOutput] = useState<string>(""); | ||
if (!instance) { | ||
throw new Error("No instance found"); | ||
} | ||
|
@@ -136,6 +176,8 @@ function PlaygroundOutputText(props: PlaygroundInstanceProps) { | |
throw new Error("We only support chat templates for now"); | ||
} | ||
|
||
const [output, setOutput] = useState<string>(""); | ||
|
||
useChatCompletionSubscription({ | ||
params: { | ||
messages: instance.template.messages.map(toGqlChatCompletionMessage), | ||
|
@@ -157,5 +199,13 @@ function PlaygroundOutputText(props: PlaygroundInstanceProps) { | |
</Flex> | ||
); | ||
} | ||
return <span>{output}</span>; | ||
return ( | ||
<PlaygroundOutputMessage | ||
message={{ | ||
id: generateMessageId(), | ||
content: output, | ||
role: ChatMessageRole.ai, | ||
}} | ||
Comment on lines
+204
to
+208
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can update output messages to not need id, seems fine to keep for now |
||
/> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh as in this was the original output?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, displaying the original output but then also displaying new outputs in the same way