Klesti Selimaj
Generated
+70
-40
@@ -12,6 +12,7 @@
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
@@ -38,7 +39,7 @@
|
||||
"js-cookie": "^3.0.5",
|
||||
"lexical": "^0.34.0",
|
||||
"lucide-react": "^0.541.0",
|
||||
"next": "15.5.0",
|
||||
"next": "15.5.7",
|
||||
"next-themes": "^0.4.6",
|
||||
"pg": "^8.16.3",
|
||||
"react": "19.1.0",
|
||||
@@ -883,15 +884,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.0.tgz",
|
||||
"integrity": "sha512-sDaprBAfzCQiOgo2pO+LhnV0Wt2wBgartjrr+dpcTORYVnnXD0gwhHhiiyIih9hQbq+JnbqH4odgcFWhqCGidw==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
|
||||
"integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.0.tgz",
|
||||
"integrity": "sha512-v7Jj9iqC6enxIRBIScD/o0lH7QKvSxq2LM8UTyqJi+S2w2QzhMYjven4vgu/RzgsdtdbpkyCxBTzHl/gN5rTRg==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
|
||||
"integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -905,9 +906,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.0.tgz",
|
||||
"integrity": "sha512-s2Nk6ec+pmYmAb/utawuURy7uvyYKDk+TRE5aqLRsdnj3AhwC9IKUBmhfnLmY/+P+DnwqpeXEFIKe9tlG0p6CA==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
|
||||
"integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -921,9 +922,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.0.tgz",
|
||||
"integrity": "sha512-mGlPJMZReU4yP5fSHjOxiTYvZmwPSWn/eF/dcg21pwfmiUCKS1amFvf1F1RkLHPIMPfocxLViNWFvkvDB14Isg==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
|
||||
"integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -937,9 +938,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.0.tgz",
|
||||
"integrity": "sha512-biWqIOE17OW/6S34t1X8K/3vb1+svp5ji5QQT/IKR+VfM3B7GvlCwmz5XtlEan2ukOUf9tj2vJJBffaGH4fGRw==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
|
||||
"integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -953,9 +954,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.0.tgz",
|
||||
"integrity": "sha512-zPisT+obYypM/l6EZ0yRkK3LEuoZqHaSoYKj+5jiD9ESHwdr6QhnabnNxYkdy34uCigNlWIaCbjFmQ8FY5AlxA==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
|
||||
"integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -969,9 +970,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.0.tgz",
|
||||
"integrity": "sha512-+t3+7GoU9IYmk+N+FHKBNFdahaReoAktdOpXHFIPOU1ixxtdge26NgQEEkJkCw2dHT9UwwK5zw4mAsURw4E8jA==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
|
||||
"integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -985,9 +986,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.0.tgz",
|
||||
"integrity": "sha512-d8MrXKh0A+c9DLiy1BUFwtg3Hu90Lucj3k6iKTUdPOv42Ve2UiIG8HYi3UAb8kFVluXxEfdpCoPPCSODk5fDcw==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
|
||||
"integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -1001,9 +1002,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.0.tgz",
|
||||
"integrity": "sha512-Fe1tGHxOWEyQjmygWkkXSwhFcTJuimrNu52JEuwItrKJVV4iRjbWp9I7zZjwqtiNnQmxoEvoisn8wueFLrNpvQ==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
|
||||
"integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -1164,6 +1165,34 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-context-menu": {
|
||||
"version": "2.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
|
||||
"integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-menu": "2.1.16",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dialog": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
|
||||
@@ -4458,12 +4487,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "15.5.0",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-15.5.0.tgz",
|
||||
"integrity": "sha512-N1lp9Hatw3a9XLt0307lGB4uTKsXDhyOKQo7uYMzX4i0nF/c27grcGXkLdb7VcT8QPYLBa8ouIyEoUQJ2OyeNQ==",
|
||||
"version": "15.5.7",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
|
||||
"integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
|
||||
"deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@next/env": "15.5.0",
|
||||
"@next/env": "15.5.7",
|
||||
"@swc/helpers": "0.5.15",
|
||||
"caniuse-lite": "^1.0.30001579",
|
||||
"postcss": "8.4.31",
|
||||
@@ -4476,14 +4506,14 @@
|
||||
"node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "15.5.0",
|
||||
"@next/swc-darwin-x64": "15.5.0",
|
||||
"@next/swc-linux-arm64-gnu": "15.5.0",
|
||||
"@next/swc-linux-arm64-musl": "15.5.0",
|
||||
"@next/swc-linux-x64-gnu": "15.5.0",
|
||||
"@next/swc-linux-x64-musl": "15.5.0",
|
||||
"@next/swc-win32-arm64-msvc": "15.5.0",
|
||||
"@next/swc-win32-x64-msvc": "15.5.0",
|
||||
"@next/swc-darwin-arm64": "15.5.7",
|
||||
"@next/swc-darwin-x64": "15.5.7",
|
||||
"@next/swc-linux-arm64-gnu": "15.5.7",
|
||||
"@next/swc-linux-arm64-musl": "15.5.7",
|
||||
"@next/swc-linux-x64-gnu": "15.5.7",
|
||||
"@next/swc-linux-x64-musl": "15.5.7",
|
||||
"@next/swc-win32-arm64-msvc": "15.5.7",
|
||||
"@next/swc-win32-x64-msvc": "15.5.7",
|
||||
"sharp": "^0.34.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
|
||||
+16
-17
@@ -19,13 +19,13 @@ export default function DMs() {
|
||||
useEffect(() => {
|
||||
async function connectTargetNode() {
|
||||
if (!target) return;
|
||||
auth(
|
||||
target.node_address,
|
||||
targetNode,
|
||||
() => {},
|
||||
app.addMessage,
|
||||
() => {}
|
||||
);
|
||||
auth({
|
||||
id: target.node_address,
|
||||
wsRef: targetNode,
|
||||
addMessage: app.addMessage,
|
||||
deleteMessage: app.deleteMessage,
|
||||
editMessage: app.editMessage,
|
||||
});
|
||||
}
|
||||
|
||||
connectTargetNode();
|
||||
@@ -42,16 +42,15 @@ export default function DMs() {
|
||||
(m.channel_id === id && m.from === app.profile?.id) ||
|
||||
(m.from === id && m.channel_id === app.profile?.id)
|
||||
)}
|
||||
sendMessage={(message) => {
|
||||
targetNode.current?.send(
|
||||
JSON.stringify({
|
||||
type: "send_message",
|
||||
params: {
|
||||
channel_id: id,
|
||||
contents: message,
|
||||
},
|
||||
})
|
||||
);
|
||||
sendRequest={(req) => {
|
||||
switch (req.type) {
|
||||
case "send_message":
|
||||
targetNode.current?.send(JSON.stringify(req));
|
||||
break;
|
||||
default:
|
||||
app.node.current?.send(JSON.stringify(req));
|
||||
break;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</AppLayout>
|
||||
|
||||
@@ -16,20 +16,23 @@ export default function Server() {
|
||||
const searchParams = useSearchParams();
|
||||
const serverRef = useRef<WebSocket | null>(null);
|
||||
const app = useApp();
|
||||
const { messages, addMessage } = useServerMessages();
|
||||
const { messages, addMessage, editMessage, deleteMessage } =
|
||||
useServerMessages();
|
||||
|
||||
useEffectOnceWhenReady(
|
||||
() => {
|
||||
if (!ip) return;
|
||||
const msgs = messages[ip];
|
||||
auth(
|
||||
ip,
|
||||
serverRef,
|
||||
app.setServer,
|
||||
(m) => addMessage(ip, m),
|
||||
() => {},
|
||||
msgs ? msgs[msgs.length - 1]?.id : undefined
|
||||
);
|
||||
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),
|
||||
});
|
||||
},
|
||||
[ip, messages],
|
||||
[undefined, (v) => v]
|
||||
|
||||
@@ -7,7 +7,7 @@ import { toast } from "sonner";
|
||||
import auth from "@/lib/auth";
|
||||
import { useIsMobile } from "@/hooks/is-mobile";
|
||||
import App from "@/types/app";
|
||||
import { Server, Message } from "@/types/types";
|
||||
import { Message } from "@/types/types";
|
||||
|
||||
import SidebarServers from "./SidebarServers";
|
||||
import SidebarDMs from "./SidebarDMs";
|
||||
@@ -31,12 +31,10 @@ export default function AppLayout({
|
||||
useEffect(() => {
|
||||
if (!app.profile?.node_address) return;
|
||||
|
||||
auth(
|
||||
app.profile.node_address,
|
||||
app.node,
|
||||
() => {},
|
||||
app.addMessage,
|
||||
(m) => {
|
||||
auth({
|
||||
id: app.profile.node_address,
|
||||
wsRef: app.node,
|
||||
onNewMessage: (m) => {
|
||||
if (m.from !== chatWith && m.from !== app.profile?.id)
|
||||
toast(
|
||||
`New message from ${app.profiles[m.from]?.display_name || m.from}`,
|
||||
@@ -52,8 +50,12 @@ export default function AppLayout({
|
||||
|
||||
if (onNewMessage) onNewMessage(m);
|
||||
},
|
||||
app.messages?.[app.messages.length - 1]?.id
|
||||
);
|
||||
lastMessage: app.messages?.[app.messages.length - 1]?.id,
|
||||
|
||||
addMessage: app.addMessage,
|
||||
deleteMessage: app.deleteMessage,
|
||||
editMessage: app.editMessage,
|
||||
});
|
||||
|
||||
app.setProfiles((prev) => {
|
||||
if (app.profile) prev[app.profile.id] = app.profile;
|
||||
|
||||
@@ -30,17 +30,7 @@ export default function ChannelView({
|
||||
(m) => m.channel_id === app.currentChannel?.id
|
||||
) || []
|
||||
}
|
||||
sendMessage={(message) => {
|
||||
serverRef.current?.send(
|
||||
JSON.stringify({
|
||||
type: "send_message",
|
||||
params: {
|
||||
channel_id: app.currentChannel?.id,
|
||||
contents: message,
|
||||
},
|
||||
})
|
||||
);
|
||||
}}
|
||||
sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -11,21 +11,51 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "../ui/dropdown-menu";
|
||||
import { ChevronLeftIcon, SendIcon, SmilePlusIcon } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { format, isToday, isYesterday } from "date-fns";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { UserProfile } from "@/hooks/get-user";
|
||||
import ProfilePicture from "../ProfilePicture";
|
||||
import App from "@/types/app";
|
||||
import App, { SetState } from "@/types/app";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
} from "@/components/ui/context-menu";
|
||||
import { ClientMessage } from "@/types/protocol";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
function MessageContainer({ message, app }: { message: Message; app: App }) {
|
||||
function MessageContainer({
|
||||
message,
|
||||
app,
|
||||
sendRequest,
|
||||
}: {
|
||||
message: Message;
|
||||
app: App;
|
||||
sendRequest: (content: ClientMessage) => void;
|
||||
}) {
|
||||
const [profile, setProfile] = useState<UserProfile | null>();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editText, setEditText] = useState(message.contents);
|
||||
|
||||
app.getUserById(message.from).then(setProfile);
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
|
||||
app.getUserById(message.from).then((p) => {
|
||||
if (mounted) setProfile(p);
|
||||
});
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [app, message.from]);
|
||||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
|
||||
<div className="flex gap-2">
|
||||
{/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
|
||||
@@ -34,7 +64,7 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
|
||||
name={profile?.display_name || message.from}
|
||||
/>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-bold flex gap-1 items-center">
|
||||
<span className="font-bold flex gap-1 items-center select-none">
|
||||
{profile?.display_name || message.from}
|
||||
|
||||
<p className="text-neutral-500 text-xs">
|
||||
@@ -46,9 +76,34 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
|
||||
</p>
|
||||
</span>
|
||||
|
||||
<div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
|
||||
{message.contents.split("\n\n").map((line, index) => (
|
||||
<div key={index} className="h-max break-words">
|
||||
<div
|
||||
className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape" && isEditing) {
|
||||
setIsEditing(false);
|
||||
setEditText(message.contents);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<MessageInput
|
||||
text={editText}
|
||||
setText={setEditText}
|
||||
onEnter={() => {
|
||||
sendRequest({
|
||||
type: "edit_message",
|
||||
params: {
|
||||
message_id: message.id,
|
||||
new_contents: editText,
|
||||
},
|
||||
});
|
||||
|
||||
setIsEditing(false);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
message.contents.split("\n\n").map((line, index) => (
|
||||
<div key={index} className="h-max break-words select-none">
|
||||
{index > 0 && <br />}
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
@@ -108,29 +163,143 @@ function MessageContainer({ message, app }: { message: Message; app: App }) {
|
||||
{line}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent className="w-52">
|
||||
<ContextMenuItem inset>Copy message</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
inset
|
||||
onClick={() => {
|
||||
setEditText(message.contents);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
disabled={message.from !== app.profile?.id}
|
||||
>
|
||||
Edit
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
inset
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
sendRequest({
|
||||
type: "delete_message",
|
||||
params: {
|
||||
message_id: message.id,
|
||||
},
|
||||
});
|
||||
}}
|
||||
disabled={message.from !== app.profile?.id}
|
||||
>
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
|
||||
function MessageInput({
|
||||
text,
|
||||
setText,
|
||||
onEnter,
|
||||
}: {
|
||||
text: string;
|
||||
setText: SetState<string>;
|
||||
onEnter: () => void;
|
||||
}) {
|
||||
const inputRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [inputRef]);
|
||||
|
||||
return text.includes("\n") ? (
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
className="resize-none"
|
||||
placeholder="Type a message..."
|
||||
value={text}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value.includes("\n") && text.includes("\n")) {
|
||||
setTimeout(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.selectionStart = text.length + 1;
|
||||
inputRef.current.selectionEnd = text.length + 1;
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
setText(e.target.value);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onEnter();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
placeholder="Type a message..."
|
||||
ref={inputRef}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (e.shiftKey) {
|
||||
setText((p) => p + "\n");
|
||||
setTimeout(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.selectionStart = text.length + 1;
|
||||
inputRef.current.selectionEnd = text.length + 1;
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, 10);
|
||||
} else {
|
||||
onEnter();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MessageBox({
|
||||
app,
|
||||
sendMessage,
|
||||
sendRequest,
|
||||
channelName,
|
||||
channelIcon,
|
||||
messages,
|
||||
}: {
|
||||
app: App;
|
||||
sendMessage: (m: string) => void;
|
||||
sendRequest: (req: ClientMessage) => void;
|
||||
channelName?: string;
|
||||
channelIcon?: string;
|
||||
messages: Message[];
|
||||
}) {
|
||||
const [text, setText] = useState("");
|
||||
const inputRef = useRef<any>(null);
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!app.currentChannel) {
|
||||
return;
|
||||
}
|
||||
|
||||
sendRequest({
|
||||
type: "send_message",
|
||||
params: {
|
||||
channel_id: app.currentChannel?.id,
|
||||
contents: text.trim(),
|
||||
},
|
||||
});
|
||||
setText("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
|
||||
@@ -155,65 +324,32 @@ export default function MessageBox({
|
||||
</header>
|
||||
)}
|
||||
<div className="mt-auto flex flex-col-reverse overflow-y-scroll">
|
||||
<AnimatePresence>
|
||||
{messages.toReversed().map((msg) => (
|
||||
<MessageContainer key={msg.id} message={msg} app={app} />
|
||||
<motion.div
|
||||
key={msg.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
scale: 0.95,
|
||||
height: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<MessageContainer
|
||||
message={msg}
|
||||
app={app}
|
||||
sendRequest={sendRequest}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<footer className="flex gap-3 pr-5 w-full h-max">
|
||||
{text.includes("\n") ? (
|
||||
<Textarea
|
||||
ref={inputRef}
|
||||
className="resize-none"
|
||||
placeholder="Type a message..."
|
||||
value={text}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value.includes("\n") && text.includes("\n")) {
|
||||
setTimeout(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.selectionStart = text.length + 1;
|
||||
inputRef.current.selectionEnd = text.length + 1;
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
setText(e.target.value);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage(text);
|
||||
setText("");
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
placeholder="Type a message..."
|
||||
ref={inputRef}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
if (e.shiftKey) {
|
||||
setText((p) => p + "\n");
|
||||
setTimeout(() => {
|
||||
if (inputRef.current) {
|
||||
inputRef.current.selectionStart = text.length + 1;
|
||||
inputRef.current.selectionEnd = text.length + 1;
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, 10);
|
||||
} else {
|
||||
sendMessage(text.trim());
|
||||
setText("");
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<MessageInput text={text} setText={setText} onEnter={sendMessage} />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
@@ -237,8 +373,7 @@ export default function MessageBox({
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
sendMessage(text.trim());
|
||||
setText("");
|
||||
sendMessage();
|
||||
}}
|
||||
>
|
||||
<SendIcon />
|
||||
|
||||
@@ -0,0 +1,252 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ContextMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
|
||||
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
|
||||
}
|
||||
|
||||
function ContextMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
|
||||
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function ContextMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioGroup
|
||||
data-slot="context-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
data-slot="context-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Item
|
||||
data-slot="context-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
data-slot="context-menu-checkbox-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
data-slot="context-menu-radio-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Label
|
||||
data-slot="context-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Separator
|
||||
data-slot="context-menu-separator"
|
||||
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="context-menu-shortcut"
|
||||
className={cn(
|
||||
"text-muted-foreground ml-auto text-xs tracking-widest",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
@@ -12,7 +12,7 @@ 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 } = useMessages();
|
||||
const { messages, addMessage, deleteMessage, editMessage } = useMessages();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const profile = useUser();
|
||||
const [clientSettings, setClientSettings] = useClientSettings();
|
||||
@@ -38,6 +38,8 @@ export default function useApp(): App {
|
||||
}, []);
|
||||
|
||||
return {
|
||||
editMessage,
|
||||
deleteMessage,
|
||||
currentChannel,
|
||||
setCurrentChannel,
|
||||
server,
|
||||
@@ -61,6 +63,7 @@ export default function useApp(): App {
|
||||
|
||||
const onResponse = (res: Response<UserProfile>) => {
|
||||
setProfiles((prev) => {
|
||||
console.log("test");
|
||||
prev[id] = res.data as UserProfile;
|
||||
return prev;
|
||||
});
|
||||
|
||||
@@ -6,6 +6,8 @@ interface MessageStore {
|
||||
messages: Message[];
|
||||
setMessages: (msgs: Message[]) => void;
|
||||
addMessage: (msg: Message) => void;
|
||||
deleteMessage: (id: number) => void;
|
||||
editMessage: (id: number, contents: string) => void;
|
||||
clearMessages: () => void;
|
||||
}
|
||||
|
||||
@@ -13,6 +15,8 @@ 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;
|
||||
};
|
||||
|
||||
@@ -27,6 +31,16 @@ export const useMessages = create<MessageStore>()(
|
||||
? 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" }
|
||||
@@ -47,7 +61,6 @@ export const useServerMessages = create<ServerMessageStore>()(
|
||||
set((state) => {
|
||||
const serverMsgs = state.messages[serverId] || [];
|
||||
|
||||
// avoid duplicates
|
||||
if (serverMsgs.some((m) => m.id === msg.id)) return state;
|
||||
|
||||
return {
|
||||
@@ -58,6 +71,26 @@ export const useServerMessages = create<ServerMessageStore>()(
|
||||
};
|
||||
}),
|
||||
|
||||
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
|
||||
|
||||
+31
-9
@@ -4,14 +4,28 @@ import { Dispatch, RefObject, SetStateAction } from "react";
|
||||
import { get } from "./request";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default async function auth(
|
||||
id: string,
|
||||
wsRef: RefObject<WebSocket | null>,
|
||||
setServer: Dispatch<SetStateAction<Server | undefined>>,
|
||||
addMessage: (m: Message) => void,
|
||||
onNewMessage?: (m: Message) => void,
|
||||
lastMessage?: number
|
||||
) {
|
||||
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;
|
||||
};
|
||||
|
||||
export default async function auth({
|
||||
id,
|
||||
wsRef,
|
||||
setServer,
|
||||
addMessage,
|
||||
onNewMessage,
|
||||
lastMessage,
|
||||
deleteMessage,
|
||||
editMessage,
|
||||
}: AuthParams) {
|
||||
console.log("Authenticating with server id:", id);
|
||||
|
||||
if (!id) return;
|
||||
@@ -45,7 +59,7 @@ export default async function auth(
|
||||
}
|
||||
|
||||
if (data.version) {
|
||||
setServer({ channels: [], ...data });
|
||||
if (setServer) setServer({ channels: [], ...data });
|
||||
ws.send(
|
||||
JSON.stringify({
|
||||
version: "0.0.1",
|
||||
@@ -66,6 +80,14 @@ export default async function auth(
|
||||
if (onNewMessage) onNewMessage(data.params as Message);
|
||||
addMessage(data.params as Message);
|
||||
break;
|
||||
|
||||
case "message_delete":
|
||||
deleteMessage(data.params.message_id);
|
||||
break;
|
||||
|
||||
case "message_update":
|
||||
editMessage(data.params.message_id, data.params.contents);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -24,6 +24,8 @@ export default interface App {
|
||||
|
||||
messages: Message[];
|
||||
addMessage: (v: Message) => void;
|
||||
deleteMessage: (id: number) => void;
|
||||
editMessage: (id: number, v: string) => void;
|
||||
|
||||
sidebarOpen: boolean;
|
||||
setSidebarOpen: SetState<boolean>;
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
export interface MessageType<T = string, P = object> {
|
||||
type: T;
|
||||
params: P;
|
||||
}
|
||||
|
||||
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 }>;
|
||||
Reference in New Issue
Block a user