Skip to content

Commit c1b9845

Browse files
vincent99vincent99
committed
Different threading, styles
Signed-off-by: Vincent Fiduccia <vincent@acorn.io>
1 parent 2811bbb commit c1b9845

File tree

13 files changed

+220
-99
lines changed

13 files changed

+220
-99
lines changed

‎.vscode/launch.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@
55
"version": "0.2.0",
66
"configurations": [
77
{
8-
"name": "Launch file",
8+
"name": "Launch UI",
9+
"type": "node",
10+
"request": "launch",
11+
"program": "${workspaceFolder}/ui/node_modules/.bin/nuxt",
12+
"args": ["dev"],
13+
"skipFiles": [
14+
"<node_internals>/**"
15+
]
16+
},
17+
{
18+
"name": "Launch Server",
919
"type": "go",
1020
"request": "launch",
1121
"mode": "debug",

‎ui/app.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,11 @@ export default defineAppConfig({
22
ui: {
33
primary: 'slate',
44
gray: 'cool',
5+
6+
card: {
7+
body: {
8+
padding: 'px-1 py-1 sm:p-2'
9+
}
10+
}
511
},
612
})

‎ui/app.vue‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
<script lang="ts" setup>
22
import '@/styles/app.scss'
3-
4-
const sock = useSocket()
53
</script>
64
<template>
75
<div class="root bg-slate-100 dark:bg-slate-950">
8-
<nav class="bg-slate-200 dark:bg-slate-900">
9-
<LeftNav />
10-
</nav>
11-
<aside class="bg-slate-200 dark:bg-slate-900">
12-
<ThemeToggle />
13-
{{sock.status}}
14-
</aside>
6+
<LeftNav class="left-nav bg-slate-200 dark:bg-slate-900"/>
157
<main>
168
<NuxtPage />
179
</main>
@@ -21,27 +13,20 @@
2113
<style lang="scss" scoped>
2214
.root {
2315
--nav-width: 300px;
24-
--aside-height: 50px;
2516
2617
display: grid;
27-
grid-template-areas: "nav main"
28-
"aside main";
18+
grid-template-areas: "nav main";
2919
grid-template-columns: var(--nav-width) 1fr;
30-
grid-template-rows: 1fr var(--aside-height);
20+
3121
position: absolute;
3222
top: 0;
3323
left: 0;
3424
right: 0;
3525
bottom: 0;
3626
37-
NAV {
27+
.left-nav {
3828
grid-area: nav;
39-
overflow: auto;
40-
}
41-
42-
ASIDE {
43-
grid-area: aside;
44-
line-height: var(--aside-height);
29+
max-height: 100vh;
4530
}
4631
4732
MAIN {

‎ui/components/arguments.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ interface Props {
66
77
const { schema, modelValue: initialState } = defineProps<Props>()
88
const form = ref()
9-
const state = reactive(clone(initialState || {}))
9+
const state = reactive<any>(clone(initialState || {}))
1010
1111
if ( schema ) {
1212
for ( const k in schema.properties ) {
@@ -70,7 +70,7 @@ watchEffect(() => {
7070
</UFormGroup>
7171
</template>
7272
<template v-else>
73-
<UTextarea autoresize :rows="1" :value="state[k]" @update:modelValue="(v) => state[k] = v" />
73+
<UTextarea autoresize :rows="1" :value="state" @update:modelValue="(v) => state = v" />
7474
</template>
7575
</UForm>
7676
</div>

‎ui/components/call.vue‎

Lines changed: 68 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,28 @@ interface Props {
1111
const { run, call, referredTo, callMap, depth=0 } = defineProps<Props>()
1212
const prefs = usePrefs()
1313
14+
const isExpanded = computed(() => {
15+
return prefs.allExpanded || prefs.expanded[call.id] || false
16+
})
17+
1418
const children = computed(() => {
15-
return run.calls.filter(x => !referredTo[x.id] && x.parentID && x.parentID === call.id)
19+
return run.calls.filter(x => (!isExpanded.value || !call.showSystemMessages || !referredTo[x.id]) && x.parentID && x.parentID === call.id)
1620
})
1721
18-
const isExpanded = computed(() => {
19-
return prefs.allExpanded || prefs.expanded[call.id] || false
22+
const messages = computed(() => {
23+
const all = call.messages || []
24+
25+
if ( call.showSystemMessages ) {
26+
return all.slice()
27+
} else {
28+
return all.filter((msg) => {
29+
if ( ('role' in msg) ) {
30+
return false
31+
}
32+
33+
return true
34+
})
35+
}
2036
})
2137
2238
const icon = computed(() => {
@@ -54,38 +70,71 @@ const displayName = computed(() => {
5470
5571
return id.replace(/:1$/,'')
5672
})
73+
74+
const inputLimit = 50
75+
const outputLimit = 100
76+
const inputDisplay = computed(() => {
77+
return `${call.input || '<none>'}`
78+
})
79+
80+
const inputShort = computed(() => {
81+
return inputDisplay.value.substring(0, inputLimit) + (inputTruncated.value ? '…' : '')
82+
})
83+
84+
const inputTruncated = computed(() => {
85+
return inputDisplay.value.length > inputLimit
86+
})
87+
88+
const outputDisplay = computed(() => {
89+
return `${call.output || '<none>'}`
90+
})
91+
92+
const outputShort = computed(() => {
93+
return outputDisplay.value.substring(0, outputLimit) + (outputTruncated.value ? '…' : '')
94+
})
95+
96+
const outputTruncated = computed(() => {
97+
return outputDisplay.value.length > outputLimit
98+
})
99+
57100
</script>
58101
<template>
59-
<UCard :key="call.id" class="call">
102+
<UCard :key="call.id" class="call mt-3">
60103
<i v-if="prefs.debug" class="text-blue-400">{{call}}</i>
61-
<div class="clearfix">
62-
<div class="float-left">
104+
<div class="flex" :class="[isExpanded && 'mb-2']">
105+
<div class="flex-1">
63106
<div>
64-
<UButton v-if="children.length || call.messages?.length" size="xs" :icon="icon" @click="toggle" class="align-baseline"/>
107+
<UButton v-if="children.length || call.messages?.length || inputTruncated || outputTruncated" size="xs" :icon="icon" @click="toggle" class="align-baseline mr-1"/>
65108
{{displayName}}
109+
<template v-if="!isExpanded">({{inputShort}}) <i class="i-heroicons-arrow-right align-text-bottom"/> {{outputShort}}</template>
66110
</div>
67111
</div>
68-
<div class="float-right">
69-
<UBadge class="align-baseline mr-2" :id="call.id">
112+
<div class="flex-inline text-right">
113+
<UTooltip v-if="isExpanded" :text="call.showSystemMessages ? 'Internal messages shown' : 'Internal messages hidden'">
114+
<UToggle v-model="call.showSystemMessages" class="mr-2" off-icon="i-heroicons-bars-2" on-icon="i-heroicons-bars-4" />
115+
</UTooltip>
116+
117+
<!-- <UBadge size="md" class="align-baseline mr-2" :id="call.id" variant="subtle">
70118
<i class="i-heroicons-key"/>&nbsp;{{ prefs.mapCall(call.id) }}
71-
</UBadge>
72-
<UBadge :color="colorForState(call.state)" class="align-baseline">
119+
</UBadge> -->
120+
<UBadge size="md" :color="colorForState(call.state)" class="align-baseline" variant="subtle">
73121
<i :class="iconForState(call.state)"/>&nbsp;{{ucFirst(call.state)}}
74122
</UBadge>
75123
</div>
76124
</div>
77-
<div>
78-
<b>Input:</b> {{call.input || '<none>'}}
125+
126+
<div v-if="isExpanded">
127+
<b>Input:</b> <span class="whitespace-pre-wrap">{{call.input || '<none>'}}</span>
79128
</div>
80-
<div>
81-
<b>Output:</b> <span v-html="nlToBr(call.output || '<none>')"/>
129+
<div v-if="isExpanded">
130+
<b>Output:</b> <span class="whitespace-pre-wrap">{{call.output || '<none>'}}</span>
82131
</div>
83132

84-
<template v-if="isExpanded && call.messages?.length">
133+
<template v-if="isExpanded">
85134
<Message
86-
v-for="(msg, idx) in call.messages"
135+
v-for="(msg, idx) in messages"
87136
:key="idx"
88-
class="my-2"
137+
class="mt-1"
89138
:run="run"
90139
:call="call"
91140
:msg="msg"
@@ -95,9 +144,7 @@ const displayName = computed(() => {
95144
/>
96145
</template>
97146

98-
<div v-if="isExpanded && children.length" class="ml-5">
99-
CHILDREN
100-
{{referredTo}}
147+
<div v-if="children.length" class="ml-9">
101148
<Call
102149
v-for="(child, idx) in children"
103150
:key="idx"

‎ui/components/left-nav.vue‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// const router = useRouter()
33
const gptList = await useGpts().listAll()
44
const runList = await useRuns().findAll()
5+
const sock = useSocket()
56
67
const gptLinks = computed(() => {
78
return (gptList || []).map(x => { return {
@@ -13,12 +14,13 @@ const gptLinks = computed(() => {
1314
1415
const runLinks = computed(() => {
1516
const out = (runList || []).map(x => { return {
16-
label: x.id,
17+
id: x.id,
18+
label: (x.program?.name || '') + ' #' + x.id,
1719
icon: iconForState(x.state), // 'i-heroicons-cog animate-spin', // iconForState(x.state),
1820
to: `/run/${encodeURIComponent(x.id)}`
1921
}})
2022
21-
return sortBy(out, 'label:desc')
23+
return sortBy(out, 'id:desc')
2224
})
2325
2426
async function remove(e: MouseEvent, id: any) {
@@ -28,37 +30,61 @@ async function remove(e: MouseEvent, id: any) {
2830
</script>
2931

3032
<template>
31-
<div class="mt-5">
32-
<h4>GPTScripts</h4>
33-
<UVerticalNavigation :links="gptLinks" />
33+
<nav class="left">
34+
<div class="scripts text-slate-700 dark:text-slate-400">
35+
<h4 class="header px-3 py-2 bg-slate-300 dark:bg-slate-800">GPTScripts</h4>
36+
<UVerticalNavigation :links="gptLinks" />
37+
</div>
3438

35-
<h4 class="mt-5">
36-
Runs
37-
</h4>
38-
<UVerticalNavigation :links="runLinks">
39-
<template #badge="{ link }">
40-
<UButton
41-
class="absolute right-2 delete-btn"
42-
icon="i-heroicons-trash"
43-
aria-label="Delete"
44-
@click="e => remove(e, link.id)"
45-
size="xs"
46-
/>
47-
</template>
48-
</UVerticalNavigation>
49-
</div>
39+
<div class="runs text-slate-700 dark:text-slate-400">
40+
<h4 class="header px-3 py-2 bg-slate-300 dark:bg-slate-800">Run History</h4>
41+
<UVerticalNavigation :links="runLinks">
42+
<template #badge="{ link }">
43+
<UButton
44+
class="absolute right-2 delete-btn"
45+
icon="i-heroicons-trash"
46+
aria-label="Delete"
47+
@click="e => remove(e, link.id)"
48+
size="xs"
49+
/>
50+
</template>
51+
</UVerticalNavigation>
52+
</div>
53+
54+
<aside class="px-2 flex">
55+
<div class="flex-1 mt-1">
56+
<ThemeToggle />
57+
</div>
58+
<div class="flex-initial text-right" v-if="sock.sock.status !== 'OPEN'">
59+
<UBadge color="red" class="mt-2">
60+
<i class="i-heroicons-bolt-slash"/>&nbsp;{{ucFirst(sock.sock.status.toLowerCase())}}
61+
</UBadge>
62+
</div>
63+
</aside>
64+
</nav>
5065
</template>
5166

5267
<style lang="scss" scoped>
53-
H4 {
54-
padding-left: 1rem;
68+
$aside-height: 45px;
69+
70+
.left {
71+
display: grid;
72+
grid-template-areas: "scripts" "runs" "aside";
73+
grid-template-rows: 1fr 1fr $aside-height;
74+
height: 100%;
5575
}
5676
57-
LI {
58-
display: block;
77+
.scripts {
78+
grid-area: scripts;
79+
overflow-y: auto;
5980
}
60-
.active {
61-
background-color: red;
81+
82+
.runs {
83+
grid-area: runs;
84+
overflow-y: auto;
85+
}
86+
87+
ASIDE {
6288
}
6389
6490
.delete-btn {

‎ui/components/message.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,20 @@ const { run, /*call,*/ msg, referredTo, depth=0 } = defineProps<Props>()
2525
v-else-if="'err' in msg"
2626
icon="i-heroicons-exclamation-triangle"
2727
color="red"
28-
class="my-5"
28+
class="my-2"
2929
title="Error"
3030
variant="solid"
3131
:description="msg.err"
3232
/>
3333
<template v-else>
34-
<UCard v-if="typeof msg.content === 'string'" class="mb-5">
35-
<b>{{ucFirst(msg.role)}}:</b>
36-
{{msg.content}}
34+
<UCard v-if="typeof msg.content === 'string'" class="mt-2">
35+
<b>{{ucFirst(msg.role)}}:&nbsp;</b>
36+
<span class="whitespace-pre-wrap">{{`${msg.content}`.trim()}}</span>
3737
</UCard>
3838
<template v-else>
3939
<UCard v-for="(c, idx) in msg.content" :key="idx">
4040
<template v-if="'text' in c">
41-
<b>{{ucFirst(msg.role)}}:</b>
41+
<b>{{ucFirst(msg.role)}}:&nbsp;</b>
4242
{{c.text}}
4343
</template>
4444
<template v-else>

‎ui/config/types.d.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ declare global {
1010
}
1111

1212
interface Gpt {
13+
name: string
1314
entryToolId: string
1415
toolSet: Record<string, Tool>
1516
}
@@ -35,6 +36,7 @@ declare global {
3536
arguments: ArgSchema
3637
instructions: string
3738
tools: string[]
39+
localTools: Record<string,string>
3840
toolMapping: Record<string,string>
3941
modelName: string
4042
source: {
@@ -64,6 +66,7 @@ declare global {
6466
chatRequest?: JsonDict
6567
input?: Args
6668
output?: string
69+
showSystemMessages?: boolean
6770
}
6871

6972
interface BaseFrame {
@@ -145,7 +148,7 @@ declare global {
145148
}
146149

147150
interface ChatToolMessage {
148-
role: "system"|"assistant"|"user"
151+
role: "system"|"assistant"|"user"|"tool"
149152
content: string | (ChatToolCall|ChatText)[]
150153
}
151154

0 commit comments

Comments
 (0)