-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(playground): add tools ui (#5002)
* feat(playground): add tools ui * add tools back after rebase * update tool type to be partial in store for editing * make tool editor uncontrolled, add tool choice selector * make fields pass through * allow for extra keys in the json schema * support json schema in jsonEditor, remove jsonToolEditor * update descriptions * fix types * fix key collision on choice picker * update comment * more comments * WIP * styling * cleanup --------- Co-authored-by: Mikyo King <mikyo@arize.com>
- Loading branch information
1 parent
415ec6f
commit 767bd37
Showing
17 changed files
with
981 additions
and
42 deletions.
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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 |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React from "react"; | ||
|
|
||
| import { Flex, Item, Label, Picker } from "@arizeai/components"; | ||
|
|
||
| type DefaultToolChoice = Extract<ToolChoice, "auto" | "required" | "none">; | ||
|
|
||
| const isDefaultToolChoice = (choice: string): choice is DefaultToolChoice => { | ||
| return choice === "auto" || choice === "required" || choice === "none"; | ||
| }; | ||
|
|
||
| /** | ||
| * A prefix to add to user defined tools in the picker to avoid picker key collisions with default {@link ToolChoice} keys | ||
| */ | ||
| const TOOL_NAME_PREFIX = "tool_"; | ||
|
|
||
| /** | ||
| * Adds a prefix to user defined tool names to avoid conflicts picker key collisions with default {@link ToolChoice} keys | ||
| * @param toolName The name of a tool | ||
| * @returns The tool name with the "TOOL_NAME_PREFIX" prefix added | ||
| */ | ||
| const addToolNamePrefix = (toolName: string) => | ||
| `${TOOL_NAME_PREFIX}${toolName}`; | ||
|
|
||
| /** | ||
| * Removes the "TOOL_NAME_PREFIX" prefix from a tool name so that it can be used as a choice that corresponds to an actual tool | ||
| * @param toolName The name of a tool with the "TOOL_NAME_PREFIX" prefix | ||
| * @returns The tool name with the "TOOL_NAME_PREFIX" prefix removed | ||
| */ | ||
| const removeToolNamePrefix = (toolName: string) => | ||
| toolName.startsWith(TOOL_NAME_PREFIX) | ||
| ? toolName.slice(TOOL_NAME_PREFIX.length) | ||
| : toolName; | ||
|
|
||
| type ToolChoicePickerProps = { | ||
| /** | ||
| * The current choice including the default {@link ToolChoice} and any user defined tools | ||
| */ | ||
| choice: ToolChoice; | ||
| /** | ||
| * Callback for when the tool choice changes | ||
| */ | ||
| onChange: (choice: ToolChoice) => void; | ||
| /** | ||
| * A list of user defined tool names | ||
| */ | ||
| toolNames: string[]; | ||
| }; | ||
|
|
||
| export function ToolChoicePicker({ | ||
| choice, | ||
| onChange, | ||
| toolNames, | ||
| }: ToolChoicePickerProps) { | ||
| const currentKey = | ||
| typeof choice === "string" | ||
| ? choice | ||
| : addToolNamePrefix(choice.function.name); | ||
| return ( | ||
| <Picker | ||
| selectedKey={currentKey} | ||
| label="Tool Choice" | ||
| aria-label="Tool Choice for an LLM" | ||
| onSelectionChange={(choice) => { | ||
| if (typeof choice !== "string") { | ||
| return; | ||
| } | ||
| if (choice.startsWith(TOOL_NAME_PREFIX)) { | ||
| onChange({ | ||
| type: "function", | ||
| function: { | ||
| name: removeToolNamePrefix(choice), | ||
| }, | ||
| }); | ||
| } else if (isDefaultToolChoice(choice)) { | ||
| onChange(choice); | ||
| } | ||
| }} | ||
| > | ||
| {[ | ||
| <Item key="auto"> | ||
| <Flex gap={"size-100"}> | ||
| Tools auto-selected by LLM <Label>auto</Label> | ||
| </Flex> | ||
| </Item>, | ||
| <Item key="required"> | ||
| <Flex gap={"size-100"}> | ||
| Use at least one tool <Label>required</Label> | ||
| </Flex> | ||
| </Item>, | ||
| <Item key="none"> | ||
| <Flex gap={"size-100"}> | ||
| Don't use any tools <Label>none</Label> | ||
| </Flex> | ||
| </Item>, | ||
| // Add "TOOL_NAME_PREFIX" prefix to user defined tool names to avoid conflicts with default keys | ||
| ...toolNames.map((toolName) => ( | ||
| <Item key={addToolNamePrefix(toolName)}>{toolName}</Item> | ||
| )), | ||
| ]} | ||
| </Picker> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./ToolChoiceSelector"; |
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
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.