-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (225 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<html><head>
<!--
This file autogenerated by docbat.js (https://npmjs.com/docbat)
Any manual edits may be lost.
-->
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
*{box-sizing:border-box;}
.bw-def-page-setup{height:100%;width:90%;margin:0 auto;padding-left:2%;padding-right:2%;left:0;top:1%;box-sizing:border-box;}
.bw-font-serif{font-family:Times New Roman, Times, serif;}
.bw-font-sans-serif{font-family:Arial, Helvetica, sans-serif;}
.bw-left{text-align:left;}
.bw-right{text-align:right;}
.bw-center{text-align:center;margin:0 auto;}
.bw-justify{text-align:justify;}
.bw-code{font-family:monospace;white-space:pre-wrap;}
.bw-pad1{padding-left:1%;padding-right:1%;}
.bw-table{border-collapse:collapse;border-spacing:0;border:1px solid #444;}
.bw-table th{background-color:#bbb;padding:4px;border:1px solid #444;}
.bw-table td{padding:4px;border:1px solid #444;}
.bw-table-stripe tr:nth-child(even){background-color:#f0f0f0;}
.bw-table tr td:first-child{font-weight:700;}
.bw-table-border-round{border-radius:2px;}
.bw-table-sort-upa::after{content:"\2191";}
.bw-table-sort-dna::after{content:"\2193";}
.bw-table-sort-xxa::after{content:"\00a0";}
.bw-tab-item-list{margin:0;padding-inline-start:0;}
.bw-tab-item{display:inline;padding-top:0.75em;padding-left:0.75em;padding-right:0.75em;border-top-right-radius:7px;border-top-left-radius:7px;}
.bw-tab-active{font-weight:700;}
.bw-tab:hover{cursor:pointer;font-weight:700;}
.bw-tab-content-list{margin:0;padding-top:0.0em;}
.bw-tab-content{display:none;border-radius:0;}
.bw-tab-content, .bw-tab-active{background-color:#ddd;padding:0.5em;}
.bw-accordian-container > div{padding:0.5em;}
.bw-container{margin:0 auto;}
.bw-row{width:100%;display:block;}
.bw-row [class^="bw-col"]{float:left;}
.bw-row::after{content:"";display:table;clear:both;}
.bw-box-1{padding-top:10px;padding-bottom:10px;border-radius:8px;}
.bw-sign{position:inherit;display:table;height:100%;width:100%;}
.bw-sign > div{display:table-cell;vertical-align:middle;}
.bw-sign > div > div{text-align:center;}
.bw-hide{display:none;}
.bw-show{display:block;}
.bw-h1{font-size:2.312rem;}
.bw-h2{font-size:1.965rem;}
.bw-h3{font-size:1.67rem;}
.bw-h4{font-size:1.419rem;}
.bw-h5{font-size:1.206rem;}
.bw-h6{font-size:1.025rem;}
.bw-col-1{width:8.333%;}
.bw-col-2{width:16.666%;}
.bw-col-3{width:25%;}
.bw-col-4{width:33.333%;}
.bw-col-5{width:41.666%;}
.bw-col-6{width:50%;}
.bw-col-7{width:58.333%;}
.bw-col-8{width:66.666%;}
.bw-col-9{width:75%;}
.bw-col-10{width:83.333%;}
.bw-col-11{width:91.666%;}
.bw-col-12{width:100%;}
.bw-color-color {color:#000}
.bw-color-background-color {background-color:#ddd}
.bw-color-active {active:#222}
.bw-thm-light
{
color: #020202 !important;;
background-color: #e2e2e2 !important;;
}
.bw-thm-dark
{
color: #e2e2e2 !important;;
background-color: #020202 !important;;
}
@media only screen and (min-width: 540px) {.bw-def-page-setup {width: 96%;}}
@media only screen and (min-width: 720px) {.bw-def-page-setup {width: 92%;}}
@media only screen and (min-width: 960px) {.bw-def-page-setup {width: 88%;}}
@media only screen and (min-width: 1100px){.bw-def-page-setup {width: 86%;}}
@media only screen and (min-width: 1600px){.bw-def-page-setup {width: 84%;}}
</style><style>
.dbat {padding-left: 10%; padding-right: 10%;}
</style><link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body class="bw-def-page-setup bw-font-sans-serif dbat" ><br><br><p><a href="https://opensource.org/licenses/BSD-2-Clause"><img src="https://img.shields.io/badge/License-BSD%202--Clause-blue.svg" alt="License"></a>
<a href="https://www.npmjs.com/package/quikchat"><img src="https://img.shields.io/npm/v/quikchat.svg?style=flat-square" alt="NPM version"></a>
<img src="https://github.com/deftio/quikchat/actions/workflows/ci.yml/badge.svg" alt="CI"></p>
<h1 id="quikchat-js">QuikChat (js)</h1>
<p>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.</p>
<p><a href="https://medium.com/gitconnected/quikchat-4be8d4a849e5?sk=ac745ae60a3521a9fbca6b748d4da48a">Article on Using Quickchat</a></p>
<h2 id="features">Features</h2>
<ul>
<li>Themeable with CSS (examples for light and dark)</li>
<li>Responsive design for various screen sizes and resizes with parent container</li>
<li>Hideable/Showable Title and Text Entry areas allows flexibility of usage</li>
<li>Full message history storage and retrieval (save and resume full chats)</li>
<li>History can be fed directly to OpenAI / Mistral / Ollama compatible APIs for context aware chats</li>
<li>Available via NPM, CDN or source via github</li>
<li>Provided in UMD and ESM formats (+ minified)</li>
<li>Multiple separate instances can run on a single page</li>
<li>Multiple users can be in a chat</li>
<li>Messages can be searched, appended to (streamed token completion), replaced, or removed.</li>
<li>Left / Right / Center support of individual users</li>
<li>Callback for all message events (to monitor chat)</li>
<li>Example backends for Python FastApi and Nodejs (see examples for working full projects)</li>
</ul>
<h2 id="demo--examples">Demo & Examples</h2>
<p><a href="https://deftio.github.io/quikchat/examples/example_umd.html">Simple Demo</a></p>
<p><a href="https://deftio.github.io/quikchat/examples/index.html">List of Examples on Github</a></p>
<p>Full Examples are in the repo examples folder (relative link):
<a href="./examples/index.html">Example Code and Demo</a>.</p>
<p>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.</p>
<h2 id="installation">Installation</h2>
<p>To use quikchat in your project, follow these steps:</p>
<p>Include the quikchat.js JavaScript file in your project.
Link the quikchat.css stylesheet to style the chat interface.
html</p>
<pre><code class="language-html"><script src="./path/to/quikchat.umd.min.js"></script>
<link rel="stylesheet" href="./path/to/quikchat.css">
</code></pre>
<h3 id="use-quikchat-via-cdn">use quikchat Via CDN</h3>
<pre><code class="language-html"><script src="https://unpkg.com/quikchat"></script>
<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css" />
</code></pre>
<p>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.</p>
<pre><code class="language-html"><style>
#chat-container {width: 100%; height: 50vh;} /* use any width / height as appropriate for your app */
</style>
<div id="chat-container"></div>
</code></pre>
<p>Initialize quikchat in your JavaScript code by providing the container element and a callback function for message events:</p>
<p>See /examples for full working code.</p>
<pre><code class="language-javascript">chat = new quikchat(
"#chat-container",//a css selector such as "#chat-container" or DOM element
(chat, msg) => { // this callback triggered when user hits the Send
// messages are not automatically echoed.
// this allows filtering of the message before posting.
chat.messageAddNew(msg, 'me', 'right'); // echo msg to chat area
// now call an LLM or do other actions with msg
// ... callLLM(msg) ... do other logic if needed.
// or callLLM(chat.historyGet()); // pass full history (can also filter)
},
{
theme: 'quikchat-theme-light', // set theme, see quikchat.css
titleArea: { title: 'My Chat', align: 'left', show: true }, // internal title area if desired
});
// Add a message at any point not just from callback
chat.messageAddNew('Hello!', 'You', 'left'); // should appear left justified
chat.messageAddNew('Hello!', 'Them', 'right'); // should appear right justified
//... other logic
let messageHistory = chat.historyGet(); // get all the messages (see docs for filters)
console.log(messageHistory); // do something with messages
// show / hide the title area
chat.titleAreaHide(); // hides the title area for a bare chat
// hide the input area
chat.inputAreaHide(); // hides the input area so chat is now just a message stream.
// change themes at any time
chat.changeTheme("quikchat-theme-dark"); // change theme on the fly (see quikchat.css for examples)
</code></pre>
<h2 id="theming">Theming</h2>
<p>QuikChat allows theming using CSS of all the messages, and user area, and overal widget.</p>
<p>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.</p>
<p>Themes can be changed at anytime by calling
myChatWidget.changeTheme(newTheme) where myChatWidget is the instance of your widget. </p>
<p>If several widgets are on the same page, each can have a separate theme.</p>
<pre><code class="language-css">/* quikchat theme light */
.quikchat-theme-light {
border: 1px solid #cccccc;
border-radius: 10px;
background-color: #f9f9f9;
}
.quikchat-theme-light .quikchat-title-area {
padding: 8px;
color: #333;
}
.quikchat-theme-light .quikchat-messages-area {
background-color: #ffffffe2;
color: #333;
}
/* support for alternating row styles */
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
background-color: #fffffff0;
color: #005662;
}
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
background-color: #eeeeeee9;
color: #353535;
}
/* input area / text entry / send button */
.quikchat-theme-light .quikchat-input-area {
background-color: #f9f9f9;
border-bottom-left-radius : 10px;
border-bottom-right-radius : 10px;
}
.quikchat-theme-light .quikchat-input-textbox {
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
color: #333;
}
.quikchat-theme-light .quikchat-input-send-btn {
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
}
</code></pre>
<h2 id="building-from-source">Building from Source</h2>
<p>quikchat is built with <a href="https://rollupjs.org/">rollup.js</a>.</p>
<p>Make sure to run npm install. Then run npm run build.</p>
<p>Note that at run time quikchat has no dependancies, but at build time several tools are used for packing and minifying code.</p>
<h2 id="testing">Testing</h2>
<p>quikchat is tested with the jest framwork. To run unit tests and see coverage run:</p>
<pre><code class="language-bash">npm run test
</code></pre>
<h2 id="license">License</h2>
<p>quikchat is licensed under the BSD-2 License.</p>
<h2 id="home-page">Home Page</h2>
<p><a href="https://github.com/deftio/quikchat">quikchat homepage and source code</a></p>
</body></html>