@askly/widget 2.0.0 → 2.0.1

package/README.md

@@ -1,6 +1,22 @@
-# Askly Widget SDK
+# Askly — Embeddable AI Support Chat Widget for React
 
-Embeddable AI support chat widget with voice capabilities, RAG integration, and customizable themes.
+[![npm version](https://img.shields.io/npm/v/@askly/widget.svg)](https://www.npmjs.com/package/@askly/widget)
+[![downloads](https://img.shields.io/npm/dm/@askly/widget.svg)](https://www.npmjs.com/package/@askly/widget)
+[![types](https://img.shields.io/npm/types/@askly/widget.svg)](https://www.npmjs.com/package/@askly/widget)
+[![license](https://img.shields.io/npm/l/@askly/widget.svg)](./LICENSE)
+
+Askly is an **embeddable AI support chat widget** for React and plain HTML. Drop it into any site to give customers an **AI-powered support chatbot** with voice conversations, RAG answers grounded in your own docs, and one-click handoff to a human agent — installed with a single line.
+
+**[🌐 Website & live demo → askly.co.in](https://askly.co.in)**
+
+## Features
+
+- 🤖 **AI-powered answers** — resolves customer questions automatically from your knowledge base.
+- 📚 **RAG (docs-grounded)** — replies grounded in your own documentation, not hallucinated.
+- 🎙️ **Voice chat** — customers can talk to the assistant, not just type.
+- 🙋 **Human handoff** — one-click escalation to a live agent when needed.
+- ⚛️ **React + CDN** — use as an npm module or a single `<script>` tag.
+- 🎨 **Fully themeable** — colors, logo, position, and copy configured in the portal.
 
 ## Installation
 
@@ -68,7 +84,32 @@ Pass these only when you want to tie a conversation to a logged-in user on your
 | `userId` | `string` | Authenticated user ID. |
 | `timestamp` | `number` | Signature timestamp. |
 | `signature` | `string` | HMAC request signature. |
-| `excludePaths` | `string[]` | URL path prefixes where the widget should not render. |
+
+### Restricting the widget to certain pages
+
+Control where the widget appears using URL **path prefixes** (matched against `window.location.pathname`).
+
+| Option | Type | Description |
+| :--- | :--- | :--- |
+| `includePaths` | `string[]` | Allowlist — the widget renders **only** on paths matching one of these prefixes. |
+| `excludePaths` | `string[]` | Blocklist — the widget renders everywhere **except** paths matching one of these prefixes. |
+
+```javascript
+// Show ONLY on support & docs pages
+Askly.init({ widgetId: "your-widget-id", includePaths: ["/support", "/docs"] });
+
+// Show everywhere EXCEPT admin & checkout
+Askly.init({ widgetId: "your-widget-id", excludePaths: ["/admin", "/checkout"] });
+```
+
+Via script tag, use comma-separated values: `data-include-paths="/support,/docs"` or `data-exclude-paths="/admin,/checkout"`.
+
+Notes:
+
+- **`includePaths` wins:** if it's set, `excludePaths` is ignored.
+- **Prefix match**, not exact — `"/docs"` also matches `/docs/getting-started`. No glob/regex.
+- **Optimized:** on non-matching pages the path check runs *before* anything mounts, so there's no DOM node, no React root, and no config network request — the SDK does essentially nothing.
+- The decision is evaluated once at init; it's a UX targeting tool, not a security boundary (the script can still be loaded on any page).
 
 ## Lifecycle Callbacks
 
@@ -99,6 +140,20 @@ npm install
 npm run build
 ```
 
+## Why Askly?
+
+**Is this an AI customer support widget I can embed in React?**
+Yes — Askly is an embeddable AI support chat widget that installs into any React
+app or plain HTML page with a single line, no backend to build.
+
+**How does the AI answer questions accurately?**
+Askly uses RAG (retrieval-augmented generation) to ground every reply in your own
+documentation, so answers stay accurate and on-brand instead of hallucinated.
+
+**Can customers reach a human?**
+Yes — the widget supports one-click escalation to a live agent via the
+`onEscalation` callback and built-in human handoff.
+
 ## License
 
 MIT

package/dist/icons.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "color"> {
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number | string;
+}
+export declare const X: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Minus: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const ArrowUp: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Mic: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const MicOff: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Home: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const MessageSquare: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const MessageSquareIcon: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const HelpCircle: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Maximize2: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Minimize2: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Paperclip: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Smile: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const Search: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const ChevronRight: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const ChevronLeft: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const BookOpen: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const AlertCircle: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;
+export declare const ChevronDown: ({ size, color, strokeWidth, ...rest }: IconProps) => React.ReactSVGElement;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export interface AsklyConfig {
     signature?: string;
     turnstileSiteKey?: string;
     excludePaths?: string[];
+    includePaths?: string[];
     onMessageSent?: (message: string) => void;
     onMessageReceived?: (reply: string) => void;
     onChatOpened?: () => void;