[editor] Remount Model Settings Renderer on Model Change

[rholinshead]

[editor] Remount Model Settings Renderer on Model Change

Currently, the model settings state is retained when changing models in the selector instead of updating to the new defaults:

Screen.Recording.2024-02-15.at.1.55.23.PM.mov

To fix, we can force the model settings renderer to remount when the prompt model value changes by passing the model name as the key prop to the component. Specifically, this handles the scenario outlined in discussion here: #1256 (comment)

Screen.Recording.2024-02-15.at.6.18.51.PM.mov

[rossdanlm]

Could this cause an issue if we have multiple props where we re-use the default model and hence have the same key for two separate ModelSettingsSchemaRenderer objects? Or is React smart enough to understand the hierarchy and know that even though we set the same keys, they're not the same objects?

[rholinshead]

I'm not sure I follow that flow, can you explain what you mean by 'multiple props where we re-use the default model'?

The model selector value should be either the model in the prompt metadata or the default for the aiconfig, and if they're the same then selecting that model in the selector is a no-op (because it's already selected). Also, the model -> parser mapping and model -> prompt schema mapping are both unique on model keys.

Unless you're talking between different prompts -- like prompt_1 and prompt_2 have the same model (so same key). In that case, yes it's fine because the <ModelSettingsSchemaRenderer>s aren't siblings, so React will already know the elements are different based on the DOM structure to get to them

[rossdanlm]

multiple props where we re-use the default model

Sorry typo, meant to say "multiple prompts", so you answered it with the last paragraph

[rossdanlm]

I looked at the getPromptModelName method in

aiconfig/python/src/aiconfig/editor/client/src/utils/promptUtils.ts

Line 34 in 1c68007

export function getPromptModelName(

Just to sanity check, the value of this doesn't quite "matter" (since it's the Hugging Face Task ("Text Generation") and not the model itself ("mistralai/Mistral-7B-Instruct-v0.1")). All that matters is that we have changed the HF task (which for most cases will be the actual model itself like dall-e 2) and that changed value will be detected by the key and cause that component to re-render the settings right?

[rholinshead]

Ya, it's technically the model id that's registered in the ModelParserRegistry. And yep, that's correct (just nit on terminology, it would re-mount instead of re-render)

[rossdanlm]

This is beyond scope of this PR, just curious, what's the difference between re-mount vs. re-render and why does changing the key cause it to re-mount? Is Chat GPT wrong here? https://lastmileai.dev/workbooks/clsoufolp001pqrcsg97aj5dr

[rholinshead]

Yep, it's wrong -- see https://react.dev/reference/react/useState#resetting-state-with-a-key

You can reset a component’s state by passing a different key to a component. In this example, the Reset button changes the version state variable, which we pass as a key to the Form. When the key changes, React re-creates the Form component (and all of its children) from scratch, so its state gets reset.

[rholinshead]

Re-mount basically means the component is removed from the DOM, recreated and re-added (state, etc. is re-initialized). Re-render just means updating the existing component (state, etc. is persisted)