feat: implement chat background

Author: choosenname

app/api/conversation/[conversationId]/route.ts

@@ -0,0 +1,31 @@
+import {getConversationById} from "@/lib/conversation";
+import {NextResponse} from "next/server";
+import {db} from "@/lib/db";
+
+export async function PATCH(
+    req: Request,
+    { params }: { params: { conversationId: string } }
+) {
+    try{
+        const conversation = await getConversationById(params.conversationId);
+        const { imageUrl } = await req.json();
+
+        if(!conversation) {
+            return new NextResponse("Conversation is missing", { status: 400 });
+        }
+
+        const newConversation = await db.conversation.update({
+            where: {
+                id: conversation.id,
+            },
+            data: {
+                Background: imageUrl,
+            }
+        })
+
+        return NextResponse.json(newConversation);
+    } catch (error) {
+        console.log("[CONVERSATION_NOTIFICATION_PATCH]", error);
+        return new NextResponse("Internal Error", { status: 500 });
+    }
+}

components/chat/chat-header.tsx

@@ -10,6 +10,7 @@ import {DatePicker} from "@/components/ui/date-picker";
 import * as React from "react";
 import {Input} from "@/components/ui/input";
 import {Conversation} from "@prisma/client";
+import {ChatImageButton} from "@/components/chat/chat-image-button";
 
 interface ChatHeaderProps {
     name: string;
@@ -35,6 +36,7 @@ export const ChatHeader = ({
                 {name}
             </p>
             <div className="ml-auto flex items-center">
+                <ChatImageButton conversationId={conversation?.id}/>
                 <Input placeholder="Поиск по сообщениям"
                        value={searchMessage}
                        onChange={(e) => setSearchMessage(e.target.value)}

components/chat/chat-image-button.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import qs from "query-string";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { PictureInPicture } from "lucide-react";
+
+
+import { ActionTooltip } from "@/components/action-tooltip";
+import axios from "axios";
+import {useEffect, useState} from "react";
+import {useModal} from "@/hooks/use-modal-store";
+
+interface ChatImageButtonProps {
+    conversationId?: string;
+}
+
+export const ChatImageButton = ({conversationId}: ChatImageButtonProps) => {
+    const { onOpen } = useModal();
+
+    const Icon = PictureInPicture;
+    const tooltipLabel = "Фон чата" ;
+
+    return (
+        <ActionTooltip side="bottom" label={tooltipLabel}>
+            <button onClick={() => onOpen("chatImage", {conversationId: conversationId})} className="hover:opacity-75 transition mr-4">
+                <Icon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
+            </button>
+        </ActionTooltip>
+    )
+}

components/chat/conver-chat-messages.tsx

@@ -2,7 +2,7 @@
 
 import {ElementRef, Fragment, useEffect, useRef} from "react";
 import {format} from "date-fns";
-import {Member, Message, User} from "@prisma/client";
+import {Conversation, Member, Message, User} from "@prisma/client";
 import {Loader2, ServerCrash} from "lucide-react";
 
 import {useChatQuery} from "@/hooks/use-chat-query";
@@ -20,6 +20,7 @@ const DATE_FORMAT = "d MMM yyyy, HH:mm";
 interface ChatMessagesProps {
     name: string;
     member: ExtendedUser;
+    conversation: Conversation;
     chatId: string;
     apiUrl: string;
     socketUrl: string;
@@ -36,6 +37,7 @@ export const ConverChatMessages = ({
                                  member,
                                  chatId,
                                  apiUrl,
+                                       conversation,
                                  socketUrl,
                                  socketQuery,
                                  paramKey,
@@ -93,7 +95,7 @@ export const ConverChatMessages = ({
         </div>)
     }
 
-    return (<div ref={chatRef} className="flex-1 flex flex-col py-4 overflow-y-auto">
+    return (<div ref={chatRef} style={{backgroundImage: `url(${conversation.Background})`}} className="flex-1 flex flex-col py-4 overflow-y-auto">
         {!hasNextPage && <div className="flex-1"/>}
         {!hasNextPage && (<ChatWelcome
             type={type}

components/chat/conver-wrapper.tsx

@@ -37,6 +37,7 @@ export const ConverWrapper = ({currentMember, otherMember, conversation}: ChatWr
                 member={currentMember}
                 name={otherMember.name}
                 chatId={conversation.id}
+                conversation={conversation}
                 type="conversation"
                 apiUrl="/api/direct-messages"
                 paramKey="conversationId"

components/modals/chat-image-modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import axios from "axios";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+
+import {
+    Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { FileUpload } from "@/components/files/file-upload";
+import { useRouter } from "next/navigation";
+import { useModal } from "@/hooks/use-modal-store";
+import { useEffect, useState } from "react";
+import { Department } from "@prisma/client";
+
+const formSchema = z.object({
+    imageUrl: z.string()
+});
+
+export const ChatImageModal = () => {
+    const { isOpen, onClose, type , data} = useModal();
+    const [departments, setDepartments] = useState<Department[]>([]);
+    const router = useRouter();
+
+    const isModalOpen = isOpen && type === "chatImage";
+
+    const form = useForm({
+        resolver: zodResolver(formSchema), defaultValues: {
+            imageUrl: "",
+        }
+    });
+
+    const isLoading = form.formState.isSubmitting;
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+        try {
+            await axios.patch(`/api/conversation/${data.conversationId}`, values);
+
+            form.reset();
+            router.refresh();
+            onClose();
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    useEffect(() => {
+        const fetchDepartments = async () => {
+            try {
+                const response = await axios.get('/api/departments');
+                setDepartments(response.data);
+            } catch (error) {
+                console.log(error);
+            }
+        };
+        fetchDepartments();
+    }, []);
+
+    const handleClose = () => {
+        form.reset();
+        onClose();
+    }
+
+    return (
+        <Dialog open={isModalOpen} onOpenChange={handleClose}>
+            <DialogContent className="bg-white text-black p-0 overflow-hidden">
+                <DialogHeader className="pt-8 px-6">
+                    <DialogTitle className="text-2xl text-center font-bold">
+                        Настройте чат
+                    </DialogTitle>
+                    <DialogDescription className="text-center text-zinc-500">
+                        Настройте фон чата
+                    </DialogDescription>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                        <div className="space-y-8 px-6">
+                            <div className="flex items-center justify-center text-center">
+                                <FormField
+                                    control={form.control}
+                                    name="imageUrl"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <FileUpload
+                                                    endpoint="serverImage"
+                                                    value={field.value}
+                                                    onChange={field.onChange}
+                                                />
+                                            </FormControl>
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </div>
+                        <DialogFooter className="bg-gray-100 px-6 py-4">
+                            <Button disabled={isLoading}>
+                                Сохранить
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
+}

components/modals/create-server-modal.tsx

@@ -1,4 +1,4 @@
-"use client";
+    "use client";
 
 import axios from "axios";
 import * as z from "zod";

components/providers/modal-provider.tsx

@@ -16,6 +16,7 @@ import {DeleteMessageModal} from "@/components/modals/delete-message-modal";
 import {EditProfileModal} from "@/components/modals/edit-profile-modal";
 import {ForwardMessageModal} from "@/components/modals/forward-message-modal";
 import {CreateServerAdminModal} from "@/components/modals/create-server-admin-modal";
+import {ChatImageModal} from "@/components/modals/chat-image-modal";
 
 export const ModalProvider = () => {
     const [isMounted, setIsMounted] = useState(false);
@@ -44,6 +45,7 @@ export const ModalProvider = () => {
             <DeleteMessageModal />
             <EditProfileModal />
             <ForwardMessageModal/>
+            <ChatImageModal/>
         </>
     )
 }

hooks/use-modal-store.ts

@@ -3,13 +3,14 @@ import { create } from "zustand";
 
 export type ModalType = "createServer" | "createServerAdmin" | "invite" | "editServer" | "members" | "createChannel"
     | "leaveServer" | "deleteServer"  | "deleteChannel" | "editChannel" | "messageFile" | "deleteMessage"
-    | "editProfile" | "forwardMessage";
+    | "editProfile" | "forwardMessage" | "chatImage";
 
 interface ModalData {
     user?: User;
     server?: Server;
     channel?: Channel;
     message?: Message;
+    conversationId?: string;
     channelType?: ChannelType;
     apiUrl?: string;
     query?: Record<string, any>;