feat: InsaneUI mode, UI polishing, scroll logic changed again

NamesMT · NamesMT · commit 7d67d8b896c6 · 2025-06-14T22:03:14.000Z
diff --git a/apps/frontend/app/components/chat/ChatInterface.vue b/apps/frontend/app/components/chat/ChatInterface.vue
@@ -10,28 +10,42 @@ import { VueLenis } from 'lenis/vue'
 import { Skeleton } from '@/lib/shadcn/components/ui/skeleton'
 import { Card, CardContent } from '~/lib/shadcn/components/ui/card'
 import VanishingInput from '~/lib/shadcn/components/ui/vanishing-input/VanishingInput.vue'
+import LiquidGlassDiv from '../LiquidGlassDiv.vue'
 
+const isDev = import.meta.dev
 const { $auth } = useNuxtApp()
 const { convexApiUrl } = useRuntimeConfig().public
 const convex = useConvexClient()
+const chatContext = useChatContext()
 
-// For [...all] routing the value is an array
-const threadIdRef = useRouteParams<string>('all', undefined, { transform: { get: s => Array.isArray(s) ? s[0] : s } })
+// Lenis have bug with useTemplateRef
+const lenisRef = ref<{ $el: HTMLElement, lenis: Lenis }>()
+const { y: scrollY } = useScroll(computed(() => lenisRef.value?.$el))
+const nearTopBottom = computed(() => {
+  const el = lenisRef.value?.$el
+  if (!el)
+    return [null, null]
+
+  const currentScroll = lenisRef.value!.lenis.targetScroll || scrollY.value
+
+  const gapFromTop = currentScroll
+  const gapFromBottom = el.scrollHeight - el.clientHeight - currentScroll
+
+  const nearTop = gapFromTop < 69
+  const nearBottom = gapFromBottom < 69
+  return [nearTop && gapFromTop + 1, nearBottom && gapFromBottom + 1, lenisRef.value!.lenis.targetScroll, scrollY.value]
+})
+
+const threadIdRef = useThreadIdRef()
 
 const cachedThreadsMessages: {
   [threadId: string]: Array<CustomMessage>
 } = {}
-
 const messages = ref<Array<CustomMessage>>([])
 const messagesMapped = computed(() => keyBy(messages.value, 'id'))
 const streamingMessages = ref(0)
-
-const chatInput = ref('')
-
 const isFetching = ref(false)
-
-// Lenis have bug with useTemplateRef
-const lenisRef = ref<{ $el: HTMLElement, lenis: Lenis }>()
+const chatInput = ref('')
 
 // Fetch messages and resume streams
 const { ignoreUpdates: ignorePathUpdate } = watchIgnorable(
@@ -73,7 +87,7 @@ const { ignoreUpdates: ignorePathUpdate } = watchIgnorable(
         }
       }
 
-      doScrollBottom({ forceTries: 3 })
+      nextTick(() => doScrollBottom({ tries: 6 }))
     }
   },
   { immediate: true },
