feat: prompt, scroll, responsive UX + fixes, cleaning, restyle threads hover

Author: NamesMT

apps/frontend/app/assets/css/scrollbar.css

@@ -15,3 +15,8 @@
   background-clip: content-box;
   -webkit-background-clip: content-box;
 }
+
+/* ::-webkit-scrollbar-track {
+  background: hsl(var(--accent)/.2);
+  border-radius: 4px;
+} */

apps/frontend/app/components/chat/ChatInterface.vue

@@ -407,7 +407,7 @@ function doScrollBottom({ smooth = true, maybe = false, tries = 0, lastScrollTop
 </script>
 
 <template>
-  <div class="relative flex flex-col">
+  <div class="relative overflow-hidden">
     <VueLenis ref="lenisRef" class="h-screen overflow-y-scroll px-4">
       <ChatInterfaceBackground v-bind="{ messages, isFetching }" />
       <div class="mx-auto h-full max-w-full lg:max-w-4xl">

apps/frontend/app/components/chat/ChatSidebar.vue

@@ -207,7 +207,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                   <!-- Using [&.active] instead of :active-class because of reactivity bug -->
                   <NuxtLink
                     :to="`/chat/${thread._id}`"
-                    class="group/thread relative block flex items-center gap-2 overflow-hidden rounded-md p-2 px-3 text-sm [&.router-link-exact-active]:bg-primary/10 hover:bg-primary/20"
+                    class="group/thread relative block flex items-center gap-2 overflow-hidden rounded-md p-2 px-3 text-sm $BGCOLOR=$primary-200 [&.router-link-exact-active]:(bg-[hsl(var(--BGCOLOR)/0.3)]) hover:(bg-[hsl(var(--BGCOLOR)/0.7)]) dark:$BGCOLOR=$primary-800"
                     @mousedown.left="navigateTo(`/chat/${thread._id}`);"
                     @click="navigateTo(`/chat/${thread._id}`); sidebarContext.setOpenMobile(false)"
                   >
@@ -216,7 +216,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                       <FrozenIconButton v-if="thread.frozen" :thread />
                     </div>
 
-                    <Tooltip :delay-duration="500">
+                    <Tooltip>
                       <TooltipTrigger as-child>
                         <div class="truncate">
                           {{ thread.title }}
@@ -227,11 +227,12 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                       </TooltipContent>
                     </Tooltip>
 
-                    <LiquidGlassDiv
-                      class="right-0 top-0 h-full flex translate-x-[calc(100%+1rem)] items-center gap-1 px-2 pr-1 transition-transform will-change-transform $c-radius=6px absolute! group-hover/thread:translate-x-0"
+                    <div
+                      class="right-0 top-0 h-full flex translate-x-[calc(100%+1rem)] items-center gap-1 bg-[hsl(var(--BGCOLOR))] px-2 pr-1 transition-transform will-change-transform absolute! group-hover/thread:translate-x-0"
                       @click.stop.prevent
                     >
-                      <Tooltip :delay-duration="500">
+                      <div class="pointer-events-none absolute bottom-0 right-[100%] top-0 h-12 w-8 from-[hsl(var(--BGCOLOR))] to-transparent bg-gradient-to-l opacity-0 group-hover/thread:opacity-100" />
+                      <Tooltip>
                         <TooltipTrigger as-child>
                           <Button
                             tabindex="-1" variant="ghost" size="icon" class="size-7 transition-none hover:bg-surface-200/20!"
@@ -244,9 +245,8 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                           <p>{{ pinned ? $t('chat.thread.unpin') : $t('chat.thread.pin') }}</p>
                         </TooltipContent>
                       </Tooltip>
-
                       <ReuseDeleteBtn :thread />
-                    </LiquidGlassDiv>
+                    </div>
                   </NuxtLink>
                 </ContextMenuTrigger>
                 <ContextMenuContent>

apps/frontend/app/components/chat/interface/AgentSelector.vue

@@ -9,7 +9,7 @@ const activeAgentDisplay = computed(() => displayActiveAgent(chatContext.activeA
 
 <template>
   <DropdownMenu>
-    <Tooltip :delay-duration="500">
+    <Tooltip>
       <TooltipTrigger as-child>
         <DropdownMenuTrigger as-child>
           <Button variant="ghost" size="sm" class="h-fit w-40 flex items-center justify-between gap-1 border-x-3px border-primary border-opacity-80 px-2 py-1 -ml-1.5 light:border-primary-600 hover:bg-accent/30">

apps/frontend/app/components/chat/interface/CardBranchOffButton.vue

@@ -13,7 +13,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <Tooltip v-show="message.isStreaming === false" :delay-duration="500">
+  <Tooltip v-show="message.isStreaming === false">
     <TooltipTrigger as-child>
       <Button variant="ghost" size="icon" class="size-7" @click="emit('click')">
         <Split />

apps/frontend/app/components/chat/interface/CardCopyButton.vue

@@ -7,7 +7,7 @@ const {
 </script>
 
 <template>
-  <Tooltip :delay-duration="500">
+  <Tooltip>
     <TooltipTrigger as-child>
       <CodeCopy :code="message.content" class="hover:text-accent-foreground hover:bg-accent!" />
     </TooltipTrigger>

apps/frontend/app/components/chat/interface/PrompterArea.vue

@@ -71,9 +71,10 @@ function handleSubmit({ confirmMultiStream = false }) {
           @keydown.enter.exact="(e) => {
             if (!sidebarContext.isMobile.value) {
               e.preventDefault()
-              handleSubmit({ })
+              handleSubmit({})
             }
           }"
+          @keydown.enter.ctrl.exact="handleSubmit({})"
         />
         <div class="flex items-center justify-between">
           <div class="flex items-center">
@@ -85,7 +86,7 @@ function handleSubmit({ confirmMultiStream = false }) {
             class="i-hugeicons:upload-square-01 enabled:bg-mainGradient disabled:bg-surface-500"
             :class="chatContext.insaneUI.value ? 'enabled:animate-spin' : 'motion-safe:enabled:animate-bounce'"
             :disabled="!chatInputTA"
-            @click="handleSubmit({ })"
+            @click="handleSubmit({})"
           />
         </div>
       </form>

apps/frontend/app/components/chat/interface/TopRightQuickSnacks.vue

@@ -4,7 +4,7 @@ const chatContext = useChatContext()
 
 <template>
   <div class="absolute right-3 top-3 hidden items-center lg:flex">
-    <Tooltip :delay-duration="500">
+    <Tooltip>
       <TooltipTrigger as-child>
         <Button
           variant="ghost" size="icon"

apps/frontend/app/components/chat/thread/BranchIconButton.vue

@@ -15,7 +15,7 @@ if (!thread.parentThread)
 </script>
 
 <template>
-  <Tooltip :delay-duration="500">
+  <Tooltip>
     <TooltipTrigger as-child>
       <NuxtLink
         :to="`/chat/${thread.parentThread}`"

apps/frontend/app/components/chat/thread/DeleteThreadAlertDialog.vue

@@ -32,7 +32,7 @@ const { $auth } = useNuxtApp()
 
 <template>
   <AlertDialog>
-    <Tooltip :delay-duration="500">
+    <Tooltip>
       <AlertDialogTrigger v-show="!thread.userId || (thread.userId === $auth?.user?.sub)" as-child>
         <TooltipTrigger as-child @pointerdown.stop.prevent @click.shift.stop.prevent="callback()">
           <slot />