adding ability to generate ai comments from admin view

convex/util.ts

@@ -62,6 +62,38 @@ export const authMutation = customMutation(
   customCtx(async (ctx) => ({ user: await getUserOrThrow(ctx) }))
 );
 
+export const adminAuthAction = customAction(
+  action,
+  customCtx(async (ctx) => {
+    const userId = (await ctx.auth.getUserIdentity())?.subject;
+
+    if (!userId) {
+      throw new ConvexError("must be logged in");
+    }
+
+    const user: any = await ctx.runQuery(internal.users.getUserById, {
+      userId,
+    });
+
+    if (!user) {
+      throw new ConvexError("user not found");
+    }
+
+    if (!user.isAdmin) {
+      throw new ConvexError("must be admin to run this action");
+    }
+
+    const _id: Id<"users"> = user._id;
+
+    return {
+      user: {
+        _id,
+        userId,
+      },
+    };
+  })
+);
+
 export const adminAuthMutation = customMutation(
   mutation,
   customCtx(async (ctx) => {

convex/vision.ts

@@ -2,9 +2,21 @@ import OpenAI from "openai";
 import { internalAction } from "./_generated/server";
 import { v } from "convex/values";
 import { api, internal } from "./_generated/api";
+import { adminAuthAction } from "./util";
 
 const openai = new OpenAI();
 
+export const adminGenerateAIComment = adminAuthAction({
+  args: {
+    thumbnailId: v.id("thumbnails"),
+  },
+  handler: async (ctx, args) => {
+    await ctx.scheduler.runAfter(0, internal.vision.generateAIComment, {
+      thumbnailId: args.thumbnailId,
+    });
+  },
+});
+
 export const generateAIComment = internalAction({
   args: {
     thumbnailId: v.id("thumbnails"),

src/app/thumbnails/[thumbnailId]/comments.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as z from "zod";
-import { useMutation, useQuery } from "convex/react";
+import { useAction, useMutation, useQuery } from "convex/react";
 import { Doc } from "../../../../convex/_generated/dataModel";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@@ -20,8 +20,6 @@ import { useForm } from "react-hook-form";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "../../../../convex/_generated/api";
 import { formatDistance } from "date-fns";
-import { useIsSubscribed } from "@/hooks/useIsSubscribed";
-import { UpgradeButton } from "@/components/upgrade-button";
 import { TrashIcon } from "lucide-react";
 import { useSession } from "@/lib/utils";
 import { AI_PROFILE_NAME } from "../../../../convex/constants";
@@ -37,6 +35,7 @@ export function Comments({ thumbnail }: { thumbnail: Doc<"thumbnails"> }) {
   const comments = useQuery(api.thumbnails.getComments, {
     thumbnailId: thumbnail._id,
   });
+  const adminGenerateAIComment = useAction(api.vision.adminGenerateAIComment);
   const deleteComment = useMutation(api.thumbnails.deleteComment);
   const user = useQuery(
     api.users.getMyUser,
@@ -79,6 +78,34 @@ export function Comments({ thumbnail }: { thumbnail: Doc<"thumbnails"> }) {
     <div>
       <h2 className="mb-4 mt-12 text-2xl font-bold text-center">Comments</h2>
 
+      {user?.isAdmin && (
+        <div className="flex justify-center mb-4">
+          <Button
+            onClick={() => {
+              adminGenerateAIComment({
+                thumbnailId: thumbnail._id,
+              })
+                .then(() => {
+                  toast({
+                    title: `Async Task Started`,
+                    description: `The AI Comment is being generated`,
+                    variant: "default",
+                  });
+                })
+                .catch(() => {
+                  toast({
+                    title: "Something happened",
+                    description: `We could not generate the AI Comment`,
+                    variant: "destructive",
+                  });
+                });
+            }}
+          >
+            Generate AI Comment
+          </Button>
+        </div>
+      )}
+
       <div className="max-w-2xl mx-auto mb-12 space-y-8">
         <div className="space-y-2">
           {comments?.map((comment) => {

src/util/toast-wrapper.ts

@@ -0,0 +1,32 @@
+import { useToast } from "@/components/ui/use-toast";
+
+export function wrapWithToast({
+  toast,
+  callback,
+  resourceText,
+}: {
+  toast: ReturnType<typeof useToast>["toast"];
+  callback: () => Promise<void | null>;
+  resourceText: string;
+}) {
+  toast({
+    title: `Generating ${resourceText}`,
+    description: `Please wait while your ${resourceText} is being created`,
+    variant: "default",
+  });
+  callback()
+    .then(() => {
+      toast({
+        title: `${resourceText} Created`,
+        description: `The ${resourceText} has been generated`,
+        variant: "default",
+      });
+    })
+    .catch(() => {
+      toast({
+        title: "Something happened",
+        description: `We could not generate the ${resourceText}`,
+        variant: "destructive",
+      });
+    });
+}