feat: move last thread read to backend (#1696)

Moved to the backend so that we can server-render the previous chat and
improve the UX 10x.

Author: geclos

apps/web/src/app/(private)/_data-access/index.ts

@@ -11,6 +11,7 @@ import {
   ProjectLimitedView,
   Workspace,
   type Commit,
+  LAST_LATTE_THREAD_CACHE_KEY,
 } from '@latitude-data/core/browser'
 import { cache as redis } from '@latitude-data/core/cache'
 import { NotFoundError } from '@latitude-data/core/lib/errors'
@@ -401,3 +402,15 @@ export const isFeatureEnabledCached = cache(async (feature: string) => {
 
   return enabled
 })
+
+export const getLastLatteThreadUuidCached = async ({
+  projectId,
+}: {
+  projectId: number
+}) => {
+  const { workspace, user } = await getCurrentUserOrRedirect()
+  const client = await redis()
+  const key = LAST_LATTE_THREAD_CACHE_KEY(workspace.id, user.id, projectId)
+  const uuid = await client.get(key)
+  return uuid || undefined
+}

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/DocumentEditor.tsx

@@ -39,7 +39,10 @@ import { RunButton } from './RunButton'
 import { V2Playground } from './V2Playground'
 import DocumentParams from './V2Playground/DocumentParams'
 import { useCurrentDocument } from '$/app/providers/DocumentProvider'
-import type { ProviderApiKey } from '@latitude-data/core/browser'
+import type {
+  ProviderApiKey,
+  ProviderLogDto,
+} from '@latitude-data/core/browser'
 
 export type DocumentEditorProps = {
   document: DocumentVersion
@@ -49,6 +52,8 @@ export type DocumentEditorProps = {
   copilotEnabled: boolean
   refinementEnabled: boolean
   experimentDiff?: string
+  initialThreadUuid?: string
+  initialProviderLog?: ProviderLogDto
 }
 
 export function DocumentEditor(props: DocumentEditorProps) {
@@ -87,6 +92,8 @@ function DocumentEditorContent({
   document: doc,
   freeRunsCount,
   refinementEnabled,
+  initialThreadUuid,
+  initialProviderLog,
 }: Omit<DocumentEditorProps, 'experimentDiff'>) {
   const { updateDocumentContent } = useDocumentValue()
   const [mode, setMode] = useState<'preview' | 'chat'>('preview')
@@ -149,7 +156,10 @@ function DocumentEditorContent({
   useAutoScroll(containerRef, { startAtBottom: mode === 'chat' })
 
   return (
-    <LatteLayout>
+    <LatteLayout
+      initialThreadUuid={initialThreadUuid}
+      initialProviderLog={initialProviderLog}
+    >
       <div className='relative flex flex-col pt-6 h-full min-h-0'>
         <div className='w-full flex flex-col justify-center items-start gap-4 px-4 pb-4'>
           <div className='w-full flex flex-row items-center justify-between gap-4'>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/page.tsx

@@ -3,6 +3,7 @@ import {
   getDocumentByUuidCached,
   getDocumentsAtCommitCached,
   getProviderApiKeysCached,
+  getLastLatteThreadUuidCached,
 } from '$/app/(private)/_data-access'
 import providerApiKeyPresenter from '$/presenters/providerApiKeyPresenter'
 import { getCurrentUserOrRedirect } from '$/services/auth/getCurrentUser'
@@ -12,6 +13,7 @@ import { getFreeRuns } from '@latitude-data/core/services/freeRunsManager/index'
 import { env } from '@latitude-data/env'
 import { redirect } from 'next/navigation'
 import DocumentEditor from './_components/DocumentEditor/Editor'
+import { findLatteThreadProviderLog } from '@latitude-data/core/services/providerLogs/findLatteThreadProviderLog'
 
 export default async function DocumentPage({
   params,
@@ -45,6 +47,10 @@ export default async function DocumentPage({
   const documents = await getDocumentsAtCommitCached({ commit })
   const providerApiKeys = await getProviderApiKeysCached()
   const freeRunsCount = await getFreeRuns(workspace.id)
+  const lastThreadUuid = await getLastLatteThreadUuidCached({ projectId })
+  const initialProviderLog = await findLatteThreadProviderLog({
+    lastThreadUuid,
+  })
 
   return (
     <DocumentEditor
@@ -54,6 +60,8 @@ export default async function DocumentPage({
       freeRunsCount={freeRunsCount ? Number(freeRunsCount) : undefined}
       copilotEnabled={env.LATITUDE_CLOUD}
       refinementEnabled={env.LATITUDE_CLOUD}
+      initialThreadUuid={lastThreadUuid}
+      initialProviderLog={initialProviderLog}
     />
   )
 }

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/preview/page.tsx

@@ -8,6 +8,8 @@ import {
   IntegrationsRepository,
 } from '@latitude-data/core/repositories'
 import { TriggersList } from './_components/TriggersList'
+import { getLastLatteThreadUuidCached } from '$/app/(private)/_data-access'
+import { findLatteThreadProviderLog } from '@latitude-data/core/services/providerLogs/findLatteThreadProviderLog'
 
 export default async function PreviewPage({
   params,
@@ -38,9 +40,16 @@ export default async function PreviewPage({
     .findAll()
     .then((r) => r.unwrap())
     .then((integrations) => integrations.filter((i) => i.type === 'pipedream'))
+  const lastThreadUuid = await getLastLatteThreadUuidCached({ projectId })
+  const initialProviderLog = await findLatteThreadProviderLog({
+    lastThreadUuid,
+  })
 
   return (
-    <LatteLayout>
+    <LatteLayout
+      initialThreadUuid={lastThreadUuid}
+      initialProviderLog={initialProviderLog}
+    >
       <TriggersList
         triggers={integrationTriggers}
         integrations={integrations}

apps/web/src/components/LatteChat/index.tsx

@@ -31,8 +31,16 @@ import { LatteMessageList } from './_components/MessageList'
 import { LatteUnconfiguredIntegrations } from './_components/UnconfiguredIntegrations'
 import { LatteChatInput } from './LatteChatInput'
 
-export function LatteChat() {
-  const isLoading = useLoadThread()
+import type { ProviderLogDto } from '@latitude-data/core/browser'
+
+export function LatteChat({
+  initialThreadUuid,
+  initialProviderLog,
+}: {
+  initialThreadUuid?: string
+  initialProviderLog?: ProviderLogDto
+}) {
+  const isLoading = useLoadThread({ initialThreadUuid, initialProviderLog })
 
   if (isLoading)
     return (

apps/web/src/components/LatteLayout/index.tsx

@@ -4,8 +4,17 @@ import { ReactNode } from 'react'
 import { LatteChat } from '$/components/LatteChat'
 import { ClientOnly } from '@latitude-data/web-ui/atoms/ClientOnly'
 import { SplitPane } from '@latitude-data/web-ui/atoms/SplitPane'
+import type { ProviderLogDto } from '@latitude-data/core/browser'
 
-export function LatteLayout({ children }: { children: ReactNode }) {
+export function LatteLayout({
+  children,
+  initialThreadUuid,
+  initialProviderLog,
+}: {
+  children: ReactNode
+  initialThreadUuid?: string
+  initialProviderLog?: ProviderLogDto
+}) {
   return (
     <SplitPane
       direction='horizontal'
@@ -14,7 +23,10 @@ export function LatteLayout({ children }: { children: ReactNode }) {
       firstPane={children}
       secondPane={
         <ClientOnly>
-          <LatteChat />
+          <LatteChat
+            initialThreadUuid={initialThreadUuid}
+            initialProviderLog={initialProviderLog}
+          />
         </ClientOnly>
       }
     />

apps/web/src/hooks/latte/useLoadThread/fetchProviderLogHydrated.ts

@@ -1,58 +1,63 @@
-import { useEffect, useTransition, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useLatteStore } from '$/stores/latte/index'
 
 import { useCurrentProject } from '@latitude-data/web-ui/providers'
-import { fetchProviderLogHydrated } from './fetchProviderLogHydrated'
 import { buildInteractionsFromProviderLog } from './buildInteractionsFromProviderLog'
-import { useSyncAndGetThreadUuid } from './useSyncAndGetThreadUuid'
+import type { ProviderLogDto } from '@latitude-data/core/browser'
 
 /**
- * - Loads and transforms provider logs into Latte interactions.
- * - Fetches provider logs for the current thread UUID and converts them
- *   into a structured format of user-assistant interactions with input/output pairs.
- * - Runs only if there are no interactions in the current chat state,
- *   so it avoids overriding existing state.
- * - Runs once when Chat loads for a given project.
+ * Hook to load and initialize a thread in the Latte store based on the current project.
+ * It sets the thread UUID and builds interactions from the initial provider log if provided.
+ * @param initialThreadUuid - Optional UUID of the thread to load
+ * @param initialProviderLog - Optional provider log to build interactions from
+ * @returns Always returns false (placeholder for future loading state)
  */
-export function useLoadThread() {
+export function useLoadThread({
+  initialThreadUuid,
+  initialProviderLog,
+}: {
+  initialThreadUuid?: string
+  initialProviderLog?: ProviderLogDto
+}) {
   const { project } = useCurrentProject()
   const projectId = project.id
 
   const lastLoadedProjectId = useRef<number | null>(null)
-  const { interactions, setInteractions, currentProjectId, setCurrentProject } =
-    useLatteStore()
-  const syncAndGetThreadUuid = useSyncAndGetThreadUuid({ project })
-  const [isLoading, startTransition] = useTransition()
+  const {
+    interactions,
+    setInteractions,
+    setThreadUuid,
+    currentProjectId,
+    setCurrentProject,
+  } = useLatteStore()
 
   useEffect(() => {
     if (currentProjectId !== projectId) {
       setCurrentProject(projectId)
-      lastLoadedProjectId.current = null // force a reload next time
+      lastLoadedProjectId.current = null
     }
   }, [currentProjectId, projectId, setCurrentProject])
 
   useEffect(() => {
-    // Don’t refetch if there are already interactions
-    if (interactions.length > 0) return
-
-    // Don’t refetch if we already fetched this project
     if (lastLoadedProjectId.current === projectId) return
-
     lastLoadedProjectId.current = projectId
 
-    startTransition(async () => {
-      const threadUuid = syncAndGetThreadUuid()
-      if (!threadUuid) return
-
-      const providerLog = await fetchProviderLogHydrated({ threadUuid })
-      if (!providerLog) return
+    if (initialThreadUuid) setThreadUuid(initialThreadUuid)
 
-      const _interactions = buildInteractionsFromProviderLog({ providerLog })
-      if (_interactions.length > 0) {
-        setInteractions(_interactions)
-      }
-    })
-  }, [projectId, interactions.length, syncAndGetThreadUuid, setInteractions])
-
-  return isLoading
+    if (initialProviderLog && interactions.length === 0) {
+      const built = buildInteractionsFromProviderLog({
+        providerLog: initialProviderLog,
+      })
+      if (built.length > 0) setInteractions(built)
+    }
+  }, [
+    projectId,
+    initialThreadUuid,
+    initialProviderLog,
+    setThreadUuid,
+    interactions.length,
+    setInteractions,
+  ])
+
+  return false
 }