Add spanish translation file

app/[locale]/help/page.tsx

@@ -1,7 +1,15 @@
-export default function HelpPage() {
+import initTranslations from "@/lib/i18n"
+
+export default async function HelpPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  const { t } = await initTranslations(locale, ["translation"])
+
   return (
     <div className="size-screen flex flex-col items-center justify-center">
-      <div className="text-4xl">Help under construction.</div>
+      <div className="text-4xl">{t("Help under construction.")}</div>
     </div>
   )
 }

app/[locale]/login/page.tsx

@@ -1,17 +1,23 @@
-import { Brand } from "@/components/ui/brand"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { SubmitButton } from "@/components/ui/submit-button"
 import { createClient } from "@/lib/supabase/server"
 import { Database } from "@/supabase/types"
 import { createServerClient } from "@supabase/ssr"
 import { get } from "@vercel/edge-config"
 import { Metadata } from "next"
 import { cookies, headers } from "next/headers"
 import { redirect } from "next/navigation"
+import initTranslations from "@/lib/i18n"
+import { LoginForm } from "@/components/login/login-form"
 
-export const metadata: Metadata = {
-  title: "Login"
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const { t } = await initTranslations(locale, ["translation"])
+
+  return {
+    title: t("Login")
+  }
 }
 
 export default async function Login({
@@ -162,60 +168,11 @@ export default async function Login({
   }
 
   return (
-    <div className="flex w-full flex-1 flex-col justify-center gap-2 px-8 sm:max-w-md">
-      <form
-        className="animate-in text-foreground flex w-full flex-1 flex-col justify-center gap-2"
-        action={signIn}
-      >
-        <Brand />
-
-        <Label className="text-md mt-4" htmlFor="email">
-          Email
-        </Label>
-        <Input
-          className="mb-3 rounded-md border bg-inherit px-4 py-2"
-          name="email"
-          placeholder="[email protected]"
-          required
-        />
-
-        <Label className="text-md" htmlFor="password">
-          Password
-        </Label>
-        <Input
-          className="mb-6 rounded-md border bg-inherit px-4 py-2"
-          type="password"
-          name="password"
-          placeholder="••••••••"
-        />
-
-        <SubmitButton className="mb-2 rounded-md bg-blue-700 px-4 py-2 text-white">
-          Login
-        </SubmitButton>
-
-        <SubmitButton
-          formAction={signUp}
-          className="border-foreground/20 mb-2 rounded-md border px-4 py-2"
-        >
-          Sign Up
-        </SubmitButton>
-
-        <div className="text-muted-foreground mt-1 flex justify-center text-sm">
-          <span className="mr-1">Forgot your password?</span>
-          <button
-            formAction={handleResetPassword}
-            className="text-primary ml-1 underline hover:opacity-80"
-          >
-            Reset
-          </button>
-        </div>
-
-        {searchParams?.message && (
-          <p className="bg-foreground/10 text-foreground mt-4 p-4 text-center">
-            {searchParams.message}
-          </p>
-        )}
-      </form>
-    </div>
+    <LoginForm
+      signIn={signIn}
+      signUp={signUp}
+      handleResetPassword={handleResetPassword}
+      message={searchParams?.message}
+    />
   )
 }

app/[locale]/page.tsx

@@ -4,23 +4,25 @@ import { ChatbotUISVG } from "@/components/icons/chatbotui-svg"
 import { IconArrowRight } from "@tabler/icons-react"
 import { useTheme } from "next-themes"
 import Link from "next/link"
+import { useTranslation } from "react-i18next"
 
 export default function HomePage() {
   const { theme } = useTheme()
+  const { t } = useTranslation()
 
   return (
     <div className="flex size-full flex-col items-center justify-center">
       <div>
         <ChatbotUISVG theme={theme === "dark" ? "dark" : "light"} scale={0.3} />
       </div>
 
-      <div className="mt-2 text-4xl font-bold">Chatbot UI</div>
+      <div className="mt-2 text-4xl font-bold">{t("Chatbot UI")}</div>
 
       <Link
         className="mt-4 flex w-[200px] items-center justify-center rounded-md bg-blue-500 p-2 font-semibold"
         href="/login"
       >
-        Start Chatting
+        {t("Start Chatting")}
         <IconArrowRight className="ml-1" size={20} />
       </Link>
     </div>

app/api/chat/google/route.ts

@@ -44,7 +44,6 @@ export async function POST(request: Request) {
     return new Response(readableStream, {
       headers: { "Content-Type": "text/plain" }
     })
-
   } catch (error: any) {
     let errorMessage = error.message || "An unexpected error occurred"
     const errorCode = error.status || 500

components/chat/chat-files-display.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { ChatbotUIContext } from "@/context/context"
 import { getFileFromStorage } from "@/db/storage/files"
 import useHotkey from "@/lib/hooks/use-hotkey"
@@ -17,6 +19,7 @@ import {
 } from "@tabler/icons-react"
 import Image from "next/image"
 import { FC, useContext, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { Button } from "../ui/button"
 import { FilePreview } from "../ui/file-preview"
 import { WithTooltip } from "../ui/with-tooltip"
@@ -28,6 +31,8 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
   useHotkey("f", () => setShowFilesDisplay(prev => !prev))
   useHotkey("e", () => setUseRetrieval(prev => !prev))
 
+  const { t } = useTranslation()
+
   const {
     files,
     newMessageImages,
@@ -106,7 +111,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
           >
             <RetrievalToggle />
 
-            <div>Hide files</div>
+            <div>{t("Hide files")}</div>
 
             <div onClick={e => e.stopPropagation()}>
               <ChatRetrievalSettings />
@@ -131,7 +136,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
                     maxWidth: "56px"
                   }}
                   src={image.base64} // Preview images will always be base64
-                  alt="File image"
+                  alt={t("File image")}
                   width={56}
                   height={56}
                   onClick={() => {
@@ -235,8 +240,11 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
 
           <div>
             {" "}
-            View {combinedMessageFiles.length} file
-            {combinedMessageFiles.length > 1 ? "s" : ""}
+            {combinedMessageFiles.length > 1
+              ? t("View {{count}} files", {
+                  count: combinedMessageFiles.length
+                })
+              : "View file"}
           </div>
 
           <div onClick={e => e.stopPropagation()}>
@@ -249,6 +257,7 @@ export const ChatFilesDisplay: FC<ChatFilesDisplayProps> = ({}) => {
 }
 
 const RetrievalToggle = ({}) => {
+  const { t } = useTranslation()
   const { useRetrieval, setUseRetrieval } = useContext(ChatbotUIContext)
 
   return (
@@ -259,8 +268,12 @@ const RetrievalToggle = ({}) => {
         display={
           <div>
             {useRetrieval
-              ? "File retrieval is enabled on the selected files for this message. Click the indicator to disable."
-              : "Click the indicator to enable file retrieval for this message."}
+              ? t(
+                  "File retrieval is enabled on the selected files for this message. Click the indicator to disable."
+                )
+              : t(
+                  "Click the indicator to enable file retrieval for this message."
+                )}
           </div>
         }
         trigger={

components/chat/chat-help.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tabler/icons-react"
 import Link from "next/link"
 import { FC, useState } from "react"
+import { useTranslation } from "react-i18next"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,6 +21,7 @@ import { Announcements } from "../utility/announcements"
 interface ChatHelpProps {}
 
 export const ChatHelp: FC<ChatHelpProps> = ({}) => {
+  const { t } = useTranslation()
   useHotkey("/", () => setIsOpen(prevState => !prevState))
 
   const [isOpen, setIsOpen] = useState(false)
@@ -69,7 +71,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         <DropdownMenuSeparator />
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Show Help</div>
+          <div>{t("Show Help")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -84,7 +86,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Show Workspaces</div>
+          <div>{t("Show Workspaces")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -99,7 +101,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex w-[300px] justify-between">
-          <div>New Chat</div>
+          <div>{t("New Chat")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -114,7 +116,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Focus Chat</div>
+          <div>{t("Focus Chat")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -129,7 +131,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Toggle Files</div>
+          <div>{t("Toggle Files")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -144,7 +146,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Toggle Retrieval</div>
+          <div>{t("Toggle Retrieval")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -159,7 +161,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Open Settings</div>
+          <div>{t("Open Settings")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -174,7 +176,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Open Quick Settings</div>
+          <div>{t("Open Quick Settings")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘
@@ -189,7 +191,7 @@ export const ChatHelp: FC<ChatHelpProps> = ({}) => {
         </DropdownMenuItem>
 
         <DropdownMenuItem className="flex justify-between">
-          <div>Toggle Sidebar</div>
+          <div>{t("Toggle Sidebar")}</div>
           <div className="flex opacity-60">
             <div className="min-w-[30px] rounded border-DEFAULT p-1 text-center">
               ⌘

components/chat/chat-helpers/index.ts

@@ -208,9 +208,12 @@ export const handleHostedChat = async (
 
   let draftMessages = await buildFinalMessages(payload, profile, chatImages)
 
-  let formattedMessages : any[] = []
+  let formattedMessages: any[] = []
   if (provider === "google") {
-    formattedMessages = await adaptMessagesForGoogleGemini(payload, draftMessages)
+    formattedMessages = await adaptMessagesForGoogleGemini(
+      payload,
+      draftMessages
+    )
   } else {
     formattedMessages = draftMessages
   }

components/chat/chat-input.tsx

@@ -151,7 +151,9 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
       if (item.type.indexOf("image") === 0) {
         if (!imagesAllowed) {
           toast.error(
-            `Images are not supported for this model. Use models like GPT-4 Vision instead.`
+            t(
+              "Images are not supported for this model. Use models like GPT-4 Vision instead."
+            )
           )
           return
         }
@@ -205,7 +207,9 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
             )}
 
             <div className="text-sm font-bold">
-              Talking to {selectedAssistant.name}
+              {t("Talking to {{selectedAssistantName}}", {
+                selectedAssistantName: selectedAssistant.name
+              })}
             </div>
           </div>
         )}
@@ -239,10 +243,7 @@ export const ChatInput: FC<ChatInputProps> = ({}) => {
         <TextareaAutosize
           textareaRef={chatInputRef}
           className="ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring text-md flex w-full resize-none rounded-md border-none bg-transparent px-14 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-          placeholder={t(
-            // `Ask anything. Type "@" for assistants, "/" for prompts, "#" for files, and "!" for tools.`
-            `Ask anything. Type @  /  #  !`
-          )}
+          placeholder={t("Ask anything. Type @ / # !")}
           onValueChange={handleInputChange}
           value={userInput}
           minRows={1}