🪁 K1te chat frontend

Docs

Demo

This project includes kite-chat web component, which can be used independently with any 3rd party backend, 🪁 K1te chat client and protocol driver to communicate with the existing backend, and documentation for both these modules as a static site (Astro).

Web component is built using LitElement with TypeScript and Tailwind CSS.

Project is generated from the lit-starter-ts template in the main Lit repo. Issues and PRs for this template should be filed in that repo.

Setup

Install dependencies:

npm i

This project uses npm workspaces and typescript project references.

You need to run npm run compile before you start working on the project in your IDE to prebuild type definitions for incremental builds, otherwise you may experience typescript module resolution errors.

Build

To build the packages and docs run:

npm run build

To build only the component, run:

npm run build -w @pragmasoft-ukraine/kite-chat-component

More info about component build

To build only the chat client, run:

npm run build -w @pragmasoft-ukraine/kite-chat

More info about protocol driver build

To build only the documentation site, run:

npm run build -w @pragmasoft-ukraine/kite-chat-docs

More info about docs build

Testing

Tests can be run with the test script, which will run test command in packages if it exist:

npm test

To test only the component, run:

npm run test -w @pragmasoft-ukraine/kite-chat-component

More info about component testing

To test only the chat client, run:

npm run test -w @pragmasoft-ukraine/kite-chat

More info about driver testing

Dev Server

The default start command will run docs locally:

npm run start

More info about docs dev server

To run the component dev server:

npm run start -w @pragmasoft-ukraine/kite-chat-component

More info about component dev server

To run the chat client dev server:

npm run start -w @pragmasoft-ukraine/kite-chat

More info about driver dev server

Editing

If you use VS Code, we highly recommend the lit-plugin extension, which enables some extremely useful features for lit-html templates:

• Syntax highlighting
• Type-checking
• Code completion
• Hover-over docs
• Jump to definition
• Linting
• Quick Fixes

The project is setup to recommend lit-plugin to VS Code users if they don't already have it installed.

Linting

Linting of TypeScript files is provided by ESLint and TypeScript ESLint. In addition, lit-analyzer is used to type-check and lint lit-html templates with the same engine and rules as lit-plugin.

The rules are mostly the recommended rules from each project, but some have been turned off to make LitElement usage easier. The recommended rules are pretty strict, so you may want to relax them by editing .eslintrc.json and tsconfig.json.

To lint the project run:

npm run lint

Formatting

Prettier is used for code formatting. It has been pre-configured according to the Lit's style. You can change this in .prettierrc.json.

Prettier has not been configured to run when committing files, but this can be added with Husky and and pretty-quick. See the prettier.io site for instructions.

CI/CD Workflow

This project utilizes GitHub Actions for Continuous Integration and Deployment. The workflow includes linting, testing, documentation builds, and npm package publishing.

Setup gh actions

1. GitHub Actions Secrets:

   • Create NPM_TOKEN secret with your npm token.
   • Ensure GITHUB_TOKEN secret is available for deployment.

2. Triggers:

   • Workflow triggers on main and test branch pushes.
   • Manual triggering is available in the Actions tab.

3. Dependencies:

   • Node.js v18 is used. Ensure compatible dependencies.

4. Artifact Uploads:

   • Documentation and package builds artifacts are uploaded.

5. Deployment:

   • Documentation auto-deploys to GitHub Pages.
   • npm packages auto-publish with version checks.

More information

See Get started on the documentation site for more information on how to jumpstart using the chat.