mr-chat-bird 1.0.0

package/src/components/EmojiPickerPopover/EmojiPickerPopover.tsx

@@ -0,0 +1,72 @@
+import {
+  useState,
+  lazy,
+  Suspense,
+  cloneElement,
+  MouseEventHandler,
+  ReactElement,
+} from "react";
+import { Popover, Skeleton } from "@mantine/core";
+import data from "@emoji-mart/data";
+const EmojiPicker = lazy(() => import("@emoji-mart/react"));
+
+type EmojiPickerPopoverProps = {
+  onSelect: (emoji: string) => void;
+  action: ReactElement<{ onClick?: MouseEventHandler<any> }>;
+  size?: number;
+  offset?: number;
+  position?: "bottom" | "top" | "left" | "right" | "bottom-start" | "top-end";
+};
+
+export default function EmojiPickerPopover({
+  onSelect,
+  action,
+  size = 320,
+  offset = 8,
+  position = "bottom-start",
+}: EmojiPickerPopoverProps) {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      width={size}
+      position={position}
+      offset={offset}
+      withArrow
+      shadow="md"
+      trapFocus={false}
+      closeOnEscape
+    >
+      <Popover.Target>
+        {cloneElement(action, {
+          onClick: (e) => {
+            action.props?.onClick?.(e);
+            setOpened((prev) => !prev);
+          },
+        })}
+      </Popover.Target>
+
+      <Popover.Dropdown p={0}>
+        <Suspense
+          fallback={
+            <div style={{ padding: 12, width: 320 }}>
+              <Skeleton height={280} radius="md" />
+            </div>
+          }
+        >
+          <EmojiPicker
+            previewPosition={"none"}
+            theme="light"
+            data={data}
+            onEmojiSelect={(emoji: any) => {
+              onSelect(emoji.native);
+              setOpened(false);
+            }}
+          />
+        </Suspense>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

package/src/components/MrChat/index.tsx

@@ -0,0 +1,34 @@
+// app/components/MrChat.tsx
+"use client";
+
+import "@mantine/core/styles.css";
+import "@mantine/tiptap/styles.css";
+import "@mantine/notifications/styles.css";
+
+import { useState } from "react";
+import { MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import { createAppTheme } from "../../theme";
+import { ReduxProvider } from "../../store/provider";
+import { SocketProvider } from "../../store/socket";
+import { ChatUserList } from "../../components/ChatUserList/ChatUserList";
+
+
+export default function MrChat(props: any) {
+  const [primaryColor] = useState<
+    "customBrand" | "emerald" | "ruby" | "sunset" | "ocean"
+  >("customBrand");
+
+  const theme = createAppTheme(primaryColor);
+
+  return (
+    <ReduxProvider>
+      <SocketProvider>
+        <MantineProvider defaultColorScheme="light" theme={theme}>
+          <Notifications />
+          <ChatUserList {...props} />
+        </MantineProvider>
+      </SocketProvider>
+    </ReduxProvider>
+  );
+}

package/src/components/RichTextEditor/DropzoneMenuItem.tsx

@@ -0,0 +1,33 @@
+import { Menu } from "@mantine/core";
+import { ReactNode } from "react";
+import { useDropzone } from "react-dropzone";
+import classes from "./RichTextEditor.module.css";
+
+export function DropzoneMenuItem({
+  label,
+  icon,
+  accept,
+  onDrop,
+}: {
+  label: string;
+  icon: ReactNode;
+  accept?: string;
+  onDrop: (file: File) => void;
+}) {
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: accept ? { [accept]: [] } : undefined,
+    multiple: false,
+    onDropAccepted: (files) => {
+      if (files.length > 0) onDrop(files[0]);
+    },
+  });
+
+  return (
+    <div {...getRootProps()} style={{ outline: "none" }}>
+      <input {...getInputProps()} />
+      <Menu.Item leftSection={icon} className={classes.mainAddLabels}>
+        {label}
+      </Menu.Item>
+    </div>
+  );
+}

package/src/components/RichTextEditor/EmojiNode.tsx

@@ -0,0 +1,36 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+export const EmojiNode = Node.create({
+  name: "emoji",
+  inline: true,
+  group: "inline",
+  selectable: false,
+  atom: true,
+
+  addAttributes() {
+    return {
+      emoji: {
+        default: "😀",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-emoji]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        class: "emoji-big",
+        "data-emoji": HTMLAttributes.emoji,
+      }),
+      HTMLAttributes.emoji,
+    ];
+  },
+});

package/src/components/RichTextEditor/RichTextEditor.module.css

