feat: Share Thread

Author: NamesMT

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

@@ -238,7 +238,7 @@ aiApp
             await c.env.runMutation(internal.threads.updateThreadInfo, { threadId, timestamp: Date.now() })
 
             // // Generate new thread title
-            // await c.env.runAction(api.threads.generateThreadTitle, { threadId, lockerKey, apiKey })
+            // await c.env.runAction(api.threads.generateTitle, { threadId, lockerKey, apiKey })
 
             controller.enqueue(encoder.encode(`o: ${JSON.stringify({ done: true })}\n`))
             controller.close()

apps/backend-convex/convex/threads.ts

@@ -182,7 +182,7 @@ export const unfreeze = mutation({
 })
 
 // Todo: maybe rate limit
-export const generateThreadTitle = action({
+export const generateTitle = action({
   args: {
     threadId: v.id('threads'),
     lockerKey: v.optional(v.string()),
@@ -215,6 +215,24 @@ export const generateThreadTitle = action({
   },
 })
 
+export const setLockerKey = mutation({
+  args: {
+    threadId: v.id('threads'),
+    newLockerKey: 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 })
+
+    await ctx.db.patch(args.threadId, {
+      lockerKey: args.newLockerKey,
+    })
+  },
+})
+
 export const updateThreadInfo = internalMutation({
   args: {
     threadId: v.id('threads'),

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

@@ -27,12 +27,16 @@ import {
   useSidebar,
 } from '@/lib/shadcn/components/ui/sidebar'
 import { Button } from '~/lib/shadcn/components/ui/button'
+import { useToast } from '~/lib/shadcn/components/ui/toast'
 
 const { $auth, $init } = useNuxtApp()
 const colorMode = useColorMode()
 const convex = useConvexClient()
 const chatContext = useChatContext()
 const sidebarContext = useSidebar()
+const { toast } = useToast()
+const { t } = useI18n()
+const { copy } = useClipboard({ legacy: true })
 
 const threadIdRef = useThreadIdRef()
 
@@ -116,6 +120,19 @@ async function _deleteThread(thread: Doc<'threads'>) {
   await deleteThread(convex, { threadId: thread._id, lockerKey: $auth.loggedIn ? undefined : thread.lockerKey })
 }
 
+async function _shareThread(thread: Doc<'threads'>) {
+  let lockerKey = thread.lockerKey
+  if (!lockerKey) {
+    const newLockerKey = getRandomLockerKey()
+    await threadSetLockerKey(convex, { threadId: thread._id, newLockerKey })
+    setLockerKey(thread._id, newLockerKey)
+    lockerKey = newLockerKey
+  }
+
+  await copy(`${window.location.origin}/chat/${thread._id}?lockerKey=${lockerKey}`)
+  toast({ description: t('chat.toast.threadShareLinkCopied') })
+}
+
 const [DefineDeleteBtn, ReuseDeleteBtn] = createReusableTemplate<{ thread: Doc<'threads'> }>()
 const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread: Doc<'threads'>, pinned?: boolean }>()
 </script>
@@ -267,6 +284,11 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                   >
                     {{ thread.frozen ? $t('chat.thread.unfreeze') : $t('chat.thread.freeze') }}
                   </ContextMenuItem>
+                  <ContextMenuItem @select.prevent>
+                    <ShareThreadAlertDialog :thread :callback="() => { _shareThread(thread) }" :tip-only="true">
+                      <p>{{ $t('chat.thread.share') }}</p>
+                    </ShareThreadAlertDialog>
+                  </ContextMenuItem>
                 </ContextMenuContent>
               </ContextMenu>
             </li>
@@ -334,6 +356,10 @@ const [DefineThreadLiItem, ReuseThreadLiItem] = createReusableTemplate<{ thread:
                 <div>InsaneUI</div>
                 <div :class="chatContext.insaneUI.value ? ' i-hugeicons:crazy bg-mainGradient' : ' i-hugeicons:confused'" />
               </DropdownMenuItem>
+              <DropdownMenuItem class="justify-between">
+                <div>Settings</div>
+                <div class="i-hugeicons:settings-01" />
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </SidebarMenuItem>

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

@@ -48,9 +48,9 @@ const { $auth } = useNuxtApp()
     </Tooltip>
     <AlertDialogContent>
       <AlertDialogHeader>
-        <AlertDialogTitle>{{ $t('chat.sidebar.deleteThread.title') }}</AlertDialogTitle>
+        <AlertDialogTitle>{{ $t('chat.alert.deleteThread.title') }}</AlertDialogTitle>
         <AlertDialogDescription class="whitespace-pre-line">
-          {{ $t('chat.sidebar.deleteThread.description', { name: thread.title }) }}
+          {{ $t('chat.alert.deleteThread.description', { name: thread.title }) }}
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Doc } from 'backend-convex/convex/_generated/dataModel'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/lib/shadcn/components/ui/alert-dialog'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/shadcn/components/ui/tooltip'
+
+const {
+  thread,
+  callback,
+  tipOnly,
+} = defineProps<{
+  thread: Doc<'threads'>
+  callback: () => void
+  tipOnly?: boolean
+}>()
+
+const { $auth } = useNuxtApp()
+</script>
+
+<template>
+  <AlertDialog>
+    <Tooltip :delay-duration="500">
+      <AlertDialogTrigger v-show="!thread.userId || (thread.userId === $auth?.user?.sub)" as-child>
+        <TooltipTrigger as-child @pointerdown.stop.prevent @click.shift.stop.prevent="callback()">
+          <slot />
+        </TooltipTrigger>
+        <TooltipContent side="bottom" :side-offset="6">
+          <p class="whitespace-pre-line text-center">
+            {{ tipOnly
+              ? $t('tip.holdShift')
+              : `${$t('chat.thread.share')}\n${$t('tip.holdShift')}` }}
+          </p>
+        </TooltipContent>
+      </AlertDialogTrigger>
+    </Tooltip>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{{ $t('chat.alert.shareThread.title') }}</AlertDialogTitle>
+        <AlertDialogDescription class="whitespace-pre-line">
+          {{ $t('chat.alert.shareThread.description', { name: thread.title }) }}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>{{ $t('cancel') }}</AlertDialogCancel>
+        <AlertDialogAction @click="callback()">
+          {{ $t('confirm') }}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

apps/frontend/app/middleware/accept-locker-key.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (import.meta.server)
+    return
+
+  const threadIdRef = useThreadIdRef()
+
+  const threadId = threadIdRef.value
+  const lockerKey = to.query.lockerKey
+  if (lockerKey && threadId) {
+    if (getLockerKey(threadId) && to.query.force !== 'true')
+      return console.error('Locker key already exists, add `&force=true` to overwrite')
+
+    setLockerKey(threadId, String(to.query.lockerKey))
+  }
+})

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

@@ -5,6 +5,7 @@ import { SidebarProvider } from '@/lib/shadcn/components/ui/sidebar'
 
 definePageMeta({
   layout: 'basic',
+  middleware: ['accept-locker-key'],
 })
 
 const threadIdRef = useThreadIdRef()

apps/frontend/app/utils/chat.ts

@@ -98,12 +98,26 @@ export async function generateThreadTitle(convex: ConvexClient | ConvexHttpClien
   threadId,
   lockerKey,
 }: GenerateThreadTitleArgs) {
-  await convex.action(api.threads.generateThreadTitle, {
+  await convex.action(api.threads.generateTitle, {
     threadId,
     lockerKey,
   })
 }
 
+export interface ThreadSetLockerKeyArgs {
+  threadId: Id<'threads'>
+  newLockerKey: string
+}
+export async function threadSetLockerKey(convex: ConvexClient | ConvexHttpClient, {
+  threadId,
+  newLockerKey,
+}: ThreadSetLockerKeyArgs) {
+  await convex.mutation(api.threads.setLockerKey, {
+    threadId,
+    newLockerKey,
+  })
+}
+
 export interface CustomMessage extends Doc<'messages'> {
   id: string
 }

i18n.lock

@@ -61,8 +61,8 @@ checksums:
     chat.sidebar.newChat: 3d7b701878aca8e2dbb7c6732f7f3bee
     chat.sidebar.threads.loading: c0591fcc6aa3eb6092ab4f4ce577804c
     chat.sidebar.threads.empty: eaa3199ed3ba5dd2bb3988ea999649e3
-    chat.sidebar.deleteThread.title: 3dea4a78f8c5c2073d8eab4aad3f2015
-    chat.sidebar.deleteThread.description: b0cca6d07bbbd907b4d25dc2a1dbe2e3
+    chat.alert.deleteThread.title: 3dea4a78f8c5c2073d8eab4aad3f2015
+    chat.alert.deleteThread.description: b0cca6d07bbbd907b4d25dc2a1dbe2e3
     cancel: 2e2a849c2223911717de8caa2c71bade
     confirm: 90930b51154032f119fa75c1bd422d8b
     continue: 3cfba90b4600131e82fc4260c568d044
@@ -88,5 +88,9 @@ checksums:
     chat.thread.unfreeze: 0fcaf656c357870fb42132f7342aa23a
     tip.holdShift: 895a995e323b21fd1de51496a994103d
     chat.thread.frozenWithDescription: 5cf38e514472bed10297a7936924737f
+    chat.thread.share: 3a257c0d42ffa5ed6eddfc71e46db6c0
+    chat.alert.shareThread.title: e00e8208d2dd52a00a4cbccdc57199e3
+    chat.alert.shareThread.description: e8eeee4bd83372c3a997a593a585f077
+    chat.toast.threadShareLinkCopied: 301236632c59a15e329f433e7b4a3706
   bd59d862767f00d421bd4cacc7522c6c:
     hello-from-%2Fx: de51bbd5a66af7e24e90466431fa9006

locals/locales/src/sheets/frontend/i18n.csv

@@ -57,8 +57,8 @@ welcome,,Welcome,Bienvenido,Bienvenue,Добро пожаловать,Chào mừ
 chat.sidebar.newChat,,New Chat,Nuevo chat,Nouvelle conversation,Новый чат,Cuộc trò chuyện mới,新建聊天
 chat.sidebar.threads.loading,,Loading threads...,Cargando conversaciones...,Chargement des conversations...,Загрузка бесед...,Đang tải các cuộc trò chuyện...,正在加载对话...
 chat.sidebar.threads.empty,,No chats yet.,No hay chats todavía.,Pas encore de conversations.,Чатов пока нет.,Chưa có cuộc trò chuyện nào.,尚无聊天记录。
-chat.sidebar.deleteThread.title,,Delete Thread,Eliminar conversación,Supprimer la conversation,Удалить тему,Xóa Chủ Đề,删除话题
-chat.sidebar.deleteThread.description,,"Are you sure you want to delete ""{name}""?
+chat.alert.deleteThread.title,,Delete Thread,Eliminar conversación,Supprimer la conversation,Удалить тему,Xóa Chủ Đề,删除话题
+chat.alert.deleteThread.description,,"Are you sure you want to delete ""{name}""?
 This action cannot be undone.","¿Estás seguro de que quieres eliminar ""{name}""?
 Esta acción no se puede deshacer.","Êtes-vous sûr de vouloir supprimer ""{name}"" ?
 Cette action ne peut pas être annulée.","Вы уверены, что хотите удалить ""{name}""?
@@ -89,4 +89,14 @@ chat.thread.frozen,,Thread is frozen,El hilo está congelado,La discussion est g
 chat.thread.freeze,,Freeze thread,Congelar hilo,Geler la discussion,Заморозить тему,Đóng băng chủ đề,冻结线程
 chat.thread.unfreeze,,Unfreeze thread,Descongelar hilo,Dégeler la discussion,Разморозить тему,Giải băng chủ đề,解冻线程
 tip.holdShift,,"Hold ""Shift"" to skip confirmation","Mantén presionado ""Shift"" para omitir la confirmación","Maintenez ""Maj"" pour ignorer la confirmation","Удерживайте ""Shift"", чтобы пропустить подтверждение","Giữ phím ""Shift"" để bỏ qua xác nhận","按住 ""Shift"" 跳过确认"
-chat.thread.frozenWithDescription,,"Thread is frozen, new messages will create a new branch","El hilo está congelado, los nuevos mensajes crearán una nueva rama","La discussion est gelée, les nouveaux messages créeront une nouvelle branche","Тема заморожена, новые сообщения создадут новую ветку","Cuộc trò chuyện đã bị đóng băng, tin nhắn mới sẽ tạo một nhánh mới",线程已冻结，新消息将创建一个新分支
+chat.thread.frozenWithDescription,,"Thread is frozen, new messages will create a new branch","El hilo está congelado, los nuevos mensajes crearán una nueva rama","La discussion est gelée, les nouveaux messages créeront une nouvelle branche","Тема заморожена, новые сообщения создадут новую ветку","Chủ đề đã bị đóng băng, tin nhắn mới sẽ tạo một nhánh mới",线程已冻结，新消息将创建一个新分支
+chat.thread.share,,Share thread,Compartir hilo,Partager la discussion,Поделиться дискуссией,Chia sẻ chủ đề,共享线程
+chat.alert.shareThread.title,,Share Thread,Compartir hilo,Partager la discussion,Поделиться дискуссией,Chia sẻ chủ đề,共享线程
+chat.alert.shareThread.description,,"Are you sure you want to share ""{name}""?
+The recipient will have full access to the history and future of the thread.","¿Estás seguro de que quieres compartir ""{name}""?
+El destinatario tendrá acceso completo al historial y futuro de la conversación.","Êtes-vous sûr de vouloir partager ""{name}"" ?
+Le destinataire aura un accès complet à l'historique et au futur de la conversation.","Вы уверены, что хотите поделиться ""{name}""?
+Получатель получит полный доступ к истории и будущему этой ветки.","Bạn có chắc chắn muốn chia sẻ ""{name}""?
+Người nhận sẽ có toàn quyền truy cập vào lịch sử và tương lai của cuộc trò chuyện.","您确定要分享“{name}”吗？
+接收者将可以完全访问该线程的历史记录和未来内容。"
+chat.toast.threadShareLinkCopied,,The thread access link has been copied to your clipboard.,El enlace de acceso a la conversación ha sido copiado a tu portapapeles.,Le lien d'accès à la conversation a été copié dans votre presse-papiers.,Ссылка для доступа к ветке скопирована в ваш буфер обмена.,Đường dẫn truy cập cuộc trò chuyện đã được sao chép vào bảng tạm của bạn.,线程访问链接已复制到您的剪贴板。