bug fixes, and performance improvements, and drawer
This commit is contained in:
+151
-98
@@ -4,11 +4,17 @@ import { computed, onMounted, ref, watch, onUnmounted, nextTick, type Ref } from
|
||||
import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
|
||||
import type { Agent } from '~/composables/useAgents';
|
||||
import type FileSelector from './FileSelector.vue';
|
||||
import { getComposerHeight } from '~/utils/composer-size';
|
||||
|
||||
const { allModels } = await useModels();
|
||||
const { updateAgent, patchAgentLocally } = await useAgents();
|
||||
|
||||
const inputHeight: Ref<string> = ref('auto');
|
||||
const isDrawerOpen = useCookie<boolean>("chat:tools-drawer", { default: () => false });
|
||||
watch(isDrawerOpen, () => {
|
||||
emit("resize");
|
||||
});
|
||||
|
||||
const inputHeight: Ref<string> = ref('48px');
|
||||
const fileSelectorRef = ref<InstanceType<typeof FileSelector> | null>(null);
|
||||
const inputRef = ref<HTMLTextAreaElement | null>(null);
|
||||
let tempInput = '';
|
||||
@@ -303,47 +309,57 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
|
||||
};
|
||||
|
||||
const mirrorRef = ref<HTMLDivElement | null>(null);
|
||||
const MIRROR_PROPERTIES = [
|
||||
'box-sizing', 'font-family', 'font-size', 'font-weight', 'font-style',
|
||||
'line-height', 'letter-spacing', 'word-spacing', 'text-align', 'text-indent',
|
||||
'text-transform', 'tab-size', 'padding-top', 'padding-bottom', 'padding-left',
|
||||
'padding-right', 'border-top-width', 'border-bottom-width', 'border-left-width',
|
||||
'border-right-width', 'border-style', 'white-space', 'overflow-wrap', 'word-break',
|
||||
] as const;
|
||||
let sizingRaf: number | undefined;
|
||||
let sizingObserver: ResizeObserver | undefined;
|
||||
let typographyObserver: MutationObserver | undefined;
|
||||
let sizingDirty = true;
|
||||
let mirrorWidth = '';
|
||||
let lineHeight = 24;
|
||||
let padding = 0;
|
||||
let borders = 0;
|
||||
let borderBox = true;
|
||||
|
||||
const resizeTextArea = () => {
|
||||
const textarea = inputRef.value;
|
||||
const mirror = mirrorRef.value;
|
||||
if (!textarea || !mirror) return;
|
||||
if (import.meta.server || sizingRaf !== undefined) return;
|
||||
sizingRaf = requestAnimationFrame(() => {
|
||||
sizingRaf = undefined;
|
||||
const textarea = inputRef.value;
|
||||
const mirror = mirrorRef.value;
|
||||
if (!textarea || !mirror) return;
|
||||
|
||||
emit('resize');
|
||||
nextTick().then(() => {
|
||||
mirror.textContent = (textarea.value || '\u200b') + '\n';
|
||||
if (sizingDirty) {
|
||||
// Finish style reads before changing the isolated measurement box.
|
||||
const styles = getComputedStyle(textarea);
|
||||
const values = MIRROR_PROPERTIES.map(property => styles.getPropertyValue(property));
|
||||
mirrorWidth = styles.width;
|
||||
lineHeight = Number.parseFloat(styles.lineHeight) || Number.parseFloat(styles.fontSize) * 1.2;
|
||||
padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
|
||||
borders = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
|
||||
borderBox = styles.boxSizing === 'border-box';
|
||||
MIRROR_PROPERTIES.forEach((property, index) => mirror.style.setProperty(property, values[index]!));
|
||||
mirror.style.width = mirrorWidth;
|
||||
sizingDirty = false;
|
||||
}
|
||||
|
||||
const textareaStyles = getComputedStyle(textarea);
|
||||
mirror.style.width = textareaStyles.width;
|
||||
mirror.style.fontFamily = textareaStyles.fontFamily;
|
||||
mirror.style.fontSize = textareaStyles.fontSize;
|
||||
mirror.style.lineHeight = textareaStyles.lineHeight;
|
||||
mirror.style.letterSpacing = textareaStyles.letterSpacing;
|
||||
mirror.style.wordSpacing = textareaStyles.wordSpacing;
|
||||
mirror.style.textAlign = textareaStyles.textAlign;
|
||||
mirror.style.paddingTop = textareaStyles.paddingTop;
|
||||
mirror.style.paddingBottom = textareaStyles.paddingBottom;
|
||||
mirror.style.paddingLeft = textareaStyles.paddingLeft;
|
||||
mirror.style.paddingRight = textareaStyles.paddingRight;
|
||||
mirror.style.borderTopWidth = textareaStyles.borderTopWidth;
|
||||
mirror.style.borderBottomWidth = textareaStyles.borderBottomWidth;
|
||||
mirror.style.borderLeftWidth = textareaStyles.borderLeftWidth;
|
||||
mirror.style.borderRightWidth = textareaStyles.borderRightWidth;
|
||||
mirror.style.whiteSpace = 'pre-wrap';
|
||||
mirror.style.wordWrap = 'break-word';
|
||||
mirror.style.overflow = 'hidden';
|
||||
// Preserve the final empty line without adding an extra line to ordinary text.
|
||||
mirror.textContent = textarea.value + '\u200b';
|
||||
const height = `${getComposerHeight(mirror.scrollHeight, lineHeight, padding, borders, borderBox)}px`;
|
||||
if (height === inputHeight.value) return;
|
||||
|
||||
const lineHeight = 24;
|
||||
const minLines = 2;
|
||||
const maxLines = 10;
|
||||
const minHeight = minLines * lineHeight;
|
||||
const maxHeight = maxLines * lineHeight;
|
||||
const height = Math.min(Math.max(mirror.scrollHeight, minHeight), maxHeight);
|
||||
inputHeight.value = `${height}px`;
|
||||
// Capture bottom-follow intent before applying the new height.
|
||||
emit('resize');
|
||||
inputHeight.value = height;
|
||||
});
|
||||
};
|
||||
|
||||
watch(textAreaValue, resizeTextArea, { immediate: true });
|
||||
watch(textAreaValue, resizeTextArea, { flush: 'post' });
|
||||
|
||||
let hasCommandKey = false;
|
||||
if (import.meta.server) {
|
||||
@@ -357,41 +373,51 @@ onBeforeMount(() => {
|
||||
tempInput = (document.getElementById('chat') as HTMLInputElement)?.value ?? '';
|
||||
});
|
||||
|
||||
let resizeRafId: number | undefined;
|
||||
const handleWindowResize = () => {
|
||||
if (resizeRafId) return;
|
||||
resizeRafId = requestAnimationFrame(() => {
|
||||
resizeRafId = undefined;
|
||||
resizeTextArea();
|
||||
});
|
||||
}
|
||||
sizingDirty = true;
|
||||
resizeTextArea();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
textAreaValue.value = tempInput;
|
||||
document.addEventListener('keydown', handleWindowKeyDown);
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
inputRef.value?.addEventListener('paste', handlePaste);
|
||||
let observedWidth: number | undefined;
|
||||
sizingObserver = new ResizeObserver(([entry]) => {
|
||||
if (!entry || entry.contentRect.width === observedWidth) return;
|
||||
observedWidth = entry.contentRect.width;
|
||||
handleWindowResize();
|
||||
});
|
||||
if (inputRef.value) sizingObserver.observe(inputRef.value);
|
||||
typographyObserver = new MutationObserver(handleWindowResize);
|
||||
typographyObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style'] });
|
||||
document.fonts.addEventListener('loadingdone', handleWindowResize);
|
||||
handleWindowResize();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleWindowKeyDown);
|
||||
window.removeEventListener('resize', handleWindowResize);
|
||||
if (resizeRafId !== undefined) cancelAnimationFrame(resizeRafId);
|
||||
if (sizingRaf !== undefined) cancelAnimationFrame(sizingRaf);
|
||||
sizingObserver?.disconnect();
|
||||
typographyObserver?.disconnect();
|
||||
document.fonts.removeEventListener('loadingdone', handleWindowResize);
|
||||
inputRef.value?.removeEventListener('paste', handlePaste);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['w-full flex max-h-full', $attrs.class]">
|
||||
<div ref="mirrorRef" aria-hidden="true"
|
||||
class="absolute top-0 left-0 pointer-events-none invisible overflow-hidden h-0"></div>
|
||||
<div class="relative w-full flex flex-shrink-1 flex-col gap-3 p-2 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
|
||||
<div :class="['w-full flex flex-col max-h-full', $attrs.class]">
|
||||
<div ref="mirrorRef" data-chat-measurement aria-hidden="true"
|
||||
class="fixed top-0 left-0 pointer-events-none invisible overflow-hidden h-0 [contain:layout_style_paint]"></div>
|
||||
<div class="relative z-10 w-full flex flex-shrink-1 flex-col gap-3 p-2 rounded-2xl border transition-border ease-in-out duration-300 bg-[var(--bg-container)]
|
||||
border-[var(--color-border)] focus-within:border-[var(--color-border-active)]">
|
||||
<div v-if="files.length > 0"
|
||||
class="flex-shrink-0 flex flex-nowrap gap-2 pt-2 px-2 pb-1 overflow-x-auto overflow-y-hidden [scrollbar-width:thin]">
|
||||
<!-- TODO: show attachment previews -->
|
||||
<AttachmentPreview v-for="file in files" @delete="files = files.filter((f) => f.id !== file.id)"
|
||||
@retry="fileSelectorRef?.retryFile(file.id)" :key="file.id" :file="file" />
|
||||
@retry="fileSelectorRef?.retryFile(file.id)" :key="file.id" :file="file"></AttachmentPreview>
|
||||
</div>
|
||||
<div class="min-w-0 max-h-full">
|
||||
<!-- Grammarly literally breaks everything, go fuck yourself -->
|
||||
@@ -404,20 +430,76 @@ onUnmounted(() => {
|
||||
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<!-- TODO: since we dont want to model selector dropdown to potentially overflow, it has max-width: 100%, so, we need to maake the trigger large enough to fit the entire width of the dropdown -->
|
||||
<div class="flex flex-1 gap-1 min-w-0">
|
||||
<div class="flex flex-1 items-center gap-1 min-w-0">
|
||||
<button v-if="selectedModel?.capabilities.includes('tools')"
|
||||
type="button"
|
||||
@click="isDrawerOpen = !isDrawerOpen"
|
||||
class="sm:hidden relative flex items-center justify-center h-8.5 w-8.5 shrink-0 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200"
|
||||
:aria-label="isDrawerOpen ? 'Close tools drawer' : 'Open tools drawer'"
|
||||
:aria-expanded="isDrawerOpen">
|
||||
<span class="i-mynaui-chevron-down text-5 text-[var(--text-secondary)] transition-transform duration-200"
|
||||
:class="{ 'rotate-180': isDrawerOpen }"></span>
|
||||
<span v-if="!isDrawerOpen && (searchConfig.enabled || toolsConfig.python)"
|
||||
class="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-[var(--color-accent)]"></span>
|
||||
</button>
|
||||
<ModelSelector v-if="providers !== undefined" :add-hotkey="true" v-model="selectedModel"
|
||||
:providers="providers" />
|
||||
<SearchSelector v-if="selectedModel?.capabilities.includes('tools')" :enabled="searchConfig.enabled"
|
||||
@update:enabled="(v: boolean) => { searchConfig.enabled = v; saveSearchConfig() }" />
|
||||
<ToolSelector v-if="selectedModel?.capabilities.includes('tools')" :python="toolsConfig.python"
|
||||
@update:python="(v: boolean) => { toolsConfig.python = v; saveToolsConfig() }" />
|
||||
<FileSelector ref="fileSelectorRef" :selected-model="selectedModel" v-model="files" />
|
||||
:providers="providers"></ModelSelector>
|
||||
<div v-if="selectedModel?.capabilities.includes('tools')" class="hidden sm:flex items-center gap-1">
|
||||
<SearchSelector :enabled="searchConfig.enabled"
|
||||
@update:enabled="(v: boolean) => { searchConfig.enabled = v; saveSearchConfig(); }"></SearchSelector>
|
||||
<ToolSelector :python="toolsConfig.python"
|
||||
@update:python="(v: boolean) => { toolsConfig.python = v; saveToolsConfig(); }"></ToolSelector>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="allowManualRole" class="flex items-center">
|
||||
<button aria-label="Send message" @click="handleSubmit"
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<FileSelector ref="fileSelectorRef" :selected-model="selectedModel" v-model="files"></FileSelector>
|
||||
<div v-if="allowManualRole" class="flex items-center">
|
||||
<button aria-label="Send message" @click="handleSubmit"
|
||||
:disabled="((!inputValue.content.trim() && files.length === 0) && !loading) || isUploading || hasFailedUploads"
|
||||
:class="[
|
||||
'h-8 w-8 rounded-l-lg rounded-r-none transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
||||
(inputValue.content.trim() || files.length > 0) && !loading && !isUploading && !hasFailedUploads
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)]'
|
||||
: 'text-[var(--text-dim)]',
|
||||
loading && 'bg-[var(--color-hover)] @hover:bg-[var(--color-active)]',
|
||||
]">
|
||||
<span v-if="loading" class="text-6.5 i-mynaui-stop-solid"></span>
|
||||
<span v-else class="text-5 i-mynaui-send-solid"></span>
|
||||
</button>
|
||||
<Dropdown placement="bottom-end">
|
||||
<template #default="{ setRef, isOpen, toggle }">
|
||||
<button :ref="setRef" aria-label="Message options" @click="toggle"
|
||||
:disabled="(!inputValue.content.trim() && files.length === 0) || loading || isUploading || hasFailedUploads"
|
||||
:class="[
|
||||
'h-8 w-6 rounded-r-lg rounded-l-none transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed border-l border-[var(--text-dim)] disabled:border-transparent',
|
||||
(inputValue.content.trim() || files.length > 0) && !loading && !isUploading && !hasFailedUploads
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)] disabled:bg-transparent'
|
||||
: 'text-[var(--text-dim)]',
|
||||
loading && 'bg-[var(--color-hover)] @hover:bg-[var(--color-active)]',
|
||||
]">
|
||||
<span class="text-4.5 i-mynaui-chevron-down" :class="{ 'rotate-180': isOpen }"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template #dropdown="{ close }">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-[var(--text-primary)] @hover:bg-[var(--color-hover)] transition-colors whitespace-nowrap"
|
||||
@click="handleAddMessage('user'); close()">
|
||||
<span class="text-4 i-mynaui-user"></span>
|
||||
Add as User
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-[var(--text-primary)] @hover:bg-[var(--color-hover)] transition-colors whitespace-nowrap"
|
||||
@click="handleAddMessage('assistant'); close()">
|
||||
<span class="text-4 i-mynaui-sparkles"></span>
|
||||
Add as Assistant
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<button v-else aria-label="Send message" @click="handleSubmit"
|
||||
:disabled="((!inputValue.content.trim() && files.length === 0) && !loading) || isUploading || hasFailedUploads"
|
||||
:class="[
|
||||
'h-8 w-8 rounded-l-lg rounded-r-none transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
||||
'h-8 w-8 rounded-xl transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
||||
(inputValue.content.trim() || files.length > 0) && !loading && !isUploading && !hasFailedUploads
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)]'
|
||||
: 'text-[var(--text-dim)]',
|
||||
@@ -426,48 +508,19 @@ onUnmounted(() => {
|
||||
<span v-if="loading" class="text-6.5 i-mynaui-stop-solid"></span>
|
||||
<span v-else class="text-5 i-mynaui-send-solid"></span>
|
||||
</button>
|
||||
<Dropdown placement="bottom-end">
|
||||
<template #default="{ setRef, isOpen, toggle }">
|
||||
<button :ref="setRef" aria-label="Message options" @click="toggle"
|
||||
:disabled="(!inputValue.content.trim() && files.length === 0) || loading || isUploading || hasFailedUploads"
|
||||
:class="[
|
||||
'h-8 w-6 rounded-r-lg rounded-l-none transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed border-l border-[var(--text-dim)] disabled:border-transparent',
|
||||
(inputValue.content.trim() || files.length > 0) && !loading && !isUploading && !hasFailedUploads
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)] disabled:bg-transparent'
|
||||
: 'text-[var(--text-dim)]',
|
||||
loading && 'bg-[var(--color-hover)] @hover:bg-[var(--color-active)]',
|
||||
]">
|
||||
<span class="text-4.5 i-mynaui-chevron-down" :class="{ 'rotate-180': isOpen }"></span>
|
||||
</button>
|
||||
</template>
|
||||
<template #dropdown="{ close }">
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-[var(--text-primary)] @hover:bg-[var(--color-hover)] transition-colors whitespace-nowrap"
|
||||
@click="handleAddMessage('user'); close()">
|
||||
<span class="text-4 i-mynaui-user"></span>
|
||||
Add as User
|
||||
</button>
|
||||
<button
|
||||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-[var(--text-primary)] @hover:bg-[var(--color-hover)] transition-colors whitespace-nowrap"
|
||||
@click="handleAddMessage('assistant'); close()">
|
||||
<span class="text-4 i-mynaui-sparkles"></span>
|
||||
Add as Assistant
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<button v-else aria-label="Send message" @click="handleSubmit"
|
||||
:disabled="((!inputValue.content.trim() && files.length === 0) && !loading) || isUploading || hasFailedUploads"
|
||||
:class="[
|
||||
'h-8 w-8 rounded-xl transition-all duration-200 flex items-center justify-center disabled:cursor-not-allowed disabled:bg-transparent',
|
||||
(inputValue.content.trim() || files.length > 0) && !loading && !isUploading && !hasFailedUploads
|
||||
? 'bg-[var(--color-accent)] text-[var(--color-accent-text)] @hover:bg-[var(--color-accent-hover)]'
|
||||
: 'text-[var(--text-dim)]',
|
||||
loading && 'bg-[var(--color-hover)] @hover:bg-[var(--color-active)]',
|
||||
]">
|
||||
<span v-if="loading" class="text-6.5 i-mynaui-stop-solid"></span>
|
||||
<span v-else class="text-5 i-mynaui-send-solid"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedModel?.capabilities.includes('tools')"
|
||||
class="sm:hidden relative z-0 mx-auto w-[calc(100%-4px)] transition-[height] duration-250 ease-[cubic-bezier(0.4,_0,_0.2,_1)]"
|
||||
:class="isDrawerOpen ? 'h-[44px]' : 'h-0'">
|
||||
<div class="absolute -top-4 left-0 right-0 pt-5 px-3 pb-1.5 rounded-b-2xl border-x border-b border-[var(--color-border)] bg-[var(--bg-surface)] flex items-center gap-1.5 transition-[transform,opacity] duration-250 ease-[cubic-bezier(0.4,_0,_0.2,_1)]"
|
||||
:class="isDrawerOpen ? 'translate-y-0 opacity-100' : '-translate-y-[44px] opacity-0 pointer-events-none'">
|
||||
<SearchSelector :enabled="searchConfig.enabled"
|
||||
@update:enabled="(v: boolean) => { searchConfig.enabled = v; saveSearchConfig(); }"></SearchSelector>
|
||||
<ToolSelector :python="toolsConfig.python"
|
||||
@update:python="(v: boolean) => { toolsConfig.python = v; saveToolsConfig(); }"></ToolSelector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarkdownAstNode, MarkdownElementNode } from '~/utils/markdown';
|
||||
import { createMarkdownParser, getNodeAttributes, getNodeChildren, getNodeTag, splitParagraphBreaks, textContent, toVueAttributes } from '~/utils/markdown';
|
||||
import { createTextVNode, h, ref, watch } from 'vue';
|
||||
import type { MarkdownAstNode } from '~/utils/markdown';
|
||||
import { agentParser, userParser, getNodeAttributes, getNodeChildren, getNodeTag, splitParagraphBreaks, textContent, toVueAttributes } from '~/utils/markdown';
|
||||
import { createTextVNode, h, shallowRef, watch } from 'vue';
|
||||
import type { SearchSource } from '~/utils/tool-rendering';
|
||||
import SourceCitation from './SourceCitation.vue';
|
||||
import MarkdownMath from './Math.vue';
|
||||
import MarkdownShikiHighlight from './ShikiHighlight.vue';
|
||||
|
||||
@@ -9,15 +11,19 @@ const props = defineProps<{
|
||||
content: string;
|
||||
finished: boolean;
|
||||
id: string;
|
||||
sources?: ReadonlyMap<string, SearchSource>;
|
||||
citations?: boolean;
|
||||
}>();
|
||||
|
||||
const parser = createMarkdownParser();
|
||||
const parser = props.citations ? agentParser : userParser;
|
||||
const parse = async (content: string, finished: boolean) => {
|
||||
const tree = await parser(content, { streaming: !finished });
|
||||
// Copy-on-write: br-free trees return by reference with no allocation.
|
||||
return splitParagraphBreaks(tree);
|
||||
};
|
||||
|
||||
const parsed = ref(await parse(props.content, props.finished));
|
||||
// Parsed trees are replaced, never mutated. Avoid proxying every AST node.
|
||||
const parsed = shallowRef(await parse(props.content, props.finished));
|
||||
let parseVersion = 0;
|
||||
|
||||
watch(
|
||||
@@ -46,6 +52,11 @@ const renderNode = (node: MarkdownAstNode, path: string): any => {
|
||||
|
||||
const tag = getNodeTag(node);
|
||||
const attributes = getNodeAttributes(node);
|
||||
if (tag === 'source-cite') {
|
||||
const ids = typeof attributes.ids === "string" ? attributes.ids.split(",") : [];
|
||||
return h(SourceCitation, { key: path, ids, sources: props.sources });
|
||||
}
|
||||
|
||||
if (tag === 'pre') {
|
||||
const language = typeof attributes.language === 'string' ? attributes.language : 'text';
|
||||
return h(MarkdownShikiHighlight, {
|
||||
@@ -79,9 +90,7 @@ const render = () => {
|
||||
.map((node, index) => renderNode(node, `${props.id}.${index}`))
|
||||
.filter((child) => child !== null);
|
||||
|
||||
return h('div', { class: 'prose-wrapper' }, [
|
||||
h('article', { class: 'markdown-body' }, children),
|
||||
]);
|
||||
return h('article', { class: 'prose-wrapper markdown-body' }, children);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,8 +3,6 @@ import { type Grammar } from 'shiki';
|
||||
import { hashSync } from '~/utils/hash';
|
||||
const props = defineProps<{ code: string; language: string }>();
|
||||
|
||||
const start = Date.now();
|
||||
|
||||
const MAX_LENGTH = 15000;
|
||||
|
||||
const renderId = `${useId()}-${hashSync(props.code + props.language)}`;
|
||||
@@ -76,8 +74,6 @@ onUnmounted(() => {
|
||||
if (copyTimeout) clearTimeout(copyTimeout);
|
||||
clear();
|
||||
});
|
||||
|
||||
console.log("shiki codeblock rendered in", Date.now() - start);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import type { SearchSource } from "~/utils/tool-rendering";
|
||||
import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
|
||||
import { computed, onBeforeUnmount, ref, useId } from "vue";
|
||||
import { getFaviconUrl } from "~/utils/tool-rendering";
|
||||
|
||||
const props = defineProps<{
|
||||
ids: string[];
|
||||
sources?: ReadonlyMap<string, SearchSource>;
|
||||
}>();
|
||||
|
||||
const entries = computed(() => [...new Set(props.ids)].map(id => ({ id, source: props.sources?.get(id) })));
|
||||
const firstSource = computed(() => entries.value.find(entry => entry.source)?.source);
|
||||
const label = computed(() => {
|
||||
const first = firstSource.value?.hostname ?? "Source unavailable";
|
||||
return entries.value.length > 1 ? `${first} +${entries.value.length - 1}` : first;
|
||||
});
|
||||
const popupId = useId();
|
||||
const trigger = ref<HTMLElement | null>(null);
|
||||
const preview = ref<HTMLElement | null>(null);
|
||||
const open = ref(false);
|
||||
const failedFavicons = ref(new Set<string>());
|
||||
const { floatingStyles, placement } = useFloating(trigger, preview, {
|
||||
open,
|
||||
strategy: "fixed",
|
||||
placement: "top-start",
|
||||
middleware: [offset(8), flip(), shift({ padding: 12 })],
|
||||
whileElementsMounted: autoUpdate,
|
||||
transform: false,
|
||||
});
|
||||
|
||||
const transformOrigin = computed(() =>
|
||||
placement.value.startsWith("top")
|
||||
? "transform-origin-bottom-center"
|
||||
: "transform-origin-top-center"
|
||||
);
|
||||
|
||||
let closeTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
let pointerInside = false;
|
||||
|
||||
const cancelClose = () => {
|
||||
clearTimeout(closeTimer);
|
||||
closeTimer = undefined;
|
||||
};
|
||||
|
||||
const showPreview = () => {
|
||||
cancelClose();
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
const scheduleClose = () => {
|
||||
cancelClose();
|
||||
// Allow the pointer to cross the gap between the badge and the preview.
|
||||
closeTimer = setTimeout(() => {
|
||||
closeTimer = undefined;
|
||||
const focused = document.activeElement;
|
||||
if (!pointerInside && !trigger.value?.contains(focused) && !preview.value?.contains(focused)) {
|
||||
open.value = false;
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
const onPointerEnter = (event: PointerEvent) => {
|
||||
if (event.pointerType === "touch") {
|
||||
return;
|
||||
}
|
||||
pointerInside = true;
|
||||
showPreview();
|
||||
};
|
||||
|
||||
const onPointerLeave = (event: PointerEvent) => {
|
||||
if (event.pointerType === "touch") {
|
||||
return;
|
||||
}
|
||||
pointerInside = false;
|
||||
scheduleClose();
|
||||
};
|
||||
|
||||
const dismissPreview = () => {
|
||||
cancelClose();
|
||||
if (preview.value?.contains(document.activeElement)) {
|
||||
trigger.value?.focus();
|
||||
}
|
||||
open.value = false;
|
||||
};
|
||||
|
||||
onBeforeUnmount(cancelClose);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a ref="trigger" :href="firstSource?.url" target="_blank" rel="noopener noreferrer"
|
||||
:tabindex="firstSource ? undefined : 0" :aria-expanded="open" :aria-controls="open ? popupId : undefined"
|
||||
@pointerenter="onPointerEnter" @pointerleave="onPointerLeave" @focusin="showPreview" @focusout="scheduleClose"
|
||||
@keydown.esc.stop.prevent="dismissPreview"
|
||||
class="inline-flex items-center gap-1 max-w-64 mx-1 px-2 border border-[var(--color-border)] rounded-full bg-[var(--bg-container)] hover:bg-[var(--color-hover)] transition-colors text-[var(--text-secondary)] text-xs align-baseline cursor-pointer focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-[var(--text-secondary)] focus-visible:outline-offset-2 decoration-none">
|
||||
<img v-if="firstSource && !failedFavicons.has(firstSource.hostname)" :src="getFaviconUrl(firstSource.hostname)"
|
||||
alt="" loading="lazy" class="rounded-[4px] w-[0.9rem] h-[0.9rem] m-0"
|
||||
@error="failedFavicons.add(firstSource.hostname)">
|
||||
{{ label }}
|
||||
</a>
|
||||
<Transition enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
|
||||
leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
||||
leave-from-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 translate-y-1">
|
||||
<span v-if="open" :id="popupId" ref="preview" @pointerenter="onPointerEnter" @pointerleave="onPointerLeave"
|
||||
@focusin="showPreview" @focusout="scheduleClose" @keydown.esc.stop.prevent="dismissPreview"
|
||||
class="z-2 inset-auto m-0 p-[0.85rem] w-[min(22rem,calc(100vw_-_24px))] max-h-[min(24rem,70vh)] overflow-y-auto border border-[var(--color-border)] rounded-xl bg-[var(--bg-surface)] text-[var(--text-primary)] shadow-md text-sm leading-normal"
|
||||
:class="transformOrigin" :style="floatingStyles">
|
||||
<span v-for="(entry, index) in entries" :key="entry.id"
|
||||
class="flex flex-col gap-[0.4rem] [overflow-wrap:anywhere]"
|
||||
:class="{ 'mt-[0.8rem] pt-[0.8rem] border-t border-[var(--color-border)]': index > 0 }">
|
||||
<template v-if="entry.source">
|
||||
<span class="text-xs text-[var(--text-secondary)]">{{ entry.source.hostname }} · Search
|
||||
excerpt</span>
|
||||
<a :href="entry.source.url" target="_blank" rel="noopener noreferrer">{{ entry.source.title }}</a>
|
||||
<span v-if="entry.source.snippet" class="whitespace-pre-wrap text-[var(--text-secondary)]">{{
|
||||
entry.source.snippet }}</span>
|
||||
</template>
|
||||
<span v-else>Source unavailable ({{ entry.id }})</span>
|
||||
</span>
|
||||
</span>
|
||||
</Transition>
|
||||
</template>
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessagePart } from '~/composables/useChat';
|
||||
import ReasoningBody from './ReasoningBody.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
part: Readonly<MessagePart>;
|
||||
}>();
|
||||
|
||||
const reasoningOpen = ref(!props.part.finished);
|
||||
const bodyRef = ref<InstanceType<typeof ReasoningBody> | null>(null);
|
||||
|
||||
watch(
|
||||
() => props.part.finished,
|
||||
@@ -14,44 +16,14 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
const containerRef: Ref<HTMLDivElement | null> = ref(null);
|
||||
const scrollState = ref('middle');
|
||||
|
||||
const { scrollToBottom } = useAutoScroll(containerRef);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!containerRef.value) return;
|
||||
|
||||
const container = containerRef.value;
|
||||
const scrollTop = container.scrollTop;
|
||||
const scrollHeight = container.scrollHeight;
|
||||
const clientHeight = container.clientHeight;
|
||||
|
||||
const topThreshold = 0.02 * clientHeight;
|
||||
|
||||
if (scrollHeight <= clientHeight) {
|
||||
// the container does not have enough content to scroll
|
||||
scrollState.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (scrollTop <= topThreshold) {
|
||||
scrollState.value = 'top';
|
||||
} else if (scrollTop + 100 >= scrollHeight - clientHeight) {
|
||||
scrollState.value = 'bottom';
|
||||
} else {
|
||||
scrollState.value = 'middle';
|
||||
}
|
||||
};
|
||||
|
||||
const toggleReasoning = async () => {
|
||||
if (!props.part.finished) return;
|
||||
|
||||
reasoningOpen.value = !reasoningOpen.value;
|
||||
if (!reasoningOpen.value) return;
|
||||
await nextTick();
|
||||
scrollToBottom('instant');
|
||||
handleScroll();
|
||||
bodyRef.value?.scrollToBottom('instant');
|
||||
bodyRef.value?.handleScroll();
|
||||
};
|
||||
|
||||
const formatDuration = (ms: number) => {
|
||||
@@ -91,11 +63,6 @@ const formatDuration = (ms: number) => {
|
||||
<span class="i-mynaui-chevron-down w-4 h-4 text-[var(--text-secondary)]"
|
||||
:class="reasoningOpen ? '' : '-rotate-90'"></span>
|
||||
</button>
|
||||
<div v-if="reasoningOpen" ref="containerRef" @scroll="handleScroll"
|
||||
:class="['reasoning-container max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
|
||||
<div class="p-2">
|
||||
<MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
|
||||
</div>
|
||||
</div>
|
||||
<ReasoningBody v-if="reasoningOpen" ref="bodyRef" :part="part" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import type { MessagePart } from '~/composables/useChat';
|
||||
import { nextTick, onMounted, ref, watch, type Ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
part: Readonly<MessagePart>;
|
||||
}>();
|
||||
|
||||
const containerRef: Ref<HTMLDivElement | null> = ref(null);
|
||||
const scrollState = ref('');
|
||||
|
||||
const { scrollToBottom } = useAutoScroll(containerRef);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!containerRef.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = containerRef.value;
|
||||
const scrollTop = container.scrollTop;
|
||||
const scrollHeight = container.scrollHeight;
|
||||
const clientHeight = container.clientHeight;
|
||||
|
||||
if (scrollHeight <= clientHeight) {
|
||||
scrollState.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
const threshold = Math.max(6, 0.02 * clientHeight);
|
||||
|
||||
if (scrollTop <= threshold) {
|
||||
scrollState.value = 'top';
|
||||
} else if (scrollTop >= scrollHeight - clientHeight - threshold) {
|
||||
scrollState.value = 'bottom';
|
||||
} else {
|
||||
scrollState.value = 'middle';
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
handleScroll();
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.part.content,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
handleScroll();
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
defineExpose({ scrollToBottom, handleScroll });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" @scroll="handleScroll"
|
||||
:class="['reasoning-container max-h-[min(40vh,320px)] overflow-y-auto [scrollbar-width:thin] [scrollbar-color:#888_transparent] [scrollbar-gutter:stable]', scrollState]">
|
||||
<div class="p-2">
|
||||
<MarkdownRenderer :finished="props.part.finished" :id="props.part.id" :content="props.part.content!" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { MessagePart } from '~/composables/useChat';
|
||||
|
||||
const props = defineProps<{
|
||||
part: Readonly<MessagePart>;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRenderer :finished="part.finished" :id="part.id" :content="part.content!" />
|
||||
</template>
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { collectCitationSources } from '~/utils/citations';
|
||||
import type { SearchSource } from '~/utils/tool-rendering';
|
||||
import Error from './Error.vue';
|
||||
import Reasoning from './Reasoning.vue';
|
||||
import Text from './Text.vue';
|
||||
import Tool from './Tool/index.vue';
|
||||
import type { MessageEntity } from '~/composables/useChat';
|
||||
|
||||
@@ -9,6 +10,14 @@ const props = defineProps<{
|
||||
message: MessageEntity
|
||||
}>();
|
||||
|
||||
const EMPTY_SOURCES: ReadonlyMap<string, SearchSource> = new Map();
|
||||
|
||||
// Citation markers are rare; avoid JSON-parsing every tool output when none exist.
|
||||
const sources = computed(() => {
|
||||
const parts = props.message.parts ?? [];
|
||||
const hasCitations = parts.some(part => part.type === 'text' && part.content?.includes('[[cite:') === true);
|
||||
return hasCitations ? collectCitationSources(parts) : EMPTY_SOURCES;
|
||||
});
|
||||
const triggerRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const { open, close, isOpen } = useTokenDropdown();
|
||||
@@ -25,14 +34,17 @@ const toggleTokenDropdown = () => {
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<div v-for="part in message.parts?.filter(p => p.content?.trim() !== '' || p.toolCall)" :key="part.id">
|
||||
<Reasoning v-if="part.type === 'reasoning'" :part="part" />
|
||||
<Text v-else-if="part.type === 'text'" :part="part" />
|
||||
<Tool v-else-if="part.type === 'tool-call'" :tool-call="part.toolCall!" :part="part"></Tool>
|
||||
<div v-else>
|
||||
Unhandled part type: {{ part.type }} {{ part }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="part in message.parts" :key="part.id">
|
||||
<template v-if="part.content?.trim() !== '' || part.toolCall">
|
||||
<Reasoning v-if="part.type === 'reasoning'" :part="part"></Reasoning>
|
||||
<MarkdownRenderer v-else-if="part.type === 'text'" :finished="part.finished" :id="part.id"
|
||||
:content="part.content!" :sources="sources" :citations="true"></MarkdownRenderer>
|
||||
<Tool v-else-if="part.type === 'tool-call'" :tool-call="part.toolCall!" :part="part"></Tool>
|
||||
<div v-else>
|
||||
Unhandled part type: {{ part.type }} {{ part }}
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<span class="flex items-center gap-1"
|
||||
v-if="message.generation?.status === 'pending' && (message.parts || []).length === 0">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { Message } from '~/composables/useChat';
|
||||
import { getActiveMessage, getCurrentChildIndex, getMessageCount, getNextActiveChildId } from '~~/utils/message';
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
|
||||
@@ -35,7 +36,9 @@ watch(() => message.activeChildId, async (newValue) => {
|
||||
});
|
||||
|
||||
watch(() => message.children.length, (newCount, oldCount) => {
|
||||
if (newCount === oldCount) return;
|
||||
if (newCount === oldCount) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (newCount === 0) {
|
||||
emit('patch', { activeChildId: null });
|
||||
@@ -56,19 +59,17 @@ watch(() => message.children.length, (newCount, oldCount) => {
|
||||
}
|
||||
});
|
||||
|
||||
const activeMessage = computed(() => {
|
||||
if (message.activeChildId && message.children.length > 0) {
|
||||
const child = message.children.find(c => c?.id === message.activeChildId);
|
||||
if (child) return child;
|
||||
watch(() => message.deleted, (isDeleted) => {
|
||||
if (isDeleted && message.children.length > 0) {
|
||||
const activeChild = message.children.find(c => c?.id === message.activeChildId);
|
||||
if (!activeChild) {
|
||||
emit('patch', { activeChildId: message.children[0]?.id ?? null });
|
||||
}
|
||||
}
|
||||
|
||||
if (message.deleted === true && message.children.length > 0) {
|
||||
return message.children[0];
|
||||
}
|
||||
|
||||
return message;
|
||||
});
|
||||
|
||||
const activeMessage = computed(() => getActiveMessage(message));
|
||||
|
||||
const copied = ref(false);
|
||||
const copyMessage = async () => {
|
||||
if (activeMessage.value!.role === 'user') {
|
||||
@@ -135,91 +136,118 @@ const deleteMessage = () => {
|
||||
emit('delete');
|
||||
};
|
||||
|
||||
const messageCount = computed(() => {
|
||||
if (message.deleted === true) {
|
||||
return message.children.length;
|
||||
}
|
||||
const messageCount = computed(() => getMessageCount(message));
|
||||
|
||||
return message.children.length + 1;
|
||||
});
|
||||
|
||||
const currentChildIndex = computed(() => {
|
||||
if (!message.activeChildId) return 0;
|
||||
const idx = message.children.findIndex(c => c?.id === message.activeChildId);
|
||||
return idx >= 0 ? idx + 1 : 0;
|
||||
});
|
||||
const currentChildIndex = computed(() => getCurrentChildIndex(message));
|
||||
|
||||
const navigateChild = (direction: -1 | 1) => {
|
||||
const allItems = message.deleted === true
|
||||
? message.children
|
||||
: [null, ...message.children];
|
||||
const nextActiveChildId = getNextActiveChildId(message, direction);
|
||||
emit('patch', { activeChildId: nextActiveChildId });
|
||||
};
|
||||
|
||||
const currentIdx = allItems.findIndex(item =>
|
||||
!item ? !message.activeChildId : item.id === message.activeChildId
|
||||
);
|
||||
const { show: showTooltip, hide: hideTooltip } = useTooltip();
|
||||
|
||||
const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));
|
||||
const newItem = allItems[newIdx];
|
||||
let hasCursor: boolean | null = null;
|
||||
const checkHasCursor = () => {
|
||||
if (hasCursor === null && typeof window !== 'undefined') {
|
||||
hasCursor = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
||||
}
|
||||
return hasCursor ?? false;
|
||||
};
|
||||
|
||||
emit('patch', { activeChildId: newItem?.id ?? null });
|
||||
const handleTooltipHover = (e: MouseEvent) => {
|
||||
if (!checkHasCursor()) {
|
||||
return;
|
||||
}
|
||||
const target = (e.target as HTMLElement).closest('[data-hotkey], [data-tooltip]') as HTMLElement | null;
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
const hotkey = target.dataset.hotkey ? target.dataset.hotkey.split(',') : undefined;
|
||||
const text = target.dataset.tooltip || undefined;
|
||||
showTooltip(target, hotkey, text);
|
||||
};
|
||||
|
||||
const handleTooltipLeave = () => {
|
||||
hideTooltip();
|
||||
};
|
||||
|
||||
const handleAction = (e: MouseEvent) => {
|
||||
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
switch (trigger.dataset.action) {
|
||||
case 'prev-child':
|
||||
navigateChild(-1);
|
||||
break;
|
||||
case 'next-child':
|
||||
navigateChild(1);
|
||||
break;
|
||||
case 'regenerate':
|
||||
regenerateMessage();
|
||||
break;
|
||||
case 'edit':
|
||||
handleEdit();
|
||||
break;
|
||||
case 'copy':
|
||||
copyMessage();
|
||||
break;
|
||||
case 'fork':
|
||||
forkMessage();
|
||||
break;
|
||||
case 'delete':
|
||||
deleteMessage();
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="activeMessage" class="max-w-full mb-4 group flex flex-col">
|
||||
<div :class="[message.role === 'user' ? 'pl-9 flex justify-end' : '']">
|
||||
<MessageUser v-if="message.role === 'user'" :message="activeMessage!" />
|
||||
<MessageAgent v-else :message="activeMessage" />
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<div v-if="messageCount > 1" class="flex gap-1">
|
||||
<Tooltip :inert="currentChildIndex === 0" :hotkey="['alt', '[']">
|
||||
<button @click="navigateChild(-1)"
|
||||
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)]"
|
||||
:class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<span class="text-xs text-[var(--text-secondary)]">
|
||||
{{ currentChildIndex + 1 }} / {{ messageCount }}
|
||||
</span>
|
||||
<Tooltip :inert="currentChildIndex + 1 === messageCount" :hotkey="['alt', ']']">
|
||||
<button @click="navigateChild(1)"
|
||||
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)]"
|
||||
:class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<MessageUser v-if="message.role === 'user'" class="pl-9 self-end" :message="activeMessage!"></MessageUser>
|
||||
<MessageAgent v-else :message="activeMessage"></MessageAgent>
|
||||
<div class="flex justify-between items-center" @click="handleAction">
|
||||
<div v-if="messageCount > 1" class="flex gap-1"
|
||||
@mouseover="handleTooltipHover" @mouseout="handleTooltipLeave">
|
||||
<button data-action="prev-child" :data-hotkey="currentChildIndex > 0 ? 'alt,[' : undefined"
|
||||
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
|
||||
:class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
|
||||
</button>
|
||||
<span class="text-xs text-[var(--text-secondary)]">
|
||||
{{ currentChildIndex + 1 }} / {{ messageCount }}
|
||||
</span>
|
||||
<button data-action="next-child" :data-hotkey="currentChildIndex + 1 < messageCount ? 'alt,]' : undefined"
|
||||
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
|
||||
:class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-show="activeMessage.generation?.status !== 'pending'"
|
||||
class="self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Tooltip :hotkey="['ctrl', 'shift', 'enter']">
|
||||
<button @click="regenerateMessage"
|
||||
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-refresh text-4.5"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<button v-if="message.role === 'user'" @click="handleEdit"
|
||||
@mouseover="handleTooltipHover" @mouseout="handleTooltipLeave"
|
||||
class="ml-auto self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<button data-action="regenerate" data-hotkey="ctrl,shift,enter"
|
||||
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-pencil text-4.5"></span>
|
||||
<span class="i-mynaui-refresh text-4.5 pointer-events-none"></span>
|
||||
</button>
|
||||
<button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
|
||||
<button v-if="message.role === 'user'" data-action="edit"
|
||||
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
||||
<span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'"></span>
|
||||
<span class="i-mynaui-pencil text-4.5 pointer-events-none"></span>
|
||||
</button>
|
||||
<button @click="forkMessage"
|
||||
<button data-action="copy" :class="{ 'text-emerald-500': copied }"
|
||||
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-git-branch text-4.5"></span>
|
||||
<span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'" class="pointer-events-none"></span>
|
||||
</button>
|
||||
<button data-action="fork"
|
||||
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-git-branch text-4.5 pointer-events-none"></span>
|
||||
</button>
|
||||
<button data-action="delete" data-hotkey="ctrl,shift,backspace"
|
||||
class="flex justify-center items-center w-7 h-6 text-red-500 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-trash text-5 pointer-events-none"></span>
|
||||
</button>
|
||||
<Tooltip :hotkey="['ctrl', 'shift', 'backspace']">
|
||||
<button @click="deleteMessage"
|
||||
class="flex justify-center items-center w-7 h-6 text-red-500 @hover:bg-[var(--color-hover)]">
|
||||
<span class="i-mynaui-trash text-5"></span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,10 +127,12 @@ const autoRenameTopic = async (topicId: string) => {
|
||||
}
|
||||
|
||||
const cancelAutoRename = async (topicId: string) => {
|
||||
// TODO: make this more optimistic
|
||||
await $fetch(`/api/topic/${topicId}/auto-rename/cancel`, {
|
||||
method: 'POST',
|
||||
const result = await $fetch(`/api/topic/${topicId}/auto-rename/cancel`, {
|
||||
method: "POST",
|
||||
});
|
||||
if (result.ok) {
|
||||
patchTopicLocally(topicId, { renaming: false });
|
||||
}
|
||||
}
|
||||
|
||||
const renameTopicId = ref<string | null>(null);
|
||||
@@ -256,12 +258,13 @@ onMounted(() => {
|
||||
v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
|
||||
@blur="saveRename"
|
||||
class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
|
||||
<div v-else-if="topic.renaming" class="flex w-full">
|
||||
<span class="i-svg-spinners-3-dots-fade text-7 md:text-6"></span>
|
||||
<div v-else class="flex items-center gap-2 min-w-0">
|
||||
<span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
<span v-if="topic.renaming" aria-label="Renaming"
|
||||
class="i-svg-spinners-3-dots-fade shrink-0 text-4"></span>
|
||||
</div>
|
||||
<span v-else class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
|
||||
<div data-action="toggle-dropdown"
|
||||
class="text-[var(--text-secondary)] shrink-0 w-0 max-w-0 opacity-0 overflow-hidden p-1 max-md:w-auto max-md:max-w-none max-md:opacity-100 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]"
|
||||
|
||||
@@ -7,14 +7,16 @@ const props = defineProps<{
|
||||
const { show, hide } = useTooltip();
|
||||
const triggerRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const hasCursor = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
hasCursor.value = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
||||
});
|
||||
let hasCursor: boolean | null = null;
|
||||
const checkHasCursor = () => {
|
||||
if (hasCursor === null && typeof window !== 'undefined') {
|
||||
hasCursor = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
||||
}
|
||||
return hasCursor ?? false;
|
||||
};
|
||||
|
||||
const onMouseEnter = () => {
|
||||
if (triggerRef.value && hasCursor.value) {
|
||||
if (triggerRef.value && checkHasCursor()) {
|
||||
show(triggerRef.value, props.hotkey, props.text);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user