quikchat 1.1.13 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +336 -189
  2. package/dist/quikchat.cjs.js +541 -23
  3. package/dist/quikchat.cjs.js.map +1 -1
  4. package/dist/quikchat.cjs.min.js +1 -1
  5. package/dist/quikchat.cjs.min.js.map +1 -1
  6. package/dist/quikchat.d.ts +194 -0
  7. package/dist/quikchat.esm.js +541 -23
  8. package/dist/quikchat.esm.js.map +1 -1
  9. package/dist/quikchat.esm.min.js +1 -1
  10. package/dist/quikchat.esm.min.js.map +1 -1
  11. package/dist/quikchat.umd.js +541 -23
  12. package/dist/quikchat.umd.js.map +1 -1
  13. package/dist/quikchat.umd.min.js +1 -1
  14. package/dist/quikchat.umd.min.js.map +1 -1
  15. package/package.json +7 -4
package/README.md CHANGED
@@ -1,268 +1,415 @@
1
- [![License](https://img.shields.io/badge/License-BSD%202--Clause-blue.svg)](https://opensource.org/licenses/BSD-2-Clause)
2
- [![NPM version](https://img.shields.io/npm/v/quikchat.svg?style=flat-square)](https://www.npmjs.com/package/quikchat)
3
- ![CI](https://github.com/deftio/quikchat/actions/workflows/ci.yml/badge.svg)
1
+ [![License](https://img.shields.io/badge/License-BSD%202--Clause-blue.svg)](https://opensource.org/licenses/BSD-2-Clause) [![NPM version](https://img.shields.io/npm/v/quikchat.svg?style=flat-square)](https://www.npmjs.com/package/quikchat) ![CI](https://github.com/deftio/quikchat/actions/workflows/ci.yml/badge.svg)
4
2
 
5
- # QuikChat (js)
3
+ # QuikChat
6
4
 
7
- Quikchat is a vanilla (no dependancies) JavaScript chat control that can be easily integrated into web applications. It provides a customizable chat interface with support for hiding and showing a title area and the input area.
5
+ > Zero-dependency JavaScript chat widget for modern web applications
8
6
 
9
- [Article on Using Quickchat](https://medium.com/gitconnected/quikchat-4be8d4a849e5?sk=ac745ae60a3521a9fbca6b748d4da48a)
7
+ QuikChat is a lightweight, highly customizable chat interface that integrates seamlessly with any web project. Built with vanilla JavaScript, it provides powerful features for LLM applications, real-time chat, and interactive messaging experiences.
10
8
 
11
- ## Features
9
+ **🚀 [Live Demo](https://deftio.github.io/quikchat/examples/example_umd.html) | 📚 [API Reference](docs/API-REFERENCE.md) | 🛠 [Developer Guide](docs/DEVELOPER-GUIDE.md)**
12
10
 
13
- * Themeable with CSS (examples for light and dark)
14
- * Responsive design for various screen sizes and resizes with parent container
15
- * Hideable/Showable Title and Text Entry areas allows flexibility of usage
16
- * Full message history storage and retrieval (save and resume full chats)
17
- * History can be fed directly to OpenAI / Mistral / Ollama compatible APIs for context aware chats
18
- * Available via NPM, CDN or source via github
19
- * Provided in UMD and ESM formats (+ minified)
20
- * Multiple separate instances can run on a single page
21
- * Multiple users can be in a chat
22
- * Messages can be searched, appended to (streamed token completion), replaced, or removed.
23
- * Left / Right / Center support of individual users
24
- * Callback for all message events (to monitor chat)
25
- * Example backends for Python FastApi and Nodejs (see examples for working full projects)
26
11
 
27
- ## Demo & Examples
28
12
 
29
- [Simple Demo](https://deftio.github.io/quikchat/examples/example_umd.html)
13
+ ## ✨ Key Features
30
14
 
31
- [List of Examples on Github](https://deftio.github.io/quikchat/examples/index.html)
15
+ - **🚫 Zero Dependencies** - Pure vanilla JavaScript, no frameworks required
16
+ - **🎨 Fully Customizable** - Complete CSS theming system with multi-instance support
17
+ - **🤖 LLM Ready** - Built-in support for OpenAI, Anthropic, Ollama, and streaming responses
18
+ - **📱 Responsive Design** - Adapts to any screen size and container dimensions
19
+ - **⚡ High Performance** - Efficient message handling and memory management
20
+ - **👁 Advanced Visibility** - Individual and group-based message control (v1.1.13+)
21
+ - **🏷 Tagged Messages** - Powerful tagging system for message organization (v1.1.14+)
22
+ - **💾 Full History Control** - Save, load, and restore complete chat sessions
23
+ - **🔧 Developer Friendly** - TypeScript-ready with comprehensive API
32
24
 
33
25
 
34
- Full Examples are in the repo examples folder (relative link):
35
- [Example Code and Demo](./examples/index.html).
36
26
 
37
- Examples include using ESM, UMD modules, theming, running multiple chats on the same page, and integration with LLM providers such as Ollama, LMStudio, OpenAI compatible providers.
27
+ ## 🚀 Quick Start
38
28
 
39
- ## Installation
29
+ Get a working chat interface in under 60 seconds:
40
30
 
41
- To use quikchat in your project, follow these steps:
31
+ ### Via CDN
32
+ ```html
33
+ <!DOCTYPE html>
34
+ <html>
35
+ <head>
36
+ <link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
37
+ </head>
38
+ <body>
39
+ <div id="chat" style="width: 100%; height: 400px;"></div>
40
+
41
+ <script src="https://unpkg.com/quikchat"></script>
42
+ <script>
43
+ const chat = new quikchat('#chat', (instance, message) => {
44
+ // Echo user message
45
+ instance.messageAddNew(message, 'You', 'right');
46
+
47
+ // Add bot response
48
+ setTimeout(() => {
49
+ instance.messageAddNew('Thanks for your message!', 'Bot', 'left');
50
+ }, 1000);
51
+ });
52
+
53
+ // Add welcome message
54
+ chat.messageAddNew('Hello! How can I help you today?', 'Bot', 'left');
55
+ </script>
56
+ </body>
57
+ </html>
58
+ ```
42
59
 
43
- Include the quikchat.js JavaScript file in your project.
44
- Link the quikchat.css stylesheet to style the chat interface.
45
- html
60
+ ### Via NPM
61
+ ```bash
62
+ npm install quikchat
63
+ ```
46
64
 
47
- ```html
48
- <script src="./path/to/quikchat.umd.min.js"></script>
49
- <link rel="stylesheet" href="./path/to/quikchat.css">
65
+ ```javascript
66
+ import quikchat from 'quikchat';
67
+ import 'quikchat/dist/quikchat.css';
68
+
69
+ const chat = new quikchat('#chat-container', (instance, message) => {
70
+ // Your message handling logic
71
+ console.log('User said:', message);
72
+ });
50
73
  ```
51
74
 
52
- ### use quikchat Via CDN
53
75
 
76
+
77
+ ## 📦 Installation Options
78
+
79
+ ### NPM Package
80
+ ```bash
81
+ npm install quikchat
82
+ ```
83
+
84
+ ### CDN (Latest Version)
54
85
  ```html
86
+ <!-- CSS -->
87
+ <link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
88
+
89
+ <!-- JavaScript -->
55
90
  <script src="https://unpkg.com/quikchat"></script>
56
- <link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css" />
57
91
  ```
58
92
 
59
- Or import as a module:
93
+ ### Direct Download
94
+ Download the latest release from [GitHub Releases](https://github.com/deftio/quikchat/releases)
95
+
96
+
97
+
98
+ ## 🆕 What's New in v1.1.15 (In Development)
99
+
100
+ ### 🎯 Smart Scroll Behavior
101
+ Improved user experience when reading chat history:
60
102
 
61
103
  ```javascript
62
- import quikchat from '../dist/quikchat.esm.min.js';
63
-
64
- document.addEventListener('DOMContentLoaded', () => {
65
- const parentDiv = document.querySelector('#chatContainerInstance');
66
- window.chatBox = new quikchat(parentDiv,
67
- (chat, msg) => {
68
- chat.messageAddNew(msg, 'me', 'right'); // echo the message to the chat area
69
-
70
- // example of a bot response using the built-in lorem ipsum generator
71
- const botResponse = quikchat.loremIpsum();
72
- chat.messageAddNew(botResponse, 'bot', 'left');
73
- },
74
- { // options
75
- theme: 'quikchat-theme-light',
76
- titleArea: { title: 'QuikChatJS', align: 'left', show: true },
77
- });
78
- chatBox.messageAddNew('Hello, how are you?', 'bot', 'left');
79
- chatBox.messageAddNew('I am fine, thank you.', 'user', 'right');
80
- chatBox.messageAddNew('How can I help you today?', 'bot', 'left');
81
- chatBox.changeTheme("quikchat-theme-light");
82
- console.log("quikchat version: "+quikchat.version().version);
104
+ // Never auto-scroll (user has full control)
105
+ chat.messageAddNew('New message', 'Bot', 'left', 'assistant', false);
83
106
 
107
+ // Smart scroll - only scrolls if user is near bottom
108
+ chat.messageAddNew('New message', 'Bot', 'left', 'assistant', 'smart');
109
+
110
+ // Always scroll to new messages (default)
111
+ chat.messageAddNew('New message', 'Bot', 'left', 'assistant', true);
112
+ ```
113
+
114
+ ### 🔔 Enhanced Message Callbacks
115
+ Track message modifications for streaming and real-time updates:
116
+
117
+ ```javascript
118
+ // Track streaming content as it arrives
119
+ chat.setCallbackonMessageAppend((instance, msgId, content) => {
120
+ console.log(`Streaming: ${content} added to message ${msgId}`);
121
+ });
122
+
123
+ // Monitor message edits
124
+ chat.setCallbackonMessageReplace((instance, msgId, newContent) => {
125
+ console.log(`Message ${msgId} updated`);
126
+ });
127
+
128
+ // Track deletions
129
+ chat.setCallbackonMessageDelete((instance, msgId) => {
130
+ console.log(`Message ${msgId} deleted`);
84
131
  });
85
132
  ```
86
133
 
87
- Create a container element in your HTML where you want the chat interface to appear. The quikchat widget will take 100% of the paretn container height and width. If the parent container width or height is not specified the quikchat widget may grow as content is added. If the parent container is resized, quikchat will resize with the parent container.
134
+ ### 📚 Powerful History Management
135
+ Efficiently handle large chat histories with pagination and search:
88
136
 
89
- ```html
90
- <style>
91
- #chat-container {width: 100%; height: 50vh;} /* use any width / height as appropriate for your app */
92
- </style>
93
- <div id="chat-container"></div>
137
+ ```javascript
138
+ // Paginated history retrieval
139
+ const page = chat.historyGetPage(1, 20, 'desc'); // Get newest 20 messages
140
+ console.log(page.messages);
141
+ console.log(page.pagination.hasNext); // Check if more pages exist
142
+
143
+ // Search through history
144
+ const results = chat.historySearch({
145
+ text: 'error',
146
+ userString: 'Support',
147
+ limit: 50
148
+ });
149
+
150
+ // Get history metadata
151
+ const info = chat.historyGetInfo();
152
+ console.log(`Total messages: ${info.totalMessages}`);
153
+ console.log(`Memory used: ${info.memoryUsage.estimatedSize} bytes`);
154
+ ```
155
+
156
+ ## 📦 Previous Release: v1.1.14
157
+
158
+ ### 🏷 Tagged Message System
159
+ Group and control message visibility with powerful tagging:
160
+
161
+ ```javascript
162
+ // Add messages with tags
163
+ chat.messageAddNew('System initialized', 'System', 'center', 'system', true, true, ['system', 'startup']);
164
+
165
+ // Control visibility by tag
166
+ chat.setTagVisibility('system', false); // Hide all system messages
167
+ chat.setTagVisibility('system', true); // Show all system messages
168
+
169
+ // Get active tags
170
+ const tags = chat.getActiveTags(); // ['system', 'startup', 'user']
94
171
  ```
95
172
 
96
- Initialize quikchat in your JavaScript code by providing the container element and a callback function for message events:
173
+ ### 🎯 Instance Scoping
174
+ Multiple chat instances with different styling and behavior:
175
+
176
+ ```javascript
177
+ const salesChat = new quikchat('#sales', handler, {
178
+ theme: 'quikchat-theme-light',
179
+ instanceClass: 'sales-chat'
180
+ });
181
+
182
+ const supportChat = new quikchat('#support', handler, {
183
+ theme: 'quikchat-theme-dark',
184
+ instanceClass: 'support-chat'
185
+ });
186
+ ```
97
187
 
98
- See /examples for full working code.
188
+ ### 👁 Enhanced Visibility Controls (v1.1.13+)
189
+ Fine-grained control over message display:
99
190
 
100
191
  ```javascript
101
- chat = new quikchat(
102
- "#chat-container",//a css selector such as "#chat-container" or DOM element
103
- (chat, msg) => { // this callback triggered when user hits the Send
104
- // messages are not automatically echoed.
105
- // this allows filtering of the message before posting.
106
- chat.messageAddNew(msg, 'me', 'right'); // echo msg to chat area
107
- // now call an LLM or do other actions with msg
108
- // ... callLLM(msg) ... do other logic if needed.
109
- // or callLLM(chat.historyGet()); // pass full history (can also filter)
110
- },
111
- {
112
- theme: 'quikchat-theme-light', // set theme, see quikchat.css
113
- titleArea: { title: 'My Chat', align: 'left', show: true }, // internal title area if desired
114
- });
115
-
116
- // Add a message at any point not just from callback
117
- chat.messageAddNew('Hello!', 'You', 'left'); // should appear left justified
118
- chat.messageAddNew('Hello!', 'Me', 'right'); // should appear right justified
119
-
120
-
121
- //... other logic
122
- let messageHistory = chat.historyGet(); // get all the messages (see docs for filters)
123
- console.log(messageHistory); // do something with messages
124
-
125
- // show / hide the title area
126
- chat.titleAreaHide(); // hides the title area for a bare chat
127
-
128
- // hide the input area
129
- chat.inputAreaHide(); // hides the input area so chat is now just a message stream.
130
-
131
- // change themes at any time
132
- chat.changeTheme("quikchat-theme-dark"); // change theme on the fly (see quikchat.css for examples)
192
+ // Hide individual messages
193
+ chat.messageSetVisibility(messageId, false);
194
+
195
+ // Check visibility status
196
+ const isVisible = chat.messageGetVisibility(messageId);
133
197
  ```
134
198
 
135
- ## Theming
199
+ **[View Complete Changelog](https://github.com/deftio/quikchat/releases)**
200
+
201
+
202
+
203
+ ## 🎨 Theming & Customization
136
204
 
137
- QuikChat allows theming using CSS of all the messages, and user area, and overal widget.
205
+ QuikChat includes beautiful built-in themes and supports complete customization:
138
206
 
139
- Below is the prebuilt 'light' theme. To change the theme, make a new set of classes with different values but the same css selector naming (e.g. change "quikchat-theme-light" to "my-theme") and save as a style. Then pass the "my-theme" to the constructor or to the changeTheme() function.
207
+ ```javascript
208
+ // Use built-in themes
209
+ const chat = new quikchat('#chat', handler, {
210
+ theme: 'quikchat-theme-dark' // or 'quikchat-theme-light'
211
+ });
140
212
 
141
- Themes can be changed at anytime by calling
142
- myChatWidget.changeTheme(newTheme) where myChatWidget is the instance of your widget.
213
+ // Switch themes dynamically
214
+ chat.changeTheme('quikchat-theme-light');
215
+ ```
143
216
 
144
- If several widgets are on the same page, each can have a separate theme.
217
+ ### Custom Themes
218
+ Create your own themes with CSS:
145
219
 
146
220
  ```css
147
- /* quikchat theme light */
148
- .quikchat-theme-light {
149
- border: 1px solid #cccccc;
150
- border-radius: 10px;
151
- background-color: #f9f9f9;
152
- }
153
-
154
- .quikchat-theme-light .quikchat-title-area {
155
- padding: 8px;
156
- color: #333;
221
+ .my-custom-theme {
222
+ border: 2px solid #3b82f6;
223
+ border-radius: 12px;
224
+ font-family: 'SF Pro Display', sans-serif;
157
225
  }
158
-
159
- .quikchat-theme-light .quikchat-messages-area {
160
- background-color: #ffffffe2;
161
- color: #333;
162
- }
163
-
164
- /* support for alternating row styles */
165
- .quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
166
- background-color: #fffffff0;
167
- color: #005662;
168
- }
169
- .quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
170
- background-color: #eeeeeee9;
171
- color: #353535;
226
+
227
+ .my-custom-theme .quikchat-message-content {
228
+ border-radius: 18px;
229
+ padding: 12px 16px;
172
230
  }
173
231
 
174
- /* input area / text entry / send button */
175
- .quikchat-theme-light .quikchat-input-area {
176
- background-color: #f9f9f9;
177
- border-bottom-left-radius : 10px;
178
- border-bottom-right-radius : 10px;
232
+ /* Apply to chat */
233
+ const chat = new quikchat('#chat', handler, {
234
+ theme: 'my-custom-theme'
235
+ });
236
+ ```
237
+
238
+ **📖 [Complete Theming Guide](docs/DEVELOPER-GUIDE.md#theming-guide)**
239
+
240
+
241
+
242
+ ## 🤖 LLM Integration Examples
243
+
244
+ ### OpenAI Integration
245
+ ```javascript
246
+ async function handleMessage(chat, message) {
247
+ chat.messageAddNew(message, 'You', 'right');
248
+
249
+ const response = await fetch('https://api.openai.com/v1/chat/completions', {
250
+ method: 'POST',
251
+ headers: {
252
+ 'Authorization': `Bearer ${API_KEY}`,
253
+ 'Content-Type': 'application/json'
254
+ },
255
+ body: JSON.stringify({
256
+ model: 'gpt-4',
257
+ messages: formatChatHistory(chat.historyGetAllCopy(), message)
258
+ })
259
+ });
260
+
261
+ const data = await response.json();
262
+ chat.messageAddNew(data.choices[0].message.content, 'Assistant', 'left');
179
263
  }
264
+ ```
265
+
266
+ ### Streaming Responses
267
+ ```javascript
268
+ // Create message for streaming
269
+ const botMsgId = chat.messageAddNew('', 'Bot', 'left');
270
+
271
+ // Append content as it arrives
272
+ streamingAPI.onChunk(chunk => {
273
+ chat.messageAppendContent(botMsgId, chunk);
274
+ });
275
+ ```
276
+
277
+ **🛠 [Complete LLM Integration Guide](docs/DEVELOPER-GUIDE.md#llm-integration-best-practices)**
278
+
279
+
180
280
 
181
- .quikchat-theme-light .quikchat-input-textbox {
182
- background-color: #ffffff;
183
- border: 1px solid #ccc;
184
- border-radius: 4px;
185
- font-size: 14px;
186
- color: #333;
281
+ ## 🏗 Framework Integration
282
+
283
+ ### React
284
+ ```jsx
285
+ function ChatComponent() {
286
+ const chatRef = useRef(null);
287
+ const instanceRef = useRef(null);
288
+
289
+ useEffect(() => {
290
+ instanceRef.current = new quikchat(chatRef.current, handleMessage);
291
+ }, []);
292
+
293
+ return <div ref={chatRef} style={{ height: '400px' }} />;
187
294
  }
188
-
189
- .quikchat-theme-light .quikchat-input-send-btn {
190
- background-color: #4caf50;
191
- color: white;
192
- border: none;
193
- border-radius: 4px;
295
+ ```
296
+
297
+ ### Vue
298
+ ```vue
299
+ <template>
300
+ <div ref="chatContainer" class="chat-container"></div>
301
+ </template>
302
+
303
+ <script>
304
+ import quikchat from 'quikchat';
305
+
306
+ export default {
307
+ mounted() {
308
+ this.chat = new quikchat(this.$refs.chatContainer, this.handleMessage);
309
+ }
194
310
  }
311
+ </script>
195
312
  ```
196
313
 
197
- ## Building from Source
314
+ **⚛️ [Framework Integration Examples](docs/DEVELOPER-GUIDE.md#frontend-framework-integration)**
198
315
 
199
- quikchat is built with [rollup.js](https://rollupjs.org/).
200
316
 
201
- Make sure to run npm install. Then run npm run build.
202
317
 
203
- Note that at run time quikchat has no dependancies, but at build time several tools are used for packing and minifying code.
318
+ ## 📖 Documentation
204
319
 
205
- ## Testing
320
+ | Document | Description |
321
+ |-|-|
322
+ | **[API Reference](docs/API-REFERENCE.md)** | Complete technical reference for all methods and options |
323
+ | **[Developer Guide](docs/DEVELOPER-GUIDE.md)** | Practical recipes and advanced patterns |
324
+ | **[Examples](examples/)** | Working code examples and demos |
325
+ | **[Live Demo](https://deftio.github.io/quikchat/examples/)** | Interactive examples and showcase |
206
326
 
207
- quikchat is tested with the jest framwork. To run unit tests and see coverage run:
208
327
 
209
- ```bash
210
- npm run test
211
- ```
212
328
 
213
- ## License
329
+ ## 🌟 Examples & Demos
214
330
 
215
- quikchat is licensed under the BSD-2 License.
331
+ - **[Basic Chat](https://deftio.github.io/quikchat/examples/example_umd.html)** - Simple chat interface
332
+ - **[LLM Integration](examples/openai.html)** - OpenAI GPT integration
333
+ - **[Multi-Instance](examples/dual-chatrooms.html)** - Multiple chats on one page
334
+ - **[Visibility Controls](examples/hidden_message.html)** - Message visibility features
335
+ - **[Theme Showcase](https://deftio.github.io/quikchat/examples/)** - Light and dark themes
336
+ - **[React Integration](examples/quikchat-react.html)** - React component example
337
+ - **[Backend Examples](examples/)** - FastAPI and Node.js backends
216
338
 
217
- ## Home Page
339
+ **📂 [Browse All Examples](examples/index.html)**
218
340
 
219
- [quikchat homepage and source code](https://github.com/deftio/quikchat)
220
341
 
221
- ## New Features
222
342
 
223
- - `role` (string): The role of the message sender (e.g., "user", "agent"). Defaults to "user".
224
- - `scrollIntoView` (boolean): If true, the chat will scroll to the bottom after the message is added. Defaults to true.
343
+ ## 🚀 Performance
225
344
 
226
- **Example:**
227
- ```javascript
228
- myChat.messageAddNew("Hello world!", "Alice", "left", "user");
345
+ QuikChat is built for production use with excellent performance characteristics:
346
+
347
+ - **Lightweight**: ~25KB minified + gzipped
348
+ - **Fast**: Sub-millisecond message rendering
349
+ - **Scalable**: Handles thousands of messages efficiently
350
+ - **Memory Efficient**: Automatic cleanup and optimization
351
+
352
+ **📊 [Performance Optimization Guide](docs/DEVELOPER-GUIDE.md#performance-optimization)**
353
+
354
+
355
+
356
+ ## 🛠 Building from Source
357
+
358
+ ```bash
359
+ # Clone repository
360
+ git clone https://github.com/deftio/quikchat.git
361
+ cd quikchat
362
+
363
+ # Install dependencies
364
+ npm install
365
+
366
+ # Build for production
367
+ npm run build
368
+
369
+ # Run tests
370
+ npm test
371
+
372
+ # Start development server
373
+ npm run dev
229
374
  ```
230
375
 
231
- ### `messageAddFull(input)`
376
+ **Requirements**: Node.js 14+ and npm 6+
377
+
378
+
232
379
 
233
- Adds a new message with a comprehensive set of options.
380
+ ## 🤝 Contributing
234
381
 
235
- - `input` (object): An object containing message properties:
236
- - `content` (string): The HTML content of the message.
237
- - `userString` (string): The name to display for the user.
238
- - `align` (string): `left`, `right`, or `center`.
239
- - `role` (string): The role of the sender.
240
- - `userID` (number): A numeric ID for the user.
241
- - `timestamp` (string|boolean): An ISO string for the timestamp, or `false`.
242
- - `updatedtime` (string|boolean): An ISO string for the last update time, or `false`.
243
- - `scrollIntoView` (boolean): Whether to scroll to the message.
244
- - `visible` (boolean): If `false`, the message is added to the history but not displayed. Defaults to `true`.
382
+ We welcome contributions! Here's how you can help:
245
383
 
246
- ### `messageRemove(msgid)`
384
+ 1. **🐛 Report Issues** - Found a bug? [Open an issue](https://github.com/deftio/quikchat/issues)
385
+ 2. **💡 Feature Requests** - Have an idea? We'd love to hear it
386
+ 3. **🔧 Code Contributions** - Submit pull requests for bug fixes or new features
387
+ 4. **📖 Documentation** - Help improve our guides and examples
388
+ 5. **🌟 Share Examples** - Show us what you've built with QuikChat
389
+
390
+ ### Development Setup
391
+ ```bash
392
+ git clone https://github.com/deftio/quikchat.git
393
+ cd quikchat
394
+ npm install
395
+ npm run dev
396
+ ```
247
397
 
248
- Removes a message from the chat by its ID.
398
+ **📋 [Contributing Guidelines](CONTRIBUTING.md)**
249
399
 
250
- ### `messageSetVisibility(msgid, isVisible)`
251
400
 
252
- Sets the visibility of a message that is already in the chat.
253
401
 
254
- - `msgid` (number): The ID of the message to modify.
255
- - `isVisible` (boolean): `true` to show the message, `false` to hide it.
402
+ ## 📄 License
256
403
 
257
- This is useful for hiding system prompts or for moderation.
404
+ QuikChat is licensed under the [BSD-2-Clause License](LICENSE.txt).
258
405
 
259
- ### `messageGetVisibility(msgid)`
260
406
 
261
- Checks if a message is currently visible.
262
407
 
263
- - `msgid` (number): The ID of the message to check.
264
- - Returns `true` if the message is visible, `false` otherwise.
408
+ ## 🔗 Links
265
409
 
266
- ### `messageRemoveLast()`
410
+ - **📦 [NPM Package](https://www.npmjs.com/package/quikchat)**
411
+ - **🐙 [GitHub Repository](https://github.com/deftio/quikchat)**
412
+ - **🚀 [Live Examples](https://deftio.github.io/quikchat/examples/)**
413
+ - **📖 [Medium Article](https://medium.com/gitconnected/quikchat-4be8d4a849e5)**
414
+ - **💬 [Issues & Support](https://github.com/deftio/quikchat/issues)**
267
415
 
268
- Removes the most recently added message.