@schmitech/chatbot-widget 0.2.0 → 0.2.3

package/README.md

@@ -46,69 +46,6 @@ A reusable chatbot widget that can be easily integrated into any website.
    - `chatbot-widget.umd.js` - UMD module (if you need the JS separately)
    - `chatbot-widget.css` - Styles (if you need the CSS separately)
 
-## Usage
-
-### Using direct script tags
-
-Add the following code to your website's HTML:
-
-```html
-<!-- Include React and ReactDOM first -->
-<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
-<!-- Include the bundled widget -->
-<script src="path/to/chatbot-widget.bundle.js"></script>
-
-<script>
-  // Initialize the widget when the page loads
-  window.addEventListener('load', function() {
-    window.initChatbotWidget({
-      apiUrl: 'https://your-api-server.com'
-    });
-  });
-</script>
-```
-
-### Using npm
-
-1. Install the package:
-   ```bash
-   npm install chatbot-widget
-   ```
-
-2. Import in your application:
-   ```javascript
-   import { ChatWidget } from 'chatbot-widget';
-   
-   // Use in your React component
-   function App() {
-     return (
-       <div className="App">
-         <ChatWidget />
-       </div>
-     );
-   }
-   
-   // Set API URL via the exposed function
-   window.ChatbotWidget.setApiUrl('https://your-api-server.com');
-   ```
-
-### Advanced Usage
-
-You can customize the widget by specifying a container:
-
-```html
-<div id="my-chat-container"></div>
-
-<script>
-  window.addEventListener('load', function() {
-    window.initChatbotWidget({
-      apiUrl: 'https://your-api-server.com',
-      containerSelector: '#my-chat-container'
-    });
-  });
-</script>
-```
 
 ## Customizing the Widget
 Check file demo.html containing an working example on how to customize the widget.
@@ -156,78 +93,55 @@ npm run preview
 
 ## Publishing to npm
 
-### Option 1: Using npm link (for local development)
-
-To use this widget in other projects on your local machine during development:
-
-1. In this widget directory, run:
-   ```bash
-   npm run build
-   npm run build:bundle
-   npm link
-   ```
-
-2. In your project directory, run:
-   ```bash
-   npm link chatbot-widget
-   ```
-
-3. Now you can import and use the widget in your project:
-   ```javascript
-   import { ChatWidget } from 'chatbot-widget';
-   ```
-
-### Option 2: Installing from a local directory
+To publish a new version of the widget:
 
-You can also install the package directly from the local directory:
-
-1. In this widget directory, run:
-   ```bash
-   npm run build
-   npm run build:bundle
-   ```
-
-2. In your project directory, run:
-   ```bash
-   npm install /path/to/qa-chatbot-server/widget
-   ```
-
-3. Now you can import and use the widget in your project:
-   ```javascript
-   import { ChatWidget } from 'chatbot-widget';
-   ```
-
-### Option 3: Publishing to npm (for production)
-
-To make this widget available to anyone via npm:
-
-1. Build the widget and create the bundle:
+1. Build the widget:
    ```bash
    npm run build
-   npm run build:bundle
    ```
 
-2. Login to npm with your account:
+2. Test the package locally (optional):
    ```bash
-   npm login
+   npm pack --dry-run
    ```
 
