Merge branch 'main' of https://github.com/SciSharp/BotSharp-UI into roary-features/chat-window

roary.yao · roary.yao · commit 50fc013b6b36 · 2025-02-07T14:28:34.000+08:00
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
@@ -15,6 +15,7 @@
  * @property {string?} provider 
  * @property {string?} model
  * @property {number} max_recursion_depth
+ * @property {number?} [max_output_tokens]
  */
 
 
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
@@ -217,6 +217,12 @@
     }
 }
 
+.agent-card-header {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
 .agent-label-container {
     display: flex;
     gap: 5px;
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -102,14 +102,18 @@
                     height: 80%;
                     max-height: 25px;
                 }
+
+                .chat-head-agent-name {
+                    font-size: 0.8em;
+                }
             }
 
             .chat-head-user {
                 flex: 0.5;
                 display: flex;
                 gap: 5px;
                 width: fit-content;
-                font-size: 12px;
+                font-size: 0.7em !important;
             }
         }
     }
@@ -127,6 +131,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    gap: 5px;
 }
 
 .user-chat-nav {
@@ -141,8 +146,14 @@
         background-color: var(--#{$prefix}light);
         border-radius: 50%;
         border: none;
-        width: 40px;
-        height: 40px;
+        // width: 40px;
+        // height: 40px;
+        width: 2em;
+        height: 2em;
+
+        i {
+            font-size: 0.8em;
+        }
     }
     
     .dropdown {
@@ -176,6 +187,10 @@
             border-top-left-radius: 0px;
             border-bottom-left-radius: 0px;
         }
+
+        i, span {
+            font-size: 0.9em;
+        }
     }
 }
 
