1.1.5 : added backend examples for nodejs and python

.gitignore

@@ -23,3 +23,5 @@ node_modules/
 .env.development.local
 .env.test.local
 .env.production.local
+
+.DS_Store

coverage/index.html

@@ -101,7 +101,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-11T22:28:21.225Z
+                at 2024-08-25T08:26:33.836Z
             </div>
         <script src="prettify.js"></script>
         <script>

coverage/lcov-report/index.html

@@ -101,7 +101,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-11T22:28:21.233Z
+                at 2024-08-25T08:26:33.844Z
             </div>
         <script src="prettify.js"></script>
         <script>

coverage/lcov-report/quikchat.js.html

@@ -1432,7 +1432,7 @@ <h1><a href="index.html">All files</a> quikchat.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-11T22:28:21.233Z
+                at 2024-08-25T08:26:33.844Z
             </div>
         <script src="prettify.js"></script>
         <script>

coverage/quikchat.js.html

@@ -1432,7 +1432,7 @@ <h1><a href="index.html">All files</a> quikchat.js</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-11T22:28:21.225Z
+                at 2024-08-25T08:26:33.836Z
             </div>
         <script src="prettify.js"></script>
         <script>

dev/todo.md

@@ -2,40 +2,82 @@
 
 * show/hide timestamps
 * add support for right to left languages by making css with [send] on left
-* add support for inline "user" icon with chat message instead of on top
+* add support for inline "user" icon with chat message instead of on top => [user][message]
 * example Anthropic
 * example Mistral
 * example React Component
 * test suite coverage to 90%
-* add travis ci / build passing badge 
 * clean up scroll to bottom behavior (in progress)
 * add stats api (num messages, users, total chars written etc)
-* add user mgmt
+* add user mgmt  ? make wrapper class
 * add callbacks : onMessageAppend, onMessageReplace
 
 ==========
+1.1.5
 
-* (done 1.1.3) minified css (/dist/quikchat.min.css)
-* (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) add ci via github actions
+* added  examples for nodejs and python backends including streaming
 
-* (done 1.1.2) updated styles and docs
-* (done 1.1.2) add jest test suite
-* (done 1.1.2) add npm and version badges in readme
-* (done 1.1.2) added fixes in github pages for demos
+1.1.4
 
-* (done 1.1.1) move callback from {meta} to 2nd param of constructor
-* (done 1.1.1) add loremIpsum Generator
-* (done 1.1.1) addedfix alternate light and dark to use css nth-child, added messagesAreaAlternateColors()
+* added  travisci build support
 
-* (done 1.0.4) make robust the add/remove/update message (harden id scheme for messages)
-* (done 1.0.4) example ChatGPT
+1.1.3
 
-* (done 1.0.3) add center div styling (addMessage(content, user, center))
-* (done 1.0.2) CSS: add functions for light, dark, debug styles to be built-in
+* added onMessageNew callback
+* minified css (/dist/quikchat.min.css)
+* moved all border-radius to themes
+* updated docs / index.html
+* updated readme generator from npx to /node-modules (still using docbat)
+* add ci via github actions
+* added build passing badge based on github actions
 
 
+1.1.2 
 
+* updated styles and docs
+* add jest test suite
+* add npm and version badges in readme
+* added fixes in github pages for demos
 
