Add web live chat docs.

Author: Oceania2018

README.md

@@ -27,7 +27,7 @@ It's written in C# running on .Net Core that is full cross-platform framework, t
 * Support multiple LLM platforms (ChatGPT 3.5 / 4.0, PaLM 2, LLaMA 2, HuggingFace).
 * Allow multiple agents with different responsibilities cooperate to complete complex tasks. 
 * Build, test, evaluate and audit your LLM agent in one place.
-* Support different open source UI [Chatbot UI](src/Plugins/BotSharp.Plugin.ChatbotUI/Chatbot-UI.md), [HuggingChat UI](src/Plugins/BotSharp.Plugin.HuggingFace/HuggingChat-UI.md).
+* Build-in Web Live Chat UI written in SvelteKit.
 * Abstract standard Rich Content data structure. Integrate with popular message channels like Facebook Messenger, Slack and Telegram.
 * Provide RESTful Open API and WebSocket real-time communication.
 
@@ -38,7 +38,19 @@ It's written in C# running on .Net Core that is full cross-platform framework, t
  PS D:\> cd BotSharp
  PS D:\BotSharp\> dotnet run -p .\src\WebStarter
 ```
-2. Run UI project, reference to [Chatbot UI](src/Plugins/BotSharp.Plugin.ChatbotUI/Chatbot-UI.md).
+
+2. Run UI project, reference to [Web Live Chat](src/web-live-chat/README.md).
+```sh
+PS D:\> cd .\src\web-live-chat
+PS D:\> npm install --force
+PS D:\> npm run dev
+```
+
+Access http://localhost:5010/chat/01fcc3e5-9af7-49e6-ad7a-a760bd12dc4a
+
+![Alt text](./docs/static/screenshots/web-live-chat.png)
+
+
 
 ### Core Modules
 

docs/static/screenshots/web-live-chat.png

@@ -2,6 +2,7 @@
 using BotSharp.Abstraction.Users;
 using BotSharp.Core;
 using BotSharp.Core.Users.Services;
+using BotSharp.Plugin.ChatHub;
 using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.IdentityModel.Tokens;
 using System.Text;
@@ -50,14 +51,14 @@
 builder.Services.AddCors(options =>
 {
     options.AddPolicy("MyCorsPolicy",
-        builder =>
-        {
-            builder.AllowAnyOrigin()
+        builder => builder.WithOrigins("http://localhost:5010")
                    .AllowAnyMethod()
-                   .AllowAnyHeader();
-        });
+                   .AllowAnyHeader()
+                   .AllowCredentials());
 });
 
+builder.Services.AddSignalR();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.
@@ -79,4 +80,6 @@
 app.UseCors("MyCorsPolicy");
 #endif
 
+app.MapHub<SignalRHub>("/chatHub");
+
 app.Run();

src/WebStarter/Program.cs

@@ -146,7 +146,7 @@
       "BotSharp.Plugin.KnowledgeBase",
       "BotSharp.Plugin.Qdrant",
       "BotSharp.Plugin.PaddleSharp",
-      // "BotSharp.Plugin.ChatHub",
+      "BotSharp.Plugin.ChatHub",
       "BotSharp.Plugin.WeChat",
       // "BotSharp.Plugin.TelegramBots",
       // "BotSharp.Plugin.RoutingSpeeder",

src/WebStarter/appsettings.json

@@ -0,0 +1,2 @@
+[
+]

src/WebStarter/data/users/10d12798-08fb-4aa6-977b-5dd94d82dbfe/agents.json

@@ -0,0 +1,11 @@
+{
+  "firstName": "Guest",
+  "lastName": "Anonymous",
+  "email": "[email protected]",
+  "salt": "55f8fafcf829479ca97e635937440fee",
+  "password": "3b459ae9988628d41f0362c499a768dd",
+  "role": "client",
+  "updatedTime": "2023-11-13T18:00:00Z",
+  "createdTime": "2023-11-13T18:00:00Z",
+  "id": "10d12798-08fb-4aa6-977b-5dd94d82dbfe"
+}

src/WebStarter/data/users/10d12798-08fb-4aa6-977b-5dd94d82dbfe/user.json

@@ -1,19 +1,3 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
 ## Developing
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

src/web-live-chat/README.md

@@ -2,6 +2,7 @@ const host = 'http://localhost:5500';
 
 // user
 export const tokenUrl = `${host}/token`;
+export const myInfoUrl = `${host}/user/my`;
 export const usrCreationUrl = `${host}/user`;
 
 // plugin

src/web-live-chat/src/lib/services/api-endpoints.js

@@ -1,5 +1,5 @@
 import { userStore, getUserStore } from '$lib/helpers/store.js';
-import { tokenUrl,  usrCreationUrl } from './api-endpoints.js';
+import { tokenUrl,  myInfoUrl, usrCreationUrl } from './api-endpoints.js';
 
 /**
  * This callback type is called `requestCallback` and is displayed as a global symbol.
@@ -36,6 +36,34 @@ export async function getToken(email, password, onSucceed) {
     .catch(error => alert(error.message));
 }
 
+/**
+ * @param {string} token
+ * @returns {Promise<import('$typedefs').UserModel>}
+ */
+export async function myInfo(token) {
+    const headers = {
+        Authorization: `Bearer ${token}`,
+    };
+
+    const info = await fetch(myInfoUrl, {
+        method: 'GET',
+        headers: headers,
+    }).then(response => {
+        if (response.ok) {
+            return response.json();
+        } else {
+            alert(response.statusText);
+        }
+    }).then(result => {
+        let user = getUserStore();
+        userStore.set({ ...user, init: false, id: result.id });
+        return result;
+    })
+    .catch(error => alert(error.message));
+
+    return info;
+}
+
 /**
  * @param {string} firstName
  * @param {string} lastName

src/web-live-chat/src/lib/services/auth-service.js

@@ -22,7 +22,7 @@
                 userToken = token;
             });
         } else {
-            userToken = $page.url.searchParams.get('token');
+            userToken = $page.url.searchParams.get('token') ?? "unauthorized";
         }
         setAuthorization(userToken);
         conversation = await newConversation(params.agentId);