feat: milestone 3: support anonymous user

Author: NamesMT

apps/backend-convex/convex/http/ai.ts

@@ -78,11 +78,13 @@ aiApp
         lockerKey,
       } = c.req.valid('json')
 
-      const userIdentity = await c.env.auth.getUserIdentity()
-      if (userIdentity === null)
+      // getUserIdentity on HTTP Action will throw if not authenticated 🤦‍♂️
+      const userIdentity = await c.env.auth.getUserIdentity().catch(() => null)
+
+      if (userIdentity === null && !lockerKey)
         throw new ConvexError({ msg: 'Not authenticated' })
 
-      await rateLimiter.limit(c.env, 'aiChat', { key: userIdentity.subject, throws: true })
+      await rateLimiter.limit(c.env, 'aiChat', { key: userIdentity?.subject ?? lockerKey, throws: true })
 
       const _providerSdk = (() => {
         switch (provider) {
@@ -126,7 +128,7 @@ aiApp
         // If finishOnly is true, just mark as finished and return
         if (finishOnly) {
           await c.env.runMutation(internal.messages.finishStreaming, { streamId })
-          await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now(), lockerKey })
+          await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now() })
           c.text('OK')
         }
       }
@@ -232,7 +234,7 @@ aiApp
 
             // Finish streaming
             await c.env.runMutation(internal.messages.finishStreaming, { streamId })
-            await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now(), lockerKey })
+            await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now() })
 
             // // Generate new thread title
             // await c.env.runAction(api.threads.generateThreadTitle, { threadId, lockerKey, apiKey })

apps/backend-convex/convex/schema.ts

