feat(chat): add native emoji pickers for chat input and reactions

2026-07-06 13:59:20 +00:00
parent 8bbe2a0ff0
commit 9512dedec1
4 changed files with 110 additions and 8 deletions
@@ -20,7 +20,8 @@ import { useContextMenu } from "./ContextMenu.tsx";
 import { PinnedMessages } from "./PinnedMessages.tsx";
 import { FeatureRequestsPanel } from "./FeatureRequestsPanel.tsx";
 import { ReactionBar } from "./ReactionBar.tsx";
-import { EmojiPicker } from "./EmojiPicker.tsx";
+import { EmojiPicker as KaomojiPicker } from "./EmojiPicker.tsx";
+import Picker, { Theme } from 'emoji-picker-react';
 import { FormatToolbar } from "./FormatToolbar.tsx";
 import { ReplyBar } from "./ReplyBar.tsx";
 import { useLayoutStore } from "../stores/layout.ts";
@@ -160,6 +161,8 @@ const MessageItem = memo(({
  currentUserId,
  activeReactionMessageId,
  setActiveReactionMessageId,
+  activeNativeReactionMessageId,
+  setActiveNativeReactionMessageId,
  members,
  parentMessage,
  onJumpToParent,
@@ -175,6 +178,8 @@ const MessageItem = memo(({
  currentUserId?: string;
  activeReactionMessageId: string | null;
  setActiveReactionMessageId: (id: string | null) => void;
+  activeNativeReactionMessageId: string | null;
+  setActiveNativeReactionMessageId: (id: string | null) => void;
  members: any[];
  parentMessage: any | null;
  onJumpToParent: (id: string) => void;
@@ -243,11 +248,22 @@ const MessageItem = memo(({

      {/* Kaomoji picker popover */}
      {activeReactionMessageId === message.id && (
-        <EmojiPicker
+        <KaomojiPicker
          onSelect={(emoji) => onAddReaction(message.id, emoji)}
          onClose={() => setActiveReactionMessageId(null)}
        />
      )}
+      {activeNativeReactionMessageId === message.id && (
+        <div className="absolute z-50">
+          <Picker
+            theme={Theme.DARK}
+            onEmojiClick={(emoji) => {
+              onAddReaction(message.id, emoji.emoji);
+              setActiveNativeReactionMessageId(null);
+            }}
+          />
+        </div>
+      )}
    </div>
  );
 });
@@ -274,6 +290,7 @@ export function ChatArea() {
  const [error, setError] = useState<string | null>(null);
  const [showGifPicker, setShowGifPicker] = useState(false);
  const [showKaomoji, setShowKaomoji] = useState(false);
+  const [showNativeEmoji, setShowNativeEmoji] = useState(false);
  const [showSearch, setShowSearch] = useState(false);
  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
  const [commandQuery, setCommandQuery] = useState<string | null>(null);
@@ -313,6 +330,7 @@ export function ChatArea() {
  const [showPinned, setShowPinned] = useState(false);
  const [showFeatureRequests, setShowFeatureRequests] = useState(false);
  const [activeReactionMessageId, setActiveReactionMessageId] = useState<string | null>(null);
+  const [activeNativeReactionMessageId, setActiveNativeReactionMessageId] = useState<string | null>(null);
  const [replyToMessage, setReplyToMessage] = useState<any | null>(null);
  const pinMessage = useMessageStore((s) => s.pinMessage);
  const unpinMessage = useMessageStore((s) => s.unpinMessage);
@@ -337,6 +355,7 @@ export function ChatArea() {
    try {
      await api.post(`/messages/${messageId}/reactions`, { emoji });
      setActiveReactionMessageId(null);
+      setActiveNativeReactionMessageId(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to add reaction");
    }
@@ -352,10 +371,18 @@ export function ChatArea() {
        }
      },
      {
-        label: "[ADD REACTION]",
+        label: "[ADD KAOMOJI REACTION]",
        onClick: () => {
          setActiveReactionMessageId(msg.id);
-        }
+          setActiveNativeReactionMessageId(null);
+        },
+      },
+      {
+        label: "[ADD EMOJI REACTION]",
+        onClick: () => {
+          setActiveNativeReactionMessageId(msg.id);
+          setActiveReactionMessageId(null);
+        },
      },
      {
        label: msg.pinned ? "[UNPIN MESSAGE]" : "[PIN MESSAGE]",
@@ -851,6 +878,8 @@ export function ChatArea() {
                    currentUserId={currentUser?.id}
                    activeReactionMessageId={activeReactionMessageId}
                    setActiveReactionMessageId={setActiveReactionMessageId}
+                    activeNativeReactionMessageId={activeNativeReactionMessageId}
+                    setActiveNativeReactionMessageId={setActiveNativeReactionMessageId}
                    members={members}
                    parentMessage={message.reply_to ? messages.find((m) => m.id === message.reply_to) : null}
                    onJumpToParent={handleJumpToMessage}
@@ -934,21 +963,45 @@ export function ChatArea() {
                >
                  [GIF]
                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowNativeEmoji((prev) => !prev);
+                    setShowKaomoji(false);
+                    setShowGifPicker(false);
+                  }}
+                  disabled={!activeChannelId || slowmodeRemaining > 0}
+                  className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+                  title="Toggle native emoji picker"
+                >
+                  [E]
+                </button>
                <button
                  type="button"
                  onClick={() => setShowKaomoji((prev) => !prev)}
-                  disabled={!activeChannelId}
+                  disabled={!activeChannelId || slowmodeRemaining > 0}
                  className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
                  title="Toggle kaomoji picker (Ctrl+E)"
                >
                  [☺]
                </button>
                {showKaomoji && (
-                  <EmojiPicker
+                  <KaomojiPicker
                    onSelect={(emoji) => setInput((prev) => prev + emoji)}
                    onClose={() => setShowKaomoji(false)}
                  />
                )}
+                {showNativeEmoji && (
+                  <div className="absolute bottom-full right-0 mb-2 z-50">
+                    <Picker
+                      theme={Theme.DARK}
+                      onEmojiClick={(emoji) => {
+                        setInput((prev) => prev + emoji.emoji);
+                        setShowNativeEmoji(false);
+                      }}
+                    />
+                  </div>
+                )}
              </form>
            </div>
            {activeThread && (
@@ -5,7 +5,8 @@ import { useAuthStore } from "../stores/auth.ts";
 import { useTypingStore } from "../stores/typing.ts";
 import { useLayoutStore } from "../stores/layout.ts";
 import { GiphyPicker, type Gif } from "./GiphyPicker.tsx";
-import { EmojiPicker } from "./EmojiPicker.tsx";
+import { EmojiPicker as KaomojiPicker } from "./EmojiPicker.tsx";
+import Picker, { Theme } from 'emoji-picker-react';
 import { FormatToolbar } from "./FormatToolbar.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -76,6 +77,7 @@ export function DMChat() {
  const [error, setError] = useState<string | null>(null);
  const [showGifPicker, setShowGifPicker] = useState(false);
  const [showKaomoji, setShowKaomoji] = useState(false);
+  const [showNativeEmoji, setShowNativeEmoji] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
@@ -282,6 +284,19 @@ export function DMChat() {
        >
          [GIF]
        </button>
+        <button
+          type="button"
+          onClick={() => {
+            setShowNativeEmoji((prev) => !prev);
+            setShowKaomoji(false);
+            setShowGifPicker(false);
+          }}
+          disabled={!id}
+          className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
+          title="Toggle native emoji picker"
+        >
+          [E]
+        </button>
        <button
          type="button"
          onClick={() => setShowKaomoji((prev) => !prev)}
@@ -292,11 +307,22 @@ export function DMChat() {
          [☺]
        </button>
        {showKaomoji && (
-          <EmojiPicker
+          <KaomojiPicker
            onSelect={(emoji) => setInput((prev) => prev + emoji)}
            onClose={() => setShowKaomoji(false)}
          />
        )}
+        {showNativeEmoji && (
+          <div className="absolute bottom-full right-0 mb-2 z-50">
+            <Picker
+              theme={Theme.DARK}
+              onEmojiClick={(emoji) => {
+                setInput((prev) => prev + emoji.emoji);
+                setShowNativeEmoji(false);
+              }}
+            />
+          </div>
+        )}
      </form>
    </div>
  );