Merge pull request #68 from guillermoscript/64-free-chat-implement-ai-powered-conversational-interface

"Add chat functionality for students"

Author: HectorZR

actions/dashboard/chatActions.ts

@@ -0,0 +1,61 @@
+'use server'
+
+import { createResponse } from '@/utils/functions'
+import { createClient } from '@/utils/supabase/server'
+import { Tables } from '@/utils/supabase/supabase'
+
+export async function studentCreateNewChat (state: {
+    chatType: Tables<'chats'>['chat_type']
+    title: string
+}) {
+    const supabase = createClient()
+    const userData = await supabase.auth.getUser()
+
+    if (userData.error) {
+        return createResponse('error', 'Error no user found', null, 'Error no user found')
+    }
+
+    const studentId = userData.data.user?.id
+
+    const chatInsert = await supabase.from('chats').insert({
+        user_id: studentId,
+        chat_type: state.chatType,
+        created_at: new Date().toISOString(),
+        title: state.title
+    }).select('chat_id').single()
+
+    if (chatInsert.error) {
+        return createResponse('error', 'Error creating chat', null, 'Error creating chat')
+    }
+
+    // return chat id
+    // revalidatePath('/dashboard/student/chat/', 'layout')
+    return createResponse('success', 'Chat created successfully', chatInsert.data, null)
+}
+
+export async function studentSubmitMessage (state: {
+    chatId: number
+    message: string
+}) {
+    const supabase = createClient()
+    const userData = await supabase.auth.getUser()
+
+    if (userData.error) {
+        return createResponse('error', 'Error no user found', null, 'Error no user found')
+    }
+
+    const studentId = userData.data.user?.id
+
+    const messageInsert = await supabase.from('messages').insert({
+        user_id: studentId,
+        chat_id: state.chatId,
+        content: state.message,
+        created_at: new Date().toISOString()
+    })
+
+    if (messageInsert.error) {
+        return createResponse('error', 'Error creating message', null, 'Error creating message')
+    }
+
+    return createResponse('success', 'Message sent successfully', null, null)
+}

actions/dashboard/linkProductToCourse.ts

@@ -4,9 +4,9 @@ import { createResponse } from '@/utils/functions'
 export async function linkProductAction (data: courseSchemaType) {
     console.log(data)
 
-    if (!data.price || !data.status || !data.course_id) {
-        return createResponse('error', 'Please fill in all fields', null, null)
-    }
+    // if (!data.price || !data.status || !data.course_id) {
+    //     return createResponse('error', 'Please fill in all fields', null, null)
+    // }
 
     return createResponse('success', 'Product linked successfully', null, null)
 }

app/api/chat/route.ts

@@ -1,13 +1,58 @@
 import { google } from '@ai-sdk/google'
 import { StreamingTextResponse, streamText } from 'ai'
 
