refine instruction log

Author: Jicheng Lu

src/lib/common/markdown/Markdown.svelte

@@ -16,6 +16,9 @@
 
     let innerText = '';
 	$: {
+		if (typeof text !== 'string') {
+			text = `${JSON.stringify(text)}`;
+		}
 		const markedText = !rawText ? replaceNewLine(marked(replaceMarkdown(text || ''))?.toString()) : marked(text || '')?.toString();
 		if (!!markedText && markedText.endsWith('<br>')) {
 			const idx = markedText.lastIndexOf('<br>');

src/lib/helpers/types/instructTypes.js

@@ -33,6 +33,7 @@
  * @property {string} provider
  * @property {string} model
  * @property {string?} [template_name]
+ * @property {string?} [user_name]
  * @property {string} user_message
  * @property {string?} [system_instruction]
  * @property {string} completion_text

src/lib/scss/custom/pages/_instruction.scss

@@ -95,6 +95,7 @@
     padding: 10px 5px;
 
     .instruction-log-message {
+        margin-top: 10px;
         overflow-y: auto;
         max-height: 350px;
         scrollbar-width: none;

src/routes/page/instruction/log/+page.svelte

@@ -201,7 +201,7 @@
 
 
 <HeadTitle title="{$_('Instruction Log')}" />
-<Breadcrumb pagetitle="{$_('Instruction Log')}" title="{$_('Instruction')}"/>
+<Breadcrumb pagetitle="{$_('Log')}" title="{$_('Instruction')}"/>
 <LoadingToComplete isLoading={isLoading} />
 
 <Row>
@@ -260,9 +260,10 @@
 						<thead>
 							<tr>
 								<th scope="col" class="instruction-log-col ellipsis">{$_('Agent')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Provider')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Model')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Llm Provider')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Llm Model')}</th>
 								<th scope="col" class="instruction-log-col ellipsis">{$_('Template')}</th>
+								<th scope="col" class="instruction-log-col ellipsis">{$_('Caller')}</th>
                                 <th scope="col" class="instruction-log-col ellipsis">{$_('Created Time')}</th>
 								<th scope="col">{$_('')}</th>
 							</tr>

src/routes/page/instruction/log/log-item.svelte

@@ -20,6 +20,7 @@
     <td class="instruction-log-col ellipsis">{item.provider}</td>
     <td class="instruction-log-col ellipsis">{item.model}</td>
     <td class="instruction-log-col ellipsis">{item.template_name || 'N/A'}</td>
+    <td class="instruction-log-col ellipsis">{item.user_name || 'N/A'}</td>
     <td class="instruction-log-col ellipsis">{utcToLocal(item.created_time)}</td>
     <td>
         <ul class="list-unstyled hstack gap-1 mb-0" style="justify-content: center;">

src/routes/page/instruction/+page.svelte renamed to src/routes/page/instruction/testing/+page.svelte

@@ -8,16 +8,16 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import InstructionState from './instruction-components/instruction-state.svelte';
+	import InstructionState from '../instruction-components/instruction-state.svelte';
 	import { getAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { sendChatCompletion } from '$lib/services/instruct-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
 	import { LlmModelType } from '$lib/helpers/enums';
 	import NavBar from '$lib/common/nav-bar/NavBar.svelte';
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
-	import InstructionTemplate from './instruction-components/instruction-template.svelte';
-	import InstructionLlm from './instruction-components/instruction-llm.svelte';
+	import InstructionTemplate from '../instruction-components/instruction-template.svelte';
+	import InstructionLlm from '../instruction-components/instruction-llm.svelte';
 
     const maxLength = 64000;
     const DEFAULT_PROVIDER = 'openai';
@@ -165,7 +165,7 @@
 </script>
 
 <HeadTitle title="{$_('Instruction')}" />
-<Breadcrumb pagetitle="{$_('Instruction')}" title="{$_('Instruction')}"/>
+<Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
 <LoadingToComplete isLoading={isLoading} />
 
 <div class="d-xl-flex">

svelte.config.js

@@ -52,7 +52,7 @@ const config = {
 				"/page/agent/[agentId]",
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",
-				"/page/instruction",
+				"/page/instruction/testing",
 				"/page/instruction/log",
 				"/page/conversation",
 				"/page/conversation/[conversationId]",