Update Settings UI to unify the existing onboarding and settings experience.

[Sidsector9]

Description of the Change

The PR updates the ClassifAI settings UI to unify the existing onboarding and settings experience.

How to test the Change

1. Activate the plugin and verify that the "Getting Started" notice is displayed.
2. Click on the "Get Started" button, and you will be redirected to the welcome page.
3. Click on "Visit the Settings Dashboard" to access the settings page, or navigate to the settings page via Tools > ClassifAI.
4. Test feature enable/disable functionality and feature settings, and verify that they work as expected.

Changelog Entry

Changed - Updated the settings UI to unify the existing onboarding and settings experience.

Credits

Props @Sidsector9 Kate Rickard @iamdharmesh

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added Critical Flows, Test Cases, and/or End-to-End Tests to cover my change.
• All new and existing tests pass.

[github-actions]

@Sidsector9 thanks for the PR! Could you please fill out the PR template with description, changelog, and credits information so that we can properly review and merge this?

[iamdharmesh]

Hi @dkotter,

Thanks a lot for the review and feedback

Tried testing things on my main local environment where ClassifAI is already configured but the settings page isn't working (just renders an empty page) and I'm getting these errors in my console:

I am not able to reproduce this issue, but I fixed it based on the error screenshot. Could you please check if this is fixed for you now?

Not sure if the text here has been approved by anyone (cc / @jeffpaul) but I think there's some improvements we can make. The first and last sentences both read a little clunky to me and overall, not sure how helpful the rest of the text is. This is the first screen new users end up on and I think we could provide some more helpful instructions, without it turning into a huge wall of text. Happy to put together some suggestions but wanted to run by everyone else first.

I agree, we should look into improving this. I was under the impression that the welcome page content was approved. @jeffpaul Could you please help to confirm.

Also think it's not ideal to show the registration notice on that screen, since someone can't even register yet at that point. If we can remove that from just that screen, that would be ideal.

Done

The settings pages all use a two column design and in my opinion, the left column is too wide: I'd suggest we tighten that up as much as we can to avoid all that extra whitespace in that left column.

I have reduced the left column width to 20% now (20:80). earlier it was (30:70)

Also not loving the full-width button but also not sure I have any better ideas (not sure how a smaller button would look here either).

Updated the full-width button to a right-aligned small button. (Please check the screenshot below.)

When on a settings page for an individual Feature, we have a link at the top to go back to the dashboard: While this is definitely useful, feels a little out of place. I don't know if just adding some extra padding would help here (feels really tight right now) or changing this to a button instead of a link? Or moving this above the tabs? I'd have to experiment with a few options but don't love what's there now.

I tried completely removing it and placing it in a different location (Maybe we should update the button label to "Cancel" instead of "< Back to dashboard"). Please let me know if it looks good to you now, or if you have a better idea.

we may be good here but we'll want to ensure our setup documentation in the README file is accurate with these new changes.

I have updated README for the same.

I also see in a few spots we talk about AI platform accounts. I'm assuming this terminology came from these new design iterations but we've been referring to these everywhere else as AI providers, not platforms, so think it would be ideal to standardize those.

Yes, it is from the new design. I have updated it to "provider" for now, but once we finalize the welcome screen content, I will update it accordingly.

Could you please help to review once?

Thank you.

[dkotter]

I am not able to reproduce this issue, but I fixed it based on the error screenshot. Could you please check if this is fixed for you now?

Yep, works now, thanks!

I agree, we should look into improving this. I was under the impression that the welcome page content was approved. @jeffpaul Could you please help to confirm.

I have thoughts here, both on some content updates but also around changing how we display this. I'll try and sync with Jeff Monday so we can get final direction on this early next week.

Also think it's not ideal to show the registration notice on that screen, since someone can't even register yet at that point. If we can remove that from just that screen, that would be ideal.

Done

The settings pages all use a two column design and in my opinion, the left column is too wide: I'd suggest we tighten that up as much as we can to avoid all that extra whitespace in that left column.

I have reduced the left column width to 20% now (20:80). earlier it was (30:70)

Also not loving the full-width button but also not sure I have any better ideas (not sure how a smaller button would look here either).

Updated the full-width button to a right-aligned small button. (Please check the screenshot below.)

When on a settings page for an individual Feature, we have a link at the top to go back to the dashboard: While this is definitely useful, feels a little out of place. I don't know if just adding some extra padding would help here (feels really tight right now) or changing this to a button instead of a link? Or moving this above the tabs? I'd have to experiment with a few options but don't love what's there now.

