Skip to content

Commit 5d648c9

Browse files
chenxin-yanchenxin-yan
committed
add create chatroom dialog; move delete button inside chatrooms
1 parent 35440bb commit 5d648c9

File tree

6 files changed

+150
-48
lines changed

6 files changed

+150
-48
lines changed

‎app/chatrooms/[chatroomId]/components/delete-chatroom-button.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use client";
2+
3+
import { deleteChatroom } from "@/app/chatrooms/actions";
4+
import { Button } from "@/shared/components/ui/button";
5+
import { Trash2 } from "lucide-react";
6+
import { useRouter } from "next/navigation";
7+
import { useState } from "react";
8+
9+
export default function DeleteChatroomButton({
10+
classroomId,
11+
chatroomId,
12+
assistantId,
13+
}: {
14+
classroomId: number;
15+
chatroomId: string;
16+
assistantId: string | null;
17+
}) {
18+
const [isDeleting, setIsDeleting] = useState(false);
19+
const router = useRouter();
20+
21+
const handleDelete = async () => {
22+
if (confirm("Are you sure you want to delete this chatroom?")) {
23+
setIsDeleting(true);
24+
try {
25+
await deleteChatroom(chatroomId, assistantId);
26+
router.push(`/classrooms/${classroomId}/chatrooms`);
27+
} catch (error) {
28+
console.error("Error deleting chatroom:", error);
29+
alert("Failed to delete chatroom. Please try again.");
30+
} finally {
31+
setIsDeleting(false);
32+
}
33+
}
34+
};
35+
36+
return (
37+
<Button
38+
size={"sm"}
39+
onClick={handleDelete}
40+
disabled={isDeleting}
41+
variant={"destructive"}
42+
>
43+
<Trash2 />
44+
{isDeleting ? "Deleting..." : "Delete"}
45+
</Button>
46+
);
47+
}

