mehdi-akbari-ai-assistant-free 0.9.7 → 0.9.8

package/README.md

@@ -78,7 +78,7 @@ expand_less
 import 'mehdi-akbari-ai-assistant-free/styles.css';
 Step 2: Use the Component
 
-Import the AiAssistant component and place it in your desired page. The only required prop is apiEndpoint.
+Import the AiAssistant component and place it in your desired page.
 
 code
 JavaScript
@@ -97,6 +97,60 @@ export default function HomePage() {
     </div>
   ); 
 }
+Step 3: Create the API Endpoint
+
+The AiAssistant component is a frontend-only tool. It needs a backend API route to securely communicate with the AI service. Here’s how to create the /api/chat endpoint using Next.js App Router.
+
+Create the route file: In your Next.js project, create a new file at app/api/chat/route.ts (or .js).
+
+Add the following code: This code uses the AiRobot class from this package to handle the server-side logic.
+
+code
+TypeScript
+download
+content_copy
+expand_less
+// app/api/chat/route.ts
+import { NextResponse } from 'next/server';
+import { AiRobot, Message } from 'mehdi-akbari-ai-assistant-free';
+
+export async function POST(req: Request) {
+  try {
+    const { messages }: { messages: Message[] } = await req.json();
+
+    if (!messages) {
+      return NextResponse.json({ error: 'Messages are required' }, { status: 400 });
+    }
+
+    // Read the API key from environment variables for security
+    const apiKey = process.env.GROQ_API_KEY;
+    if (!apiKey) {
+      return NextResponse.json({ error: 'AI provider API key is not configured' }, { status: 500 });
+    }
+
+    // Initialize the robot with your API key
+    const robot = new AiRobot({ apiKey });
+    
+    // Get the response from the AI
+    const content = await robot.chat(messages);
+
+    // Send the response back to the client
+    return NextResponse.json({ content });
+
+  } catch (error) {
+    console.error('API Route Error:', error);
+    return NextResponse.json({ error: 'An internal server error occurred' }, { status: 500 });
+  }
+}
+
+Set up Environment Variables: Create a file named .env.local in the root of your project and add your Groq API key:
+
+code
+Code
+download
+content_copy
+expand_less
+GROQ_API_KEY="YOUR_GROQ_API_KEY_HERE"
 ⚙️ Props (API Reference)
 Prop	Type	Required	Default	Description
 apiEndpoint	string	Yes	-	The URL of your API endpoint that handles chat requests.
@@ -105,7 +159,7 @@ welcomeMessage	string	No	"Hello! How can I help you?"	The initial message displa
 lottieAnimationData	any	No	A default robot animation	The Lottie animation data. Can be a URL (string) or an imported JSON object.
 🎨 Customization (Theming)
 
-You can easily customize the component's appearance by overriding the following CSS variables in your project's main CSS file (e.g., globals.css).
+Override the following CSS variables in your project's main CSS file (e.g., globals.css) to match your brand identity.
 
 code
 CSS
@@ -186,7 +240,7 @@ expand_less
 import 'mehdi-akbari-ai-assistant-free/styles.css';
 مرحله ۲: استفاده از کامپوننت
 
-کامپوننت AiAssistant را وارد کرده و آن را در صفحه مورد نظر خود قرار دهید. تنها پراپ ضروری، apiEndpoint است.
+کامپوننت AiAssistant را وارد کرده و آن را در صفحه مورد نظر خود قرار دهید.
 
 code
 JavaScript
@@ -205,6 +259,57 @@ export default function HomePage() {
     </div>
   ); 
 }
