Update chat-box UI.

README.md

@@ -17,7 +17,7 @@ It's written in C# running on .Net Core that is full cross-platform framework, t
 
 **BotSharp** is in accordance with components principle strictly, decouples every part that is needed in the platform builder. So you can choose different UI/UX, or pick up a different LLM providers. They are all modulized based on unified interfaces. **BotSharp** provides an advanced Agent abstraction layer to efficiently manage complex application scenarios in enterprises, allowing enterprise developers to efficiently integrate AI into business systems.
 
-![](./docs/architecture/assets/llm_diagram.png)
+![](./docs/architecture/assets/botsharp_diagram.png)
 
 ### Some Features
 

docs/conf.py

@@ -64,9 +64,9 @@ author = 'Haiping Chen'
 # built documents.
 #
 # The short X.Y version.
-version = '0.19'
+version = '0.20'
 # The full version, including alpha/beta/rc tags.
-release = '0.19.0'
+release = '0.20.0'
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.

docs/index.rst

@@ -6,6 +6,9 @@
 The Open Source LLM Application Framework
 ======================================================
 
+.. image:: static/logos/Logo.png
+   :height: 128px
+
 .. image:: https://img.shields.io/discord/1106946823282761851?label=Discord
     :target: `discord`_
 
@@ -21,8 +24,6 @@ It's witten in C# running on .NET which is a full cross-platform framework. C# i
 
 BotSharp is strictly in accordance with the components principle and decouples every part that is needed in the platform builder. So you can choose different UI/UX, or pick up a different Vector Storage, or select a more advanced algorithm to do NLU tasks. They are all modularized based on unified interfaces.
 
-.. image:: static/logos/BotSharp.png
-   :height: 64px
 
 Indices and tables
 ==================
@@ -91,12 +92,13 @@ The main documentation for the site is organized into the following sections:
    llm/template
    llm/function
    llm/few-shot-learning
+   llm/provider
 
 .. _architecture-docs:
 
 .. toctree::
    :maxdepth: 2
-   :caption: Architecture:
+   :caption: Architecture
    
    architecture/authentication
    architecture/plugin

docs/llm/provider.md

@@ -0,0 +1,13 @@
+# LLM Provider
+
+`BotSharp` can support multiple LLM providers through plug-ins.
+
+You can set the names of `Provider` and `Model` in each round of dialogue to control the LLM that should be used in the current dialogue, or you can also specify the LLM used in subsequent dialogues once during dialogue initialization.
+
+```json
+{
+  "text": "Good morning!",
+  "provider": "google-ai",
+  "model": "palm2"
+}
+```

src/Plugins/BotSharp.Plugin.ChatHub/SignalRHub.cs

@@ -33,13 +33,15 @@ public class SignalRHub : Hub
         if (!string.IsNullOrEmpty(conversationId))
         {
             var conv = await convService.GetConversation(conversationId);
-
-            foreach (var hook in hooks)
+            if (conv != null)
             {
-                // Check if user connected with agent is the first time.
-                if (!conv.Dialogs.Any())
+                foreach (var hook in hooks)
                 {
-                    await hook.OnUserAgentConnectedInitially(conv);
+                    // Check if user connected with agent is the first time.
+                    if (!conv.Dialogs.Any())
+                    {
+                        await hook.OnUserAgentConnectedInitially(conv);
+                    }
                 }
             }
         }

src/web-live-chat/package-lock.json

@@ -634,7 +634,7 @@
 				"vite": "^4.0.0"
 			}
 		},
-		"node_modules/@sveltejs/vite-plugin-svelte": {
+		"node_modules/@sveltejs/kit/node_modules/@sveltejs/vite-plugin-svelte": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
 			"integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==",
@@ -655,7 +655,7 @@
 				"vite": "^4.0.0"
 			}
 		},
-		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+		"node_modules/@sveltejs/kit/node_modules/@sveltejs/vite-plugin-svelte/node_modules/@sveltejs/vite-plugin-svelte-inspector": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz",
 			"integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==",

src/web-live-chat/src/lib/helpers/datetime.js

@@ -0,0 +1,17 @@
+/**
+ * @param {Date} datetime
+ * @param {string} type - date or time
+ */
+export function format(datetime, type = 'date') {
+    const date = new Date(datetime);
+    if (type == 'date') {
+        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+        return date.toLocaleString(undefined, options);
+    } else if (type == 'time') {
+        const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+        return date.toLocaleString(undefined, options);
+    } else if (type == 'short-time') {
+        const options = { hour: '2-digit', minute: '2-digit' };
+        return date.toLocaleString(undefined, options);
+    }
+};

src/web-live-chat/src/lib/scss/custom/pages/_chat.scss

@@ -128,12 +128,12 @@
         }
     }
     .conversation-list {
-        margin-bottom: 24px;
+        margin-bottom: 8px;
         display: inline-block;
         position: relative;
 
         .ctext-wrap {
-            padding: 12px 24px;
+            padding: 8px 10px;
             background-color: rgba($primary, 0.1);
             border-radius: 8px 8px 8px 0px;
             overflow: hidden;

src/web-live-chat/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -16,6 +16,7 @@
 	import Link from 'svelte-link';
 	import { signalr } from '$lib/services/signalr-service.js';
     import { sendMessageToHub, GetDialogs } from '$lib/services/conversation-service.js';
+	import { format } from '$lib/helpers/datetime';
 
 	const options = {
 		scrollbars: {
@@ -103,7 +104,7 @@
 			<div class="p-4 border-bottom" style="height: 12vh">
 				<div class="row">
 					<div class="col-md-4 col-7">
-						<h5 class="font-size-15 mb-1">Guest</h5>
+						<h5 class="font-size-15 mb-1">{agent.name}</h5>
 						<p class="text-muted mb-0">
 							<i class="mdi mdi-circle text-success align-middle me-1" /> Active now
 						</p>
@@ -160,12 +161,19 @@
 								</Dropdown>
 
 								<div class="ctext-wrap">
-									<div class="conversation-name">{message.sender.full_name}</div>
-									<p>{message.text}</p>
+									{#if message.sender.id === currentUser.id}
+									<!--<div class="conversation-name">{message.sender.full_name}</div>-->
+									<span>{message.text}</span>
 									<p class="chat-time mb-0">
 										<i class="bx bx-time-five align-middle me-1" />
-										{message.created_at}
-									</p>
+										{format(message.created_at, 'short-time')}
+									</p>									
+									{:else}
+									<div class="flex-shrink-0 align-self-center me-3">
+										<img src="/images/users/bot.png" class="rounded-circle avatar-xs" alt="avatar">
+										<span>{message.text}</span>
+									</div>
+									{/if}
 								</div>
 							</div>
 						</li>
@@ -181,12 +189,6 @@
 							<input type="text" class="form-control chat-input" bind:value={text} placeholder="Enter Message..." />
 							<div class="chat-input-links" id="tooltip-container">
 								<ul class="list-inline mb-0">
-									<li class="list-inline-item">
-										<Link href="#" title="Emoji"><i class="mdi mdi-emoticon-happy-outline" /></Link>
-									</li>
-									<li class="list-inline-item">
-										<Link href="#" title="Images"><i class="mdi mdi-file-image-outline" /></Link>
-									</li>
 									<li class="list-inline-item">
 										<Link href="#" title="Add Files"><i class="mdi mdi-file-document-outline" /></Link>
 									</li>