update phần avatar, update phần create space

src/components/ChatArea.jsx

@@ -244,10 +244,15 @@ function ChatArea({ activeView, activeRoom }) {
   // Convert API messages to UI format
   const apiMessages = sortedDmMessages.map((msg) => {
     const isOwn = msg.sender_id === currentUser?.id;
-    const sender = isOwn ? "You" : (msg.sender?.display_name || "Unknown");
+    const sender = isOwn
+      ? (currentUser?.display_name || currentUser?.name || "Bạn")
+      : (msg.sender?.display_name || "Unknown");
     const avatar = isOwn
-      ? (currentUser?.name?.charAt(0).toUpperCase() || "Y")
+      ? (currentUser?.display_name?.charAt(0).toUpperCase() || currentUser?.name?.charAt(0).toUpperCase() || "B")
       : (msg.sender?.display_name?.charAt(0).toUpperCase() || "?");
+    const color = isOwn
+      ? (currentUser?.color || null)
+      : (msg.sender?.color || null);
 
     const date = new Date(msg.created_at);
     const timestamp = isNaN(date.getTime())
@@ -258,6 +263,7 @@ function ChatArea({ activeView, activeRoom }) {
       id: msg.id,
       sender,
       avatar,
+      color,
       timestamp,
       content: msg.content,
       isPinned: false,
@@ -323,8 +329,8 @@ function ChatArea({ activeView, activeRoom }) {
       const tempId = `temp-${Date.now()}`;
       const optimisticMsg = {
         id: tempId,
-        sender: "You",
-        avatar: currentUser?.name?.charAt(0).toUpperCase() || "Y",
+        sender: currentUser?.display_name || currentUser?.name || "Bạn",
+        avatar: currentUser?.display_name?.charAt(0).toUpperCase() || currentUser?.name?.charAt(0).toUpperCase() || "B",
         timestamp: new Date().toLocaleTimeString("vi-VN", {
           hour: "2-digit",
           minute: "2-digit",
@@ -357,7 +363,7 @@ function ChatArea({ activeView, activeRoom }) {
             created_at: optimisticMsg.created_at,
             sender: {
               id: currentUser?.id,
-              display_name: currentUser?.name || "You",
+              display_name: currentUser?.display_name || currentUser?.name || "Bạn",
               avatar_url: currentUser?.avatar || null,
             },
             pending: true,
@@ -458,9 +464,9 @@ function ChatArea({ activeView, activeRoom }) {
           dispatch(cancelReply());
         }}
         onShowProfile={(senderName) => {
-          if (isDM && dmUser && senderName !== "You") {
+          if (isDM && dmUser && senderName !== (currentUser?.display_name || currentUser?.name)) {
             dispatch(setSelectedUser(dmUser));
-          } else if (senderName !== "You") {
+          } else if (senderName !== (currentUser?.display_name || currentUser?.name)) {
             dispatch(
               setSelectedUser({
                 id: senderName.toLowerCase(),

src/components/chatarea/ChatHeader.jsx

@@ -31,7 +31,7 @@ function UserAvatar({ name, avatarUrl, isOnline, isDark, isBot, color }) {
   return (
     <div className="relative flex-shrink-0">
       <div
-        className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-semibold overflow-hidden"
+        className="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-semibold overflow-hidden"
         style={{
           background: userColor,
           color: textColor,

src/components/chatarea/ChatMessages.jsx

@@ -13,11 +13,11 @@ function ChatMessage({
   onShowProfile,
   isSending,
 }) {
-  const senderColor = getUserColor(msg.sender);
+  const senderColor = getUserColor(msg.sender, msg.color);
   const [showActions, setShowActions] = useState(false);
   const [reactions, setReactions] = useState(msg.reactions || []);
   const [showPicker, setShowPicker] = useState(false);
-  const isOwnMessage = msg.sender === "You";
+  const isOwnMessage = msg.isOwn;
 
   const handleAddReaction = (emoji) => {
     const existing = reactions.find((r) => r.emoji === emoji);
@@ -59,7 +59,7 @@ function ChatMessage({
       />
 
       <div
-        className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-semibold shrink-0 cursor-pointer"
+        className="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-semibold shrink-0 cursor-pointer"
         style={{
           background: msg.isBot ? "var(--tertiary-active)" : senderColor,
           color: msg.isBot
@@ -166,7 +166,7 @@ function TypingIndicator({ isDark }) {
   return (
     <div className="flex gap-3 px-3 py-2">
       <div
-        className="w-9 h-9 rounded-full flex items-center justify-center text-sm font-semibold shrink-0"
+        className="w-9 h-9 rounded-lg flex items-center justify-center text-sm font-semibold shrink-0"
         style={{
           background: "var(--tertiary-active)",
           color: "var(--tertiary)",
@@ -205,7 +205,7 @@ function MessageSkeleton({ isDark, width = "75%", showSecondLine = true }) {
   return (
     <div className="flex gap-3 px-3 py-3 animate-pulse">
       <div
-        className="w-9 h-9 rounded-full flex-shrink-0"
+        className="w-9 h-9 rounded-lg flex-shrink-0"
         style={{
           background: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)",
         }}
@@ -254,7 +254,7 @@ function EmptyChatState({ dmUser, isDark, hasNoSelection }) {
   return (
     <div className="flex flex-col items-center justify-center px-6 text-center">
       <div
-        className="w-20 h-20 rounded-full flex items-center justify-center mb-5"
+        className="w-20 h-20 rounded-lg flex items-center justify-center mb-5"
         style={{
           background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)",
         }}

src/components/chatarea/MentionSuggestions.jsx

@@ -85,7 +85,7 @@ function MentionSuggestions({
           onMouseEnter={() => setSelectedIndex(index)}
         >
           <div
-            className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0"
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-xs font-semibold flex-shrink-0"
             style={{
               background: user.isBot
                 ? "var(--tertiary-active)"

src/components/createspace/CreateSpace.jsx

@@ -43,7 +43,9 @@ import {
   PiFire,
   PiSnowflake,
 } from "react-icons/pi";
+import { FiSearch, FiX } from "react-icons/fi";
 import { cancelCreateSpace } from "../../store/slices/appSlice";
+import { dmService } from "../../services/dm.service";
 
 const spaceIcons = [
   { id: "graduation", icon: PiGraduationCap, label: "Tốt nghiệp" },
@@ -95,6 +97,64 @@ function CreateSpace() {
   const [spaceName, setSpaceName] = useState("");
   const [spaceIcon, setSpaceIcon] = useState(spaceIcons[0].id);
   const [spaceDescription, setSpaceDescription] = useState("");
+  
+  // Members state
+  const [members, setMembers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const searchTimeoutRef = useState(null);
+
+  // Search users - only trigger on Enter key
+  const handleSearch = async (query) => {
+    setSearchQuery(query);
+    
+    if (!query.trim()) {
+      setSearchResults([]);
+      setIsSearching(false);
+      return;
+    }
+  };
+
+  const handleSearchKeyDown = async (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const query = searchQuery.trim();
+      
+      if (!query) {
+        setSearchResults([]);
+        return;
+      }
+      
+      setIsSearching(true);
+      try {
+        const { data } = await dmService.searchUsers(query);
+        const users = (data.users || []).map((user) => ({
+          id: user.id,
+          name: user.display_name || user.email || "Unknown",
+          avatar: user.avatar_url || null,
+          email: user.email || "",
+        }));
+        setSearchResults(users);
+      } catch {
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }
+  };
+
+  // Add member
+  const addMember = (user) => {
+    if (!members.some((m) => m.id === user.id)) {
+      setMembers([...members, user]);
+    }
+  };
+
+  // Remove member
+  const removeMember = (userId) => {
+    setMembers((prev) => prev.filter((m) => m.id !== userId));
+  };
 
   const handleSubmit = () => {
     if (spaceName.trim()) {
@@ -106,6 +166,7 @@ function CreateSpace() {
         name: spaceName.trim(),
         icon: spaceIcon,
         description: spaceDescription.trim(),
+        members: members.map((m) => m.id),
         hasNotification: false,
       };
       console.log("Creating space:", newSpace);
@@ -241,6 +302,151 @@ function CreateSpace() {
             />
           </div>
 
+          {/* Members */}
+          <div>
+            <h3
+              className="text-sm font-semibold mb-3"
+              style={{ color: "var(--text-primary)" }}
+            >
+              Thêm thành viên
+            </h3>
+            
+            {/* Search input */}
+            <div className="relative mb-3">
+              {isSearching ? (
+                <div className="absolute left-3 top-1/2 -translate-y-1/2">
+                  <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                    style={{ borderColor: "var(--text-muted)", borderTopColor: "transparent" }}
+                  />
+                </div>
+              ) : (
+                <button
+                  onClick={() => handleSearchKeyDown({ key: 'Enter', preventDefault: () => {} })}
+                  className="absolute left-3 top-1/2 -translate-y-1/2 hover:opacity-70 transition-opacity"
+                  style={{ color: "var(--text-muted)" }}
+                >
+                  <FiSearch size={16} />
+                </button>
+              )}
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => handleSearch(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
+                placeholder="Nhập tên và nhấn Enter để tìm..."
+                className="w-full pl-9 pr-3 py-2 rounded-md text-sm border outline-none"
+                style={{
+                  background: "var(--input-bg)",
+                  borderColor: "var(--input-border)",
+                  color: "var(--input-text)",
+                }}
+                onFocus={(e) =>
+                  (e.currentTarget.style.borderColor = "var(--primary)")
+                }
+                onBlur={(e) =>
+                  (e.currentTarget.style.borderColor = "var(--input-border)")
+                }
+              />
+            </div>
+            
+            {/* Selected members - chips */}
+            {members.length > 0 && (
+              <div className="mb-3">
+                <div
+                  className="text-xs font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Đã chọn ({members.length})
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {members.map((member) => (
+                    <div
+                      key={member.id}
+                      className="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm"
+                      style={{
+                        background: "var(--primary-active)",
+                        color: "var(--primary)",
+                      }}
+                    >
+                      <div
+                        className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold"
+                        style={{
+                          background: "var(--primary)",
+                          color: "#fff",
+                        }}
+                      >
+                        {member.name?.charAt(0)?.toUpperCase() || "?"}
+                      </div>
+                      <span className="font-medium">{member.name}</span>
+                      <button
+                        onClick={() => removeMember(member.id)}
+                        className="ml-1 hover:opacity-70"
+                      >
+                        <FiX size={14} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {/* Search results with checkbox - keep showing after select */}
+            {searchResults.length > 0 && (
+              <div>
+                <div
+                  className="text-xs font-medium mb-2"
+                  style={{ color: "var(--text-secondary)" }}
+                >
+                  Kết quả tìm kiếm
+                </div>
+                <div className="space-y-1">
+                  {searchResults.map((user) => {
+                    const isSelected = members.some((m) => m.id === user.id);
+                    return (
+                      <label
+                        key={user.id}
+                        className="flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors hover:opacity-80"
+                      >
+                        <div
+                          className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold"
+                          style={{
+                            background: "var(--primary-active)",
+                            color: "var(--primary)",
+                          }}
+                        >
+                          {user.name?.charAt(0)?.toUpperCase() || "?"}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <div
+                            className="text-sm font-medium truncate"
+                            style={{ color: "var(--text-primary)" }}
+                          >
+                            {user.name}
+                          </div>
+                        </div>
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => {
+                            if (isSelected) {
+                              removeMember(user.id);
+                            } else {
+                              addMember(user);
+                            }
+                          }}
+                          className="w-4 h-4 cursor-pointer"
+                          style={{
+                            accentColor: "var(--primary)",
+                          }}
+                        />
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+
           {/* Preview */}
           {spaceName && (
             <div>

src/components/memberlist/DMProfile.jsx

@@ -41,7 +41,7 @@ function UserAvatar({ name, avatarUrl, isOnline, isDark, isBot, color }) {
   return (
     <div className="relative shrink-0">
       <div
-        className="w-16 h-16 rounded-full flex items-center justify-center text-2xl font-semibold overflow-hidden"
+        className="w-16 h-16 rounded-lg flex items-center justify-center text-2xl font-semibold overflow-hidden"
         style={{
           background: userColor,
           color: textColor,
@@ -60,15 +60,6 @@ function UserAvatar({ name, avatarUrl, isOnline, isDark, isBot, color }) {
           getInitials(name)
         )}
       </div>
-      {!isBot && (
-        <div
-          className="absolute bottom-0.5 right-0.5 w-3 h-3 rounded-full border-2"
-          style={{
-            borderColor: isDark ? "var(--bg-surface-secondary)" : "#fff",
-            background: isOnline ? "var(--online)" : "var(--offline)",
-          }}
-        />
-      )}
     </div>
   );
 }
@@ -90,7 +81,8 @@ function DMProfile({ isDark, dmUser }) {
       .getUserProfile(dmUser.id)
       .then(({ data }) => {
         const color = data?.user?.color || data?.color || null;
-        const displayName = data?.user?.display_name || data?.display_name || null;
+        const displayName =
+          data?.user?.display_name || data?.display_name || null;
         const avatarUrl = data?.user?.avatar_url || data?.avatar_url || null;
         if (mounted && color) {
           setProfileColor(color);
@@ -105,7 +97,7 @@ function DMProfile({ isDark, dmUser }) {
                 ...(displayName && { display_name: displayName }),
                 ...(avatarUrl && { avatar_url: avatarUrl }),
               },
-            })
+            }),
           );
         }
       })

src/components/memberlist/MemberItem.jsx

@@ -13,7 +13,7 @@ function MemberItem({ isDark, member, onClick }) {
       onClick={() => onClick?.()}
     >
       <div
-        className="w-8 h-8 rounded-full flex items-center justify-center text-[13px] font-semibold flex-shrink-0 relative"
+        className="w-8 h-8 rounded-lg flex items-center justify-center text-[13px] font-semibold flex-shrink-0 relative"
         style={{
           background: member.isBot ? "var(--tertiary-active)" : memberColor,
           color: member.isBot

src/components/memberlist/UserProfilePopup.jsx

@@ -55,7 +55,7 @@ function UserProfilePopup({
         {/* Avatar */}
         <div className="px-4 -mt-8">
           <div
-            className="w-16 h-16 rounded-full flex items-center justify-center text-2xl font-semibold border-4 relative"
+            className="w-16 h-16 rounded-lg flex items-center justify-center text-2xl font-semibold border-4 relative"
             style={{
               background: userColor,
               color: isDark ? "var(--bg-surface)" : "#fff",

src/components/roomlist/DMList.jsx

@@ -43,7 +43,7 @@ function UserAvatar({ name, avatarUrl, isOnline, isDark, isBot, color }) {
   return (
     <div className="relative flex-shrink-0">
       <div
-        className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold overflow-hidden"
+        className="w-10 h-10 rounded-lg flex items-center justify-center text-sm font-semibold overflow-hidden"
         style={{
           background: userColor,
           color: textColor,
@@ -96,7 +96,7 @@ function NoResultsState({ isDark }) {
   return (
     <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
       <div
-        className="w-14 h-14 rounded-full flex items-center justify-center mb-3"
+        className="w-14 h-14 rounded-lg flex items-center justify-center mb-3"
         style={{
           background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)",
         }}
@@ -120,7 +120,7 @@ function EmptyState({ isDark, onStartChat }) {
   return (
     <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
       <div
-        className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
+        className="w-16 h-16 rounded-lg flex items-center justify-center mb-4"
         style={{
           background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)",
         }}

src/components/settings/UserProfile.jsx

@@ -108,7 +108,7 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
     >
       <div className="flex items-center gap-4">
         <div
-          className="w-14 h-14 rounded-full flex items-center justify-center text-xl font-semibold"
+          className="w-14 h-14 rounded-lg flex items-center justify-center text-xl font-semibold"
           style={{
             background: usernameColors.find((c) => c.value === usernameColor)?.hex || "var(--primary)",
             color: isDark ? "var(--bg-surface)" : "#fff",
@@ -198,7 +198,7 @@ const UserProfile = forwardRef(function UserProfile(_, ref) {
             <button
               key={`${color.value}-${usernameColor}`}
               onClick={() => handleColorChange(color.value)}
-              className="w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all"
+              className="w-8 h-8 rounded-lg flex items-center justify-center border-2 transition-all"
               style={{
                 background: color.hex,
                 borderColor: