@modochats/widget 0.1.0

package/.github/workflows/build-and-publish.yml

@@ -0,0 +1,174 @@
+name: Build and Publish to CDN
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "23"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build:cdn
+
+      - name: Create build artifacts
+        run: |
+          mkdir -p build-artifacts
+          cp -r dist build-artifacts/
+          cp -r temp build-artifacts/
+          cp -r cdn-dist build-artifacts/
+          cp package.json build-artifacts/
+          cp README.md build-artifacts/
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-files
+          path: build-artifacts/
+          retention-days: 30
+
+  publish-cdn:
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push' && !contains(github.event.head_commit.message, 'Add CDN distribution files for build')
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: build-files
+          path: build-artifacts/
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "23"
+
+      - name: Use CDN-ready files
+        run: |
+          # The CDN files are already created by the build:cdn script
+          echo "Using pre-built CDN files from cdn-dist/"
+          ls -la build-artifacts/cdn-dist/
+
+      - name: Commit CDN files to repository
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Copy CDN files to the repository root
+          cp -r build-artifacts/cdn-dist/ ./
+
+          # Configure git
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+
+          # Add and commit CDN files
+          git add cdn-dist/
+          git commit -m "Add CDN distribution files for build ${{ github.run_number }}" || echo "No changes to commit"
+
+          # Push to repository
+          git push https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git main
+
+      - name: Create GitHub Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ github.run_number }}
+          release_name: Release v${{ github.run_number }}
+          body: |
+            ## Build ${{ github.run_number }}
+
+            ### Files included:
+            - modo-web-component.js - Legacy UMD bundle
+            --modo-widget.js - UMD bundle
+            --modo-widget.min.js - Minified UMD bundle
+            - modo-web-component.min.js - Legacy Minified UMD bundle
+            - dist/ - Full distribution files
+
+            ### CDN Usage:
+            jsDelivr (Recommended):
+            <script src="https://cdn.jsdelivr.net/gh/${{ github.repository }}@main/cdn-dist/modo-widget.min.js"></script>
+            <script src="https://cdn.jsdelivr.net/gh/${{ github.repository }}@main/cdn-dist/modo-web-component.min.js"></script> (legacy)
+
+            GitHub Raw:
+            <script src="https://raw.githubusercontent.com/${{ github.repository }}/main/cdn-dist/modochat-wifget.min.js"></script>
+            <script src="https://raw.githubusercontent.com/${{ github.repository }}/main/cdn-dist/modo-web-component.min.js"></script> (legacy)
+
+          draft: false
+          prerelease: false
+
+      - name: Upload Release Assets
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./build-artifacts/cdn-dist/modo-widget.js
+          asset_name: modo-widget.js
+          asset_content_type: application/javascript
+
+      - name: Upload Release Assets Legacy
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./build-artifacts/cdn-dist/modo-web-component.js
+          asset_name: modo-web-component.js
+          asset_content_type: application/javascript
+
+      - name: Upload Minified Release Asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./build-artifacts/cdn-dist/modo-widget.min.js
+          asset_name: modo-widget.min.js
+          asset_content_type: application/javascript
+
+      - name: Upload Minified Release Asset Legacy
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./build-artifacts/cdn-dist/modo-web-component.min.js
+          asset_name: modo-web-component.min.js
+          asset_content_type: application/javascript
+
+      - name: Upload Dist Folder
+        run: |
+          cd build-artifacts/cdn-dist
+          tar -czf dist.tar.gz dist/
+
+      - name: Upload Dist Archive
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./build-artifacts/cdn-dist/dist.tar.gz
+          asset_name: dist.tar.gz
+          asset_content_type: application/gzip

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Modochat"]
+}

package/README.md