+1.1.1 
+
+* move callback from {meta} to 2nd param of constructor
+* add loremIpsum Generator
+* addedfix alternate light and dark to use css nth-child, added messagesAreaAlternateColors()
+
+1.0.4
+
+* make robust the add/remove/update message (harden id scheme for messages)
+* example ChatGPT
+
+* add center div styling (addMessage(content, user, center))
+* CSS: add functions for light, dark, debug styles to be built-in
+
+## some icons
+
+robot icon
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect x="18" y="20" width="28" height="28" rx="6" ry="6" stroke="#000" stroke-width="3" fill="none"/>
+  <circle cx="26" cy="30" r="3" fill="#000"/>
+  <circle cx="38" cy="30" r="3" fill="#000"/>
+  <rect x="30" y="14" width="4" height="6" fill="#000"/>
+  <path d="M26 38 Q32 44 38 38" stroke="#000" stroke-width="2" fill="none"/>
+  <rect x="14" y="24" width="4" height="10" rx="2" ry="2" stroke="#000" stroke-width="3" fill="none"/>
+  <rect x="46" y="24" width="4" height="10" rx="2" ry="2" stroke="#000" stroke-width="3" fill="none"/>
+</svg>
+```
+
+person icon
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <circle cx="32" cy="24" r="12" stroke="#000" stroke-width="3" fill="none"/>
+  <path d="M16 50 Q32 38 48 50" stroke="#000" stroke-width="3" fill="none"/>
+  <circle cx="28" cy="22" r="2" fill="#000"/>
+  <circle cx="36" cy="22" r="2" fill="#000"/>
+  <path d="M30 28 Q32 30 34 28" stroke="#000" stroke-width="2" fill="none"/>
+</svg>
+
+```

examples/fastapi_llm/.env.example

@@ -0,0 +1,2 @@
+OPENAI_BASE_URL=https://api.openai.com/v1
+OPENAI_API_KEY=your_openai_api_key_here

examples/fastapi_llm/README.md

@@ -0,0 +1,82 @@
+# FastAPI Quikchat Starter
+
+This project is an example of integrating the [QuikChatJS](https://github.com/deftio/quikchat) widget with a Python FastAPI webbackend. The application includes endpoints for handling both completions and streaming completions from an API like OpenAI's GPT, as well as a chat widget that can be embedded in other applications.
+
+## Project Structure
+
+```text
+/examples/FastApi-Quikchat-Starter
+|--- app.py                      # Main FastAPI application
+|--- static/
+|   |-- index.html              # Main chat page
+|   |-- widget.html             # Embeddable chat widget page
+|   |-- quikchat.css            # QuikChatJS CSS
+|   |-- quikchat.umd.min.js     # QuikChatJS JavaScript
+|-- .env                        # Environment variables
+|-- README.md                   # This documentation
+|-- requirements.txt            # Python dependencies
+```
+
+## Setup
+
+### Prerequisites
+
+- Python 3.10+
+- [pip](https://pip.pypa.io/en/stable/)
+
+### Installation
+
+
+1. **Install dependencies**:
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+2. **Set up environment variables**:
+
+   Create a `.env` file in the root of the project with the following content:
+
+   ```plaintext
+   OPENAI_BASE_URL=https://api.openai.com/v1
+   OPENAI_API_KEY=your_openai_api_key_here
+   ```
+
+   Replace `your_openai_api_key_here` with your actual OpenAI API key.
+
+### Running the Application
+
+To start the FastAPI server, run:
+
+```bash
+python main.py
+```
+
+The server will start on `http://127.0.0.1:8000`.
+
+Then go to your browser and open up http://127.0.0.1:8000.
+
+
+### Endpoints
+
+- **`/`**: Serves the main chat page.
+- **`/widget`**: Serves quikchat as an embeddable chat widget page.
+- **`/api/completion`**: POST endpoint for fetching a completion response.
+- **`/api/completion-history`**: POST endpoint for fetching a completion response using full message history.
+- **`/api/streaming-completion`**: POST endpoint for streaming a completion response.
+- **`/api/streaming-completion-history`**: POST endpoint for streaming a completion response with full message history.
+
+### Example Usage
+
+- **Main Chat Interface**: Access the main chat interface by navigating to `http://127.0.0.1:8000/` in your browser.
+
+- **Embeddable Widget**: Access the embeddable widget by navigating to `http://127.0.0.1:8000/widget`.
+
+### Development
+
+While the server is running, any changes you make to the `main.py` or static files will be automatically reloaded.
+
+### Notes
+
+- The example is designed to demonstrate how to integrate the QuikChatJS widget with FastAPI and an LLM API. Customize the code as needed for your specific use case.
+- Also this folder is designed to be stand-alone.  One should be able to copy it and run it locally.  To achieve this quikchat.umd.min.js and quikchat.min.css are served from a locally copy inside the static folder in this directory.