+import { createClient } from '@/utils/supabase/server'
+// Allow streaming responses up to 30 seconds
+export const dynamic = 'force-dynamic'
+export const maxDuration = 60
+
 export async function POST (req: Request) {
-    const { messages } = await req.json()
+    const { messages, chatId } = await req.json()
+    const supabase = createClient()
+
+    const userData = await supabase.auth.getUser()
+
+    if (userData.error) {
+        return Response.redirect('/login')
+    }
 
     const result = await streamText({
         model: google('models/gemini-1.5-pro-latest'),
         messages,
-        temperature: 0
+        temperature: 0,
+        async onFinish (event) {
+            const lastUserMessage = messages[messages.length - 1]
+
+            console.log(messages)
+
+            console.log(lastUserMessage)
+
+            const chat_id = chatId ?? (await supabase.from('chats').select('chat_id').eq('title', lastUserMessage.content).single()).data.chat_id
+
+            console.log(chat_id)
+
+            const messageInsert = await supabase.from('messages').insert([
+                {
+                    chat_id,
+                    message: lastUserMessage.content,
+                    created_at: new Date().toISOString(),
+                    sender: 'user'
+                },
+                {
+                    chat_id,
+                    message: event.text,
+                    created_at: new Date().toISOString(),
+                    sender: 'assistant'
+                }
+
+            ])
+
+            if (messageInsert.error) {
+                console.log('Error creating message', messageInsert.error)
+            }
+
+            console.log('Message sent successfully')
+        }
     })
 
     return new StreamingTextResponse(result.toAIStream())

app/dashboard/student/chat/[chatId]/free-chat/error.tsx

@@ -0,0 +1,26 @@
+'use client' // Error components must be Client Components
+
+import { useEffect } from 'react'
+
+import GenericError from '@/components/GenericError'
+
+export default function Error ({
+    error,
+    reset
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    useEffect(() => {
+    // Log the error to an error reporting service
+        console.error(error)
+    }, [error])
+
+    return (
+        <GenericError
+            retry={reset}
+            title="Oh no! An error occurred loading the chat."
+            description={error.message}
+        />
+    )
+}

app/dashboard/student/chat/[chatId]/free-chat/page.tsx

@@ -0,0 +1,45 @@
+import FreeChat from '@/components/dashboards/student/chat/FreeChat'
+import { createClient } from '@/utils/supabase/server'
+
+export const dynamic = 'force-dynamic'
+export const maxDuration = 30
+
+export default async function FreeChatPage ({
+    params
+}: {
+    params: {
+        chatId: string
+    }
+}) {
+    const supabase = createClient()
+
+    const messagesData = await supabase
+        .from('messages')
+        .select('*')
+        .eq('chat_id', Number(params.chatId))
+        .order('created_at', { ascending: true })
+
+    if (messagesData.error) {
+        console.log(messagesData.error)
+        throw new Error('Error fetching messages')
+    }
+
+    return (
+
+        <>
+            <div className='flex flex-col gap-4 overflow-y-auto h-[calc(100vh-4rem)]'>
+
+                <FreeChat
+                    chatId={Number(params.chatId)}
+                    initialMessages={
+                        messagesData.data.map(message => ({
+                            id: message.id.toString(),
+                            content: message.message,
+                            role: message.sender
+                        }))
+                    }
+                />
+            </div>
+        </>
+    )
+}

app/dashboard/student/chat/[chatId]/layout.tsx

@@ -0,0 +1,33 @@
+import { createClient } from '@/utils/supabase/server'
+
+export default async function CoursesLayout ({
+    children,
+    params
+}: {
+    children: React.ReactNode
+    params: {
+        chatId: string
+    }
+}) {
+    const supabase = createClient()
+
+    const chatData = await supabase
+        .from('chats')
+        .select('*')
+        .eq('chat_id', Number(params.chatId))
+        .single()
+
+    if (chatData.error) {
+        console.log(chatData.error)
+        throw new Error('Error fetching chat')
+    }
+
+    return (
+        <div className='flex flex-col gap-4 p-4'>
+            <h1 className="text-2xl font-semibold text-gray-800">
+                {chatData.data.title}
+            </h1>
+            {children}
+        </div>
+    )
+}

app/dashboard/student/chat/[chatId]/loading.tsx

@@ -0,0 +1,34 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/vkBhDMemo6s
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Component () {
+    return (
+        <div className="grid min-h-screen w-full">
+
+            <div className="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40">
+                <div className="flex h-full flex-col gap-2 max-h-[calc(100vh-6rem)]">
+                    <div className="flex h-[60px] items-center border-b px-6">
+                        <Skeleton className="h-6 w-6 rounded-full" />
+                        <Skeleton className="h-5 w-24 ml-2" />
+                    </div>
+                    <div className="flex-1 overflow-auto py-2">
+                        <nav className="grid gap-2 px-4">
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                        </nav>
+                    </div>
+                    <div className="mt-auto p-4">
+                        <Skeleton className="h-[125px] w-full rounded-lg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

app/dashboard/student/chat/layout.tsx

@@ -0,0 +1,47 @@
+import StudentChatSidebar from '@/components/dashboards/student/chat/StudentChatSidebar'
+import { createClient } from '@/utils/supabase/server'
+
+export default async function CoursesLayout ({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    const supabase = createClient()
+    const user = await supabase.auth.getUser()
+
+    if (user.error != null) {
+        throw new Error(user.error.message)
+    }
+
+    const userCourses = await supabase
+        .from('enrollments')
+        .select('enrollment_id')
+        .eq('user_id', user.data.user.id)
+
+    const userSubscriptions = await supabase
+        .from('subscriptions')
+        .select('subscription_id')
+        .eq('user_id', user.data.user.id)
+        .eq('subscription_status', 'active')
+
+    if (userSubscriptions.error != null && userCourses.error != null) {
+        throw new Error(
+            'Something went wrong while fetching your courses and subscriptions.'
+        )
+    }
+
+    if (userSubscriptions.data.length === 0 && userCourses.data.length === 0) {
+        throw new Error('You are not authorized to view this page.')
+    }
+
+    return (
+        <div className="grid min-h-screen w-full lg:grid-cols-[280px_1fr] gap-6">
+            <StudentChatSidebar
+                userRole='student'
+            />
+            <div className="flex flex-col">
+                {children}
+            </div>
+        </div>
+    )
+}

app/dashboard/student/chat/loading.tsx

@@ -0,0 +1,34 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/vkBhDMemo6s
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Component () {
+    return (
+        <div className="grid min-h-screen w-full">
+
+            <div className="hidden border-r bg-gray-100/40 lg:block dark:bg-gray-800/40">
+                <div className="flex h-full flex-col gap-2 max-h-[calc(100vh-6rem)]">
+                    <div className="flex h-[60px] items-center border-b px-6">
+                        <Skeleton className="h-6 w-6 rounded-full" />
+                        <Skeleton className="h-5 w-24 ml-2" />
+                    </div>
+                    <div className="flex-1 overflow-auto py-2">
+                        <nav className="grid gap-2 px-4">
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                            <Skeleton className="h-8 w-full rounded-md" />
+                        </nav>
+                    </div>
+                    <div className="mt-auto p-4">
+                        <Skeleton className="h-[125px] w-full rounded-lg" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}