Chat with your pipelines functionality

Summary

This pull request introduces a comprehensive set of features and improvements to the chatbot functionality within the VSCode ZenML extension. The updates enhance user interaction, context management, and overall user experience.

Chat Interface Enhancements:

Created chat interface UI.
Added support for markdown rendering using markedjs.
Integrated Gemini, Anthropic, and OpenAI APIs using TokenJS.

Context Management:

Added context for server, stack, components, and environment data.
Added functions for gathering context.
Connected context to selector for server/stack/components/environment data.
Added buttons to the UI to select context.

Pipeline Integration:

Added specific pipeline runs and metadata to the chatbot UI.
Retrieved log data for pipeline runs from the dashboard API.

UI and UX Improvements:

Created a dropdown menu.
Overhauled the UI to be more minimalistic.
Added a context selector UI.

Contributors

@wyennie @Nathaniel-Xu @alan-cho

Summary by CodeRabbit

New Features
- Introduced a dynamic chat interface within the Visual Studio Code extension.
- Enhanced chat log rendering with improved message styling and filtering.
- Added dropdowns for selecting chat providers and models, enhancing user interactivity.
- Implemented commands for opening chat and registering LLM API keys.
- Expanded functionality with new dependencies for language processing and web interactions.
- Added support for CSS processing with Tailwind CSS.
- Introduced a configuration for PostCSS to manage CSS enhancements.
- Added a new webview for the chatbot interface.
- Implemented a comprehensive set of utility functions for context management.
- Improved state management and dynamic UI updates for the chat interface.
Bug Fixes
- Updated dependencies for improved performance and security.
Style
- Added comprehensive styling for the chat interface to enhance user experience.
Documentation
- Updated documentation to reflect new features and commands.
Tests
- Updated testing requirements for Python to ensure compatibility with new features.

Walkthrough

This pull request introduces a chat interface within a Visual Studio Code extension through several new files and modifications. The package.json file has been updated to include new commands, view containers, and dependencies. The chatRenderer.ts file provides methods for generating webview content and processing chat messages, while the chat.html file establishes the layout for the chat interface. Overall, these changes enhance the functionality of the ZenML extension by integrating interactive chat capabilities.

Changes

File(s)	Change Summary
`package.json`	Modified to add new commands (`zenml.openChat`, `zenml.registerLLMAPIKey`), a new view container (`zenmlAPIView`), and several dependencies (`date-fns`, `ky`, `marked`, `token.js`).
`noxfile.py`	New Nox session function added: `build_css` for processing CSS with Tailwind, including optional watching capabilities.
`postcss.config.js`	New configuration file created to specify PostCSS plugins (`tailwindcss`, `autoprefixer`).
`resources/chat-view/chat.html`	New HTML file created for the chat interface, structured to display messages dynamically with input areas, dropdowns, and buttons for user interactions.
`resources/chat-view/styles.css`	New CSS file created for styling the chat interface using Tailwind CSS, defining styles for various elements and interactive components.
`src/views/chatView/chatRenderer.ts`	New file created to render a chat interface, including methods `getWebviewContent` for generating HTML content and `renderChatLog` for processing chat messages into HTML.
`src/views/chatView/utils/ContextUtils.ts`	New utility file introduced to gather and format contextual data related to a machine learning pipeline environment, including functions for retrieving server, environment, and pipeline run data.
`src/types/ChatTypes.ts`	New file created to define TypeScript interfaces and types related to chat functionality, including `ChatMessage`, `TreeItem`, `ContextItem`, and `WebviewMessage`.
`src/views/chatView/ChatDataProvider.ts`	New class `ChatDataProvider` added to manage chat messages and interactions, including methods for refreshing the webview and adding messages.
`src/views/chatView/chatMessageHandler.ts`	New file created to handle command processing for chat messages, defining command handlers and managing user interactions with appropriate error handling.
`src/views/chatView/utils/CustomErrors.ts`	New file introduced to define custom error classes (`NetworkError`, `ValidationError`, `StorageError`) for improved error handling within the application.
`src/views/chatView/utils/PipelineUtils.ts`	New utility functions added for managing and retrieving pipeline data, including functions for formatting pipeline context and handling pagination.
`src/views/chatView/utils/TokenUtils.ts`	New file created to initialize a TokenJS instance and retrieve chat responses, including error handling for API interactions.
`tailwind.config.js`	New configuration file for Tailwind CSS introduced, specifying content sources for utility classes.
`requirements.txt`	Updated to reflect changes in package versions and hashes, including updates for `attrs`, `cattrs`, `pyyaml`, `types-pyyaml`, and `watchdog`.

