A modern AI assistant application built with React, Vite, and Tailwind CSS. This application features a complete chat interface with multi-chat support, file attachments, AI model selection, deep research tools, and API key management.
- ✅ Multi-chat support with unlimited conversations
- ✅ Rename chats with double-click or edit button
- ✅ Delete individual chats
- ✅ Clear all history with confirmation
- ✅ Auto-save chat history using localStorage
- ✅ Automatic chat titles from first message
- ✅ Upload various file types:
- 📷 Images (JPG, PNG, GIF)
- 📄 Documents (PDF, DOC, TXT)
- 🎬 Videos (MP4, MOV, AVI)
- 🎵 Audio (MP3, WAV, OGG)
- 📁 Other files (All types)
- ✅ Multi-file upload
- ✅ File preview with icons and sizes
- ✅ Remove attached files before sending
- ✅ 6 Chat Modes:
- 📝 General Mode - General conversation
- 💻 Coding Mode - Programming focused
- ✍️ Writing Mode - Creative writing and content
- 🔍 Research Mode - Academic research
- 🌍 Translation Mode - Language translation
- 📊 Analysis Mode - Data analysis
- ✅ 12 AI Models:
- GPT-4 (OpenAI)
- GPT-3.5 Turbo (OpenAI)
- Claude 3 (Anthropic)
- Claude 2 (Anthropic)
- Gemini Pro (Google)
- Llama 2 (Meta)
- Mistral 7B (Mistral AI)
- Mixtral 8x7B (Mistral AI)
- PaLM 2 (Google)
- Llama 3 (Meta)
- Command R (Cohere)
- Command R+ (Cohere)
- ✅ Research Assistant - Advanced query tool
- ✅ Data Analysis - Research data processing
- ✅ Knowledge Base - Information repository
- ✅ Ideas Generator - Creative brainstorming
- ✅ Store up to 10 API keys
- ✅ Support for multiple providers (OpenAI, Anthropic, Google, etc)
- ✅ API key masking for security
- ✅ Add/Delete API keys
- ✅ Display creation date
- ✅ Theme selector (Dark/Light/Auto)
- ✅ Font size adjustment (Small/Medium/Large)
- ✅ Stream response toggle
- ✅ Sound effects toggle
Make sure you have installed:
- Node.js (v14 or newer)
- npm or yarn
- Clone Repository
git clone https://github.com/yourusername/daxx-ai.git
cd daxx-ai- Install Dependencies
npm install
# or
yarn install- Run the Development Server
npm run dev
# or
yarn devThe application will be available at http://localhost:5173
daxx-ai/
├── src/
│ ├── components/
│ │ ├── modals/
│ │ │ ├── ApiKeysModal.jsx
│ │ │ └── SettingsModal.jsx
│ │ ├── Sidebar.jsx
│ │ ├── ChatArea.jsx
│ │ └── ChatInterface.jsx
│ ├── context/
│ │ └── ChatContext.jsx
│ ├── hooks/
│ │ └── useAttachedFiles.js
│ ├── utils/
│ │ └── helpers.js
│ ├── styles/
│ │ └── index.css
│ ├── App.jsx
│ └── main.jsx
├── public/
│ └── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
└── README.md
| Technology | Version | Description |
|---|---|---|
| React | 18.x | UI Framework |
| Vite | 4.x | Build Tool |
| Tailwind CSS | 3.x | Utility-first CSS |
| Lucide React | Latest | Icon library |
| React Hooks | - | State & Effect management |
- Click the "New Chat" button in the left sidebar
- A new chat opens automatically with the title "New Chat"
- Type your message in the input box
- Press Enter or click the Send button (
✈️ ) - DAXX will respond in 1 second (simulation)
- Click the Paperclip icon (📎)
- Choose the file type you want to upload
- Files will appear above the input box
- Click X to remove files
- Click the mode dropdown (📝 General by default)
- Select the desired mode
- Icon and color will change according to mode
- Click the model dropdown below the input (default: GPT-4)
- Choose from 12 available AI models
- Active model is marked with a checkmark ✓
- Click "Research Assistant" in the sidebar
- Enter your research query
- Select data sources and analysis tools
- Click "API Keys" in the bottom sidebar
- Enter provider name and API key
- Click "Add API Key"
- Maximum of 10 keys
- Click the 3 dots (⋮) next to "New Chat"
- Select "Clear History"
- Confirm deletion
- Click "Settings" in the bottom sidebar
- Adjust theme, font size, and other preferences
- Click "Save Settings"
Edit in tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
primary: '#yourcolor',
}
}
}
}Edit the aiModels array in ChatInterface.jsx:
const aiModels = [
{
id: 'new-model',
name: 'Model Name',
provider: 'Provider',
description: 'Description'
}
];Edit the modes array in ChatInterface.jsx:
const modes = [
{
id: 'new-mode',
name: 'Mode Name',
icon: IconComponent,
color: 'color-class'
}
];Replace the handleSend() function in ChatInterface.jsx:
const handleSend = async () => {
// ... existing code
const response = await fetch('YOUR_API_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({ message: input })
});
const data = await response.json();
// Handle response
};- Markdown support for AI messages
- Code syntax highlighting
- Export chat to PDF/TXT
- Search in chat history
- Voice input
- Image generation integration
- Multi-language support
- Dark/Light theme auto-switch
- Keyboard shortcuts
- Chat folders/categories
- File Upload - Currently only simulation, files are not actually uploaded
- AI Response - Still using dummy/simulation responses
- API Keys - Not persistently stored (lost on reload)
- Settings - No persistence storage yet
Contributions are welcome! Please:
- Fork this repository
- Create a new branch (
git checkout -b feature/AmazingFeature) - Commit changes (
git commit -m 'Add some AmazingFeature') - Push to branch (
git push origin feature/AmazingFeature) - Create a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Rasya Andrean
- GitHub: @rasyaandrean
- Email: rasyaandrean@outlook.co.id
- React
- Vite
- Tailwind CSS
- Lucide Icons
- OpenAI - Inspiration
- Anthropic
If you have questions or issues:
- 🐛 Report Bug
- 💡 Request Feature
- 📧 Email: rasyaandrean@outlook.co.id
⭐ Don't forget to give a star if this project helps you!
Made with ❤️ by [Rasya Andrean]