Merge pull request #320 from iceljc/features/refine-chat-window

refine instruction log

Author: iceljc

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/conversation/+page.svelte

@@ -374,8 +374,12 @@
 				</div>
 			</CardBody>
 			{#if showStateSearch}
-				<CardBody class="border-bottom" style="display: flex; justify-content: flex-end;">
-					<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
+				<CardBody class="border-bottom">
+					<Row class="g-3 justify-content-end">
+						<Col lg="6">
+							<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
+						</Col>
+					</Row>
 				</CardBody>
 			{/if}
 			<CardBody class="border-bottom">

src/routes/page/conversation/state-search.svelte

@@ -36,15 +36,15 @@
 >
     {#each states as state, idx}
         <div class="state-search-item">
-            <div>
+            <div style="flex: 1;">
                 <RemoteSearchInput
                     bind:value={state.key}
                     maxLength={maxLength}
                     onSearch={e => onSearch(e)}
                     placeholder="Search States"
                 />
             </div>
-            <div>
+            <div style="flex: 1;">
                 <Input
                     type="text"
                     bind:value={state.value}
@@ -67,15 +67,16 @@
         </div>
     {/each}
     {#if states.length < limit}
-    <div>
-        <Button 
-            color="link"
-            style="padding-left: 0px;"
-            on:click={() => addState()}
-        >
-            Add +
-        </Button>
-    </div>
+        <div class="d-flex justify-content-end">
+            <Button 
+                color="link"
+                style="padding-left: 0px;"
+                on:click={() => addState()}
+            >
+                Add +
+            </Button>
+            <div style="flex: 0 0 13px;"></div>
+        </div>
     {/if}
 </div>
 

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]",