AxiomChat/axiom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #37 from orus-dev/chunk-loading

Browse Source 
Chunk loading
This commit is contained in:
Klesti Selimaj
2025-12-22 21:09:33 +01:00
committed by GitHub
parent bc3413f183 ac7fb25e47
commit eee4297a36
14 changed files with 108 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/auth/Login.tsx
+1 -2
View File
@@ -33,8 +33,7 @@ export default function Login() {
message: "Login successful! Redirecting...",
});
// small delay to show feedback before redirect
setTimeout(() => router.push("/chat"), 800);
router.push("/chat");
} catch (err: any) {
setFeedback({
kind: "error",
src/app/chat/[id]/page.tsx
+13 -4
View File
@@ -22,13 +22,17 @@ export default function DMs() {
auth({
id: target.node_address,
wsRef: targetNode,
addMessage: app.addMessage,
deleteMessage: app.deleteMessage,
editMessage: app.editMessage,
messageStore: app.privateMessages,
});
}
connectTargetNode();
app.setCurrentChannel({
id: id,
name: target?.display_name || id,
kind: "text",
});
}, [target]);
return loading || target ? (
@@ -37,16 +41,21 @@ export default function DMs() {
app={app}
channelName={target?.display_name || id}
channelIcon={target?.avatar_url || "_"}
messages={app.messages.filter(
messages={app.privateMessages.messages.filter(
(m) =>
(m.channel_id === id && m.from === app.profile?.id) ||
(m.from === id && m.channel_id === app.profile?.id)
)}
sendRequest={(req) => {
console.log("Sending request: ", req);
switch (req.type) {
case "send_message":
targetNode.current?.send(JSON.stringify(req));
break;
case "load_chunk":
targetNode.current?.send(JSON.stringify(req));
app.node.current?.send(JSON.stringify(req));
break;
default:
app.node.current?.send(JSON.stringify(req));
break;
src/app/chat/page.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export default function ChatHub() {
channels: [],
},
];
const recentActivity = app.messages.slice(0, 3);
const recentActivity = app.privateMessages.messages.slice(0, 3);
return (
<AppLayout app={app}>
src/app/server/[ip]/page.tsx
+7 -11
View File
@@ -6,7 +6,7 @@ import MessageBox from "@/components/channel/MessageBox";
import AppLayout from "@/components/app/AppLayout";
import { Server as ServerType } from "@/types/types";
import auth from "@/lib/auth";
import { useServerMessages } from "@/hooks/use-messages";
import useMessages from "@/hooks/use-messages";
import useApp from "@/hooks/use-app";
import { useEffectOnceWhenReady } from "@/hooks/use-once";
import ChannelView from "@/components/channel/ChannelView";
@@ -16,25 +16,19 @@ export default function Server() {
const searchParams = useSearchParams();
const serverRef = useRef<WebSocket | null>(null);
const app = useApp();
const { messages, addMessage, editMessage, deleteMessage } =
useServerMessages();
const messageStore = useMessages();
useEffectOnceWhenReady(
() => {
if (!ip) return;
const msgs = messages[ip];
auth({
id: ip,
wsRef: serverRef,
setServer: app.setServer,
lastMessage: msgs ? msgs[msgs.length - 1]?.id : undefined,
addMessage: (m) => addMessage(ip, m),
editMessage: (msg_id, contents) => editMessage(ip, msg_id, contents),
deleteMessage: (msg_id) => deleteMessage(ip, msg_id),
messageStore: messageStore,
});
},
[ip, messages],
[ip, messageStore.messages],
[undefined, (v) => v]
);
@@ -55,7 +49,9 @@ export default function Server() {
<AppLayout app={app}>
<ChannelView
app={app}
messages={messages}
messages={messageStore.messages.filter(
(m) => m.channel_id === app.currentChannel?.id
)}
ip={ip}
serverRef={serverRef}
/>
src/components/app/AppLayout.tsx
+1 -5
View File
@@ -50,11 +50,7 @@ export default function AppLayout({
if (onNewMessage) onNewMessage(m);
},
lastMessage: app.messages?.[app.messages.length - 1]?.id,
addMessage: app.addMessage,
deleteMessage: app.deleteMessage,
editMessage: app.editMessage,
messageStore: app.privateMessages,
});
app.setProfiles((prev) => {
src/components/app/SidebarDMs.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ export default function SidebarDMs({ app }: { app: App }) {
await Promise.all(
[
...new Set(
app.messages
app.privateMessages.messages
.sort((a, b) => a.timestamp - b.timestamp)
.flatMap((m) => [m.from, m.channel_id])
.filter((id) => id !== app.profile?.id)
@@ -44,7 +44,7 @@ export default function SidebarDMs({ app }: { app: App }) {
);
};
load();
}, [query, app.messages, app.profile]);
}, [query, app.privateMessages.messages, app.profile]);
return (
<div className="w-full flex flex-col bg-sidebar">
src/components/channel/ChannelView.tsx
+2 -6
View File
@@ -11,7 +11,7 @@ export default function ChannelView({
serverRef,
}: {
app: App;
messages: Record<string, Message[]>;
messages: Message[];
ip: string;
serverRef: React.RefObject<WebSocket | null>;
}) {
@@ -25,11 +25,7 @@ export default function ChannelView({
<MessageBox
app={app}
channelName={app.currentChannel.name}
messages={
messages[ip]?.filter(
(m) => m.channel_id === app.currentChannel?.id
) || []
}
messages={messages}
sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
/>
);
src/components/channel/MessageBox.tsx
+33 -6
View File
@@ -286,6 +286,37 @@ export default function MessageBox({
}) {
const [text, setText] = useState("");
const ref = useRef<HTMLDivElement | null>(null);
const chunkRef = useRef(0);
useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
console.log("Element is in view!");
if (!app.currentChannel) return;
sendRequest({
type: "load_chunk",
params: {
channel_id: app.currentChannel.id,
chunk_id: chunkRef.current,
},
});
chunkRef.current += 1;
}
},
{
threshold: 0.5,
}
);
observer.observe(ref.current);
return () => observer.disconnect();
}, []);
const sendMessage = () => {
if (!app.currentChannel) {
return;
@@ -346,6 +377,7 @@ export default function MessageBox({
/>
</motion.div>
))}
<div ref={ref} />
</AnimatePresence>
</div>
<footer className="flex gap-3 pr-5 w-full h-max">
@@ -370,12 +402,7 @@ export default function MessageBox({
</DropdownMenuContent>
</DropdownMenu>
<Button
variant="secondary"
onClick={() => {
sendMessage();
}}
>
<Button variant="secondary" onClick={sendMessage}>
<SendIcon />
</Button>
</footer>
src/components/channel/PluginChannel.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export default function PluginChannel({
serverRef,
}: {
app: App;
messages: Record<string, Message[]>;
messages: Message[];
ip: string;
serverRef: React.RefObject<WebSocket | null>;
}) {
src/hooks/use-app.ts
+3 -7
View File
@@ -1,6 +1,6 @@
import App from "@/types/app";
import { useEffect, useRef, useState } from "react";
import { useMessages } from "./use-messages";
import useMessages from "./use-messages";
import { StringMap } from "@/types/typeUtils";
import useUser, { UserProfile } from "./get-user";
import { useClientSettings } from "./use-settings";
@@ -12,7 +12,6 @@ import { toast } from "sonner";
export default function useApp(): App {
const node = useRef<WebSocket | null>(null);
const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
const { messages, addMessage, deleteMessage, editMessage } = useMessages();
const [sidebarOpen, setSidebarOpen] = useState(false);
const profile = useUser();
const [clientSettings, setClientSettings] = useClientSettings();
@@ -20,6 +19,7 @@ export default function useApp(): App {
const [servers, setServers] = useState<StringMap<Server>>({});
const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
const [server, setServer] = useState<Server>();
const privateMessages = useMessages();
useEffect(() => {
const stored = Cookies.get("servers");
@@ -38,8 +38,7 @@ export default function useApp(): App {
}, []);
return {
editMessage,
deleteMessage,
privateMessages,
currentChannel,
setCurrentChannel,
server,
@@ -54,8 +53,6 @@ export default function useApp(): App {
profile,
profiles,
setProfiles,
messages,
addMessage,
sidebarOpen,
setSidebarOpen,
getUserById: async (id: string) => {
@@ -63,7 +60,6 @@ export default function useApp(): App {
const onResponse = (res: Response<UserProfile>) => {
setProfiles((prev) => {
console.log("test");
prev[id] = res.data as UserProfile;
return prev;
});
src/hooks/use-messages.ts
+19 -95
View File
@@ -1,108 +1,32 @@
import { Message } from "@/types/types";
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { useState } from "react";
interface MessageStore {
export interface MessageStore {
messages: Message[];
setMessages: (msgs: Message[]) => void;
addMessage: (msg: Message) => void;
deleteMessage: (id: number) => void;
editMessage: (id: number, contents: string) => void;
clearMessages: () => void;
insertMessages: (msgs: Message[]) => void;
}
type ServerMessageStore = {
messages: Record<string, Message[]>; // server_id → messages
setMessages: (serverId: string, msgs: Message[]) => void;
addMessage: (serverId: string, msg: Message) => void;
deleteMessage: (serverId: string, id: number) => void;
editMessage: (serverId: string, id: number, contents: string) => void;
clearMessages: (serverId?: string) => void;
};
export const useMessages = create<MessageStore>()(
persist(
(set) => ({
messages: [],
setMessages: (msgs) => set({ messages: msgs }),
addMessage: (msg) =>
set((state) =>
state.messages.some((m) => m.id === msg.id)
? state
: { messages: [...state.messages, msg] }
),
deleteMessage: (id: number) =>
set((state) => ({
messages: state.messages.filter((m) => m.id !== id),
})),
editMessage: (id: number, contents) =>
set((state) => ({
messages: state.messages.map((m) =>
m.id === id ? { ...m, contents } : m
),
})),
clearMessages: () => set({ messages: [] }),
}),
{ name: "chat-messages" }
)
);
export const useServerMessages = create<ServerMessageStore>()(
persist(
(set) => ({
messages: {},
setMessages: (serverId, msgs) =>
set((state) => ({
messages: { ...state.messages, [serverId]: msgs },
})),
addMessage: (serverId, msg) =>
set((state) => {
const serverMsgs = state.messages[serverId] || [];
if (serverMsgs.some((m) => m.id === msg.id)) return state;
export default function useMessages(): MessageStore {
const [messages, setMessages] = useState<Message[]>([]);
return {
messages: {
...state.messages,
[serverId]: [...serverMsgs, msg],
},
messages: messages,
setMessages: (msgs) => setMessages(msgs),
addMessage: (msg) =>
setMessages((messages) =>
messages.some((m) => m.id === msg.id) ? messages : [...messages, msg]
),
deleteMessage: (id: number) =>
setMessages((messages) => messages.filter((m) => m.id !== id)),
editMessage: (id: number, contents) =>
setMessages((messages) =>
messages.map((m) => (m.id === id ? { ...m, contents } : m))
),
clearMessages: () => setMessages([]),
insertMessages: (msgs) => setMessages((m) => [...msgs, ...m]),
};
}),
deleteMessage: (serverId, id) =>
set((state) => ({
messages: {
...state.messages,
[serverId]: (state.messages[serverId] || []).filter(
(m) => m.id !== id
),
},
})),
editMessage: (serverId, id, contents) =>
set((state) => ({
messages: {
...state.messages,
[serverId]: (state.messages[serverId] || []).map((m) =>
m.id === id ? { ...m, contents } : m
),
},
})),
clearMessages: (serverId) =>
set((state) =>
serverId
? {
messages: {
...state.messages,
[serverId]: [],
},
}
: { messages: {} }
),
}),
{ name: "server-messages" }
)
);
src/lib/auth.ts
+18 -14
View File
@@ -3,28 +3,22 @@ import axios from "axios";
import { Dispatch, RefObject, SetStateAction } from "react";
import { get } from "./request";
import { toast } from "sonner";
import { MessageStore } from "@/hooks/use-messages";
type AuthParams = {
id: string;
wsRef: RefObject<WebSocket | null>;
setServer?: Dispatch<SetStateAction<Server | undefined>>;
onNewMessage?: (m: Message) => void;
lastMessage?: number;
addMessage: (m: Message) => void;
deleteMessage: (id: number) => void;
editMessage: (id: number, contents: string) => void;
messageStore: MessageStore;
};
export default async function auth({
id,
wsRef,
setServer,
addMessage,
onNewMessage,
lastMessage,
deleteMessage,
editMessage,
messageStore,
}: AuthParams) {
console.log("Authenticating with server id:", id);
@@ -64,7 +58,6 @@ export default async function auth({
JSON.stringify({
version: "0.0.1",
auth_token: server_auth,
last_message: lastMessage || 0,
})
);
name = data.name;
@@ -73,20 +66,31 @@ export default async function auth({
switch (data.type) {
case "authenticated":
data.params.messages.forEach(addMessage);
// ws.send(
// JSON.stringify({
// type: "load_chunk",
// params: {
// channel_id: "general",
// chunk_id: 0,
// },
// })
// );
break;
case "message_create":
if (onNewMessage) onNewMessage(data.params as Message);
addMessage(data.params as Message);
messageStore.addMessage(data.params as Message);
break;
case "message_delete":
deleteMessage(data.params.message_id);
messageStore.deleteMessage(data.params.message_id);
break;
case "message_update":
editMessage(data.params.message_id, data.params.contents);
messageStore.editMessage(data.params.message_id, data.params.contents);
break;
case "chunk":
messageStore.insertMessages(data.params);
break;
}
};
src/types/app.ts
+2 -4
View File
@@ -3,6 +3,7 @@ import { StringMap } from "./typeUtils";
import { UserProfile } from "@/hooks/get-user";
import { Channel, Message, Server } from "./types";
import { ClientSettings } from "./settings";
import { MessageStore } from "@/hooks/use-messages";
export type SetState<T> = Dispatch<SetStateAction<T>>;
@@ -22,10 +23,7 @@ export default interface App {
profiles: StringMap<UserProfile | null>;
setProfiles: SetState<StringMap<UserProfile | null>>;
messages: Message[];
addMessage: (v: Message) => void;
deleteMessage: (id: number) => void;
editMessage: (id: number, v: string) => void;
privateMessages: MessageStore;
sidebarOpen: boolean;
setSidebarOpen: SetState<boolean>;
src/types/protocol.ts
+2 -1
View File
@@ -6,4 +6,5 @@ export interface MessageType<T = string, P = object> {
export type ClientMessage =
| MessageType<"send_message", { channel_id: string; contents: string }>
| MessageType<"delete_message", { message_id: number }>
| MessageType<"edit_message", { message_id: number; new_contents: string }>;
| MessageType<"edit_message", { message_id: number; new_contents: string }>
| MessageType<"load_chunk", { channel_id: string; chunk_id: number }>;