@eavfw/chat-ide

@eavfw/chat-ide

A beautiful and fully-featured IDE component library for React applications with integrated chat functionality.

Installation

npm install @eavfw/chat-ide

Usage

With Tailwind CSS (Recommended)

• Install Tailwind CSS if you haven't already:

npm install -D tailwindcss postcss autoprefixer

• Add the component paths to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@eavfw/chat-ide/**/*.{js,ts,jsx,tsx}'
  ],
  // ... rest of your config
}

• Use the components:

import { IDE, Message, DefaultMessage } from '@eavfw/chat-ide';
import { Code } from 'lucide-react';
import { useChat } from 'ai/react';

function App() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  const tabs = [
    {
      id: 'code',
      title: 'Code',
      icon: <Code className="w-4 h-4" />,
      content: <div>Your code content here</div>
    }
  ];

  return (
    <IDE
      tabs={tabs}
      activeTab="code"
      onTabChange={(tabId) => console.log(tabId)}
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isLoading={isLoading}
      MessageComponent={DefaultMessage} // Optional: Provide your own message component
    />
  );
}

With Vercel AI SDK

The IDE component is designed to work seamlessly with Vercel's AI SDK. To use it:

• Install the AI SDK:

npm install ai

• Set up your API route using the AI SDK (see Vercel's documentation)

• Use the useChat hook with the IDE:

import { IDE } from '@eavfw/chat-ide';
import { useChat } from 'ai/react';

function App() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading
  } = useChat({
    api: '/api/chat'
  });

  return (
    <IDE
      messages={messages}
      input={input}
      handleInputChange={handleInputChange}
      handleSubmit={handleSubmit}
      isLoading={isLoading}
      tabs={[/* your tabs */]}
      activeTab="code"
      onTabChange={(tabId) => console.log(tabId)}
    />
  );
}

Without Tailwind CSS

If you're not using Tailwind CSS, you'll need to provide your own styles. Import our base CSS file and override the classes as needed:

/* your-styles.css */
.ide-container {
  display: flex;
  height: 100vh;
  padding: 1rem;
  gap: 1rem;
  background: linear-gradient(to bottom right, #111827, #1E1E1E, #001829);
}

/* Add more custom styles... */

Components

Message Components

The IDE supports custom message components for complete control over message rendering. You can provide your own component through the MessageComponent prop:

// Custom message component
function CustomMessage({ message }: { message: Message }) {
  return (
    <div className={`p-4 rounded ${
      message.role === 'assistant' ? 'bg-blue-500/10' : 'bg-green-500/10'
    }`}>
      <div className="font-medium text-sm mb-1">
        {message.role === 'assistant' ? '🤖 Assistant' : '👤 User'}
      </div>
      <div className="text-sm">{message.content}</div>
    </div>
  );
}

// Using the custom component
<IDE
  MessageComponent={CustomMessage}
  // ... other props
/>

The default message component (DefaultMessage) is exported from the package and can be used as a reference or extended:

import { DefaultMessage, type Message } from '@eavfw/chat-ide';

// Extending the default message component
function EnhancedMessage({ message }: { message: Message }) {
  if (message.role === 'system') {
    return <div className="text-gray-400">{message.content}</div>;
  }
  return <DefaultMessage message={message} />;
}

IDE

The main container component that combines ChatEditor and Workbench. Supports integration with Vercel AI SDK for chat functionality.

import { IDE, WorkbenchTab } from '@eavfw/chat-ide';
import { useChat } from 'ai/react';

const { messages, input, handleInputChange, handleSubmit } = useChat();

const tabs: WorkbenchTab[] = [
  {
    id: 'code',
    title: 'Code',
    icon: <Code className="w-4 h-4" />,
    content: <div>Code content</div>
  }
];

<IDE
  tabs={tabs}
  activeTab="code"
  messages={messages}
  input={input}
  handleInputChange={handleInputChange}
  handleSubmit={handleSubmit}
  isLoading={false}
  onTabChange={(tabId) => console.log(tabId)}
  MessageComponent={CustomMessage} // Optional custom message component
/>

ChatEditor

A standalone chat interface component. Composed of ChatHistory and ChatInput components for better separation of concerns.

import { ChatEditor } from '@eavfw/chat-ide';
import { useChat } from 'ai/react';

const { messages, input, handleInputChange, handleSubmit } = useChat();

<ChatEditor
  messages={messages}
  input={input}
  handleInputChange={handleInputChange}
  handleSubmit={handleSubmit}
  isLoading={false}
  MessageComponent={CustomMessage} // Optional custom message component
/>

ChatInput

A rich text input component with support for:

• Shift + Return for new lines
• Dynamic send button that transforms into cancel during loading
• Token usage display
• Quick action buttons

import { ChatInput } from '@eavfw/chat-ide';

<ChatInput
  input={input}
  handleInputChange={handleInputChange}
  handleSubmit={handleSubmit}
  isLoading={false}
/>

ChatHistory

Displays the conversation history with proper message threading and role-based styling.

import { ChatHistory } from '@eavfw/chat-ide';

<ChatHistory messages={messages} />

Workbench

A tabbed interface component for your IDE content.

import { Workbench } from '@eavfw/chat-ide';

<Workbench
  tabs={tabs}
  activeTab="code"
  onTabChange={(tabId) => console.log(tabId)}
/>

ERDiagramView (Optional)

An ER diagram viewer component. Requires @eavfw/er-diagram to be installed.

import { ERDiagramView } from '@eavfw/chat-ide';

<ERDiagramView />

TypeScript Support

This library includes TypeScript definitions. All components are fully typed, and you'll get proper type checking and autocompletion in your IDE.

License

MIT

Contributing

Component Guidelines

When creating new components or modifying existing ones:

• Keep components focused and single-responsibility
• Use TypeScript for type safety
• Support customization through props
• Provide sensible defaults
• Document props and customization options

This project uses Conventional Commits for commit messages and Semantic Release for versioning.

Commit Message Format

Each commit message consists of a header, a body and a footer. The header has a special format that includes a type, a scope and a subject:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

To make it easier to write commit messages, you can use the interactive commit tool:

npm run commit

Types

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing tests or correcting existing tests
• chore: Changes to the build process or auxiliary tools

Release Process

Releases are automated using semantic-release. The version number is automatically determined based on the commit messages.