Studio: Add dynamic code block to execute wp-cli commands UI AI assistant

[katinthehatsite]

Related to https://github.com/Automattic/dotcom-forge/issues/7526

Proposed Changes

This PR adds that dynamic code block that allows to execute CLI commands inside that block. It also does the following:

• if the code block contains more than 1 CLI command, the Run button is disabled
• the Run button is disabled for code blocks that don't have CLI commands
• when you execute the CLI command, see the output, navigate to another tab and come back, you can see the results of the output preserved

Testing Instructions

• Pull the changes from this branch locally
• Start the app with STUDIO_AI=true npm start
• Navigate to the Assitant tab
• Ask the assistant to give you a CLI command to list users
• Observe that it produces a code block
• Run the command with Run button
• Confirm that you see the output being rendered
• Navigate to a different tab
• Come back to the AI Assistant
• Observe that the output of the CLI command is preserved:

• Try asking for different CLI commands and checking the output

Pre-merge Checklist

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

[katinthehatsite]

A note that I noticed that sometimes CLI output could be strange - for instance, I asked the Chat Assistant to give me CLI commands and it suggested the following but running that command gave strange output that requires action:

We might need to add a better validation of the commands that we want to run to make sure it does not result into the actionable output like this.

[kozer]

@katinthehatsite nice work! I left some comments/suggestions. Other than that it works as expected

Note that there are some errors in buildkite/unit-tests that are related to the new library you introduced.

[katinthehatsite]

Something that still needs to be looked into but documenting it here for the reviewers:

• when you use Run button and the output appears, the chat scrolls to the bottom of the page. It is because of: https://github.com/Automattic/studio/blob/f756e2aa0a6b7644130d7fa71e3a6b5d204f3790/src/components/content-tab-assistant.tsx#L41 that scrolls to the bottom every time an array of messages updates. It would need to be somehow adjusted to scroll through when the messages are added vs. not scroll through when the output is produced (this happens with updateMessage)
• another thing that the Run button does not go to Run again once the output is generated. This needs to be adjusted as well

[katinthehatsite]

Looking at https://github.com/Automattic/dotcom-forge/issues/7526#issuecomment-2165266623 , let's wait until Monday when we decide if we want to keep the Run button at all. If not, then we can remove it and otherwise, this PR is ready.

If we decide to keep it, let's fix the two things mentioned above in https://github.com/Automattic/studio/pull/232#issuecomment-2165073454

[sejas]

@katinthehatsite , would be possible to add an horizontal scroll to the code block?

[sejas]

Let's also avoid displaying the Run button if the wp command has some placeholder < >.

[katinthehatsite]

Hi @sejas, since our conversation earlier this morning, I have done the following:

• Refactored the Run and Run again buttons, reused some of the components that we already have and removed the redundant logic;
• Fixed the failing unit test;
• Resolved conflicts with trunk and all the latest changes how now been integrated with trunk
• Added a check that looks for < and > characters and disables the Run button for these commands

The only other thing I see is that it seems that E2E tests are timing out on Windows 🤔

For the horizontal scroll, I suggest we open a separate issue and handle it in the follow-up. I am not seeing an obvious fix right away and I would prefer to merge the PR asap as it is starting to grow quite large. What do you think?

Let me know what you think of the changes!