@contenify/chatbot 2.0.0 → 3.0.0

package/README.md

@@ -1,9 +1,6 @@
 # @contenify/chatbot
 
-Contenify Chatbot is an embeddable AI assistant widget for websites and web applications.
-
-It helps visitors understand your product, navigate pages, and get answers instantly — directly inside your interface.
-The widget integrates in minutes and works as a 24/7 automated guide for your users.
+AI-powered news chatbot widget for React applications. Embed an intelligent content creation assistant that rewrites news, generates articles, and creates social content — directly inside your app.
 
 ---
 
@@ -13,102 +10,259 @@ The widget integrates in minutes and works as a 24/7 automated guide for your us
 npm install @contenify/chatbot
 ```
 
----
-
-## Environment Configuration
-
-Create or update your `.env.local` file:
+```bash
+yarn add @contenify/chatbot
+```
 
-```env
-NEXT_PUBLIC_CONTENIFY_API_URL=https://your-api.com/api
+```bash
+pnpm add @contenify/chatbot
 ```
 
-This URL should point to your Contenify backend API server.
+> **Peer dependencies:** Requires `react >= 18` and `react-dom >= 18`.
 
 ---
 
-## Basic Usage (Next.js / React)
+## Quick Start
 
-### 1. Import the component and stylesheet
+### 1. Import the component and styles
 
 ```tsx
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
 ```
 
-### 2. Add the component to your application root
+### 2. Add the chatbot to your app
 
 ```tsx
-<ContenifyChatBot
-  apiUrl="https://api.example.com/api"
-  apiKey="your-api-key"
-  domain="example.com"
-/>
+export default function App() {
+  return (
+    <ContenifyChatBot
+      apiUrl="https://your-api.example.com/api"
+      apiKey="YOUR_API_KEY"
+    />
+  )
+}
 ```
 
-The chatbot will automatically appear as a floating widget on your site.
+That's it. The chatbot renders a full-featured AI news assistant with trending news, article rewriting, and content creation built in.
 
 ---
 
 ## Props
 
-| Prop         | Type                     | Description                                         |
-| ------------ | ------------------------ | --------------------------------------------------- |
-| `onNavigate` | `(path: string) => void` | Triggered when the chatbot requests page navigation |
-| `onLogout`   | `() => void`             | Triggered when the chatbot requests user logout     |
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiUrl` | `string` | Yes | Base URL of your Contenify backend API (e.g. `https://api.example.com/api`) |
+| `apiKey` | `string` | Yes | Your licence API key |
+| `domain` | `string` | No | Domain identifier for multi-tenant setups |
+| `onPost` | `(content: string, keywords: string[]) => void` | No | Callback fired when the user clicks **Post** on a generated article. Receives the HTML content and meta keywords. |
 
 ---
 
-## Where should I place it?
+## Usage Examples
+
+### Basic embed
+
+```tsx
+import { ContenifyChatBot } from '@contenify/chatbot'
+import '@contenify/chatbot/styles.css'
+
+export default function Page() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <ContenifyChatBot
+        apiUrl="https://api.example.com/api"
+        apiKey="LIC-XXXXXX-XXXXXX"
+      />
+    </div>
+  )
+}
+```
+
+### With `onPost` callback
+
+Handle articles when the user clicks **Post** — publish to your CMS, save to a database, or trigger any workflow:
 
-Place the component globally:
+```tsx
+import { ContenifyChatBot } from '@contenify/chatbot'
+import '@contenify/chatbot/styles.css'
 
-* **Next.js (App Router):** `app/layout.tsx`
-* **React / Vite:** `App.tsx`
+export default function Page() {
+  const handlePost = (content: string, keywords: string[]) => {
+    // content is an HTML string, keywords is string[]
+    console.log('Article HTML:', content)
+    console.log('Keywords:', keywords)
 
-This ensures the chatbot is available on every page.
+    // Example: POST to your CMS
+    fetch('/api/articles', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content, keywords }),
+    })
+  }
 
----
+  return (
+    <ContenifyChatBot
+      apiUrl="https://api.example.com/api"
+      apiKey="LIC-XXXXXX-XXXXXX"
+      onPost={handlePost}
+    />
+  )
+}
+```
 
