mehdi-akbari-ai-assistant-free 0.9.3 → 0.9.5

package/README.md

@@ -0,0 +1,152 @@
+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
+npm install mehdi-akbari-ai-assistant-free
+or
+code
+Bash
+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
+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
+import { AiAssistant } from "mehdi-akbari-ai-assistant-free/react";
+
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Welcome to my website</h1>
+      <p>Click the robot in the bottom-right corner!</p>
+      
+      <AiAssistant apiEndpoint="/api/chat" />
+    </div>
+  );
+}
+⚙️ Props (API Reference)
+Prop	Type	Required	Default	Description
+apiEndpoint	string	Yes	-	The URL of your API endpoint that handles chat requests.
+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
+:root {
+  --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-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 */
+}
+<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
+npm install mehdi-akbari-ai-assistant-free
+یا با استفاده از yarn:
+code
+Bash
+yarn add mehdi-akbari-ai-assistant-free
+📋 نحوه استفاده
+مرحله ۱: وارد کردن استایل‌ها
+مهم‌ترین قدم، وارد کردن فایل CSS پکیج در فایل اصلی برنامه شماست. این کار باعث می‌شود تمام استایل‌های لازم در کل پروژه شما در دسترس باشند.
+در فایل layout.js/layout.tsx (در Next.js) یا App.js (در Create React App)، خط زیر را اضافه کنید:
+code
+JavaScript
+import 'mehdi-akbari-ai-assistant-free/styles.css';
+مرحله ۲: استفاده از کامپوننت
+کامپوننت AiAssistant را وارد کرده و آن را در صفحه مورد نظر خود قرار دهید. تنها پراپ ضروری، apiEndpoint است.
+code
+JavaScript
+import { AiAssistant } from "mehdi-akbari-ai-assistant-free/react";
+
+export default function HomePage() {
+  return (
+    <div>
+      <h1>به وب‌سایت من خوش آمدید</h1>
+      <p>روی ربات در گوشه پایین صفحه کلیک کنید!</p>
+      
+      <AiAssistant apiEndpoint="/api/chat" />
+    </div>
+  );
+}
+⚙️ پراپ‌ها (API Reference)
+پراپ	نوع	ضروری	پیش‌فرض	توضیحات
+apiEndpoint	string	بله	-	آدرس API Endpoint شما که درخواست‌های چت به آن ارسال می‌شود.
+title	string	خیر	"AI Assistant"	عنوانی که در هدر پنجره چت نمایش داده می‌شود.
+welcomeMessage	string	خیر	"سلام! چطور می‌توانم کمکتان کنم؟"	اولین پیامی که ربات پس از باز شدن پنجره نمایش می‌دهد.
+lottieAnimationData	any	خیر	یک انیمیشن ربات پیش‌فرض	داده‌های انیمیشن Lottie. می‌توانید یک URL (رشته) یا یک آبجکت JSON وارد شده به آن بدهید.
+🎨 شخصی‌سازی (Theming)
+شما می‌توانید به راحتی ظاهر کامپوننت را با override کردن متغیرهای CSS زیر در فایل CSS اصلی پروژه خود (مانند globals.css)، شخصی‌سازی کنید.
+code
+CSS
+:root {
+  --ai-primary: #007BFF; /* رنگ اصلی (مثلا آبی) */
+  --ai-primary-fg: #FFFFFF; /* رنگ متن روی رنگ اصلی (مثلا سفید) */
+  
+  --ai-bg: #FFFFFF; /* پس‌زمینه اصلی پنجره چت */
+  --ai-border: #DDDDDD; /* رنگ حاشیه‌ها */
+  
+  --ai-text: #333333; /* رنگ متن اصلی */
+  --ai-text-secondary: #777777; /* رنگ متن ثانویه (مانند placeholder) */
+
+  --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.3";
+  const version = "0.9.5";
   (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.3";
+  const version = "0.9.5";
   useEffect3(() => {
     if (welcomeMessage && messages.length === 0) {
       setMessages([{ role: "assistant", content: welcomeMessage }]);

package/dist/styles.css

@@ -21,9 +21,10 @@
 
 .mra-container--fullscreen .mra-chat-window-container {
   position: static;
-  /* (اصلاح کلیدی) عرض و ارتفاع را 100% می‌کنیم تا کل فضا را پر کند */
   width: 100%;
   height: 100%;
+  /* (اصلاح نهایی) حذف محدودیت عرض در حالت تمام‌صفحه */
+  max-width: none; 
 }
 
 .mra-container--fullscreen .mra-chat-window {
@@ -65,9 +66,8 @@
   transform: translateY(20px);
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
-  /* (اصلاح کلیدی) عرض را به این کانتینر منتقل می‌کنیم */
-  width: 32rem; /* معادل max-w-lg */
-  max-width: calc(100vw - 4rem); /* جلوگیری از سرریز شدن در صفحات کوچک */
+  width: 32rem;
+  max-width: calc(100vw - 4rem);
 }
 
 .mra-chat-window-container--open {
@@ -83,7 +83,6 @@
   flex-direction: column;
   height: 500px;
   width: 100%;
-  /* (اصلاح کلیدی) max-width را از اینجا حذف می‌کنیم چون توسط والد کنترل می‌شود */
   border-radius: 0.75rem;
   border: 1px solid var(--ai-border, #e5e7eb);
   background-color: var(--ai-bg, #ffffff);
@@ -97,6 +96,7 @@
   transition: all 0.3s ease-in-out;
 }
 
+/* ... بقیه کد بدون تغییر باقی می‌ماند ... */
 .mra-header {
   display: flex;
   align-items: center;
@@ -133,7 +133,6 @@
   color: #1f2937;
 }
 
-/* === MessageList Styles === */
 .mra-message-list {
   flex: 1 1 0%;
   overflow-y: auto;
@@ -180,7 +179,6 @@
   }
 }
 
-/* === MessageBubble Styles === */
 .mra-bubble-wrapper {
   display: flex;
   width: 100%;
@@ -210,7 +208,6 @@
   border-bottom-left-radius: 0.125rem;
 }
 
-/* === ChatInput Styles === */
 .mra-input-wrapper {
   display: flex;
   gap: 0.5rem;
@@ -265,7 +262,6 @@
   cursor: not-allowed;
 }
 
-/* === Footer Styles === */
 .mra-footer {
   padding: 0.5rem 0.75rem;
   border-top: 1px solid var(--ai-border, #e5e7eb);

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "mehdi-akbari-ai-assistant-free",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "Professional AI Chatbot Library with self-contained CSS styles",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -31,8 +33,8 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@langchain/core": "^1.1.8",
-    "@langchain/groq": "^1.0.2",
+    "@langchain/core": "^0.1.0",
+    "@langchain/groq": "^0.0.14",
     "clsx": "^2.1.0",
     "lottie-react": "^2.4.0",
     "lucide-react": "^0.300.0"
@@ -50,11 +52,9 @@
     "react",
     "chatbot",
     "ai",
-    "groq",
-    "langchain",
     "chat-window",
     "ui-component"
   ],
   "author": "Mehdi Akbari",
   "license": "MIT"
-}
+}