{"id":21826780,"url":"https://github.com/juzser/vue-bot-ui","last_synced_at":"2025-04-09T05:12:19.954Z","repository":{"id":38009257,"uuid":"228521407","full_name":"juzser/vue-bot-ui","owner":"juzser","description":"For the one who is finding a customizable chatbot UI.","archived":false,"fork":false,"pushed_at":"2024-09-18T10:46:22.000Z","size":1160,"stargazers_count":198,"open_issues_count":7,"forks_count":37,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-02T04:05:08.511Z","etag":null,"topics":["bot","bot-ui","chatbot","ui","vue","vue-component","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juzser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-17T03:02:33.000Z","updated_at":"2025-03-28T14:24:50.000Z","dependencies_parsed_at":"2024-11-27T18:05:22.707Z","dependency_job_id":"2be84bc0-b557-451f-93b2-22452233751b","html_url":"https://github.com/juzser/vue-bot-ui","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2Fvue-bot-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2Fvue-bot-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2Fvue-bot-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juzser%2Fvue-bot-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juzser","download_url":"https://codeload.github.com/juzser/vue-bot-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980844,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","bot-ui","chatbot","ui","vue","vue-component","vuejs2"],"created_at":"2024-11-27T18:05:12.263Z","updated_at":"2025-04-09T05:12:19.935Z","avatar_url":"https://github.com/juzser.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"\n# Vue Bot UI\n\n#### For the one who is finding a customizable chatbot UI.\n\nI build for my private project, but I tried to bring as many options as I think someone need it, so feel free to use it.\n\n*Demo page is coming soon.*\n\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"300\" alt=\"vue bot UI\" src=\"https://user-images.githubusercontent.com/5735071/71614782-52cc2280-2be0-11ea-8c1b-7af063401d3d.png\"\u003e\n\u003c/p\u003e\n\n\n## Install\n\n```bash\nnpm install vue-bot-ui\n\n// or\nyarn add vue-bot-ui\n```\n\n## Usage\n\nImport \u0026 register the component\n\n```javascript\nimport { VueBotUI } from 'vue-bot-ui'\n\nexport default {\n  components: {\n    VueBotUI,\n  },\n  ...\n}\n```\n\nAnd use it:\n\n```vue\n\u003cVueBotUI\n  :messages=\"data\"\n  :options=\"botOptions\"\n  @msg-send=\"messageSendHandler\"\n/\u003e\n```\n\n```javascript\ndata () {\n  return {\n    data: [], // See Data example below\n    botOptions: {\n      // See the list of options below\n    }\n  }\n}\n```\n\n\n## Props\nList of available props to use in the component:\n\n| Name               | Type       | Default         | Description |\n| ---                | ---        | ---             | ---         |\n| `messages`         | Array      | []              | **Required**. Data of Messages |\n| `options`          | Object     | see below       | Some options to customize UI |\n| `bot-typing`        | Boolean    | false           | If `true`, the bot typing indicator will show  |\n| `input-disable`     | Boolean    | false           | If `true`, message input will be disabled |\n| `is-open`     | Boolean    | false           | If `true`, the board will open from init |\n| `open-delay`     | Number    | undefined           | Delay before opening from init (in ms). Requires `is-open` to be `true` |\n\n\n## Options\nList of available options to customize UI:\n\n| Name                  | Type     | Default       | Description |\n| ---                   | ---      | ---           | ---         |\n| `botTitle`            | String   | 'Chatbot'     | The bot name that will be shown on header of the board |\n| `colorScheme`         | String   | '#1b53d0'     | Background color of bubble button \u0026 board header |\n| `textColor`           | String   | '#fff'        | Color of bubble button icon \u0026 board header title |\n| `bubbleBtnSize`       | Number   | 56            | Size of bubble button (px) |\n| `animation`           | Boolean  | true          | Set to `false` to disable animation of bubble button icon \u0026 board showing |\n| `boardContentBg`      | String   | '#fff'        | Background color of board messages box |\n| `botAvatarSize`       | Number   | 32            | Size of bot avatar (px) |\n| `botAvatarImg`        | String   | 'http://placehold.it/200x200' | Avatar image |\n| `msgBubbleBgBot`      | String   | '#f0f0f0'     | Background color of Bot message |\n| `msgBubbleColorBot`   | String   | '#000'        | Text color of Bot message |\n| `msgBubbleBgUser`     | String   | '#4356e0'     | Background color of user message |\n| `msgBubbleColorUser`  | String   | '#fff'        | Text color of user message |\n| `inputPlaceholder`    | String   | 'Message'     | The placeholder for message input |\n| `inputDisableBg`      | String   | '#fff'        | Background color for the disabled input, mixed with `opacity: 0.2` |\n| `inputDisablePlaceholder` | String   | null        | Placeholder message for disabled input |\n\n\n\n## Components \u0026 Events\nThis is the most important part you need to know, because you need these to integrate your bot API.\nTake a look my `App.vue` file if you need an example.\n\n### Events\n\n| Name            | Params          | Description |\n| ---             | ---             | ---         |\n| `init`          |                 | Fire everytime the board is opened |\n| `msg-send`      | value (Object)  | Fire when user hit Send or select an option |\n| `destroy `      |                 | Fire when board is closed |\n\nUse `msg-send` to get the message from user and trigger request to bot API.\n\n**Trigger Events:**\n\n| Name            |  Description |\n| ---             |  ---         |\n| `botui-open`    |  To open the board |\n| `botui-close`   |  To close the board |\n| `botui-toggle`  |  To toggle open/close the board |\n\n---\n\n### Components\n\n**Common pattern / Example data:**\n\n```javascript\nconst messages = [\n  {\n    agent: 'bot', // Required. 'bot' or 'user'\n    type: 'text', // Required. Bubble message component type: 'text' / 'button'\n    text: 'Hello. How can I help you', // Required. The message\n    disableInput: false, // Disable message input or not\n    ...\n  },\n  {\n    agent: 'user',\n    type: 'text', // always\n    text: 'I need a new laptop',\n  },\n  ...\n]\n```\n\n**Component list:**\n\nCurrent components supported by this package, path to files: `components/MessageBubble/..`\n\n- **SingleText** - `type: 'text'`\n```javascript\n{\n  agent: 'bot',\n  type: 'text',\n  text: 'Hello. How can I help you',\n  disableInput: false,\n}\n```\n\n- **ButtonOptions** - `type: 'button'`\n```javascript\n{\n  agent: 'bot',\n  type: 'button',\n  text: 'Select the option below',\n  disableInput: true,\n  options: [\n    {\n      text: 'Open Google',\n      value: 'https://google.com',\n      action: 'url'\n    },\n    {\n      text: 'Submit Support Ticket',\n      value: 'submit_ticket',\n      action: 'postback' // Request to API\n    },\n    ...\n  ],\n}\n```\n\n- Other components are coming soon...\n\n\n## Slots\nList of available slots:\n\n| Name            | Description |\n| ---             | ---         |\n| `header`        | Board header, that contains Bot name. |\n| `actions`       | The slot beside Send button in the input message. You can add extra actions here (emoji, attach,...) |\n| `sendButton`    | Send button icon, you can change it to text. |\n| `bubbleButton`  | Bubble button that contains BubbleIcon \u0026 CloseIcon as default. |\n| `botTyping`     | Bot Typing message bubble that contains 3 dots indicator as default. |\n\n\n\n### Not found what your need?\nYou can overwrite the CSS by class name. Each type and state has separate class for you to customize.\n\n**Feature request**: Feel free to open an issue to ask for a new feature.\n\n\n## Developers / Build\n```bash\n# Clone repo\ngit clone https://github.com/JuzSer/vue-bot-ui\n\n# Install packages\nyarn\n\n# Development \u0026 Demo - http://localhost:1901\nyarn serve\n\n# Build main library\nyarn build-bundle\n```\n\n## Todo:\nMany things...\n- ~~Events~~\n- ~~Loading / Typing indicators~~\n- ~~Disable message input on loading, vice versa...~~\n- Properties for `target` of button options\n- Add more message bubble components (video, images,...)\n- Add more events\n- Test\n- Accessibility\n\n## Thanks\n\n- The icons and images from [FlatIcon](https://www.flaticon.com/)\n- Placeholder image from [Placehold.it](http://placehold.it)\n- Time ago from [date-fns](https://date-fns.org/)\n\n## Contributors\n- Hoang Son Nguyen [@juzser](https://github.com/juzser)\n- Aleksey Morshnev [@enorenio](https://github.com/enorenio)\n- DOANDUYDAT [@DOANDUYDAT](https://github.com/DOANDUYDAT)\n\n\n**Thank you!** :tada:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuzser%2Fvue-bot-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuzser%2Fvue-bot-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuzser%2Fvue-bot-ui/lists"}