Merge pull request #162 from guillermoscript/161-chat-page

guillermoscript · web-flow · commit 3dab7ddbf61c · 2024-09-20T11:42:49.000-04:00
Refactor chat component translations and add localized titles to ExamPrepChat and FreeChat layouts
diff --git a/app/[locale]/dashboard/student/chat/[chatId]/exam-prep/error.tsx b/app/[locale]/dashboard/student/chat/[chatId]/exam-prep/error.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 
+import { useScopedI18n } from '@/app/locales/client'
 import GenericError from '@/components/GenericError'
 
 export default function Error ({
@@ -11,6 +12,8 @@ export default function Error ({
     error: Error & { digest?: string }
     reset: () => void
 }) {
+    const t = useScopedI18n('GenericError')
+
     useEffect(() => {
     // Log the error to an error reporting service
         console.error(error)
@@ -19,7 +22,7 @@ export default function Error ({
     return (
         <GenericError
             retry={reset}
-            title="Oh no! An error occurred loading the chat."
+            title={t('title')}
             description={error.message}
         />
     )
diff --git a/app/[locale]/dashboard/student/chat/[chatId]/exam-prep/layout.tsx b/app/[locale]/dashboard/student/chat/[chatId]/exam-prep/layout.tsx
@@ -1,4 +1,5 @@
 import { AI, getUIStateFromAIState } from '@/actions/dashboard/AI/ExamPreparationActions'
+import { getScopedI18n } from '@/app/locales/server'
 import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
 import { createClient } from '@/utils/supabase/server'
 
@@ -97,13 +98,15 @@ export default async function ExamnChatIdPageLayout ({
         })
     })
 
+    const t = await getScopedI18n('BreadcrumbComponent')
+
     return (
         <>
             <BreadcrumbComponent
                 links={[
-                    { href: '/dashboard', label: 'Dashboard' },
-                    { href: '/dashboard/student', label: 'Student' },
-                    { href: '/dashboard/student/chat', label: 'Chat' },
+                    { href: '/dashboard', label: t('dashboard') },
+                    { href: '/dashboard/student', label: t('student') },
+                    { href: '/dashboard/student/chat', label: t('chat') },
                     { href: `/dashboard/student/chat/${params.chatId}`, label: messagesData.data.title.slice(0, 40) + '...' }
                 ]}
             />
diff --git a/app/[locale]/dashboard/student/chat/[chatId]/free-chat/error.tsx b/app/[locale]/dashboard/student/chat/[chatId]/free-chat/error.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 
+import { useScopedI18n } from '@/app/locales/client'
 import GenericError from '@/components/GenericError'
 
 export default function Error ({
@@ -11,6 +12,8 @@ export default function Error ({
     error: Error & { digest?: string }
     reset: () => void
 }) {
+    const t = useScopedI18n('GenericError')
+
     useEffect(() => {
     // Log the error to an error reporting service
         console.error(error)
@@ -19,7 +22,7 @@ export default function Error ({
     return (
         <GenericError
             retry={reset}
-            title="Oh no! An error occurred loading the chat."
+            title={t('title')}
             description={error.message}
         />
     )
diff --git a/app/[locale]/dashboard/student/chat/[chatId]/free-chat/layout.tsx b/app/[locale]/dashboard/student/chat/[chatId]/free-chat/layout.tsx
@@ -1,4 +1,5 @@
 import { FreeChatAI, getUIStateFromFreeChatAIState } from '@/actions/dashboard/AI/FreeChatPreparation'
+import { getScopedI18n } from '@/app/locales/server'
 import BreadcrumbComponent from '@/components/dashboards/student/course/BreadcrumbComponent'
 import { createClient } from '@/utils/supabase/server'
 
@@ -97,13 +98,15 @@ export default async function ExamnChatIdPageLayout ({
         })
     })
 
+    const t = await getScopedI18n('BreadcrumbComponent')
+
     return (
         <>
             <BreadcrumbComponent
                 links={[
-                    { href: '/dashboard', label: 'Dashboard' },
-                    { href: '/dashboard/student', label: 'Student' },
-                    { href: '/dashboard/student/chat', label: 'Chat' },
+                    { href: '/dashboard', label: t('dashboard') },
+                    { href: '/dashboard/student', label: t('student') },
+                    { href: '/dashboard/student/chat', label: t('chat') },
                     { href: `/dashboard/student/chat/${params.chatId}`, label: messagesData.data.title.slice(0, 40) + '...' }
                 ]}
             />
diff --git a/app/[locale]/dashboard/student/chat/layout.tsx b/app/[locale]/dashboard/student/chat/layout.tsx
@@ -38,7 +38,7 @@ export default async function CoursesLayout({
     return (
         <div className="lg:grid flex flex-col min-h-screen w-full lg:grid-cols-[280px_1fr] gap-6">
             <StudentChatSidebar userRole="student" />
-            <div className="flex flex-col">{children}</div>
+            <div className="flex flex-col gap-4">{children}</div>
         </div>
     )
 }
diff --git a/app/[locale]/dashboard/student/chat/page.tsx b/app/[locale]/dashboard/student/chat/page.tsx
@@ -1,4 +1,5 @@
 import { FreeChatAI } from '@/actions/dashboard/AI/FreeChatPreparation'
+import { getScopedI18n } from '@/app/locales/server'
 import ExamLink from '@/components/dashboards/chat/ExamLink'
 import FreeChat from '@/components/dashboards/chat/FreeChat'
 import FreeChatSetup from '@/components/dashboards/chat/tour/FreeChatSetup'
@@ -8,18 +9,19 @@ export const dynamic = 'force-dynamic'
 export const maxDuration = 30
 
 export default async function ChatPage() {
+    const t = await getScopedI18n('BreadcrumbComponent')
+
     return (
         <>
             <BreadcrumbComponent
                 links={[
-                    { href: '/dashboard', label: 'Dashboard' },
-                    { href: '/dashboard/student', label: 'Student' },
-                    { href: '/dashboard/student/chat', label: 'Chat' },
+                    { href: '/dashboard', label: t('dashboard') },
+                    { href: '/dashboard/student', label: t('student') },
+                    { href: '/dashboard/student/chat', label: t('chat') },
                 ]}
             />
             <div className="flex flex-col gap-4 w-full mb-8">
                 <div className="flex flex-wrap gap-4 w-full items-center">
-                    <h1 className="text-2xl font-semibold">Select a chat or start a new one</h1>
                     <FreeChatSetup />
                 </div>
                 <div className="flex flex-wrap gap-4 w-full">
diff --git a/app/[locale]/dashboard/student/error.tsx b/app/[locale]/dashboard/student/error.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 
+import { useScopedI18n } from '@/app/locales/client'
 import GenericError from '@/components/GenericError'
 
 export default function Error ({
@@ -11,6 +12,8 @@ export default function Error ({
     error: Error & { digest?: string }
     reset: () => void
 }) {
+    const t = useScopedI18n('GenericError')
+
     useEffect(() => {
     // Log the error to an error reporting service
         console.error(error)
@@ -19,7 +22,7 @@ export default function Error ({
     return (
         <GenericError
             retry={reset}
-            title="Oh no! An error occurred"
+            title={t('title')}
             description={error.message}
         />
     )
diff --git a/app/locales/en/components.ts b/app/locales/en/components.ts
@@ -17,6 +17,7 @@ export default {
         lesson: 'Lessons',
         exam: 'Exams',
         review: 'Reviews',
+        chat: 'Chat',
     },
     RecentlyViewed: {
         title: 'Recently Viewed',
@@ -243,5 +244,46 @@ If you have doubts, try saying: "Could you give me a fake scenario to practice m
     SubscribeNow: {
         title: 'Subscribe Now!',
         description: 'To continue using the service, please be sure to subscribe to our early access program.',
+    },
+    FreeChatSetup: {
+        freeChat: {
+            title: 'Free Chat',
+            description: 'This is where you can chat with the AI assistant. You can ask questions, get suggestions, and more.',
+        },
+        examPrep: {
+            title: 'Exam Preparation',
+            description: 'This part is where you can create and view all of your exam preparation messages. This is a different chat type from the free chat, focused on exam preparation.',
+        },
+        quizMe: {
+            title: 'Quiz Me',
+            description: 'This is where you can prepare for your exams, the AI will create Forms for you to fill out and get feedback on your answers.',
+        },
+        suggestions: {
+            title: 'Suggestions',
+            description: 'This is where you can get suggestions on what to do next. The AI will guide you on what to do next.',
+        },
+        editor: {
+            title: 'Editor',
+            description: 'This is where you can write code, markdown, or any other text. The AI will help you with your code, markdown, or text.',
+        },
+        title: 'Guided Tutorial',
+        description: 'If you want to know more about the free chat, click the button above to start the tour.',
+    },
+    ExamLink: {
+        title: 'Quiz Me',
+        description: 'This is where you can prepare for your exams, the AI will create Forms for you to fill out and get feedback on your answers.',
+    },
+    EmptyChatState: {
+        title: 'Ask me anything, I\'m here to help!',
+    },
+    SearchChats: {
+        input: 'Type to search your chats',
+        empty: 'No results found.',
+        freeChat: 'Free Chat',
+        examPrep: 'Exam Prep',
+    },
+    StudentCreateNewChat: {
+        title: 'Untitled Chat',
+        newChat: 'Nuevo chat',
     }
 } as const
diff --git a/app/locales/en/views.ts b/app/locales/en/views.ts
@@ -215,5 +215,8 @@ export default {
         description: "You've been placed in a queue due to high traffic. We'll get you back to the site shortly.",
         waitTime: 'Estimated wait time',
         waitDescription: 'We use a queue system to ensure fair access for all users during peak times. Thank you for your patience!',
+    },
+    chatPage: {
+        title: 'Select a chat or start a new one',
     }
 } as const
diff --git a/app/locales/es/components.ts b/app/locales/es/components.ts
@@ -17,6 +17,7 @@ export default {
         lesson: 'Lecciones',
         exam: 'Exámenes',
         review: 'Reseñas',
+        chat: 'Chat',
     },
     RecentlyViewed: {
         title: 'Visto recientemente',
@@ -239,5 +240,50 @@ Si tienes dudas, intenta diciendo: "Could you give me a fake scenario to practic
     SubscribeNow: {
         title: '¡Suscríbete ahora!',
         description: 'Para seguir utilizando el servicio, asegúrate de suscribirte a nuestro programa de acceso anticipado.',
+    },
+    FreeChatSetup: {
+        freeChat: {
+            title: 'Chat libre',
+            description: 'Aquí es donde puedes chatear con el asistente de IA. Puedes hacer preguntas, obtener sugerencias y más.',
+        },
+        examPrep: {
+            title: 'Preparación para el examen',
+            description: 'Aquí es donde puedes prepararte para tus exámenes, la IA creará formularios para que los completes y obtengas comentarios sobre tus respuestas.',
+        },
+        quizMe: {
+            title: 'Evaluame',
+            description: 'Aquí es donde puedes hacer preguntas y obtener sugerencias sobre qué hacer a continuación. La IA te guiará sobre qué hacer a continuación.',
+        },
+        suggestions: {
+            title: 'Sugerencias',
+            description: 'Aquí es donde puedes obtener sugerencias sobre qué hacer a continuación. La IA te guiará sobre qué hacer a continuación.',
+        },
+        editor: {
+            title: 'Editor',
+            description: 'Aquí es donde puedes escribir código, markdown o cualquier otro texto. La IA te ayudará con tu código, markdown o texto.',
+        },
+        title: 'Tutorial guiado',
+        description: 'Si deseas saber más sobre el chat libre, haz clic en el botón de arriba para comenzar el recorrido.',
+    },
+    ExamLink: {
+        title: 'Exámenes',
+        description: 'Aquí es donde puedes ver tus exámenes y comenzar a hacerlos. La IA te dará comentarios sobre tus respuestas.',
+    },
+    EmptyChatState: {
+        title: 'Pregúntame cualquier cosa, ¡estoy aquí para ayudarte!',
+    },
+    GenericError: {
+        tile: '¡Oh no! Ocurrió un error',
+        description: 'Ocurrió un error al cargar la página. Por favor, intenta nuevamente. Si el problema persiste, contacta al soporte.',
+    },
+    SearchChats: {
+        input: 'Escribe aquí para buscar tus chats...',
+        empty: 'No se encontraron resultados',
+        freeChat: 'Chat libre',
+        examPrep: 'Preparación para el examen',
+    },
+    StudentCreateNewChat: {
+        title: 'Chat sin titulo',
+        newChat: 'Nuevo chat',
     }
 } as const
diff --git a/app/locales/es/views.ts b/app/locales/es/views.ts
@@ -214,5 +214,8 @@ export default {
         description: 'Has sido puesto en una sala de espera debido a la alta demanda. Por favor espera un minuto',
         waitTime: 'Tiempo de espera',
         waitDescription: 'Usamos un sistema de espera para asegurarnos de que todos tengan una experiencia fluida. Gracias por tu paciencia.'
+    },
+    chatPage: {
+        title: 'Selecciona un chat o comienza uno nuevo',
     }
 } as const
diff --git a/components/dashboards/chat/EmptyChatState.tsx b/components/dashboards/chat/EmptyChatState.tsx
@@ -0,0 +1,42 @@
+import { useScopedI18n } from '@/app/locales/client'
+
+import SuggestionsContainer from '../Common/chat/SuggestionsContainer'
+
+const EmptyChatState: React.FC<{
+    onSuggestionClick: (suggestion: string) => void
+}> = async ({
+    onSuggestionClick,
+}) => {
+    const t = useScopedI18n('EmptyChatState')
+
+    return (
+        <div className="flex flex-col gap-4">
+            <p className="text-lg">
+                {t('title')}
+            </p>
+            <div className="w-full flex flex-col gap-4">
+                <SuggestionsContainer
+                    suggestions={[
+                        {
+                            title: 'What is the capital of France?',
+                            description: 'Ask me about anything',
+                        },
+                        {
+                            title: 'What is the weather in London?',
+                            description: 'Ask me about anything',
+                        },
+                        {
+                            title: 'What is the population of New York?',
+                            description: 'Ask me about anything',
+                        },
+                    ]}
+                    onSuggestionClick={(suggestion) => {
+                        onSuggestionClick(suggestion)
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default EmptyChatState
diff --git a/components/dashboards/chat/ExamLink.tsx b/components/dashboards/chat/ExamLink.tsx
@@ -2,6 +2,7 @@
 import { useState } from 'react'
 
 import { studentCreateNewChatAndRedirect } from '@/actions/dashboard/chatActions'
+import { useScopedI18n } from '@/app/locales/client'
 import { Button } from '@/components/ui/button'
 import {
     HoverCard,
@@ -12,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 
 export default function ExamLink () {
     const [isLoading, setIsLoading] = useState(false)
+    const t = useScopedI18n('ExamLink')
 
     return (
         <HoverCard>
@@ -38,12 +40,12 @@ export default function ExamLink () {
                         }}
                         variant="outline"
                     >
-                        Quiz Me
+                        {t('title')}
                     </Button>
                 )}
             </HoverCardTrigger>
             <HoverCardContent>
-                This is where you can prepare for your exams, the AI will create Forms for you to fill out and get feedback on your answers.
+                {t('description')}
             </HoverCardContent>
         </HoverCard>
     )
diff --git a/components/dashboards/chat/ExamPrepChat.tsx b/components/dashboards/chat/ExamPrepChat.tsx
diff --git a/components/dashboards/chat/FreeChat.tsx b/components/dashboards/chat/FreeChat.tsx
diff --git a/components/dashboards/chat/SearchChats.tsx b/components/dashboards/chat/SearchChats.tsx
diff --git a/components/dashboards/chat/StudentCreateNewChat.tsx b/components/dashboards/chat/StudentCreateNewChat.tsx
diff --git a/components/dashboards/chat/tour/FreeChatSetup.tsx b/components/dashboards/chat/tour/FreeChatSetup.tsx

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default async function CoursesLayout({`
`38`	`38`	`return (`
`39`	`39`	`<div className="lg:grid flex flex-col min-h-screen w-full lg:grid-cols-[280px_1fr] gap-6">`
`40`	`40`	`<StudentChatSidebar userRole="student" />`
`41`		`- <div className="flex flex-col">{children}</div>`
	`41`	`+ <div className="flex flex-col gap-4">{children}</div>`
`42`	`42`	`</div>`
`43`	`43`	`)`
`44`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -215,5 +215,8 @@ export default {`
`215`	`215`	`description: "You've been placed in a queue due to high traffic. We'll get you back to the site shortly.",`
`216`	`216`	`waitTime: 'Estimated wait time',`
`217`	`217`	`waitDescription: 'We use a queue system to ensure fair access for all users during peak times. Thank you for your patience!',`
	`218`	`+ },`
	`219`	`+ chatPage: {`
	`220`	`+ title: 'Select a chat or start a new one',`
`218`	`221`	`}`
`219`	`222`	`} as const`