20 |
21 |
sBot Conversations
22 |
Here we will add links/buttons to start different types of conversations.
23 |
Currently there is only one conversation path and it has automatically started on the right.
24 |
25 |
26 |
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget-loader/loader.js:
--------------------------------------------------------------------------------
1 | (() => {
2 |
3 | const script = document.currentScript;
4 |
5 | const loadWidget = () => {
6 |
7 | const widget= document.createElement("div");
8 |
9 | const widgetStyle = widget.style;
10 | widgetStyle.display = "none";
11 | widgetStyle.boxSizing = "border-box";
12 | widgetStyle.width = "400px";
13 | widgetStyle.height = "647px";
14 | widgetStyle.position = "absolute";
15 | widgetStyle.bottom = "40px";
16 | widgetStyle.right = "40px";
17 |
18 | const iframe = document.createElement("iframe");
19 |
20 | const iframeStyle = iframe.style;
21 | iframeStyle.boxSizing = "borderBox";
22 | iframeStyle.position = "absolute";
23 | iframeStyle.right = 0;
24 | iframeStyle.bottom = 0;
25 | iframeStyle.width = "100%";
26 | iframeStyle.height = "100%";
27 | iframeStyle.border = 0;
28 | iframeStyle.margin = 0;
29 | iframeStyle.padding = 0;
30 | iframeStyle.width = "500px";
31 |
32 | widget.appendChild(iframe);
33 |
34 | iframe.addEventListener("load", () => widgetStyle.display = "block" );
35 |
36 | const widgetUrl = `http://localhost:3000`;
37 |
38 | iframe.src = widgetUrl;
39 |
40 | document.body.appendChild(widget);
41 |
42 | }
43 |
44 | if ( document.readyState === "complete" ) {
45 | loadWidget();
46 | } else {
47 | document.addEventListener("readystatechange", () => {
48 | if ( document.readyState === "complete" ) {
49 | loadWidget();
50 | }
51 | });
52 | }
53 |
54 | })();
55 |
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-widget-loader",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "dependencies": {
7 | "serve": "^11.3.2"
8 | },
9 | "scripts": {
10 | "start": "serve ./"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget/README.md:
--------------------------------------------------------------------------------
1 | # sBot Chat Widget
2 |
3 | Derived from the chatscope example chat widget.
4 | See in samples folder and on GitHub at [chatscope/example-chat-widget](https://github.com/chatscope/example-chat-widget)
5 |
6 | ## Prerequisites
7 | - NodeJS
8 | - Yarn
9 |
10 | ## How to run?
11 | ### `npm i`
12 |
13 | Installs the packages
14 |
15 | ### `yarn start`
16 |
17 | ### Running with only npm
18 |
19 | ```bash
20 | npm update
21 | npm audit fix --force
22 | npm start
23 | ```
24 |
25 | ```npm update``` will update dependancies and will change package.json and so on.
26 |
27 | Tested on node 19.3.
28 |
29 | Runs the app in the development mode.
30 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
31 |
32 | The page will reload if you make edits.
33 | You will also see any lint errors in the console.
34 |
35 | This connects to the python based backend in the backend folder so that also needs to be running.
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example-chat-widget",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@chatscope/chat-ui-kit-react": "^1.8.1",
7 | "@chatscope/chat-ui-kit-styles": "^1.2.0",
8 | "@testing-library/jest-dom": "^5.11.4",
9 | "@testing-library/react": "^11.1.0",
10 | "@testing-library/user-event": "^12.1.10",
11 | "nanoid": "^3.1.20",
12 | "react": "^16.0.1",
13 | "react-dom": "^16.0.1",
14 | "react-scripts": "4.0.2",
15 | "web-vitals": "^1.0.1"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "build": "react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject"
22 | },
23 | "eslintConfig": {
24 | "extends": [
25 | "react-app",
26 | "react-app/jest"
27 | ]
28 | },
29 | "browserslist": {
30 | "production": [
31 | ">0.2%",
32 | "not dead",
33 | "not op_mini all"
34 | ],
35 | "development": [
36 | "last 1 chrome version",
37 | "last 1 firefox version",
38 | "last 1 safari version"
39 | ]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WaitThatShouldntWork/Infer/e6dc602d3c2eeeff172f394390218a71c7e3e8af/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget/public/favicon.ico
--------------------------------------------------------------------------------
/financialhealthcheckScottLogic/financial-bot/frontend/chat-widget/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | App is loading...
11 |
--------------------------------------------------------------------------------
/frontend/src/app.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | align-items: center;
3 | display: flex;
4 | flex-direction: column;
5 | height: 100%;
6 | justify-content: center;
7 | }
8 |
9 | .title {
10 | margin: 1rem 0 0 0;
11 | }
12 |
--------------------------------------------------------------------------------
/frontend/src/app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './app.module.css';
3 | import { Chat } from './components/chat';
4 | import { Input } from './components/input';
5 | import { useMessages } from './useMessages';
6 |
7 | export const App = () => {
8 | const { sendMessage, messages, waiting } = useMessages();
9 |
10 | return (
11 |