@@ -9,12 +9,15 @@ const tasksTables = {
 
 const aiChatTables = {
   threads: defineTable({
-    initSessionId: v.string(), // TODO: Ability to view all threads created in the same use session using this id.
+    // The initial session ID of the user that created the thread, warning: also used as "password" to list threads for now.
+    sessionId: v.string(),
     title: v.string(),
     lastMessageAt: v.number(),
     userId: v.optional(v.string()),
     lockerKey: v.optional(v.string()),
   })
+    .index('by_user_id', ['userId'])
+    .index('by_session_id', ['sessionId'])
     .index('by_last_message', ['lastMessageAt']),
 
   messages: defineTable({

apps/backend-convex/convex/threads.ts

@@ -9,6 +9,7 @@ import { ConvexError, v } from 'convex/values'
 import { api, internal } from './_generated/api'
 import { action, internalMutation, mutation, query } from './_generated/server'
 
+// TODO: maybe allow threads sharing of a whole account or remove userId arg
 export const list = query({
   args: {
     userId: v.optional(v.string()),
@@ -27,7 +28,21 @@ export const list = query({
       .query('threads')
       .withIndex('by_last_message', q => q)
       .order('desc')
-      .take(50)
+      .collect()
+  },
+})
+
+export const listBySessionId = query({
+  args: {
+    sessionId: v.string(),
+  },
+  handler: async (ctx, args) => {
+    return await ctx.db
+      .query('threads')
+      .withIndex('by_session_id', q => q.eq('sessionId', args.sessionId))
+      .order('desc')
+      .collect()
+      .then(threads => threads.map(t => ({ ...t, lockerKey: undefined })))
   },
 })
 
@@ -50,12 +65,12 @@ export const get = query({
 export const create = mutation({
   args: {
     title: v.string(),
-    initSessionId: v.string(),
+    sessionId: v.string(),
     lockerKey: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     return await ctx.db.insert('threads', {
-      initSessionId: args.initSessionId,
+      sessionId: args.sessionId,
       title: args.title,
       lastMessageAt: Date.now(),
       lockerKey: args.lockerKey,
@@ -67,13 +82,18 @@ export const create = mutation({
 export const del = mutation({
   args: {
     threadId: v.id('threads'),
+    lockerKey: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     const thread = await ctx.db.get(args.threadId)
     if (!thread)
       throw new ConvexError('Thread not found')
 
-    await assertThreadAccess(ctx, { thread })
+    // Only allow thread to be deleted via lockerKey if its anonymous
+    if (thread.userId && args.lockerKey)
+      throw new ConvexError(`"lockerKey" is not allowed to use to delete a thread that is assigned to a user`)
+
+    await assertThreadAccess(ctx, { thread, lockerKey: args.lockerKey })
 
     await ctx.db.delete(args.threadId)
   },
@@ -94,7 +114,7 @@ export const generateThreadTitle = action({
     const { text } = await generateText({
       model: openrouter('qwen/qwen3-8b:free'),
       system: `You are a helpful assistant, generating concise, informative, and clear titles for a given context, keep the generated title under 40 characters, do not use any quotes and markdown syntax.`,
-      prompt: `Generate a new title for this thread, here is the previous info: \n${[
+      prompt: `Generate a new title for this thread, infer the language from the info's detail, here is the structured previous info: \n${[
         `Title: "${thread.title}"`,
         ...(messages.length
           ? [`Messages:\n${await simpleMessagesToString(messages.map(m => ({
@@ -109,7 +129,6 @@ export const generateThreadTitle = action({
     await ctx.runMutation(internal.threads.updateThreadInfo, {
       title: text.trim(),
       threadId: args.threadId,
-      lockerKey: args.lockerKey,
     })
   },
 })
@@ -119,15 +138,12 @@ export const updateThreadInfo = internalMutation({
     threadId: v.id('threads'),
     title: v.optional(v.string()),
     lastMessageAt: v.optional(v.number()),
-    lockerKey: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     const thread = await ctx.db.get(args.threadId)
     if (!thread)
       throw new Error('Thread not found')
 
-    await assertThreadAccess(ctx, { thread, lockerKey: args.lockerKey })
-
     await ctx.db.patch(args.threadId, {
       ...clearUndefined({
         title: args.title,
@@ -147,11 +163,14 @@ export async function assertThreadAccess(ctx: GenericCtx, { thread, lockerKey, u
   if (lockerKey && thread.lockerKey === lockerKey) {
     ;
   }
-  // Check permission other means
+  // Check permission by other means (JWT)
   else {
     userIdentity ??= await ctx.auth.getUserIdentity()
-    if (!userIdentity || (thread.userId !== userIdentity.subject))
+    if (!userIdentity || (thread.userId !== userIdentity.subject)) {
+      if (lockerKey)
+        console.error(`"lockerKey" available but incorrect`)
       throw new ConvexError('You are not authorized to view this thread')
+    }
   }
 }
 

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

@@ -46,7 +46,7 @@ const { ignoreUpdates: ignorePathUpdate } = watchIgnorable(
 
     if (threadId) {
       isFetching.value = true
-      await convex.query(api.messages.list, { threadId: threadId as Doc<'threads'>['_id'] })
+      await convex.query(api.messages.list, { threadId: threadId as Doc<'threads'>['_id'], lockerKey: getLockerKey(threadId) })
         .then((existingMessages) => {
           if (threadIdRef.value === threadId) {
             messages.value = existingMessages.map(customMessageTransform)
@@ -113,14 +113,18 @@ async function handleSubmit({ input, confirmMultiStream = false }: HandleSubmitA
   if (!threadIdRef.value) {
     // Set lockerKey to maintain permission if user is anonymous
     const lockerKey = $auth.loggedIn ? undefined : getRandomLockerKey()
-    const newThread = await createNewThread(convex, {
+    const newThreadId = await createNewThread(convex, {
       title: userInput,
       lockerKey,
     })
-    ignorePathUpdate(() => { threadIdRef.value = newThread })
+    ignorePathUpdate(() => { threadIdRef.value = newThreadId })
+
+    // Store lockerKey locally
+    if (lockerKey)
+      setLockerKey(newThreadId, lockerKey)
 
     // Asynchronously generates a new initial thread title
-    generateThreadTitle(convex, { threadId: newThread, lockerKey })
+    generateThreadTitle(convex, { threadId: newThreadId, lockerKey })
   }
 
   await streamToMessage({ message: messages.value[messages.value.length - 1]!, content: userInput })
@@ -151,7 +155,10 @@ async function pollToMessage({ message, resumeStreamId, threadId = threadIdRef.v
 
   const messageId = message.id as Id<'messages'>
 
-  const messageFromConvex = await convex.query(api.messages.get, { messageId: messageId as Id<'messages'> })
+  const messageFromConvex = await convex.query(api.messages.get, {
+    messageId: messageId as Id<'messages'>,
+    lockerKey: getLockerKey(threadId),
+  })
   Object.assign(message, customMessageTransform(messageFromConvex))
 
   if (message.isStreaming) {
@@ -162,7 +169,8 @@ async function pollToMessage({ message, resumeStreamId, threadId = threadIdRef.v
     console.log('Poll completed')
   }
 
-  setTimeout(() => { doScrollBottom({ maybe: true }) }, 100)
+  if (isNearBottom())
+    setTimeout(() => { doScrollBottom({ forceTries: 1 }) }, 100)
 }
 
 interface StreamToMessageArgs {
@@ -189,7 +197,7 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
         apiKey: 'dummy',
         content,
         resumeStreamId,
-        // lockerKey: undefined,
+        lockerKey: getLockerKey(currentThreadId),
       }),
       signal: abortController.signal,
     })
@@ -250,7 +258,8 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
       if (state.content)
         message.content += state.content
 
-      setTimeout(() => { doScrollBottom({ maybe: true }) }, 100)
+      if (isNearBottom())
+        setTimeout(() => { doScrollBottom({ forceTries: 1 }) }, 100)
     }
 
     message.isStreaming = false
@@ -276,9 +285,7 @@ function doScrollBottom({ smooth = true, maybe = false, forceTries = 0, lastScro
   if (l.$el.scrollTop < lastScrollTop)
     forceTries = 0
 
-  lastScrollTop = l.$el.scrollTop
-
-  if (!forceTries && maybe && ((l.$el.scrollTop + l.$el.clientHeight) < (scrollHeight - 456)))
+  if (!forceTries && maybe && !isNearBottom())
     return
 
   if (scrollHeight !== l.lenis.limit + l.$el.clientHeight)
@@ -288,13 +295,25 @@ function doScrollBottom({ smooth = true, maybe = false, forceTries = 0, lastScro
     ? 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 }))
     }, { 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 - 345)
+}
+
 const multiStreamConfirmDialogOpen = ref(false)
 let savedChatInput = ''
 function alertIsStreaming(input: string) {

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

@@ -24,7 +24,7 @@ import {
 } from '@/lib/shadcn/components/ui/sidebar'
 import { Button } from '~/lib/shadcn/components/ui/button'
 
-const { $auth } = useNuxtApp()
+const { $auth, $init } = useNuxtApp()
 const colorMode = useColorMode()
 const convex = useConvexClient()
 
@@ -40,10 +40,11 @@ const isFetching = ref(false)
 if ($auth.loggedIn) {
   const { data: threadsFromConvex, isLoading: fetchingFromConvex } = useConvexQuery(api.threads.list)
   watch(threadsFromConvex, (tFC) => {
-    // Must reconstruct tFC or else it cant be cloned to IDB after modifications
-    const newArr: typeof tFC = JSON.parse(JSON.stringify(tFC))
     // Keep threads that are not assigned to any users
-    threads.value = [...newArr, ...threads.value.filter(t => !t.userId)]
+    // Must reconstruct array or else it cant be cloned to IDB.
+    threads.value = JSON.parse(JSON.stringify(
+      [...tFC, ...threads.value.filter(t => !t.userId)],
+    ))
   })
   watch(fetchingFromConvex, (fFC) => {
     isFetching.value = fFC
@@ -54,6 +55,23 @@ if ($auth.loggedIn) {
     // TODO
   })
 }
+// For anonymous users, subscribe to threads via sessionId
+else {
+  const { data: threadsFromConvex, isLoading: fetchingFromConvex } = useConvexQuery(api.threads.listBySessionId, { sessionId: $init.sessionId })
+  watch(threadsFromConvex, (tFC) => {
+    // Keep threads from other sessionIds, that are not assigned to any users
+    // Must reconstruct array or else it cant be cloned to IDB.
+    threads.value = JSON.parse(JSON.stringify(
+      [
+        ...tFC.map(t => ({ ...t, lockerKey: getLockerKey(t._id) })),
+        ...threads.value.filter(t => !t.userId && t.sessionId !== $init.sessionId),
+      ],
+    ))
+  })
+  watch(fetchingFromConvex, (fFC) => {
+    isFetching.value = fFC
+  })
+}
 
 // Fuck TS in these situations
 // [other, pinned]
@@ -92,7 +110,7 @@ function unpinThread(thread: Doc<'threads'>) {
 
 async function _deleteThread(thread: Doc<'threads'>) {
   threads.value.splice(threads.value.indexOf(thread), 1)
-  await deleteThread(convex, thread._id)
+  await deleteThread(convex, { threadId: thread._id, lockerKey: $auth.loggedIn ? undefined : thread.lockerKey })
 }
 
 const [DefineDeleteBtn, ReuseDeleteBtn] = createReusableTemplate<{ thread: Doc<'threads'> }>()
@@ -147,7 +165,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
         <div class="hidden">
           <DefineDeleteBtn v-slot="{ thread }">
             <AlertDialog>
-              <AlertDialogTrigger as-child>
+              <AlertDialogTrigger v-show="!thread.userId || (thread.userId === $auth?.user?.sub)" as-child>
                 <Button tabindex="-1" variant="ghost" size="icon" class="size-7 transition-none" @pointerdown.stop.prevent>
                   <div class="i-hugeicons:delete-put-back" />
                 </Button>

apps/frontend/app/pages/chat/[...all].vue

@@ -4,17 +4,15 @@ import { SidebarProvider } from '@/lib/shadcn/components/ui/sidebar'
 definePageMeta({
   layout: 'basic',
 })
-
-const { $auth } = useNuxtApp()
 </script>
 
 <template>
   <div class="w-full flex items-center justify-center">
-    <div v-if="!$auth.loggedIn" class="h-full w-full flex items-center justify-center text-xl">
+    <!-- <div v-if="!$auth.loggedIn" class="h-full w-full flex items-center justify-center text-xl">
       {{ $t('pages.chat.loginPrompt') }}
-    </div>
+    </div> -->
 
-    <SidebarProvider v-else>
+    <SidebarProvider>
       <ChatSidebar />
       <ChatInterface class="h-full w-full" />
       <ChatFloatingMenu class="absolute left-2 top-2 z-10" />

apps/frontend/app/plugins/init.ts

@@ -2,13 +2,16 @@
  * Just a simple plugin that provides a mandatory global state and initializations for the app
  */
 
+import { randomStr } from '@namesmt/utils'
+
 export default defineNuxtPlugin({
   enforce: 'pre',
   name: 'local-init',
   parallel: true,
   async setup() {
     const state = reactive({
       mounted: false,
+      sessionId: `session_${Date.now()}_${randomStr(8)}`,
     })
     return {
       provide: {