@contenify/chatbot 4.0.0 → 4.0.2

package/README.md

@@ -1,268 +1,297 @@
 # @contenify/chatbot
 
-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.
+An AI-powered content creation widget. Drop it into any React app and your users can paste a news URL or topic, get a fully rewritten article, run SEO analysis, and export or publish — all from one chat interface.
 
 ---
 
-## Installation
+## Table of Contents
 
-```bash
-npm install @contenify/chatbot
-```
+1. [Prerequisites](#1-prerequisites)
+2. [Installation](#2-installation)
+3. [Get Your API Key](#3-get-your-api-key)
+4. [Set Up Environment Variables](#4-set-up-environment-variables)
+5. [Add the Component](#5-add-the-component)
+6. [Next.js Setup](#6-nextjs-setup)
+7. [Receive Published Articles](#7-receive-published-articles)
+8. [Props Reference](#8-props-reference)
+9. [Update Config at Runtime](#9-update-config-at-runtime)
+10. [What the Widget Can Do](#10-what-the-widget-can-do)
+11. [Troubleshooting](#11-troubleshooting)
+
+---
+
+## 1. Prerequisites
+
+- React **18** or higher
+- A Contenify API key (see [Step 3](#3-get-your-api-key))
+
+---
+
+## 2. Installation
 
 ```bash
+npm install @contenify/chatbot
+# or
 yarn add @contenify/chatbot
+# or
+pnpm add @contenify/chatbot
 ```
 
-```bash
-pnpm add @contenify/chatbot
+---
+
+## 3. Get Your API Key
+
+1. Go to [contenify.in/dashboard/api-keys](https://contenify.in/dashboard/api-keys)
+2. Create a new API key
+3. Copy the key — you will need it in the next step
+
+---
+
+## 4. Set Up Environment Variables
+
+Create a `.env` file in the root of your project (or add to your existing one):
+
+```env
+NEXT_PUBLIC_CONTENIFY_API_URL=https://api.contenifyai.cloud/api
+NEXT_PUBLIC_API_KEY=your-api-key-here
+NEXT_PUBLIC_CONTENIFY_DOMAIN=yourdomain.com
 ```
 
-> **Peer dependencies:** Requires `react >= 18` and `react-dom >= 18`.
+| Variable | Required | Description |
+|---|---|---|
+| `NEXT_PUBLIC_CONTENIFY_API_URL` | Yes | The Contenify backend URL |
+| `NEXT_PUBLIC_API_KEY` | Yes | Your API key from Step 3 |
+| `NEXT_PUBLIC_CONTENIFY_DOMAIN` | No | Your site domain, used for news source filtering |
+
+> The widget reads these variables automatically. You do not need to pass them as props unless you want to override them per instance.
 
 ---
 
-## Quick Start
+## 5. Add the Component
 
-### 1. Import the component and styles
+Import the component and its styles, then place it anywhere in your app:
 
 ```tsx
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
-```
-
-### 2. Add the chatbot to your app
 
-```tsx
 export default function App() {
-  return (
-    <ContenifyChatBot
-      apiUrl="https://your-api.example.com/api"
-      apiKey="YOUR_API_KEY"
-    />
-  )
+  return <ContenifyChatBot />
 }
 ```
 
-That's it. The chatbot renders a full-featured AI news assistant with trending news, article rewriting, and content creation built in.
+That's it. The widget picks up `NEXT_PUBLIC_CONTENIFY_API_URL` and `NEXT_PUBLIC_API_KEY` from your environment automatically.
 
 ---
 
-## Props
+## 6. Next.js Setup
 
-| 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. |
+### App Router (recommended)
 
----
-
-## Usage Examples
-
-### Basic embed
+The widget uses React hooks internally so it must run on the client. Create a wrapper component:
 
 ```tsx
+// app/components/ContentEditor.tsx
+'use client'
+
 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>
-  )
+export default function ContentEditor() {
+  return <ContenifyChatBot />
 }
 ```
 
-### With `onPost` callback
-
-Handle articles when the user clicks **Post** — publish to your CMS, save to a database, or trigger any workflow:
+Then use it in any Server Component or page:
 
 ```tsx
-import { ContenifyChatBot } from '@contenify/chatbot'
-import '@contenify/chatbot/styles.css'
+// app/page.tsx
+import ContentEditor from './components/ContentEditor'
 
 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)
-
-    // 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}
-    />
+    <main>
+      <ContentEditor />
+    </main>
   )
 }
 ```
 
-### Next.js App Router
+### Pages Router
 
-Because the chatbot uses client-side hooks, wrap it in a client component:
+No wrapper needed — just import and use directly:
 
 ```tsx
-// components/ChatbotWrapper.tsx
-'use client'
-
+// pages/editor.tsx
 import { ContenifyChatBot } from '@contenify/chatbot'
 import '@contenify/chatbot/styles.css'
 
-export default function ChatbotWrapper() {
-  return (
-    <ContenifyChatBot
-      apiUrl={process.env.NEXT_PUBLIC_API_URL!}
-      apiKey={process.env.NEXT_PUBLIC_API_KEY!}
-      onPost={(content, keywords) => {
-        console.log('Post triggered', { content, keywords })
-      }}
-    />
-  )
+export default function EditorPage() {
+  return <ContenifyChatBot />
 }
 ```
 
-```tsx
-// app/layout.tsx  (or app/page.tsx)
-import ChatbotWrapper from '@/components/ChatbotWrapper'
+### Import styles globally (optional)
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <ChatbotWrapper />
-      </body>
-    </html>
-  )
-}
+Instead of importing styles in every file, add it once to `app/layout.tsx` or `pages/_app.tsx`:
+
+```tsx
+// app/layout.tsx
+import '@contenify/chatbot/styles.css'
 ```
 
-### Using `setConfig` (configure once at startup)
+---
+
+## 7. Receive Published Articles
 
-If you prefer to configure the package once at app startup instead of passing props each time:
+When a user clicks **Post** inside the editor, you can receive the article data in two ways:
+
+### Option A — `onPost` prop
 
 ```tsx
-// app/providers.tsx  (or _app.tsx)
 'use client'
 
-import { setConfig, ContenifyChatBot } from '@contenify/chatbot'
+import { 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 Editor() {
+  const handlePost = async (article: string, keywords: string[]) => {
+    // Send the article to your own API or CMS
+    await fetch('/api/publish', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ article, keywords }),
+    })
+  }
 
-export default function ChatProvider() {
-  return <ContenifyChatBot />
+  return <ContenifyChatBot onPost={handlePost} />
 }
 ```
 
+### Option B — DOM event listener
+
+Listen for the `contenify-post-article` event on `window`. This is useful when you need to handle publishing outside of the React component tree:
+
+```ts
+window.addEventListener('contenify-post-article', (e: Event) => {
+  const detail = (e as CustomEvent).detail
+
+  console.log(detail.title)          // Article title
+  console.log(detail.subtitle)       // Subtitle
+  console.log(detail.article)        // Full HTML content
+  console.log(detail.metaDescription) // Meta description
+  console.log(detail.slug)           // URL slug (auto-generated, user-editable)
+  console.log(detail.keywords)       // string[] of meta keywords
+  console.log(detail.featuredImage)  // Image URL (if present)
+})
+```
+
 ---
 
-## Features
+## 8. Props Reference
+
+All props are optional. The widget works out of the box using environment variables.
+
+| Prop | Type | Description |
+|---|---|---|
+| `apiUrl` | `string` | Override the API base URL. Defaults to `NEXT_PUBLIC_CONTENIFY_API_URL`. |
+| `apiKey` | `string` | Override the API key. Defaults to `NEXT_PUBLIC_API_KEY`. |
+| `domain` | `string` | Override the domain. Defaults to `NEXT_PUBLIC_CONTENIFY_DOMAIN`. |
+| `onPost` | `(article: string, keywords: string[]) => void` | Called when the user posts an article from the editor. |
+
+### Passing props explicitly
 
-| 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 |
+If you prefer to pass values as props instead of using env vars:
+
+```tsx
+<ContenifyChatBot
+  apiUrl="https://api.contenifyai.cloud/api"
+  apiKey="your-api-key"
+  domain="yourdomain.com"
+  onPost={(article, keywords) => console.log(article, keywords)}
+/>
+```
+
+**Priority order:** explicit prop > environment variable > built-in default.
 
 ---
 
-## TypeScript
+## 9. Update Config at Runtime
 
-All props and types are exported:
+Use `setConfig` to update the API URL, key, or domain at any point — for example, after a user logs in:
 
 ```ts
-import type {
-  ContenifyChatBotProps,
-  Preferences,
-  ChatbotPreferences,
-  LocalizationPreferences,
-  AppearancePreferences,
-  ContentPreferences,
-  ContentOption,
-  AnalyzeInputResponse,
-  CreateContentPayload,
-  RecreateSettings,
-} from '@contenify/chatbot'
+import { setConfig } from '@contenify/chatbot'
+
+// After login
+setConfig({ apiKey: 'user-specific-api-key' })
+
+// Change environment dynamically
+setConfig({
+  apiUrl: 'https://api.contenifyai.cloud/api',
+  apiKey: 'new-key',
+  domain: 'newdomain.com',
+})
 ```
 
-### Key types
+---
 
-```ts
-interface ContenifyChatBotProps {
-  apiUrl?: string
-  apiKey?: string
-  domain?: string
-  onPost?: (content: string, keywords: string[]) => void
-}
+## 10. What the Widget Can Do
 
-interface ContentPreferences {
-  tone: 'formal' | 'casual' | 'engaging' | 'professional'
-  style: 'news' | 'blog' | 'editorial' | 'summary'
-  wordCount: 'short' | 'medium' | 'long'
-  includeQuotes: boolean
-  includeFAQ: boolean
-  targetAudience: string
-}
+**Paste a URL**
+Paste any news article URL into the chat. The widget fetches the content and presents action options.
 
-interface LocalizationPreferences {
-  country: string
-  state: string
-  cities: string[]
-  language: string   // e.g. 'en', 'hi'
-  locale: string
-  timezone: string
-}
+**Available actions on a URL:**
+- Recreate the article
+- Write a blog post
+- Create a summary
+- Generate social media posts
+- Write a newsletter
+- Extract key points
 
-interface ChatbotPreferences {
-  name: string
-  logoUrl?: string
-  primaryColor: string      // hex, e.g. '#6366f1'
-  secondaryColor: string
-  theme: 'light' | 'dark' | 'system'
-}
-```
+**Type a topic**
+Type any topic or text directly and the widget generates an article from scratch.
+
+**Article editor features:**
+- Rich text editor with live formatting
+- SEO score with grade (A–F) and recommendations
+- Auto-fix SEO issues with one click
+- Edit title, subtitle, meta description, slug, and keywords
+- Copy to clipboard
+- Download as PDF or DOCX
+- Post directly to your platform via `onPost`
+
+**History panel**
+Previously generated articles are saved locally and accessible from the history panel.
+
+**News panel**
+Browse trending news and news by source to use as inspiration.
 
 ---
 
-## Environment Variables
+## 11. Troubleshooting
 
-When running the development app locally, create a `.env.local` file:
+**Widget shows an "Invalid API Key" modal**
 
-```env
-NEXT_PUBLIC_CONTENIFY_API_URL=http://localhost:8080/api
-NEXT_PUBLIC_API_KEY=YOUR_API_KEY
-NEXT_PUBLIC_DOMAIN=
+- Check that `NEXT_PUBLIC_API_KEY` is set in your `.env` file
+- Make sure you restarted your dev server after adding env vars
+- Verify the key is active at [contenify.in/dashboard/api-keys](https://contenify.in/dashboard/api-keys)
+
+**Styles are not loading**
+
+Make sure you import the stylesheet:
+
+```ts
+import '@contenify/chatbot/styles.css'
 ```
 
----
+**"use client" error in Next.js App Router**
+
+Wrap the component in a client component as shown in [Step 6](#6-nextjs-setup).
 
-## Requirements
+**API requests failing (CORS or network errors)**
 
-- React 18+
-- A running Contenify backend with a valid API key
+Confirm `NEXT_PUBLIC_CONTENIFY_API_URL` points to the correct backend URL and that the server allows requests from your domain.
 
 ---
 

package/dist/index.d.mts

@@ -42,6 +42,6 @@ interface ContenifyChatBotProps {
     domain?: string;
     onPost?: (content: string, keywords: string[]) => void;
 }
-declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
+declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost, }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
 
 export { type AnalyzeInputResponse, ContenifyChatBot, type ContenifyChatBotProps, type ContentOption, type CreateContentPayload, type RecreateSettings, ContenifyChatBot as default, setConfig };

package/dist/index.d.ts

@@ -42,6 +42,6 @@ interface ContenifyChatBotProps {
     domain?: string;
     onPost?: (content: string, keywords: string[]) => void;
 }
-declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
+declare function ContenifyChatBot({ apiUrl, apiKey, domain, onPost, }: ContenifyChatBotProps): react_jsx_runtime.JSX.Element;
 
 export { type AnalyzeInputResponse, ContenifyChatBot, type ContenifyChatBotProps, type ContentOption, type CreateContentPayload, type RecreateSettings, ContenifyChatBot as default, setConfig };

package/dist/index.js

@@ -2897,10 +2897,25 @@ ${optionsList}` }) : m
 
 // src/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ContenifyChatBot({ apiUrl, apiKey, domain, onPost }) {
+function ContenifyChatBot({
+  apiUrl = process.env.NEXT_PUBLIC_CONTENIFY_API_URL,
+  apiKey = process.env.NEXT_PUBLIC_API_KEY,
+  domain = process.env.NEXT_PUBLIC_CONTENIFY_DOMAIN,
+  onPost
+}) {
   (0, import_react10.useEffect)(() => {
     setConfig({ apiUrl, apiKey, domain });
   }, [apiUrl, apiKey, domain]);
+  (0, import_react10.useEffect)(() => {
+    if (!onPost) return;
+    const handler = (e) => {
+      var _a, _b;
+      const detail = e.detail;
+      onPost((_a = detail.article) != null ? _a : "", (_b = detail.keywords) != null ? _b : []);
+    };
+    window.addEventListener("contenify-post-article", handler);
+    return () => window.removeEventListener("contenify-post-article", handler);
+  }, [onPost]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatBot, {});
 }
 var index_default = ContenifyChatBot;