Skip to content

Commit 06e3889

Browse files
davidmyersdevdavidmyersdev
committed
Improve the performance of CoreScrollable 
1 parent 1a67fe4 commit 06e3889

File tree

13 files changed

+111
-78
lines changed

13 files changed

+111
-78
lines changed

‎app.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,6 @@ svg {
118118
overflow: hidden !important;
119119
}
120120
121-
[data-overlayscrollbars=host] [data-overlayscrollbars-viewport] {
122-
display: flex;
123-
flex-direction: column;
124-
flex-grow: 1;
125-
}
126-
127121
.os-scrollbar {
128122
/* https://kingsora.github.io/OverlayScrollbars/#:~:text=to%20read%20it.-,Styling,-OverlayScrollbars%20comes%20with */
129123
--os-handle-bg: rgb(var(--layer-bg-hover));

‎components/Assistant.vue

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -307,8 +307,8 @@ export default defineComponent({
307307
<template>
308308
<div class="flex flex-col flex-grow min-h-0">
309309
<div class="flex flex-col flex-grow flex-shrink min-h-0 relative">
310-
<CoreScrollable ref="historyElement" class="flex-grow flex-shrink min-h-0">
311-
<div class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
310+
<CoreScrollable ref="historyElement" v-slot="{ element }" class="flex-grow flex-shrink min-h-0">
311+
<div :ref="element" class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
312312
<CoreInput v-model="apiKey" :layer="1" :private="true" description="To use this feature, you need an OpenAI API key. Your API key will be stored locally on your device." label="API Key" />
313313
<CoreLayer>
314314
<CoreFormControlLayout>
@@ -470,36 +470,38 @@ export default defineComponent({
470470
<small class="inline-flex gap-1 items-center">An error occurred while communicating with the assistant during your previous request.</small>
471471
</p>
472472
<CoreLayer down>
473-
<CoreScrollable class="bg-layer rounded max-h-[40vh]">
474-
<div class="flex gap-2">
475-
<CoreEditor ref="inputElement" v-model="input" :layer="0" :options="inputOptions" />
476-
<CoreLayer v-if="apiKey" class="m-1 self-start sticky top-1">
477-
<CoreButton v-if="showTryAgainMessage" @click="tryAgain">
478-
Try again
479-
</CoreButton>
480-
<div v-else class="flex gap-1">
481-
<CoreButton :disabled="isWaiting || !isAllowedToSend" @click="onSend">
482-
<span v-if="isWaiting">
483-
Waiting for a reply...
484-
</span>
485-
<span v-else class="flex items-center gap-2">
486-
<span>Send</span>
487-
<span v-if="isDesktop" class="hidden md:flex text-layer-muted text-opacity-[inherit]">
488-
<Key>{{ modKey }}</Key>
489-
<Key>⏎</Key>
490-
</span>
491-
</span>
492-
</CoreButton>
493-
<CoreButton as="label" title="Attach images">
494-
<Icon name="ImagePlus" />
495-
<input class="hidden" type="file" accept="image/*" multiple @change="addFiles">
473+
<CoreScrollable v-slot="{ element }" class="bg-layer rounded max-h-[40vh]">
474+
<div :ref="element">
475+
<div class="flex gap-2">
476+
<CoreEditor ref="inputElement" v-model="input" :layer="0" :options="inputOptions" />
477+
<CoreLayer v-if="apiKey" class="m-1 self-start sticky top-1">
478+
<CoreButton v-if="showTryAgainMessage" @click="tryAgain">
479+
Try again
496480
</CoreButton>
481+
<div v-else class="flex gap-1">
482+
<CoreButton :disabled="isWaiting || !isAllowedToSend" @click="onSend">
483+
<span v-if="isWaiting">
484+
Waiting for a reply...
485+
</span>
486+
<span v-else class="flex items-center gap-2">
487+
<span>Send</span>
488+
<span v-if="isDesktop" class="hidden md:flex text-layer-muted text-opacity-[inherit]">
489+
<Key>{{ modKey }}</Key>
490+
<Key>⏎</Key>
491+
</span>
492+
</span>
493+
</CoreButton>
494+
<CoreButton as="label" title="Attach images">
495+
<Icon name="ImagePlus" />
496+
<input class="hidden" type="file" accept="image/*" multiple @change="addFiles">
497+
</CoreButton>
498+
</div>
499+
</CoreLayer>
500+
</div>
501+
<div v-if="files.length" class="flex flex-wrap gap-1 p-1">
502+
<div v-for="file in files" :key="file.name" class="relative border border-layer flex items-center justify-center sq-12 rounded overflow-hidden">
503+
<img class="h-min w-min object-cover" :src="file.dataUrl" :alt="file.name" :title="file.name">
497504
</div>
498-
</CoreLayer>
499-
</div>
500-
<div v-if="files.length" class="flex flex-wrap gap-1 p-1">
501-
<div v-for="file in files" :key="file.name" class="relative border border-layer flex items-center justify-center sq-12 rounded overflow-hidden">
502-
<img class="h-min w-min object-cover" :src="file.dataUrl" :alt="file.name" :title="file.name">
503505
</div>
504506
</div>
505507
</CoreScrollable>

‎components/CoreEditor.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ export default defineComponent({
121121
<template>
122122
<div class="core-editor flex flex-col-reverse lg:flex-col flex-grow flex-shrink min-h-0 rounded">
123123
<template v-if="options?.interface?.toolbar">
124-
<CoreScrollable class="core-editor-scrollable flex-shrink-0 w-full">
125-
<div class="mx-auto p-1 min-w-full">
124+
<CoreScrollable v-slot="{ element }" class="core-editor-scrollable flex-shrink-0 w-full">
125+
<div :ref="element" class="mx-auto p-1 min-w-full">
126126
<CoreEditorToolbar
127127
class="core-editor-toolbar flex-shrink-0 mx-auto"
128128
:upload="options?.toolbar?.upload"

‎components/CorePage.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ defineProps<{
55
</script>
66

77
<template>
8-
<CoreScrollable>
8+
<CoreScrollable v-slot="{ element }">
99
<article
10+
:ref="element"
1011
class="container flex flex-col mx-auto p-4"
1112
:class="{ 'max-w-prose': widthProse, 'md:px-16 md:py-8': !widthProse }"
1213
>

‎components/CoreScrollable.vue

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,57 @@
1-
<script lang="ts">
1+
<script lang="ts" setup>
22
import { OverlayScrollbars } from 'overlayscrollbars'
3-
import { defineComponent, onMounted, ref } from 'vue'
4-
5-
export default defineComponent({
6-
setup() {
7-
const scrollable = ref<OverlayScrollbars>()
8-
const scrollableElement = ref<HTMLElement>()
9-
10-
onMounted(() => {
11-
if (scrollableElement.value) {
12-
scrollable.value = OverlayScrollbars(scrollableElement.value, {
13-
scrollbars: {
14-
autoHide: 'leave',
15-
autoHideDelay: 200,
16-
},
17-
})
18-
}
3+
import { type VNodeRef, onMounted, shallowRef } from 'vue'
4+
import { isHtmlElement } from '/src/utils/dom'
5+
6+
const element = shallowRef<HTMLElement | null>()
7+
const scrollable = shallowRef<OverlayScrollbars>()
8+
const scrollableElement = shallowRef<HTMLElement>()
9+
10+
defineSlots<{
11+
default(props: { element: VNodeRef }): any,
12+
}>()
13+
14+
useResizeObserver(element, () => {
15+
scrollable.value?.update()
16+
})
17+
18+
onMounted(() => {
19+
if (scrollableElement.value) {
20+
scrollable.value = OverlayScrollbars(scrollableElement.value, {
21+
update: {
22+
debounce: 0,
23+
ignoreMutation() {
24+
return true
25+
},
26+
},
27+
scrollbars: {
28+
autoHide: 'leave',
29+
autoHideDelay: 200,
30+
},
1931
})
32+
}
33+
})
34+
35+
onUnmounted(() => {
36+
if (scrollable.value) {
37+
scrollable.value.destroy()
38+
}
39+
})
40+
41+
const setElementRef: VNodeRef = (el) => {
42+
if (isHtmlElement(el)) {
43+
element.value = el
44+
}
45+
}
2046
21-
return {
22-
scrollable,
23-
scrollableElement,
24-
}
25-
},
47+
defineExpose({
48+
scrollable,
49+
scrollableElement,
2650
})
2751
</script>
2852

2953
<template>
3054
<div ref="scrollableElement" class="overflow-auto">
31-
<slot />
55+
<slot :element="setElementRef" />
3256
</div>
3357
</template>

‎components/Modal.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@ export default defineComponent({
2828
<Icon name="Dismiss" />
2929
</button>
3030
</header>
31-
<CoreScrollable class="max-h-96">
32-
<slot />
31+
<CoreScrollable v-slot="{ element }" class="max-h-96">
32+
<div :ref="element">
33+
<slot />
34+
</div>
3335
</CoreScrollable>
3436
<footer v-if="hasFooter">
3537
<slot name="footer" />

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"moment": "^2.30.1",
5151
"mousetrap": "^1.6.5",
5252
"nanoid": "^3.3.7",
53-
"overlayscrollbars": "^2.4.6",
53+
"overlayscrollbars": "^2.10.0",
5454
"pinia": "^2.1.7",
5555
"remarkable": "^2.0.1",
5656
"vellma": "^0.8.1",

‎pages/assistant/system-instructions/new.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const addSavedInstructions = async () => {
88
</script>
99

1010
<template>
11-
<CoreScrollable class="flex-grow flex-shrink min-h-0">
12-
<div class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
11+
<CoreScrollable v-slot="{ element }" class="flex-grow flex-shrink min-h-0">
12+
<div :ref="element" class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
1313
<div>
1414
<h2 class="text-4xl">New Saved Instructions</h2>
1515
<p class="mt-2 text-layer-muted">Manage your saved system instructions.</p>

‎pages/docs/[docId]/meta.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export default {
140140
</script>
141141

142142
<template>
143-
<CoreScrollable v-if="doc">
144-
<div class="flex flex-col flex-grow">
143+
<CoreScrollable v-if="doc" v-slot="{ element }">
144+
<div :ref="element" class="flex flex-col flex-grow">
145145
<div class="flex flex-col gap-1 p-1">
146146
<button class="sidebar-link w-full" @click.stop="duplicateDocument">
147147
<Icon name="DocDuplicate" />

‎pages/force-graph.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,8 +219,10 @@ export default {
219219
<div class="flex h-full relative">
220220
<div v-if="edges.length || nodes.length" class="flex flex-row flex-grow h-full">
221221
<div ref="graphElement" class="flex-grow" />
222-
<CoreScrollable v-if="tag" class="flex-shrink md:max-w-md w-full p-4">
223-
<DocList :tag="tag" :cols="1" />
222+
<CoreScrollable v-if="tag" v-slot="{ element }" class="flex-shrink md:max-w-md w-full p-4">
223+
<div :ref="element">
224+
<DocList :tag="tag" :cols="1" />
225+
</div>
224226
</CoreScrollable>
225227
</div>
226228
<div v-else class="flex flex-col flex-grow items-center justify-center p-4 text-center text-layer-muted text-xl">Create relationships between your docs to use this feature.</div>

0 commit comments

Comments
 (0)