chore: added user hover tooltip for preview page

Author: mikita-kandratsyeu

actions/chat/get-chat-conversations.ts

@@ -52,6 +52,7 @@ export const getChatConversations = async ({ sharedConversationId }: GetChatConv
             isCreated: Boolean(conversation.shared),
             isOnlyAuth: conversation.shared?.isOnlyAuth ?? false,
             isShared: conversation.shared?.isActive ?? false,
+            pictureUrl: conversation.user?.pictureUrl,
             username: conversation.user?.name,
           },
         },
@@ -95,11 +96,12 @@ export const getChatConversations = async ({ sharedConversationId }: GetChatConv
           position: newChatConversation.position,
           title: newChatConversation.title,
           shared: {
-            id: null,
             expiredAt: null,
+            id: null,
             isCreated: false,
             isOnlyAuth: false,
             isShared: false,
+            pictureUrl: null,
             username: '',
           },
         },
@@ -114,6 +116,7 @@ export const getChatConversations = async ({ sharedConversationId }: GetChatConv
         isCreated: Boolean(conversation.shared),
         isOnlyAuth: conversation.shared?.isOnlyAuth ?? false,
         isShared: conversation.shared?.isActive ?? false,
+        pictureUrl: conversation.user?.pictureUrl,
         username: conversation.user?.name,
       },
     }));

actions/csm/create-csm-issue.ts

@@ -0,0 +1,71 @@
+'use server';
+
+import { getTranslations } from 'next-intl/server';
+
+import { db } from '@/lib/db';
+import { createWebSocketNotification } from '@/lib/notifications';
+
+type CreateCsmIssue = {
+  categoryId: string;
+  description: string;
+  email?: string | null;
+  files?: { url: string; name: string }[];
+  userId?: string;
+};
+
+export const createCsmIssue = async ({
+  categoryId,
+  description,
+  email = '',
+  files = [],
+  userId,
+}: CreateCsmIssue) => {
+  const t = await getTranslations('csm-modal.notifications');
+
+  const lastIssueInDb = await db.csmIssue.findMany({ orderBy: { createdAt: 'desc' }, take: 1 });
+  const issueNumber = `CSM-${lastIssueInDb.length ? Number(lastIssueInDb[0].name.split('-')[1]) + 1 : 1}`;
+
+  const issue = await db.csmIssue.create({
+    data: {
+      categoryId,
+      description,
+      email,
+      name: issueNumber,
+      userId,
+    },
+  });
+
+  await db.csmAttachment.createMany({
+    data: files.map((file: { url: string; name: string }) => ({
+      csmIssueId: issue.id,
+      name: file.name,
+      url: file.url,
+    })),
+  });
+
+  if (userId) {
+    await createWebSocketNotification({
+      channel: `notification_channel_${userId}`,
+      data: {
+        body: t('success'),
+        title: `${issue.name}`.toUpperCase(),
+        userId,
+      },
+      event: `private_event_${userId}`,
+    });
+  }
+
+  const ownerId = process.env.NEXT_PUBLIC_OWNER_ID as string;
+
+  await createWebSocketNotification({
+    channel: `notification_channel_${ownerId}`,
+    data: {
+      body: t('ownerSuccess', { user: email }),
+      title: `${issue.name}`.toUpperCase(),
+      userId: ownerId,
+    },
+    event: `private_event_${ownerId}`,
+  });
+
+  return { issueNumber: issue.name };
+};

actions/docs/get-app-docs.ts

@@ -1,15 +1,18 @@
 'use server';
 
 import { promises as fs } from 'fs';
