npm package: @quasiris/chatbox
Description: ChatBox component (Vue 3 + Quasar) as a standalone library, externalizing vue & quasar.
Latest version: 0.1.0

# ChatBox (Vue 3 + Quasar)

A reusable **chat UI component** built with [Vue 3](https://vuejs.org) and [Quasar](https://quasar.dev).  
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 
````vue

<!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