bug fix of dm in create messages endpoint in convex and chat input, m…

…essage list for 1:1 convo dm added

convex/messages.ts

@@ -306,6 +306,7 @@ export const create = mutation({
       channelId: args.channelId,
       workspaceId: args.workspaceId,
       parentMessageId: args.parentMessageId,
+      conversationId: args.conversationId,
     });
 
     return messageId;

src/app/workspace/[workspaceId]/member/[memberId]/chat-input.tsx

@@ -0,0 +1,95 @@
+import { useCreateMessage } from "@/features/messages/api/use-create-messages";
+import { useGenerateUploadUrl } from "@/features/upload/api/use-generate-upload-url";
+
+import { useWorkspaceId } from "@/hooks/use-workspace-id";
+import dynamic from "next/dynamic";
+import Quill from "quill";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { Id } from "../../../../../../convex/_generated/dataModel";
+
+const Editor = dynamic(() => import("@/components/editor"), { ssr: false });
+
+interface ChatInputProps {
+  placeholder: string;
+  conversationId: Id<"conversations">;
+}
+
+type CreateMessageValues = {
+  // channelId: Id<"channels">;
+  conversationId: Id<"conversations">;
+  workspaceId: Id<"workspaces">;
+  body: string;
+  image?: Id<"_storage"> | undefined;
+};
+
+export const ChatInput = ({ placeholder, conversationId }: ChatInputProps) => {
+  const [editorKey, setEditorKey] = useState(0);
+  const [pending, setPending] = useState(false);
+
+  const editorRef = useRef<Quill | null>(null);
+
+  const workspaceId = useWorkspaceId();
+
+  const { mutate: generateUploadUrl } = useGenerateUploadUrl();
+  const { mutate: createMessage } = useCreateMessage();
+
+  const handleSubmit = async ({
+    body,
+    image,
+  }: {
+    body: string;
+    image: File | null;
+  }) => {
+    console.log(body, image);
+    try {
+      setPending(true);
+      editorRef?.current?.enable(false);
+
+      const values: CreateMessageValues = {
+        conversationId,
+        workspaceId,
+        body,
+        image: undefined,
+      };
+
+      if (image) {
+        const url = await generateUploadUrl({}, { throwError: true });
+
+        if (!url) throw new Error("Url not found");
+
+        const result = await fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": image.type },
+          body: image,
+        });
+
+        if (!result.ok) throw new Error("Failed to upload image");
+
+        const { storageId } = await result.json();
+
+        values.image = storageId;
+      }
+
+      await createMessage(values, { throwError: true });
+
+      setEditorKey((prevKey) => prevKey + 1);
+    } catch (error) {
+      toast.error("Failed to send message");
+    } finally {
+      setPending(false);
+      editorRef?.current?.enable(true);
+    }
+  };
+  return (
+    <div className="px-5 w-full">
+      <Editor
+        key={editorKey}
+        placeholder={placeholder}
+        onSubmit={handleSubmit}
+        disabled={pending}
+        innerRef={editorRef}
+      />
+    </div>
+  );
+};

src/app/workspace/[workspaceId]/member/[memberId]/conversation.tsx

@@ -4,6 +4,8 @@ import { useGetMember } from "@/features/members/api/use-get-member";
 import { useGetMessages } from "@/features/messages/api/use-get-messages";
 import { Loader } from "lucide-react";
 import { Header } from "./header";
+import { ChatInput } from "./chat-input";
+import { MessageList } from "@/components/message-list";
 
 interface ConversationProps {
   id: Id<"conversations">;
@@ -34,6 +36,19 @@ export const Conversations = ({ id }: ConversationProps) => {
         memberImage={member?.user.image}
         onClick={() => {}}
       />
+      <MessageList
+        data={results}
+        variant="channel"
+        memberImage={member?.user.image}
+        memberName={member?.user.name}
+        loadMore={loadMore}
+        canLoadMore={status === "CanLoadMore"}
+        isLoadingMore={status === "LoadingMore"}
+      />
+      <ChatInput
+        placeholder={`Message ${member?.user.name}`}
+        conversationId={id}
+      />
     </div>
   );
 };

src/components/message-list.tsx

@@ -3,7 +3,7 @@ import { GetMessageReturnType } from "@/features/messages/api/use-get-messages";
 import { Message } from "./message";
 import { channel } from "diagnostics_channel";
 import { ChannelHero } from "./channel-hero";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Id } from "../../convex/_generated/dataModel";
 import { useWorkspaceId } from "@/hooks/use-workspace-id";
 import { useCurrentMember } from "@/features/members/api/use-current-member";
@@ -64,6 +64,7 @@ export const MessageList = ({
     },
     {} as Record<string, typeof data>
   );
+
   return (
     <div className="flex-1 flex flex-col-reverse pb-4 overflow-y-auto messages-scrollbar">
       {Object.entries(groupedMessages || {}).map(([dateKey, messages]) => (
@@ -108,22 +109,23 @@ export const MessageList = ({
           })}
         </div>
       ))}
-      <div className="h-1" 
-      ref = {(el) => {
-        if(el) {
-          const observer = new IntersectionObserver(
-            ([entry]) => {
-              if(entry.isIntersecting && canLoadMore) {
-                loadMore()
-              }
-            },
-            {threshold : 1.0}
-
-          )
-          observer.observe(el)
-          return () => observer.disconnect()
-        }
-      }}/>
+      <div
+        className="h-1"
+        ref={(el) => {
+          if (el) {
+            const observer = new IntersectionObserver(
+              ([entry]) => {
+                if (entry.isIntersecting && canLoadMore) {
+                  loadMore();
+                }
+              },
+              { threshold: 1.0 }
+            );
+            observer.observe(el);
+            return () => observer.disconnect();
+          }
+        }}
+      />
       {isLoadingMore && (
         <div className="text-center my-2 relative">
           <hr className="absolute top-1/2 left-0 right-0 border-t border-gray-300" />

src/features/messages/api/use-get-messages.ts

@@ -2,7 +2,7 @@ import { usePaginatedQuery } from "convex/react";
 import { api } from "../../../../convex/_generated/api";
 import { Id } from "../../../../convex/_generated/dataModel";
 
-const BATCH_SIZE = 20;
+const BATCH_SIZE = 2;
 interface UseGetMessageProps {
   channelId?: Id<"channels">;
   conversationId?: Id<"conversations">;
@@ -26,7 +26,7 @@ export const useGetMessages = ({
     },
     { initialNumItems: BATCH_SIZE }
   );
-
+  console.log(results, status, loadMore);
   return {
     results,
     status,