Merge pull request #1155 from dimagi/sk/component

chat component

.github/workflows/build_components.yml

@@ -0,0 +1,40 @@
+name: Build Components
+on:
+  pull_request:
+    paths:
+      - 'components/**'
+  push:
+    branches:
+      - main
+    paths:
+      - 'components/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Disable AppArmor
+        # Ubuntu >= 23 has AppArmor enabled by default, which breaks Puppeteer.
+        # See https://github.com/puppeteer/puppeteer/issues/12818 "No usable sandbox!"
+        # this is taken from the solution used in Puppeteer's own CI: https://github.com/puppeteer/puppeteer/pull/13196
+        # The alternative is to pin Ubuntu 22 or to use aa-exec to disable AppArmor for commands that need Puppeteer.
+        # This is also suggested by Chromium https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md
+        run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns
+        shell: bash
+      - name: Install dependencies
+        run: npm install
+        working-directory: ./components/chat_widget
+      - name: Run tests
+        run: npm run test
+        working-directory: ./components/chat_widget
+      - name: Build
+        run: npm run build
+        working-directory: ./components/chat_widget

components/chat_widget/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

components/chat_widget/.gitignore

@@ -0,0 +1,26 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

components/chat_widget/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

components/chat_widget/README.md

@@ -0,0 +1,62 @@
+# Open Chat Studio Chat Component
+
+A Web Component built with [Stencil](https://stenciljs.com/) that allows you to add a chat dialog to a web page
+that is connected to a public Open Chat Studio (OCS) bot.
+
+## Getting Started
+
+To try this component out, run:
+
+```bash
+npm install
+npm start
+```
+
+Now load the localhost URL shown in the console in your browser.
+
+Note that this requires you to have OCS running locally on port 8000. 
+You will also need to set the `boturl` property on the `open-chat-studio-widget` element to the URL of a bot you have
+running locally.
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+## Making Changes
+
+To make changes to the component, you can edit the files in the `src/components/open-chat-studio-widget` directory. You can
+also edit the `src/index.html` file to change the page that is loaded when you run `npm start`.
+
+### Styling
+
+The component uses [Tailwind CSS](https://tailwindcss.com/) with [DaisyUI](https://daisyui.com/) for styling.
+
+## Using this component
+
+There are three strategies we recommend for using web components built with Stencil.
+
+The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+Once you've set up your local npm account, can do this by running
+
+```
+npm publish
+```
+
+### Script tag
+
+- Put a script tag similar to this `<script type='module' src='https://unpkg.com/[email protected]/dist/open-chat-studio-widget.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc
+
+### Node Modules
+- Run `npm install open-chat-studio-widget --save`
+- Put a script tag similar to this `<script type='module' src='node_modules/open-chat-studio-widget/dist/open-chat-studio-widget.esm.js'></script>` in the head of your index.html
+- Then you can use the element anywhere in your template, JSX, html etc