npm - ask-junkie - Versions diffs - 1.0.0 - Mend

ask-junkie 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +864 -0
package/dist/ask-junkie.css +485 -0
package/dist/ask-junkie.esm.js +1847 -0
package/dist/ask-junkie.esm.js.map +1 -0
package/dist/ask-junkie.min.js +1858 -0
package/dist/ask-junkie.min.js.map +1 -0
package/dist/junkie-icon.png +0 -0
package/package.json +43 -0
package/src/ai/AIProviderFactory.js +43 -0
package/src/ai/BaseProvider.js +68 -0
package/src/ai/GeminiProvider.js +58 -0
package/src/ai/GroqProvider.js +51 -0
package/src/ai/OpenAIProvider.js +51 -0
package/src/ai/OpenRouterProvider.js +53 -0
package/src/analytics/FirebaseLogger.js +115 -0
package/src/core/AskJunkie.js +585 -0
package/src/core/EventEmitter.js +52 -0
package/src/index.js +19 -0
package/src/ui/ChatWidget.js +611 -0
package/src/ui/styles.css +485 -0
package/src/utils/DOMUtils.js +69 -0
package/src/utils/StorageManager.js +80 -0

package/README.md ADDED Viewed

@@ -0,0 +1,864 @@
+# Ask Junkie SDK
+<div align="center">
+![npm version](https://img.shields.io/npm/v/ask-junkie-sdk?color=blue)
+![npm downloads](https://img.shields.io/npm/dt/ask-junkie-sdk?color=green)
+![license](https://img.shields.io/npm/l/ask-junkie-sdk?color=purple)
+![bundle size](https://img.shields.io/bundlephobia/min/ask-junkie-sdk?color=orange)
+**Add an AI-powered chatbot to any website in minutes**
+[Installation](#-installation) • [Quick Start](#-quick-start) • [Dashboard Setup](#-dashboard-setup) • [Framework Guides](#-framework-integration-guides) • [API](#-api-methods)
+</div>
+---
+## ✨ Features
+- 🔑 **SDK Key Authentication** - Manage all settings from a centralized dashboard
+- 🤖 **Multi-Provider AI** - Supports Groq (fastest), OpenAI, Google Gemini, and OpenRouter
+- ⚡ **Universal Compatibility** - Works with React, Next.js, Vue, Angular, Svelte, or plain HTML
+- 🎨 **Customizable** - 7 color presets, custom themes, and full CSS control
+- 💬 **Smart Context** - Teach the AI about your website with custom context
+- 🎤 **Voice Input** - Built-in speech recognition support
+- 📊 **Analytics Dashboard** - View all chat conversations in one place
+- 📱 **Responsive** - Works on all screen sizes
+- 🖱️ **Draggable** - Users can move the chat icon anywhere
+- 💾 **Persistent** - Chat history saved to localStorage
+---
+## 🆕 What's New in v1.1.6
+- **SDK Key Authentication** - Use a single SDK key to manage all settings from the dashboard
+- **Centralized Settings** - Change bot name, colors, AI provider, and context without code changes
+- **Chat Analytics** - All conversations are logged and viewable in the Super Admin Panel
+- **Multi-site Management** - Manage multiple websites from one dashboard
+---
+## 📦 Installation
+### Option 1: npm (Recommended for frameworks)
+```bash
+npm install ask-junkie-sdk
+```
+### Option 2: CDN (Quick integration)
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
+<!-- JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
+```
+### Option 3: unpkg CDN
+```html
+<link rel="stylesheet" href="https://unpkg.com/ask-junkie-sdk@latest/dist/ask-junkie.css">
+<script src="https://unpkg.com/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
+```
+---
+## 🎯 Dashboard Setup
+### Step 1: Create an Account
+1. Go to the **Ask Junkie Dashboard** at `https://http://ai.junkiescoder.com`
+2. Sign up with Google or Email
+3. Navigate to **API Keys** section
+### Step 2: Create an SDK Key
+1. Click **"+ Create New Key"**
+2. Enter a **Name** (e.g., "My Website")
+3. Enter your **Domain** (e.g., "mywebsite.com")
+4. Click **"Create Key"**
+5. Copy the generated SDK key (starts with `ak_...`)
+### Step 3: Configure Settings
+1. Go to **Settings** in the dashboard
+2. Configure:
+   - **Bot Name** - The name shown in the chat header
+   - **AI Provider** - Choose Groq, OpenAI, Gemini, etc.
+   - **AI API Key** - Your AI provider's API key
+   - **Theme** - Choose colors and gradient presets
+   - **Context** - Add information about your business
+3. Click **Save** - Changes apply instantly to all sites using this SDK key!
+---
+## 🚀 Quick Start
+### Minimal Setup (with SDK Key)
+```javascript
+import AskJunkie from 'ask-junkie-sdk';
+import 'ask-junkie-sdk/dist/ask-junkie.css';
+AskJunkie.init({
+    sdkKey: 'ak_your_sdk_key_here'
+});
+```
+That's it! All settings are loaded from the dashboard.
+---
+## 🖼️ Framework Integration Guides
+### 📌 HTML/CSS/JavaScript (Vanilla)
+The simplest way to add the chatbot to any static website.
+**Method 1: CDN (Recommended)**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <!-- Ask Junkie CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
+</head>
+<body>
+    <h1>Welcome to My Website</h1>
+    <p>Your content here...</p>
+    <!-- Ask Junkie JavaScript -->
+    <script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
+    <script>
+        // Initialize with just your SDK key
+        AskJunkie.init({
+            sdkKey: 'ak_your_sdk_key_here'
+        });
+    </script>
+</body>
+</html>
+```
+**Method 2: Downloaded Files**
+1. Download the SDK files from npm or CDN
+2. Place them in your project:
+```
+your-website/
+├── css/
+│   └── ask-junkie.css
+├── js/
+│   └── ask-junkie.min.js
+└── index.html
+```
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="css/ask-junkie.css">
+</head>
+<body>
+    <h1>My Website</h1>
+    <script src="js/ask-junkie.min.js"></script>
+    <script>
+        AskJunkie.init({
+            sdkKey: 'ak_your_sdk_key_here'
+        });
+    </script>
+</body>
+</html>
+```
+---
+### ⚛️ React
+**Step 1: Install the package**
+```bash
+npm install ask-junkie-sdk
+```
+**Step 2: Create a Chatbot component**
+```jsx
+// src/components/AskJunkieChatbot.jsx
+import { useEffect } from 'react';
+import AskJunkie from 'ask-junkie-sdk';
+import 'ask-junkie-sdk/dist/ask-junkie.css';
+function AskJunkieChatbot() {
+    useEffect(() => {
+        // Initialize with SDK key - all settings from dashboard
+        AskJunkie.init({
+            sdkKey: process.env.REACT_APP_SDK_KEY
+        });
+        // Cleanup on unmount
+        return () => {
+            AskJunkie.destroy();
+        };
+    }, []);
+    return null; // This component renders the chat widget via DOM
+}
+export default AskJunkieChatbot;
+```
+**Step 3: Add to your App**
+```jsx
+// src/App.jsx
+import AskJunkieChatbot from './components/AskJunkieChatbot';
+function App() {
+    return (
+        <div className="App">
+            <h1>My React App</h1>
+            <p>Your content here...</p>
+            {/* Chatbot will appear as a floating widget */}
+            <AskJunkieChatbot />
+        </div>
+    );
+}
+export default App;
+```
+**Step 4: Add environment variable**
+Create `.env` file:
+```env
+REACT_APP_SDK_KEY=ak_your_sdk_key_here
+```
+---
+### ▲ Next.js (App Router)
+**Step 1: Install the package**
+```bash
+npm install ask-junkie-sdk
+```
+**Step 2: Create a client component**
+```tsx
+// src/components/AskJunkieChatbot.tsx
+'use client';
+import { useEffect } from 'react';
+import AskJunkie from 'ask-junkie-sdk';
+import 'ask-junkie-sdk/dist/ask-junkie.css';
+export default function AskJunkieChatbot() {
+    useEffect(() => {
+        // ============================================
+        // SDK KEY AUTHENTICATION
+        // All settings (bot name, API key, theme, etc.)
+        // are managed from the dashboard Settings page
+        // ============================================
+        AskJunkie.init({
+            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY!
+        });
+        return () => {
+            AskJunkie.destroy();
+        };
+    }, []);
+    return null;
+}
+```
+**Step 3: Add to layout**
+```tsx
+// src/app/layout.tsx
+import AskJunkieChatbot from '@/components/AskJunkieChatbot';
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <html lang="en">
+            <body>
+                {children}
+                <AskJunkieChatbot />
+            </body>
+        </html>
+    );
+}
+```
+**Step 4: Add environment variable**
+Create `.env.local` file:
+```env
+NEXT_PUBLIC_SDK_KEY=ak_your_sdk_key_here
+```
+**Step 5: Add TypeScript declaration (optional)**
+```typescript
+// src/types/ask-junkie-sdk.d.ts
+declare module 'ask-junkie-sdk' {
+    interface AskJunkieConfig {
+        sdkKey?: string;
+        apiKey?: string;
+        provider?: 'groq' | 'gemini' | 'openai' | 'openrouter';
+        botName?: string;
+        theme?: object;
+        context?: object;
+    }
+    interface AskJunkieStatic {
+        init(config: AskJunkieConfig): void;
+        destroy(): void;
+        open(): void;
+        close(): void;
+        toggle(): void;
+        sendMessage(message: string): void;
+    }
+    const AskJunkie: AskJunkieStatic;
+    export default AskJunkie;
+}
+```
+---
+### ▲ Next.js (Pages Router)
+```tsx
+// pages/_app.tsx
+import type { AppProps } from 'next/app';
+import { useEffect } from 'react';
+import AskJunkie from 'ask-junkie-sdk';
+import 'ask-junkie-sdk/dist/ask-junkie.css';
+export default function App({ Component, pageProps }: AppProps) {
+    useEffect(() => {
+        AskJunkie.init({
+            sdkKey: process.env.NEXT_PUBLIC_SDK_KEY!
+        });
+        return () => AskJunkie.destroy();
+    }, []);
+    return <Component {...pageProps} />;
+}
+```
+---
+### 💚 Vue 3
+**Step 1: Install the package**
+```bash
+npm install ask-junkie-sdk
+```
+**Step 2: Create a composable or component**
+```vue
+<!-- src/components/AskJunkieChatbot.vue -->
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import AskJunkie from 'ask-junkie-sdk';
+import 'ask-junkie-sdk/dist/ask-junkie.css';
+onMounted(() => {
+    AskJunkie.init({
+        sdkKey: import.meta.env.VITE_SDK_KEY
+    });
+});
+onUnmounted(() => {
+    AskJunkie.destroy();
+});
+</script>
+<template>
+    <!-- This component renders nothing, the widget is injected into the DOM -->
+</template>
+```
+**Step 3: Add to App.vue**
+```vue
+<!-- src/App.vue -->
+<script setup>
+import AskJunkieChatbot from './components/AskJunkieChatbot.vue';
+</script>
+<template>
+    <div id="app">
+        <h1>My Vue App</h1>
+        <AskJunkieChatbot />
+    </div>
+</template>
+```
+**Step 4: Add environment variable**
+Create `.env` file:
+```env
+VITE_SDK_KEY=ak_your_sdk_key_here
+```
+---
+### 🅰️ Angular
+**Step 1: Install the package**
+```bash
+npm install ask-junkie-sdk
+```
+**Step 2: Add CSS to angular.json**
+```json
+{
+    "projects": {
+        "your-app": {
+            "architect": {
+                "build": {
+                    "options": {
+                        "styles": [
+                            "node_modules/ask-junkie-sdk/dist/ask-junkie.css",
+                            "src/styles.css"
+                        ]
+                    }
+                }
+            }
+        }
+    }
+}
+```
+**Step 3: Create a service or component**
+```typescript
+// src/app/ask-junkie.component.ts
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import AskJunkie from 'ask-junkie-sdk';
+import { environment } from '../environments/environment';
+@Component({
+    selector: 'app-ask-junkie',
+    template: '',
+    standalone: true
+})
+export class AskJunkieComponent implements OnInit, OnDestroy {
+    ngOnInit(): void {
+        AskJunkie.init({
+            sdkKey: environment.sdkKey
+        });
+    }
+    ngOnDestroy(): void {
+        AskJunkie.destroy();
+    }
+}
+```
+**Step 4: Add to app.component.ts**
+```typescript
+// src/app/app.component.ts
+import { Component } from '@angular/core';
+import { AskJunkieComponent } from './ask-junkie.component';
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [AskJunkieComponent],
+    template: `
+        <h1>My Angular App</h1>
+        <app-ask-junkie />
+    `
+})
+export class AppComponent {}
+```
+**Step 5: Add environment variable**
+```typescript
+// src/environments/environment.ts
+export const environment = {
+    sdkKey: 'ak_your_sdk_key_here'
+};
+```
+---
+### 🧡 Svelte
+**Step 1: Install the package**
+```bash
+npm install ask-junkie-sdk
+```
+**Step 2: Create a component**
+```svelte
+<!-- src/lib/AskJunkieChatbot.svelte -->
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import AskJunkie from 'ask-junkie-sdk';
+    import 'ask-junkie-sdk/dist/ask-junkie.css';
+    onMount(() => {
+        AskJunkie.init({
+            sdkKey: import.meta.env.VITE_SDK_KEY
+        });
+    });
+    onDestroy(() => {
+        AskJunkie.destroy();
+    });
+</script>
+```
+**Step 3: Add to your app**
+```svelte
+<!-- src/App.svelte -->
+<script>
+    import AskJunkieChatbot from './lib/AskJunkieChatbot.svelte';
+</script>
+<main>
+    <h1>My Svelte App</h1>
+    <AskJunkieChatbot />
+</main>
+```
+---
+### 🟢 Node.js / Express (Server-Rendered Pages)
+For server-rendered pages, inject the CDN scripts into your HTML templates:
+```javascript
+// server.js
+const express = require('express');
+const app = express();
+app.get('/', (req, res) => {
+    res.send(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title>My Express App</title>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
+        </head>
+        <body>
+            <h1>Welcome to My Express App</h1>
+            <script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
+            <script>
+                AskJunkie.init({
+                    sdkKey: '${process.env.SDK_KEY}'
+                });
+            </script>
+        </body>
+        </html>
+    `);
+});
+app.listen(3000);
+```
+---
+### 🎨 WordPress
+For WordPress sites, add this to your theme's `footer.php`:
+```php
+<!-- Ask Junkie Chatbot -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.css">
+<script src="https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/ask-junkie.min.js"></script>
+<script>
+    AskJunkie.init({
+        sdkKey: '<?php echo esc_js(get_option("ask_junkie_sdk_key")); ?>'
+    });
+</script>
+```
+Or use the **Ask Junkie WordPress Plugin** for easier integration.
+---
+### 📱 React Native / Mobile
+The SDK is designed for web browsers. For React Native apps, you can:
+1. Use a **WebView** to display a web page with the chatbot
+2. Build a custom chat UI and use the AI providers directly
+---
+## ⚙️ Configuration Options
+### Using SDK Key (Recommended)
+```javascript
+AskJunkie.init({
+    sdkKey: 'ak_your_sdk_key_here'
+});
+// All settings loaded from dashboard!
+```
+### Using Direct Configuration (Legacy)
+```javascript
+AskJunkie.init({
+    // ═══════════════════════════════════════════════════════════
+    // REQUIRED
+    // ═══════════════════════════════════════════════════════════
+    apiKey: 'gsk_xxx...',  // Your AI provider API key
+    // ═══════════════════════════════════════════════════════════
+    // AI PROVIDER SETTINGS
+    // ═══════════════════════════════════════════════════════════
+    provider: 'groq',  // 'groq' | 'gemini' | 'openai' | 'openrouter'
+    model: null,       // Optional: Override default model
+    // ═══════════════════════════════════════════════════════════
+    // APPEARANCE
+    // ═══════════════════════════════════════════════════════════
+    botName: 'AI Assistant',
+    botAvatar: null,  // URL to custom avatar image
+    welcomeMessage: "Hi! 👋 I'm your AI assistant. How can I help you today?",
+    position: 'bottom-right',  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+    theme: {
+        mode: 'gradient',      // 'gradient' | 'solid'
+        preset: 1,             // 1-7 for preset gradients
+        primary: '#6366f1',    // Primary color (purple)
+        secondary: '#ec4899'   // Secondary color (pink)
+    },
+    // ═══════════════════════════════════════════════════════════
+    // BEHAVIOR
+    // ═══════════════════════════════════════════════════════════
+    draggable: false,     // Allow users to drag the toggle button
+    persistChat: true,    // Save chat history to localStorage
+    voiceInput: true,     // Enable microphone button
+    openOnLoad: false,    // Auto-open chat when page loads
+    suggestions: [        // Quick reply buttons
+        'Contact us',
+        'Pricing',
+        'Help'
+    ],
+    // ═══════════════════════════════════════════════════════════
+    // AI CONTEXT (Teach the AI about your website)
+    // ═══════════════════════════════════════════════════════════
+    context: {
+        siteName: 'My Website',
+        siteDescription: 'We are a software company that builds amazing products',
+        customInfo: `
+            - Business hours: 9 AM - 5 PM EST
+            - Support email: help@example.com
+            - We offer free trials for all plans
+        `,
+        restrictions: 'Do not discuss competitor pricing'
+    },
+    // ═══════════════════════════════════════════════════════════
+    // ANALYTICS
+    // ═══════════════════════════════════════════════════════════
+    analytics: {
+        enabled: true  // Log chats to Firebase for analytics
+    }
+});
+```
+---
+## 🎨 Theme Presets
+| Preset | Colors | Description |
+|--------|--------|-------------|
+| 1 | 🟣→🔴 | Purple to Pink (Default) |
+| 2 | 🔵→🔵 | Blue to Cyan |
+| 3 | 🟢→🟢 | Green to Teal |
+| 4 | 🟠→🔴 | Orange to Red |
+| 5 | 🟣→🔵 | Violet to Blue |
+| 6 | 🟡→🔴 | Yellow to Red (Sunset) |
+| 7 | 🔵→🟢 | Blue to Green (Ocean) |
+---
+## 🤖 AI Providers
+| Provider | Default Model | Get API Key | Notes |
+|----------|---------------|-------------|-------|
+| **Groq** | `llama-3.3-70b-versatile` | [console.groq.com](https://console.groq.com) | ⚡ Fastest, Free tier |
+| **Google Gemini** | `gemini-1.5-flash` | [aistudio.google.com](https://aistudio.google.com/apikey) | Free tier |
+| **OpenAI** | `gpt-3.5-turbo` | [platform.openai.com](https://platform.openai.com/api-keys) | Most popular |
+| **OpenRouter** | `meta-llama/llama-3-8b-instruct` | [openrouter.ai](https://openrouter.ai/keys) | Multi-model |
+---
+## 🎮 API Methods
+```javascript
+// Open the chat window
+AskJunkie.open();
+// Close the chat window
+AskJunkie.close();
+// Toggle chat open/closed
+AskJunkie.toggle();
+// Send a message programmatically
+AskJunkie.sendMessage('Hello, I need help!');
+// Update AI context dynamically
+AskJunkie.setContext({
+    customInfo: 'New information for the AI'
+});
+// Listen to events
+AskJunkie.on('message', (data) => {
+    console.log('Message:', data);
+});
+// Clean up and remove widget
+AskJunkie.destroy();
+// Get SDK version
+console.log(AskJunkie.getVersion());  // "1.1.6"
+```
+---
+## 🎨 Custom Styling
+Override default styles with CSS:
+```css
+/* Custom toggle button */
+.ask-junkie-toggle {
+    width: 70px !important;
+    height: 70px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
+}
+/* Custom chat window size */
+.ask-junkie-window {
+    width: 420px !important;
+    height: 600px !important;
+}
+/* Custom message bubbles */
+.ask-junkie-message.user .message-content {
+    background: linear-gradient(135deg, #10b981, #059669) !important;
+}
+/* Custom input styling */
+.ask-junkie-input-row input {
+    border-radius: 24px !important;
+}
+```
+---
+## 🔒 Security Notes
+- **SDK Keys**: The SDK key only provides access to your chatbot settings. Your AI provider API keys are stored securely in Firebase and never exposed to the client.
+- **Domain Restriction**: Configure allowed domains in the dashboard to prevent unauthorized use of your SDK key.
+- **Data Privacy**: Chat analytics are logged to Firebase. Disable with:
+  ```javascript
+  AskJunkie.init({
+      sdkKey: 'ak_xxx',
+      analytics: { enabled: false }
+  });
+  ```
+---
+## 📁 Project Structure
+```
+ask-junkie-sdk/
+├── dist/
+│   ├── ask-junkie.min.js    # UMD bundle (script tag)
+│   ├── ask-junkie.esm.js    # ES Module bundle
+│   └── ask-junkie.css       # Styles
+├── src/
+│   ├── core/                # Core SDK logic
+│   ├── ai/                  # AI provider implementations
+│   ├── ui/                  # Chat widget UI
+│   ├── analytics/           # Firebase logging
+│   └── utils/               # Utilities
+├── package.json
+└── README.md
+```
+---
+## 🛠️ Development
+```bash
+# Clone the repo
+git clone https://github.com/junkiescoder/ask-junkie-sdk.git
+# Install dependencies
+npm install
+# Development mode (watch)
+npm run dev
+# Build for production
+npm run build
+```
+---
+## 📄 License
+MIT License - Created by [Junkies Coder](https://junkiescoder.com)
+---
+## 🔗 Links
+- **npm**: [npmjs.com/package/ask-junkie-sdk](https://www.npmjs.com/package/ask-junkie-sdk)
+- **CDN**: [cdn.jsdelivr.net/npm/ask-junkie-sdk](https://cdn.jsdelivr.net/npm/ask-junkie-sdk)
+- **GitHub**: [github.com/junkiescoder/ask-junkie-sdk](https://github.com/junkiescoder/ask-junkie-sdk)
+- **Dashboard**: Contact us for dashboard access
+---
+<div align="center">
+Made with ❤️ by Junkies Coder
+</div>