feat: thread title gen, some general fixes

Author: NamesMT

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

@@ -126,7 +126,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(api.threads.updateLastMessage, { threadId, lockerKey })
+          await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now(), lockerKey })
           c.text('OK')
         }
       }
@@ -232,7 +232,10 @@ aiApp
 
             // Finish streaming
             await c.env.runMutation(internal.messages.finishStreaming, { streamId })
-            await c.env.runMutation(api.threads.updateLastMessage, { threadId, lockerKey })
+            await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, lastMessageAt: Date.now(), lockerKey })
+
+            // // Generate new thread title
+            // await c.env.runAction(api.threads.generateThreadTitle, { threadId, lockerKey, apiKey })
 
             controller.enqueue(encoder.encode(`o: ${JSON.stringify({ done: true })}\n`))
             controller.close()

apps/backend-convex/convex/threads.ts

@@ -1,8 +1,13 @@
 import type { UserIdentity } from 'convex/server'
 import type { Doc } from './_generated/dataModel'
 import type { GenericCtx } from './_generated/server'
+import { simpleMessagesToString } from '@local/common/src/utils/aisdk'
+import { clearUndefined } from '@namesmt/utils'
+import { openrouter } from '@openrouter/ai-sdk-provider'
+import { generateText } from 'ai'
 import { ConvexError, v } from 'convex/values'