-3. Publish the package (if you're publishing for the first time, or updating the version):
+   You should see an output like this:
+   npm notice 
+      ```bash
+      npm notice 📦 @schmitech/chatbot-widget@0.2.0
+      npm notice === Tarball Contents === 
+      npm notice 1.1kB  package.json
+      npm notice 31.0kB dist/chatbot-widget.css
+      npm notice 160.0kB dist/chatbot-widget.umd.js
+      npm notice 2.1kB dist/index.d.ts
+      ...
+      npm notice === Tarball Details === 
+      npm notice name:          @schmitech/chatbot-widget
+      npm notice version:       0.2.0
+      npm notice package size:  193.2 kB
+      npm notice unpacked size: 1.2 MB
+      npm notice shasum:        abc123...
+      npm notice integrity:     sha512-...
+      npm notice total files:   15
+      ```
+
+3. Update the version:
    ```bash
-   npm publish --access public
+   npm version patch  # for bug fixes
+   npm version minor  # for new features
+   npm version major  # for breaking changes
    ```
 
-4. To update an existing package, first update the version in package.json, then run:
+4. Publish to npm:
    ```bash
-   npm version patch # or minor or major
    npm publish --access public
    ```
 
 ### After Publishing
 
-The package has been successfully published to npm as `@schmitech/chatbot-widget` version 0.1.0!
+The package is available on npm as `@schmitech/chatbot-widget`. The latest version is 0.2.0.
 
-You can now use it in any project:
+You can use it in any project:
 
 1. Visit the package on npm:
    ```
@@ -242,66 +156,37 @@ You can now use it in any project:
 3. Test the bundle in a simple HTML file:
    ```html
    <!DOCTYPE html>
-   <html>
+   <html lang="en">
    <head>
-     <title>Chatbot Widget Test</title>
+      <meta charset="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Your Web App</title>
+      <!-- Add widget CSS -->
+      <link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.css">
    </head>
    <body>
-     <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-     <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-     <script src="https://unpkg.com/@schmitech/chatbot-widget@0.1.0/dist/chatbot-widget.bundle.js"></script>
-     <script>
-       window.addEventListener('load', function() {
-         window.initChatbotWidget({
-           apiUrl: 'https://your-api-server.com'
-         });
-       });
-     </script>
+      <div id="root"></div>
+      
+      <!-- Widget dependencies -->
+      <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
+      <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+      <script src="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.umd.js" crossorigin></script>
    </body>
    </html>
    ```
 
-4. Verify the files in an existing installation:
-   ```bash
-   ls -la node_modules/@schmitech/chatbot-widget/dist
-   ```
-   
-   You should see these files:
-   - `chatbot-widget.bundle.js` - The bundled JS+CSS file
-   - `chatbot-widget.umd.js` - The UMD module 
-   - `chatbot-widget.css` - The CSS file
-
-### Troubleshooting npm Publishing
-
-If you encounter issues publishing to npm, check the following:
-
-1. **Package Not Found (404)**
-   - Confirm you've successfully completed the `npm publish --access public` command
-   - Ensure there were no errors during publishing
-   - Wait a few minutes as npm registry might take time to update
-
-2. **Authentication Issues**
-   - Make sure you're logged in with `npm login`
-   - Verify your account has permission to publish
-
-3. **Name Already Taken**
-   - If the package name is already taken, modify the name in package.json
-   - Use a more specific scoped name like `@your-username/chatbot-widget`
-
-4. **Local Testing Before Publishing**
-   - To test locally before publishing, use Option 1 or 2 described above
-
 ### Importing the Bundled Version
 
-After publishing, users can import your bundled widget in different ways:
+You can import the widget in different ways:
 
 ```html
 <!-- HTML - Using the full bundle (JS + CSS combined) -->
-<script src="https://unpkg.com/@schmitech/chatbot-widget/dist/chatbot-widget.bundle.js"></script>
+<script src="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.bundle.js"></script>
 
 <!-- Using UMD version + separate CSS -->
-<script src="https://unpkg.com/@schmitech/chatbot-widget"></script>
-<link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget/dist/chatbot-widget.css" />
+<script src="https://unpkg.com/@schmitech/chatbot-widget@0.2.0"></script>
+<link rel="stylesheet" href="https://unpkg.com/@schmitech/chatbot-widget@0.2.0/dist/chatbot-widget.css" />
 ```
 
 ```javascript
@@ -311,6 +196,78 @@ import { ChatWidget } from '@schmitech/chatbot-widget';
 import '@schmitech/chatbot-widget/bundle';
 ```
 
+Using in TSX components:
+
+```javascript
+useEffect(() => {
+    // Initialize the widget when component mounts
+    if (typeof window !== 'undefined' && window.initChatbotWidget) {
+      console.log('Initializing chatbot widget...');
+      setTimeout(() => {
+        try {
+          window.initChatbotWidget!({
+            apiUrl: import.meta.env.VITE_API_ENDPOINT,
+            widgetConfig: {
+              header: {
+                title: "Community Services Help Center"
+              },
+              welcome: {
+                title: "Welcome to Our Community Services!",
+                description: "I can help you with information about youth programs, senior services, adult education, family services, and more."
+              },
+              suggestedQuestions: [
+                {
+                  text: "What youth programs are available?",
+                  query: "Tell me about the youth programs"
+                },
+                {
+                  text: "Senior services information",
+                  query: "What services are available for seniors?"
+                },
+                {
+                  text: "Adult education courses",
+                  query: "What adult education courses do you offer?"
+                }
+              ],
+              theme: {
+                primary: '#2C3E50',
+                secondary: '#f97316',
+                background: '#ffffff',
+                text: {
+                  primary: '#1a1a1a',
+                  secondary: '#666666',
+                  inverse: '#ffffff'
+                },
+                input: {
+                  background: '#f9fafb',
+                  border: '#e5e7eb'
+                },
+                message: {
+                  user: '#2C3E50',
+                  assistant: '#ffffff',
+                  userText: '#ffffff'
+                },
+                suggestedQuestions: {
+                  background: '#fff7ed',
+                  hoverBackground: '#ffedd5',
+                  text: '#2C3E50'
+                },
+                iconColor: '#f97316'
+              },
+              icon: "message-square"
+            }
+          });
+          console.log('Chatbot widget initialized successfully');
+        } catch (error) {
+          console.error('Failed to initialize chatbot widget:', error);
+        }
+      }, 1000);
+    } else {
+      console.error('Chatbot widget initialization function not found');
+    }
+  }, []);
+```
+
 ### Known Limitations and Troubleshooting
 
 #### Scrolling Behavior