resolve #208: add nullable userId setting

README.md

@@ -355,12 +355,17 @@ A `TockTheme` can be used as a value of a `ThemeProvider` of [`emotion-theming`]
 The main source of configuration for the chatbot interface.
 Objects implementing this interface can be passed to `renderChat` or to `TockContext`.
 
-| Property name  | Type                    | Description                                          |
-|----------------|-------------------------|------------------------------------------------------|
-| `locale`       | `string?`               | Optional user language, as an *RFC 5646* code        |
-| `localStorage` | `LocalStorageSettings?` | Configuration for use of localStorage by the library |
-| `network`      | `NetworkSettings?`      | If `true`, disables any SSE connection attempt       |
-| `renderers`    | `RendererSettings?`     | Configuration for custom image and text renderers    |
+| Property name  | Type                    | Description                                                                                                           |
+|----------------|-------------------------|-----------------------------------------------------------------------------------------------------------------------|
+| `endpoint`     | `string`                | The URL of the web connector endpoint                                                                                 |
+| `userId`       | `(string\|null)?`       | Unique user ID. `null` means no clientside ID. `undefined` (default) generates and stores a UUID in the localStorage. |
+| `locale`       | `string?`               | Optional user language, as an *RFC 5646* code                                                                         |
+| `localStorage` | `LocalStorageSettings?` | Configuration for use of localStorage by the library                                                                  |
+| `network`      | `NetworkSettings?`      | If `true`, disables any SSE connection attempt                                                                        |
+| `renderers`    | `RendererSettings?`     | Configuration for custom image and text renderers                                                                     |
+
+> Note: disabling clientside ID is more secure, but requires setting a different [Web Security Mode](https://github.com/theopenconversationkit/tock/tree/master/bot/connector-web#web-security-modes)
+> in TOCK Studio.
 
 #### `LocalStorageSettings`
 

src/TockContext.tsx

@@ -29,7 +29,10 @@ const TockContext: (props: {
   const [state, dispatch] = useReducer(tockReducer, {
     quickReplies: [],
     messages: [],
-    userId: retrieveUserId(mergedSettings.localStorage.prefix),
+    userId:
+      mergedSettings.userId === undefined
+        ? retrieveUserId(mergedSettings.localStorage.prefix)
+        : mergedSettings.userId,
     loading: false,
     sseInitializing: false,
     metadata: {},

src/TockState.tsx

@@ -28,7 +28,7 @@ export const useTockDispatch: () => Dispatch<TockAction> = () => {
 export interface TockState {
   quickReplies: QuickReply[];
   messages: Message[];
-  userId: string;
+  userId: string | null;
   loading: boolean;
   sseInitializing: boolean;
   metadata: Record<string, string>;

src/components/Carousel/Carousel.tsx

@@ -177,7 +177,7 @@ const Carousel: (props: {
               aria-roledescription={
                 cardRef === undefined
                   ? undefined
-                  : accessibility?.carousel?.slideRoleDescription ?? 'Slide'
+                  : (accessibility?.carousel?.slideRoleDescription ?? 'Slide')
               }
             >
               {cloneElement(

src/components/Conversation/Conversation.tsx

@@ -44,7 +44,7 @@ const ConversationInnerContainer = styled.ul`
   ::-webkit-scrollbar {
     display: none;
   }
-`;  
+`;
 
 const ConversationItemLi = styled.li`
   width: 100%;

src/model/buttons.ts

@@ -5,10 +5,10 @@ export class QuickReply {
   imageUrl?: string;
 
   constructor(
-      label: string,
-      payload: string,
-      nlpText?: string,
-      imageUrl?: string,
+    label: string,
+    payload: string,
+    nlpText?: string,
+    imageUrl?: string,
   ) {
     this.label = label;
     this.payload = payload;
@@ -24,10 +24,10 @@ export class PostBackButton {
   style?: string;
 
   constructor(
-      label: string,
-      payload: string,
-      imageUrl?: string,
-      style?: string,
+    label: string,
+    payload: string,
+    imageUrl?: string,
+    style?: string,
   ) {
     this.label = label;
     this.payload = payload;
@@ -45,12 +45,12 @@ export class UrlButton {
   style?: string;
 
   constructor(
-      label: string,
-      url: string,
-      imageUrl?: string,
-      target?: string,
-      windowFeatures?: string,
-      style?: string,
+    label: string,
+    url: string,
+    imageUrl?: string,
+    target?: string,
+    windowFeatures?: string,
+    style?: string,
   ) {
     this.label = label;
     this.url = url;

src/network/TockEventSource.ts

@@ -67,8 +67,8 @@ export class TockEventSource {
    * @returns a promise that gets resolved when the connection is open
    * and gets rejected if the connection fails or this event source is closed
    */
-  open(endpoint: string, userId: string): Promise<void> {
-    const url = `${endpoint}/sse?userid=${userId}`;
+  open(endpoint: string, userId: string | null): Promise<void> {
+    const url = `${endpoint}/sse${userId == null ? '' : `?userid=${userId}`}`;
     this.onStateChange(EventSource.CONNECTING);
     this.currentUrl = url;
     return new Promise<void>((resolve, reject): void => {

src/settings/TockSettings.tsx

@@ -17,6 +17,7 @@ export interface NetworkSettings {
 
 export default interface TockSettings {
   endpoint?: string; // will be required in a future release
+  userId?: string | null;
   locale?: string;
   localStorage: LocalStorageSettings;
   network: NetworkSettings;