nerdagent-chat-widget-vue 1.0.3 → 1.0.6

package/README.md

@@ -1,15 +1,6 @@
 # NerdAgent Chat Widget for Vue
 
-A powerful, customizable chat widget component for Vue applications. Built with Stencil.js for maximum compatibility and performance.
-
-## Features
-
-- 🚀 **Framework Agnostic Core** - Built with Stencil.js Web Components
-- 🎨 **Highly Customizable** - Colors, positioning, features, and more
-- 📱 **Responsive Design** - Works on desktop and mobile
-- 🔧 **TypeScript Support** - Full type definitions included
-- ⚡ **Lightweight** - Minimal bundle size impact
-- 🎯 **Easy Integration** - Simple Vue component wrapper
+A customizable chat widget component for Vue applications.
 
 ## Installation
 
@@ -17,19 +8,22 @@ A powerful, customizable chat widget component for Vue applications. Built with
 npm install nerdagent-chat-widget-vue
 ```
 
-## Quick Start
+## Usage
 
-### 1. Import the Component
+### Vue 3 with Composition API
 
 ```vue
 <template>
   <div class="app">
     <NerdChatWidget
+      :apiKey="'your-api-key'"
+      :agentId="'your-agent-id'"
       :agent-name="'Support Agent'"
       :agent-role="'Customer Support'"
       :primary-color="'#2d3e50'"
       :accent-color="'#4e8cff'"
       :welcome-message="'Hi! How can I help you today?'"
+      :placeholder-text="'Type your message...'"
       :position="'bottom-right'"
       :width="'350'"
       :height="'500'"
@@ -38,55 +32,6 @@ npm install nerdagent-chat-widget-vue
       :enable-file-upload="false"
       :enable-speech="false"
       :show-powered-by="true"
-      @message-sent="onMessageSent"
-      @widget-opened="onWidgetOpened"
-      @widget-closed="onWidgetClosed"
-    />
-  </div>
-</template>
-
-<script>
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-
-export default {
-  name: 'App',
-  components: {
-    NerdChatWidget
-  },
-  methods: {
-    onMessageSent(event) {
-      console.log('Message sent:', event);
-    },
-    onWidgetOpened() {
-      console.log('Widget opened');
-    },
-    onWidgetClosed() {
-      console.log('Widget closed');
-    }
-  }
-}
-</script>
-```
-
-### 2. With Composition API (Vue 3)
-
-```vue
-<template>
-  <div class="app">
-    <NerdChatWidget
-      :agent-name="config.agentName"
-      :agent-role="config.agentRole"
-      :primary-color="config.primaryColor"
-      :accent-color="config.accentColor"
-      :welcome-message="config.welcomeMessage"
-      :position="config.position"
-      :width="config.width"
-      :height="config.height"
-      :show-minimize-button="config.showMinimizeButton"
-      :show-timestamps="config.showTimestamps"
-      :enable-file-upload="config.enableFileUpload"
-      :enable-speech="config.enableSpeech"
-      :show-powered-by="config.showPoweredBy"
       @message-sent="handleMessageSent"
       @widget-opened="handleWidgetOpened"
       @widget-closed="handleWidgetClosed"