I tried completely removing it and placing it in a different location (Maybe we should update the button label to "Cancel" instead of "< Back to dashboard"). Please let me know if it looks good to you now, or if you have a better idea.

All of these look much better to me. Thanks for taking all of my feedback and making those changes :)

---

Last few things I'm seeing in testing now with a site that was already configured:

I have a few Features that aren't enabled but the Settings button shows as active:

Not exactly sure what scenario leads to this and it's not a big deal but figured I'd flag it. If I toggle the Feature on then back off, the button then is properly disabled.

Also noticed a few Features that were enabled but a Provider wasn't configured. If I go to the settings page for those Features, a Provider was selected but none of the Provider fields show up, so I can't actually configure things:

If I change the Provider in the dropdown to something else and then change back, the fields show up at that point.

And last, we have default prompts for all of our generative AI Features. These prompts are stored at the code-level which allows us to update those prompts in the future and sites will start using those new default prompts (as opposed to pulling those from the database). This still works as expected but I notice for Features that are already configured, the default prompt that is shown in the settings does not update (I'm assuming that value must be stored in the database). The good news is the correct prompt is used when making the request but would be ideal if the correct prompt could also show there.

For testing, configure the Excerpt Generation Feature and then modify the default prompt in includes/Classifai/Features/ExcerptGeneration.php:32. Note the changes you make don't show on the settings screen but will be used properly when making a request.

[iamdharmesh]

I have thoughts here, both on some content updates but also around changing how we display this. I'll try and sync with Jeff Monday so we can get final direction on this early next week.

Thank you. For UI, I think we could try something like a "Welcome Guide" in Gutenberg.

I have a few Features that aren't enabled but the Settings button shows as active:

Not exactly sure what scenario leads to this and it's not a big deal but figured I'd flag it. If I toggle the Feature on then back off, the button then is properly disabled.

Not able to reproduce on my end. But I have matched the conditions for enabling the toggle and button now. So, this should be fixed.

Also noticed a few Features that were enabled but a Provider wasn't configured. If I go to the settings page for those Features, a Provider was selected but none of the Provider fields show up, so I can't actually configure things:

Able to reproduce this, this was due to a saved provider which is no longer available. For example, Saved Chrome AI as a provider in one of the feature settings and now switched to this branch. So, the "Chrome AI" provider no longer exists on this branch. This is fixed now.

And last, we have default prompts for all of our generative AI Features. These prompts are stored at the code-level which allows us to update those prompts in the future and sites will start using those new default prompts (as opposed to pulling those from the database). This still works as expected but I notice for Features that are already configured, the default prompt that is shown in the settings does not update (I'm assuming that value must be stored in the database). The good news is the correct prompt is used when making the request but would be ideal if the correct prompt could also show there.

Done.

[dkotter]

@iamdharmesh Thanks so much for all the back and forth here. Things look really good and are testing great.

My last thought is some changes to the onboarding/welcome screen. I've updated some of the text that I think makes things more helpful but because this message only shows on that welcome screen, as soon as you click to go to the settings page from there, that welcome message disappears and you no longer have access to those onboarding steps.

I propose that when someone clicks the link either in that activation notice or the Welcome link on the plugin list screen, instead of landing on a stand-alone page that shows that welcome message, they end up on the main settings page with the welcome message above the tabs:

This allows you to easily follow those onboarding steps without losing context.

The way I envision this working is this message is dismissible but we don't store that in user meta, so anytime someone ends up back on this screen from the two locations listed above, that message shows again. But they can dismiss it if they don't want to see it. And if someone heads straight to the settings screen (even if the plugin was just barely activated), this message will never show.

You'll have to let me know if this is easily achievable or not. Not sure if this can just be another query param we add that we use to decide when to show that message or if this needs to be part of the main page routing. But would be nice if this persists (unless someone dismisses it) even if they switch to a different tab (like Language Processing to Image Processing) or click in to configure a Feature.

[iamdharmesh]

I propose that when someone clicks the link either in that activation notice or the Welcome link on the plugin list screen, instead of landing on a stand-alone page that shows that welcome message, they end up on the main settings page with the welcome message above the tabs:

@dkotter I have moved the welcome page to the welcome message above the tabs as per the screenshot and it works exactly like you requested. Could you please help with checking it once?