Merge branch 'main' of https://github.com/SciSharp/BotSharp-UI into features/refine-template-config

Author: Jicheng Lu

.env

@@ -23,5 +23,5 @@ PUBLIC_ALLOW_SIGNUP=true
 PUBLIC_AUTH_ENABLE_SSO=true
 PUBLIC_AUTH_ENABLE_FIND_PWD=true
 PUBLIC_ENVIRONMENTS=[]
-PUBLIC_PRIMARY_COLOR=#556ee6
+PUBLIC_PRIMARY_COLOR="#556ee6"
 PUBLIC_SECONDARY_COLOR=

package-lock.json

@@ -73,6 +73,7 @@
 		"svelte-codemirror-editor": "^2.1.0",
 		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",
+		"svelte-hero-icons": "^5.2.0",
 		"svelte-i18n": "^4.0.0",
 		"svelte-json-tree": "^2.2.0",
 		"svelte-jsoneditor": "^3.11.0",

package.json

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { getUserStore, globalMenuStore } from '$lib/helpers/store';
+    import { getCleanUrl } from '$lib/helpers/utils/common';
 
     let {
         htmlTagId = 'embedding-page',
@@ -12,6 +13,39 @@
     /** @type {string} */
     let curSlug = $state('');
 
+    /** @type {boolean} */
+    let fullScreen = $state(false);
+
+    $effect(() => {
+        const footer = document.querySelector('.footer');
+        const pageContent = document.querySelector('.page-content');
+
+        if (fullScreen) {
+            if (footer instanceof HTMLElement) {
+                footer.style.display = 'none';
+            }
+            if (pageContent instanceof HTMLElement) {
+                pageContent.style.paddingBottom = '0';
+            }
+        } else {
+            if (footer instanceof HTMLElement) {
+                footer.style.display = '';
+            }
+            if (pageContent instanceof HTMLElement) {
+                pageContent.style.paddingBottom = '';
+            }
+        }
+
+        return () => {
+            if (footer instanceof HTMLElement) {
+                footer.style.display = '';
+            }
+            if (pageContent instanceof HTMLElement) {
+                pageContent.style.paddingBottom = '';
+            }
+        };
+    });
+
     // @ts-ignore
     let slug = $derived($page.params[slugName]);
 
@@ -25,14 +59,15 @@
 
     onMount(() => {
         const menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
-            const url = getPathUrl();
-            let found = menu.find(x => x.link === url);
+            const url = getCleanPath(getPathUrl());
+            let found = menu.find(x => getCleanPath(x.link) === url);
             label = found?.label || '';
             if (!found?.embeddingInfo) {
-                const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
-                found = subFound?.subMenu?.find(x => x.link === url);
+                const subFound = menu.find(x => !!x.subMenu?.find(y => getCleanPath(y.link) === url));
+                found = subFound?.subMenu?.find(x => getCleanPath(x.link) === url);
                 label = found?.label || '';
             }
+            fullScreen = found?.embeddingInfo?.fullScreen || false;
             embed(found?.embeddingInfo || null);
         });
 
@@ -77,9 +112,13 @@
         }
     }
 
+    /** @param {string} url */
+    const getCleanPath = (url) => {
+        return getCleanUrl((url || '').split('?')[0]);
+    };
+
     const getPathUrl = () => {
-        const path = $page.url.pathname;
-        return path?.startsWith('/') ? path.substring(1) : path;
+        return $page.url.pathname || '';
     };
 </script>
 

src/lib/common/embedding/EmbeddingPage.svelte

@@ -32,17 +32,17 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] bg-black/50"
+    class={`fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] bg-black/50 ${containerClasses}`}
     transition:fade={{ duration: 150 }}
     onclick={handleBackdropClick}
 >
     <div
-        class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-lg'} mx-4 ${containerClasses}`}
+        class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-lg'} mx-4 modal-content`}
         style={containerStyles}
     >
         <!-- Header -->
         {#if title}
-        <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 modal-title">
             <div class="font-semibold text-lg">{title}</div>
             <button
                 type="button"
@@ -56,7 +56,7 @@
         {/if}
 
         <!-- Body -->
-        <div class="p-3" style={bodyStyles}>
+        <div class="p-3 modal-body" style={bodyStyles}>
             {@render children?.()}
         </div>
     </div>

src/lib/common/modals/PlainModal.svelte

@@ -6,20 +6,22 @@
      *   disableDefaultStyles?: boolean,
      *   containerClasses?: string,
      *   containerStyles?: string,
-     *   size?: number
+     *   size?: number,
+     *   color?: string
      * }}
      */
     let {
         disableDefaultStyles = false,
         containerClasses = '',
         containerStyles = '',
-        size = 100
+        size = 100,
+        color = 'var(--bs-primary)'
     } = $props();
 </script>
 
 <div
     class="{disableDefaultStyles ? '' : 'loader'} {containerClasses}"
     style={`${containerStyles}`}
 >
-    <Circle {size} color="var(--bs-primary)" unit="px" duration="1s" />
+    <Circle {size} {color} unit="px" duration="1s" />
 </div>

src/lib/common/spinners/Loader.svelte

@@ -29,6 +29,7 @@ const richType = {
     Generic: 'generic_template',
     Upload: 'upload_template',
     ProgramCode: 'program_code',
+    Embedding: 'embedding_template'
 }
 export const RichType = Object.freeze(richType);
 

src/lib/helpers/enums.js

@@ -127,6 +127,33 @@ IRichContent.prototype.code_script;
  */
 IRichContent.prototype.language;
 
+/**
+ * The URL of the embedding rich content.
+ *
+ * @name url
+ * @type {string}
+ * @instance
+ */
+IRichContent.prototype.url;
+
+/**
+ * The title of the embedding rich content.
+ *
+ * @name title
+ * @type {string}
+ * @instance
+ */
+IRichContent.prototype.title;
+
+/**
+ * The html tag of the embedding rich content.
+ *
+ * @name html_tag
+ * @type {string}
+ * @instance
+ */
+IRichContent.prototype.html_tag;
+
 
 /**
  * @typedef {Object} TextMessage
@@ -180,6 +207,8 @@ IRichContent.prototype.language;
  * @property {boolean} is_dummy
  * @property {boolean} is_appended
  * @property {string} [indication]
+ * @property {any} [thought]
+ * @property {any} [meta_data]
  */
 
 /**

src/lib/helpers/types/conversationTypes.js

@@ -30,6 +30,7 @@
  * @property {string?} [htmlTag]
  * @property {string?} [htmlStyle]
  * @property {string?} [appendTokenName]
+ * @property {boolean} fullScreen
  */
 
 /**

src/lib/helpers/types/pluginTypes.js

@@ -47,6 +47,7 @@ File: Main Css File
 @import "custom/components/markdown";
 @import "custom/components/state";
 @import "custom/components/codeScript";
+@import "custom/components/rich_content";
 
 /* Plugins */
 @import "custom/plugins/custom-scrollbar";