feat: updated dependencies and add guidance for ai enabled development

.cursor/rules/patternfly-vibe-coding.mdc

@@ -0,0 +1,31 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+# PatternFly Vibe Coding Rule
+
+## Purpose
+Always reference the README and markdown documentation in this repository when generating, editing, or reviewing any PatternFly (PF) code. These files contain the authoritative best practices, guidelines, and up-to-date standards for PatternFly development.
+
+## Scope
+This rule applies to all code generation, refactoring, and review tasks involving PatternFly React, PatternFly Chatbot, and related UI components in this project.
+
+## Documentation to Reference
+- The root `README.md`
+- The `documentation/README.md` file, which serves as the table of contents for all documentation in the `documentation/` directory and its subdirectories. Use this file to discover and navigate all relevant rules, guidelines, and best practices for PatternFly development.
+- All markdown files referenced by `documentation/README.md`.
+
+## Rule
+- **Always consult the above documentation before generating or editing any PatternFly code.**
+- **Use the documented best practices for component usage, styling, accessibility, and layout.**
+- **Prefer semantic design tokens and utility classes as described in the docs.**
+- **Follow accessibility and ARIA guidelines from the documentation.**
+- **Reference official PatternFly components and avoid custom solutions unless explicitly allowed.**
+- **If a question arises, search these docs first before using external sources.**
+
+## Example Prompt
+> "When generating PatternFly code, use the guidelines and examples from all README and markdown files in this repository, especially those referenced in documentation/README.md. Follow the documented best practices for styling, accessibility, and component usage."
+
+## Enforcement
+If code is generated or edited without following these documentation sources, request changes and point to the relevant section in the docs.

README.md

