DevExtreme React Chat Demo with OpenAI Integration

This project demonstrates a React application built with Vite, TypeScript, DevExtreme components, and OpenAI integration.

Features

• Interactive DataGrid displaying user information
• AI-powered chat interface with typing indicators
• OpenAI GPT-4.1
• Environment-based configuration
• HMR (Hot Module Replacement) support

Setup

1. Install dependencies:

   npm install

2. Configure environment variables:

   • Copy .env to .env.local

3. Start the development server:

   npm run dev

Components

DataGrid

Displays a table of user information with sortable columns.

Chat

Provides an interactive chat interface with:

• Real-time message updates
• Typing indicators
• AI-powered responses using OpenAI's GPT model
• User authentication and identification

Security Note

Never commit your actual OpenAI API key to version control. Always use environment variables and keep sensitive data in .env.local (which should be in your .gitignore).

ESLint Configuration

This project includes a robust ESLint configuration. For production applications, you can enable type-aware lint rules:

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    // Or for stricter rules:
    ...tseslint.configs.strictTypeChecked,
    // Optional stylistic rules:
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also add React-specific lint rules with eslint-plugin-react-x and eslint-plugin-react-dom.