@@ -0,0 +1,163 @@
+# Modo Widget
+
+A responsive web chat widget for customer support.
+
+## Features
+
+- 🌙 Dark/Light theme support with customizable colors
+- 🌐 RTL (Persian/Farsi) language support
+- 📱 Mobile responsive design
+- 💬 Real-time chat functionality with WebSocket connections
+- 🔗 WebSocket connection status indicator
+- 📝 Markdown message support
+- 🎤 Voice chat capabilities
+- 🖥️ Fullscreen mode option
+- 🎨 Customizable position (left/right), primary and foreground colors
+- 👤 User data management and updates
+- ⚡ TypeScript + Modern JavaScript
+- 🔄 Auto-initialization support
+
+## Configuration Options
+
+The widget can be customized with the following options:
+
+| Option            | Type                  | Default     | Description                                    |
+| ----------------- | --------------------- | ----------- | ---------------------------------------------- |
+| `position`        | `"left" \| "right"`   | `"right"`   | Position of the chat widget on the screen      |
+| `theme`           | `"dark" \| "light"`   | `"dark"`    | Theme mode (dark or light)                     |
+| `primaryColor`    | `string`              | `"#667eea"` | Primary color for the widget                   |
+| `title`           | `string`              | `""`        | Title displayed in the chat header             |
+| `foregroundColor` | `string`              | `"#fff"`    | Foreground text color                          |
+| `userData`        | `Record<string, any>` | `undefined` | Custom user data object                        |
+| `autoInit`        | `boolean`             | `false`     | Whether to automatically initialize the widget |
+| `fullScreen`      | `boolean`             | `false`     | Enable fullscreen mode                         |
+
+## Quick Start
+
+### Development
+
+1. **Install dependencies**
+
+   ```bash
+   yarn install
+   ```
+
+2. **Start development server**
+
+   ```bash
+   yarn dev:full
+   ```
+
+   This runs TypeScript compiler, Rollup bundler, and live server concurrently.
+
+3. **Open browser** Navigate to `http://localhost:3000`
+
+### Production Build
+
+```bash
+yarn build
+```
+
+This will:
+
+- Compile TypeScript to JavaScript
+- Minify the code
+- Bundle with Rollup
+- Output to `bundle.js`
+
+## Project Structure
+
+```
+├── src/                    # Source code
+│   ├── app.ts             # Main application entry
+│   ├── models/            # Data models
+│   ├── services/          # UI and business logic
+│   ├── utils/             # Helper utilities
+│   └── types/             # TypeScript types
+├── temp/                   # Development files
+│   ├── css/               # Compiled styles
+│   └── dev.html           # Development HTML
+├── scripts/               # Build scripts
+└── bundle.js              # Production bundle
+```
+
+## Available Scripts
+
+| Script            | Description                    |
+| ----------------- | ------------------------------ |
+| `yarn dev:full`   | Full development environment   |
+| `yarn dev:ts`     | TypeScript compiler watch mode |
+| `yarn dev:rollup` | Rollup bundler watch mode      |
+| `yarn dev:server` | Live development server        |
+| `yarn build`      | Production build               |
+| `yarn compile`    | Compile TypeScript             |
+| `yarn minify`     | Minify JavaScript              |
+
+## Usage
+
+Include the widget in your HTML:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Your Website</title>
+  </head>
+  <body>
+    <!-- Your website content -->
+
+    <script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
+    <script>
+      // Initialize the chat widget
+      const widget = new ModoWidget("your-public-key", {
+        position: "right",
+        theme: "dark",
+        primaryColor: "#667eea",
+        title: "Chat with Us",
+        foregroundColor: "#ffffff",
+        userData: {name: "John Doe", email: "john@example.com"},
+        autoInit: true,
+        fullScreen: false
+      });
+    </script>
+  </body>
+</html>
+```
+
+### Initialization Options
+
+Pass configuration options as the second parameter to the `ModoWidget` constructor. All options are optional except the public key.
+
+Example with minimal options:
+
+```javascript
+const widget = new ModoWidget("your-public-key");
+widget.init(); // Manual initialization if autoInit is false
+```
+
+## API Methods
+
+Once initialized, you can interact with the widget instance:
+
+### Update User Data
+
+Update or add custom user data dynamically:
+
+```javascript
+await widget.updateUserData({
+  name: "Jane Doe",
+  email: "jane@example.com"
+});
+```
+
+This method merges the new data with existing user data and updates it on the server.
+
+## Requirements
+
+- Node.js 16+
+- Yarn package manager
+
+## License
+
+ISC

package/cdn-dist/README.md

@@ -0,0 +1,42 @@
+# Modo Web Component
+
+A lightweight web component library.
+
+## CDN Usage
+
+### jsDelivr
+```html
+<script src="https://cdn.jsdelivr.net/gh/your-username/modo-web-component@main/cdn-dist/modo-web-component.min.js"></script>
+```
+
+### GitHub Raw
+```html
+<script src="https://raw.githubusercontent.com/your-username/modo-web-component/main/cdn-dist/modo-web-component.min.js"></script>
+```
+
+## Usage
+
+```javascript
+// Initialize the chat widget
+const chat = new ModoChat('your-public-key', {
+  position: 'right', // 'left' or 'right'
+  theme: 'dark', // 'dark' or 'light'
+  primaryColor: '#667eea',
+  title: 'پشتیبانی چت'
+});
+```
+
+## Features
+
+- 🌙 Dark/Light theme support
+- 🌐 RTL (Persian/Farsi) language support
+- 📱 Mobile responsive design
+- 💬 Real-time chat functionality
+- 🔗 WebSocket connection status
+- 📝 Markdown message support
+
+## Files
+
+- `modo-web-component.js` - Development version
+- `modo-web-component.min.js` - Production version (minified)
+- `dist/` - Full distribution files