Skip to content

Commit 2fe0412

Browse files
davidmyersdevdavidmyersdev
authored
Improve search (#298)
2 parents e01ccee + acfd670 commit 2fe0412

27 files changed

+328
-109
lines changed

‎.eslintrc-rules.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"extends": ["artisan"],
33
"rules": {
44
"unicorn/prefer-string-starts-ends-with": ["off", {}],
5+
"unused-imports/no-unused-imports": ["off"],
56
"vue/no-ref-object-destructure": ["error"],
67
"vue/no-setup-props-reactivity-loss": ["error"],
78
"vue/singleline-html-element-content-newline": ["off", {}],

‎.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@
2020
"leave-to",
2121
"ngClass"
2222
],
23+
"typescript.preferences.importModuleSpecifier": "non-relative",
2324
"typescript.tsdk": "./node_modules/typescript/lib"
2425
}

‎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));

‎assets/css/tailwind.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,14 @@
378378
}
379379

380380
@layer utilities {
381+
.contain-layout {
382+
contain: layout;
383+
}
384+
385+
.contain-strict {
386+
contain: strict;
387+
}
388+
381389
.flex-direction-inherit {
382390
flex-direction: inherit;
383391
}

‎components/Assistant.vue

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { keymap } from '@codemirror/view'
44
import { type Options } from 'ink-mde'
55
import { nanoid } from 'nanoid'
66
import CoreLink from './CoreLink.vue'
7-
import { type CoreEditor, type CoreScrollable } from '#components'
87
import CoreDivider from '#root/components/CoreDivider.vue'
8+
import type CoreEditor from '/components/CoreEditor.vue'
9+
import type CoreScrollable from '/components/CoreScrollable.vue'
910
import { type SystemInstruction, useSystemInstructions } from '#root/composables/useSystemInstructions'
1011
1112
export default defineComponent({
@@ -307,8 +308,8 @@ export default defineComponent({
307308
<template>
308309
<div class="flex flex-col flex-grow min-h-0">
309310
<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">
311+
<CoreScrollable ref="historyElement" v-slot="{ element }" class="flex-grow flex-shrink min-h-0">
312+
<div :ref="element" class="flex flex-col flex-grow gap-4 m-auto max-w-prose p-2 w-full">
312313
<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" />
313314
<CoreLayer>
314315
<CoreFormControlLayout>
@@ -470,36 +471,38 @@ export default defineComponent({
470471
<small class="inline-flex gap-1 items-center">An error occurred while communicating with the assistant during your previous request.</small>
471472
</p>
472473
<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">
474+
<CoreScrollable v-slot="{ element }" class="bg-layer rounded max-h-[40vh]">
475+
<div :ref="element">
476+
<div class="flex gap-2">
477+
<CoreEditor ref="inputElement" v-model="input" :layer="0" :options="inputOptions" />
478+
<CoreLayer v-if="apiKey" class="m-1 self-start sticky top-1">
479+
<CoreButton v-if="showTryAgainMessage" @click="tryAgain">
480+
Try again
496481
</CoreButton>
482+
<div v-else class="flex gap-1">
483+
<CoreButton :disabled="isWaiting || !isAllowedToSend" @click="onSend">
484+
<span v-if="isWaiting">
485+
Waiting for a reply...
486+
</span>
487+
<span v-else class="flex items-center gap-2">
488+
<span>Send</span>
489+
<span v-if="isDesktop" class="hidden md:flex text-layer-muted text-opacity-[inherit]">
490+
<Key>{{ modKey }}</Key>
491+
<Key>⏎</Key>
492+
</span>
493+
</span>
494+
</CoreButton>
495+
<CoreButton as="label" title="Attach images">
496+
<Icon name="ImagePlus" />
497+
<input class="hidden" type="file" accept="image/*" multiple @change="addFiles">
498+
</CoreButton>
499+
</div>
500+
</CoreLayer>
501+
</div>
502+
<div v-if="files.length" class="flex flex-wrap gap-1 p-1">
503+
<div v-for="file in files" :key="file.name" class="relative border border-layer flex items-center justify-center sq-12 rounded overflow-hidden">
504+
<img class="h-min w-min object-cover" :src="file.dataUrl" :alt="file.name" :title="file.name">
497505
</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">
503506
</div>
504507
</div>
505508
</CoreScrollable>

‎components/AssistantEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Prec } from '@codemirror/state'
33
import { keymap } from '@codemirror/view'
44
import { type Options } from 'ink-mde'
5-
import { type CoreEditor } from '#components'
5+
import type CoreEditor from '/components/CoreEditor.vue'
66
import { readonly } from '#root/src/vendor/plugins/readonly'
77
88
export default defineComponent({

‎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/CoreListboxButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts" setup>
22
import { ListboxButton } from '@headlessui/vue'
3-
import { CoreButton } from '#components'
3+
import CoreButton from '/components/CoreButton.vue'
44
</script>
55

66
<template>

‎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>

0 commit comments

Comments
 (0)