🐇 In the webview bright and clear,
A chat interface brings us cheer.
With messages flowing, models to choose,
Each interaction, we cannot lose!
So hop along, let’s chat away,
In the code, we play today! 🐇✨

📜 Recent review details

**Configuration used: .coderabbit.yml** **Review profile: CHILL**

📥 Commits

Reviewing files that changed from the base of the PR and between 236e93cd74b722c9a31a040314bdee6434d38c57 and d19c19907a76958c2b720d77ec5f9347bcf5b244.

📒 Files selected for processing (2)

* `src/views/chatView/ChatDataProvider.ts` (1 hunks) * `src/views/chatView/utils/TokenUtils.ts` (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

* src/views/chatView/ChatDataProvider.ts * src/views/chatView/utils/TokenUtils.ts

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

⚠️ GitGuardian has uncovered 2 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard. Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secrets in your pull request

| GitGuardian id | GitGuardian status | Secret | Commit | Filename | | | -------------- | ------------------ | ------------------------------ | ---------------- | --------------- | -------------------- | | [-](https://dashboard.gitguardian.com/workspace/188984/incidents/secrets) | - | Google API Key | 9ffc4fab9d8667dfee65424d58b8c35f08ecf47e | src/services/chatService.ts | [View secret](https://github.com/zenml-io/vscode-zenml/commit/9ffc4fab9d8667dfee65424d58b8c35f08ecf47e#diff-e64d47427f6e61e153a786b803640f4fca54ffb6e192083bf1edf46a78930250L36) | | [-](https://dashboard.gitguardian.com/workspace/188984/incidents/secrets) | - | Google API Key | 34bbddb4fc5930827fc1df8c3c24898550dff479 | src/services/chatService.ts | [View secret](https://github.com/zenml-io/vscode-zenml/commit/34bbddb4fc5930827fc1df8c3c24898550dff479#diff-e64d47427f6e61e153a786b803640f4fca54ffb6e192083bf1edf46a78930250R36) |

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code. 2. Replace and store your secrets safely. [Learn here](https://blog.gitguardian.com/secrets-api-management?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) the best practices. 3. Revoke and [rotate these secrets](https://docs.gitguardian.com/secrets-detection/secrets-detection-engine/detectors/specifics/googleaiza#revoke-the-secret?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). 4. If possible, [rewrite git history](https://blog.gitguardian.com/rewriting-git-history-cheatsheet?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment). Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data. To avoid such incidents in the future consider - following these [best practices](https://blog.gitguardian.com/secrets-api-management/?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) for managing and storing secrets including API keys and other credentials - install [secret detection on pre-commit](https://docs.gitguardian.com/ggshield-docs/integrations/git-hooks/pre-commit?utm_source=product&utm_medium=GitHub_checks&utm_campaign=check_run_comment) to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

@wyennie @alan-cho @Nathaniel-Xu

A few things here...

it's failing the linting in the CI, so you should take a look at that
could you add some ... or something to show that the LLM is processing whenever you send a message? at the moment you don't really get any feedback from the UI to show that anything is happening. Ideally a sort of animating / blinking set of dots etc, but really anything would be preferable.
can we / do we store the last LLM used? At the moment when you start it defaults to Gemini, which I think anyway should be changed to OpenAI gpt-4o which is what most people would prefer to use as default. And thereafter when you close the window etc, it should retain / remember whatever you last used.
why is it so slow? I guess part of this is the LLM, and part of this is getting the assets from ZenML. Do we get the assets every time from ZenML? or do we cache things somewhat so that we're not making API calls to get metadata every time? (didn't dive into the code really yet)
using OpenAI, I quite frequently got "Error: Unable to get response from OpenAI". Looking at the code, I think this error is a sort of generic catch for all errors. It'd be maybe nicer if I could see the actual problem. I have a feeling it's because I'm sending too much context over and the LLM can't take that all, but I can't be sure since you don't show me the actual error. This could be handled better, esp since people might often be hitting these kinds of limits and the error doesn't help you fix it.
maybe the markdown parsing could be improved? It seems that you add these horizontal lines for H1 / H2 headings in what the LLM sends back? Not sure that makes for the nicest UI. Maybe take out the lines and just do bold text or larger text etc?

Happy to dive more into this feedback on Slack etc as needed.

zenml-io / vscode-zenml