From f6a3e30da2da29c3f7a2a7ab28a931dd76cc11d8 Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Sat, 28 Oct 2023 11:42:58 -0500 Subject: [PATCH] feat(sdk): Implement Chitchatter SDK (#183) * feat(sdk): render iframe in chat-room component * fix(ci): install optional dependencies * feat(sdk): allow subset of attributes * feat(sdk): accept root-domain attribute * feat(sdk): accept custom room name or use sane default * feat(sdk): set allowed features * feat(sdk): add sdk instructions to embed code dialog * fix(sdk): use dynamic rootUrl * fix(sdk): use static defaultRoot * feat(sdk): send config from SDK to chat * fix(sdk): expire poller * fix(sdk): pass parent domain to iframe via query param * refactor(sdk): type message event data * feat(sdk): send user id to chat frame * feat(sdk): handle some attribute updates * chore(package): add build:sdk:watch script * refactor(sdk): move more code to updateIframeAttributes * feat(sdk): support changing rooms * feat(sdk): support more user settings * docs(sdk): add SDK section to README * feat(sdk): render root-url in embed code if necessary * refactor(sdk): use map for chat room attributes * fix(sdk): unbind event listener when chat-room is disconnected * fix(sdk): properly tear down receipt listener * fix(sdk): send config when frame reloads * feat(sdk): listen for config updates * feat(sdk): request config from sdk instead of sending it repeatedly * refactor(sdk): use type guard for config message * fix(sdk): use settings from SDK when there is no preexisting persisted data * fix(sdk): observe all iframe attributes * refactor(sdk): simplify bootup logic * feat(sdk): improve embed code display --- .github/workflows/ci.yml | 2 +- .gitignore | 1 + README.md | 27 + nodemon.json | 4 + package-lock.json | 6292 ++++++++++++++++++++++- package.json | 7 +- sdk/sdk.ts | 176 + src/Bootstrap.tsx | 146 +- src/components/Shell/Drawer.tsx | 4 +- src/config/iframeFeatureAllowList.ts | 6 + src/config/routes.ts | 4 + src/contexts/SettingsContext.ts | 4 +- src/models/sdk.ts | 57 + src/models/settings.ts | 13 +- src/models/shell.ts | 2 + src/pages/Home/EmbedCodeDialog.tsx | 158 +- src/pages/Home/Home.tsx | 5 +- src/test-utils/stubs/settingsContext.ts | 4 +- 18 files changed, 6782 insertions(+), 130 deletions(-) create mode 100644 nodemon.json create mode 100644 sdk/sdk.ts create mode 100644 src/config/iframeFeatureAllowList.ts create mode 100644 src/models/sdk.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 72b2ece..2b2e6bc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/setup-node@v1 with: node-version: 18 - - run: npm ci --no-optional + - run: npm ci - run: npm test - name: 'Build web app artifacts' diff --git a/.gitignore b/.gitignore index d94b699..c831cc8 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ .env.development.local .env.test.local .env.production.local +.parcel-cache npm-debug.log* yarn-debug.log* diff --git a/README.md b/README.md index 0922ad4..5642284 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,33 @@ See the full ticket backlog [here](https://github.com/users/jeremyckahn/projects - Mirror: https://chitchatter.vercel.app/ (note that peers cannot connect across domains) - Staging: https://chitchatter-git-develop-jeremyckahn.vercel.app/ +## SDK + +You can use the official Chitchatter SDK to embed the app as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) called ``. + +```html + + + +``` + +The `` component supports the following optional attributes: + +- `room`: The name of the Chitchatter room the user should join. The default value is the URL of the embedding page. +- `user-name`: The friendly name of the user (which they can change). +- `user-id`: The static ID of the user. The default value is a random UUID. +- `root-url`: The URL of the Chitchatter instance to use. The default value is `https://chitchatter.im/`. +- `color-mode`: `light` or `dark`. The default value is `dark`. +- `play-message-sound`: Whether or not to play a sound when a user receives a message while the window is not in focus. The default value is `false`. + +As well as the following [standard `