@@ -420,6 +435,10 @@
 
     .log-footer {
         flex: 2%;
+
+        .log-footer-nav-btn {
+            font-size: 0.75em;
+        }
     }
 
     .instant-log-body {
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -88,6 +88,7 @@
 	const params = $page.params;
 	const messageLimit = 100;
 	const screenWidthThreshold = 1024;
+	const chatWidthThreshold = 300;
 	const maxTextLength = 64000;
 	const duration = 2000;
 	
@@ -226,6 +227,7 @@
 		if (messageDraft) {
 			text = messageDraft;
 		}
+		handlePaneResize();
 		
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromClient;
@@ -669,7 +671,7 @@
 		if (disableSpeech) return;
 
 		if (!isListening) {
-			llmRealtime.start(params.agentId, message => {
+			llmRealtime.start(params.agentId, (/** @type {any} */ message) => {
 				console.log(message);
 			});
 			isListening = true;
@@ -1351,6 +1353,13 @@
   function deleteMessageDraft() {
 		messageStorage.remove(MESSAGE_STORAGE_KEY + params.conversationId);
   }
+	function handlePaneResize() {
+		const header = document.querySelector('.chat-head');
+		if (!header) return;
+
+		const width = header.getBoundingClientRect().width;
+		isLite = width < chatWidthThreshold;
+	}
 </script>
 
 
@@ -1466,9 +1475,9 @@
 
 <HeadTitle title="Chat" addOn='' />
 <div class="d-lg-flex">
-	<Splitpanes>
+	<Splitpanes on:resize={() => handlePaneResize()}>
 		{#if isLoadInstantLog}
-		<Pane size={30} minSize={20} maxSize={50} >
+		<Pane size={30} minSize={25} maxSize={40} >
 			<InstantLog
 				bind:msgStateLogs={msgStateLogs}
 				bind:agentQueueLogs={agentQueueLogs}
@@ -1478,7 +1487,7 @@
 			/>
 		</Pane>
 		{/if}
-		<Pane minSize={20}>
+		<Pane minSize={30}>
 			<div style="height: 100vh;">
 				<div class="card mb-0" style="height: 100vh;">
 					<div class="border-bottom chat-head">
@@ -1503,18 +1512,18 @@
 							</div>
 		
 							<div class="col-md-8 col-5">
-								<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
+								<div class="user-chat-nav user-chat-nav-flex mb-0">
 									{#if PUBLIC_DEBUG_MODE === 'true' && isFrame}
-										<li class="list-inline-item">
+										<div class="">
 											<button
 												class="btn btn-secondary btn-rounded btn-sm"
 												on:click={() => openFullScreen()}
 											>
 												<i class="bx bx-fullscreen" />
 											</button>
-										</li>
+										</div>
 									{/if}
-									<li class="list-inline-item">
+									<div class="">
 										{#if !isLite}
 										<Dropdown>
 											<DropdownToggle class="nav-btn dropdown-toggle">
@@ -1581,9 +1590,9 @@
 											/>
 										</button>
 										{/if}
-									</li>
+									</div>
 									
-									<li class="list-inline-item btn-pair">
+									<div class="btn-pair">
 										{#if !isLite}
 										<button
 											class={`btn btn-rounded btn-sm btn-primary btn-left`}
@@ -1592,13 +1601,12 @@
 										>
 											<span
 												data-bs-toggle="tooltip"
-												data-bs-placement="top"
+												data-bs-placement="bottom"
 												title="New Conversation"
 											>
 												<i class="mdi mdi-plus" />
 												<span class="me-2">New</span>
 											</span>
-											
 										</button>
 										{/if}
 										<button
@@ -1611,8 +1619,8 @@
 											{/if}
 											<i class="mdi mdi-window-close" />
 										</button>
-									</li>
-								</ul>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -1901,7 +1909,7 @@
 			</div>
 		</Pane>
 		{#if isLoadPersistLog}
-		<Pane size={30} minSize={20} maxSize={50}>
+		<Pane size={30} minSize={25} maxSize={40}>
 			<PersistLog
 				bind:contentLogs={contentLogs}
 				bind:convStateLogs={convStateLogs}
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -159,6 +159,7 @@
             <NavBar id={'persist-log-container'}>
                 <NavItem
                     navBtnId={'content-log-tab'}
+                    navBtnClasses={'log-footer-nav-btn'}
                     dataBsTarget={'#content-log-tab-pane'}
                     ariaControls={'content-log-tab-pane'}
                     navBtnText={'Content Log'}
@@ -168,6 +169,7 @@
                 />
                 <NavItem
                     navBtnId={'conv-state-log-tab'}
+                    navBtnClasses={'log-footer-nav-btn'}
                     dataBsTarget={'#conv-state-log-tab-pane'}
                     ariaControls={'conv-state-log-tab-pane'}
                     navBtnText={'Conversation States'}
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
@@ -66,6 +66,7 @@
 			filter = {
 				pager: initFilter.pager,
 				types: selectedAgentTypes?.length > 0 ? selectedAgentTypes : null,
+				labels: selectedAgentLabels?.length > 0 ? selectedAgentLabels : null,
 				similarName: event.payload || null
 			};
 			getPagedAgents();
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
@@ -102,7 +102,11 @@
             utilities: agent.utilities || [],
             knowledge_bases: agent.knowledge_bases || [],
             rules: agent.rules || [],
-            max_message_count: Number(agent.max_message_count) > 0 ? Number(agent.max_message_count) : null
+            max_message_count: Number(agent.max_message_count) > 0 ? Number(agent.max_message_count) : null,
+            llm_config: {
+                ...agent.llm_config,
+                max_output_tokens: Number(agent.llm_config.max_output_tokens) > 0 ? Number(agent.llm_config.max_output_tokens) : null
+            }
         };
         isLoading = true;
         saveAgent(agent).then(res => {
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -15,8 +15,8 @@
     /** @type {() => void} */
     export let handleAgentChange;
 
-    const lowerLimit = 1;
-    const upperLimit = 10;
+    const recursiveDepthLowerLimit = 1;
+    const recursiveDepthUpperLimit = 10;
 
     let config = agent.llm_config;
 
@@ -71,15 +71,21 @@
     function changeMaxRecursiveDepth(e) {
         let value = Number(e.target.value) || 0;
         
-        if (value < lowerLimit) {
-            value = lowerLimit;
-        } else if (value > upperLimit) {
-            value = upperLimit;
+        if (value < recursiveDepthLowerLimit) {
+            value = recursiveDepthLowerLimit;
+        } else if (value > recursiveDepthUpperLimit) {
+            value = recursiveDepthUpperLimit;
         }
 
         config.max_recursion_depth = value;
         handleAgentChange();
     }
+
+    /** @param {any} e */
+    function changeMaxOutputToken(e) {
+        const value = Number(e.target.value) || 0;
+        config.max_output_tokens = value;
+    }
 </script>
 
 <Card>
@@ -126,11 +132,25 @@
                 <Input
                     style="text-align: center;"
                     type="number"
-                    min={lowerLimit}
-                    max={upperLimit}
+                    min={recursiveDepthLowerLimit}
+                    max={recursiveDepthUpperLimit}
                     value={config.max_recursion_depth}
                     on:change={e => changeMaxRecursiveDepth(e)}
-                />              
+                />
+            </div>
+        </div>
+
+        <div class="mb-3 row">
+            <label for="example-text-input" class="col-md-3 col-form-label">
+                Max output tokens
+            </label>
+            <div class="col-md-9">
+                <Input
+                    style="text-align: center;"
+                    type="number"
+                    value={config.max_output_tokens}
+                    on:change={e => changeMaxOutputToken(e)}
+                />
             </div>
         </div>
     </CardBody>
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
@@ -26,11 +26,25 @@
           </div>
 
           <div class="flex-grow-1 overflow-hidden">
-            <h5 class="text-truncate font-size-15">
-              <Link href= "page/agent/{agent.id}" class="text-dark">
-                {agent.name}
-              </Link>
-            </h5>
+            <div class="agent-card-header">
+              <h5 class="text-truncate font-size-15 line-align-center mb-0">
+                <Link href= "page/agent/{agent.id}" class="text-dark">
+                  {agent.name}
+                </Link>
+              </h5>
+              {#if agent.is_router}
+              <div
+                class="font-size-15 line-align-center"
+                data-bs-toggle="tooltip"
+                data-bs-placement="bottom"
+                title="Go to flowchart"
+              >
+                <Link href={`page/agent/router?agent_id=${agent.id}`} target="_blank">
+                  <i class="mdi mdi-sitemap" />
+                </Link>
+              </div>
+              {/if}
+            </div>
             {#if agent.labels?.length > 0}
               <div class="agent-label-container">
                 {#each agent.labels as label}
@@ -75,13 +89,6 @@
             <i class="bx bx-calendar me-1" />
             {format(agent.updated_datetime, 'short-date')}
           </li>
-          {#if agent.is_router}
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href={`page/agent/router?agent_id=${agent.id}`} class="btn btn-primary btn-sm" target="_blank">
-              <i class="mdi mdi-magnify" /> {$_('View')}
-            </Link>
-          </li>
-          {/if}
           <li class="list-inline-item me-1 mt-1 mb-1">
             <Link href="page/agent/{agent.id}/build" class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-wrench" /> {$_('Build')}

Original file line number	Diff line number	Diff line change
`@@ -217,6 +217,12 @@`
`217`	`217`	`}`
`218`	`218`	`}`
`219`	`219`
	`220`	`+.agent-card-header {`
	`221`	`+ display: flex;`
	`222`	`+ gap: 10px;`
	`223`	`+ flex-wrap: wrap;`
	`224`	`+}`
	`225`	`+`
`220`	`226`	`.agent-label-container {`
`221`	`227`	`display: flex;`
`222`	`228`	`gap: 5px;`
Original file line number	Diff line number	Diff line change
`@@ -102,14 +102,18 @@`
`102`	`102`	`height: 80%;`
`103`	`103`	`max-height: 25px;`
`104`	`104`	`}`
	`105`	`+`
	`106`	`+ .chat-head-agent-name {`
	`107`	`+ font-size: 0.8em;`
	`108`	`+ }`
`105`	`109`	`}`
`106`	`110`
`107`	`111`	`.chat-head-user {`
`108`	`112`	`flex: 0.5;`
`109`	`113`	`display: flex;`
`110`	`114`	`gap: 5px;`
`111`	`115`	`width: fit-content;`
`112`		`- font-size: 12px;`
	`116`	`+ font-size: 0.7em !important;`
`113`	`117`	`}`
`114`	`118`	`}`
`115`	`119`	`}`
`@@ -127,6 +131,7 @@`
`127`	`131`	`display: flex;`
`128`	`132`	`justify-content: flex-end;`
`129`	`133`	`align-items: center;`
	`134`	`+ gap: 5px;`
`130`	`135`	`}`
`131`	`136`
`132`	`137`	`.user-chat-nav {`
`@@ -141,8 +146,14 @@`
`141`	`146`	`background-color: var(--#{$prefix}light);`
`142`	`147`	`border-radius: 50%;`
`143`	`148`	`border: none;`
`144`		`- width: 40px;`
`145`		`- height: 40px;`
	`149`	`+ // width: 40px;`
	`150`	`+ // height: 40px;`
	`151`	`+ width: 2em;`
	`152`	`+ height: 2em;`
	`153`	`+`
	`154`	`+ i {`
	`155`	`+ font-size: 0.8em;`
	`156`	`+ }`
`146`	`157`	`}`
`147`	`158`
`148`	`159`	`.dropdown {`
`@@ -176,6 +187,10 @@`
`176`	`187`	`border-top-left-radius: 0px;`
`177`	`188`	`border-bottom-left-radius: 0px;`
`178`	`189`	`}`
	`190`	`+`
	`191`	`+ i, span {`
	`192`	`+ font-size: 0.9em;`
	`193`	`+ }`
`179`	`194`	`}`
`180`	`195`	`}`
`181`	`196`
`@@ -420,6 +435,10 @@`
`420`	`435`
`421`	`436`	`.log-footer {`
`422`	`437`	`flex: 2%;`
	`438`	`+`
	`439`	`+ .log-footer-nav-btn {`
	`440`	`+ font-size: 0.75em;`
	`441`	`+ }`
`423`	`442`	`}`
`424`	`443`
`425`	`444`	`.instant-log-body {`