@@ -95,30 +40,9 @@ export default {
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
 import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
 
-const config = reactive({
-  agentName: 'Support Agent',
-  agentRole: 'Customer Support',
-  primaryColor: '#2d3e50',
-  accentColor: '#4e8cff',
-  welcomeMessage: 'Hi! How can I help you today?',
-  placeholderText: 'Type your message...',
-  position: 'bottom-right',
-  width: '350',
-  height: '500',
-  showMinimizeButton: true,
-  showTimestamps: true,
-  enableFileUpload: false,
-  enableSpeech: false,
-  showPoweredBy: true
-});
-
-const messages = ref([]);
-
 const handleMessageSent = (event) => {
-  messages.value.push(event);
   console.log('Message sent:', event);
 };
 
@@ -132,100 +56,66 @@ const handleWidgetClosed = () => {
 </script>
 ```
 
-### 3. With TypeScript
+### Vue 2 with Options API
 
 ```vue
 <template>
   <div class="app">
     <NerdChatWidget
-      :agent-name="config.agentName"
-      :agent-role="config.agentRole"
-      :primary-color="config.primaryColor"
-      :accent-color="config.accentColor"
-      :welcome-message="config.welcomeMessage"
-      :position="config.position"
-      :width="config.width"
-      :height="config.height"
-      :show-minimize-button="config.showMinimizeButton"
-      :show-timestamps="config.showTimestamps"
-      :enable-file-upload="config.enableFileUpload"
-      :enable-speech="config.enableSpeech"
-      :show-powered-by="config.showPoweredBy"
-      @message-sent="handleMessageSent"
-      @widget-opened="handleWidgetOpened"
-      @widget-closed="handleWidgetClosed"
+      :apiKey="'your-api-key'"
+      :agentId="'your-agent-id'"
+      :agent-name="'Support Agent'"
+      :agent-role="'Customer Support'"
+      :primary-color="'#2d3e50'"
+      :accent-color="'#4e8cff'"
+      :welcome-message="'Hi! How can I help you today?'"
+      :position="'bottom-right'"
+      :width="'350'"
+      :height="'500'"
+      @message-sent="onMessageSent"
+      @widget-opened="onWidgetOpened"
+      @widget-closed="onWidgetClosed"
     />
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { NerdChatWidget, WidgetPosition } from 'nerdagent-chat-widget-vue';
+<script>
+import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
 
-interface ChatConfig {
-  agentName: string;
-  agentRole: string;
-  primaryColor: string;
-  accentColor: string;
-  welcomeMessage: string;
-  placeholderText: string;
-  position: WidgetPosition;
-  width: string;
-  height: string;
-  showMinimizeButton: boolean;
-  showTimestamps: boolean;
-  enableFileUpload: boolean;
-  enableSpeech: boolean;
-  showPoweredBy: boolean;
+export default {
+  name: 'App',
+  components: {
+    NerdChatWidget
+  },
+  methods: {
+    onMessageSent(event) {
+      console.log('Message sent:', event);
+    },
+    onWidgetOpened() {
+      console.log('Widget opened');
+    },
+    onWidgetClosed() {
+      console.log('Widget closed');
+    }
+  }
 }
-
-const config = reactive<ChatConfig>({
-  agentName: 'Support Agent',
-  agentRole: 'Customer Support',
-  primaryColor: '#2d3e50',
-  accentColor: '#4e8cff',
-  welcomeMessage: 'Hi! How can I help you today?',
-  placeholderText: 'Type your message...',
-  position: 'bottom-right',
-  width: '350',
-  height: '500',
-  showMinimizeButton: true,
-  showTimestamps: true,
-  enableFileUpload: false,
-  enableSpeech: false,
-  showPoweredBy: true
-});
-
-const messages = ref<Array<{ message: string; timestamp: Date }>>([]);
-
-const handleMessageSent = (event: { message: string; timestamp: Date }) => {
-  messages.value.push(event);
-  console.log('Message sent:', event);
-};
-
-const handleWidgetOpened = () => {
-  console.log('Widget opened');
-};
-
-const handleWidgetClosed = () => {
-  console.log('Widget closed');
-};
 </script>
 ```
 
-## Configuration Options
-
-### Props
+## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `apiKey` | `string` | - | API key for authentication |
+| `agentId` | `string` | - | Agent ID to connect to |
+| `token` | `string` | - | JWT token for authentication |
 | `agentName` | `string` | `'Support Agent'` | Name of the support agent |
 | `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
 | `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
 | `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
 | `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
 | `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
-| `position` | `WidgetPosition` | `'bottom-right'` | Widget position on screen |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Widget position on screen |
 | `width` | `string` | `'350'` | Widget width in pixels |
 | `height` | `string` | `'500'` | Widget height in pixels |
 | `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
@@ -234,13 +124,7 @@ const handleWidgetClosed = () => {
 | `enableSpeech` | `boolean` | `false` | Enable speech recognition |
 | `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |
 
-### WidgetPosition Type
-
-```typescript
-type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-```
-
-### Events
+## Events
 
 | Event | Type | Description |
 |-------|------|-------------|
@@ -248,237 +132,14 @@ type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 | `widget-opened` | `void` | Emitted when widget is opened |
 | `widget-closed` | `void` | Emitted when widget is closed |
 
-## Advanced Usage
-
-### Dynamic Configuration
-
-```vue
-<template>
-  <div>
-    <button @click="updateConfig">Update Config</button>
-    <NerdChatWidget
-      :agent-name="config.agentName"
-      :primary-color="config.primaryColor"
-      :position="config.position"
-      @message-sent="handleMessageSent"
-    />
-  </div>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-
-const config = reactive({
-  agentName: 'Support Agent',
-  primaryColor: '#2d3e50',
-  position: 'bottom-right',
-  // ... other config
-});
-
-const updateConfig = () => {
-  config.primaryColor = '#ff6b6b';
-  config.position = 'top-right';
-  config.agentName = 'Updated Agent';
-};
-</script>
-```
-
-### Conditional Rendering
-
-```vue
-<template>
-  <div>
-    <button @click="toggleWidget">
-      {{ showWidget ? 'Hide' : 'Show' }} Chat Widget
-    </button>
-
-    <NerdChatWidget
-      v-if="showWidget"
-      :agent-name="userType === 'premium' ? 'Premium Support' : 'Basic Support'"
-      :agent-role="userType === 'premium' ? 'VIP Assistant' : 'Support Agent'"
-      :primary-color="userType === 'premium' ? '#gold' : '#2d3e50'"
-      :enable-file-upload="userType === 'premium'"
-      :enable-speech="userType === 'premium'"
-      @message-sent="handleMessageSent"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-
-const showWidget = ref(false);
-const userType = ref('guest');
-
-const toggleWidget = () => {
-  showWidget.value = !showWidget.value;
-};
-
-const handleMessageSent = (event) => {
-  if (userType.value === 'premium') {
-    // Premium user handling
-  } else {
-    // Basic user handling
-  }
-};
-</script>
-```
-
-### With Pinia Store
-
-```vue
-<template>
-  <div>
-    <NerdChatWidget
-      :agent-name="chatStore.config.agentName"
-      :agent-role="chatStore.config.agentRole"
-      :primary-color="chatStore.config.primaryColor"
-      @message-sent="chatStore.addMessage"
-      @widget-opened="chatStore.setWidgetOpen"
-      @widget-closed="chatStore.setWidgetClosed"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useChatStore } from '@/stores/chat';
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-
-const chatStore = useChatStore();
-</script>
-```
-
-### With Vuex
-
-```vue
-<template>
-  <div>
-    <NerdChatWidget
-      :agent-name="$store.state.chat.config.agentName"
-      :agent-role="$store.state.chat.config.agentRole"
-      :primary-color="$store.state.chat.config.primaryColor"
-      @message-sent="handleMessageSent"
-      @widget-opened="handleWidgetOpened"
-      @widget-closed="handleWidgetClosed"
-    />
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex';
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-
-export default {
-  components: {
-    NerdChatWidget
-  },
-  methods: {
-    ...mapActions('chat', ['addMessage', 'setWidgetOpen', 'setWidgetClosed']),
-    
-    handleMessageSent(event) {
-      this.addMessage(event);
-    },
-    
-    handleWidgetOpened() {
-      this.setWidgetOpen(true);
-    },
-    
-    handleWidgetClosed() {
-      this.setWidgetClosed(false);
-    }
-  }
-}
-</script>
-```
-
-### Custom Styling
-
-The widget uses CSS custom properties for theming. You can override these in your CSS:
-
-```css
-:root {
-  --primary-color: #your-color;
-  --accent-color: #your-accent;
-  --widget-width: 400px;
-  --widget-height: 600px;
-  --font-family: 'Your Font', sans-serif;
-}
-
-/* Custom widget styling */
-nerd-chat-widget {
-  --primary-color: #007bff;
-  --accent-color: #28a745;
-}
-```
-
-### Global Registration
-
-```javascript
-// main.js
-import { createApp } from 'vue';
-import { NerdChatWidget } from 'nerdagent-chat-widget-vue';
-import App from './App.vue';
-
-const app = createApp(App);
-
-// Register globally
-app.component('NerdChatWidget', NerdChatWidget);
-
-app.mount('#app');
-```
-
-## Browser Support
-
-- Chrome 60+
-- Firefox 55+
-- Safari 10+
-- Edge 79+
-
 ## TypeScript Support
 
-Full TypeScript definitions are included. Import types as needed:
+Full TypeScript definitions are included:
 
 ```typescript
-import { WidgetPosition, ChatMessage } from 'nerdagent-chat-widget-vue';
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Widget not appearing**: Ensure the component is properly imported and registered
-2. **Styling issues**: Check that FontAwesome is loaded for icons
-3. **Events not firing**: Verify event handlers are properly bound
-4. **TypeScript errors**: Make sure you're using the correct prop types
-
-### Debug Mode
-
-Enable debug logging by setting the browser's localStorage:
-
-```javascript
-localStorage.setItem('nerdagent-chat-widget-debug', 'true');
+import { NerdChatWidget, WidgetPosition } from 'nerdagent-chat-widget-vue';
 ```
 
-## Contributing
-
-We welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.
-
 ## License
 
-MIT License - see [LICENSE](../../LICENSE) for details.
-
-## Support
-
-- 📧 Email: support@nerdagent.ai
-- 📖 Documentation: [docs.nerdagent.ai](https://docs.nerdagent.ai)
-- 🐛 Issues: [GitHub Issues](https://github.com/nerdagent/chat-widget/issues)
-
-## Changelog
-
-### v1.0.2
-- Initial release with Vue wrapper
-- Full TypeScript support
-- Event handling integration
-- Composition API and Options API examples
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nerdagent-chat-widget-vue",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "type": "module",
   "description": "NerdAgent Chat Widget for Vue",
   "main": "dist/index.js",
@@ -42,5 +42,5 @@
     "url": "https://github.com/nerdagent/chat-widget.git",
     "directory": "packages/vue"
   },
-  "gitHead": "c8f93bc623e36bcb74a3641f07ae6ee1cccd4941"
+  "gitHead": "f46abd47a7632d8fc690b202bfc7c202bcb8b18f"
 }