fix: sidebar styles and search button
This commit is contained in:
@@ -116,6 +116,9 @@ const handleKeyDown = async (event: KeyboardEvent) => {
|
||||
|
||||
textAreaValue.value =
|
||||
textAreaValue.value.slice(0, cursorPosition) + '\n' + textAreaValue.value.slice(cursorPosition);
|
||||
nextTick(() => {
|
||||
inputRef.value!.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
|
||||
});
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
|
||||
@@ -21,7 +21,7 @@ const { isHovered } = useSidenavContext();
|
||||
<Dropdown placement="bottom" dropdown-class="max-w-48">
|
||||
<template #default="{ toggle, setRef }">
|
||||
<button :ref="setRef" @click="toggle"
|
||||
class="shrink-1 max-w-full min-w-0 w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
|
||||
class="shrink-1 max-w-full min-w-0 transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
|
||||
<div class="pointer-events-none flex items-center gap-1.5 max-w-full">
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
|
||||
|
||||
@@ -185,10 +185,9 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<nav ref="navRef"
|
||||
class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
class="flex flex-col gap-1 max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
|
||||
|
||||
<!-- Agent Info Link -->
|
||||
<div class="mt-2 flex flex-col">
|
||||
<SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
|
||||
:active="route.path.endsWith('/profile')" />
|
||||
|
||||
@@ -202,7 +201,7 @@ onMounted(() => {
|
||||
</button>
|
||||
|
||||
<Collapsible :is-open="topicsOpen">
|
||||
<div @click="handleNavClick" class="mt-1 flex flex-col transform-origin-center-top">
|
||||
<div @click="handleNavClick" class="flex flex-col transform-origin-center-top">
|
||||
<RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
|
||||
:item-size="40" :overscan="20">
|
||||
<template v-slot="{ item: topic }">
|
||||
@@ -217,8 +216,7 @@ onMounted(() => {
|
||||
<div v-else-if="topic.renaming" class="flex w-full">
|
||||
<span class="i-svg-spinners-3-dots-fade text-6"></span>
|
||||
</div>
|
||||
<span v-else
|
||||
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
<span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{{ topic.name }}
|
||||
</span>
|
||||
|
||||
@@ -231,7 +229,6 @@ onMounted(() => {
|
||||
</RowVirtualizerFixed>
|
||||
</div>
|
||||
</Collapsible>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
|
||||
import type { DialogType } from '~/composables/useDialog';
|
||||
|
||||
const { openDialog } = useDialog();
|
||||
const { agents, createAgent } = useAgents();
|
||||
const agentsOpen = ref(true);
|
||||
const creatingAgent = ref(false);
|
||||
@@ -119,7 +121,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
|
||||
<SidenavItem name="Search" icon="i-mynaui-search" />
|
||||
<SidenavItem @click="openDialog(DialogType.QuickSwitcher)" name="Search" icon="i-mynaui-search" />
|
||||
<SidenavItem to="/" name="Home" icon="i-mynaui-home" />
|
||||
|
||||
<!-- Header Toggle -->
|
||||
@@ -134,7 +136,7 @@ onMounted(() => {
|
||||
|
||||
<!-- Animated Section -->
|
||||
<Collapsible :is-open="agentsOpen">
|
||||
<div class="mt-1 gap-1 flex flex-col transform-origin-top pt-1 pb-1 px-1">
|
||||
<div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
|
||||
<button @click="newAgent" :disabled="creatingAgent"
|
||||
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
|
||||
<div class="h-7 w-7 flex items-center justify-center">
|
||||
|
||||
@@ -101,14 +101,14 @@ const navKind = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative pl-2">
|
||||
<div class="relative">
|
||||
<aside ref="sidenavRef" :class="[
|
||||
'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
|
||||
open ? 'w-full mr-2' : 'w-0 mr-0',
|
||||
isResizing ? 'transition-none' : ''
|
||||
]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
|
||||
@mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
|
||||
<div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
|
||||
<div :style="{ minWidth: `${sidebarWidth}px` }" class="pl-2 flex flex-col h-full justify-between">
|
||||
<div class="flex flex-col h-full max-h-full overflow-y-hidden">
|
||||
<!-- Header -->
|
||||
<div
|
||||
|
||||
@@ -502,6 +502,7 @@ export const useChat = (agentId: string) => {
|
||||
});
|
||||
|
||||
try {
|
||||
// @ts-ignore - excessive stack depth
|
||||
const res = await $fetch(`/api/auto-rename/${topicId}`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
|
||||
Reference in New Issue
Block a user