{"_id":"q-chat","name":"q-chat","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"q-chat","version":"1.0.1","description":"a simple chat widget","main":"q-chat.js","scripts":{"test":"jest"},"repository":{"type":"git","url":"git+https://github.com/earonesty/qchat.git"},"engines":{"node":">=10"},"keywords":["chat","live","chat","web","chat","customer","support"],"author":{"name":"erik@q32.com"},"license":"MIT","bugs":{"url":"https://github.com/earonesty/qchat/issues"},"homepage":"https://github.com/earonesty/qchat#readme","devDependencies":{"@testing-library/dom":"^9.3.1","@testing-library/jest-dom":"^6.1.2","jest":"^29.6.4","jest-environment-jsdom":"^29.6.4","jsdom":"^22.1.0"},"gitHead":"df7d58a1a7b0a9c5d1140ea37c2d98c2bcbcb5f3","_id":"q-chat@1.0.1","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-MoLTsUAcnrBWUA6cyhEHMFmikCxZBMu3onnR0tSbWHA2YRpNYltDdSXCs2IsKN3m30e0MyiAIH5llvoiAXxtpw==","shasum":"0be043450d037a5925139054175d979fba558f43","tarball":"https://registry.npmjs.org/q-chat/-/q-chat-1.0.1.tgz","fileCount":9,"unpackedSize":16470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8yOYmZiaWO+TsqLeyNiavut1aVMn66XWKIZetGZ3vtAiBaIPvxfoJkCkkoC0ExSECFFPJGNHfaIfyGrL0VPpV01w=="}]},"_npmUser":{"name":"earonesty","email":"erik@q32.com"},"directories":{},"maintainers":[{"name":"earonesty","email":"erik@q32.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/q-chat_1.0.1_1693939168396_0.042460900373711974"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-05T18:39:28.395Z","1.0.1":"2023-09-05T18:39:28.714Z","modified":"2023-09-05T18:39:29.048Z"},"maintainers":[{"name":"earonesty","email":"erik@q32.com"}],"description":"a simple chat widget","homepage":"https://github.com/earonesty/qchat#readme","keywords":["chat","live","chat","web","chat","customer","support"],"repository":{"type":"git","url":"git+https://github.com/earonesty/qchat.git"},"author":{"name":"erik@q32.com"},"bugs":{"url":"https://github.com/earonesty/qchat/issues"},"license":"MIT","readme":"# q-chat Widget\n\nThe `q-chat` widget is a simple, customizable chat UI that you can easily integrate into any web project. It provides a chat button that users can click to open a chat window. The widget allows users to send messages, and it's designed to be integrated with a server or other backends to manage chat sessions.\n\n## Features\n\n- Toggleable chat window\n- Customizable look via CSS\n- Easy-to-hook event system for custom backend integrations\n- Lightweight, with no external dependencies\n- SVG-based icons for scalability and customization\n- Includes 'Send' button in addition to 'Enter' key for message sending\n\n## Installation\n\nTo install the `q-chat` widget, you can include the JavaScript and CSS files in your HTML:\n\n```html\n<script src=\"/path/to/q-chat.js\"></script>\n<link rel=\"stylesheet\" href=\"/path/to/q-chat.css\" id=\"q-chat-css\">\n```\n\nMake sure to replace `/path/to/` with the actual path to the widget files.\n\n## Usage\n\nOnce you've included the widget files, the chat UI should be automatically activated on your webpage.\n\n### JavaScript Events\n\nThe `q-chat` widget emits the following custom events:\n\n- `qChatBefore`: Fired before a message is sent. Can be canceled/edited.\n- `qChatAfter`: Fired after a message is sent.\n\nExample to hook into the `qChatBefore` event:\n\n```javascript\ndocument.addEventListener('qChatBefore', function(event) {\n  console.log(\"Before message send:\", event.detail.content);\n});\n```\n\nYou can also send a message to the chat UI using the `qChatReceive` event like this:\n\n```javascript\ndocument.dispatchEvent(new CustomEvent(\"qChatReceive\", {\n  detail: { content: \"Hello from server\" }\n}));\n```\n\n## Customization\n\nThe chat widget is styled using CSS, and you can override these styles to better fit the widget into your application. The following are the main CSS IDs used within the widget:\n\nIf a css sheet is already loaded, with id \"q-chat-css\", then the default styles will not be applied.\n\n### Main Components\n\n- `#chat-button`: The floating chat button.\n- `#chat-window`: The main chat window.\n- `#messages-div`: The container for all chat messages.\n- `#input-wrapper`: The wrapper for the input field and the send button.\n\n### Input and Buttons\n\n- `#input-field`: The text area where users can type messages.\n- `#send-button`: The button to send messages.\n\n\n## API\n\nThe widget exposes a global object `qChat` with methods for programmatic interaction:\n\n- `qChat.sendMessage(content)`: Send a message as the user.\n- `qChat.receiveMessage(content)`: Receive a message as the server/assistant.\n- `qChat.getMessages()`: Retrieve the list of all messages in the format `[{\"role\": \"assistant\", \"content\": \"message\"}, {\"role\": \"user\", \"content\": \"message\"}]`.\n- `qChat.setMessages(messages)`: Set all messages from a loaded context or history.\n\n## Contributing\n\nFeel free to fork this project, open issues, or submit PRs. For major changes, please open an issue first.\n\n## License\n\nMIT License\n","readmeFilename":"README.md"}