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

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.
+
 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,7 +95,7 @@ export default function HomePage() {
       
       <AiAssistant apiEndpoint="/api/chat" />
     </div>
-  );
+  ); 
 }
 ⚙️ Props (API Reference)
 Prop	Type	Required	Default	Description
@@ -61,60 +104,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).
+
 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 است.
+
 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,7 +203,7 @@ export default function HomePage() {
       
       <AiAssistant apiEndpoint="/api/chat" />
     </div>
-  );
+  ); 
 }
 ⚙️ پراپ‌ها (API Reference)
 پراپ	نوع	ضروری	پیش‌فرض	توضیحات
@@ -131,22 +212,28 @@ 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; /* رنگ متن پیام کاربر */
+  --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.7";
   (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.7";
   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.7",
   "description": "Professional AI Chatbot Library with self-contained CSS styles",
   "homepage": "https://github.com/MehdiAkbariF/mehdi-akbari-ai-assistant-free#readme",
   "repository": {