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

Simple Dm home / hub

Browse Source
This commit is contained in:
selimaj-dev
2025-10-05 11:01:01 +02:00
parent 02ebeb264b
commit fa46abde21
7 changed files with 141 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+22
View File
@@ -37,11 +37,13 @@
"lexical": "^0.34.0",
"lucide-react": "^0.541.0",
"next": "15.5.0",
"next-themes": "^0.4.6",
"pg": "^8.16.3",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-markdown": "^10.1.0",
"remark-gfm": "^4.0.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
@@ -4383,6 +4385,16 @@
}
}
},
"node_modules/next-themes": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
"integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -4895,6 +4907,16 @@
"is-arrayish": "^0.3.1"
}
},
"node_modules/sonner": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
"integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
"license": "MIT",
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
"react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
}
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
package.json
+2
View File
@@ -40,11 +40,13 @@
"lexical": "^0.34.0",
"lucide-react": "^0.541.0",
"next": "15.5.0",
"next-themes": "^0.4.6",
"pg": "^8.16.3",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-markdown": "^10.1.0",
"remark-gfm": "^4.0.1",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
src/app/chat/page.tsx
+39 -29
View File
@@ -7,23 +7,29 @@ import Message from "@/types/message";
import useUser, { User } from "@/hooks/get-user";
import { NumberMap } from "@/types/typeUtils";
import auth, { makeAddress } from "@/lib/auth";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { toast } from "sonner";
// In this testing instance we are assuming that Alice's node is localhost
// To make this functional we need to add a settings feature to the api
export default function AppHome() {
// Again we assume a static id, specifically Alice's user id
// const { id } = useParams<{ id: string }>();
const id = 667;
export default function Chat() {
const ip = "localhost";
const wsRef = useRef<WebSocket | null>(null);
const [messages, setMessages] = useState<Message[]>([]);
const { user, loading } = useUser();
const [userList, setUserList] = useState<NumberMap<User>>({});
useEffect(() => {
if (!ip || !user || loading) return;
auth(makeAddress(ip, 7090), wsRef, () => {}, setMessages);
auth(
makeAddress(ip, 7090),
wsRef,
() => {},
() => {},
(m) => {
toast(`New message from ${m.from}`, {
description: m.contents.slice(0, 80),
});
}
);
setUserList((prev) => {
prev[user.id] = user;
return prev;
@@ -31,26 +37,30 @@ export default function AppHome() {
}, [ip, user, loading]);
return (
<AppSidebar user={user}>
<MessageBox
channelName="Alice"
userList={userList}
setUserList={setUserList}
messages={messages
.filter((m) => m.channel_id === id || m.from === id)
.toReversed()}
sendMessage={(message) => {
wsRef.current?.send(
JSON.stringify({
type: "send_message",
params: {
channel_id: id,
contents: message,
},
})
);
}}
/>
<AppSidebar user={{ id: 173, username: "leo", email: "" }}>
<Card className="bg-background w-full">
<CardHeader>
<CardTitle>Direct Messages</CardTitle>
</CardHeader>
<CardContent>
<DMItem name="Alice" status="online" />
</CardContent>
</Card>
</AppSidebar>
);
}
function DMItem({ name, status }: { name: string; status: string }) {
return (
<Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
<Avatar className="h-8 w-8">
<AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
<AvatarFallback>{name[0]}</AvatarFallback>
</Avatar>
<div className="flex flex-col">
<span className="text-sm font-medium">{name}</span>
<span className="text-xs text-muted-foreground">{status}</span>
</div>
</Card>
);
}
src/app/layout.tsx
+2
View File
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { cookies } from "next/headers";
import { parseClientSettings } from "@/lib/clientSettings";
import { Toaster } from "@/components/ui/sonner";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -34,6 +35,7 @@ export default async function RootLayout({
className={`${geistSans.variable} ${geistMono.variable} antialiased ${settings.theme}`}
>
{children}
<Toaster />
</body>
</html>
);
src/components/ui/badge.tsx
+46
View File
@@ -0,0 +1,46 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant,
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span"
return (
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }
src/components/ui/sonner.tsx
+25
View File
@@ -0,0 +1,25 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
style={
{
"--normal-bg": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
} as React.CSSProperties
}
{...props}
/>
)
}
export { Toaster }
src/lib/auth.ts
+5 -2
View File
@@ -11,7 +11,8 @@ export default async function auth(
ip: string,
wsRef: RefObject<WebSocket | null>,
setServer: Dispatch<SetStateAction<Server | undefined>>,
setMessages: Dispatch<SetStateAction<Message[]>>
setMessages: Dispatch<SetStateAction<Message[]>>,
onNewMessage?: (m: Message) => void
) {
const server_auth = (
(await axios.post("/api/auth", { server_ip: ip })).data as any
@@ -44,10 +45,12 @@ export default async function auth(
switch (data.type) {
case "authenticated":
setMessages(data.params.messages);
break;
case "message_create":
// setMessages([...messages, data.params]);
if (onNewMessage) onNewMessage(data.params as Message);
setMessages((prev) => [...prev, data.params]);
break;
}
};