-## Full Example (Next.js)
+### Next.js App Router
+
+Because the chatbot uses client-side hooks, wrap it in a client component:
 
 ```tsx
+// components/ChatbotWrapper.tsx
 'use client'
 
-import { useRouter } from 'next/navigation'
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
 
-export default function ChatProvider() {
-  const router = useRouter()
-
+export default function ChatbotWrapper() {
   return (
     <ContenifyChatBot
-      onNavigate={(path) => router.push(path)}
-      onLogout={() => console.log('logout')}
+      apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+      apiKey={process.env.NEXT_PUBLIC_API_KEY!}
+      onPost={(content, keywords) => {
+        console.log('Post triggered', { content, keywords })
+      }}
     />
   )
 }
 ```
 
+```tsx
+// app/layout.tsx  (or app/page.tsx)
+import ChatbotWrapper from '@/components/ChatbotWrapper'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <ChatbotWrapper />
+      </body>
+    </html>
+  )
+}
+```
+
+### Using `setConfig` (configure once at startup)
+
+If you prefer to configure the package once at app startup instead of passing props each time:
+
+```tsx
+// app/providers.tsx  (or _app.tsx)
+'use client'
+
+import { setConfig, ContenifyChatBot } from '@contenify/chatbot'
+import '@contenify/chatbot/styles.css'
+
+setConfig({
+  apiUrl: 'https://api.example.com/api',
+  apiKey: 'LIC-XXXXXX-XXXXXX',
+  domain: 'my-site',
+})
+
+export default function ChatProvider() {
+  return <ContenifyChatBot />
+}
+```
+
 ---
 
-## Requirements
+## Features
 
-* React 18+
-* A running Contenify backend API server
+| Feature | Description |
+|---------|-------------|
+| **AI Article Rewriting** | Paste or type a news story — the AI rewrites it in your preferred tone, style, and language |
+| **Trending News Panel** | Browse and recreate trending news articles from multiple sources |
+| **Multi-language Support** | Generate content in English, Hindi, and more via preferences |
+| **Edit Before Posting** | Built-in rich text editor with separate Title, Subtitle, Slug, Meta Description, and Keywords fields |
+| **Streaming Output** | Articles stream token-by-token for a fast, real-time writing experience |
+| **URL Analysis** | Paste any article URL — the chatbot scrapes and offers actions: recreate, summarise, create social posts, newsletter, blog post, and more |
+| **Preferences** | Tone, style, word count, target audience, include quotes/FAQ — all configurable per user |
 
 ---
 
-## What Contenify Provides
+## TypeScript
+
+All props and types are exported:
+
+```ts
+import type {
+  ContenifyChatBotProps,
+  Preferences,
+  ChatbotPreferences,
+  LocalizationPreferences,
+  AppearancePreferences,
+  ContentPreferences,
+  ContentOption,
+  AnalyzeInputResponse,
+  CreateContentPayload,
+  RecreateSettings,
+} from '@contenify/chatbot'
+```
+
+### Key types
 
-* AI-powered website assistant
-* User onboarding guidance
-* Context-aware answers
-* Navigation help inside apps
-* Reduced support workload
+```ts
+interface ContenifyChatBotProps {
+  apiUrl?: string
+  apiKey?: string
+  domain?: string
+  onPost?: (content: string, keywords: string[]) => void
+}
+
+interface ContentPreferences {
+  tone: 'formal' | 'casual' | 'engaging' | 'professional'
+  style: 'news' | 'blog' | 'editorial' | 'summary'
+  wordCount: 'short' | 'medium' | 'long'
+  includeQuotes: boolean
+  includeFAQ: boolean
+  targetAudience: string
+}
+
+interface LocalizationPreferences {
+  country: string
+  state: string
+  cities: string[]
+  language: string   // e.g. 'en', 'hi'
+  locale: string
+  timezone: string
+}
+
+interface ChatbotPreferences {
+  name: string
+  logoUrl?: string
+  primaryColor: string      // hex, e.g. '#6366f1'
+  secondaryColor: string
+  theme: 'light' | 'dark' | 'system'
+}
+```
+
+---
+
+## Environment Variables
+
+When running the development app locally, create a `.env.local` file:
+
+```env
+NEXT_PUBLIC_CONTENIFY_API_URL=http://localhost:8080/api
+NEXT_PUBLIC_API_KEY=YOUR_API_KEY
+NEXT_PUBLIC_DOMAIN=
+```
+
+---
+
+## Requirements
 
-Instead of users leaving confused, your website can guide them automatically.
+- React 18+
+- A running Contenify backend with a valid API key
 
 ---