diff --git a/README.md b/README.md index fc71c23..4e9ce3b 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,8 @@ An embeddable chat widget that lets your AI chatbots render rich, interactive UI - 🔌 **Multi-Provider** - LangGraph, n8n, Make.com, or custom webhooks - 🌊 **Streaming Support** - Real-time streaming responses from your backend - 📐 **Multiple Layouts** - Full-page, side panel, or bottom tray form factors +- 👋 **Welcome Message** - Customizable greeting when starting a new conversation +- 💡 **Conversation Starters** - Pre-defined prompts to help users get started ## Quick Start @@ -120,6 +122,22 @@ const chat = createChat({ formFactor: "full-page", // 'full-page', 'side-panel', or 'bottom-tray' enableDebugLogging: false, // Enable console debug logging + // Optional: Welcome message shown when thread is empty + welcomeMessage: { + title: "Hi, I'm Assistant", + description: "I can help you with your questions.", + image: { url: "https://example.com/logo.png" }, + }, + + // Optional: Conversation starters + conversationStarters: { + variant: "short", // 'short' for pill buttons, 'long' for list items + options: [ + { displayText: "Help me get started", prompt: "Help me get started" }, + { displayText: "What can you do?", prompt: "What can you do?" }, + ], + }, + // Optional: Callbacks onSessionStart: (sessionId) => { console.log("Session started:", sessionId); @@ -331,6 +349,62 @@ Controls chat history persistence: - `'localstorage'` - Messages are saved to browser localStorage, persist across sessions - `'langgraph'` - Uses LangGraph's server-side thread management (requires `langgraph` provider) +### welcomeMessage (optional) + +```typescript +welcomeMessage?: { + title?: string; // Main heading text + description?: string; // Subheading/description text + image?: { url: string }; // Optional logo/image +} | React.ComponentType; // Or provide a custom component +``` + +Displayed when the thread is empty to greet users. + +**Example:** + +```javascript +createChat({ + n8n: { webhookUrl: "YOUR_WEBHOOK_URL" }, + welcomeMessage: { + title: "Hi, I'm Assistant", + description: "I can help you with your questions.", + image: { url: "/logo.png" }, + }, +}); +``` + +### conversationStarters (optional) + +```typescript +conversationStarters?: { + variant?: 'short' | 'long'; // 'short' = pill buttons, 'long' = list items + options: Array<{ + displayText: string; // Text shown on the button + prompt: string; // Message sent when clicked + icon?: React.ReactNode; // Optional icon + }>; +} +``` + +Clickable prompts shown when the thread is empty to help users begin a conversation. + +**Example:** + +```javascript +createChat({ + n8n: { webhookUrl: "YOUR_WEBHOOK_URL" }, + conversationStarters: { + variant: "short", + options: [ + { displayText: "Help me get started", prompt: "Help me get started" }, + { displayText: "What can you do?", prompt: "What can you do?" }, + { displayText: "Show me examples", prompt: "Show me some examples" }, + ], + }, +}); +``` + ### formFactor (optional) ```typescript diff --git a/package-lock.json b/package-lock.json index 0217e5d..320331b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "genui-widget", "version": "0.6.3", "dependencies": { - "@crayonai/react-ui": "^0.9.9", + "@crayonai/react-ui": "^0.9.13", "@crayonai/stream": "^0.6.4", - "@thesysai/genui-sdk": "^0.7.14" + "@thesysai/genui-sdk": "^0.7.16" }, "devDependencies": { "@eslint/js": "^9", @@ -383,9 +383,9 @@ "license": "Apache-2.0" }, "node_modules/@crayonai/react-core": { - "version": "0.7.6", - "resolved": "https://registry.npmjs.org/@crayonai/react-core/-/react-core-0.7.6.tgz", - "integrity": "sha512-UstAJiSIE6AqDbTJWphX2ep7mGXioHxhKRvKyKXPBf+T5De7ZXIbI81ez6kBIJWzo66YShJuTjUyvQc/8rWKIg==", + "version": "0.7.7", + "resolved": "https://registry.npmjs.org/@crayonai/react-core/-/react-core-0.7.7.tgz", + "integrity": "sha512-rv7aRv8EgfH4UJifoEP9E7sYC0FlNR8sdlA/WdulVoyTal13ISfhGqOgk5YVaNZuHjwFeSbRc20gGkKZ7AzJMg==", "license": "MIT", "peer": true, "dependencies": { @@ -403,9 +403,9 @@ } }, "node_modules/@crayonai/react-ui": { - "version": "0.9.9", - "resolved": "https://registry.npmjs.org/@crayonai/react-ui/-/react-ui-0.9.9.tgz", - "integrity": "sha512-Lg6DXP6P3FoNJGKFT4oP0tGO5iHdadkHD/7sgM+iwKihPyMrhec7WpOvxWkWBVlrhFeXgvJIShFaQaG7t5yviw==", + "version": "0.9.13", + "resolved": "https://registry.npmjs.org/@crayonai/react-ui/-/react-ui-0.9.13.tgz", + "integrity": "sha512-wZ5N2Jr5ET7UgOPWlUJFXKsg9BQ7QybMUf6A1Lyn5tK4uFDzTXee95NHFSSkF0h4NCG3kbHr1T52lofLi6AG3A==", "license": "MIT", "dependencies": { "@floating-ui/react-dom": "^2.1.2", @@ -438,7 +438,7 @@ "tiny-invariant": "^1.3.3" }, "peerDependencies": { - "@crayonai/react-core": "^0.7.6", + "@crayonai/react-core": "^0.7.7", "@crayonai/stream": "^0.6.4", "react": ">=17.0.0", "react-dom": ">=17.0.0", @@ -2769,9 +2769,9 @@ } }, "node_modules/@thesysai/genui-sdk": { - "version": "0.7.14", - "resolved": "https://registry.npmjs.org/@thesysai/genui-sdk/-/genui-sdk-0.7.14.tgz", - "integrity": "sha512-u9HpmYg0QDojN9emnNkF2/ZVjVzLlc19tKgdXY5biN76bpB7bbQS327jVH6LZmcvKF/R9jcAm28dx2P0Y8Lepg==", + "version": "0.7.16", + "resolved": "https://registry.npmjs.org/@thesysai/genui-sdk/-/genui-sdk-0.7.16.tgz", + "integrity": "sha512-xtk4fwUaJ4Hxo2uBD/4mUgTwY5EKB/UJXZ9wGsiRbT1QjreLyU4kGcN78VB9dwQEiyBrwQmennW0dtT5qZ/yyQ==", "license": "see LICENSE.md", "dependencies": { "@radix-ui/react-accordion": "^1.2.2", @@ -2791,8 +2791,8 @@ "zod": "^3.24.1" }, "peerDependencies": { - "@crayonai/react-core": "^0.7.6", - "@crayonai/react-ui": "^0.9.9", + "@crayonai/react-core": "^0.7.7", + "@crayonai/react-ui": "^0.9.13", "@radix-ui/react-dialog": "^1.1.15", "lucide-react": "^0.469.0", "react": ">=17.0.0", diff --git a/package.json b/package.json index 9b238f9..cb4f522 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "genui-widget", - "version": "0.6.3", + "version": "0.7.3", "type": "module", "description": "An embeddable chat widget that lets your AI chatbots render rich, interactive UI like buttons, forms, charts, cards and more instead of plain text. Works out of the box with LangGraph/LangChain and n8n.", "main": "./dist/genui-widget.umd.js", @@ -23,9 +23,9 @@ "lint": "eslint src" }, "dependencies": { - "@crayonai/react-ui": "^0.9.9", + "@crayonai/react-ui": "^0.9.13", "@crayonai/stream": "^0.6.4", - "@thesysai/genui-sdk": "^0.7.14" + "@thesysai/genui-sdk": "^0.7.16" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", diff --git a/src/index.ts b/src/index.ts index 2003e99..c2f6e06 100644 --- a/src/index.ts +++ b/src/index.ts @@ -289,6 +289,8 @@ function ChatWithPersistence({ theme: config.theme, agentName: config.agentName || "Assistant", logoUrl: config.logoUrl, + welcomeMessage: config.welcomeMessage, + conversationStarters: config.conversationStarters, formFactor, }; diff --git a/src/types.ts b/src/types.ts index 68143f2..ed75fdc 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,8 @@ +import type { + WelcomeMessageConfig, + ConversationStartersConfig, +} from "@thesysai/genui-sdk"; + /** * Storage type for persisting chat data */ @@ -113,6 +118,35 @@ export interface ChatConfig { */ logoUrl?: string; + /** + * Welcome message shown when the thread is empty. + * Can be a config object with title, description, and image, + * or a custom React component. + * + * @example + * welcomeMessage: { + * title: "Hi, I'm Assistant", + * description: "I can help you with your questions.", + * image: { url: "/logo.png" }, + * } + */ + welcomeMessage?: WelcomeMessageConfig; + + /** + * Conversation starters shown when the thread is empty. + * Clickable prompts that help users begin a conversation. + * + * @example + * conversationStarters: { + * variant: "short", // "short" for pill buttons, "long" for list items + * options: [ + * { displayText: "Help me get started", prompt: "Help me get started" }, + * { displayText: "What can you do?", prompt: "What can you do?" }, + * ], + * } + */ + conversationStarters?: ConversationStartersConfig; + /** * Form factor for the chat widget layout * - "full-page": Takes up the entire viewport (default)