-import { internalMutation, mutation, query } from './_generated/server'
+import { api, internal } from './_generated/api'
+import { action, internalMutation, mutation, query } from './_generated/server'
 
 export const list = query({
   args: {
@@ -74,10 +79,47 @@ export const del = mutation({
   },
 })
 
-export const updateLastMessage = mutation({
+// Todo: maybe rate limit
+export const generateThreadTitle = action({
   args: {
     threadId: v.id('threads'),
     lockerKey: v.optional(v.string()),
+    apiKey: v.optional(v.string()),
+  },
+  handler: async (ctx, args) => {
+    const thread = await ctx.runQuery(api.threads.get, { threadId: args.threadId, lockerKey: args.lockerKey })
+
+    const messages = await ctx.runQuery(api.messages.list, { threadId: args.threadId, lockerKey: args.lockerKey })
+
+    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${[
+        `Title: "${thread.title}"`,
+        ...(messages.length
+          ? [`Messages:\n${await simpleMessagesToString(messages.map(m => ({
+              id: m._id,
+              role: m.role,
+              content: m.content,
+            })))}`]
+          : []),
+      ].join('\n')}`,
+    })
+
+    await ctx.runMutation(internal.threads.updateThreadInfo, {
+      title: text.trim(),
+      threadId: args.threadId,
+      lockerKey: args.lockerKey,
+    })
+  },
+})
+
+export const updateThreadInfo = internalMutation({
+  args: {
+    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)
@@ -87,7 +129,10 @@ export const updateLastMessage = mutation({
     await assertThreadAccess(ctx, { thread, lockerKey: args.lockerKey })
 
     await ctx.db.patch(args.threadId, {
-      lastMessageAt: Date.now(),
+      ...clearUndefined({
+        title: args.title,
+        lastMessageAt: args.lastMessageAt,
+      }),
     })
   },
 })

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

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import type { Doc, Id } from 'backend-convex/convex/_generated/dataModel'
 import type Lenis from 'lenis'
-import { keyBy, randomStr, sleep, uniquePromise } from '@namesmt/utils'
+import { keyBy, sleep, uniquePromise } from '@namesmt/utils'
 import { api } from 'backend-convex/convex/_generated/api'
 import { useConvexClient } from 'convex-vue'
 import { countdown } from 'kontroll'
@@ -107,16 +107,20 @@ async function handleSubmit({ input, confirmMultiStream = false }: HandleSubmitA
 
   chatInput.value = ''
 
-  doScrollBottom()
+  nextTick(() => { doScrollBottom() })
 
   // Create new thread
   if (!threadIdRef.value) {
+    // Set lockerKey to maintain permission if user is anonymous
+    const lockerKey = $auth.loggedIn ? undefined : getRandomLockerKey()
     const newThread = await createNewThread(convex, {
       title: userInput,
-      // Set lockerKey to maintain permission if user is anonymous
-      lockerKey: $auth.loggedIn ? undefined : randomStr(32),
+      lockerKey,
     })
     ignorePathUpdate(() => { threadIdRef.value = newThread })
+
+    // Asynchronously generates a new initial thread title
+    generateThreadTitle(convex, { threadId: newThread, lockerKey })
   }
 
   await streamToMessage({ message: messages.value[messages.value.length - 1]!, content: userInput })
@@ -137,16 +141,22 @@ async function resumeStreamProcess(streamSessionId: string, messageId: string) {
 interface PollToMessageArgs {
   message: CustomMessage
   resumeStreamId: string
+  threadId?: string
 }
-async function pollToMessage({ message, resumeStreamId }: PollToMessageArgs) {
+async function pollToMessage({ message, resumeStreamId, threadId = threadIdRef.value }: PollToMessageArgs) {
+  if (threadId && threadId !== threadIdRef.value) {
+    console.warn('User changed thread, poll stopped.')
+    return
+  }
+
   const messageId = message.id as Id<'messages'>
 
   const messageFromConvex = await convex.query(api.messages.get, { messageId: messageId as Id<'messages'> })
   Object.assign(message, customMessageTransform(messageFromConvex))
 
   if (message.isStreaming) {
     sleep(400)
-      .then(() => { pollToMessage({ message, resumeStreamId }) })
+      .then(() => { pollToMessage({ message, resumeStreamId, threadId }) })
   }
   else {
     console.log('Poll completed')
@@ -164,21 +174,24 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
   try {
     ++streamingMessages.value
 
+    const currentThreadId = threadIdRef.value
+    const abortController = new AbortController()
     const response = await fetch(`${convexApiUrl}/api/ai/chat/stream`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${$auth.token}`,
       },
       body: JSON.stringify({
-        threadId: threadIdRef.value,
+        threadId: currentThreadId,
         provider: 'openrouter',
         model: 'deepseek/deepseek-chat:free',
         apiKey: 'dummy',
         content,
         resumeStreamId,
         // lockerKey: undefined,
       }),
+      signal: abortController.signal,
     })
 
     if (!response.ok) {
@@ -196,6 +209,12 @@ async function streamToMessage({ message, content, resumeStreamId }: StreamToMes
     message.isStreaming = true
 
     while (true) {
+      if (currentThreadId !== threadIdRef.value) {
+        console.warn('User changed thread, stopping stream...')
+        abortController.abort()
+        break
+      }
+
       const { done, value } = await reader.read()
       if (done)
         break
@@ -299,7 +318,7 @@ function alertIsStreaming(input: string) {
 
           <div
             v-if="!messages.length"
-            class="relative z-2 whitespace-pre-wrap px-2 text-center text-5xl text-gray-400 font-medium tracking-tighter dark:text-gray-500 dark:text-white"
+            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"
           >
             <p>
               {{ threadIdRef ? $t('chat.interface.sendToStart') : $t('chat.interface.selectOrStart') }}

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

@@ -176,7 +176,7 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                 :to="`/chat/${thread._id}`"
                 class="group/thread relative block overflow-hidden rounded-md p-2 px-3 [&.router-link-exact-active]:bg-primary/10 hover:bg-primary/20"
               >
-                <div>
+                <div class="line-clamp-1">
                   {{ thread.title }}
                 </div>
                 <LiquidGlassDiv

apps/frontend/app/utils/chat.ts

@@ -1,6 +1,7 @@
 import type { Message } from '@ai-sdk/vue'
 import type { Doc, Id } from 'backend-convex/convex/_generated/dataModel'
 import type { ConvexClient, ConvexHttpClient } from 'convex/browser'
+import { randomStr } from '@namesmt/utils'
 import { api } from 'backend-convex/convex/_generated/api'
 
 export interface CreateNewThreadArgs {
@@ -12,7 +13,7 @@ export async function createNewThread(convex: ConvexClient | ConvexHttpClient, {
   lockerKey,
 }: CreateNewThreadArgs) {
   const newThreadId = await convex.mutation(api.threads.create, {
-    title: `${title.substring(0, 20)}...`,
+    title,
     initSessionId: `session_${Date.now()}`,
     lockerKey,
   })
@@ -26,6 +27,20 @@ export async function deleteThread(convex: ConvexClient | ConvexHttpClient, thre
   })
 }
 
+export interface GenerateThreadTitleArgs {
+  threadId: Id<'threads'>
+  lockerKey?: string
+}
+export async function generateThreadTitle(convex: ConvexClient | ConvexHttpClient, {
+  threadId,
+  lockerKey,
+}: GenerateThreadTitleArgs) {
+  await convex.action(api.threads.generateThreadTitle, {
+    threadId,
+    lockerKey,
+  })
+}
+
 export interface CustomMessage {
   id: string
   role: 'user' | 'assistant'
@@ -45,3 +60,15 @@ export function customMessageTransform(message: Doc<'messages'>): CustomMessage
     streamId: message.streamId,
   }
 }
+
+export function getRandomLockerKey() {
+  return `locker_${Date.now()}_${randomStr(8)}`
+}
+
+export function setLockerKey(kid: string, lockerKey: string) {
+  localStorage.setItem(`locker_${kid}`, lockerKey)
+}
+
+export function getLockerKey(kid: string) {
+  return localStorage.getItem(`locker_${kid}`)
+}

apps/frontend/nuxt.config.ts

@@ -127,7 +127,7 @@ export default defineNuxtConfig({
   mdc: {
     highlight: {
       wrapperStyle: true,
-      // noApiRoute: true,
+      noApiRoute: true,
       langs: bundledLanguagesInfo.map(l => l.id) as BundledLanguage[],
     },
     keepComments: true,

locals/common/src/utils/aisdk.ts

@@ -0,0 +1,7 @@
+export async function simpleMessagesToString(messages: {
+  id: string
+  role: string
+  content: string
+}[]) {
+  return messages.map(m => `@-- Message ID: ${m.id}\nRole: ${m.role}\nContent:\n${m.content}`).join('\n--@\n')
+}