‎app/chatrooms/[chatroomId]/components/message-area.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,12 +251,12 @@ const MessageArea = ({
251251
<ChatBubbleAvatar src={message.avatar_url!} fallback="AI" />
252252
<div className="flex flex-col">
253253
<div className="mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground">
254+
{message.full_name || "Unknown"} • {formattedTime}
254255
{message.is_ask && (
255256
<span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-200">
256257
Ask LLM
257258
</span>
258259
)}
259-
{message.full_name || "Unknown"} • {formattedTime}
260260
</div>
261261
<ChatBubbleMessage className="prose">
262262
<ReactMarkdown>{cleanMessage(message.content)}</ReactMarkdown>

‎app/chatrooms/[chatroomId]/page.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createClient } from "@shared/utils/supabase/server";
22
import { redirect } from "next/navigation";
33
import config from "../config";
4+
import DeleteChatroomButton from "./components/delete-chatroom-button";
45
import InviteChatroomButton from "./components/invite-chatroom-dialog";
56
import LeaveChatroomButton from "./components/leave-chatroom-button";
67
import MessageArea from "./components/message-area";
@@ -39,6 +40,9 @@ const ChatroomPage = async ({
3940
full_name,
4041
avatar_url
4142
)
43+
),
44+
Chatrooms (
45+
ragflow_session_id
4246
)
4347
`
4448
)
@@ -51,6 +55,7 @@ const ChatroomPage = async ({
5155
}
5256

5357
const classroomId = chatroomMembers[0].Classroom_Members.classroom_id;
58+
const assistantId = chatroomMembers[0].Chatrooms.ragflow_session_id;
5459

5560
// Get current Chatroom Member
5661
const {
@@ -122,11 +127,17 @@ const ChatroomPage = async ({
122127
<div className="flex items-center justify-between border-b p-4">
123128
<h1 className="text-3xl font-medium tracking-tight">{chatroom.name}</h1>
124129
<div className="flex gap-2">
125-
{currentUser !== chatroom.creater_user_id && (
130+
{currentUser !== chatroom.creater_user_id ? (
126131
<LeaveChatroomButton
127132
chatroomId={chatroomId}
128133
classroomId={classroomId}
129134
/>
135+
) : (
136+
<DeleteChatroomButton
137+
chatroomId={chatroomId}
138+
classroomId={classroomId}
139+
assistantId={assistantId}
140+
/>
130141
)}
131142
<InviteChatroomButton
132143
chatroomId={chatroomId}

‎app/chatrooms/actions.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const createChatroom = async (formData: FormData) => {
2323
return; // {supabaseCallSuccess: false}
2424
}
2525

26-
const name = (formData.get("name") as string) || "New Chatroom";
26+
const name = (formData.get("chatroom-name") as string) || "New Chatroom";
2727
const classroom_id = parseInt(formData.get("classroom_id") as string);
2828

2929
// Create a new chatroom
@@ -77,7 +77,6 @@ export const createChatroom = async (formData: FormData) => {
7777

7878
export const deleteChatroom = async (
7979
chatroomId: string,
80-
classroomId: number,
8180
chatroomAssistantId: string | null
8281
) => {
8382
const supabase = await createClient();

‎app/classrooms/[classroomId]/chatrooms/_components/create-chatroom-dialog.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use client";
2+
3+
import { createChatroom } from "@/app/chatrooms/actions";
4+
import { Button } from "@shared/components/ui/button";
5+
import {
6+
Dialog,
7+
DialogContent,
8+
DialogDescription,
9+
DialogFooter,
10+
DialogHeader,
11+
DialogTitle,
12+
DialogTrigger,
13+
} from "@shared/components/ui/dialog";
14+
import { Input } from "@shared/components/ui/input";
15+
import { Label } from "@shared/components/ui/label";
16+
import { Plus } from "lucide-react";
17+
import { useState } from "react";
18+
import { useFormStatus } from "react-dom";
19+
20+
function CreateButton() {
21+
const { pending } = useFormStatus();
22+
23+
return (
24+
<Button type="submit" disabled={pending}>
25+
{pending ? "Creating..." : "Create"}
26+
</Button>
27+
);
28+
}
29+
30+
export function CreateChatroomDialog({ classroomId }: { classroomId: string }) {
31+
const [open, setOpen] = useState(false);
32+
33+
const handleCreateChatroom = async (formData: FormData) => {
34+
await createChatroom(formData);
35+
setOpen(false); // Close the dialog after submission
36+
};
37+
38+
return (
39+
<Dialog open={open} onOpenChange={setOpen}>
40+
<DialogTrigger asChild>
41+
<Button size="sm">
42+
<Plus /> New
43+
</Button>
44+
</DialogTrigger>
45+
<DialogContent className="sm:max-w-[350px]">
46+
<DialogHeader>
47+
<DialogTitle>New Chatroom</DialogTitle>
48+
<DialogDescription>
49+
Create a new Chatroom for current classroom.
50+
</DialogDescription>
51+
</DialogHeader>
52+
<form action={handleCreateChatroom} className="flex gap-2">
53+
<div className="grid gap-4 py-4">
54+
<div className="grid grid-cols-4 items-center gap-4">
55+
<Label htmlFor="chatroom-name" className="text-right">
56+
Name
57+
</Label>
58+
<Input
59+
id="chatroom-name"
60+
name="name"
61+
defaultValue="New Chatroom"
62+
className="col-span-3"
63+
required
64+
/>
65+
</div>
66+
<input
67+
type="text"
68+
name="classroom_id"
69+
defaultValue={classroomId}
70+
readOnly
71+
hidden
72+
required
73+
/>
74+
<DialogFooter>
75+
<CreateButton />
76+
</DialogFooter>
77+
</div>
78+
</form>
79+
</DialogContent>
80+
</Dialog>
81+
);
82+
}

‎app/classrooms/[classroomId]/chatrooms/page.tsx‎

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Separator } from "@/shared/components/ui/separator";
12
import { createClient } from "@shared/utils/supabase/server";
23
import Link from "next/link";
3-
import { createChatroom, deleteChatroom } from "@/app/chatrooms/actions";
4+
import { CreateChatroomDialog } from "./_components/create-chatroom-dialog";
45

56
const ChatroomsPage = async ({
67
params,
@@ -55,33 +56,13 @@ const ChatroomsPage = async ({
5556
return (
5657
<div className="container mx-auto p-4">
5758
<div className="mb-6 flex items-center justify-between">
58-
<h1 className="text-2xl font-bold">Your Chatrooms</h1>
59-
{/* TODO: probably want to change this part to interactive? so that we can give error messagse and what not if createChatroom failed */}
60-
<form action={createChatroom} className="flex gap-2">
61-
<input
62-
type="text"
63-
name="name"
64-
placeholder="Chatroom name"
65-
className="rounded border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none"
66-
required
67-
/>
68-
<input
69-
type="text"
70-
name="classroom_id"
71-
defaultValue={classroomId}
72-
readOnly
73-
hidden
74-
required
75-
/>
76-
<button
77-
type="submit"
78-
className="rounded bg-green-600 px-4 py-2 text-white transition-colors hover:bg-green-700"
79-
>
80-
Create Chatroom
81-
</button>
82-
</form>
59+
<h1 className="text-3xl font-medium tracking-tight">Chatrooms</h1>
60+
61+
<CreateChatroomDialog classroomId={classroomId} />
8362
</div>
8463

64+
<Separator />
65+
8566
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
8667
{chatrooms.length > 0 ? (
8768
chatrooms.map((chatroom) => (
@@ -94,24 +75,6 @@ const ChatroomsPage = async ({
9475
>
9576
Enter Chatroom
9677
</Link>
97-
98-
{currentUser === chatroom.creater_user_id && (
99-
<form
100-
action={deleteChatroom.bind(
101-
null,
102-
chatroom.id,
103-
chatroom.classroom_id,
104-
chatroom.Classrooms.chatroom_assistant_id
105-
)}
106-
>
107-
<button
108-
type="submit"
109-
className="rounded bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700"
110-
>
111-
Delete
112-
</button>
113-
</form>
114-
)}
11578
</div>
11679
</div>
11780
))

0 commit comments

Comments
 (0)