@@ -91,6 +91,20 @@ When importing CSS from a third-party package for the first time, you may encoun
 * To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)
 * To ensure code styles remain consistent, we use [eslint](https://eslint.org/)
 
+## AI Documentation & Development Rules
+
+This project includes an [`ai-documentation`](./ai-documentation/README.md) directory designed primarily for use by AI agents in AI-enabled IDEs (such as Cursor, Claude, and others). These files provide essential rules, guidelines, and best practices for building web applications with PatternFly React, enabling AI coding assistants to:
+
+- Offer context-aware suggestions and enforce consistent component architecture and styling standards
+- Guide developers to use PatternFly v6 components and utility classes
+- Promote accessibility and state management best practices
+- Reference troubleshooting tips and specialized rules (charts, chatbot, etc.)
+
+**How to use:**
+If you are using an AI-enabled IDE, the AI agent will automatically leverage the [AI Documentation & Rules](./ai-documentation/README.md) to assist you as you develop.
+
+By following these rules—either directly or via your AI assistant—you'll ensure your app is maintainable, accessible, and consistent with PatternFly best practices.
+
 ## Multi environment configuration
 This project uses [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) for exposing environment variables to your code. Either export them at the system level like `export MY_ENV_VAR=http://dev.myendpoint.com && npm run start:dev` or simply drop a `.env` file in the root that contains your key-value pairs like below:
 

ai-documentation/README.md

@@ -0,0 +1,58 @@
+# PatternFly React Development Rules
+
+> **Starting a new project?**
+> For a quick start with PatternFly React, use the [patternfly/patternfly-react-seed](https://github.com/patternfly/patternfly-react-seed) app. It provides a basic build, layout, and scaffolding for new PatternFly applications, including recommended tooling and project structure.
+
+Essential rules and guidelines for AI coders working with PatternFly React applications.
+
+## Quick Navigation
+
+### 🚀 Setup & Environment
+- [**Setup Rules**](./setup/README.md) - Project initialization requirements
+- [**Quick Start**](./setup/quick-start.md) - Essential setup steps
+- [**Environment Rules**](./setup/development-environment.md) - Development configuration
+
+### 📚 Core Rules
+- [**PatternFly Guidelines**](./guidelines/README.md) - Core development principles
+- [**Component Rules**](./guidelines/component-architecture.md) - Component structure requirements
+- [**Styling Rules**](./guidelines/styling-standards.md) - CSS and styling requirements
+
+### 🧩 Component Rules
+- [**Layout Rules**](./components/layout/README.md) - Page structure requirements
+- [**Table Component Rules**](./components/data-display/table.md) - Table usage and best practices
+- [**Data View Component Rules**](./components/data-display/README.md) - Data view usage and best practices
+
+### 📊 Specialized Rules
+- [**Charts Rules**](./charts/README.md) - PatternFly Charts requirements
+- [**Chatbot Rules**](./chatbot/README.md) - PatternFly Chatbot requirements
+
+### 🔧 Troubleshooting
+- [**Common Issues**](./troubleshooting/common-issues.md) - Problem resolution rules
+
+### 📖 Resources
+- [**External Links**](./resources/external-links.md) - Official documentation links
+- [**Local Files**](./resources/local-files.md) - Project-specific resources
+
+## Usage Rules for AI Coders
+
+1. **Always use PatternFly v6** - Use `pf-v6-` prefixed classes only
+2. **Component-first approach** - Use PatternFly components before custom solutions
+3. **Consult documentation** - Reference [PatternFly.org](https://www.patternfly.org/) for examples
+4. **Follow accessibility** - Implement proper ARIA labels and keyboard navigation
+5. **Use utility classes** - Prefer PatternFly utilities over custom CSS
+6. **Handle states** - Always implement loading, error, and empty states
+
+## Documentation Structure
+
+Each file contains:
+- **Rules** - Specific requirements to follow
+- **Do's and Don'ts** - Clear guidance on what to avoid
+- **Links** - References to official PatternFly documentation
+- **Quick examples** - Minimal code patterns when needed
+
+## Reference Documentation
+
+- [PatternFly.org](https://www.patternfly.org/)
+- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)
+
+> For all rules and examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.

ai-documentation/charts/README.md

@@ -0,0 +1,191 @@
+# Charts Rules
+
+Essential rules for PatternFly Charts implementation using Victory.js and ECharts.
+
+## Related Files
+- [**Component Architecture**](../guidelines/component-architecture.md) - Chart component structure rules
+- [**Performance Optimization**](../troubleshooting/performance.md) - Chart performance considerations
+
+## Installation Rules
+
+### Required Installation
+```bash
+# ✅ Victory-based charts (recommended)
+npm install @patternfly/react-charts victory
+
+# ✅ ECharts-based charts (alternative)
+npm install @patternfly/react-charts echarts
+```
+
+### Import Rules
+- ✅ **Use specific import paths** - Import from `/victory` or `/echarts` subdirectories
+- ❌ **Don't use general imports** - Avoid importing from main package
+
+```jsx
+// ✅ Correct imports
+import { ChartDonut, ChartLine, ChartBar } from '@patternfly/react-charts/victory';
+import { EChart } from '@patternfly/react-charts/echarts';
+
+// ❌ Wrong imports
+import { ChartDonut } from '@patternfly/react-charts';
+```
+
+### Troubleshooting Import Issues
+If "module not found" errors occur:
+1. **Clear cache**: `rm -rf node_modules package-lock.json`
+2. **Reinstall**: `npm install`
+3. **Verify paths**: Check import paths match installed version
+
+## Chart Implementation Rules
+
+### Color Rules
+- ✅ **Use PatternFly chart color tokens** - For consistency with design system
+- ❌ **Don't use hardcoded colors** - Use design tokens instead
+
+```jsx
+// ✅ Correct - Use PatternFly color tokens
+const chartColors = [
+  'var(--pf-v6-chart-color-blue-300)',
+  'var(--pf-v6-chart-color-green-300)',
+  'var(--pf-v6-chart-color-orange-300)'
+];
+
+<ChartDonut data={data} colorScale={chartColors} />
+```
+
+### Responsive Rules
+- ✅ **Implement responsive sizing** - Charts must work on all screen sizes
+- ✅ **Use container-based dimensions** - Not fixed width/height
+- ❌ **Don't hardcode dimensions** - Charts must be responsive
+
+```jsx
+// ✅ Required responsive pattern
+const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+useEffect(() => {
+  const updateDimensions = () => {
+    if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+  };
+  updateDimensions();
+  window.addEventListener('resize', updateDimensions);
+  return () => window.removeEventListener('resize', updateDimensions);
+}, []);
+```
+
+### Accessibility Rules
+- ✅ **Provide ARIA labels** - For screen reader support
+- ✅ **Use high contrast colors** - Meet WCAG standards
+- ✅ **Support keyboard navigation** - Add tabIndex and role
+
+```jsx
+// ✅ Required accessibility pattern
+<ChartDonut
+  data={data}
+  ariaDesc="Chart showing user distribution"
+  ariaTitle="User Status Chart"
+  tabIndex={0}
+  role="img"
+/>
+```
+
+### State Management Rules
+- ✅ **Handle loading states** - Show spinners during data loading
+- ✅ **Handle error states** - Show error messages with retry
+- ✅ **Handle empty states** - Show appropriate empty messages
+- ✅ **Use data memoization** - For performance optimization
+
+```jsx
+// ✅ Required state handling
+if (isLoading) return <Spinner />;
+if (error) return <EmptyState><EmptyStateHeader titleText="Chart error" /></EmptyState>;
+if (!data?.length) return <EmptyState><EmptyStateHeader titleText="No data" /></EmptyState>;
+
+const processedData = useMemo(() => {
+  return rawData.map(item => ({ x: item.date, y: item.value }));
+}, [rawData]);
+```
+
+### Integration Rules
+- ✅ **Use with PatternFly components** - Integrate charts in Cards, PageSections
+- ✅ **Follow grid layouts** - Use PatternFly grid for chart dashboards
+- ❌ **Don't create standalone chart pages** - Integrate with PatternFly layout
+
+```jsx
+// ✅ Required integration pattern
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
+
+<Card>
+  <CardTitle>Chart Title</CardTitle>
+  <CardBody>
+    <ChartDonut data={data} />
+  </CardBody>
+</Card>
+```
+
+## Performance Rules
+
+### Required Optimizations
+- ✅ **Use lazy loading for heavy charts** - Improve initial page load
+- ✅ **Memoize data processing** - Use useMemo for expensive calculations
+- ✅ **Implement proper loading states** - Show feedback during data loading
+
+```jsx
+// ✅ Required performance patterns
+const LazyChart = lazy(() => import('./HeavyChart'));
+
+<Suspense fallback={<Spinner />}>
+  <LazyChart />
+</Suspense>
+```
+
+## Essential Do's and Don'ts
+
+### ✅ Do's
+- Use PatternFly chart color tokens for consistency
+- Implement responsive sizing for different screen sizes
+- Provide proper ARIA labels and descriptions
+- Handle loading, error, and empty states
+- Use appropriate chart types for your data
+- Optimize performance with data memoization
+- Integrate charts with PatternFly layout components
+
+### ❌ Don'ts
+- Hardcode chart dimensions without responsive design
+- Use colors that don't meet accessibility standards
+- Skip loading states for charts with async data
+- Ignore keyboard navigation and screen reader support
+- Create overly complex charts
+- Mix different charting libraries inconsistently
+- Forget to handle empty data states
+
+## Common Issues
+
+### Module Not Found
+- **Clear cache**: `rm -rf node_modules package-lock.json`
+- **Reinstall**: `npm install`
+- **Check paths**: Verify import paths are correct
+
+### Chart Not Rendering
+- **Check container dimensions**: Ensure parent has width/height
+- **Verify data format**: Data must match chart expectations
+- **Check console**: Look for Victory.js or ECharts warnings
+
+### Performance Issues
+- **Use data memoization**: useMemo for expensive calculations
+- **Implement lazy loading**: For heavy chart components
+- **Optimize re-renders**: Use React.memo for chart components
+
+## Quick Reference
+- **[PatternFly Charts README](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts#readme)** - Installation and usage
+- **[Victory.js Documentation](https://formidable.com/open-source/victory/)** - Chart library documentation
+- **[PatternFly Chart Guidelines](https://www.patternfly.org/charts/about)** - Design guidelines
+
+## Reference Documentation
+
+- [PatternFly Charts on PatternFly.org](https://www.patternfly.org/charts/about)
+- [PatternFly React Charts GitHub Repository](https://github.com/patternfly/patternfly-react/tree/main/packages/react-charts)
+
+> For the most up-to-date documentation and code examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.