+مرحله ۳: ساخت API Endpoint
+
+کامپوننت AiAssistant یک ابزار سمت کاربر (Frontend) است و برای ارتباط امن با سرویس هوش مصنوعی، به یک API در سمت سرور (Backend) نیاز دارد. در اینجا نحوه ساخت اندپوینت /api/chat با استفاده از Next.js App Router توضیح داده شده است.
+
+۱. ایجاد فایل route: در پروژه Next.js خود، یک فایل جدید در مسیر app/api/chat/route.ts (یا .js) ایجاد کنید.
+
+۲. اضافه کردن کد زیر: این کد از کلاس AiRobot که در همین پکیج قرار دارد برای مدیریت منطق سمت سرور استفاده می‌کند.
+
+code
+Code
+download
+content_copy
+expand_less
+```typescript
+// app/api/chat/route.ts
+import { NextResponse } from 'next/server';
+import { AiRobot, Message } from 'mehdi-akbari-ai-assistant-free';
+
+export async function POST(req: Request) {
+  try {
+    const { messages }: { messages: Message[] } = await req.json();
+
+    if (!messages) {
+      return NextResponse.json({ error: 'آرایه پیام‌ها ضروری است' }, { status: 400 });
+    }
+
+    // برای امنیت، کلید API را از متغیرهای محیطی بخوانید
+    const apiKey = process.env.GROQ_API_KEY;
+    if (!apiKey) {
+      return NextResponse.json({ error: 'کلید API برای سرویس هوش مصنوعی تنظیم نشده است' }, { status: 500 });
+    }
+
+    // یک نمونه از ربات را با کلید API خود بسازید
+    const robot = new AiRobot({ apiKey });
+    
+    // پاسخ را از هوش مصنوعی دریافت کنید
+    const content = await robot.chat(messages);
+
+    // پاسخ را به کلاینت برگردانید
+    return NextResponse.json({ content });
+
+  } catch (error) {
+    console.error('خطا در API Route:', error);
+    return NextResponse.json({ error: 'خطایی در سرور رخ داده است' }, { status: 500 });
+  }
+}
+```
+
+۳. تنظیم متغیرهای محیطی: یک فایل با نام .env.local در ریشه اصلی پروژه خود ایجاد کرده و کلید API سرویس Groq را در آن قرار دهید:
+GROQ_API_KEY="کلید_API_سرویس_GROQ_شما"
+
 ⚙️ پراپ‌ها (API Reference)
 پراپ	نوع	ضروری	پیش‌فرض	توضیحات
 apiEndpoint	string	بله	-	آدرس API Endpoint شما که درخواست‌های چت به آن ارسال می‌شود.
@@ -233,7 +338,8 @@ expand_less
   --ai-bot-bg: #F1F1F1;          /* پس‌زمینه حباب پیام ربات */
   --ai-user-bg: #E1F0FF;         /* پس‌زمینه حباب پیام کاربر */
   --ai-user-text: #0052D4;       /* رنگ متن پیام کاربر */
-}
-📜 لایسنس
+}```
+
+## 📜 لایسنس
 
-این پروژه تحت لایسنس MIT منتشر شده است. برای اطلاعات بیشتر فایل LICENSE را مطالعه کنید.
+این پروژه تحت لایسنس MIT منتشر شده است. برای اطلاعات بیشتر فایل `LICENSE` را مطالعه کنید.

package/dist/react.js

@@ -144,7 +144,7 @@ var ChatWindow = ({
 }) => {
   const [messages, setMessages] = (0, import_react3.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
-  const version = "0.9.7";
+  const version = "0.9.8";
   (0, import_react3.useEffect)(() => {
     if (welcomeMessage && messages.length === 0) {
       setMessages([{ role: "assistant", content: welcomeMessage }]);

package/dist/react.mjs

@@ -108,7 +108,7 @@ var ChatWindow = ({
 }) => {
   const [messages, setMessages] = useState2([]);
   const [isLoading, setIsLoading] = useState2(false);
-  const version = "0.9.7";
+  const version = "0.9.8";
   useEffect3(() => {
     if (welcomeMessage && messages.length === 0) {
       setMessages([{ role: "assistant", content: welcomeMessage }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mehdi-akbari-ai-assistant-free",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Professional AI Chatbot Library with self-contained CSS styles",
   "homepage": "https://github.com/MehdiAkbariF/mehdi-akbari-ai-assistant-free#readme",
   "repository": {