@@ -0,0 +1,95 @@
+.richTextEditorContainer {
+  position: relative;
+  border-radius: 16px;
+}
+
+.richTextEditorContainer :global(.mantine-RichTextEditor-toolbar) {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin-bottom: 4px;
+  margin-left: 3px;
+  gap: 0.5rem;
+}
+
+.richTextEditorContainer :global(.emoji-big) {
+  font-size: 18px;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.richTextEditorContainer :global(.mantine-RichTextEditor-Typography) {
+  font-size: 15px;
+}
+
+.richTextEditorContainer :global(.mantine-RichTextEditor-Typography),
+.richTextEditorContainer :global(.mantine-RichTextEditor-content) {
+  border-radius: 16px;
+  min-height: 41px;
+  max-height: 200px;
+  overflow: scroll;
+}
+
+.richTextEditorContainer :global(.ProseMirror) {
+  padding: 12px 16px 4px;
+}
+
+.mainActionContainer {
+  height: 24px;
+  margin-bottom: 4px;
+}
+
+.mainActionAddIcon {
+  margin-left: 3px;
+}
+
+.mainActionEmojiIcon {
+  margin: 0 4px 0 3px;
+}
+
+.mainActionEmojiIcon svg {
+  padding: 2.3px;
+}
+
+.mainActionAddIcon svg,
+.mainTextFormatIcon svg,
+.mainActionEmojiIcon svg {
+  fill: #495057;
+}
+
+.mainTextFormatIcon svg {
+  position: relative;
+  top: 1.2px;
+}
+
+.mainSendMsgIcon {
+  position: absolute;
+  right: 6px;
+}
+
+.customToolActionItem {
+  background-color: var(--mantine-color-white);
+  border-color: var(--mantine-color-gray-4);
+  color: var(--mantine-color-gray-7);
+  border-radius: 0px;
+  height: 26px;
+  min-height: 26px;
+  border-right: none;
+}
+
+.mainAddLabels {
+  font-size: 15px;
+  /* color: var(--mantine-color-customBrand-filled); */
+}
+
+.mainAddLabels :global(svg) {
+  width: 19px;
+  height: 19px;
+}
+
+@media (max-width: 950px) {
+  .secondRichTextEditorToolBar {
+    display: none;
+  }
+}

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,248 @@
+import { Suspense, lazy, useState } from "react";
+import {
+  IconSend,
+  IconTextSize,
+  IconAlignLeft,
+  IconAlignCenter,
+  IconAlignRight,
+  IconPhotoPlus,
+} from "@tabler/icons-react";
+import Highlight from "@tiptap/extension-highlight";
+import SubScript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
+import { useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Link, RichTextEditor } from "@mantine/tiptap";
+import { ActionIcon, Menu } from "@mantine/core";
+import EmojiPickerPopover from "../EmojiPickerPopover/EmojiPickerPopover";
+
+import AddIcon from "../../utils/icons/richText/Add.svg";
+import DocsIcon from "../../utils/icons/richText/Docs.svg";
+import TextFormatIcon from "../../utils/icons/richText/TextFormat.svg";
+import AddReactionIcon from "../../utils/icons/richText/AddReaction.svg";
+
+import classes from "./RichTextEditor.module.css";
+import { EmojiNode } from "./EmojiNode";
+import { DropzoneMenuItem } from "./DropzoneMenuItem";
+
+export default function CustomRichTextEditor({
+  content = "",
+  maxLength = 3000,
+  onChange,
+  onSubmit,
+}: {
+  content?: string;
+  maxLength?: number;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+}) {
+  const [charCount, setCharCount] = useState(0);
+  const [showWarning, setShowWarning] = useState(false);
+  const [showToolbar, setShowToolbar] = useState(false);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      EmojiNode,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+    ],
+    content,
+    onUpdate: ({ editor }) => {
+      const text = editor.getText();
+      setCharCount(text.length);
+
+      if (maxLength && text.length >= maxLength) {
+        setShowWarning(true);
+      } else {
+        setShowWarning(false);
+      }
+
+      if (onChange) onChange(editor.getHTML());
+    },
+    immediatelyRender: false,
+  });
+
+  const handleSubmitMsg = () => {
+    if (!editor) return;
+
+    const message = editor.getHTML();
+
+    if (!editor.getText().trim()) return;
+
+    onSubmit?.(message);
+
+    editor.commands.clearContent();
+    editor.commands.focus();
+    setCharCount(0);
+  };
+
+  return (
+    <>
+      <RichTextEditor
+        editor={editor}
+        w="100%"
+        className={classes.richTextEditorContainer}
+      >
+        <RichTextEditor.Content />
+
+        <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+          <div className={classes.mainActionContainer}>
+            {/* <Menu shadow="md" width={160} position="bottom-start" offset={8}>
+              <Menu.Target>
+                <ActionIcon
+                  radius="lg"
+                  variant="subtle"
+                  aria-label="add"
+                  color="#333"
+                  className={classes.mainActionAddIcon}
+                >
+                  <AddIcon />
+                </ActionIcon>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <DropzoneMenuItem
+                  label="Document"
+                  icon={<DocsIcon />}
+                  onDrop={(file) => console.log("Document:", file)}
+                />
+                <DropzoneMenuItem
+                  label="Image"
+                  icon={<IconPhotoPlus stroke={1.5} className={classes.mainAddImageIcon} />}
+                  accept="image/*"
+                  onDrop={(file) => console.log("Photo:", file)}
+                />
+              </Menu.Dropdown>
+            </Menu> */}
+
+            <EmojiPickerPopover
+              onSelect={(emoji) => {
+                editor
+                  ?.chain()
+                  .focus()
+                  .insertContent({
+                    type: "emoji",
+                    attrs: {
+                      emoji,
+                    },
+                  })
+                  .run();
+              }}
+              action={
+                <ActionIcon
+                  radius="lg"
+                  variant="subtle"
+                  aria-label="add"
+                  color="#333"
+                  className={classes.mainActionEmojiIcon}
+                >
+                  <AddReactionIcon />
+                </ActionIcon>
+              }
+            />
+            <ActionIcon
+              radius="lg"
+              variant="subtle"
+              aria-label="text_format"
+              color="#333"
+              className={classes.mainTextFormatIcon}
+              onClick={() => setShowToolbar((prev) => !prev)}
+            >
+              <TextFormatIcon />
+            </ActionIcon>
+            <ActionIcon
+              radius="lg"
+              variant="filled"
+              aria-label="send"
+              className={classes.mainSendMsgIcon}
+              onClick={() => handleSubmitMsg()}
+            >
+              <IconSend size={18} />
+            </ActionIcon>
+          </div>
+          {showToolbar && (
+            <>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.Code />
+                <RichTextEditor.Highlight />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup
+                className={classes.secondRichTextEditorToolBar}
+              >
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <Menu trigger="hover" openDelay={200}>
+                  <Menu.Target>
+                    <ActionIcon
+                      variant="outline"
+                      size="md"
+                      color="#495057"
+                      className={classes.customToolActionItem}
+                    >
+                      <IconAlignLeft size={16} stroke={1.5} />
+                    </ActionIcon>
+                  </Menu.Target>
+
+                  <Menu.Dropdown>
+                    <Menu.Item
+                      onClick={() =>
+                        editor?.chain().focus().setTextAlign("left").run()
+                      }
+                    >
+                      <IconAlignLeft size={14} />
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={() =>
+                        editor?.chain().focus().setTextAlign("center").run()
+                      }
+                    >
+                      <IconAlignCenter size={14} />
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={() =>
+                        editor?.chain().focus().setTextAlign("right").run()
+                      }
+                    >
+                      <IconAlignRight size={14} />
+                    </Menu.Item>
+                  </Menu.Dropdown>
+                </Menu>
+                <RichTextEditor.Link />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup
+                className={classes.secondRichTextEditorToolBar}
+              >
+                <RichTextEditor.ClearFormatting />
+              </RichTextEditor.ControlsGroup>
+            </>
+          )}
+        </RichTextEditor.Toolbar>
+        {showWarning && (
+          <div
+            style={{
+              textAlign: "right",
+              color: "red",
+              fontSize: 12,
+              marginTop: 4,
+            }}
+          >
+            Character limit reached ({charCount}/{maxLength})
+          </div>
+        )}
+      </RichTextEditor>
+    </>
+  );
+}

package/src/components/UserProfile/UserProfileDrawer.module.css

@@ -0,0 +1,120 @@
+/* Overlay */
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 50;
+}
+
+/* Drawer */
+.drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  max-width: 400px;
+  height: 100%;
+  background: #fff;
+
+  display: flex;
+  flex-direction: column;
+}
+
+/* Animations */
+.open {
+  animation: slideIn 0.25s ease forwards;
+}
+
+.close {
+  animation: slideOut 0.25s ease forwards;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* Header */
+.header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 0 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.backBtn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+/* Profile */
+.profileSection {
+  padding: 30px 20px;
+  border-bottom: 1px solid #f0f0f0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Actions */
+.actions {
+  padding: 10px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.item:hover {
+  background: #f5f5f5;
+}
+
+/* RED actions */
+.itemDanger {
+  color: #fa5252;
+}
+
+.itemDanger:hover {
+  background: rgba(250, 82, 82, 0.1);
+}
+
+/* Image Preview */
+.imagePreview {
+  position: fixed;
+  inset: 0;
+  background: black;
+  z-index: 100;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imagePreview img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 12px;
+}