@sarujan/s_bot_creator 1.0.1

package/README.md

@@ -0,0 +1,96 @@
+no-code-rag-bot
+
+A lightweight, ready-to-use React chat widget to integrate your BotBuilder AI RAG bots into any website.
+
+Features
+
+🚀 Plug & Play: Add a fully functional chat AI to your site with one line of code.
+
+🛠 No-Code Integration: Connects directly to your BotBuilder AI backend using your botId.
+
+🎨 Auto-Branding: Automatically fetches your bot's colors, name, and greeting message.
+
+📱 Responsive Design: Floating widget design that works perfectly on desktop and mobile.
+
+🏗 React Portal: Renders at the end of document.body to avoid z-index and styling conflicts.
+
+Installation
+
+Install the package via npm or yarn:
+
+code
+Bash
+download
+content_copy
+expand_less
+npm install no-code-rag-bot
+
+or
+
+code
+Bash
+download
+content_copy
+expand_less
+yarn add no-code-rag-bot
+Usage
+
+Simply import the BotWidget component and place it anywhere in your React application. It will automatically anchor itself to the bottom right of the screen.
+
+code
+Jsx
+download
+content_copy
+expand_less
+import React from 'react';
+import { BotWidget } from 'no-code-rag-bot';
+
+function App() {
+  return (
+    <div className="App">
+      <h1>My Website</h1>
+      {/* Replace 'your-bot-id-here' with your actual Bot ID */}
+      <BotWidget botId="your-bot-id-here" />
+    </div>
+  );
+}
+
+export default App;
+Props
+Prop	Type	Required	Description
+botId	string	Yes	Your unique Bot ID from the BotBuilder AI dashboard.
+How it works
+
+Initialization: On mount, the component fetches your bot's specific configuration (theme color, name, and greeting) from the API.
+
+Chatting: When a user sends a message, it is sent to the RAG engine. The bot's response is then streamed back to the UI.
+
+Styles: The widget uses inline styles to ensure it looks consistent regardless of your local CSS setup.
+
+Development
+
+If you want to contribute or modify the widget:
+
+Clone the repository.
+
+Install dependencies: npm install.
+
+Run tests or build: npm run build.
+
+License
+
+MIT © Sarujan003
+
+Pro-Tip for your package.json:
+
+Since you are using React Portals, make sure your package.json has react and react-dom listed under peerDependencies so that the user's project provides the React runtime.
+
+code
+JSON
+download
+content_copy
+expand_less
+"peerDependencies": {
+  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+}

package/index.js

@@ -0,0 +1,112 @@
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * BotBuilder AI - NPM React Component
+ * Fully functional with local state and message tracking.
+ */
+export const BotWidget = ({ botId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [config, setConfig] = useState(null);
+  const [input, setInput] = useState('');
+  const msgEndRef = useRef(null);
+
+  // useEffect(() => {
+  //   // 1. Fetch config for colors and branding
+  //   fetch(`https://api.botbuilder.ai/v1/config/${botId}`)
+  //     .then(res => res.json())
+  //     .then(data => {
+  //       setConfig(data);
+  //       setMessages([{ role: 'model', text: data.greetingMessage }]);
+  //     });
+  // }, [botId]);
+  // Temporarily replace your useEffect fetch with this to test UI:
+  useEffect(() => {
+    setConfig({
+      primaryColor: '#007bff',
+      name: 'Test Bot',
+      greetingMessage: 'Hello! I am working.'
+    });
+    setMessages([{ role: 'model', text: 'Hello! I am working.' }]);
+  }, [botId]);
+
+  useEffect(() => {
+    msgEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = async (e) => {
+    e.preventDefault();
+    if (!input.trim()) return;
+
+    const userMsg = { role: 'user', text: input };
+    setMessages(prev => [...prev, userMsg]);
+    setInput('');
+
+    const res = await fetch('https://api.botbuilder.ai/v1/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ botId, message: input })
+    });
+    const data = await res.json();
+    setMessages(prev => [...prev, { role: 'model', text: data.text }]);
+  };
+
+  if (!config) return null;
+
+  return createPortal(
+    <div style={{ position: 'fixed', bottom: '20px', right: '20px', zIndex: 9999 }}>
+      {isOpen && (
+        <div style={{
+          width: '380px', height: '600px', background: 'white', borderRadius: '20px',
+          boxShadow: '0 8px 24px rgba(0,0,0,0.1)', display: 'flex', flexDirection: 'column',
+          marginBottom: '20px', border: '1px solid #eee', overflow: 'hidden'
+        }}>
+          <div style={{ background: config.primaryColor, color: 'white', padding: '16px', display: 'flex', justifyContent: 'space-between' }}>
+            <span style={{ fontWeight: 'bold' }}>{config.name}</span>
+            <button onClick={() => setIsOpen(false)} style={{ background: 'none', border: 'none', color: 'white', cursor: 'pointer' }}>&times;</button>
+          </div>
+          
+          <div style={{ flex: 1, padding: '16px', overflowY: 'auto', background: '#f9fafb' }}>
+            {messages.map((m, i) => (
+              <div key={i} style={{
+                background: m.role === 'user' ? config.primaryColor : 'white',
+                color: m.role === 'user' ? 'white' : '#333',
+                alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
+                padding: '10px 14px', borderRadius: '12px', marginBottom: '10px', fontSize: '14px',
+                maxWidth: '85%', border: m.role === 'user' ? 'none' : '1px solid #e5e7eb'
+              }}>
+                {m.text}
+              </div>
+            ))}
+            <div ref={msgEndRef} />
+          </div>
+
+          <form onSubmit={handleSend} style={{ padding: '16px', borderTop: '1px solid #eee', display: 'flex', gap: '8px' }}>
+            <input 
+              value={input} 
+              onChange={e => setInput(e.target.value)}
+              placeholder="Type a message..."
+              style={{ flex: 1, padding: '8px', borderRadius: '8px', border: '1px solid #ddd' }}
+            />
+            <button type="submit" style={{ background: config.primaryColor, color: 'white', border: 'none', padding: '8px 16px', borderRadius: '8px' }}>Send</button>
+          </form>
+        </div>
+      )}
+
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          width: '60px', height: '60px', borderRadius: '50%', background: config.primaryColor,
+          color: 'white', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', cursor: 'pointer'
+        }}
+      >
+        {isOpen ? '↓' : '💬'}
+      </button>
+    </div>,
+    document.body
+  );
+};
+
+export default BotWidget;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@sarujan/s_bot_creator",
+  "version": "1.0.1",
+  "description": "No code Rag bot React widget",
+  "main": "index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Sarujan003/No-code-Rag-Bot.git"
+  },
+  "author": "sarujan",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}