NerdAgent Chat Widget for Vue

A customizable chat widget component for Vue applications.

Installation

npm install nerdagent-chat-widget-vue

Usage

Vue 3 with Composition API

<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'"
      :show-minimize-button="true"
      :show-timestamps="true"
      :enable-file-upload="false"
      :enable-speech="false"
      :show-powered-by="true"
      @message-sent="handleMessageSent"
      @widget-opened="handleWidgetOpened"
      @widget-closed="handleWidgetClosed"
    />
  </div>
</template>

<script setup>
import { NerdChatWidget } from 'nerdagent-chat-widget-vue';

const handleMessageSent = (event) => {
  console.log('Message sent:', event);
};

const handleWidgetOpened = () => {
  console.log('Widget opened');
};

const handleWidgetClosed = () => {
  console.log('Widget closed');
};
</script>

Vue 2 with Options API

<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?'"
      :position="'bottom-right'"
      :width="'350'"
      :height="'500'"
      @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>

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 | '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 | | showTimestamps | boolean | true | Show message timestamps | | enableFileUpload | boolean | false | Enable file upload feature | | enableSpeech | boolean | false | Enable speech recognition | | showPoweredBy | boolean | true | Show "Powered by" branding |

Events

| Event | Type | Description | |-------|------|-------------| | message-sent | { message: string; timestamp: Date } | Emitted when user sends a message | | widget-opened | void | Emitted when widget is opened | | widget-closed | void | Emitted when widget is closed |

TypeScript Support

Full TypeScript definitions are included:

import { NerdChatWidget, WidgetPosition } from 'nerdagent-chat-widget-vue';

License

MIT