{"_id":"@cristianglezm/vue-chatbot-widget","name":"@cristianglezm/vue-chatbot-widget","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.8":{"name":"@cristianglezm/vue-chatbot-widget","private":false,"version":"0.0.8","keywords":["agent","chatbot","AI","tool-use"],"author":{"name":"Cristian Gonzalez"},"license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/cristianglezm/vue-chatbot-widget.git"},"bugs":{"url":"https://github.com/cristianglezm/vue-chatbot-widget#issues"},"homepage":"https://github.com/cristianglezm/vue-chatbot-widget#readme","type":"module","module":"./dist/lib/vue-chatbot-widget.cjs","main":"./dist/lib/vue-chatbot-widget.umd.js","exports":{".":{"types":"./dist/lib/types/main.d.ts","import":"./dist/lib/vue-chatbot-widget.es.js","require":"./dist/lib/vue-chatbot-widget.umd.js"},"./assets/*":"./dist/lib/assets/*","./workers/*":"./src/workers/*"},"sideEffects":["*.vue"],"scripts":{"dev":"npm-run-all --parallel watch:lib dev:demo","dev:demo":"cd demo && vite","build":"npm run clean && npm run build:lib && npm run build:demo","watch:lib":"vue-tsc -b && vite build --mode development --config vite.config.ts --watch","build:lib":"vue-tsc -b && vite build --config vite.config.ts","build:demo":"cd demo && npm run build","preview":"npm run build && cd demo && vite preview","lint":"eslint --fix src","format":"prettier --write src/","clean":"rm -rf dist && rm -rf demo/dist"},"dependencies":{"@huggingface/inference":"^2.8.1","@huggingface/jinja":"^0.3.3","@huggingface/transformers":"^3.4.2","kokoro-js":"^1.2.0","waveform-data":"^4.5.1"},"peerDependencies":{"mitt":"^3.0.0","pinia":"^3.0.0","vue":"^3.0.0"},"devDependencies":{"@eslint/js":"^9.6.0","@tsconfig/node22":"^22.0.0","@types/jsdom":"^21.1.7","@types/node":"^22.13.9","@types/prismjs":"^1.26.5","@typescript-eslint/eslint-plugin":"^8.26.0","@typescript-eslint/parser":"^8.26.0","@vitejs/plugin-vue":"^5.2.1","@vue/tsconfig":"^0.7.0","eslint":"^9.22.0","eslint-plugin-vue":"^9.33.0","globals":"^16.0.0","npm-run-all":"^4.1.5","prettier":"^3.4.2","typescript":"~5.8.0","vite":"^6.2.1","vite-plugin-css-injected-by-js":"^3.5.2","vite-plugin-dts":"^4.5.3","vite-plugin-eslint":"^1.8.1","vite-plugin-vue-devtools":"^7.7.2","vue-eslint-parser":"^10.1.1","vue-tsc":"^2.2.8"},"publishConfig":{"access":"public"},"_id":"@cristianglezm/vue-chatbot-widget@0.0.8","gitHead":"1d310078a0fa407b6bcf97d1ff8e1a030ca6afcb","description":"[![cd](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml/badge.svg?branch=master)](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml) [![pkg](https://github.com/cristianglezm/vue-chatbot-widget/actions","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-cUqU13gYHXp6uVlAHi8IKrlWjEmWydDLiHUFmKhdFk7olREnmPFANz8eYDsWKr29yTnorQWDZeW/yDoJZzqmCA==","shasum":"a942497dd9f0a80e32a5e1ed10d738d425e9e028","tarball":"https://registry.npmjs.org/@cristianglezm/vue-chatbot-widget/-/vue-chatbot-widget-0.0.8.tgz","fileCount":66,"unpackedSize":16741476,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDJiQ1CvM+VWr26FND1XS3DKk1ZiDzD77tRLJD/sMrDLQIgWCdOYM7p00pGLLJE1NS+Lom9PJVXCKwBOmm3elqsvxA="}]},"_npmUser":{"name":"cristianglezm","email":"cristianglezm@gmail.com"},"directories":{},"maintainers":[{"name":"cristianglezm","email":"cristianglezm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-chatbot-widget_0.0.8_1744372754420_0.33848295516971105"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-11T11:59:14.331Z","0.0.8":"2025-04-11T11:59:14.675Z","modified":"2025-04-11T11:59:14.944Z"},"maintainers":[{"name":"cristianglezm","email":"cristianglezm@gmail.com"}],"description":"[![cd](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml/badge.svg?branch=master)](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml) [![pkg](https://github.com/cristianglezm/vue-chatbot-widget/actions","homepage":"https://github.com/cristianglezm/vue-chatbot-widget#readme","keywords":["agent","chatbot","AI","tool-use"],"repository":{"type":"git","url":"git+https://github.com/cristianglezm/vue-chatbot-widget.git"},"author":{"name":"Cristian Gonzalez"},"bugs":{"url":"https://github.com/cristianglezm/vue-chatbot-widget#issues"},"license":"Apache-2.0","readme":"\n# Chat Bot Widget Component Library\n\n[![cd](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml/badge.svg?branch=master)](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/cd.yml)\n[![pkg](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/pkg.yml/badge.svg?branch=master)](https://github.com/cristianglezm/vue-chatbot-widget/actions/workflows/pkg.yml)\n[![NPM Version](https://img.shields.io/npm/v/%40cristianglezm%2Fvue-chatbot-widget?logo=npm)](https://www.npmjs.com/package/@cristianglezm/vue-chatbot-widget)\n[![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/cristianglezm/vue-chatbot-widget/master?logo=github)](https://github.com/cristianglezm/vue-chatbot-widget/pkgs/npm/vue-chatbot-widget)\n\nThe ChatBotWidget is designed to enhance your web application. It empowers users to specify actions, retrieve information from documents using a basic Retrieval-Augmented Generation (RAG) system, and access text-to-audio features for an improved and inclusive user experience. \n\n> ⚠️ **Important**\n>\n> **Warning**: The default chatbot model has not yet been trained for production use.\n> Some features may be limited or not function as expected.\n> For best results, consider using a custom model or adapting the configuration to meet your needs.\n\n## Features\n\n1. **Agent Capabilities** Leverages agent functionality to interpret and perform user-specified actions effectively.\n2. **Simple RAG (Retrieval-Augmented Generation) System** Integrates a basic RAG system, allowing the chatbot to consult external documents to enhance responses.\n3. **Local / Remote** it lets you use a local or remote server compatible with OpenAI API.\n4. **Text-to-Audio Conversion** Generates audio for text responses, providing an accessible and interactive user experience. Includes options for manual playback or automatic audio generation after responses.\n\n## Installation\n\nYou can install the package from npm.\n\n```bash\nnpm i @cristianglezm/vue-chatbot-widget\n```\nIf you plan to use all the components you will need to initizalize the pinia store and add ChatBotPlugin into the app.\n\n```javascript\n// app main.ts\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia';\n// import the plugin\nimport ChatBotPlugin from '@cristianglezm/vue-chatbot-widget';\nimport './style.css'\n\nimport App from './App.vue'\n\nconst app = createApp(App);\nconst pinia = createPinia();\n// registers the pinia store\napp.use(pinia);\n// and the ChatBot components\napp.use(ChatBotPlugin, { pinia });\napp.mount('#app')\n```\n\nIf you plan to only use a component you can just call ``initStores({ pinia })`` instead.\n\n```javascript\n// app main.ts\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia';\nimport { initStores } from '@cristianglezm/vue-chatbot-widget';\nimport './style.css'\n\nimport App from './App.vue'\n\nconst app = createApp(App);\nconst pinia = createPinia();\n// registers the pinia store\napp.use(pinia);\n// init stores for the chatbot components.\ninitStores({ pinia });\napp.mount('#app')\n```\n\n## Usage\n\n1. Using System Only\n\nThis method configures the chatbot with a system message.\n\n```vue\n\n\n```\n\n2. Using Chat Template Only\n\nIf you want to use a custom chat template (from @huggingface/jinja), specify it using the :chat-template prop.\n\nWhen tools and documents are provided, they will be injected into the chat template, to be able to use tools you will need to provide your own executor function.\nthe chat template should have a ``tools|tojson`` and a ``for doc in documents``, review the chat_template in [main.ts](https://github.com/cristianglezm/vue-chatbot-widget/blob/master/src/main.ts)\n\n```vue\n\n\n```\n## Props\n\n| Prop | Type | Description |\n|----------------|------------|---------------------------------------------------------------------|\n| `emitter` | Object | Mitt event bus to be able to load the model from outside the ChatBotWidget. |\n| `system` | String | Predefined system message for chatbot behavior. |\n| `greetings` | String | Initial message displayed to the user. |\n| `chat-template`| String | Custom `@huggingface/jinja` template for chatbot interaction. |\n| `tools` | Array | Array of tools available for chatbot execution. |\n| `documents` | Array | Array of documents injected into the chat template. |\n| `executor` | Function | Function responsible for parsing and executing commands. |\n| `editable` | Boolean | Enables or disables the editable mode. |\n| `config` | Object | Custom configuration object for additional settings. |\n\n\n\n```javascript\nemitter.emit('ChatBotWidget#loadChatBotModel'); // load the llm\nemitter.emit('ChatBotWidget#loadKokoroModel'); // load the tts\n```\n\nrefer to [src/component/chatbotwidget.vue](https://github.com/cristianglezm/vue-chatbot-widget/blob/master/src/components/ChatBotWidget.vue)\n\n\n## Constributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n## License\n\nThis library is distributed under the ``Apache 2.0``. See [License](https://github.com/cristianglezm/vue-chatbot-widget/blob/master/LICENSE.md) for more information.\n\nThe Monaspace font is distributed under the STL Open Font License. See [License](https://github.com/cristianglezm/vue-chatbot-widget/blob/master/LICENSE-monaspace-font.md) for more information.\n\n","readmeFilename":"README.md","_rev":"1-3adfe1f0a2456593632bfa80d209caa0"}