Next.js Chat Application

A modern chat application built with Next.js that supports rich messaging features including file attachments, markdown rendering, and tool invocations.

Features

• 💬 Real-time chat messaging
• 📎 File attachment support
• ✨ Markdown rendering in messages
• 🔧 Tool invocation capabilities
• 🕒 Timestamp display options
• 🎭 Message animations

Getting Started

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the application.

Project Structure

• src/components/ui/chat.tsx - Core chat functionality
• src/components/ui/chat-message.tsx - Individual message component with support for various content types

Usage

Chat Message Component

add the XAI_API_KEY environment variable to your .env file

The ChatMessage component supports various props:

interface ChatMessageProps {
  role: "user" | "assistant";
  content: string;
  createdAt?: Date;
  showTimeStamp?: boolean;
  animation?: "scale" | "none";
  actions?: React.ReactNode;
  className?: string;
  experimental_attachments?: Array<{
    name?: string;
    url: string;
  }>;
  toolInvocations?: any[];
}

File Handling

The application includes utilities for handling files:

function createFileList(files: File[] | FileList): FileList {
  const dataTransfer = new DataTransfer();
  for (const file of Array.from(files)) {
    dataTransfer.items.add(file);
  }
  return dataTransfer.files;
}

Technologies

This project uses:

• Next.js - React framework
• TypeScript - Type-safe JavaScript
• Tailwind CSS - For styling (inferred from class names)

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

License

MIT