-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(weave): Add call chat to playground page (#2993)
* add playground context * clean up * types * make context nullable, remove all the optionals * add call chat to playground and add functions interacting with chat messages * lint * remove callchat edits, move provider into playgroundchat * pr comments, tighten type defs
- Loading branch information
Showing
6 changed files
with
266 additions
and
30 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
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
155 changes: 155 additions & 0 deletions
155
...PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatFunctions.tsx
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,155 @@ | ||
| import {cloneDeep} from 'lodash'; | ||
| import {SetStateAction} from 'react'; | ||
|
|
||
| import {Choice, Message} from '../../ChatView/types'; | ||
| import {OptionalTraceCallSchema, PlaygroundState} from '../types'; | ||
| import {DEFAULT_SYSTEM_MESSAGE} from '../usePlaygroundState'; | ||
| type TraceCallOutput = { | ||
| choices?: any[]; | ||
| }; | ||
|
|
||
| export type SetPlaygroundStateFieldFunctionType = ( | ||
| index: number, | ||
| field: keyof PlaygroundState, | ||
| // The value here is a function that returns a PlaygroundState field | ||
| value: SetStateAction<PlaygroundState[keyof PlaygroundState]> | ||
| ) => void; | ||
|
|
||
| export const useChatFunctions = ( | ||
| setPlaygroundStateField: SetPlaygroundStateFieldFunctionType | ||
| ) => { | ||
| const deleteMessage = ( | ||
| callIndex: number, | ||
| messageIndex: number, | ||
| responseIndexes?: number[] | ||
| ) => { | ||
| setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => { | ||
| const newTraceCall = clearTraceCall( | ||
| cloneDeep(prevTraceCall as OptionalTraceCallSchema) | ||
| ); | ||
| if (newTraceCall && newTraceCall.inputs?.messages) { | ||
| // Remove the message and all responses to it | ||
| newTraceCall.inputs.messages = newTraceCall.inputs.messages.filter( | ||
| (_: any, index: number) => | ||
| index !== messageIndex && !responseIndexes?.includes(index) | ||
| ); | ||
|
|
||
| // If there are no messages left, add a system message | ||
| if (newTraceCall.inputs.messages.length === 0) { | ||
| newTraceCall.inputs.messages = [DEFAULT_SYSTEM_MESSAGE]; | ||
| } | ||
| } | ||
| return newTraceCall; | ||
| }); | ||
| }; | ||
|
|
||
| const editMessage = ( | ||
| callIndex: number, | ||
| messageIndex: number, | ||
| newMessage: Message | ||
| ) => { | ||
| setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => { | ||
| const newTraceCall = clearTraceCall( | ||
| cloneDeep(prevTraceCall as OptionalTraceCallSchema) | ||
| ); | ||
| if (newTraceCall && newTraceCall.inputs?.messages) { | ||
| // Replace the message | ||
| newTraceCall.inputs.messages[messageIndex] = newMessage; | ||
| } | ||
| return newTraceCall; | ||
| }); | ||
| }; | ||
|
|
||
| const addMessage = (callIndex: number, newMessage: Message) => { | ||
| setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => { | ||
| const newTraceCall = clearTraceCall( | ||
| cloneDeep(prevTraceCall as OptionalTraceCallSchema) | ||
| ); | ||
| if (newTraceCall && newTraceCall.inputs?.messages) { | ||
| if ( | ||
| newTraceCall.output && | ||
| (newTraceCall.output as TraceCallOutput).choices && | ||
| Array.isArray((newTraceCall.output as TraceCallOutput).choices) | ||
| ) { | ||
| // Add all the choices as messages | ||
| (newTraceCall.output as TraceCallOutput).choices!.forEach( | ||
| (choice: any) => { | ||
| if (choice.message) { | ||
| newTraceCall.inputs!.messages.push(choice.message); | ||
| } | ||
| } | ||
| ); | ||
| // Set the choices to undefined | ||
| (newTraceCall.output as TraceCallOutput).choices = undefined; | ||
| } | ||
| // Add the new message | ||
| newTraceCall.inputs.messages.push(newMessage); | ||
| } | ||
| return newTraceCall; | ||
| }); | ||
| }; | ||
|
|
||
| const deleteChoice = (callIndex: number, choiceIndex: number) => { | ||
| setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => { | ||
| const newTraceCall = clearTraceCall( | ||
| cloneDeep(prevTraceCall as OptionalTraceCallSchema) | ||
| ); | ||
| const output = newTraceCall?.output as TraceCallOutput; | ||
| if (output && Array.isArray(output.choices)) { | ||
| // Remove the choice | ||
| output.choices.splice(choiceIndex, 1); | ||
| if (newTraceCall) { | ||
| newTraceCall.output = output; | ||
| } | ||
| } | ||
| return newTraceCall; | ||
| }); | ||
| }; | ||
|
|
||
| const editChoice = ( | ||
| callIndex: number, | ||
| choiceIndex: number, | ||
| newChoice: Choice | ||
| ) => { | ||
| setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => { | ||
| const newTraceCall = clearTraceCall( | ||
| cloneDeep(prevTraceCall as OptionalTraceCallSchema) | ||
| ); | ||
| if ( | ||
| newTraceCall?.output && | ||
| Array.isArray((newTraceCall.output as TraceCallOutput).choices) | ||
| ) { | ||
| // Delete the old choice | ||
| (newTraceCall.output as TraceCallOutput).choices!.splice( | ||
| choiceIndex, | ||
| 1 | ||
| ); | ||
|
|
||
| // Add the new choice as a message | ||
| newTraceCall.inputs = newTraceCall.inputs ?? {}; | ||
| newTraceCall.inputs.messages = newTraceCall.inputs.messages ?? []; | ||
| newTraceCall.inputs.messages.push({ | ||
| role: 'assistant', | ||
| content: newChoice.message?.content, | ||
| }); | ||
| } | ||
| return newTraceCall; | ||
| }); | ||
| }; | ||
|
|
||
| return { | ||
| deleteMessage, | ||
| editMessage, | ||
| addMessage, | ||
| deleteChoice, | ||
| editChoice, | ||
| }; | ||
| }; | ||
|
|
||
| export const clearTraceCall = (traceCall: OptionalTraceCallSchema) => { | ||
| if (traceCall) { | ||
| traceCall.id = ''; | ||
| traceCall.summary = undefined; | ||
| } | ||
| return traceCall; | ||
| }; |
44 changes: 44 additions & 0 deletions
44
...rc/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundContext.tsx
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,44 @@ | ||
| import {createContext, useContext} from 'react'; | ||
|
|
||
| import {Choice, Message} from '../ChatView/types'; | ||
|
|
||
| export type PlaygroundContextType = { | ||
| isPlayground: boolean; | ||
| addMessage: (newMessage: Message) => void; | ||
| editMessage: (messageIndex: number, newMessage: Message) => void; | ||
| deleteMessage: (messageIndex: number, responseIndexes?: number[]) => void; | ||
|
|
||
| editChoice: (choiceIndex: number, newChoice: Choice) => void; | ||
| deleteChoice: (choiceIndex: number) => void; | ||
|
|
||
| retry: (messageIndex: number, isChoice?: boolean) => void; | ||
| sendMessage: ( | ||
| role: 'assistant' | 'user' | 'tool', | ||
| content: string, | ||
| toolCallId?: string | ||
| ) => void; | ||
| }; | ||
|
|
||
| const DEFAULT_CONTEXT: PlaygroundContextType = { | ||
| isPlayground: false, | ||
| addMessage: () => {}, | ||
| editMessage: () => {}, | ||
| deleteMessage: () => {}, | ||
|
|
||
| editChoice: () => {}, | ||
| deleteChoice: () => {}, | ||
|
|
||
| retry: () => {}, | ||
| sendMessage: () => {}, | ||
| }; | ||
|
|
||
| // Create context that can be undefined | ||
| export const PlaygroundContext = createContext< | ||
| PlaygroundContextType | undefined | ||
| >(DEFAULT_CONTEXT); | ||
|
|
||
| // Custom hook that handles the undefined context | ||
| export const usePlaygroundContext = () => { | ||
| const context = useContext(PlaygroundContext); | ||
| return context ?? DEFAULT_CONTEXT; | ||
| }; |
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