Skip to content

Commit 8d730fb

Browse files
author
Jicheng Lu
committed
refine logs
1 parent c184441 commit 8d730fb

7 files changed

Lines changed: 122 additions & 127 deletions

File tree

‎src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script>
2-
3-
/** @type {any} */
4-
export let data;
5-
2+
/** @type {{ data: any }} */
3+
let { data } = $props();
64
</script>
75

86
<div class="log-element queue-change-container">

‎src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
<script>
2+
import { onDestroy } from 'svelte';
3+
import { fade } from 'svelte/transition';
24
import 'overlayscrollbars/overlayscrollbars.css';
35
import { OverlayScrollbars } from 'overlayscrollbars';
4-
import { afterUpdate, onDestroy } from 'svelte';
5-
import { fade } from 'svelte/transition';
66
import MessageStateLogElement from './message-state-log-element.svelte';
77
import AgentQueueLogElement from './agent-queue-log-element.svelte';
88
import ChatAgentInfo from '../agent-info/chat-agent-info.svelte';
99
import LatestStateLog from './latest-state-log.svelte';
1010
11-
/** @type {import('$agentTypes').AgentModel} */
12-
export let agent;
13-
14-
/** @type {any[]} */
15-
export let msgStateLogs = [];
11+
/**
12+
* @type {{
13+
* agent: import('$agentTypes').AgentModel,
14+
* msgStateLogs?: any[],
15+
* agentQueueLogs?: any[],
16+
* latestStateLog?: Object | null,
17+
* closeWindow: () => void
18+
* }}
19+
*/
20+
let {
21+
agent,
22+
msgStateLogs = $bindable([]),
23+
agentQueueLogs = $bindable([]),
24+
latestStateLog = null,
25+
closeWindow
26+
} = $props();
1627
1728
/** @type {any[]} */
18-
export let agentQueueLogs = [];
19-
20-
/** @type {Object?} */
21-
export let latestStateLog = null;
22-
23-
/** @type {() => void} */
24-
export let closeWindow;
25-
26-
/** @type {any} */
2729
let scrollbars = [];
2830
2931
const msgStateLogTab = 1;
@@ -44,18 +46,19 @@
4446
}
4547
};
4648
47-
afterUpdate(() => {
48-
refresh();
49+
$effect(() => {
50+
// Track reactive dependencies to re-run on changes
51+
msgStateLogs;
52+
agentQueueLogs;
53+
latestStateLog;
54+
55+
scrollToBottom();
4956
});
5057
5158
onDestroy(() => {
5259
cleanLogs();
5360
});
5461
55-
function refresh() {
56-
scrollToBottom();
57-
}
58-
5962
function scrollToBottom() {
6063
const scrollbarElements = [
6164
document.querySelector('.latest-state-log-scrollbar'),
@@ -67,7 +70,6 @@
6770
scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
6871
});
6972
70-
// @ts-ignore
7173
scrollbars.forEach(scrollbar => {
7274
setTimeout(() => {
7375
const { viewport } = scrollbar.elements();
@@ -101,7 +103,8 @@
101103
<button
102104
type="button"
103105
class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
104-
on:click={() => closeWindow()}
106+
aria-label="Close log window"
107+
onclick={() => closeWindow()}
105108
>
106109
<i class="mdi mdi-window-close"></i>
107110
</button>
@@ -126,15 +129,15 @@
126129
out:fade={{ duration: outDuration }}
127130
>
128131
<div class="close-icon">
129-
<span
132+
<button
133+
type="button"
134+
class="btn btn-link p-0"
130135
style="float: right;"
131-
role="link"
132-
tabindex="-1"
133-
on:keydown={() => {}}
134-
on:click={() => closeLog(agentQueueLogTab)}
136+
aria-label="Close agent queue log"
137+
onclick={() => closeLog(agentQueueLogTab)}
135138
>
136139
<i class="mdi mdi-window-close"></i>
137-
</span>
140+
</button>
138141
</div>
139142
<div class="agent-queue-log-scrollbar padding-side">
140143
<ul>
@@ -153,15 +156,15 @@
153156
out:fade={{ duration: outDuration }}
154157
>
155158
<div class="close-icon">
156-
<span
159+
<button
160+
type="button"
161+
class="btn btn-link p-0"
157162
style="float: right;"
158-
role="link"
159-
tabindex="-1"
160-
on:keydown={() => {}}
161-
on:click={() => closeLog(msgStateLogTab)}
163+
aria-label="Close message state log"
164+
onclick={() => closeLog(msgStateLogTab)}
162165
>
163166
<i class="mdi mdi-window-close"></i>
164-
</span>
167+
</button>
165168
</div>
166169
<div class="msg-state-log-scrollbar padding-side" >
167170
<ul>

‎src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<script>
2-
import { formatObject } from '$lib/helpers/utils/common';
3-
// import JSONTree from 'svelte-json-tree';
4-
5-
/** @type {Object?} */
6-
export let data;
2+
/** @type {{ data: Object | null }} */
3+
let { data } = $props();
74
</script>
85

96
<div class="log-element state-log-item">

‎src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
<script>
2-
/** @type {any} */
3-
export let data;
2+
/** @type {{ data: any }} */
3+
let { data } = $props();
44
5-
/** @type {string} */
6-
let beforeActiveRoundText = '';
7-
let afterActiveRoundText = '';
8-
let beforeDataValue = '';
9-
let afterDataValue = '';
105
const defaultValue = '-';
116
12-
$: {
13-
beforeDataValue = buildDataValue(data?.before_value);
14-
afterDataValue = buildDataValue(data?.after_value);
15-
beforeActiveRoundText = buildActiveRoundText(data?.before_value, data?.before_active_rounds);
16-
afterActiveRoundText = buildActiveRoundText(data?.after_value, data?.after_active_rounds);
17-
}
18-
197
/** @param {any} value */
208
function buildDataValue(value) {
219
return value || defaultValue;
@@ -28,7 +16,7 @@
2816
function buildActiveRoundText(value, activeRounds) {
2917
let text = '';
3018
31-
if (!!!value) {
19+
if (!value) {
3220
return text;
3321
}
3422
@@ -40,6 +28,11 @@
4028
4129
return text;
4230
}
31+
32+
let beforeDataValue = $derived(buildDataValue(data?.before_value));
33+
let afterDataValue = $derived(buildDataValue(data?.after_value));
34+
let beforeActiveRoundText = $derived(buildActiveRoundText(data?.before_value, data?.before_active_rounds));
35+
let afterActiveRoundText = $derived(buildActiveRoundText(data?.after_value, data?.after_active_rounds));
4336
</script>
4437
4538
{#if beforeDataValue != defaultValue || afterDataValue != defaultValue}

‎src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
<script>
2-
import { Button } from '@sveltestrap/sveltestrap';
3-
import Link from 'svelte-link/src/Link.svelte';
42
import Markdown from "$lib/common/markdown/Markdown.svelte";
53
import { ContentLogSource } from '$lib/helpers/enums';
64
import { utcToLocal } from '$lib/helpers/datetime';
75
import { directToAgentPage } from '$lib/helpers/utils/common';
86
9-
/** @type {import('$conversationTypes').ConversationContentLogModel} */
10-
export let data;
7+
/** @type {{ data: import('$conversationTypes').ConversationContentLogModel }} */
8+
let { data } = $props();
119
12-
let logDisplayStyle = '';
13-
let logTextStyle = '';
14-
let is_collapsed = true;
10+
let is_collapsed = $state(true);
1511
const unknownAgent = "Uknown";
1612
const collapsedSources = [
1713
ContentLogSource.Prompt,
@@ -25,22 +21,27 @@
2521
ContentLogSource.FunctionCall,
2622
];
2723
28-
$: {
29-
logDisplayStyle = '';
30-
logTextStyle = '';
24+
let logDisplayStyle = $derived.by(() => {
3125
if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
32-
logDisplayStyle = 'border border-secondary';
33-
logTextStyle = 'text-info';
26+
return 'border border-secondary';
3427
} else if (data.source === ContentLogSource.FunctionCall) {
35-
logDisplayStyle = 'bg-secondary';
28+
return 'bg-secondary';
3629
} else if (data.source === ContentLogSource.Prompt) {
37-
logDisplayStyle = 'text-secondary';
30+
return 'text-secondary';
3831
} else if (data.source === ContentLogSource.HardRule) {
39-
logDisplayStyle = 'text-warning';
32+
return 'text-warning';
4033
} else if (data.source === ContentLogSource.UserInput) {
41-
logDisplayStyle = "bg-danger";
34+
return 'bg-danger';
4235
}
43-
}
36+
return '';
37+
});
38+
39+
let logTextStyle = $derived.by(() => {
40+
if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
41+
return 'text-info';
42+
}
43+
return '';
44+
});
4445
4546
/** @param {any} e */
4647
function toggleText(e) {
@@ -54,9 +55,14 @@
5455
<div>
5556
<span class="h4">
5657
{#if data?.agent_id?.length > 0}
57-
<Link class="text-secondary text-decoration-underline" on:click={() => directToAgentPage(data.agent_id)}>
58+
<!-- svelte-ignore a11y_no_static_element_interactions -->
59+
<!-- svelte-ignore a11y_click_events_have_key_events -->
60+
<span
61+
class="text-secondary text-decoration-underline clickable"
62+
onclick={() => directToAgentPage(data.agent_id)}
63+
>
5864
{data.name || unknownAgent}
59-
</Link>
65+
</span>
6066
{:else}
6167
<span class="text-secondary">
6268
{data.name || unknownAgent}
@@ -75,15 +81,15 @@
7581
</div>
7682

7783
{#if collapsedSources.includes(data.source)}
78-
<Button class='toggle-btn btn-sm' color="link" on:click={(e) => toggleText(e)}>
84+
<button class="btn btn-link toggle-btn btn-sm" onclick={(e) => toggleText(e)}>
7985
{`${is_collapsed ? 'More +' : 'Less -'}`}
80-
</Button>
86+
</button>
8187
{/if}
8288
</div>
8389

8490
{#if data.message_id && data.source === ContentLogSource.UserInput}
8591
<div style="margin-top: 10px;">
8692
{`MessageId: ${data.message_id}`}
8793
</div>
88-
{/if}
94+
{/if}
8995
</div>

‎src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<script>
2-
// import JSONTree from 'svelte-json-tree';
3-
import { formatObject } from '$lib/helpers/utils/common';
4-
5-
/** @type {any} */
6-
export let data;
2+
/** @type {{ data: any }} */
3+
let { data } = $props();
74
</script>
85

96
<div class="log-element state-log-item" id={`state-log-${data.message_id}`}>

0 commit comments

Comments
 (0)