Studio: Add prompt limit UI #197

kozer · 2024-05-31T07:05:50Z

Fixes https://github.com/Automattic/dotcom-forge/issues/7409

Proposed Changes

This diff, adds a prompt limit UI into user settings

Testing Instructions

Start studio nvim use && STUDIO_AI=true npm start
Ensure you are logged in
Navigate to settings and ensure that you see the following UI screen
Start studio without STUDIO_AI feature enabled. Ensure that the new UI is not shown.

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

derekblank

LGTM. I was able to observe prompt limit changes within the Settings screen.

sejas

@kozer , the happy path works great.
We need to fix the unit tests.
I'm seeing this error Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'assistantEnabled')] in src/components/tests/user-settings.test.tsx

I suggested using the headers from fetchAssistant to update the current usage, but its not a strong opinion.

One last thing I noticed is that when starting the app offline I see the count of my demo sites but the count of my prompts goes to zero. Would be possible to keep that number for consistency, or refetch it when I'm back online?
If yo prefer to handle that edge case in a separate PR I can create a new issue.

Happy Path:

8vWz2G.mp4

Steps to reproduce Offline edge case:

Disconnect your wifi/internet
Run the app
Open the settings modal by clicking on your user icon
Observe your prompts indicate 0 when it should be some number.

src/hooks/use-prompt-usage.tsx

src/components/content-tab-assistant.tsx

src/components/user-settings.tsx

kozer · 2024-06-05T05:21:01Z

If yo prefer to handle that edge case in a separate PR I can create a new issue.

Thank you for your comments!
Yes, indeed I did a last minute change to not show the bar when the feature is not enabled and the tests where broken. I'm working on that.

If yo prefer to handle that edge case in a separate PR I can create a new issue.

Yes, let's create another issue to handle that. Thanks!

…quest

kozer · 2024-06-05T07:17:25Z

@sejas , I updated the PR to use assistant API to fetch the headers, fixed tests, and did a minor refactor! Thanks for your suggestions!

cc: @katinthehatsite

katinthehatsite · 2024-06-05T15:03:57Z

Hi @kozer - thanks for making updates! The changes look good on my end.

I tested for this scenario:

1.Disconnect your wifi/internet
2. Run the app
3. Open the settings modal by clicking on your user icon
4. Observe your prompts indicate 0 when it should be some number.

And after updates, I can see that the number goes back up once I start the app back after being offline which is great. Would it be possible to keep it there even when offline? (At the moment, it goes to 0 when offline)

Otherwise, everything looks 👍

kozer · 2024-06-05T15:07:26Z

Hi @kozer - thanks for making updates! The changes look good on my end.

I tested for this scenario:

1.Disconnect your wifi/internet

Run the app

Open the settings modal by clicking on your user icon

Observe your prompts indicate 0 when it should be some number.

And after updates, I can see that the number goes back up once I start the app back after being offline which is great. Would it be possible to keep it there even when offline? (At the moment, it goes to 0 when offline)

Otherwise, everything looks 👍

As discussed above, in Antonio's comment, I'll tackle this in a different pr ( the offline stuff ).
Is it ok?

katinthehatsite · 2024-06-05T15:15:23Z

Sounds good @kozer ! I approved the PR ✅ Nice work!!

sejas

The PR looks great. I tested it I was able to see my usage updated. I noticed that the limit was restored to 0 from yesterday.

My only concern is that we are changing the layout for current users even if we didn't released our feature flag yet.

@wojtekn , what do you think about submitting this change that affects current users?
I think this specific change is harmless, but I understand if we prefer to keep the old demo site limit bar intact.

Before

After

sejas · 2024-06-05T14:53:24Z

src/components/content-tab-assistant.tsx

@@ -7,6 +7,7 @@ import { useAssistant } from '../hooks/use-assistant';
 import { useAssistantApi } from '../hooks/use-assistant-api';
 import { useAuth } from '../hooks/use-auth';
 import { useOffline } from '../hooks/use-offline';
