nerdagent-chat-widget-vue 1.0.2

package/README.md

@@ -0,0 +1,211 @@
+# @nerdagent/chat-widget-vue
+
+Vue wrapper for the NerdAgent Chat Widget built with Stencil.
+
+## Installation
+
+```bash
+npm install @nerdagent/chat-widget-vue
+```
+
+## Usage
+
+### Option 1: Component Registration (Recommended)
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import { NerdChatWidget } from '@nerdagent/chat-widget-vue';
+
+const app = createApp(App);
+
+// Register component globally
+app.component('NerdChatWidget', NerdChatWidget);
+
+app.mount('#app');
+```
+
+```vue
+<!-- App.vue -->
+<template>
+  <div id="app">
+    <NerdChatWidget
+      agent-name="Support Agent"
+      agent-role="Customer Support"
+      primary-color="#2d3e50"
+      accent-color="#4e8cff"
+      welcome-message="Hi! How can I help?"
+      position="bottom-right"
+      width="350"
+      height="500"
+      :show-minimize-button="true"
+      :show-timestamps="true"
+      :enable-file-upload="false"
+      :enable-speech="false"
+      :show-powered-by="true"
+      @messageSent="handleMessageSent"
+      @widgetOpened="handleWidgetOpened"
+      @widgetClosed="handleWidgetClosed"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const handleMessageSent = (event: { message: string; timestamp: Date }) => {
+  console.log('Message sent:', event);
+};
+
+const handleWidgetOpened = () => {
+  console.log('Widget opened');
+};
+
+const handleWidgetClosed = () => {
+  console.log('Widget closed');
+};
+</script>
+```
+
+### Option 2: Plugin Registration
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import { NerdChatWidgetPlugin } from '@nerdagent/chat-widget-vue';
+
+const app = createApp(App);
+
+// Use as plugin
+app.use(NerdChatWidgetPlugin);
+
+app.mount('#app');
+```
+
+### Option 3: Local Component Registration
+
+```vue
+<template>
+  <div>
+    <NerdChatWidget
+      agent-name="Support Agent"
+      @messageSent="handleMessageSent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NerdChatWidget } from '@nerdagent/chat-widget-vue';
+
+const handleMessageSent = (event: { message: string; timestamp: Date }) => {
+  console.log('Message sent:', event);
+};
+</script>
+```
+
+### With Composition API
+
+```vue
+<template>
+  <div>
+    <NerdChatWidget
+      :agent-name="config.agentName"
+      :primary-color="config.primaryColor"
+      :position="config.position"
+      @messageSent="onMessageSent"
+      @widgetOpened="onWidgetOpened"
+      @widgetClosed="onWidgetClosed"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { NerdChatWidget, WidgetPosition } from '@nerdagent/chat-widget-vue';
+
+interface Config {
+  agentName: string;
+  primaryColor: string;
+  position: WidgetPosition;
+}
+
+const config = ref<Config>({
+  agentName: 'Support Agent',
+  primaryColor: '#2d3e50',
+  position: 'bottom-right'
+});
+
+const onMessageSent = (event: { message: string; timestamp: Date }) => {
+  console.log('Message sent:', event);
+};
+
+const onWidgetOpened = () => {
+  console.log('Widget opened');
+};
+
+const onWidgetClosed = () => {
+  console.log('Widget closed');
+};
+</script>
+```
+
+### Vite Configuration
+
+If you're using Vite, you may need to configure it to recognize the custom elements:
+
+```javascript
+// vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('nerd-')
+        }
+      }
+    })
+  ]
+})
+```
+
+## API
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `agentName` | `string` | `'Support Agent'` | Name of the chat agent |
+| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
+| `primaryColor` | `string` | `'#2d3e50'` | Primary theme color |
+| `accentColor` | `string` | `'#4e8cff'` | Accent color for buttons |
+| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial message from agent |
+| `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
+| `position` | `WidgetPosition` | `'bottom-right'` | Widget position |
+| `width` | `string` | `'350'` | Widget width in pixels |
+| `height` | `string` | `'500'` | Widget height in pixels |
+| `showMinimizeButton` | `boolean` | `true` | Show/hide minimize button |
+| `showTimestamps` | `boolean` | `true` | Show/hide message timestamps |
+| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
+| `enableSpeech` | `boolean` | `false` | Enable speech input |
+| `showPoweredBy` | `boolean` | `true` | Show/hide "Powered by" footer |
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `messageSent` | `{ message: string; timestamp: Date }` | Emitted when a message is sent |
+| `widgetOpened` | `void` | Emitted when the widget is opened |
+| `widgetClosed` | `void` | Emitted when the widget is closed |
+
+### Types
+
+```typescript
+type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,142 @@
+import { PropType } from 'vue';
+export type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export declare const NerdChatWidget: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    agentName: {
+        type: StringConstructor;
+        default: string;
+    };
+    agentRole: {
+        type: StringConstructor;
+        default: string;
+    };
+    primaryColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    accentColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    welcomeMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<WidgetPosition>;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    showMinimizeButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTimestamps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFileUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSpeech: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPoweredBy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    widgetRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("messageSent" | "widgetOpened" | "widgetClosed")[], "messageSent" | "widgetOpened" | "widgetClosed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    agentName: {
+        type: StringConstructor;
+        default: string;
+    };
+    agentRole: {
+        type: StringConstructor;
+        default: string;
+    };
+    primaryColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    accentColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    welcomeMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholderText: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<WidgetPosition>;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    showMinimizeButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTimestamps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableFileUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableSpeech: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showPoweredBy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onMessageSent?: ((...args: any[]) => any) | undefined;
+    onWidgetOpened?: ((...args: any[]) => any) | undefined;
+    onWidgetClosed?: ((...args: any[]) => any) | undefined;
+}>, {
+    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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default NerdChatWidget;
+export declare const NerdChatWidgetPlugin: {
+    install(app: any): void;
+};

package/dist/index.esm.js

@@ -0,0 +1,125 @@
+import { defineComponent, ref, onMounted } from 'vue';
+import { defineCustomElements } from 'nerdagent-chat-widget/loader';
+
+const NerdChatWidget = defineComponent({
+    name: 'NerdChatWidget',
+    props: {
+        agentName: {
+            type: String,
+            default: 'Support Agent'
+        },
+        agentRole: {
+            type: String,
+            default: 'Customer Support'
+        },
+        primaryColor: {
+            type: String,
+            default: '#2d3e50'
+        },
+        accentColor: {
+            type: String,
+            default: '#4e8cff'
+        },
+        welcomeMessage: {
+            type: String,
+            default: 'Hi! How can I help?'
+        },
+        placeholderText: {
+            type: String,
+            default: 'Type your message...'
+        },
+        position: {
+            type: String,
+            default: 'bottom-right'
+        },
+        width: {
+            type: String,
+            default: '350'
+        },
+        height: {
+            type: String,
+            default: '500'
+        },
+        showMinimizeButton: {
+            type: Boolean,
+            default: true
+        },
+        showTimestamps: {
+            type: Boolean,
+            default: true
+        },
+        enableFileUpload: {
+            type: Boolean,
+            default: false
+        },
+        enableSpeech: {
+            type: Boolean,
+            default: false
+        },
+        showPoweredBy: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['messageSent', 'widgetOpened', 'widgetClosed'],
+    setup(props, { emit }) {
+        const widgetRef = ref();
+        onMounted(() => {
+            // Define custom elements
+            defineCustomElements();
+            // Setup event listeners
+            if (widgetRef.value) {
+                const widget = widgetRef.value;
+                const handleMessageSent = (event) => {
+                    emit('messageSent', event.detail);
+                };
+                const handleWidgetOpened = (event) => {
+                    emit('widgetOpened');
+                };
+                const handleWidgetClosed = (event) => {
+                    emit('widgetClosed');
+                };
+                widget.addEventListener('messageSent', handleMessageSent);
+                widget.addEventListener('widgetOpened', handleWidgetOpened);
+                widget.addEventListener('widgetClosed', handleWidgetClosed);
+                // Cleanup on unmount
+                return () => {
+                    widget.removeEventListener('messageSent', handleMessageSent);
+                    widget.removeEventListener('widgetOpened', handleWidgetOpened);
+                    widget.removeEventListener('widgetClosed', handleWidgetClosed);
+                };
+            }
+        });
+        return {
+            widgetRef
+        };
+    },
+    template: `
+    <nerd-chat-widget
+      ref="widgetRef"
+      :agent-name="agentName"
+      :agent-role="agentRole"
+      :primary-color="primaryColor"
+      :accent-color="accentColor"
+      :welcome-message="welcomeMessage"
+      :placeholder-text="placeholderText"
+      :position="position"
+      :width="width"
+      :height="height"
+      :show-minimize-button="showMinimizeButton.toString()"
+      :show-timestamps="showTimestamps.toString()"
+      :enable-file-upload="enableFileUpload.toString()"
+      :enable-speech="enableSpeech.toString()"
+      :show-powered-by="showPoweredBy.toString()">
+    </nerd-chat-widget>
+  `
+});
+// Plugin for global registration
+const NerdChatWidgetPlugin = {
+    install(app) {
+        app.component('NerdChatWidget', NerdChatWidget);
+    }
+};
+
+export { NerdChatWidget, NerdChatWidgetPlugin, NerdChatWidget as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/index.ts"],"sourcesContent":["import { defineComponent, onMounted, ref, PropType } from 'vue';\nimport { defineCustomElements } from 'nerdagent-chat-widget/loader';\n\nexport type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\nexport const NerdChatWidget = defineComponent({\n  name: 'NerdChatWidget',\n  props: {\n    agentName: {\n      type: String,\n      default: 'Support Agent'\n    },\n    agentRole: {\n      type: String,\n      default: 'Customer Support'\n    },\n    primaryColor: {\n      type: String,\n      default: '#2d3e50'\n    },\n    accentColor: {\n      type: String,\n      default: '#4e8cff'\n    },\n    welcomeMessage: {\n      type: String,\n      default: 'Hi! How can I help?'\n    },\n    placeholderText: {\n      type: String,\n      default: 'Type your message...'\n    },\n    position: {\n      type: String as PropType<WidgetPosition>,\n      default: 'bottom-right'\n    },\n    width: {\n      type: String,\n      default: '350'\n    },\n    height: {\n      type: String,\n      default: '500'\n    },\n    showMinimizeButton: {\n      type: Boolean,\n      default: true\n    },\n    showTimestamps: {\n      type: Boolean,\n      default: true\n    },\n    enableFileUpload: {\n      type: Boolean,\n      default: false\n    },\n    enableSpeech: {\n      type: Boolean,\n      default: false\n    },\n    showPoweredBy: {\n      type: Boolean,\n      default: true\n    }\n  },\n  emits: ['messageSent', 'widgetOpened', 'widgetClosed'],\n  setup(props, { emit }) {\n    const widgetRef = ref<HTMLElement>();\n\n    onMounted(() => {\n      // Define custom elements\n      defineCustomElements();\n      \n      // Setup event listeners\n      if (widgetRef.value) {\n        const widget = widgetRef.value;\n        \n        const handleMessageSent = (event: CustomEvent) => {\n          emit('messageSent', event.detail);\n        };\n        \n        const handleWidgetOpened = (event: CustomEvent) => {\n          emit('widgetOpened');\n        };\n        \n        const handleWidgetClosed = (event: CustomEvent) => {\n          emit('widgetClosed');\n        };\n        \n        widget.addEventListener('messageSent', handleMessageSent as EventListener);\n        widget.addEventListener('widgetOpened', handleWidgetOpened as EventListener);\n        widget.addEventListener('widgetClosed', handleWidgetClosed as EventListener);\n        \n        // Cleanup on unmount\n        return () => {\n          widget.removeEventListener('messageSent', handleMessageSent as EventListener);\n          widget.removeEventListener('widgetOpened', handleWidgetOpened as EventListener);\n          widget.removeEventListener('widgetClosed', handleWidgetClosed as EventListener);\n        };\n      }\n    });\n\n    return {\n      widgetRef\n    };\n  },\n  template: `\n    <nerd-chat-widget\n      ref=\"widgetRef\"\n      :agent-name=\"agentName\"\n      :agent-role=\"agentRole\"\n      :primary-color=\"primaryColor\"\n      :accent-color=\"accentColor\"\n      :welcome-message=\"welcomeMessage\"\n      :placeholder-text=\"placeholderText\"\n      :position=\"position\"\n      :width=\"width\"\n      :height=\"height\"\n      :show-minimize-button=\"showMinimizeButton.toString()\"\n      :show-timestamps=\"showTimestamps.toString()\"\n      :enable-file-upload=\"enableFileUpload.toString()\"\n      :enable-speech=\"enableSpeech.toString()\"\n      :show-powered-by=\"showPoweredBy.toString()\">\n    </nerd-chat-widget>\n  `\n});\n\nexport default NerdChatWidget;\n\n// Plugin for global registration\nexport const NerdChatWidgetPlugin = {\n  install(app: any) {\n    app.component('NerdChatWidget', NerdChatWidget);\n  }\n};\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var loader = require('nerdagent-chat-widget/loader');
+
+const NerdChatWidget = vue.defineComponent({
+    name: 'NerdChatWidget',
+    props: {
+        agentName: {
+            type: String,
+            default: 'Support Agent'
+        },
+        agentRole: {
+            type: String,
+            default: 'Customer Support'
+        },
+        primaryColor: {
+            type: String,
+            default: '#2d3e50'
+        },
+        accentColor: {
+            type: String,
+            default: '#4e8cff'
+        },
+        welcomeMessage: {
+            type: String,
+            default: 'Hi! How can I help?'
+        },
+        placeholderText: {
+            type: String,
+            default: 'Type your message...'
+        },
+        position: {
+            type: String,
+            default: 'bottom-right'
+        },
+        width: {
+            type: String,
+            default: '350'
+        },
+        height: {
+            type: String,
+            default: '500'
+        },
+        showMinimizeButton: {
+            type: Boolean,
+            default: true
+        },
+        showTimestamps: {
+            type: Boolean,
+            default: true
+        },
+        enableFileUpload: {
+            type: Boolean,
+            default: false
+        },
+        enableSpeech: {
+            type: Boolean,
+            default: false
+        },
+        showPoweredBy: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['messageSent', 'widgetOpened', 'widgetClosed'],
+    setup(props, { emit }) {
+        const widgetRef = vue.ref();
+        vue.onMounted(() => {
+            // Define custom elements
+            loader.defineCustomElements();
+            // Setup event listeners
+            if (widgetRef.value) {
+                const widget = widgetRef.value;
+                const handleMessageSent = (event) => {
+                    emit('messageSent', event.detail);
+                };
+                const handleWidgetOpened = (event) => {
+                    emit('widgetOpened');
+                };
+                const handleWidgetClosed = (event) => {
+                    emit('widgetClosed');
+                };
+                widget.addEventListener('messageSent', handleMessageSent);
+                widget.addEventListener('widgetOpened', handleWidgetOpened);
+                widget.addEventListener('widgetClosed', handleWidgetClosed);
+                // Cleanup on unmount
+                return () => {
+                    widget.removeEventListener('messageSent', handleMessageSent);
+                    widget.removeEventListener('widgetOpened', handleWidgetOpened);
+                    widget.removeEventListener('widgetClosed', handleWidgetClosed);
+                };
+            }
+        });
+        return {
+            widgetRef
+        };
+    },
+    template: `
+    <nerd-chat-widget
+      ref="widgetRef"
+      :agent-name="agentName"
+      :agent-role="agentRole"
+      :primary-color="primaryColor"
+      :accent-color="accentColor"
+      :welcome-message="welcomeMessage"
+      :placeholder-text="placeholderText"
+      :position="position"
+      :width="width"
+      :height="height"
+      :show-minimize-button="showMinimizeButton.toString()"
+      :show-timestamps="showTimestamps.toString()"
+      :enable-file-upload="enableFileUpload.toString()"
+      :enable-speech="enableSpeech.toString()"
+      :show-powered-by="showPoweredBy.toString()">
+    </nerd-chat-widget>
+  `
+});
+// Plugin for global registration
+const NerdChatWidgetPlugin = {
+    install(app) {
+        app.component('NerdChatWidget', NerdChatWidget);
+    }
+};
+
+exports.NerdChatWidget = NerdChatWidget;
+exports.NerdChatWidgetPlugin = NerdChatWidgetPlugin;
+exports.default = NerdChatWidget;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { defineComponent, onMounted, ref, PropType } from 'vue';\nimport { defineCustomElements } from 'nerdagent-chat-widget/loader';\n\nexport type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\nexport const NerdChatWidget = defineComponent({\n  name: 'NerdChatWidget',\n  props: {\n    agentName: {\n      type: String,\n      default: 'Support Agent'\n    },\n    agentRole: {\n      type: String,\n      default: 'Customer Support'\n    },\n    primaryColor: {\n      type: String,\n      default: '#2d3e50'\n    },\n    accentColor: {\n      type: String,\n      default: '#4e8cff'\n    },\n    welcomeMessage: {\n      type: String,\n      default: 'Hi! How can I help?'\n    },\n    placeholderText: {\n      type: String,\n      default: 'Type your message...'\n    },\n    position: {\n      type: String as PropType<WidgetPosition>,\n      default: 'bottom-right'\n    },\n    width: {\n      type: String,\n      default: '350'\n    },\n    height: {\n      type: String,\n      default: '500'\n    },\n    showMinimizeButton: {\n      type: Boolean,\n      default: true\n    },\n    showTimestamps: {\n      type: Boolean,\n      default: true\n    },\n    enableFileUpload: {\n      type: Boolean,\n      default: false\n    },\n    enableSpeech: {\n      type: Boolean,\n      default: false\n    },\n    showPoweredBy: {\n      type: Boolean,\n      default: true\n    }\n  },\n  emits: ['messageSent', 'widgetOpened', 'widgetClosed'],\n  setup(props, { emit }) {\n    const widgetRef = ref<HTMLElement>();\n\n    onMounted(() => {\n      // Define custom elements\n      defineCustomElements();\n      \n      // Setup event listeners\n      if (widgetRef.value) {\n        const widget = widgetRef.value;\n        \n        const handleMessageSent = (event: CustomEvent) => {\n          emit('messageSent', event.detail);\n        };\n        \n        const handleWidgetOpened = (event: CustomEvent) => {\n          emit('widgetOpened');\n        };\n        \n        const handleWidgetClosed = (event: CustomEvent) => {\n          emit('widgetClosed');\n        };\n        \n        widget.addEventListener('messageSent', handleMessageSent as EventListener);\n        widget.addEventListener('widgetOpened', handleWidgetOpened as EventListener);\n        widget.addEventListener('widgetClosed', handleWidgetClosed as EventListener);\n        \n        // Cleanup on unmount\n        return () => {\n          widget.removeEventListener('messageSent', handleMessageSent as EventListener);\n          widget.removeEventListener('widgetOpened', handleWidgetOpened as EventListener);\n          widget.removeEventListener('widgetClosed', handleWidgetClosed as EventListener);\n        };\n      }\n    });\n\n    return {\n      widgetRef\n    };\n  },\n  template: `\n    <nerd-chat-widget\n      ref=\"widgetRef\"\n      :agent-name=\"agentName\"\n      :agent-role=\"agentRole\"\n      :primary-color=\"primaryColor\"\n      :accent-color=\"accentColor\"\n      :welcome-message=\"welcomeMessage\"\n      :placeholder-text=\"placeholderText\"\n      :position=\"position\"\n      :width=\"width\"\n      :height=\"height\"\n      :show-minimize-button=\"showMinimizeButton.toString()\"\n      :show-timestamps=\"showTimestamps.toString()\"\n      :enable-file-upload=\"enableFileUpload.toString()\"\n      :enable-speech=\"enableSpeech.toString()\"\n      :show-powered-by=\"showPoweredBy.toString()\">\n    </nerd-chat-widget>\n  `\n});\n\nexport default NerdChatWidget;\n\n// Plugin for global registration\nexport const NerdChatWidgetPlugin = {\n  install(app: any) {\n    app.component('NerdChatWidget', NerdChatWidget);\n  }\n};\n"],"names":["defineComponent","ref","onMounted","defineCustomElements"],"mappings":"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"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "nerdagent-chat-widget-vue",
+  "version": "1.0.2",
+  "type": "module",
+  "description": "NerdAgent Chat Widget for Vue",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "chat",
+    "widget",
+    "stencil",
+    "web-components"
+  ],
+  "author": "NerdAgent",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "nerdagent-chat-widget": "^1.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "rollup": "^3.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^5.0.0",
+    "vue": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nerdagent/chat-widget.git",
+    "directory": "packages/vue"
+  },
+  "gitHead": "baebff96671fd060b15aa0ca587f2c9a1556c06b"
+}