@@ -107,7 +121,7 @@ async function handleSubmit({ input, confirmMultiStream = false }: HandleSubmitA
 
   chatInput.value = ''
 
-  nextTick(() => { doScrollBottom() })
+  nextTick(() => { doScrollBottom({ tries: 2 }) })
 
   // Create new thread
   if (!threadIdRef.value) {
@@ -177,8 +191,7 @@ async function pollToMessage({ message, resumeStreamId, threadId = threadIdRef.v
     console.log('Poll completed')
   }
 
-  if (isNearBottom())
-    setTimeout(() => { doScrollBottom({ forceTries: 1 }) }, 100)
+  nextTick(() => { doScrollBottom({ maybe: true }) })
 }
 
 interface StreamToMessageArgs {
@@ -266,8 +279,7 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
       if (state.content)
         message.content += state.content
 
-      if (isNearBottom())
-        setTimeout(() => { doScrollBottom({ forceTries: 1 }) }, 100)
+      nextTick(() => { doScrollBottom({ maybe: true }) })
     }
 
     message.isStreaming = false
@@ -283,45 +295,38 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
   console.log('Stream completed')
 }
 
-function doScrollBottom({ smooth = true, maybe = false, forceTries = 0, lastScrollTop = 0 } = {}) {
+function doScrollBottom({ smooth = true, maybe = false, tries = 0, lastScrollTop = 0 } = {}) {
   if (!lenisRef.value)
     return
 
   const l = lenisRef.value
   const scrollHeight = l.$el.scrollHeight
 
-  if (l.$el.scrollTop < lastScrollTop)
-    forceTries = 0
+  // Allow user to try escape the tries
+  if (tries && (l.$el.scrollTop < lastScrollTop))
+    tries = 0
 
-  if (!forceTries && maybe && !isNearBottom())
+  if (maybe && l.lenis.direction !== 1)
     return
 
-  if (scrollHeight !== l.lenis.limit + l.$el.clientHeight)
+  if (scrollHeight !== l.lenis.limit + l.$el.clientHeight) {
     l.lenis.resize()
+    ++tries
+  }
 
   smooth
     ? l.lenis.scrollTo(scrollHeight)
     : l.$el.scrollTop = scrollHeight
 
   lastScrollTop = l.$el.scrollTop
 
-  if (forceTries) {
-    countdown(200, () => {
-      sleep(0).then(() => doScrollBottom({ smooth, maybe, forceTries: forceTries - 1, lastScrollTop }))
+  if (tries > 1) {
+    countdown(250, () => {
+      sleep(0).then(() => doScrollBottom({ smooth, maybe, tries: tries - 1, lastScrollTop }))
     }, { key: 'dSB', replace: true })
   }
 }
 
-function isNearBottom() {
-  if (!lenisRef.value)
-    return
-
-  const l = lenisRef.value
-  const scrollHeight = l.$el.scrollHeight
-
-  return (l.$el.scrollTop + l.$el.clientHeight) > (scrollHeight - 69)
-}
-
 const multiStreamConfirmDialogOpen = ref(false)
 let savedChatInput = ''
 function alertIsStreaming(input: string) {
@@ -334,15 +339,16 @@ function alertIsStreaming(input: string) {
   <div class="relative flex flex-col">
     <VueLenis ref="lenisRef" class="h-screen overflow-y-scroll px-4">
       <div class="mx-auto h-full max-w-full lg:max-w-4xl">
+        <FlickeringGrid
+          v-if="chatContext.insaneUI.value"
+          class="absolute inset-0 z-0 place-content-center" :square-size="10" :grid-gap="5"
+          color="#60A5FA" :max-opacity="0.5" :flicker-chance="0.1"
+        />
+
         <div
           v-show="!(isFetching && !messages.length)"
-          class="pointer-events-none absolute left-0 h-screen w-full place-content-center overflow-hidden"
+          class="pointer-events-none absolute left-0 z-0 h-screen w-full place-content-center overflow-hidden"
         >
-          <FlickeringGrid
-            v-if="false" class="absolute inset-0 z-0 place-content-center" :square-size="4" :grid-gap="6"
-            color="#60A5FA" :max-opacity="0.5" :flicker-chance="0.1" :width="2000" :height="2000"
-          />
-
           <div
             v-if="!messages.length"
             class="relative z-2 whitespace-pre-wrap px-2 text-center text-4xl text-gray-400 font-medium tracking-tighter dark:text-gray-500 dark:text-white"
@@ -353,48 +359,73 @@ function alertIsStreaming(input: string) {
           </div>
         </div>
 
-        <div v-if="messages.length" class="z-2 space-y-4">
+        <div v-if="messages.length" class="relative z-2 space-y-4">
           <div class="pt-6" />
 
           <div
             v-for="m of messages" :key="m.id" class="flex"
             :class="m.role === 'user' ? 'justify-end' : 'justify-start'"
           >
-            <Card
-              class="bg-transparent shadow-md"
+            <component
+              :is="chatContext.insaneUI.value ? LiquidGlassDiv : 'div'"
+              class="rounded-$radius $c-radius=$radius"
               :class="[
-                m.role === 'user' ? 'border-secondary-200' : 'border-primary-200',
-                m.role === 'user' ? 'max-w-80% md:max-w-2xl' : 'max-w-full md:max-w-3xl',
+                m.role === 'user'
+                  ? 'bg-secondary-100 dark:bg-secondary-950'
+                  : 'bg-primary-100 dark:bg-primary-950',
+                chatContext.insaneUI.value
+                  ? 'bg-opacity-50!'
+                  : 'bg-opacity-5!',
               ]"
             >
-              <!-- <CardHeader class="px-4 py-2">
-                <CardTitle class="text-sm font-semibold">
-                  {{ m.role === 'user' ? $t('pages.chat.userLabel') : $t('pages.chat.aiLabel') }}
-                </CardTitle>
-              </CardHeader> -->
-              <CardContent class="px-4 py-3">
-                <div v-if="m.isStreaming && !m.content" class="flex gap-2">
-                  <div>{{ $t('generating') }}</div>
-                  <div class="spinner h-5 w-5" />
-                </div>
-                <MDC v-else :value="m.content" />
-                <div class="hidden first:block">
-                  <Skeleton
-                    class="h-5 w-$c-W rounded-full bg-muted-foreground" :style="{
-                      '--c-W': `${(Math.floor(Math.random() * (300 - 100 + 1)) + 100) * (m.role === 'user' ? 1 : 2)}px`,
-                    }"
-                  />
-                </div>
-              </CardContent>
-            </Card>
+              <Card
+                class="bg-transparent shadow-md"
+                :class="[
+                  m.role === 'user'
+                    ? 'border-secondary-200 max-w-80% md:max-w-2xl'
+                    : 'border-primary-200 max-w-full md:max-w-3xl',
+                ]"
+              >
+                <!-- <CardHeader class="px-4 py-2">
+                  <CardTitle class="text-sm font-semibold">
+                    {{ m.role === 'user' ? $t('pages.chat.userLabel') : $t('pages.chat.aiLabel') }}
+                  </CardTitle>
+                </CardHeader> -->
+                <CardContent class="min-w-25 px-4 py-3 [&_.prose-hr]:(border-accent-foreground!)">
+                  <div v-if="m.isStreaming && !m.content" class="my-4 flex gap-2">
+                    <div>{{ $t('generating') }}</div>
+                    <div class="spinner h-5 w-5" />
+                  </div>
+                  <MDC v-else :value="m.content" />
+                  <div class="my-4 hidden first:block">
+                    <Skeleton
+                      class="h-5 w-$c-W rounded-full bg-muted-foreground" :style="{
+                        '--c-W': `${(Math.floor(Math.random() * (300 - 100 + 1)) + 100) * (m.role === 'user' ? 1 : 2)}px`,
+                      }"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+            </component>
           </div>
 
           <div class="pb-40" />
         </div>
       </div>
     </VueLenis>
 
-    <LiquidGlassDiv class="bottom-0 left-0 max-w-full w-full border-t border-secondary p-4 $c-radius=0px absolute!">
+    <LiquidGlassDiv class="bottom-0 left-0 z-3 max-w-full w-full border-t border-secondary p-4 $c-radius=0px absolute!">
+      <div v-if="isDev" class="absolute bottom-100%">
+        {{ nearTopBottom }}
+      </div>
+      <div class="absolute bottom-100% right-6 mb-2 flex flex-col gap-2">
+        <Button variant="outline" size="icon" class="rounded-xl p-1 opacity-100 transition-opacity duration-500" :class="nearTopBottom[0] && 'invisible opacity-0'" @click="lenisRef!.lenis.scrollTo('top')">
+          <div class="i-hugeicons:circle-arrow-up-03 h-full w-full" />
+        </Button>
+        <Button variant="outline" size="icon" class="rounded-xl p-1 opacity-100 transition-opacity duration-500" :class="nearTopBottom[1] && 'invisible opacity-0'" @click="lenisRef!.lenis.scrollTo('bottom')">
+          <div class="i-hugeicons:circle-arrow-down-03 h-full w-full" />
+        </Button>
+      </div>
       <div>
         <div class="mx-auto max-w-lg flex flex-col gap-3">
           <VanishingInput
diff --git a/apps/frontend/app/components/chat/ChatSidebar.vue b/apps/frontend/app/components/chat/ChatSidebar.vue
@@ -27,9 +27,9 @@ import { Button } from '~/lib/shadcn/components/ui/button'
 const { $auth, $init } = useNuxtApp()
 const colorMode = useColorMode()
 const convex = useConvexClient()
+const chatContext = useChatContext()
 
-// For [...all] routing the value is an array
-const threadIdRef = useRouteParams<string>('all', undefined, { transform: { get: s => Array.isArray(s) ? s[0] : s } })
+const threadIdRef = useThreadIdRef()
 
 // Load local threads
 const { data: threads } = useIDBKeyval<Doc<'threads'>[]>('threads', [])
@@ -152,7 +152,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
         </Button>
       </div>
     </SidebarHeader>
-    <SidebarContent>
+    <SidebarContent class="p-2">
       <SidebarGroup v-if="!threads?.length">
         <div class="py-4 text-center text-gray-500 dark:text-gray-400">
           {{ isFetching
@@ -198,7 +198,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                   {{ thread.title }}
                 </div>
                 <LiquidGlassDiv
-                  class="right-0 top-0 h-full flex translate-x-[calc(100%+1rem)] items-center px-2 transition-transform will-change-transform $c-radius=6px absolute! group-hover/thread:translate-x-0"
+                  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"
                   @click.stop.prevent
                 >
                   <Button
@@ -233,6 +233,38 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
         </SidebarGroup>
       </template>
     </SidebarContent>
-    <SidebarFooter />
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <SidebarMenuButton class="h-auto flex items-center justify-between">
+                <div class="h-9 flex items-center gap-2 text-sm leading-tight">
+                  <template v-if="$auth.loggedIn">
+                    <img :src="$auth.user.picture" class="aspect-1 h-full rounded-md">
+                    <div class="truncate">
+                      <p>{{ $auth.user.name }}</p>
+                      <p class="truncate text-xs">
+                        {{ $auth.user.email }}
+                      </p>
+                    </div>
+                  </template>
+                </div>
+                <div class="i-hugeicons:dashboard-square-setting size-5 shrink-0" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="top"
+              class="w-[--reka-popper-anchor-width]"
+            >
+              <DropdownMenuItem class="justify-between" @click="chatContext.insaneUI.value = !chatContext.insaneUI.value">
+                <div>{{ 'InsaneUI' }}</div>
+                <div :class="chatContext.insaneUI.value ? ' i-hugeicons:crazy' : ' i-hugeicons:confused'" />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
   </Sidebar>
 </template>
diff --git a/apps/frontend/app/composables/state.ts b/apps/frontend/app/composables/state.ts
@@ -0,0 +1,50 @@
+/**
+ * @credit modified from pmucha/nuxt3-local-storage
+ *
+ * A wrapper for Nuxt3 `useState` which allows the data
+ * to be saved in browser's `localStorage` as JSON.
+ * The API is the same as `useState`.
+ *
+ * @param key A string key
+ * @param defaultValue Optional default value of the key
+ */
+export function useLocalState<T>(key: string, defaultValue?: () => T): Ref<T> {
+  const state = useState<T>(key, defaultValue)
+
+  // Keep the keys so there are no duplicate watch-ers.
+  // The keys also should be only on the client side.
+  let keys = ref<string[]>([])
+  if (import.meta.client && localStorage) {
+    keys = useState<string[]>('useLocalState-watch-keys', () => [] as string[])
+    const storedState = localStorage.getItem(key)
+    if (storedState)
+      state.value = JSON.parse(storedState)
+  }
+
+  // Watch only if there are no other watchers
+  if (!keys.value.includes(key)) {
+    watch(
+      () => state.value,
+      (newValue) => {
+        if (import.meta.client && localStorage) {
+          if (newValue === undefined) { // clear the state
+            keys.value = keys.value.filter(v => v !== key)
+            try {
+              localStorage.removeItem(key)
+            }
+            catch { }
+          }
+          else { // set state
+            keys.value.push(key)
+            try {
+              localStorage.setItem(key, JSON.stringify(state.value))
+            }
+            catch { }
+          }
+        }
+      },
+    )
+  }
+
+  return state
+}
diff --git a/apps/frontend/app/lib/shadcn/components/ui/flickering-grid/FlickeringGrid.vue b/apps/frontend/app/lib/shadcn/components/ui/flickering-grid/FlickeringGrid.vue
@@ -161,7 +161,7 @@ onMounted(() => {
   });
   intersectionObserver = new IntersectionObserver(
     ([entry]) => {
-      isInView.value = entry!.isIntersecting;
+      isInView.value = entry.isIntersecting;
       animationFrameId = requestAnimationFrame(animate);
     },
     { threshold: 0 },
diff --git a/apps/frontend/app/pages/chat/[...all].vue b/apps/frontend/app/pages/chat/[...all].vue
diff --git a/apps/frontend/app/utils/chat.ts b/apps/frontend/app/utils/chat.ts
