feat: add AI chat and summarize endpoints with database integration

- Implemented a new chat endpoint that utilizes Groq for chat completions based on news articles.
- Added a summarize endpoint that fetches news articles from the database and generates summaries using Groq.
- Introduced a new package "@vueuse/core" for improved reactivity.
- Created a comprehensive command UI component with various subcomponents for better user interaction.
- Developed a scraping module using Scrapy to fetch news articles from Google News.
- Added validation and sanitization for slug parameters in the fetch article endpoint.

server/api/ai/chat/[slug].ts

@@ -0,0 +1,35 @@
+import { Groq } from 'groq-sdk';
+import sql from "~/server/components/postgres";
+
+const groq = new Groq();
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug');
+  const body = await readBody(event);
+  const fetchNewsArticle = await sql`
+    select * from newArticle
+    where slug = ${slug}
+  `;
+  const chatCompletion = await groq.chat.completions.create({
+        "messages": [
+          {
+            "role": "user",
+            "content": `${body}`
+          },
+          {
+            "role": "system",
+            "content": `You are a news chat, the following content will be used to chat with the user title: ${fetchNewsArticle.title}\n content: ${fetchNewsArticle.content}`
+          }
+        ],
+        "model": "llama3-70b-8192",
+        "temperature": 1,
+        "max_completion_tokens": 1024,
+        "top_p": 1,
+        "stream": true,
+        "stop": null
+    });
+    
+  for await (const chunk of chatCompletion) {
+    process.stdout.write(chunk.choices[0]?.delta?.content || '');
+  }
+})

server/api/ai/summerize/[slug].ts

@@ -1,15 +1,19 @@
 import { Groq } from 'groq-sdk';
+import sql from "~/server/components/postgres";
 
 const groq = new Groq();
 
 export default defineEventHandler(async (event) => {
   const slug = getRouterParam(event, 'slug');
-  const fetchNewsArticle = await fetch(`/api/`);
+  const fetchNewsArticle = await sql`
+    select * from newArticle
+    where slug = ${slug}
+  `;
   const chatCompletion = await groq.chat.completions.create({
         "messages": [
           {
             "role": "user",
-            "content": ``
+            "content": `${fetchNewsArticle.title}\n${fetchNewsArticle.content}`
           },
           {
             "role": "system",

server/api/fetcharticle/[slug].ts

@@ -0,0 +1,28 @@
+import sql from "~/server/components/postgres";
+export default defineEventHandler(async (event) => {
+    const slug = getRouterParam(event, 'slug');
+    
+    // Validate and sanitize the slug
+    if (!slug || typeof slug !== 'string') {
+        throw createError({
+            statusCode: 400,
+            message: 'Invalid slug parameter'
+        });
+    }
+    const cleanSlug = slug.replace(/[^a-zA-Z0-9-_]/g, '');
+
+    try {
+        const result = await sql`
+         select * from articles
+         where slug = ${cleanSlug}
+        `
+        
+        return result.rows[0] || null;
+    } catch (error) {
+        console.error('Database error:', error);
+        throw createError({
+            statusCode: 500,
+            message: 'Internal server error'
+        });
+    }
+});