@smarter.sh/ui-chat 0.2.14 → 0.3.0

package/README.md

@@ -14,6 +14,8 @@ This project is also suitable for all front-end cross-platform projects. For exa
 
 ## Usage
 
+Generic usage of the published npm package is as follows
+
 ```console
 npm install @smarter.sh/ui-chat
 ```
@@ -23,13 +25,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { SmarterChat } from "@smarter.sh/ui-chat";
 
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById("smarter-sh-v1-ui-chat-root");
 const root = ReactDOM.createRoot(rootElement);
-const apiUrl = rootElement.getAttribute("smarter-chatbot-api-url");
+const apiUrl = rootElement.getAttribute("smarter-chatbot-api-url") || "http://localhost:9357/api/v1/chatbots/1/";
 const toggleMetadata = rootElement.getAttribute("smarter-toggle-metadata") === "true";
 const csrfCookieName = rootElement.getAttribute("smarter-csrf-cookie-name") || "csrftoken";
 const sessionCookieName = rootElement.getAttribute("smarter-session-cookie-name") || "session_key";
-const cookieDomain = rootElement.getAttribute("smarter-cookie-domain") || "platform.smarter.sh";
+const cookieDomain = rootElement.getAttribute("smarter-cookie-domain") || "localhost";
 const authSessionCookieName = rootElement.getAttribute("django-session-cookie-name") || "sessionid";
 const csrftoken = rootElement.getAttribute("django-csrftoken");
 const debugMode = rootElement.getAttribute("smarter-debug-mode") === "true";
@@ -56,9 +58,22 @@ root.render(
 );
 ```
 
+### Build from source
+
+To build and deploy for use in the Smarter Web Console Prompt Engineer Workbench, do the following.
+This assumes that you have already built your AWS cloud infrastructure using [github.com/smarter-sh/smarter-infrastructure](https://github.com/smarter-sh/smarter-infrastructure) and that a CDN exists at cdn.platform.example.com.
+
+```console
+export ROOT_DOMAIN=example.com
+export PLATFORM_SUBDOMAIN=platform
+npm install
+make build
+make release
+```
+
 ## Integrate to an existing web page
 
-We integrate this react component to the [Smarter developer workbench](https://platform.smarter.sh/) using this small repo, [github.com/smarter-sh/smarter-workbench](https://github.com/smarter-sh/smarter-workbench). This methodology provides a layer of separation between Django and react.js, which keeps things simple. smarter-workbench substantially consists of the following three files:
+We integrate this react component to the [Smarter developer workbench](https://platform.smarter.sh/) using this small repo, [github.com/smarter-sh/web-integration-example](https://github.com/smarter-sh/web-integration-example). This methodology provides a layer of separation between Django and react.js, which keeps things simple. smarter-workbench substantially consists of the following three files:
 
 - [main.jsx](https://github.com/smarter-sh/smarter-workbench/blob/main/src/main.jsx): a 40-line react.js mini app for configuring this npm component with a Smarter Api url and any initialization settings we choose to include.
 - [app-loader.js](https://github.com/smarter-sh/smarter-workbench/blob/main/src/public/app-loader.js): a small js script that injects the react.js build assets into your DOM, initiating the React boot-up process.
@@ -80,6 +95,40 @@ Meanwhile, Django adds a pair of DOM elements like the following example, where
 
 SmarterChat is created with [React](https://react.dev/) leveraging [@chatscope/chat-ui-kit-react](https://www.npmjs.com/package/@chatscope/chat-ui-kit-react)
 
+### Setup
+
+1. Build your component
+
+   ```console
+   npm install -g yalc
+   npm run build
+   yalc publish
+   ```
+
+2. Create a separate test React app (outside your library folder)
+
+```console
+npx create-react-app smarter-chat-test
+cd smarter-chat-test
+```
+
+3. Link your local package to the test app. This is a 1-time operation.
+
+```console
+yalc add @smarter.sh/ui-chat
+npm install # verifies peer dependencies
+```
+
+4. In the test app, import and use your component as you described.
+
+5. Start the test app
+
+```console
+yalc update @smarter.sh/ui-chat
+npm run build
+npm start
+```
+
 ### Backend integration
 
 See [Getting Started with the Smarter Chatbot Api](./doc/CHATBOT_API.md)