Bugfix/fix env styling

.env

@@ -24,4 +24,4 @@ PUBLIC_AUTH_ENABLE_SSO=true
 PUBLIC_AUTH_ENABLE_FIND_PWD=true
 PUBLIC_ENVIRONMENTS=[]
 PUBLIC_PRIMARY_COLOR="#556ee6"
-PUBLIC_SECONDARY_COLOR=
+PUBLIC_SECONDARY_COLOR=""

src/lib/helpers/http.js

@@ -234,7 +234,6 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
         new RegExp('http(s*)://(.*?)/rule/triggers', 'g'),
-        new RegExp('http(s*)://(.*?)/rule/config/options', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-configs', 'g'),

src/lib/scss/_variables-dark.scss

@@ -101,7 +101,7 @@ $footer-color-dark:                     #a6b0cf;
 /* Horizontal nav */
 $topnav-bg-dark:                        #282e3f;
 $menu-item-color-dark:                  #a6b0cf;
-$menu-item-active-color-dark:           #556ee6;
+$menu-item-active-color-dark:           var(--#{$prefix}primary);
 
 $boxed-body-bg-dark:                    #32394f;
 

src/lib/scss/_variables.scss

@@ -10,7 +10,7 @@ $sidebar-menu-item-color:                             #545a6d;
 $sidebar-menu-sub-item-color:                         #545a6d;
 $sidebar-menu-item-icon-color:                        #7f8387;
 $sidebar-menu-item-hover-color:                       #383c40;
-$sidebar-menu-item-active-color:                      #556ee6;
+$sidebar-menu-item-active-color:                      var(--#{$prefix}primary);
 $sidebar-width:                                       250px;
 $sidebar-collapsed-width:                             70px;
 $sidebar-width-sm:                                    160px;
@@ -44,7 +44,7 @@ $footer-color:                                        #74788d;
 $topnav-bg:                                           $white;
 
 $menu-item-color:                                     #545a6d;
-$menu-item-active-color:                              #556ee6;
+$menu-item-active-color:                              var(--#{$prefix}primary);
 
 /* Right Sidebar */
 $rightbar-width:                                      280px;
@@ -138,8 +138,17 @@ $colors: (
 /* scss-docs-end colors-map */
 
 /* scss-docs-start theme-color-variables */
-$primary:       $purple;
-$secondary:     $gray-600;
+/* `env-vars` is a virtual partial served by a custom Sass importer in */
+/* vite.config.js. It exposes PUBLIC_PRIMARY_COLOR / PUBLIC_SECONDARY_COLOR */
+/* from .env as `$env-primary` / `$env-secondary`. When the env vars are */
+/* empty the import yields nothing and the `!default` fallbacks below */
+/* preserve the original theme. */
+@import "env-vars";
+$env-primary:   $purple   !default;
+$env-secondary: $gray-600 !default;
+
+$primary:       $env-primary;
+$secondary:     $env-secondary;
 $success:       $green;
 $info:          $cyan;
 $warning:       $yellow;

src/lib/scss/custom/pages/_chat.scss

@@ -670,7 +670,7 @@
     }
 
     .state-delete {
-        flex: 0.1;
+        flex: 0.05;
         color: var(--bs-danger);
         font-size: 12px;
     }

src/lib/services/agent-service.js

@@ -126,15 +126,6 @@ export async function getAgentRuleOptionsById(agentId) {
     return response.data;
 }
 
-/**
- * Get agent rule config options
- * @returns {Promise<any>}
- */
-export async function getAgentRuleConfigOptions() {
-    const url = endpoints.agentRuleConfigOptionsUrl;
-    const response = await axios.get(url);
-    return response.data;
-}
 
 /**
  * Get agent labels

src/lib/services/api-endpoints.js

@@ -41,7 +41,6 @@ export const endpoints = {
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     agentRuleOptionsUrl: `${host}/rule/triggers`,
     agentRuleOptionsByIdUrl: `${host}/rule/triggers/{agentId}`,
-    agentRuleConfigOptionsUrl: `${host}/rule/config/options`,
     agentLabelsUrl: `${host}/agent/labels`,
 
     // agent code script:

src/routes/+layout.svelte

@@ -5,43 +5,14 @@
 	import '$lib/scss/icons.scss';
 	import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
 	import en from '$lib/langs/en.json';
-	import {
-		PUBLIC_PRIMARY_COLOR,
-		PUBLIC_SECONDARY_COLOR
-	} from '$env/static/public';
 
 	addMessages('en', en);
 
 	init({
 		fallbackLocale: 'en',
 		initialLocale: getLocaleFromNavigator()
 	});
-
-	/** @type {Record<string, string>} */
-	const colorOverrides = {
-		...(PUBLIC_PRIMARY_COLOR   ? { '--bs-primary': PUBLIC_PRIMARY_COLOR, '--bs-primary-rgb': hexToRgb(PUBLIC_PRIMARY_COLOR) } : {}),
-		...(PUBLIC_SECONDARY_COLOR ? { '--bs-secondary': PUBLIC_SECONDARY_COLOR, '--bs-secondary-rgb': hexToRgb(PUBLIC_SECONDARY_COLOR) } : {}),
-	};
-
-	const styleOverride = Object.entries(colorOverrides).map(([k, v]) => `${k}:${v}`).join(';');
-
-	/**
-	 * Convert a hex color string to an "r, g, b" string for Bootstrap's rgb variables.
-	 * @param {string} hex
-	 * @returns {string}
-	 */
-	function hexToRgb(hex) {
-		const h = hex.replace('#', '');
-		const n = parseInt(h, 16);
-		return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
-	}
 </script>
 
-<svelte:head>
-	{#if styleOverride}
-		{@html `<style>:root { ${styleOverride} }</style>`}
-	{/if}
-</svelte:head>
-
 <slot />
 

src/routes/page/agent/[agentId]/+page.svelte

@@ -11,7 +11,6 @@
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
-	import { myInfo } from '$lib/services/auth-service';
     import AgentInstruction from './agent-components/agent-instruction.svelte';
 	import AgentOverview from './agent-components/agent-overview.svelte';
     import AgentTemplate from './agent-components/templates/agent-template.svelte';
@@ -28,8 +27,6 @@
     let agentTemplateCmp = $state(null);
     /** @type {any} */
     let agentTabsCmp = $state(null);
-    /** @type {import('$userTypes').UserModel} */
-	let user = $state(/** @type {any} */ (undefined));
     /** @type {any} */
 	let unsubscriber;
 
@@ -54,8 +51,6 @@
     }
 
     onMount(async () => {
-        user = await myInfo();
-
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
 
@@ -214,7 +209,6 @@
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
-                    user={user}
                 />
             </div>
         </div>

src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte

@@ -1,40 +1,30 @@
 <script>
-    import { slide } from 'svelte/transition';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
-	import { ADMIN_ROLES } from '$lib/helpers/constants';
-
-    const duration = 200;
 
     /**
      * @type {{
      *   rule: import('$agentTypes').AgentRule,
      *   ruleIndex: number,
      *   collapsed?: boolean,
-     *   user: import('$userTypes').UserModel,
      *   ruleOptions?: any[],
-     *   configOptions?: any[],
      *   windowWidth: number,
      *   ontoggle?: (data: { ruleIdx: number, field: string, checked: boolean }) => void,
      *   onchange?: (data: { ruleIdx: number, field: string, value: string }) => void,
      *   ondelete?: (data: { ruleIdx: number, field: string }) => void,
-     *   oncollapse?: (data: { ruleIdx: number, collapsed: boolean }) => void,
-     *   onconfig?: (data: { ruleIdx: number }) => void
+     *   oncollapse?: (data: { ruleIdx: number, collapsed: boolean }) => void
      * }}
      */
     let {
         rule,
         ruleIndex,
         collapsed = true,
-        user,
         ruleOptions = [],
-        configOptions = [],
         windowWidth,
         ontoggle,
         onchange,
         ondelete,
-        oncollapse,
-        onconfig
+        oncollapse
     } = $props();
 
     /**
@@ -77,12 +67,6 @@
             collapsed: !collapsed
         });
     }
-
-    function toggleConfig() {
-        onconfig?.({
-            ruleIdx: ruleIndex
-        });
-    }
 </script>
 
 <div class="utility-wrapper">
@@ -138,22 +122,6 @@
                     </BotsharpTooltip>
                 </div>
                 {/if}
-
-                {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && rule.config?.topology_name}
-                <div class="line-align-center">
-                    <i
-                        class="bx bx-cog text-primary fs-6 clickable"
-                        id={`rule-config-${ruleIndex}`}
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Rule config"
-                        role="button"
-                        tabindex="0"
-                        onkeydown={() => {}}
-                        onclick={() => toggleConfig()}
-                    ></i>
-                </div>
-                {/if}
             </div>
         </div>
         <div class="utility-value">
@@ -181,36 +149,4 @@
             </div>
         </div>
     </div>
-
-    {#if !collapsed}
-    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
-        <div class="utility-content">
-            <div class="utility-list-item">
-                <div class="utility-label line-align-center">
-                    <div class="d-flex gap-1">
-                        <div class="line-align-center">
-                            {'Topology'}
-                        </div>
-                        <div class="line-align-center"></div>
-                    </div>
-                </div>
-                <div class="utility-value">
-                    <div class="utility-input line-align-center">
-                        <select
-                            class="form-select"
-                            onchange={e => changeRule(e, 'topology')}
-                        >
-                            {#each [...configOptions] as option}
-                                <option value={`${option.name}`} selected={option.name == rule.config?.topology_name}>
-                                    {option.name}
-                                </option>
-                            {/each}
-                        </select>
-                    </div>
-                    <div class="utility-delete line-align-center"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    {/if}
 </div>