@data-netmonk/mona-chat-widget 2.1.30 → 2.1.32

package/README.md

@@ -2,6 +2,146 @@
 
 Chat widget package developed by Netmonk data & solution team to be imported in Netmonk products
 
+## 🚅 Quick start
+
+### Prerequisites
+
+---
+
+1. Install dependencies
+   ```
+   npm install
+   ```
+2. Copy .env.example
+   ```
+   cp .env.example .env
+   ```
+3. Populate .env
+4. Enable mock mode (optional)
+   
+   To test the chat widget without a backend server, set `VITE_USE_MOCK_RESPONSES=true` in your `.env` file. The widget will respond to messages like:
+   - "start", "hello", "hi", "halo" - Greeting messages
+   - "help", "bantuan" - Help information
+   - "terima kasih", "thank you" - Acknowledgments
+   - "bye", "goodbye" - Farewell messages
+   - And more! Check `src/components/ChatWidget/utils/helpers.js` for full list
+
+---
+
+### Mock Mode (Demo without Backend)
+
+---
+
+The chat widget includes a built-in mock mode for testing and demonstrations without requiring a backend server.
+
+**To enable mock mode:**
+1. Set `VITE_USE_MOCK_RESPONSES=true` in your `.env` file
+2. Run the app normally with `npm run dev`
+
+**Mock responses include:**
+- Greetings (hello, hi, halo, start) - with interactive buttons
+- Help commands
+- Device list with clickable buttons (type "devices" or "show devices")
+- Thank you acknowledgments
+- Farewells
+- Time-based greetings (good morning, etc.)
+- And automatically falls back to mock mode if backend fails
+
+**Interactive Buttons Demo:**
+Type these messages to see button responses:
+- "start" - Welcome message with action buttons
+- "show devices" or "devices" - List of devices as clickable buttons
+- Click any button to trigger the next action
+
+**To add custom mock responses:**
+Edit the `mockBotResponses` object in `src/components/ChatWidget/utils/mockBotResponses.js`
+
+For text-only responses:
+```javascript
+"trigger": "Response text"
+```
+
+For responses with buttons:
+```javascript
+"trigger": {
+  text: "Your message here",
+  buttons: [
+    { title: "Button 1", payload: "action_1" },
+    { title: "Button 2", payload: "action_2" },
+    { title: "Link Button", url: "https://example.com" }
+  ]
+}
+```
+
+---
+
+### Storybook
+
+---
+
+1. **How to run Storybook locally** (access at http://localhost:6006)
+
+   ```
+   npm run storybook
+   ```
+
+2. **How to build Storybook**
+
+   ```
+   npm run build-storybook
+   ```
+
+3. **How to serve Storybook**
+
+   ```
+   npm run serve-storybook
+   ```
+
+---
+
+### Library (how to update and publish)
+
+---
+
+1. **Commit changes**
+   ```
+   git add .
+   git commit -m "Your commit message"
+   ```
+2. **Update version**
+
+   ```bash
+   npm version patch  # for bug fixes (1.0.0 -> 1.0.1)
+   ```
+
+   ```bash
+   npm version minor  # for new features (1.0.0 -> 1.1.0)
+   ```
+
+   ```bash
+   npm version major  # for breaking changes (1.0.0 -> 2.0.0)
+   ```
+
+3. **Build as a library** (build file at `/dist` directory)
+
+   ```
+   npm run build
+   ```
+
+4. **Copy declaration file to `/dist`**
+
+   ```
+   cp ./src/declarations/index.d.ts ./dist/index.d.ts
+   ```
+
+5. **Publish**
+
+   ```
+   npm publish
+   ```
+
+---
+
 ### Library (how to import on your project)
 
 ---