@contenify/chatbot 4.0.0 → 4.0.1

package/README.md

@@ -1,271 +1,138 @@
 # @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.
-
----
+AI-powered news chatbot widget for content creation. Paste a news URL or topic, get a fully rewritten article with SEO analysis, export to PDF/DOCX, or post it directly to your platform.
 
 ## Installation
 
 ```bash
 npm install @contenify/chatbot
-```
-
-```bash
+# or
 yarn add @contenify/chatbot
 ```
 
-```bash
-pnpm add @contenify/chatbot
-```
-
-> **Peer dependencies:** Requires `react >= 18` and `react-dom >= 18`.
-
----
-
 ## Quick Start
 
-### 1. Import the component and styles
-
 ```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"
+      apiUrl="https://your-backend.com/api"
+      apiKey="your-api-key"
     />
   )
 }
 ```
 
-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 | 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. |
+| `apiUrl` | `string` | No | Base URL of your Contenify backend API. Defaults to `NEXT_PUBLIC_CONTENIFY_API_URL` env var. |
+| `apiKey` | `string` | No | Your subscription API key. Defaults to `NEXT_PUBLIC_API_KEY` env var. |
+| `domain` | `string` | No | Your site domain, used for source filtering. |
+| `onPost` | `(article: string, keywords: string[]) => void` | No | Called when the user clicks **Post** in the editor. Receives the article HTML and meta keywords. |
+
+## Environment Variables (alternative to props)
+
+```env
+NEXT_PUBLIC_CONTENIFY_API_URL=https://your-backend.com/api
+NEXT_PUBLIC_API_KEY=your-api-key
+NEXT_PUBLIC_CONTENIFY_DOMAIN=yourdomain.com
+```
 
----
+Props take precedence over env vars at runtime.
 
-## Usage Examples
+## Styles
 
-### Basic embed
+Import the stylesheet once at the root of your app:
 
 ```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
+## Post Button / External Trigger
 
-Handle articles when the user clicks **Post** — publish to your CMS, save to a database, or trigger any workflow:
+When the user clicks **Post** inside the article editor, a `contenify-post-article` DOM event fires on `window`. You can listen to it anywhere in your app — useful if you need to send data to your own CMS or API independently of the `onPost` prop.
 
-```tsx
-import { ContenifyChatBot } from '@contenify/chatbot'
-import '@contenify/chatbot/styles.css'
+```ts
+window.addEventListener('contenify-post-article', (e: Event) => {
+  const { title, subtitle, article, metaDescription, slug, keywords, featuredImage } = (e as CustomEvent).detail
 
-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)
+  // Send to your CMS, API, or publishing pipeline
+  await myApi.publish({ title, article, keywords })
+})
+```
 
-    // Example: POST to your CMS
-    fetch('/api/articles', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ content, keywords }),
-    })
-  }
+### Full payload shape
 
-  return (
-    <ContenifyChatBot
-      apiUrl="https://api.example.com/api"
-      apiKey="LIC-XXXXXX-XXXXXX"
-      onPost={handlePost}
-    />
-  )
+```ts
+{
+  title: string
+  subtitle: string
+  article: string          // Rich HTML content
+  metaDescription: string
+  slug: string             // Auto-generated from title, user-editable
+  keywords: string[]       // Meta keywords array
+  featuredImage?: string   // URL of featured image (if present)
 }
 ```
 
-### Next.js App Router
-
-Because the chatbot uses client-side hooks, wrap it in a client component:
-
-```tsx
-// components/ChatbotWrapper.tsx
-'use client'
+> SEO analysis data is **not** included in the post payload — it is for display only.
 
-import { ContenifyChatBot } from '@contenify/chatbot'
-import '@contenify/chatbot/styles.css'
+## Invalid / Expired API Key
 
-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 })
-      }}
-    />
-  )
-}
-```
+If the API key is missing or rejected, a modal automatically prompts the user to enter a valid key. You can also update the key programmatically at any time:
 
-```tsx
-// app/layout.tsx  (or app/page.tsx)
-import ChatbotWrapper from '@/components/ChatbotWrapper'
+```ts
+import { setConfig } from '@contenify/chatbot'
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>
-        {children}
-        <ChatbotWrapper />
-      </body>
-    </html>
-  )
-}
+setConfig({ apiKey: 'new-api-key' })
 ```
 
-### Using `setConfig` (configure once at startup)
+## Next.js Setup
 
-If you prefer to configure the package once at app startup instead of passing props each time:
+The component uses `"use client"` internally. If your project uses the App Router, wrap it in a client component:
 
 ```tsx
-// app/providers.tsx  (or _app.tsx)
+// app/ChatPage.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 ChatProvider() {
-  return <ContenifyChatBot />
+export default function ChatPage() {
+  return <ContenifyChatBot apiUrl="..." apiKey="..." />
 }
 ```
 
----
-
-## Features
+## Usage with onPost
 
-| 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 |
-
----
-
-## 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
-
-```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
-}
+```tsx
+'use client'
+import { ContenifyChatBot } from '@contenify/chatbot'
+import '@contenify/chatbot/styles.css'
 
-interface LocalizationPreferences {
-  country: string
-  state: string
-  cities: string[]
-  language: string   // e.g. 'en', 'hi'
-  locale: string
-  timezone: string
-}
+export default function Editor() {
+  const handlePost = async (article: string, keywords: string[]) => {
+    await fetch('/api/publish', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ article, keywords }),
+    })
+  }
 
-interface ChatbotPreferences {
-  name: string
-  logoUrl?: string
-  primaryColor: string      // hex, e.g. '#6366f1'
-  secondaryColor: string
-  theme: 'light' | 'dark' | 'system'
+  return (
+    <ContenifyChatBot
+      apiUrl={process.env.NEXT_PUBLIC_CONTENIFY_API_URL}
+      apiKey={process.env.NEXT_PUBLIC_API_KEY}
+      onPost={handlePost}
+    />
+  )
 }
 ```
 
----
-
-## 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
-
-- React 18+
-- A running Contenify backend with a valid API key
-
----
-
 ## License
 
 MIT

package/dist/index.js

@@ -2901,6 +2901,16 @@ function ContenifyChatBot({ apiUrl, apiKey, 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;