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

Message chunk loading test

Browse Source
This commit is contained in:
selimaj-dev
2025-12-22 19:55:05 +01:00
parent eeae53bd01
commit f92449c493
12 changed files with 61 additions and 147 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
+1 -1
View File
@@ -37,7 +37,7 @@ export default function DMs() {
app={app}
channelName={target?.display_name || id}
channelIcon={target?.avatar_url || "_"}
messages={app.messages.filter(
messages={app.privateMessages.filter(
(m) =>
(m.channel_id === id && m.from === app.profile?.id) ||
(m.from === id && m.channel_id === app.profile?.id)
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.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 -1
View File
@@ -50,7 +50,7 @@ export default function AppLayout({
if (onNewMessage) onNewMessage(m);
},
lastMessage: app.messages?.[app.messages.length - 1]?.id,
lastMessage: app.privateMessages?.[app.privateMessages.length - 1]?.id,
addMessage: app.addMessage,
deleteMessage: app.deleteMessage,
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, 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/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 -6
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) => {
src/hooks/use-messages.ts
+22 -98
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;
}
export default function useMessages(): MessageStore {
const [messages, setMessages] = useState<Message[]>([]);
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;
return {
messages: {
...state.messages,
[serverId]: [...serverMsgs, msg],
},
};
}),
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" }
)
);
return {
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]),
};
}
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>;