Merge pull request #12 from thesysdev/zk/feat/conv-startersv2

Add welcome message and conversation starters features to the chat widget configuration in README and types.

Author: zahlekhan

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

package-lock.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",

package.json

@@ -289,6 +289,8 @@ function ChatWithPersistence({
     theme: config.theme,
     agentName: config.agentName || "Assistant",
     logoUrl: config.logoUrl,
+    welcomeMessage: config.welcomeMessage,
+    conversationStarters: config.conversationStarters,
     formFactor,
   };
 

src/index.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)