{"id":30780681,"url":"https://github.com/sahedulislamrony/ai-chat-app-ui","last_synced_at":"2026-05-01T12:33:22.488Z","repository":{"id":312159839,"uuid":"1044486411","full_name":"sahedulislamrony/ai-chat-app-ui","owner":"sahedulislamrony","description":"A modern, responsive chat interface built with Next.js that demonstrates emotion-aware conversations between users and AI assistants. This project showcases advanced React patterns, TypeScript implementation, and modern UI/UX design principles.","archived":false,"fork":false,"pushed_at":"2025-09-01T11:53:51.000Z","size":201,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-14T06:38:45.921Z","etag":null,"topics":["emotion","nextjs15","prompt-kit","reactjs","shadcn","talwindcss"],"latest_commit_sha":null,"homepage":"https://smartgpt-ai-sahed.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sahedulislamrony.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-25T18:55:58.000Z","updated_at":"2025-09-17T12:12:43.000Z","dependencies_parsed_at":"2025-08-29T02:53:00.460Z","dependency_job_id":"5e762762-0001-45ca-bcc2-f68ea3b988ca","html_url":"https://github.com/sahedulislamrony/ai-chat-app-ui","commit_stats":null,"previous_names":["sahedulislamrony/nextjs-assessment","sahedulislamrony/ai-chat-app-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sahedulislamrony/ai-chat-app-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahedulislamrony%2Fai-chat-app-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahedulislamrony%2Fai-chat-app-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahedulislamrony%2Fai-chat-app-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahedulislamrony%2Fai-chat-app-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sahedulislamrony","download_url":"https://codeload.github.com/sahedulislamrony/ai-chat-app-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sahedulislamrony%2Fai-chat-app-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32497812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emotion","nextjs15","prompt-kit","reactjs","shadcn","talwindcss"],"created_at":"2025-09-05T08:00:55.027Z","updated_at":"2026-05-01T12:33:22.444Z","avatar_url":"https://github.com/sahedulislamrony.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Chat Interface\n\nA modern, responsive chat interface built with Next.js that demonstrates emotion-aware conversations between users and AI assistants. This project showcases advanced React patterns, TypeScript implementation, and modern UI/UX design principles.\n\n## Project Description\n\nThis application features an interactive chat interface that displays conversations with emotional context visualization. Each message includes emotion labels with confidence scores, providing insight into the emotional tone of the conversation. The interface includes a clean, modern design with dark/light theme support and responsive layout.\n\n### Key Features\n\n- **Emotion-Aware Chat**: Messages display emotional context with confidence levels\n- **Responsive Design**: Optimized for desktop, tablet, and mobile devices\n- **Modern UI Components**: Built with Tailwind CSS and Shadcn UI\n- **TypeScript Support**: Full type safety throughout the application\n- **Code Syntax Highlighting**: Integrated Shiki for beautiful code blocks\n- **Markdown Support**: Rich text rendering with react-markdown\n- **Theme Support**: Dark/light mode toggle capability\n\n## Prerequisites\n\nBefore you begin, ensure you have the following installed on your system:\n\n- **Node.js** (version 18.17 or higher)\n- **npm** (comes with Node.js) or **yarn** or **pnpm** or **bun**\n- **Git** (for cloning the repository)\n\n## Installation Instructions\n\n### Step 1: Clone the Repository\n\n```bash\ngit clone https://github.com/sahedulislamrony/nextjs-assessment.git\ncd nextjs-assessment\n```\n\n### Step 2: Install Dependencies\n\nChoose one of the following package managers:\n\n#### Using npm:\n\n```bash\nnpm install\n```\n\n#### Using yarn:\n\n```bash\nyarn install\n```\n\n#### Using pnpm:\n\n```bash\npnpm install\n```\n\n#### Using bun:\n\n```bash\nbun install\n```\n\n### Step 3: Environment Setup\n\nThis project doesn't require any environment variables for basic functionality. All configurations are handled through the existing config files.\n\n## Running the Project Locally\n\n### Development Mode\n\nTo start the development server with hot-reload:\n\n```bash\nnpm run dev\n```\n\nOr with your preferred package manager:\n\n```bash\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nThe application will be available at [http://localhost:3000](http://localhost:3000)\n\n### Production Build\n\nTo create an optimized production build:\n\n```bash\nnpm run build\nnpm run start\n```\n\n### Linting\n\nTo run ESLint for code quality checks:\n\n```bash\nnpm run lint\n```\n\n## Technology Stack\n\n### Core Technologies\n\n- **[Next.js 15.5.0](https://nextjs.org/)** - React framework with App Router\n- **[React 19.1.0](https://reactjs.org/)** - JavaScript library for building user interfaces\n- **[TypeScript 5.x](https://www.typescriptlang.org/)** - Type-safe JavaScript\n\n### Styling \u0026 UI\n\n- **[Tailwind CSS 4.x](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[Shadcn/UI](https://ui.shadcn.com/)** - Re-usable components built with Radix UI and Tailwind CSS\n- **[Lucide React](https://lucide.dev/)** - Beautiful \u0026 consistent icon pack\n- **[prompt-kit](https://www.prompt-kit.com/)** - A set of customizable, high-quality components built for AI applications\n\n### Development Tools\n\n- **[ESLint](https://eslint.org/)** - JavaScript linting utility\n- **[PostCSS](https://postcss.org/)** - CSS transformation tool\n- **[Turbopack](https://turbo.build/pack)** - Fast bundler for development\n\n## Project Structure\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── layout.tsx         # Root layout component\n│   ├── page.tsx           # Home page\n│   └── favicon.ico        # App icon\n├── components/            # Reusable React components\n│   ├── chat/              # Chat-related components\n│   │   ├── ChatContainer.tsx\n│   │   ├── ChatWindow.tsx\n│   │   ├── ChatInputBox.tsx\n│   │   └── UserMessage.tsx\n│   ├── main-window/       # Layout components\n│   │   ├── Header.tsx\n│   │   ├── Sidebar.tsx\n│   │   └── MainHomeLayout.tsx\n│   └── ui/                # Reusable UI components\n├── data/                  # Static data and constants\n│   └── static_messages.ts # Sample chat messages\n├── hooks/                 # Custom React hooks\n│   └── use-mobile.ts      # Mobile detection hook\n├── lib/                   # Utility functions\n│   └── utils.ts           # Common utilities\n├── styles/                # Global styles\n│   └── globals.css        # Global CSS\n└── types/                 # TypeScript type definitions\n    └── chat.ts            # Chat-related types\n```\n\n## Additional Setup Requirements\n\n### Code Editor Setup (Recommended)\n\nFor the best development experience, we recommend using **Visual Studio Code** with the following extensions:\n\n- **ES7+ React/Redux/React-Native snippets**\n- **Tailwind CSS IntelliSense**\n- **TypeScript Importer**\n- **Prettier - Code formatter**\n- **ESLint**\n\n### Browser Requirements\n\nThis application supports all modern browsers:\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Configuration Files\n\n- `next.config.ts` - Next.js configuration\n- `tailwind.config.js` - Tailwind CSS configuration\n- `tsconfig.json` - TypeScript configuration\n- `eslint.config.mjs` - ESLint configuration\n- `postcss.config.mjs` - PostCSS configuration\n- `components.json` - Shadcn/ui components configuration\n- `.vscode/settings.json` - VS Code IDE configuration\n\n## Deployment\n\n### Deploy on Vercel (Recommended)\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme):\n\n1. Push your code to GitHub\n2. Import your repository on Vercel\n3. Deploy with zero configuration\n\n### Other Deployment Options\n\n- **Netlify**: Connect your GitHub repository\n- **Docker**: Use the provided Dockerfile (if available)\n- **Static Export**: Configure Next.js for static export\n\n## Learn More\n\nTo learn more about the technologies used in this project:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API\n- [React Documentation](https://react.dev/) - learn React fundamentals\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - utility-first CSS framework\n- [TypeScript Documentation](https://www.typescriptlang.org/docs/) - typed JavaScript\n\n---\n\n## Author\n\n**Sahedul Islam Rony**\n\n- GitHub: [@sahedulislamrony](https://github.com/sahedulislamrony)\n- Email: sahedul.dev@gmail.com\n- LinkedIn: [Sahedul Islam Rony](https://linkedin.com/in/sahedulislamrony)\n\n---\n\n**Happy Coding!** 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahedulislamrony%2Fai-chat-app-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsahedulislamrony%2Fai-chat-app-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsahedulislamrony%2Fai-chat-app-ui/lists"}