From a521a29cad997238fab3fb27d4054b9c3eae4a61 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Sun, 13 Oct 2024 12:28:38 +0800
Subject: [PATCH] improve: seperate members and others in mention list

---
 .../components/chats/chat-mentioning.tsx        | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/enjoy/src/renderer/components/chats/chat-mentioning.tsx b/enjoy/src/renderer/components/chats/chat-mentioning.tsx
index 307006cf..88f7fc78 100644
--- a/enjoy/src/renderer/components/chats/chat-mentioning.tsx
+++ b/enjoy/src/renderer/components/chats/chat-mentioning.tsx
@@ -5,6 +5,7 @@ import {
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  Separator,
 } from "@renderer/components/ui";
 import { useContext, useEffect, useState } from "react";
 import { ChatAgentCard } from "@renderer/components";
@@ -35,7 +36,6 @@ export const ChatMentioning = (props: {
     EnjoyApp.chatAgents.findAll({}).then((chatAgents) => {
       // sort members to the front
       const sortedChatAgents = [
-        ...members,
         ...chatAgents.filter((ca) => !members.some((m) => m.id === ca.id)),
       ];
       setChatAgents(sortedChatAgents);
@@ -67,6 +67,21 @@ export const ChatMentioning = (props: {
         className="p-0 w-[var(--radix-popper-anchor-width)]"
       >
         <div className="w-full max-h-72 overflow-y-auto">
+          {members.map((member) => (
+            <ChatAgentCard
+              key={member.id}
+              chatAgent={member}
+              onSelect={() => {
+                if (mentioned.includes(member.id)) {
+                  onRemove(member);
+                } else {
+                  onMention(member);
+                }
+              }}
+              selected={mentioned.includes(member.id)}
+            />
+          ))}
+          <Separator />
           {chatAgents.map((chatAgent) => (
             <ChatAgentCard
               key={chatAgent.id}