Vue Robot Chat Plugin

A lightweight, draggable robot chat plugin for Vue 3 with Element Plus. Features a floating robot icon with position memory and a customizable dialog.

Features

• 🤖 Draggable Robot Icon - Free drag with localStorage position memory
• 💬 Customizable Dialog - Title bar drag support, theme color customization
• 📱 Touch-Friendly - Works on both desktop and mobile devices
• 🎨 Style Isolation - No global style pollution
• 📦 Dual Format - ESM + UMD output
• 🔷 TypeScript - Full type definitions included
• ⚡ Zero Dependencies - Peer dependencies only (Vue 3, Element Plus)

Installation

npm install vue-robot-chat-plugin element-plus

Quick Start

Method 1: Programmatic Usage (Recommended)

import { init, destroy } from 'vue-robot-chat-plugin'
import 'vue-robot-chat-plugin/style.css'

// Initialize the plugin
const plugin = init({
  icon: {
    size: 56,
    color: '#409eff',
    initialPosition: 'bottom-right'
  },
  dialog: {
    width: 400,
    height: 500,
    title: 'AI Assistant',
    themeColor: '#409eff'
  },
  onIconClick: () => {
    console.log('Icon clicked!')
  },
  onDialogOpen: () => {
    console.log('Dialog opened!')
  },
  onDialogClose: () => {
    console.log('Dialog closed!')
  }
})

// Show/hide dialog programmatically
plugin.showDialog()
plugin.hideDialog()
plugin.toggleDialog()

// Destroy the plugin when done
destroy()

Method 2: Vue Plugin Installation

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VueRobotChatPlugin from 'vue-robot-chat-plugin'
import 'vue-robot-chat-plugin/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(VueRobotChatPlugin, {
  icon: {
    size: 60,
    color: '#667eea'
  },
  dialog: {
    title: 'Chat Bot',
    themeColor: '#667eea'
  }
})

Method 3: Component Usage

<template>
  <div>
    <RobotIcon
      :size="56"
      color="#409eff"
      initial-position="bottom-right"
      @click="handleIconClick"
    />
    <ChatDialog
      v-model="dialogVisible"
      :width="400"
      :height="500"
      title="AI Assistant"
      theme-color="#409eff"
      @close="handleClose"
    >
      <!-- Your custom content -->
      <div>Your chat content here</div>

      <!-- Custom footer -->
      <template #footer>
        <button @click="dialogVisible = false">Close</button>
      </template>
    </ChatDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RobotIcon, ChatDialog } from 'vue-robot-chat-plugin'
import 'vue-robot-chat-plugin/style.css'

const dialogVisible = ref(false)

const handleIconClick = () => {
  dialogVisible.value = !dialogVisible.value
}

const handleClose = () => {
  console.log('Dialog closed')
}
</script>

API Reference

init(options?: PluginOptions)

Initialize the plugin programmatically.

interface PluginOptions {
  icon?: RobotIconOptions
  dialog?: DialogOptions
  onIconClick?: () => void
  onDialogOpen?: () => void
  onDialogClose?: () => void
}

interface RobotIconOptions {
  size?: number          // Default: 56
  color?: string         // Default: '#409eff'
  initialPosition?: 'bottom-right' | 'bottom-left'  // Default: 'bottom-right'
}

interface DialogOptions {
  width?: string | number   // Default: 400
  height?: string | number  // Default: 500
  title?: string            // Default: 'AI Assistant'
  themeColor?: string       // Default: '#409eff'
}

destroy()

Completely remove the plugin (removes DOM, events, and listeners).

showDialog()

Programmatically show the dialog.

hideDialog()

Programmatically hide the dialog.

toggleDialog()

Toggle dialog visibility.

Components

<RobotIcon />

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 56 | Icon size in pixels | | color | string | '#409eff' | Icon color | | initialPosition | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Initial position |

| Event | Payload | Description | |-------|---------|-------------| | click | - | Emitted when icon is clicked (not dragged) | | drag-end | DragPosition | Emitted when drag ends |

<ChatDialog />

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | boolean | false | Dialog visibility (v-model) | | width | string \| number | 400 | Dialog width | | height | string \| number | 500 | Dialog height | | title | string | 'AI Assistant' | Dialog title | | themeColor | string | '#409eff' | Theme color |

| Event | Payload | Description | |-------|---------|-------------| | update:modelValue | boolean | Visibility change | | open | - | Dialog opened | | close | - | Dialog closed |

| Slot | Description | |------|-------------| | default | Dialog body content | | footer | Dialog footer content |

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Publishing to npm

# Build the package
npm run build

# Publish to npm
npm publish

Browser Support

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

License

MIT