{"id":25300118,"url":"https://github.com/deftio/quikchat","last_synced_at":"2026-05-04T06:03:48.256Z","repository":{"id":249228900,"uuid":"830836290","full_name":"deftio/quikchat","owner":"deftio","description":"Simple purejs chat component for LLMs.","archived":false,"fork":false,"pushed_at":"2025-08-07T00:17:35.000Z","size":752,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-07T02:28:36.330Z","etag":null,"topics":["chat","chat-component","chat-history","chatbot","chatgpt","esm","fastapi","fastapi-chatgpt","llms","lmstudio","nodejs-chat","ollama-client","umd","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://deftio.github.io/quikchat/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deftio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-19T05:28:31.000Z","updated_at":"2025-08-07T00:17:38.000Z","dependencies_parsed_at":"2025-01-24T01:26:01.670Z","dependency_job_id":"8cba9ad0-3b07-4e00-aee1-9efa9d79b66a","html_url":"https://github.com/deftio/quikchat","commit_stats":null,"previous_names":["deftio/quikchat"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/deftio/quikchat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikchat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikchat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikchat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikchat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deftio","download_url":"https://codeload.github.com/deftio/quikchat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fquikchat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281397336,"owners_count":26493908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chat-component","chat-history","chatbot","chatgpt","esm","fastapi","fastapi-chatgpt","llms","lmstudio","nodejs-chat","ollama-client","umd","vanilla-javascript","vanilla-js"],"created_at":"2025-02-13T05:38:27.653Z","updated_at":"2026-05-04T06:03:48.243Z","avatar_url":"https://github.com/deftio.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License](https://img.shields.io/badge/License-BSD%202--Clause-blue.svg)](https://opensource.org/licenses/BSD-2-Clause)\n[![NPM version](https://img.shields.io/npm/v/quikchat.svg?style=flat-square)](https://www.npmjs.com/package/quikchat)\n![CI](https://github.com/deftio/quikchat/actions/workflows/ci.yml/badge.svg)\n\n# QuikChat\n\nA lightweight, zero-dependency JavaScript chat widget, with history save/restore, multiple instance support, and several other goodies. Works with any framework — React, Vue, Svelte, Angular, Solid — or none at all. Connect it to any LLM, WebSocket, or message source with plain `fetch()`.  \n\n[Live Demo \u0026 Documentation](https://deftio.github.io/quikchat/site/)\n\n[![QuikChat screenshot](site/quikchat-screenshot.png)](https://deftio.github.io/quikchat/site/)\n\n```html\n\u003cscript src=\"https://unpkg.com/quikchat\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/quikchat/dist/quikchat.css\" /\u003e\n```\n\n```javascript\nconst chat = new quikchat('#chat', async (chat, msg) =\u003e {\n    chat.messageAddNew(msg, 'me', 'right', 'user');\n\n    // Stream a response from any LLM\n    const id = chat.messageAddTypingIndicator('bot');\n    const response = await fetch('http://localhost:11434/api/chat', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n            model: 'llama3.1',\n            messages: chat.historyGet(),   // full conversation context\n            stream: true\n        })\n    });\n\n    const reader = response.body.getReader();\n    let first = true;\n    while (true) {\n        const { value, done } = await reader.read();\n        if (done) break;\n        const token = JSON.parse(new TextDecoder().decode(value).trim()).message.content;\n        if (first) { chat.messageReplaceContent(id, token); first = false; }\n        else       { chat.messageAppendContent(id, token); }\n    }\n});\n```\n\nThat's a working streaming LLM chat in one file — no bundler, no framework, no SDK.\n\n## Features\n\n- **LLM-ready** — `historyGet()` returns `{ role, content }` objects compatible with OpenAI, Ollama, Mistral, and Claude APIs\n- **Streaming built in** — `messageAddNew()` → `messageAppendContent()` for token-by-token display\n- **Typing indicator** — animated \"...\" dots that auto-clear when streaming begins\n- **Markdown support** — three tiers: base (no markdown), `-md` (basic markdown via [quikdown](https://github.com/deftio/quikdown)), `-md-full` (syntax highlighting, math, diagrams, maps — loaded on demand from CDN)\n- **HTML sanitization** — built-in XSS protection or plug in your own sanitizer\n- **Themeable** — 11 built-in CSS themes (light, dark, blue, warm, midnight, ocean, modern, glass, gradient, minimal, debug) or write your own\n- **Multi-user** — multiple users per chat, multiple independent chats per page\n- **Message visibility \u0026 tagging** — hide system prompts and tool-call results from the UI while keeping them in history for LLM context\n- **History export / import** — save and restore complete chat sessions (`historyExport()` / `historyImport()`)\n- **RTL support** — `setDirection('rtl')` for Arabic, Hebrew, and other right-to-left languages\n- **Event callbacks** — hooks for message add, append, replace, and delete events\n- **Timestamps** — optional per-message timestamps (show/hide)\n- **Zero runtime dependencies** — ~5 KB gzipped (base), ~9 KB with markdown, ~14 KB full\n- **Any environment** — works with CDN, npm, or local files; UMD, ESM, and CJS builds included\n- **Responsive** — fills its parent container and resizes automatically\n- **Accessible** — ARIA roles and labels on all interactive elements\n\n## Quick Start\n\n### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/quikchat\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/quikchat/dist/quikchat.css\" /\u003e\n```\n\n### npm\n\n```bash\nnpm install quikchat\n```\n\n```javascript\nimport quikchat from 'quikchat';\n```\n\n### With Markdown\n\n```html\n\u003c!-- Basic markdown (bold, italic, code, tables, lists) — ~9 KB gzip --\u003e\n\u003cscript src=\"https://unpkg.com/quikchat/dist/quikchat-md.umd.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Full markdown (+ syntax highlighting, math, diagrams, maps) — ~14 KB gzip --\u003e\n\u003cscript src=\"https://unpkg.com/quikchat/dist/quikchat-md-full.umd.min.js\"\u003e\u003c/script\u003e\n\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/quikchat/dist/quikchat.css\" /\u003e\n```\n\nThe `-md-full` build uses [quikdown](https://github.com/deftio/quikdown)'s editor as a rendering engine. When your LLM returns a fenced code block with a language tag, highlight.js loads from CDN automatically. Same for math (MathJax), diagrams (Mermaid), and maps (Leaflet) — each loads on demand the first time it's encountered.\n\nSame API across all three builds — just pick your script tag.\n\n## Usage\n\n```javascript\nconst chat = new quikchat(\n    '#chat-container',           // CSS selector or DOM element\n    (chat, msg) =\u003e {             // onSend callback\n        chat.messageAddNew(msg, 'me', 'right');\n    },\n    {\n        theme: 'quikchat-theme-light',\n        titleArea: { title: 'My Chat', align: 'left', show: true },\n    }\n);\n\n// Add messages programmatically\nchat.messageAddNew('Hello!', 'Alice', 'left', 'user');\nchat.messageAddNew('Hi there!', 'Bot', 'left', 'assistant');\nchat.messageAddNew('System notice', 'system', 'center', 'system');\n\n// Streaming pattern\nconst id = chat.messageAddTypingIndicator('bot');     // show \"...\" dots\nchat.messageReplaceContent(id, firstToken);            // first token clears dots\nchat.messageAppendContent(id, nextToken);              // append subsequent tokens\n\n// Disable input while bot is responding\nchat.inputAreaSetEnabled(false);\nchat.inputAreaSetButtonText('Thinking...');\n// ... after response completes ...\nchat.inputAreaSetEnabled(true);\nchat.inputAreaSetButtonText('Send');\n\n// History is LLM-API compatible\nconst history = chat.historyGet();  // [{ role: \"user\", content: \"...\" }, ...]\n```\n\n## Message Formatter \u0026 Sanitization\n\nProcess message content before display — render markdown, sanitize HTML, or both:\n\n```javascript\nconst chat = new quikchat('#chat', onSend, {\n    // Sanitize user input (true = escape HTML entities, or pass a function)\n    sanitize: true,\n\n    // Format content (e.g., markdown → HTML)\n    messageFormatter: (content) =\u003e myMarkdownParser(content),\n});\n\n// Change at runtime\nchat.setMessageFormatter((content) =\u003e marked.parse(content));\nchat.setSanitize((content) =\u003e DOMPurify.sanitize(content));\n```\n\nThe pipeline is: **sanitize → format → display**. Sanitize cleans untrusted input; the formatter's output is trusted.\n\nThe `-md` and `-md-full` builds pre-wire [quikdown](https://github.com/deftio/quikdown) as the formatter — no configuration needed. The `-md-full` build additionally renders syntax-highlighted code, math equations, Mermaid diagrams, and maps via dynamic CDN loading.\n\n## Theming\n\nThemes are pure CSS — colors, borders, and shadows only. The base CSS handles all layout.\n\n```javascript\n// Built-in themes\nchat.changeTheme('quikchat-theme-light');\nchat.changeTheme('quikchat-theme-dark');\nchat.changeTheme('quikchat-theme-modern');   // chat-bubble style\n\n// Or write your own — just color overrides\n```\n\n```css\n.my-theme {\n    background-color: #f9f9f9;\n    border: 1px solid #ccc;\n    border-radius: 10px;\n}\n.my-theme .quikchat-title-area { color: #333; }\n.my-theme .quikchat-messages-area { background-color: #fff; color: #333; }\n.my-theme .quikchat-input-send-btn { background-color: #4caf50; color: white; border: none; border-radius: 4px; }\n```\n\nThe **modern bubble theme** uses alignment classes (`quikchat-align-left`, `quikchat-align-right`) to position messages as chat bubbles with colored backgrounds — left-aligned messages appear as grey bubbles, right-aligned as blue.\n\nStyle messages by role with CSS hooks: `.quikchat-role-user`, `.quikchat-role-assistant`, `.quikchat-role-system`, `.quikchat-role-tool`.\n\n## Documentation\n\n| Guide | Description |\n|---|---|\n| [Getting Started](docs/getting-started.md) | Installation, minimal example, constructor options |\n| [API Reference](docs/api-reference.md) | Every public method, property, and return value |\n| [Streaming](docs/streaming.md) | Token-by-token LLM response display |\n| [Multi-User Chat](docs/multi-user-chat.md) | Multiple users, dual instances, message routing |\n| [LLM Integration](docs/llm-integration.md) | Ollama, OpenAI, LM Studio, tool calls, conversational memory |\n| [Theming](docs/theming.md) | Custom themes, CSS architecture, built-in themes |\n| [CSS Architecture](docs/css-architecture.md) | Base vs theme separation, ARIA accessibility |\n| [Recipes](docs/recipes.md) | Common patterns: log viewer, tool-call visibility, session persistence, RTL |\n\n## Demo \u0026 Examples\n\n[Live Demo](https://deftio.github.io/quikchat/site/) | [Examples](https://deftio.github.io/quikchat/examples/)\n\nExamples include: basic UMD/ESM usage, dual chatrooms, markdown rendering ([basic](./examples/example_markdown.html) and [full with syntax highlighting + math + diagrams](./examples/example_md_full.html)), LLM integrations (Ollama, OpenAI, LM Studio), [LLM tool-calling editor](./examples/example_tool_editor.html), tool-call visibility, session save/restore, RTL/i18n, log viewer, event timeline, framework integration (React, Vue, Solid, Svelte, Angular), and backend examples ([FastAPI](./examples/fastapi_llm/), [Express](./examples/npm_express/)).\n\n## Build Variants\n\n| Build | What you get | Network |\n|---|---|---|\n| **Base** (`quikchat.umd.min.js`) | Chat widget, zero deps | None |\n| **Markdown** (`quikchat-md.umd.min.js`) | + bold, italic, code, tables, lists | None |\n| **Full** (`quikchat-md-full.umd.min.js`) | + syntax highlighting, math, diagrams, maps | CDN on demand |\n| **CSS** (`quikchat.css`) | All 11 themes | None |\n\nAll builds are also available in ESM and CJS formats with sourcemaps. See the [downloads page](https://deftio.github.io/quikchat/site/downloads.html) for exact sizes, SRI hashes, and CDN links.\n\nThe `-md` builds bundle [quikdown](https://github.com/deftio/quikdown). The `-md-full` build post-processes fence blocks with dynamically loaded renderers (highlight.js, MathJax, Mermaid, Leaflet). The base builds have zero runtime dependencies.\n\n## Building from Source\n\n```bash\nnpm install\nnpm run build    # lint, build all formats, report bundle sizes\nnpm test         # jest unit tests with coverage\n```\n\nBuild-time tooling (rollup, babel, eslint, jest) is all in devDependencies — zero runtime dependencies.\n\n## Testing\n\n```bash\nnpm test                # unit tests (jest, 100% coverage)\nnpm run test:e2e        # browser tests (playwright)\n```\n\n## Development\n\n```bash\nnpm run feature my-feature-name        # creates feature/my-feature-name, bumps patch\nnpm run feature my-feature-name minor  # bumps minor\n```\n\nA pre-commit hook runs lint and tests automatically before each commit.\n\nSee [RELEASE-PROCEDURE.md](RELEASE-PROCEDURE.md) for the full release workflow.\n\n## License\n\nBSD-2-Clause\n\n## Home Page\n\n[github.com/deftio/quikchat](https://github.com/deftio/quikchat)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fquikchat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeftio%2Fquikchat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fquikchat/lists"}