mr-chat-bird 1.0.0

package/eslint.config.mjs

@@ -0,0 +1,11 @@
+import mantine from 'eslint-config-mantine';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  ...mantine,
+  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] },
+  {
+    files: ['**/*.story.tsx'],
+    rules: { 'no-console': 'off' },
+  }
+);

package/index.ts

@@ -0,0 +1 @@
+export { default as MrChat } from "./src/components/MrChat";

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/next.config.mjs

@@ -0,0 +1,30 @@
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+export default withBundleAnalyzer({
+  reactStrictMode: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            exportType: 'default',
+          },
+        },
+      ],
+    });
+    return config;
+  },
+});

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "mr-chat-bird",
+  "version": "1.0.0",
+  "private": false,
+  "main": "index.js",
+  "scripts": {
+    "build:npm": "tsup index.ts --format esm,cjs --dts",
+    "dev": "next dev",
+    "build": "next build",
+    "analyze": "ANALYZE=true next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "@mantine/core": "^8.1.3",
+    "@mantine/hooks": "^8.1.3",
+    "@mantine/notifications": "^8.2.1",
+    "@mantine/tiptap": "^8.1.3",
+    "@next/bundle-analyzer": "^15.3.3",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@tabler/icons-react": "^3.34.0",
+    "@tiptap/extension-highlight": "^3.0.7",
+    "@tiptap/extension-link": "^3.0.7",
+    "@tiptap/extension-placeholder": "^3.0.7",
+    "@tiptap/extension-subscript": "^3.0.7",
+    "@tiptap/extension-superscript": "^3.0.7",
+    "@tiptap/extension-text-align": "^3.0.7",
+    "@tiptap/pm": "^3.0.7",
+    "@tiptap/react": "^3.0.7",
+    "@tiptap/starter-kit": "^3.0.7",
+    "axios": "^1.10.0",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.3.3",
+    "emoji-mart": "^5.6.0",
+    "emoji-picker-react": "^4.13.2",
+    "next": "15.3.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-redux": "^9.2.0",
+    "react-virtuoso": "^4.18.3",
+    "socket.io-client": "^4.8.1",
+    "tsup": "^8.5.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.4",
+    "@eslint/js": "^9.29.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@svgr/webpack": "^8.1.0",
+    "@swc/core": "^1.15.40",
+    "@types/eslint-plugin-jsx-a11y": "^6",
+    "@types/node": "^22.13.11",
+    "@types/react": "19.1.8",
+    "babel-loader": "^10.0.0",
+    "eslint": "^9.29.0",
+    "eslint-config-mantine": "^4.0.3",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "postcss": "^8.5.5",
+    "postcss-preset-mantine": "1.17.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.5.3",
+    "stylelint": "^16.20.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.34.0"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

package/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g fill="none" fill-rule="evenodd"><rect width="500" height="500" fill="#339AF0" rx="250"/><g fill="#FFF"><path fill-rule="nonzero" d="M202.055 135.706c-6.26 8.373-4.494 20.208 3.944 26.42 29.122 21.45 45.824 54.253 45.824 90.005 0 35.752-16.702 68.559-45.824 90.005-8.436 6.215-10.206 18.043-3.944 26.42 6.26 8.378 18.173 10.13 26.611 3.916a153.835 153.835 0 0024.509-22.54h53.93c10.506 0 19.023-8.455 19.023-18.885 0-10.43-8.517-18.886-19.023-18.886h-29.79c8.196-18.594 12.553-38.923 12.553-60.03s-4.357-41.436-12.552-60.03h29.79c10.505 0 19.022-8.455 19.022-18.885 0-10.43-8.517-18.886-19.023-18.886h-53.93a153.835 153.835 0 00-24.509-22.54c-8.438-6.215-20.351-4.46-26.61 3.916z"/><path d="M171.992 246.492c0-15.572 12.624-28.195 28.196-28.195 15.572 0 28.195 12.623 28.195 28.195 0 15.572-12.623 28.196-28.195 28.196-15.572 0-28.196-12.624-28.196-28.196z"/></g></g></svg>

package/src/components/ChatUserList/ChatUserList.module.css

@@ -0,0 +1,253 @@
+.chatWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  background: #f1f3f5;
+}
+
+.chatContainer {
+  display: flex;
+  width: 100%;
+  max-width: 1260px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  border-right: 1px solid #eee;
+  background-color: #fff;
+  padding-top: 12px;
+}
+
+@media (max-width: 760px) {
+  .sidebar {
+    width: 180px;
+  }
+}
+
+.sidebarTop {
+  padding: 0 12px;
+}
+
+.topBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* padding-bottom: 12px; */
+}
+
+.topActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.scrollWrapper {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.scrollArea {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.scrollArea :global(.mantine-ScrollArea-content) {
+  padding-bottom: 60px;
+}
+
+.avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.mainArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.messageArea {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  padding-bottom: 10px;
+}
+
+.messageBubble {
+  max-width: fit-content;
+  padding: 8px 45px 8px 16px;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.outgoing {
+  color: white;
+  background-color: #366ca4;
+  margin-left: auto;
+}
+
+.incoming {
+  background-color: #eeeeee;
+  margin-right: auto;
+}
+
+.inputBar {
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  padding: 0px 16px 16px;
+}
+
+/* @media (max-width: 760px) {
+  .mainArea {
+    display: none;
+  }
+} */
+
+.chatItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin: 2px 4px;
+  border-radius: 6px;
+}
+
+.chatItem:hover {
+  background-color: #f6f6f6;
+}
+
+.chatLabelItem {
+  font-size: 15px;
+}
+
+.chatHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #eee;
+  background-color: #f8f9fa;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  min-height: 63px;
+}
+
+.receiverInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+}
+
+.emptyState {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.encryptionMinimal {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.04);
+  color: #666;
+  font-size: 12px;
+}
+
+.encryptionText {
+  font-size: 16px;
+  color: #666;
+  margin-left: 3px;
+}
+
+.messageContent {
+  max-width: 370px;
+  word-wrap: break-word;
+  font-size: 14px;
+}
+
+.messagePreviewContent p,
+.messageContent p {
+  margin: 0;
+  padding: 0;
+}
+
+.activeChatItem {
+  background-color: #eee;
+}
+
+.chatItem:hover {
+  background-color: #eee;
+}
+
+.messageTime {
+  font-size: 11px;
+  opacity: 0.6;
+  text-align: right;
+  margin-top: 4px;
+  position: absolute;
+  bottom: 4px;
+  right: 8px;
+  z-index: 1;
+}
+
+.dateSeparator {
+  text-align: center;
+  font-size: 13px;
+  margin: 12px 0;
+  color: #888;
+}
+
+.chatInfo {
+  width: 100%;
+  position: relative;
+}
+
+.messagePreview {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  margin-top: 1px;
+}
+
+.messagePreviewTime {
+  position: relative;
+  top: 1px;
+  right: 0;
+}
+
+.unreadBadge {
+  background: #366ca4;
+  color: white;
+  font-size: 10px;
+  border-radius: 50%;
+  padding: 3px 5px;
+  min-width: 18px;
+  text-align: center;
+  position: absolute;
+  top: 1px;
+  right: 0px;
+}
+
+.messagePreviewContent {
+  font-size: 14px;
+}