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

package/README.md

@@ -1,50 +1,93 @@
+
 AI Assistant - React Component
+
 Author: Mehdi Akbari
+
 Gmail: mehdiakbarideveloper@gmail.com
+
 Telegram: @MehdiAkbariDev
+
 ![alt text](https://img.shields.io/npm/v/mehdi-akbari-ai-assistant-free.svg)
 
+
 ![alt text](https://img.shields.io/npm/l/mehdi-akbari-ai-assistant-free.svg)
+
 ⚠️ Note: This project is currently under active development.
+
 Features may change, and new updates are being added regularly. Contributions and feedback are welcome!
+
 ⚠️ توجه: این پروژه در حال حاضر در حال توسعه فعال است.
+
 ویژگی‌ها ممکن است تغییر کنند و به‌روزرسانی‌های جدید به طور مرتب اضافه می‌شوند. از مشارکت و بازخورد شما استقبال می‌شود!
+
 English
+
 A professional, beautiful, and ready-to-use AI chatbot component for your React projects. This package provides a floating, engaging UI, allowing you to easily integrate a smart assistant into your website. It's built with pure CSS, inspired by Tailwind's aesthetics, to ensure it works out-of-the-box in any project without extra configuration.
+
 ![alt text](https://your-image-host.com/demo.gif)
 
 (Recommendation: Record a GIF of the component in action and replace this link)
+
 ✨ Key Features
+
 Easy Setup: Just install the package, import the CSS, and drop the component into your app.
+
 Floating Action Button (FAB): A floating button with a Lottie animation that opens and closes the chat window, accessible on all pages.
+
 Fullscreen Mode: With a single click, the chat window expands to fill the entire screen for an immersive chat experience.
+
 Customizable Lottie Animation: Easily replace the default FAB animation with your own Lottie animation.
+
 Dynamic Text Input: A textarea that automatically resizes as the user types, perfect for comfortable multi-line messages.
+
 CSS Variable Theming: Customize the component's colors and appearance to match your brand by simply overriding CSS variables.
+
 Backend Agnostic: The component connects to any API endpoint you provide.
+
 🚀 Installation
+
 Install the package in your project using npm or yarn:
+
 code
 Bash
+download
+content_copy
+expand_less
 npm install mehdi-akbari-ai-assistant-free
+
 or
+
 code
 Bash
+download
+content_copy
+expand_less
 yarn add mehdi-akbari-ai-assistant-free
 📋 Usage
 Step 1: Import the Styles
+
 The most important step is to import the package's CSS file into your main application file. This makes all the necessary styles globally available.
+
 In your layout.js/layout.tsx (Next.js) or App.js (Create React App), add the following line:
+
 code
 JavaScript
+download
+content_copy
+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
+download
+content_copy
+expand_less
 import { AiAssistant } from "mehdi-akbari-ai-assistant-free/react";
 
-export default function HomePage() {
+export default function HomePage() { 
   return (
     <div>
       <h1>Welcome to my website</h1>
@@ -52,8 +95,62 @@ export default function HomePage() {
       
       <AiAssistant apiEndpoint="/api/chat" />
     </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.
@@ -61,60 +158,98 @@ title	string	No	"AI Assistant"	The title displayed in the chat window header.
 welcomeMessage	string	No	"Hello! How can I help you?"	The initial message displayed by the bot when the window opens.
 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
+download
+content_copy
+expand_less
 :root {
-  --ai-primary: #007BFF; /* Primary color (e.g., blue) */
-  --ai-primary-fg: #FFFFFF; /* Text color on primary background (e.g., white) */
+  --ai-primary: #007BFF;        /* Primary color (e.g., blue) */
+  --ai-primary-fg: #FFFFFF;     /* Text color on primary background (e.g., white) */
   
-  --ai-bg: #FFFFFF; /* Main background of the chat window */
-  --ai-border: #DDDDDD; /* Border color */
+  --ai-bg: #FFFFFF;             /* Main background of the chat window */
+  --ai-border: #DDDDDD;          /* Border color */
   
-  --ai-text: #333333; /* Main text color */
-  --ai-text-secondary: #777777; /* Secondary text color (like placeholders) */
+  --ai-text: #333333;            /* Main text color */
+  --ai-text-secondary: #777777;  /* Secondary text color (like placeholders) */
 
-  --ai-bot-bg: #F1F1F1; /* Bot message bubble background */
-  --ai-user-bg: #E1F0FF; /* User message bubble background */
-  --ai-user-text: #0052D4; /* User message text color */
+  --ai-bot-bg: #F1F1F1;          /* Bot message bubble background */
+  --ai-user-bg: #E1F0FF;         /* User message bubble background */
+  --ai-user-text: #0052D4;       /* User message text color */
 }
 <br>
+
 فارسی
+
 یک کامپوننت چت‌بات هوش مصنوعی حرفه‌ای، زیبا و کاملاً آماده برای استفاده در پروژه‌های React شما. این پکیج با ارائه یک رابط کاربری شناور و جذاب، به شما اجازه می‌دهد تا به سادگی یک دستیار هوشمند را به وب‌سایت خود اضافه کنید. این کامپوننت با الهام از زیبایی‌شناسی Tailwind CSS و با استفاده از CSS خالص ساخته شده تا بدون نیاز به هیچ‌گونه تنظیمات اضافی، در هر پروژه‌ای قابل استفاده باشد.
+
 ![alt text](https://your-image-host.com/demo.gif)
 
 (توصیه: یک فایل GIF از عملکرد کامپوننت ضبط کرده و این لینک را جایگزین کنید)
+
 ✨ ویژگی‌های کلیدی
+
 نصب و استفاده آسان: فقط پکیج را نصب کرده، فایل CSS را وارد کنید و کامپوننت را در برنامه خود قرار دهید.
+
 رابط کاربری شناور (FAB): یک دکمه شناور با انیمیشن Lottie که پنجره چت را باز و بسته می‌کند و در تمام صفحات در دسترس است.
+
 حالت تمام‌صفحه: با یک کلیک، پنجره چت کل صفحه را می‌پوشاند تا کاربر یک تجربه چت فراگیر داشته باشد.
+
 انیمیشن Lottie قابل شخصی‌سازی: انیمیشن دکمه شناور را به سادگی با انیمیشن Lottie دلخواه خود جایگزین کنید.
+
 ورودی متن داینامیک: textarea با قابلیت افزایش خودکار ارتفاع برای نوشتن پیام‌های چندخطی راحت.
+
 شخصی‌سازی با متغیرهای CSS: رنگ‌ها و ظاهر کامپوننت را به سادگی با override کردن متغیرهای CSS مطابق با برند خود تغییر دهید.
+
 مستقل از Backend: کامپوننت به سادگی به هر API Endpointی که شما مشخص کنید، متصل می‌شود.
+
 🚀 نصب
+
 برای نصب پکیج، از دستور زیر در پروژه خود استفاده کنید:
+
 code
 Bash
+download
+content_copy
+expand_less
 npm install mehdi-akbari-ai-assistant-free
+
 یا با استفاده از yarn:
+
 code
 Bash
+download
+content_copy
+expand_less
 yarn add mehdi-akbari-ai-assistant-free
 📋 نحوه استفاده
 مرحله ۱: وارد کردن استایل‌ها
+
 مهم‌ترین قدم، وارد کردن فایل CSS پکیج در فایل اصلی برنامه شماست. این کار باعث می‌شود تمام استایل‌های لازم در کل پروژه شما در دسترس باشند.
+
 در فایل layout.js/layout.tsx (در Next.js) یا App.js (در Create React App)، خط زیر را اضافه کنید:
+
 code
 JavaScript
+download
+content_copy
+expand_less
 import 'mehdi-akbari-ai-assistant-free/styles.css';
 مرحله ۲: استفاده از کامپوننت
-کامپوننت AiAssistant را وارد کرده و آن را در صفحه مورد نظر خود قرار دهید. تنها پراپ ضروری، apiEndpoint است.
+
+کامپوننت AiAssistant را وارد کرده و آن را در صفحه مورد نظر خود قرار دهید.
+
 code
 JavaScript
+download
+content_copy
+expand_less
 import { AiAssistant } from "mehdi-akbari-ai-assistant-free/react";
 
-export default function HomePage() {
+export default function HomePage() { 
   return (
     <div>
       <h1>به وب‌سایت من خوش آمدید</h1>
@@ -122,8 +257,59 @@ export default function HomePage() {
       
       <AiAssistant apiEndpoint="/api/chat" />
     </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 شما که درخواست‌های چت به آن ارسال می‌شود.
@@ -131,22 +317,29 @@ title	string	خیر	"AI Assistant"	عنوانی که در هدر پنجره چت
 welcomeMessage	string	خیر	"سلام! چطور می‌توانم کمکتان کنم؟"	اولین پیامی که ربات پس از باز شدن پنجره نمایش می‌دهد.
 lottieAnimationData	any	خیر	یک انیمیشن ربات پیش‌فرض	داده‌های انیمیشن Lottie. می‌توانید یک URL (رشته) یا یک آبجکت JSON وارد شده به آن بدهید.
 🎨 شخصی‌سازی (Theming)
+
 شما می‌توانید به راحتی ظاهر کامپوننت را با override کردن متغیرهای CSS زیر در فایل CSS اصلی پروژه خود (مانند globals.css)، شخصی‌سازی کنید.
+
 code
 CSS
+download
+content_copy
+expand_less
 :root {
-  --ai-primary: #007BFF; /* رنگ اصلی (مثلا آبی) */
-  --ai-primary-fg: #FFFFFF; /* رنگ متن روی رنگ اصلی (مثلا سفید) */
+  --ai-primary: #007BFF;        /* رنگ اصلی (مثلا آبی) */
+  --ai-primary-fg: #FFFFFF;     /* رنگ متن روی رنگ اصلی (مثلا سفید) */
   
-  --ai-bg: #FFFFFF; /* پس‌زمینه اصلی پنجره چت */
-  --ai-border: #DDDDDD; /* رنگ حاشیه‌ها */
+  --ai-bg: #FFFFFF;             /* پس‌زمینه اصلی پنجره چت */
+  --ai-border: #DDDDDD;          /* رنگ حاشیه‌ها */
   
-  --ai-text: #333333; /* رنگ متن اصلی */
-  --ai-text-secondary: #777777; /* رنگ متن ثانویه (مانند placeholder) */
+  --ai-text: #333333;            /* رنگ متن اصلی */
+  --ai-text-secondary: #777777;  /* رنگ متن ثانویه (مانند placeholder) */
 
-  --ai-bot-bg: #F1F1F1; /* پس‌زمینه حباب پیام ربات */
-  --ai-user-bg: #E1F0FF; /* پس‌زمینه حباب پیام کاربر */
-  --ai-user-text: #0052D4; /* رنگ متن پیام کاربر */
-}
-📜 لایسنس
-این پروژه تحت لایسنس MIT منتشر شده است. برای اطلاعات بیشتر فایل LICENSE را مطالعه کنید.
+  --ai-bot-bg: #F1F1F1;          /* پس‌زمینه حباب پیام ربات */
+  --ai-user-bg: #E1F0FF;         /* پس‌زمینه حباب پیام کاربر */
+  --ai-user-text: #0052D4;       /* رنگ متن پیام کاربر */
+}```
+
+## 📜 لایسنس
+
+این پروژه تحت لایسنس 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.6";
+  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.6";
+  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.6",
+  "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": {