npm - @irisidea/kalrav-ai - Versions diffs - 1.0.0 - Mend

@irisidea/kalrav-ai 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 (36) hide show

package/LICENSE +21 -0
package/README.md +600 -0
package/dist/angular.d.mts +28 -0
package/dist/angular.d.ts +28 -0
package/dist/angular.js +321 -0
package/dist/angular.js.map +1 -0
package/dist/angular.mjs +295 -0
package/dist/angular.mjs.map +1 -0
package/dist/index.d.mts +48 -0
package/dist/index.d.ts +48 -0
package/dist/index.js +175 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +147 -0
package/dist/index.mjs.map +1 -0
package/dist/nextjs.d.mts +10 -0
package/dist/nextjs.d.ts +10 -0
package/dist/nextjs.js +216 -0
package/dist/nextjs.js.map +1 -0
package/dist/nextjs.mjs +188 -0
package/dist/nextjs.mjs.map +1 -0
package/dist/react.d.mts +10 -0
package/dist/react.d.ts +10 -0
package/dist/react.js +205 -0
package/dist/react.js.map +1 -0
package/dist/react.mjs +177 -0
package/dist/react.mjs.map +1 -0
package/dist/routeye-widget.js +1 -0
package/dist/types-coZ9jHpG.d.mts +28 -0
package/dist/types-coZ9jHpG.d.ts +28 -0
package/dist/vue.d.mts +57 -0
package/dist/vue.d.ts +57 -0
package/dist/vue.js +237 -0
package/dist/vue.js.map +1 -0
package/dist/vue.mjs +215 -0
package/dist/vue.mjs.map +1 -0
package/package.json +108 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Kalrav AI
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,600 @@
+# Kalrav AI
+> **AI-powered chatbot widget for React, Next.js, Vue, and Angular**
+Kalrav AI is a cross-framework chatbot widget that seamlessly integrates into your web applications. Install once, use everywhere.
+[![npm version](https://img.shields.io/npm/v/kalrav-ai.svg)](https://www.npmjs.com/package/kalrav-ai)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+## ✨ Features
+- 🚀 **Multi-Framework Support**: React, Next.js, Vue 3, Angular, and Vanilla JS
+- 📦 **Tiny Bundle Size**: Optimized for performance
+- 🎨 **Customizable**: Match your brand with custom colors
+- 🔒 **Type-Safe**: Full TypeScript support
+- 💛 **JavaScript First**: Works perfectly with plain JavaScript
+- ⚡ **SSR Compatible**: Works with Next.js server-side rendering
+- 🎯 **Zero Config**: Works out of the box
+## 📦 Installation
+```bash
+npm install kalrav-ai
+# or
+yarn add kalrav-ai
+# or
+pnpm add kalrav-ai
+```
+> **Works with both JavaScript and TypeScript!** All examples below work in `.js`, `.jsx`, `.ts`, and `.tsx` files.
+## 🎯 How It Works
+**Only 2 required props**: `apiKey` and `agentId`
+Everything else is automatically fetched from your agent's dashboard configuration:
+- ✅ Agent name and logo
+- ✅ Custom colors (layout, user input, bot response, icons, fonts)
+- ✅ Default questions and placeholder text
+- ✅ Feature toggles (file uploads, audio recording, text-to-speech, download chat)
+- ✅ Language settings
+- ✅ Feedback questions
+The widget automatically calls:
+```
+https://kalrav-central-system-api.kalrav.ai/api/agent-ui/{agentId}
+```
+## 🚀 Quick Start
+### React
+**TypeScript:**
+```tsx
+import { KalravWidget } from 'kalrav-ai/react';
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <KalravWidget
+        apiKey="your-api-key"
+        agentId="your-agent-id"
+      />
+    </div>
+  );
+}
+```
+**JavaScript:**
+```jsx
+import { KalravWidget } from 'kalrav-ai/react';
+function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <KalravWidget
+        apiKey="your-api-key"
+        agentId="your-agent-id"
+      />
+    </div>
+  );
+}
+```
+**Programmatic Control:**
+```jsx
+import { useKalrav } from 'kalrav-ai/react';
+function ChatButton() {
+  const kalrav = useKalrav({
+    apiKey: 'your-api-key',
+    agentId: 'your-agent-id',
+  });
+  return (
+    <button onClick={() => kalrav?.open()}>
+      Open Chat
+    </button>
+  );
+}
+```
+---
+### Next.js
+**App Router** (`app/layout.js` or `app/layout.tsx`):
+```javascript
+import { KalravWidget } from 'kalrav-ai/nextjs';
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <KalravWidget
+          apiKey="your-api-key"
+          agentId="your-agent-id"
+        />
+      </body>
+    </html>
+  );
+}
+```
+**Pages Router** (`pages/_app.js` or `pages/_app.tsx`):
+```tsx
+import { KalravWidget } from 'kalrav-ai/nextjs';
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <KalravWidget
+        apiKey="your-api-key"
+        agentId="your-agent-id"
+      />
+    </>
+  );
+}
+```
+**Programmatic Control:**
+```tsx
+'use client';
+import { useKalrav } from 'kalrav-ai/nextjs';
+function ChatButton() {
+  const kalrav = useKalrav({
+    apiKey: 'your-api-key',
+    agentId: 'your-agent-id',
+  });
+  return (
+    <button onClick={() => kalrav?.open()}>
+      Open Chat
+    </button>
+  );
+}
+```
+---
+### Vue 3
+```vue
+<template>
+  <div>
+    <h1>My App</h1>
+    <KalravWidget
+      api-key="your-api-key"
+      agent-id="your-agent-id"
+      primary-color="#4F46E5"
+    />
+  </div>
+</template>
+<script setup>
+import { KalravWidget } from 'kalrav-ai/vue';
+</script>
+```
+**Programmatic Control:**
+```vue
+<template>
+  <button @click="kalrav?.open()">
+    Open Chat
+  </button>
+</template>
+<script setup>
+import { useKalrav } from 'kalrav-ai/vue';
+const kalrav = useKalrav({
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+});
+</script>
+```
+---
+### Angular
+**Module Import** (`app.module.ts`):
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { KalravModule } from 'kalrav-ai/angular';
+import { AppComponent } from './app.component';
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    KalravModule
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+**Component Usage** (`app.component.ts`):
+```typescript
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>My App</h1>
+    <kalrav-widget
+      [apiKey]="'your-api-key'"
+      [agentId]="'your-agent-id'"
+      [primaryColor]="'#4F46E5'">
+    </kalrav-widget>
+  `
+})
+export class AppComponent {}
+```
+**Programmatic Control with Service:**
+```typescript
+import { Component } from '@angular/core';
+import { KalravService } from 'kalrav-ai/angular';
+@Component({
+  selector: 'app-chat-button',
+  template: '<button (click)="openChat()">Open Chat</button>'
+})
+export class ChatButtonComponent {
+  constructor(private kalrav: KalravService) {
+    // Initialize the service
+    this.kalrav.initialize({
+      apiKey: 'your-api-key',
+      agentId: 'your-agent-id'
+    });
+  }
+  openChat() {
+    this.kalrav.open();
+  }
+}
+```
+---
+### Vanilla JavaScript
+**No framework? No problem!** Use it in any HTML page:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Site</title>
+</head>
+<body>
+  <h1>Welcome</h1>
+  <button id="chatBtn">Chat with us</button>
+  <script type="module">
+    import { createKalrav } from 'https://cdn.jsdelivr.net/npm/kalrav-ai@latest/dist/index.mjs';
+    const kalrav = createKalrav({
+      apiKey: 'your-api-key',
+      agentId: 'your-agent-id',
+    });
+    document.getElementById('chatBtn').onclick = () => kalrav.open();
+  </script>
+</body>
+</html>
+```
+**With npm/bundler:**
+```javascript
+import { createKalrav } from 'kalrav-ai';
+const kalrav = createKalrav({
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+  primaryColor: '#4F46E5',
+});
+kalrav.open();
+```
+📖 **[See full Vanilla JS guide](examples/vanilla-js-example.md)** for CDN, module, and script tag examples.
+---
+## ⚙️ Configuration Options
+| Option | Type | Required | Default | Description |
+|--------|------|----------|---------|-------------|
+| `apiKey` | `string` | ✅ Yes | - | Your Kalrav API key |
+| `agentId` | `string` | ✅ Yes | - | Your agent/bot ID |
+| `primaryColor` | `string` | No | `#4F46E5` | Primary color for the widget |
+| `autoLoad` | `boolean` | No | `true` | Auto-load widget on mount |
+| `widgetUrl` | `string` | No | `https://widget.kalrav.ai/routeye-widget.js` | Custom widget script URL |
+---
+## 🎯 API Methods
+All widget instances expose the following methods:
+### `load(): Promise<void>`
+Manually load the widget script.
+```typescript
+await kalrav.load();
+```
+### `unload(): void`
+Remove the widget from the page.
+```typescript
+kalrav.unload();
+```
+### `open(): void`
+Open the chat widget.
+```typescript
+kalrav.open();
+```
+### `close(): void`
+Close the chat widget.
+```typescript
+kalrav.close();
+```
+### `isLoaded(): boolean`
+Check if the widget is loaded.
+```typescript
+if (kalrav.isLoaded()) {
+  console.log('Widget is ready!');
+}
+```
+### `call(method: string, ...args: any[]): void`
+Call custom widget methods.
+```typescript
+kalrav.call('customMethod', arg1, arg2);
+```
+---
+## 🔧 Advanced Usage
+### Vanilla JavaScript/TypeScript
+You can also use the core library without any framework. Perfect for static sites, legacy apps, or projects without build tools!
+**JavaScript:**
+```javascript
+import { createKalrav } from 'kalrav-ai';
+const kalrav = createKalrav({
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+  primaryColor: '#4F46E5',
+  autoLoad: true
+});
+// Control the widget
+kalrav.open();
+kalrav.close();
+```
+**TypeScript:**
+```typescript
+import { createKalrav } from 'kalrav-ai';
+import type { KalravConfig } from 'kalrav-ai';
+const config: KalravConfig = {
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+  primaryColor: '#4F46E5',
+  autoLoad: true
+};
+const kalrav = createKalrav(config);
+// Control the widget
+kalrav.open();
+kalrav.close();
+```
+### Custom Widget URL
+If you're self-hosting the widget script:
+```tsx
+<KalravWidget
+  apiKey="your-api-key"
+  agentId="your-agent-id"
+  widgetUrl="https://your-domain.com/widget.js"
+/>
+```
+### Lazy Loading
+Disable auto-load and manually control when to load:
+```tsx
+const kalrav = useKalrav({
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+  autoLoad: false
+});
+// Load later
+useEffect(() => {
+  kalrav?.load();
+}, [someCondition]);
+```
+---
+## 🔐 Environment Variables
+For better security, store credentials in environment variables:
+**React / Next.js**
+```bash
+# .env.local
+NEXT_PUBLIC_KALRAV_API_KEY=your-api-key
+NEXT_PUBLIC_KALRAV_AGENT_ID=your-agent-id
+```
+```tsx
+<KalravWidget
+  apiKey={process.env.NEXT_PUBLIC_KALRAV_API_KEY!}
+  agentId={process.env.NEXT_PUBLIC_KALRAV_AGENT_ID!}
+/>
+```
+**Vue / Vite**
+```bash
+# .env
+VITE_KALRAV_API_KEY=your-api-key
+VITE_KALRAV_AGENT_ID=your-agent-id
+```
+```vue
+<KalravWidget
+  :api-key="import.meta.env.VITE_KALRAV_API_KEY"
+  :agent-id="import.meta.env.VITE_KALRAV_AGENT_ID"
+/>
+```
+---
+## 📝 TypeScript Support
+Kalrav AI is written in TypeScript and provides full type definitions out of the box.
+```typescript
+import type { KalravConfig, KalravWidget } from 'kalrav-ai/react';
+const config: KalravConfig = {
+  apiKey: 'your-api-key',
+  agentId: 'your-agent-id',
+  primaryColor: '#4F46E5'
+};
+```
+---
+## 🌐 Browser Support
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+---
+## 🛠️ Local Development
+### Testing with npm link
+When developing the library locally:
+1. **Link the library:**
+```bash
+cd agent-widget-js
+npm run build
+npm link
+```
+2. **Link in your test project:**
+```bash
+cd your-test-app
+npm link kalrav-ai
+```
+3. **Use local Docker widget URL:**
+```tsx
+<KalravWidget
+  apiKey="your-api-key"
+  agentId="your-agent-id"
+  widgetUrl="http://localhost:9090/routeye-widget.js"  // Point to local Docker
+/>
+```
+### Running Local Docker Widget
+Build and run the widget locally for testing:
+```bash
+# Build Docker image
+docker-compose build
+# Start container
+docker-compose up -d
+# Widget available at: http://localhost:9090/routeye-widget.js
+```
+Test it:
+```bash
+# Open test HTML file
+open test-local-docker.html
+```
+### Build Commands
+```bash
+# Install dependencies
+npm install
+# Build both npm package and widget bundle
+npm run build
+# Watch mode (npm package only)
+npm run dev
+# Build widget bundle only
+npm run build:widget
+```
+---
+## 📄 License
+MIT © [Kalrav AI](https://kalrav.ai)
+---
+## 🤝 Support
+- 📧 Email: support@kalrav.ai
+- 🌐 Website: [kalrav.ai](https://kalrav.ai)
+- 📚 Documentation: [docs.kalrav.ai](https://docs.kalrav.ai)
+---
+## 🎉 Credits
+Made with ❤️ by the Kalrav AI team

package/dist/angular.d.mts ADDED Viewed

@@ -0,0 +1,28 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { a as KalravConfig, K as KalravWidget$1 } from './types-coZ9jHpG.mjs';
+declare class KalravModule {
+}
+declare class KalravWidget implements OnInit, OnDestroy {
+    apiKey: string;
+    agentId: string;
+    primaryColor: string;
+    autoLoad: boolean;
+    widgetUrl: string;
+    private kalravInstance;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}
+declare class KalravService {
+    private kalravInstance;
+    initialize(config: KalravConfig): void;
+    getWidget(): KalravWidget$1 | null;
+    open(): void;
+    close(): void;
+    isLoaded(): boolean;
+    unload(): void;
+}
+export { KalravConfig, KalravModule, KalravService, KalravWidget, KalravWidget$1 as KalravWidgetInstance };

package/dist/angular.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { a as KalravConfig, K as KalravWidget$1 } from './types-coZ9jHpG.js';
+declare class KalravModule {
+}
+declare class KalravWidget implements OnInit, OnDestroy {
+    apiKey: string;
+    agentId: string;
+    primaryColor: string;
+    autoLoad: boolean;
+    widgetUrl: string;
+    private kalravInstance;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+}
+declare class KalravService {
+    private kalravInstance;
+    initialize(config: KalravConfig): void;
+    getWidget(): KalravWidget$1 | null;
+    open(): void;
+    close(): void;
+    isLoaded(): boolean;
+    unload(): void;
+}
+export { KalravConfig, KalravModule, KalravService, KalravWidget, KalravWidget$1 as KalravWidgetInstance };