@quasiris/chatbox

v0.1.0

Published

9 days ago

ChatBox component (Vue 3 + Quasar) as a standalone library, externalizing vue & quasar.

0High
0Medium
0Low

vue vue3 quasar component chat widget pwa

ChatBox (Vue 3 + Quasar)

A reusable chat UI component built with Vue 3 and Quasar.
It provides a header, scrollable message list, and an input area with a send button.

Features

Renders chat messages with roles (user, assistant, system)
Auto-scrolls to latest message
Configurable size (height, width, maxWidth, maxHeight)
Emits events for send, stop, and clear
Works as a Vue plugin (app.use(ChatBoxPlugin)) or as a single component import
Styled with Quasar components (QCard, QAvatar, QChatMessage, QScrollArea, …)

Installation

Install the package (replace local path with your published package if applicable):

Props

| Prop | Type | Default | Description | |--------------|------------------|------------------------|--------------------------------------------------| | title | String | "Chat" | Title in the header | | messages | Array (req.) | — | List of messages { id?, role, text, stamp? } | | loading | Boolean | false | Show “Assistant is typing…” indicator | | disable | Boolean | false | Disable input and buttons | | placeholder| String | "Type your message…" | Placeholder text for input | | height | String\|Number | "70vh" | Card height | | width | String\|Number | "100%" | Card width | | maxWidth | String\|Number | "868px" | Maximum width | | maxHeight | String\|Number | "100vh" | Maximum height | | showStop | Boolean | false | Show stop button (currently commented out) | | showClear | Boolean | false | Show clear button (currently commented out) |

Events

| Event | Payload | Description | |---------|------------------|--------------------------------------| | send | String (text) | Emitted when user sends a message | | stop | — | Emitted when stop button is clicked | | clear | — | Emitted when clear button is clicked |

Usage as Standalone (vue3 + quasar required)

Make a directory test_umd with index.html.
build the lib inside ChatBox run npm run build
copy the resulted ./dist to the test_umd directory
in the index.html insert the following


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>ChatBox UMD Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Quasar styles (required) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css">
  <!-- Material Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">

  <link rel="stylesheet" href="./dist/chat-entry.css">

  <style>
    body { margin: 0; padding: 16px; background: #f5f6fa; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
    #app { max-width: 980px; margin: 0 auto; }
  </style>
</head>
<body>
  <div id="app">
    <chat-box
      :messages="messages"
      :loading="loading"
      title="Chat"
      placeholder="Type your message…"
      height="75vh"
      :show-stop="true"
      :show-clear="true"
      @send="onSend"
      @stop="onStop"
      @clear="onClear"
    ></chat-box>
  </div>

  <!-- Vue 3 + Quasar (UMD) -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>

  <!-- Your ChatBox UMD bundle  -->
  <script src="./dist/chatbox.umd.js"></script>

  <script>
    // Create host app
    const app = Vue.createApp({
      data: () => ({
        loading: false,
        messages: [
          { role: 'assistant', text: 'Hello! I am ChatBox 🤖', stamp: new Date().toLocaleTimeString() },
          { role: 'user', text: 'Hi there!', stamp: new Date().toLocaleTimeString() }
        ]
      }),
      methods: {
        onSend(text) {
          this.messages.push({ role: 'user', text, stamp: new Date().toLocaleTimeString() })
          // simulate assistant reply
          this.loading = true
          setTimeout(() => {
            this.messages.push({ role: 'assistant', text: 'Got it: ' + text, stamp: new Date().toLocaleTimeString() })
            this.loading = false
          }, 800)
        },
        onStop() {
          console.log('Stop requested')
          this.loading = false
        },
        onClear() {
          console.log('Clear requested')
          this.messages = []
        }
      }
    })

    app.use(Quasar)

    app.use(ChatBox.default)

    app.mount('#app')
  </script>
</body>
</html>

open index.html in the browser and see the chat box

Published

Vulnerabilities

Links

Maintainers

Keywords