GEMINI SETUP, BETTER ERROR HANDLING AND COMPLETE CHANGE OF CHAT INTERFACE UI

.env.example

@@ -1,4 +1,5 @@
 DATABASE_URL=
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
+GEMINI_API_KEY=
 NEXT_PUBLIC_UMAMI_WEBSITE_ID

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@clerk/nextjs": "^5.2.4",
+    "@google/generative-ai": "^0.21.0",
     "@heroicons/react": "^2.1.5",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
@@ -23,16 +24,20 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@types/dompurify": "^3.0.5",
     "@types/mdx": "^2.0.13",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.2.2",
     "framer-motion": "^10.18.0",
     "geist": "^1.3.1",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.10.0",
+    "html-react-parser": "^5.1.18",
     "lucide-react": "^0.416.0",
     "mermaid": "^11.0.2",
     "next": "^14.2.13",
@@ -45,8 +50,10 @@
     "react-intersection-observer": "^9.13.1",
     "react-type-animation": "^3.2.0",
     "rehype-highlight": "^7.0.0",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "ui": "github:shadcn/ui",
     "vaul": "^0.9.1"
   },
   "devDependencies": {

src/app/api/summarize/route.ts

@@ -1,39 +1,54 @@
-import { NextResponse } from 'next/server';
-import axios from 'axios';
 
-const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
-const ANTHROPIC_API_URL = 'https://api.anthropic.com/v1/messages';
+
+import { GoogleGenerativeAI, GoogleGenerativeAIError } from "@google/generative-ai";
+import { NextResponse } from "next/server";
+
+
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
+
+  if (!GEMINI_API_KEY) {
+    throw new Error("Something went wrong while fetching API Keys.")
+  }
+const genAI = new GoogleGenerativeAI(GEMINI_API_KEY!);
+const model = genAI.getGenerativeModel({
+    model: "gemini-1.5-flash",
+    systemInstruction: "You're an AI assistant, Who only answers questions related to the blog post that have provided to you in the prompt.\n\nTry to Answer using numeric points for readability and Bold the title of the point. \n\n If the user wants help related to the topic mentioned in the blog you can answer that.\n\n If the question is not related to the blog post or the topic that is mentioned on the blog, Throw error response."
+},
+
+);
 
 export async function POST(request: Request) {
+
+    const { content, query } = await request.json();
+
     try {
-        const { content, query } = await request.json();
-
-        if (!ANTHROPIC_API_KEY) {
-            throw new Error('ANTHROPIC_API_KEY is not set');
-        }
-
-        const response = await axios.post(ANTHROPIC_API_URL, {
-            model: "claude-3-sonnet-20240229",
-            messages: [
-                { role: "system", content: "You are an AI assistant that answers questions about blog posts." },
-                { role: "human", content: `Here's a blog post:\n\n${content}\n\nQuestion: ${query}` }
-            ],
-            max_tokens: 1000,
-        }, {
-            headers: {
-                'Content-Type': 'application/json',
-                'x-api-key': ANTHROPIC_API_KEY,
-                'anthropic-version': '2023-06-01'
-            },
+        const prompt = `Here's a blog post:\n\n${content}\n\nQuestion: ${query}`;
+
+        const result = await model.generateContent(prompt);
+        return NextResponse.json({
+            answer: result.response.text(),
+            success: true
+        })
+    }
+    catch (error: any) {
+   const isGoogleAIError = error instanceof GoogleGenerativeAIError;
+
+       console.error('API Error:', {
+            type: isGoogleAIError ? 'GoogleGenerativeAI' : 'Unknown',
+           message: error.message,
+           timestamp: new Date().toISOString()
         });
 
-        const answer = response.data.content[0].text;
-        return NextResponse.json({ answer });
-    } catch (error: any) {
-        console.error('Error in API:', error.response?.data || error.message);
-        return NextResponse.json(
-            { error: 'Error processing request. Please try again.' },
-            { status: error.response?.status || 500 }
-        );
+        const clientMessage = isGoogleAIError
+            ? 'The AI service is temporarily unavailable. Please try again later.'
+           : 'Internal Server Error. Please try again after some time.';
+
+         return NextResponse.json(
+             {
+               error: clientMessage,
+                 success: false
+             },
+            { status: isGoogleAIError ? 503 : 500 }
+         );
     }
 }

src/app/globals.css

@@ -87,3 +87,16 @@ html {
   background-color: #333;
   margin: 40px 0;
 }
+
+
+.ChatArea::-webkit-scrollbar {
+  width: 6px ;
+  border-radius: 4px;
+  background-color: #6e6b6b;
+}
+
+.ChatArea::-webkit-scrollbar-thumb {
+
+  background-color: white;
+  border-radius: 4px;
+}

src/app/layout.tsx

@@ -9,6 +9,8 @@ import './globals.css';
 import 'highlight.js/styles/github-dark.css';
 import { Metadata } from 'next';
 import Script from 'next/script'
+import { Toaster } from '@/components/ui/toaster';
+
 
 export const metadata: Metadata = {
     title: {
@@ -58,31 +60,34 @@ export default function RootLayout({ children }: RootLayoutProps) {
 
     return (
         <html lang="en" suppressHydrationWarning>
-        <head>
-            <SocialMetadata
-                title={title}
-                description={metadata.description ?? 'Learn about awesome developer tools'}
-                url={metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}
-                image={`${metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}/favicon.png`}
-                type="website"
-            />
-            <Script
-                src="https://cloud.umami.is/script.js"
-                data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
-                strategy="afterInteractive"
-            />
-        </head>
-        <body className={`${GeistSans.variable} ${GeistMono.variable} font-sans antialiased`}>
-        <ClerkProvider>
-            <div className="flex flex-col min-h-screen">
-                <Navbar />
-                <main className="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                    {children}
-                </main>
-            </div>
-        </ClerkProvider>
-        <Analytics />
-        </body>
+            <head>
+                <SocialMetadata
+                    title={title}
+                    description={metadata.description ?? 'Learn about awesome developer tools'}
+                    url={metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}
+                    image={`${metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}/favicon.png`}
+                    type="website"
+                />
+
+                <Script
+                    src="https://cloud.umami.is/script.js"
+                    data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+                    strategy="afterInteractive"
+                />
+            </head>
+            <body className={`${GeistSans.variable} ${GeistMono.variable} font-sans antialiased`}>
+                <ClerkProvider>
+                    <div className="flex flex-col min-h-screen">
+                        <Navbar />
+                        <main className="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 ">
+                            {children}
+                        </main>
+
+                        <Toaster></Toaster>
+                    </div>
+                </ClerkProvider>
+                <Analytics />
+            </body>
         </html>
     );
 }