nerdagent-chat-widget 1.0.0

package/dist/collection/script.js

@@ -0,0 +1,323 @@
+let widget = null;
+
+// Clean embed code generation
+
+// Function to get current widget configuration
+function getCurrentConfig() {
+  try {
+    // Check if required elements exist
+    const requiredElements = ['agentName', 'agentRole', 'primaryColor', 'accentColor', 'welcomeMessage', 'placeholderText', 'position', 'width', 'height'];
+    for (const id of requiredElements) {
+      if (!document.getElementById(id)) {
+        console.error('Required element not found:', id);
+        return getDefaultConfig();
+      }
+    }
+    
+    return {
+      agentName: document.getElementById('agentName').value || 'Support Agent',
+      agentRole: document.getElementById('agentRole').value || 'Customer Support',
+      primaryColor: document.getElementById('primaryColor').value || '#2d3e50',
+      accentColor: document.getElementById('accentColor').value || '#4e8cff',
+      welcomeMessage: document.getElementById('welcomeMessage').value || 'Hi! How can I help?',
+      placeholderText: document.getElementById('placeholderText').value || 'Type your message...',
+      position: document.getElementById('position').value || 'bottom-right',
+      width: parseInt(document.getElementById('width').value) || 350,
+      height: parseInt(document.getElementById('height').value) || 500,
+      showMinimizeButton: document.getElementById('showMinimizeButton')?.checked || true,
+      showTimestamps: document.getElementById('showTimestamps')?.checked || true,
+      enableFileUpload: document.getElementById('enableFileUpload')?.checked || false,
+      enableSpeech: document.getElementById('enableSpeech')?.checked || false,
+      showPoweredBy: document.getElementById('showPoweredBy')?.checked || true
+    };
+  } catch (error) {
+    console.error('Error getting config:', error);
+    return getDefaultConfig();
+  }
+}
+
+// Default configuration fallback
+function getDefaultConfig() {
+  return {
+    agentName: 'Support Agent',
+    agentRole: 'Customer Support',
+    primaryColor: '#2d3e50',
+    accentColor: '#4e8cff',
+    welcomeMessage: 'Hi! How can I help?',
+    placeholderText: 'Type your message...',
+    position: 'bottom-right',
+    width: 350,
+    height: 500,
+    showMinimizeButton: true,
+    showTimestamps: true,
+    enableFileUpload: false,
+    enableSpeech: false,
+    showPoweredBy: true
+  };
+}
+
+// Framework-specific code templates with syntax highlighting
+const codeTemplates = {
+  html: function(config) {
+    return '<span class="syntax-comment">&lt;!-- Add this to your HTML --&gt;</span>\n<span class="syntax-tag">&lt;nerd-chat-widget</span>\n  <span class="syntax-attr-name">agent-name</span>=<span class="syntax-attr-value">"' + config.agentName + '"</span>\n  <span class="syntax-attr-name">agent-role</span>=<span class="syntax-attr-value">"' + config.agentRole + '"</span>\n  <span class="syntax-attr-name">primary-color</span>=<span class="syntax-attr-value">"' + config.primaryColor + '"</span>\n  <span class="syntax-attr-name">accent-color</span>=<span class="syntax-attr-value">"' + config.accentColor + '"</span>\n  <span class="syntax-attr-name">welcome-message</span>=<span class="syntax-attr-value">"' + config.welcomeMessage + '"</span>\n  <span class="syntax-attr-name">placeholder-text</span>=<span class="syntax-attr-value">"' + config.placeholderText + '"</span>\n  <span class="syntax-attr-name">position</span>=<span class="syntax-attr-value">"' + config.position + '"</span>\n  <span class="syntax-attr-name">width</span>=<span class="syntax-attr-value">"' + config.width + '"</span>\n  <span class="syntax-attr-name">height</span>=<span class="syntax-attr-value">"' + config.height + '"</span>\n  <span class="syntax-attr-name">show-minimize-button</span>=<span class="syntax-attr-value">"' + config.showMinimizeButton + '"</span>\n  <span class="syntax-attr-name">show-timestamps</span>=<span class="syntax-attr-value">"' + config.showTimestamps + '"</span>\n  <span class="syntax-attr-name">enable-file-upload</span>=<span class="syntax-attr-value">"' + config.enableFileUpload + '"</span>\n  <span class="syntax-attr-name">enable-speech</span>=<span class="syntax-attr-value">"' + config.enableSpeech + '"</span>\n  <span class="syntax-attr-name">show-powered-by</span>=<span class="syntax-attr-value">"' + config.showPoweredBy + '"</span><span class="syntax-tag">&gt;</span>\n<span class="syntax-tag">&lt;/nerd-chat-widget&gt;</span>\n\n<span class="syntax-comment">&lt;!-- Add this script --&gt;</span>\n<span class="syntax-tag">&lt;script</span> <span class="syntax-attr-name">src</span>=<span class="syntax-attr-value">"https://cdn.nerdagent.ai/widget.js"</span><span class="syntax-tag">&gt;&lt;/script&gt;</span>';
+  },
+  
+  react: function(config) {
+    return '<span class="syntax-comment">// Install: npm install @nerdagent/chat-widget-react</span>\n<span class="syntax-keyword">import</span> React <span class="syntax-keyword">from</span> <span class="syntax-string">\'react\'</span>;\n<span class="syntax-keyword">import</span> { NerdChatWidget } <span class="syntax-keyword">from</span> <span class="syntax-string">\'@nerdagent/chat-widget-react\'</span>;\n\n<span class="syntax-keyword">function</span> <span class="syntax-tag">App</span>() {\n  <span class="syntax-keyword">return</span> (\n    <span class="syntax-tag">&lt;div</span> <span class="syntax-attr-name">className</span>=<span class="syntax-attr-value">"App"</span><span class="syntax-tag">&gt;</span>\n      <span class="syntax-tag">&lt;NerdChatWidget</span>\n        <span class="syntax-attr-name">agentName</span>=<span class="syntax-attr-value">"' + config.agentName + '"</span>\n        <span class="syntax-attr-name">agentRole</span>=<span class="syntax-attr-value">"' + config.agentRole + '"</span>\n        <span class="syntax-attr-name">primaryColor</span>=<span class="syntax-attr-value">"' + config.primaryColor + '"</span>\n        <span class="syntax-attr-name">accentColor</span>=<span class="syntax-attr-value">"' + config.accentColor + '"</span>\n        <span class="syntax-attr-name">welcomeMessage</span>=<span class="syntax-attr-value">"' + config.welcomeMessage + '"</span>\n        <span class="syntax-attr-name">position</span>=<span class="syntax-attr-value">"' + config.position + '"</span>\n        <span class="syntax-attr-name">width</span>={' + config.width + '}\n        <span class="syntax-attr-name">height</span>={' + config.height + '}\n        <span class="syntax-attr-name">showMinimizeButton</span>={' + config.showMinimizeButton + '}\n        <span class="syntax-attr-name">showTimestamps</span>={' + config.showTimestamps + '}\n      <span class="syntax-tag">/&gt;</span>\n    <span class="syntax-tag">&lt;/div&gt;</span>\n  );\n}\n\n<span class="syntax-keyword">export default</span> App;';
+  },
+  
+  angular: function(config) {
+    return '<span class="syntax-comment">// Install: npm install @nerdagent/chat-widget-angular</span>\n<span class="syntax-comment">// In your app.module.ts:</span>\n<span class="syntax-keyword">import</span> { NerdChatWidgetModule } <span class="syntax-keyword">from</span> <span class="syntax-string">\'@nerdagent/chat-widget-angular\'</span>;\n\n@<span class="syntax-tag">NgModule</span>({\n  <span class="syntax-attr-name">imports</span>: [\n    BrowserModule,\n    NerdChatWidgetModule\n  ]\n})\n\n<span class="syntax-comment">&lt;!-- In your component template: --&gt;</span>\n<span class="syntax-tag">&lt;nerd-chat-widget</span>\n  <span class="syntax-attr-name">[agentName]</span>=<span class="syntax-attr-value">"\'' + config.agentName + '\'"</span>\n  <span class="syntax-attr-name">[agentRole]</span>=<span class="syntax-attr-value">"\'' + config.agentRole + '\'"</span>\n  <span class="syntax-attr-name">[primaryColor]</span>=<span class="syntax-attr-value">"\'' + config.primaryColor + '\'"</span>\n  <span class="syntax-attr-name">[position]</span>=<span class="syntax-attr-value">"\'' + config.position + '\'"</span>\n  <span class="syntax-attr-name">[width]</span>=<span class="syntax-attr-value">"' + config.width + '"</span>\n  <span class="syntax-attr-name">[height]</span>=<span class="syntax-attr-value">"' + config.height + '"</span><span class="syntax-tag">&gt;</span>\n<span class="syntax-tag">&lt;/nerd-chat-widget&gt;</span>';
+  },
+  
+  vue: function(config) {
+    return '<span class="syntax-comment">// Install: npm install @nerdagent/chat-widget-vue</span>\n<span class="syntax-comment">// In your main.js:</span>\n<span class="syntax-keyword">import</span> { createApp } <span class="syntax-keyword">from</span> <span class="syntax-string">\'vue\'</span>;\n<span class="syntax-keyword">import</span> { NerdChatWidget } <span class="syntax-keyword">from</span> <span class="syntax-string">\'@nerdagent/chat-widget-vue\'</span>;\n\n<span class="syntax-keyword">const</span> app = <span class="syntax-tag">createApp</span>(App);\napp.<span class="syntax-tag">component</span>(<span class="syntax-string">\'nerd-chat-widget\'</span>, NerdChatWidget);\n\n<span class="syntax-comment">&lt;!-- In your component template: --&gt;</span>\n<span class="syntax-tag">&lt;template&gt;</span>\n  <span class="syntax-tag">&lt;nerd-chat-widget</span>\n    <span class="syntax-attr-name">:agent-name</span>=<span class="syntax-attr-value">"\'' + config.agentName + '\'"</span>\n    <span class="syntax-attr-name">:agent-role</span>=<span class="syntax-attr-value">"\'' + config.agentRole + '\'"</span>\n    <span class="syntax-attr-name">:primary-color</span>=<span class="syntax-attr-value">"\'' + config.primaryColor + '\'"</span>\n    <span class="syntax-attr-name">:position</span>=<span class="syntax-attr-value">"\'' + config.position + '\'"</span>\n    <span class="syntax-attr-name">:width</span>=<span class="syntax-attr-value">"' + config.width + '"</span>\n    <span class="syntax-attr-name">:height</span>=<span class="syntax-attr-value">"' + config.height + '"</span>\n  <span class="syntax-tag">/&gt;</span>\n<span class="syntax-tag">&lt;/template&gt;</span>';
+  }
+};
+
+// Function to update code display with framework-specific examples
+function updateCodeDisplay() {
+  console.log('=== updateCodeDisplay called ===');
+  
+  try {
+    const activeTab = document.querySelector('.tab-btn.active');
+    console.log('Active tab:', activeTab);
+    
+    const selectedFramework = activeTab ? activeTab.getAttribute('data-framework') : 'html';
+    console.log('Selected framework:', selectedFramework);
+    
+    const codeContent = document.getElementById('codeContent');
+    console.log('Code content element:', codeContent);
+    
+    if (!codeContent) {
+      console.error('Code content element not found');
+      return;
+    }
+    
+    // Get current configuration
+    const config = getCurrentConfig();
+    console.log('Current config keys:', Object.keys(config));
+    
+    // Update framework label first
+    const frameworkLabel = document.getElementById('frameworkLabel');
+    if (frameworkLabel) {
+      const labels = {
+        'html': 'HTML',
+        'react': 'ReactJS', 
+        'angular': 'Angular',
+        'vue': 'VueJS'
+      };
+      frameworkLabel.textContent = labels[selectedFramework] || 'HTML';
+      console.log('Updated framework label to:', labels[selectedFramework]);
+    }
+    
+    // Check if template exists
+    console.log('Available templates:', Object.keys(codeTemplates));
+    const codeTemplate = codeTemplates[selectedFramework];
+    console.log('Template found:', !!codeTemplate);
+    
+    if (codeTemplate) {
+      const generatedCode = codeTemplate(config);
+      console.log('Generated code length:', generatedCode.length);
+      console.log('First 100 chars:', generatedCode.substring(0, 100));
+      codeContent.innerHTML = generatedCode;
+      console.log('Code updated successfully');
+    } else {
+      console.error('No template found for framework:', selectedFramework);
+      codeContent.innerHTML = '<span style="color: red;">Error: Template not found for ' + selectedFramework + '</span>';
+    }
+  } catch (error) {
+    console.error('Error in updateCodeDisplay:', error);
+    console.error('Error stack:', error.stack);
+    const codeContent = document.getElementById('codeContent');
+    if (codeContent) {
+      codeContent.innerHTML = '<span style="color: red;">Error loading code example: ' + error.message + '</span>';
+    }
+  }
+  
+  console.log('=== updateCodeDisplay finished ===');
+}
+
+// Function to get clean code without HTML syntax highlighting
+function getCleanCode(framework, config) {
+  if (framework === 'html') {
+    return '<!-- Add this to your HTML -->' + '\n' +
+           '<nerd-chat-widget' + '\n' +
+           '  agent-name="' + config.agentName + '"' + '\n' +
+           '  agent-role="' + config.agentRole + '"' + '\n' +
+           '  primary-color="' + config.primaryColor + '"' + '\n' +
+           '  position="' + config.position + '"' + '\n' +
+           '  width="' + config.width + '"' + '\n' +
+           '  height="' + config.height + '">' + '\n' +
+           '</nerd-chat-widget>' + '\n' + '\n' +
+           '<!-- Add this script -->' + '\n' +
+           '<script src="https://cdn.nerdagent.ai/widget.js"><\/script>';
+  } else if (framework === 'react') {
+    return '// Install: npm install @nerdagent/chat-widget-react' + '\n' +
+           'import React from \'react\';' + '\n' +
+           'import { NerdChatWidget } from \'@nerdagent/chat-widget-react\';' + '\n' + '\n' +
+           'function App() {' + '\n' +
+           '  return (' + '\n' +
+           '    <div className="App">' + '\n' +
+           '      <NerdChatWidget' + '\n' +
+           '        agentName="' + config.agentName + '"' + '\n' +
+           '        position="' + config.position + '"' + '\n' +
+           '        width={' + config.width + '}' + '\n' +
+           '      />' + '\n' +
+           '    </div>' + '\n' +
+           '  );' + '\n' +
+           '}' + '\n' + '\n' +
+           'export default App;';
+  } else if (framework === 'angular') {
+    return '// Install: npm install @nerdagent/chat-widget-angular' + '\n' +
+           'import { NerdChatWidgetModule } from \'@nerdagent/chat-widget-angular\';' + '\n' + '\n' +
+           '<!-- In your component template: -->' + '\n' +
+           '<nerd-chat-widget' + '\n' +
+           '  [agentName]="' + config.agentName + '"' + '\n' +
+           '  [position]="' + config.position + '"' + '\n' +
+           '  [width]="' + config.width + '">' + '\n' +
+           '</nerd-chat-widget>';
+  } else if (framework === 'vue') {
+    return '// Install: npm install @nerdagent/chat-widget-vue' + '\n' +
+           'import { NerdChatWidget } from \'@nerdagent/chat-widget-vue\';' + '\n' + '\n' +
+           '<template>' + '\n' +
+           '  <nerd-chat-widget' + '\n' +
+           '    :agent-name="' + config.agentName + '"' + '\n' +
+           '    :position="' + config.position + '"' + '\n' +
+           '    :width="' + config.width + '"' + '\n' +
+           '  />' + '\n' +
+           '</template>';
+  }
+  
+  return getCleanCode('html', config);
+}
+
+// Enhanced copy function with better feedback
+function copyCode() {
+  const activeTab = document.querySelector('.tab-btn.active');
+  const selectedFramework = activeTab ? activeTab.getAttribute('data-framework') : 'html';
+  const config = getCurrentConfig();
+  const cleanCode = getCleanCode(selectedFramework, config);
+  
+  navigator.clipboard.writeText(cleanCode).then(() => {
+    const copyBtn = document.querySelector('.copy-btn');
+    const originalText = copyBtn.textContent;
+    const originalBg = copyBtn.style.background;
+    
+    // Enhanced feedback
+    copyBtn.innerHTML = '✓ Copied!';
+    copyBtn.style.background = '#28a745';
+    copyBtn.style.transform = 'scale(0.95)';
+    
+    setTimeout(() => {
+      copyBtn.textContent = originalText;
+      copyBtn.style.background = originalBg || '#4e8cff';
+      copyBtn.style.transform = 'scale(1)';
+    }, 2000);
+  }).catch(err => {
+    console.error('Failed to copy code:', err);
+    const copyBtn = document.querySelector('.copy-btn');
+    copyBtn.innerHTML = '✗ Failed';
+    copyBtn.style.background = '#dc3545';
+    
+    setTimeout(() => {
+      copyBtn.textContent = 'Copy';
+      copyBtn.style.background = '#4e8cff';
+    }, 2000);
+  });
+}
+
+// Enhanced event listeners with dynamic code updates
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOM Content Loaded - setting up event listeners');
+  
+  // Tab switching functionality with code updates
+  const tabButtons = document.querySelectorAll('.tab-btn');
+  console.log('Found tab buttons:', tabButtons.length);
+  tabButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      console.log('Tab clicked:', this.getAttribute('data-framework'));
+      
+      // Remove active class from all tabs
+      tabButtons.forEach(btn => btn.classList.remove('active'));
+      // Add active class to clicked tab
+      this.classList.add('active');
+      
+      console.log('About to call updateCodeDisplay...');
+      // Update code display for new framework
+      updateCodeDisplay();
+    });
+  });
+  
+  // Add event listeners to update both widget and code
+  const configInputs = document.querySelectorAll('#agentName, #agentRole, #primaryColor, #accentColor, #welcomeMessage, #placeholderText, #position, #width, #height, #showMinimizeButton, #showTimestamps, #enableFileUpload, #enableSpeech, #showPoweredBy');
+  configInputs.forEach(input => {
+    // Update widget only (code display is static for now)
+    input.addEventListener('input', function() {
+      updateWidget();
+      // updateCodeDisplay(); // Temporarily disabled
+    });
+    input.addEventListener('change', function() {
+      updateWidget();
+      // updateCodeDisplay(); // Temporarily disabled
+    });
+  });
+  
+  // Initialize code display
+  setTimeout(() => {
+    console.log('Initializing code display...');
+    updateCodeDisplay();
+  }, 100);
+});
+
+function updateWidget() {
+  if (widget) {
+    const config = getCurrentConfig();
+    
+    // Update widget attributes using setAttribute for kebab-case
+    widget.setAttribute('agent-name', config.agentName);
+    widget.setAttribute('agent-role', config.agentRole);
+    widget.setAttribute('primary-color', config.primaryColor);
+    widget.setAttribute('accent-color', config.accentColor);
+    widget.setAttribute('welcome-message', config.welcomeMessage);
+    widget.setAttribute('placeholder-text', config.placeholderText);
+    widget.setAttribute('position', config.position);
+    widget.setAttribute('width', config.width.toString());
+    widget.setAttribute('height', config.height.toString());
+    widget.setAttribute('show-minimize-button', config.showMinimizeButton.toString());
+    widget.setAttribute('show-timestamps', config.showTimestamps.toString());
+    widget.setAttribute('enable-file-upload', config.enableFileUpload.toString());
+    widget.setAttribute('enable-speech', config.enableSpeech.toString());
+    widget.setAttribute('show-powered-by', config.showPoweredBy.toString());
+    
+    console.log('Widget updated:', config.agentName);
+  } else {
+    console.log('Widget not ready yet, please wait...');
+  }
+}
+
+// Wait for component to be defined
+customElements.whenDefined('nerd-chat-widget').then(() => {
+  console.log('Chat widget component loaded!');
+  widget = document.getElementById('chatWidget');
+  
+  // Initialize widget
+  updateWidget();
+
+  // Listen to widget events
+  widget.addEventListener('messageSent', (e) => {
+    console.log('Message sent:', e.detail.message);
+  });
+
+  widget.addEventListener('widgetOpened', (e) => {
+    console.log('Widget opened');
+  });
+
+  widget.addEventListener('widgetClosed', (e) => {
+    console.log('Widget closed');
+  });
+}).catch(err => {
+  console.error('Failed to load chat widget:', err);
+});
+
+// Widget should load successfully now

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;