+import { usePromptUsage } from '../hooks/use-prompt-usage';


Let's remove this unused import.

sejas · 2024-06-05T14:54:03Z

src/components/user-settings.tsx

@@ -72,13 +74,11 @@ const SnapshotInfo = ( {
 	const isOffline = useOffline();
 	const offlineMessage = __( 'Deleting demo sites requires an internet connection.' );
 	return (
-		<div className="flex gap-5 flex-col">
-			<h2 className="a8c-subtitle-small">{ __( 'Usage' ) }</h2>


~~We shouldn't change the old behaviour until we release the feature flag.~~
We are changing the old behaviour but that's ok in this case.

sejas · 2024-06-05T15:01:33Z

src/hooks/use-prompt-usage.tsx

+			await new Promise( ( resolve, reject ) => {
+				client.req.get(
+					{
+						method: 'HEAD',
+						path: '/studio-app/ai-assistant/chat',
+						apiNamespace: 'wpcom/v2',
+					},
+					( error: Error, _data: unknown, headers: Record< string, string > ) => {
+						if ( error ) {
+							return reject( error );
+						}
+						if ( ! headers ) {
+							reject( new Error( 'No headers in response' ) );
+							return;
+						}
+						updatePromptUsage( headers );
+						resolve( headers );
+					}
+				);
+			} );


Do we need to create this promise and resolve the headers? Maybe we can await the client.req.get directly.

Suggested change

await new Promise( ( resolve, reject ) => {

client.req.get(

{

method: 'HEAD',

path: '/studio-app/ai-assistant/chat',

apiNamespace: 'wpcom/v2',

},

( error: Error, _data: unknown, headers: Record< string, string > ) => {

if ( error ) {

return reject( error );

}

if ( ! headers ) {

reject( new Error( 'No headers in response' ) );

return;

}

updatePromptUsage( headers );

resolve( headers );

}

);

} );

await client.req.get(

{

method: 'HEAD',

path: '/studio-app/ai-assistant/chat',

apiNamespace: 'wpcom/v2',

},

( error: Error, _data: unknown, headers: Record< string, string > ) => {

if ( error ) {

return;

}

if ( ! headers ) {

return;

}

updatePromptUsage( headers );

}

);

sejas · 2024-06-05T15:15:00Z

src/hooks/use-assistant-api.ts

 			} finally {
 				setIsLoading( false );
 			}
 			const message = response?.choices?.[ 0 ]?.message?.content;
-
+			updatePromptUsage( headers );


Thanks for optimizing this ! 🙏

wojtekn · 2024-06-06T09:08:04Z

My only concern is that we are changing the layout for current users even if we didn't released our feature flag yet.
@wojtekn , what do you think about submitting this change that affects current users?
I think this specific change is harmless, but I understand if we prefer to keep the old demo site limit bar intact.

It's okay. We are slightly changing the layout to prepare it for incoming changes, but we are not enabling AI assistant UI in any form.

sejas

🚀
@kozer , feel free to merge after adressing:

…-prompt-limit-ui

sejas

I applied these changes and tested it again. It works as expected. Thank you!
As we discussed we can update the headers name later.

Changes:

update-usage.mp4

Studio: Add prompt limit UI

481c761

kozer self-assigned this May 31, 2024

kozer marked this pull request as draft May 31, 2024 07:05

kozer added 2 commits May 31, 2024 11:42

Update: Add defaults, and reject on error

d49c099

Update: Minor refactor on how we handle errors

44494d2

kozer added the Studio App label May 31, 2024

Update: Move to context in order to share state across components

b103609

kozer requested a review from a team June 3, 2024 11:40

kozer marked this pull request as ready for review June 3, 2024 11:40

Update: Fix lint errors

d310ce4

kozer added Studio AI Assistant [Status] Needs Review and removed Studio App labels Jun 3, 2024

derekblank self-requested a review June 4, 2024 02:26

derekblank approved these changes Jun 4, 2024

View reviewed changes

kozer added 3 commits June 4, 2024 11:41

Merge branch 'trunk' into add/setting-prompt-limit-ui

3937f2b

Update: Not show the prompt limit if ai feature is not enabled

6839b66

Update: fix lint issues

520402b

sejas reviewed Jun 4, 2024

View reviewed changes

src/hooks/use-prompt-usage.tsx Outdated Show resolved Hide resolved

src/components/content-tab-assistant.tsx Outdated Show resolved Hide resolved

katinthehatsite reviewed Jun 4, 2024

View reviewed changes

src/components/user-settings.tsx Outdated Show resolved Hide resolved

katinthehatsite reviewed Jun 4, 2024

View reviewed changes

src/components/user-settings.tsx Outdated Show resolved Hide resolved

Merge branch 'trunk' into add/setting-prompt-limit-ui

00a53b5

kozer added 3 commits June 5, 2024 10:13

Update: Use post to fetch headers, instead of doing and extra HEAD re…

8c18d47

…quest

Update: Fix tests

cf07a16

Update: Lowercase settings headers

26b596e

kozer requested review from sejas and katinthehatsite June 5, 2024 12:00

katinthehatsite approved these changes Jun 5, 2024

View reviewed changes

sejas reviewed Jun 5, 2024

View reviewed changes

sejas approved these changes Jun 6, 2024

View reviewed changes

sejas added 3 commits June 7, 2024 14:47

Merge branch 'trunk' of github.com:Automattic/studio into add/setting…

1135d61

…-prompt-limit-ui

Remove unused import

e77d422

Simplify fetchPromptUsage removing unnecessary Promise

9c79ffa

sejas approved these changes Jun 7, 2024

View reviewed changes

sejas merged commit 23eabf9 into trunk Jun 7, 2024
11 checks passed

sejas deleted the add/setting-prompt-limit-ui branch June 7, 2024 14:18

github-actions bot removed the [Status] Needs Review label Jun 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Studio: Add prompt limit UI #197

Studio: Add prompt limit UI #197

kozer commented May 31, 2024 •

edited

Loading

derekblank left a comment

sejas left a comment

kozer commented Jun 5, 2024 •

edited

Loading

kozer commented Jun 5, 2024

katinthehatsite commented Jun 5, 2024

kozer commented Jun 5, 2024

katinthehatsite commented Jun 5, 2024

sejas left a comment

sejas Jun 5, 2024

sejas Jun 5, 2024 •

edited

Loading

sejas Jun 5, 2024

sejas Jun 5, 2024

wojtekn commented Jun 6, 2024

sejas left a comment •

edited

Loading

sejas left a comment •

edited

Loading

Studio: Add prompt limit UI #197

Studio: Add prompt limit UI #197

Conversation

kozer commented May 31, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

derekblank left a comment

Choose a reason for hiding this comment

sejas left a comment

Choose a reason for hiding this comment

kozer commented Jun 5, 2024 • edited Loading

kozer commented Jun 5, 2024

katinthehatsite commented Jun 5, 2024

kozer commented Jun 5, 2024

katinthehatsite commented Jun 5, 2024

sejas left a comment

Choose a reason for hiding this comment

sejas Jun 5, 2024

Choose a reason for hiding this comment

sejas Jun 5, 2024 • edited Loading

Choose a reason for hiding this comment

sejas Jun 5, 2024

Choose a reason for hiding this comment

sejas Jun 5, 2024

Choose a reason for hiding this comment

wojtekn commented Jun 6, 2024

sejas left a comment • edited Loading

Choose a reason for hiding this comment

sejas left a comment • edited Loading

Choose a reason for hiding this comment

kozer commented May 31, 2024 •

edited

Loading

kozer commented Jun 5, 2024 •

edited

Loading

sejas Jun 5, 2024 •

edited

Loading

sejas left a comment •

edited

Loading

sejas left a comment •

edited

Loading