+import { getLocale } from 'next-intl/server';
 
 import { getGithubContents } from '../github/get-contents';
 
 export const getAppDocs = async (document: string) => {
+  const locale = await getLocale();
+
   try {
     const content =
       process.env.NODE_ENV === 'development'
-        ? await fs.readFile(`${process.cwd()}/docs/${document}.md`, 'utf8')
-        : await getGithubContents({ path: `docs/${document}.md` });
+        ? await fs.readFile(`${process.cwd()}/docs/${locale}/${document}.md`, 'utf8')
+        : await getGithubContents({ path: `docs/${locale}/${document}.md` });
 
     return content;
   } catch (error) {

actions/github/get-releases.ts

@@ -45,6 +45,7 @@ export const getGithubReleases = async ({
       },
       TEN_MINUTE_SEC,
     );
+
     return githubReleases;
   } catch (error) {
     console.error('[GET_GITHUB_RELEASES]', error);

app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-body.tsx

@@ -59,13 +59,14 @@ type ChatBodyProps = {
   introMessages: string[];
   isShared?: boolean;
   isSubmitting?: boolean;
-  sharedName?: string | null;
   onSubmit: (
     event: SyntheticEvent,
     options?: {
       userMessage?: string;
     },
   ) => void;
+  sharedName?: string | null;
+  sharedPicture?: string | null;
 };
 
 const ChatBodyComponent = ({
@@ -74,8 +75,9 @@ const ChatBodyComponent = ({
   introMessages,
   isShared,
   isSubmitting,
-  sharedName,
   onSubmit,
+  sharedName,
+  sharedPicture,
 }: ChatBodyProps) => {
   const t = useTranslations('chat.body');
 
@@ -114,14 +116,17 @@ const ChatBodyComponent = ({
               {messages.map((message) => {
                 const isAssistant = message.role === ChatCompletionRole.ASSISTANT;
 
-                const name = (() => {
+                const [name, picture] = (() => {
                   if (isShared && !isAssistant) {
-                    return sharedName ?? 'Current User';
+                    return [sharedName ?? 'Current User', sharedPicture];
+                  }
+
+                  if (isAssistant) {
+                    return ['Nova Copilot', null];
                   }
 
-                  return isAssistant ? 'Nova Copilot' : user?.name || 'Current User';
+                  return [user?.name || 'Current User', user?.image];
                 })();
-                const picture = isAssistant ? null : user?.image;
 
                 return (
                   <div

app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-bubble.tsx

@@ -52,7 +52,7 @@ export const ChatBubble = ({
     <div className="pb-4 pt-2">
       <div className="flex gap-x-4">
         <Avatar className="border dark:border-muted-foreground">
-          {!isAssistant && !isShared && <AvatarImage src={picture ?? ''} />}
+          {!isAssistant && <AvatarImage src={picture ?? ''} />}
           {isAssistant && (
             <AvatarImage className="bg-white p-2 rounded-full" src="/assets/copilot.svg" />
           )}

app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat.tsx

@@ -307,6 +307,7 @@ export const Chat = ({ conversations = [], initialData, isEmbed, isShared }: Cha
             isSubmitting={isSubmitting}
             onSubmit={handleSubmit}
             sharedName={conversations?.[0]?.shared?.username}
+            sharedPicture={conversations?.[0]?.shared?.pictureUrl}
           />
           {!isShared && (
             <ChatInput

app/(dashboard)/(routes)/preview-course/[courseId]/_components/preview-description.tsx

@@ -10,12 +10,15 @@ import { GenerateTextResponseAi } from '@/components/ai/generate-text-response-a
 import { IconBadge } from '@/components/common/icon-badge';
 import { Price } from '@/components/common/price';
 import { TextBadge } from '@/components/common/text-badge';
+import { UserHoverCard } from '@/components/common/user-hover-card';
+import { Button } from '@/components/ui';
 import { ChatCompletionRole, USER_TRANSLATE_PROMPT } from '@/constants/ai';
 import { TIMESTAMP_PREVIEW_TEMPLATE } from '@/constants/common';
 import { useCurrentUser } from '@/hooks/use-current-user';
 
 type PreviewDescriptionProps = {
   author?: string | null;
+  authorUserId?: string | null;
   categories: string[];
   chaptersLength: number;
   customRates: string | null;
@@ -32,6 +35,7 @@ type PreviewDescriptionProps = {
 
 export const PreviewDescription = ({
   author,
+  authorUserId,
   categories,
   chaptersLength,
   customRates,
@@ -89,11 +93,16 @@ export const PreviewDescription = ({
         </div>
       )}
       <div className="mt-4 gap-y-1">
-        {author && (
-          <div className="flex items-center gap-x-1 text-neutral-500 mb-1">
-            <BookA className="h-4 w-4" />
-            <span className="text-xs">{t('author', { author })}</span>
-          </div>
+        {author && authorUserId && (
+          <UserHoverCard userId={authorUserId}>
+            <Button
+              className="flex items-center gap-x-1 text-neutral-500 p-0 font-normal"
+              variant="link"
+            >
+              <BookA className="h-4 w-4" />
+              <span className="text-xs">{t('author', { author })}</span>
+            </Button>
+          </UserHoverCard>
         )}
         <div className="flex items-center gap-x-1 text-neutral-500 mb-1">
           <CalendarDays className="h-4 w-4" />

app/(dashboard)/(routes)/preview-course/[courseId]/page.tsx

@@ -83,6 +83,7 @@ const PreviewCourseIdPage = async (props: PreviewCourseIdPageProps) => {
           )}
           <PreviewDescription
             author={course?.user?.name}
+            authorUserId={course?.userId}
             categories={[course.category!.name]}
             chaptersLength={course._count.chapters}
             customRates={course.customRates}

app/api/csm/create/route.ts

@@ -1,67 +1,24 @@
 import { ReasonPhrases, StatusCodes } from 'http-status-codes';
 import { NextRequest, NextResponse } from 'next/server';
-import { getTranslations } from 'next-intl/server';
 
 import { getCurrentUser } from '@/actions/auth/get-current-user';
-import { db } from '@/lib/db';
-import { createWebSocketNotification } from '@/lib/notifications';
+import { createCsmIssue } from '@/actions/csm/create-csm-issue';
 
 export const POST = async (req: NextRequest) => {
   try {
-    const t = await getTranslations('csm-modal.notifications');
-
     const user = await getCurrentUser();
 
     const { email, categoryId, description, files } = await req.json();
 
-    const lastIssueInDb = await db.csmIssue.findMany({ orderBy: { createdAt: 'desc' }, take: 1 });
-    const issueNumber = `CSM-${lastIssueInDb.length ? Number(lastIssueInDb[0].name.split('-')[1]) + 1 : 1}`;
-
-    const issue = await db.csmIssue.create({
-      data: {
-        categoryId,
-        description,
-        email,
-        name: issueNumber,
-        userId: user?.userId,
-      },
-    });
-
-    await db.csmAttachment.createMany({
-      data: files.map((file: { url: string; name: string }) => ({
-        csmIssueId: issue.id,
-        name: file.name,
-        url: file.url,
-      })),
-    });
-
-    if (user) {
-      const userId = user.userId;
-
-      await createWebSocketNotification({
-        channel: `notification_channel_${userId}`,
-        data: {
-          body: t('success'),
-          title: `${issue.name}`.toUpperCase(),
-          userId,
-        },
-        event: `private_event_${userId}`,
-      });
-    }
-
-    const ownerId = process.env.NEXT_PUBLIC_OWNER_ID as string;
-
-    await createWebSocketNotification({
-      channel: `notification_channel_${ownerId}`,
-      data: {
-        body: t('ownerSuccess', { user: user?.name || email }),
-        title: `${issue.name}`.toUpperCase(),
-        userId: ownerId,
-      },
-      event: `private_event_${ownerId}`,
+    const csmIssue = await createCsmIssue({
+      categoryId,
+      description,
+      email,
+      files,
+      userId: user?.userId,
     });
 
-    return NextResponse.json({ issueNumber: issue.name });
+    return NextResponse.json({ issueNumber: csmIssue.issueNumber });
   } catch (error) {
     console.error('[CSM_CREATE]', error);