Persona AI Chat

A futuristic chat interface allowing users to interact with AI personas, featuring chat persistence, dynamic theming, and markdown support.

Features

• AI Personas: Interact with different AI personas, including Hitesh Choudhary and Piyush Garg, both renowned tech and education YouTubers who teach coding and technology. Each persona brings unique knowledge and communication styles.
• Chat Persistence: Your chat history and session ID are automatically saved in your browser's local storage, allowing you to resume conversations even after closing the tab.
• Clear Chat: Easily clear the current chat history and start a new conversation.
• Export Chat: Export your entire chat history to a text file for your records.
• Dynamic Theming: Choose from a variety of themes (Default, Neon, Minimal, Gradient, Retro, Glass, Clean, Vibrant, Futuristic, Windows XP, 80s Retro, Vintage) to customize the UI/UX. The chat header and footer backgrounds dynamically adapt to the selected theme.
• Responsive UI: The application is designed to be full-screen, centered, and responsive across different devices.
• Markdown Support: Chat messages correctly render markdown for enhanced readability.

Setup Guide

Follow these steps to set up and run the project locally.

Prerequisites

Ensure you have the following installed:

• Node.js (LTS version recommended)
• pnpm (preferred package manager) or npm

Installation

1. Clone the repository:

   git clone https://github.com/gitSambhal/chaicode-persona-ai-chat.git
   cd chaicode-persona-ai-chat

2. Install dependencies:

   pnpm install
   # or
   # npm install

Running the Application

1. Start the development server:

   pnpm dev
   # or
   # npm run dev

2. Open your browser and navigate to http://localhost:3000.

Environment Variables

To configure the chat API endpoint, create a .env.local file in the root of your project and add the following:

CHAT_API_URL=https://hwzkllqwncbx.ap-northeast-1.clawcloudrun.com/webhook/chaicode/chat

If CHAT_API_URL is not provided, the application will use a default API endpoint.

API Request and Response Example

If you wish to implement your own backend API for the chat functionality, it should adhere to the following request and response formats.

Request Example

The frontend sends a POST request to the CHAT_API_URL with a JSON body:

[
  {
    "sessionId": "7ed7e44c0c994ec3bb1f9461e5c93378",
    "action": "sendMessage",
    "chatInput": "Hello, how are you?",
    "persona": "hitesh"
  }
]

Response Example

The backend should respond with a JSON body containing the AI's message:

{
  "output": "Haan ji, kaise hain aap?"
}

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

MIT License # Add a LICENSE file if not present