Chat with your pipelines functionality

[wyennie]

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.

• 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.

[coderabbitai]

Actionable comments posted: 8

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5860d10 and 30ffa7a.

📒 Files selected for processing (2)

• resources/chat-view/chat.js (1 hunks)
• src/views/chatView/utils/ContextUtils.ts (1 hunks)

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

• resources/chat-view/chat.js

🧰 Additional context used

📓 Path-based instructions (1)

src/views/chatView/utils/ContextUtils.ts (1)

Pattern **/*.ts: Review the Typescript code for conformity with industry standards and best practices, highlighting any deviations.

🪛 Biome

src/views/chatView/utils/ContextUtils.ts

[error] 124-124: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (1)

resources/chat-view/chat.js (1)

151-158: Ensure strict sanitization when rendering markdown content

While you're sanitizing the HTML output of marked.parse using DOMPurify, it's important to verify that the configuration prevents potential XSS attacks, especially if currentAssistantMessage contains user-generated content.

Consider setting up DOMPurify with strict policies and configuring marked to disallow embedded HTML:

marked.setOptions({
  gfm: true,
  breaks: true,
  headerIds: false,
  mangle: false,
});

const html = marked.parse(currentAssistantMessage);
const sanitizeHtml = DOMPurify.sanitize(html, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] });

This configuration ensures that only basic text formatting is allowed, mitigating XSS risks.

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 30ffa7a and 7d7a106.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• package.json (7 hunks)
• resources/chat-view/chat.html (1 hunks)
• resources/chat-view/chat.js (1 hunks)

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

• package.json
• resources/chat-view/chat.html

🧰 Additional context used

📓 Path-based instructions (1)

resources/chat-view/chat.js (1)

Pattern **/*.js: Review the JavaScript code for conformity with the Google JavaScript style guide, highlighting any deviations.

🪛 Biome

resources/chat-view/chat.js

[error] 193-193: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.

The declaration is defined in this switch clause:

Unsafe fix: Wrap the declaration in a block.

(lint/correctness/noSwitchDeclarations)

🔇 Additional comments (2)

resources/chat-view/chat.js (2)

110-112: Potential XSS vulnerability: setting innerHTML without sanitization

At line 111, document.getElementById('chatMessages').innerHTML = message.chatLogHtml; is setting innerHTML without sanitization. This could expose the application to Cross-Site Scripting (XSS) attacks if message.chatLogHtml contains malicious content.

---

209-214: Cannot use vscode.window.showInformationMessage in the webview

The method vscode.window.showInformationMessage is not available in the webview context. Attempting to call it from the webview will result in an error.

[coderabbitai]

Actionable comments posted: 7

🧹 Outside diff range and nitpick comments (2)

tailwind.config.js (2)

4-6: Consider custom theme extensions for chat view.

The theme configuration is correctly structured with an empty extend object. This is valid and allows for future extensions. However, consider if any custom theme extensions (e.g., colors, fonts, or spacing) might be beneficial for the chat view's specific design requirements.

If custom theme extensions are needed, you can add them like this:

theme: {
  extend: {
    colors: {
      'chat-primary': '#your-color-here',
      'chat-secondary': '#your-color-here',
    },
    fontFamily: {
      'chat': ['Your-Font-Here', 'sans-serif'],
    },
    // Add other extensions as needed
  },
},

---

7-7: Consider useful Tailwind plugins for chat functionality.

The empty plugins array is valid. However, consider if any Tailwind plugins could enhance the chat view's functionality or styling. For example, the @tailwindcss/typography plugin could be useful for styling markdown content in chat messages.

If you decide to use plugins, you can add them like this:

module.exports = {
  // ...other config
  plugins: [
    require('@tailwindcss/typography'),
    // Add other plugins as needed
  ],
}

Don't forget to install any plugins you add:

npm install -D @tailwindcss/typography

📜 Review details

Configuration used: .coderabbit.yml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 13a0ff5 and 32dccd3.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (7)

• noxfile.py (1 hunks)
• package.json (8 hunks)
• postcss.config.js (1 hunks)
• resources/chat-view/chat.html (1 hunks)
• resources/chat-view/styles.css (1 hunks)
• src/views/chatView/chatRenderer.ts (1 hunks)
• tailwind.config.js (1 hunks)

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

• package.json
• resources/chat-view/chat.html
• src/views/chatView/chatRenderer.ts

🧰 Additional context used

📓 Path-based instructions (3)

noxfile.py (1)

Pattern **/*.py: "Review the Python code for conformity with Python best practices and industry standards, highlighting any deviations."

postcss.config.js (1)

Pattern **/*.js: Review the JavaScript code for conformity with the Google JavaScript style guide, highlighting any deviations.

tailwind.config.js (1)

Pattern **/*.js: Review the JavaScript code for conformity with the Google JavaScript style guide, highlighting any deviations.

🔇 Additional comments (2)

tailwind.config.js (2)

1-1: LGTM: Proper type annotation for Tailwind config.

The JSDoc type annotation is correctly used to provide TypeScript support for the Tailwind configuration object.

---

2-2: LGTM: Correct module export syntax.

The configuration object is properly exported using CommonJS syntax, which is appropriate for Node.js environments and consistent with Tailwind's documentation.