diff --git a/README.md b/README.md index cfa2a76..81af238 100644 --- a/README.md +++ b/README.md @@ -25,8 +25,9 @@ Quikchat is a vanilla (no dependancies) JavaScript chat control that can be easi [Simple Demo](https://deftio.github.io/quikchat/examples/example_umd.html) Full Examples are in the repo examples folder: -[Example Code and Demo](./examples/index.html) -Example include using ESM, UMD modules, running multiple chats on the same page, and integration with LLM providers such as Ollama, LMStudio, OpenAI compatible providers. +[Example Code and Demo](./examples/index.html). + +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. ## Installation @@ -51,6 +52,9 @@ html 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. ```html +
``` @@ -62,7 +66,7 @@ See /examples for full working code. chat = new quikchat( "#chat-container", // this can be a css selector such as "#chat-container" or DOM element { - theme: 'quikchat-theme-light', // settheme see quikchat.css + theme: 'quikchat-theme-light', // set theme, see quikchat.css (chat, msg) => { // this callback triggered when user hits the Send // messages are not automatically echoed. // allows filtering / other processing of the message before posting. diff --git a/dev/todo.md b/dev/todo.md index a8baeff..e5c2fc4 100644 --- a/dev/todo.md +++ b/dev/todo.md @@ -19,7 +19,7 @@ * (done 1.1.3) moved all border-radius to themes * (done 1.1.3) updated docs / index.html * (done 1.1.3) updated readme generator from npx to /node-modules (still using docbat) -* (done 1.1.3) +* (done 1.1.3) add ci via github actions * (done 1.1.2) updated styles and docs * (done 1.1.2) add jest test suite diff --git a/index.html b/index.html index 3026c22..3985b10 100644 --- a/index.html +++ b/index.html @@ -121,8 +121,8 @@

Features

Demo & Examples

Simple Demo

Full Examples are in the repo examples folder: -Example Code and Demo -Example include using ESM, UMD modules, running multiple chats on the same page, and integration with LLM providers such as Ollama, LMStudio, OpenAI compatible providers.

+Example Code and Demo.

+

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.

Installation

To use quikchat in your project, follow these steps:

Include the quikchat.js JavaScript file in your project. @@ -136,14 +136,17 @@

use quikchat Via CDN

<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css" />

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.

-
<div id="chat-container"></div>
+
<style>
+#chat-container {width: 100%; height: 50vh;}  /* use any width / height as appropriate for your app */
+</style>
+<div id="chat-container"></div>
 

Initialize quikchat in your JavaScript code by providing the container element and a callback function for message events:

See /examples for full working code.

chat = new quikchat(
       "#chat-container",   // this can be a css selector such as "#chat-container" or DOM element
       {
-      theme: 'quikchat-theme-light', // settheme see quikchat.css
+      theme: 'quikchat-theme-light', // set theme, see quikchat.css
       (chat, msg) => { // this callback triggered when user hits the Send
             // messages are not automatically echoed.
             // allows filtering / other processing of the message before posting.