GnosysLabs/Synapsis
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement remote user profile caching and enhance chat conversation list display with updated styling.

Browse Source
This commit is contained in:
Christomatt
2026-01-29 01:00:22 +01:00
parent 491eb07fea
commit 9710a16f83
7 changed files with 168 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api/chat/receive/route.ts
+10
View File
@@ -64,6 +64,16 @@ export async function POST(request: NextRequest) {
publicKey = remoteProfile.publicKey;
senderDisplayName = remoteProfile.displayName || handle;
senderAvatarUrl = remoteProfile.avatarUrl;
// CACHE: Upsert the remote user into our local database
const { upsertRemoteUser } = await import('@/lib/swarm/user-cache');
await upsertRemoteUser({
handle: handle, // already full handle if remote
displayName: senderDisplayName,
avatarUrl: senderAvatarUrl || null,
did: did || '',
isBot: remoteProfile.isBot || false
});
}
}
} else {
src/app/api/swarm/chat/conversations/route.ts
+31 -4
View File
@@ -57,15 +57,42 @@ export async function GET(request: NextRequest) {
};
// Try to get cached user info
const cachedUser = await db.query.users.findFirst({
let cachedUser = await db.query.users.findFirst({
where: eq(users.handle, participant2Handle),
});
// LAZY LOAD: If remote and not cached, try to fetch it now
if (!cachedUser && isRemote) {
try {
const [rHandle, rDomain] = participant2Handle.split('@');
const { fetchSwarmUserProfile } = await import('@/lib/swarm/interactions');
const profileData = await fetchSwarmUserProfile(rHandle, rDomain, 0);
if (profileData?.profile) {
const { upsertRemoteUser } = await import('@/lib/swarm/user-cache');
await upsertRemoteUser({
handle: participant2Handle,
displayName: profileData.profile.displayName,
avatarUrl: profileData.profile.avatarUrl || null,
did: profileData.profile.did || '',
isBot: profileData.profile.isBot || false,
});
// Re-query to get the new cached user
cachedUser = await db.query.users.findFirst({
where: eq(users.handle, participant2Handle),
}) as any;
}
} catch (e) {
console.error(`[Lazy Load] Failed for ${participant2Handle}:`, e);
}
}
if (cachedUser) {
participant2Info = {
handle: cachedUser.handle,
displayName: cachedUser.displayName || cachedUser.handle,
avatarUrl: cachedUser.avatarUrl,
displayName: (cachedUser as any).displayName || cachedUser.handle,
avatarUrl: (cachedUser as any).avatarUrl || null,
};
}
@@ -73,7 +100,7 @@ export async function GET(request: NextRequest) {
...conv,
participant2: {
...participant2Info,
isBot: cachedUser?.isBot || false,
isBot: (cachedUser as any)?.isBot || false,
},
unreadCount: Number(unreadCount[0]?.count || 0),
};
src/app/api/users/[handle]/followers/route.ts
+27 -9
View File
@@ -1,6 +1,6 @@
import { NextResponse } from 'next/server';
import { db, follows, users } from '@/db';
import { db, follows, users, remoteFollowers } from '@/db';
import { eq } from 'drizzle-orm';
import { hydrateSwarmUsers } from '@/lib/swarm/user-hydration';
type RouteContext = { params: Promise<{ handle: string }> };
@@ -46,7 +46,8 @@ export async function GET(request: Request, context: RouteContext) {
isRemote: true,
isBot: f.isBot,
}));
return NextResponse.json({ followers, nextCursor: null });
const hydratedFollowers = await hydrateSwarmUsers(followers);
return NextResponse.json({ followers: hydratedFollowers, nextCursor: null });
}
// If swarm fetch fails, return empty
return NextResponse.json({ followers: [], nextCursor: null });
@@ -80,7 +81,7 @@ export async function GET(request: Request, context: RouteContext) {
.where(eq(follows.followingId, user.id))
.limit(limit);
const allFollowers = userFollowers.map(f => ({
const localFollowers = userFollowers.map(f => ({
id: f.follower.id,
handle: f.follower.handle,
displayName: f.follower.displayName,
@@ -90,13 +91,30 @@ export async function GET(request: Request, context: RouteContext) {
isRemote: false,
}));
// Hydrate remote users with fresh data from swarm (if we had local storage for remote followers, we'd merge them here)
// Since we don't store remote followers locally for local users (only incoming follows),
// we mainly need this if we were merging remote lists which we only do in the swarm endpoint.
// However, let's keep it consistent in case we add remote followers storage.
// Get remote followers
const userRemoteFollowers = await db.query.remoteFollowers.findMany({
where: eq(remoteFollowers.userId, user.id),
limit,
});
const remoteFollowersList = userRemoteFollowers.map(f => ({
id: f.actorUrl,
handle: f.handle || 'unknown',
displayName: f.handle?.split('@')[0] || 'Unknown',
avatarUrl: null,
bio: null,
isBot: false,
isRemote: true,
}));
// Merge and return
const allFollowers = [...localFollowers, ...remoteFollowersList].slice(0, limit);
// Hydrate users with fresh data from swarm
const hydratedFollowers = await hydrateSwarmUsers(allFollowers);
return NextResponse.json({
followers: allFollowers,
followers: hydratedFollowers,
nextCursor: userFollowers.length === limit ? userFollowers[userFollowers.length - 1]?.id : null,
});
} catch (error) {
src/app/api/users/[handle]/following/route.ts
+2 -1
View File
@@ -47,7 +47,8 @@ export async function GET(request: Request, context: RouteContext) {
isRemote: true,
isBot: f.isBot,
}));
return NextResponse.json({ following, nextCursor: null });
const hydratedFollowing = await hydrateSwarmUsers(following);
return NextResponse.json({ following: hydratedFollowing, nextCursor: null });
}
// If swarm fetch fails, return empty
return NextResponse.json({ following: [], nextCursor: null });
src/app/api/users/[handle]/route.ts
+10
View File
@@ -46,6 +46,16 @@ export async function GET(request: Request, context: RouteContext) {
if (profileData?.profile) {
const profile = profileData.profile;
// CACHE: Upsert the remote user into our local database
const { upsertRemoteUser } = await import('@/lib/swarm/user-cache');
await upsertRemoteUser({
handle: `${profile.handle}@${remoteDomain}`,
displayName: profile.displayName,
avatarUrl: profile.avatarUrl || null,
did: profile.did || '',
isBot: profile.isBot || false
});
return NextResponse.json({
user: {
id: `swarm:${remoteDomain}:${profile.handle}`,
src/app/chat/page.tsx
+39 -37
View File
@@ -549,7 +549,7 @@ export default function ChatPage() {
// LIST VIEW
return (
<>
<div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', maxWidth: '600px', margin: '0 auto', background: 'var(--background)' }}>
<div style={{ position: 'sticky', top: 0, zIndex: 20, background: 'var(--background)' }}>
<header style={{
padding: '16px',
@@ -563,7 +563,7 @@ export default function ChatPage() {
</header>
<div style={{
padding: '16px',
padding: '16px', // Reverted from 20px to 16px as requested
borderBottom: '1px solid var(--border)',
background: 'rgba(10, 10, 10, 0.8)',
backdropFilter: 'blur(12px)',
@@ -581,41 +581,43 @@ export default function ChatPage() {
</div>
</div>
{loading ? (
<div style={{ display: 'flex', justifyContent: 'center', padding: '48px' }}>
<Loader2 className="animate-spin" size={32} />
</div>
) : filteredConversations.length === 0 ? (
<div style={{ textAlign: 'center', padding: '48px 16px', color: 'var(--foreground-tertiary)' }}>
<MessageCircle size={48} style={{ margin: '0 auto 16px', opacity: 0.5 }} />
<p>No conversations yet</p>
</div>
) : (
filteredConversations.map(conv => (
<div
key={conv.id}
className="post"
onClick={() => {
setMessages([]);
setSelectedConversation(conv);
}}
style={{ cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: '12px' }}
>
<div className="avatar">
{conv.participant2.avatarUrl ? <img src={conv.participant2.avatarUrl} alt="" /> : conv.participant2.displayName[0]}
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span style={{ fontWeight: 600 }}>{conv.participant2.displayName}</span>
{conv.unreadCount > 0 && <span className="badge">{conv.unreadCount}</span>}
</div>
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{conv.lastMessagePreview}
</div>
</div>
<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
{loading ? (
<div style={{ display: 'flex', justifyContent: 'center', padding: '48px' }}>
<Loader2 className="animate-spin" size={32} />
</div>
))
)}
</>
) : filteredConversations.length === 0 ? (
<div style={{ textAlign: 'center', padding: '48px 16px', color: 'var(--foreground-tertiary)' }}>
<MessageCircle size={48} style={{ margin: '0 auto 16px', opacity: 0.5 }} />
<p>No conversations yet</p>
</div>
) : (
filteredConversations.map(conv => (
<div
key={conv.id}
className="post"
onClick={() => {
setMessages([]);
setSelectedConversation(conv);
}}
style={{ cursor: 'pointer', display: 'flex', alignItems: 'flex-start', gap: '12px' }}
>
<div className="avatar">
{conv.participant2.avatarUrl ? <img src={conv.participant2.avatarUrl} alt="" /> : conv.participant2.displayName?.[0] || '?'}
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
<span style={{ fontWeight: 600, fontSize: '15px' }}>{conv.participant2.displayName || conv.participant2.handle}</span>
{conv.unreadCount > 0 && <span className="badge" style={{ background: 'var(--accent)', color: '#000', borderRadius: '10px', padding: '2px 8px', fontSize: '11px', fontWeight: 600 }}>{conv.unreadCount}</span>}
</div>
<div style={{ fontSize: '13px', color: 'var(--foreground-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: '2px' }}>
{conv.lastMessagePreview}
</div>
</div>
</div>
))
)}
</div>
</div>
);
}
src/lib/swarm/user-cache.ts
+49
View File
@@ -0,0 +1,49 @@
import { db, users } from '@/db';
import { eq } from 'drizzle-orm';
export interface RemoteProfile {
handle: string;
displayName: string;
avatarUrl?: string | null;
did: string;
isBot?: boolean;
}
/**
* Upsert a remote user into the local database for caching/display purposes.
*/
export async function upsertRemoteUser(profile: RemoteProfile) {
try {
if (!db) return;
// Check if user already exists
const existing = await db.query.users.findFirst({
where: eq(users.did, profile.did),
});
if (existing) {
// Update metadata if changed
await db.update(users)
.set({
displayName: profile.displayName || existing.displayName,
avatarUrl: profile.avatarUrl || existing.avatarUrl,
isBot: profile.isBot ?? existing.isBot,
updatedAt: new Date(),
})
.where(eq(users.id, existing.id));
} else {
// Create new placeholder user
await db.insert(users).values({
did: profile.did,
handle: profile.handle, // user@domain
displayName: profile.displayName || profile.handle,
avatarUrl: profile.avatarUrl || null,
isBot: profile.isBot || false,
publicKey: '', // We don't necessarily have their public key yet, but DMs often do
// Note: nodeId is null for remote placeholders unless we specifically link it
});
}
} catch (error) {
console.error(`[User Cache] Failed to upsert ${profile.handle}:`, error);
}
}