AI Assistant Multiple Documents: Compose HorizontalPager

1
/*
2
 *   Copyright © 2025-2026 PSPDFKit GmbH. All rights reserved.
3
 *
4
 *   The PSPDFKit Sample applications are licensed with a modified BSD license.
5
 *   Please see License for details. This notice may not be removed from this file.
6
 */
7

8
package com.pspdfkit.catalog.examples.kotlin
9

10
import android.content.Context
11
import android.content.Intent
12
import android.graphics.RectF
13
import android.os.Bundle
14
import androidx.activity.compose.setContent
15
import androidx.activity.enableEdgeToEdge
16
import androidx.appcompat.app.AppCompatActivity
17
import androidx.compose.animation.AnimatedVisibility
18
import androidx.compose.animation.expandVertically
19
import androidx.compose.animation.fadeIn
20
import androidx.compose.animation.fadeOut
21
import androidx.compose.animation.shrinkVertically
22
import androidx.compose.animation.slideInVertically
23
import androidx.compose.animation.slideOutVertically
24
import androidx.compose.foundation.layout.Box
25
import androidx.compose.foundation.layout.Column
26
import androidx.compose.foundation.layout.fillMaxSize
27
import androidx.compose.foundation.layout.fillMaxWidth
28
import androidx.compose.foundation.layout.navigationBarsPadding
29
import androidx.compose.foundation.pager.HorizontalPager
30
import androidx.compose.foundation.pager.rememberPagerState
31
import androidx.compose.material3.ExperimentalMaterial3Api
32
import androidx.compose.material3.Icon
33
import androidx.compose.material3.IconButton
34
import androidx.compose.material3.MaterialTheme
35
import androidx.compose.material3.PrimaryTabRow
36
import androidx.compose.material3.Tab
37
import androidx.compose.material3.Text
38
import androidx.compose.material3.TopAppBar
39
import androidx.compose.material3.TopAppBarDefaults
40
import androidx.compose.runtime.Composable
41
import androidx.compose.runtime.LaunchedEffect
42
import androidx.compose.runtime.collectAsState
43
import androidx.compose.runtime.getValue
44
import androidx.compose.runtime.key
45
import androidx.compose.runtime.mutableStateOf
46
import androidx.compose.runtime.remember
47
import androidx.compose.runtime.rememberCoroutineScope
48
import androidx.compose.runtime.setValue
49
import androidx.compose.ui.Alignment
50
import androidx.compose.ui.Modifier
51
import androidx.compose.ui.graphics.Color
52
import androidx.compose.ui.platform.LocalContext
53
import androidx.compose.ui.platform.LocalDensity
54
import androidx.compose.ui.res.painterResource
55
import androidx.compose.ui.text.TextStyle
56
import androidx.compose.ui.text.font.FontWeight
57
import androidx.compose.ui.text.style.TextOverflow
58
import androidx.compose.ui.unit.dp
59
import androidx.compose.ui.unit.sp
60
import com.pspdfkit.ai.createAiAssistant
61
import com.pspdfkit.ai.showAiAssistant
62
import com.pspdfkit.catalog.R
63
import com.pspdfkit.catalog.SdkExample
64
import com.pspdfkit.catalog.SdkExample.Companion.WELCOME_DOC
65
import com.pspdfkit.catalog.examples.kotlin.AiAssistantComposeActivity.Companion.PREFERENCES_NAME
66
import com.pspdfkit.catalog.examples.kotlin.AiAssistantComposeActivity.Companion.PREF_AI_IP_ADDRESS
67
import com.pspdfkit.catalog.ui.theming.CatalogTheme
68
import com.pspdfkit.catalog.utils.JwtGenerator
69
import com.pspdfkit.configuration.activity.PdfActivityConfiguration
70
import com.pspdfkit.configuration.page.PageScrollDirection
71
import com.pspdfkit.document.providers.AssetDataProvider
72
import com.pspdfkit.document.providers.getDataProviderFromDocumentSource
73
import com.pspdfkit.jetpack.compose.interactors.DefaultListeners
74
import com.pspdfkit.jetpack.compose.interactors.DocumentState
75
import com.pspdfkit.jetpack.compose.interactors.getDefaultDocumentManager
76
import com.pspdfkit.jetpack.compose.interactors.rememberDocumentState
77
import com.pspdfkit.jetpack.compose.views.DocumentView
78
import com.pspdfkit.ui.DocumentDescriptor
79
import io.nutrient.domain.ai.AiAssistant
80
import io.nutrient.domain.ai.AiAssistantProvider
81
import kotlinx.coroutines.flow.MutableStateFlow
82
import kotlinx.coroutines.flow.StateFlow
83
import kotlinx.coroutines.flow.asStateFlow
84
import kotlinx.coroutines.launch
85

86
/**
87
 * An example that demonstrates how to implement AI Assistant with multiple documents for the DocumentView in a Compose way.
88
 */
89
class AiAssistantMultiDocComposeExample(context: Context) : SdkExample(
90
    context,
91
    R.string.jetpackAiAssistantMultiDocExampleTitle,
92
    R.string.jetpackAiAssistantMultiDocExampleDescription
93
) {
94
    override fun launchExample(context: Context, configuration: PdfActivityConfiguration.Builder) {
95
        val intent = Intent(context, AiAssistantMultiDocComposeActivity::class.java)
96
        context.startActivity(intent)
97
    }
98
}
99

100
class AiAssistantMultiDocComposeActivity : AppCompatActivity(), AiAssistantProvider {
101
    val assetFiles = listOf(WELCOME_DOC, "Scientific-paper.pdf", "Teacher.pdf", "The-Cosmic-Context-for-Life.pdf")
102
    val documentDescriptors = assetFiles.map { DocumentDescriptor.fromDataProviders(listOf(AssetDataProvider(it)), listOf(), listOf()) }
103
    private lateinit var activityConfiguration: PdfActivityConfiguration
104
    private val sessionId = AiAssistantMultiDocComposeActivity::class.java.simpleName
105
    private var ipAddressValue: String? = null
106
    var documentStateMap = mutableMapOf<Int, DocumentState>()
107

108
    private val _currentDocumentIndex = MutableStateFlow(0)
109
    val currentDocumentIndex: StateFlow<Int> = _currentDocumentIndex.asStateFlow()
110

111
    override fun onCreate(savedInstanceState: Bundle?) {
112
        enableEdgeToEdge()
113
        super.onCreate(savedInstanceState)
114

115
        val preferences = getSharedPreferences(PREFERENCES_NAME, MODE_PRIVATE)
116
        ipAddressValue = preferences.getString(PREF_AI_IP_ADDRESS, "") ?: ""
117

118
        setContent {
119
            var toolbarVisibility by remember { mutableStateOf(true) }
120
            activityConfiguration = PdfActivityConfiguration.Builder(LocalContext.current)
121
                .setAiAssistantEnabled(true)
122
                .defaultToolbarEnabled(false)
123
                .scrollDirection(PageScrollDirection.VERTICAL)
124
                .theme(R.style.PSPDFCatalog_AIAssistantDialog)
125
                .themeDark(R.style.PSPDFCatalog_AIAssistantDialog_Dark)
126
                .build()
127

128
            CatalogTheme {
129
                val currentIndex by currentDocumentIndex.collectAsState()
130

131
                Box(
132
                    modifier = Modifier
133
                        .fillMaxSize()
134
                        .navigationBarsPadding()
135
                ) {
136
                    val pagerState = rememberPagerState(currentIndex) { documentDescriptors.size }
137
                    LaunchedEffect(currentIndex) {
138
                        pagerState.animateScrollToPage(currentIndex)
139
                    }
140
                    HorizontalPager(
141
                        state = pagerState,
142
                        userScrollEnabled = false,
143
                        beyondViewportPageCount = documentDescriptors.size,
144
                        modifier = Modifier
145
                            .fillMaxSize()
146
                    ) { page ->
147
                        if (page < documentDescriptors.size) {
148
                            key(page) {
149
                                val dataProvider = remember(page) {
150
                                    documentDescriptors[page].documentSource.getDataProviderFromDocumentSource()
151
                                }
152
                                // Create or retrieve the DocumentState for the current page.
153
                                val documentState = documentStateMap[page] ?: rememberDocumentState(dataProvider, activityConfiguration).also { documentStateMap.put(page, it) }
154
                                Box(modifier = Modifier.fillMaxSize()) {
155
                                    DocumentView(
156
                                        modifier = Modifier.fillMaxSize(),
157
                                        documentState = documentState,
158
                                        documentManager = getDefaultDocumentManager(
159
                                            uiListener = DefaultListeners.uiListeners(
160
                                                onImmersiveModeEnabled = { toolbarVisibility = !it }
161
                                            )
162
                                        )
163
                                    )
164
                                }
165
                            }
166
                        }
167
                    }
168

169
                    CustomToolbar(
170
                        onClick = {
171
                            showAiAssistant(this@AiAssistantMultiDocComposeActivity)
172
                        },
173
                        toolbarVisibility = toolbarVisibility,
174
                        documentDescriptors = documentDescriptors,
175
                        currentIndex
176
                    ) {
177
                        _currentDocumentIndex.value = it
178
                    }
179
                }
180
            }
181
        }
182
    }
183
    var assistant: AiAssistant? = null
184

185
    override fun getAiAssistant(): AiAssistant {
186
        return assistant ?: run {
187
            createAiAssistant(
188
                context = this@AiAssistantMultiDocComposeActivity,
189
                documentsDescriptors = documentDescriptors,
190
                serverUrl = "http://$ipAddressValue:4000",
191
                sessionId = sessionId,
192
                jwtToken = { documentIds ->
193
                    JwtGenerator.generateJwtToken(
194
                        this@AiAssistantMultiDocComposeActivity,
195
                        claims = mapOf(
196
                            "document_ids" to documentIds,
197
                            "session_ids" to listOf(sessionId),
198
                            "request_limit" to mapOf(
199
                                "requests" to 160,
200
                                "time_period_s" to 1000 * 60 * 10
201
                            )
202
                        )
203
                    )
204
                }
205
            ).also {
206
                assistant = it
207
            }
208
        }
209
    }
210

211
    override fun navigateTo(
212
        documentRect: List<RectF>,
213
        pageIndex: Int,
214
        documentIndex: Int
215
    ) {
216
        _currentDocumentIndex.value = documentIndex
217
        documentStateMap[documentIndex]?.documentConnection?.highlight(pageIndex, documentRect)
218
    }
219
}
220

221
/**
222
 * A custom toolbar component for document viewer with animated visibility.
223
 *
224
 * @param onClick Callback for AI Assistant button click
225
 * @param toolbarVisibility Whether the toolbar should be visible
226
 * @param documentDescriptors List of [DocumentDescriptor] to display titles in the toolbar
227
 * @param currentIndex The index of the currently selected document
228
 * @param onPagerIndexChange Callback to change the pager index when a tab is clicked
229
 */
230
@OptIn(ExperimentalMaterial3Api::class)
231
@Composable
232
fun CustomToolbar(
233
    onClick: () -> Unit,
234
    toolbarVisibility: Boolean,
235
    documentDescriptors: List<DocumentDescriptor>,
236
    currentIndex: Int,
237
    onPagerIndexChange: suspend (Int) -> Unit = {}
238
) {
239
    val localDensity = LocalDensity.current
240
    val context = LocalContext.current
241
    val coroutineScope = rememberCoroutineScope()
242

243
    // Animate toolbar appearance/disappearance with slide, expand and fade effects
244
    AnimatedVisibility(
245
        visible = toolbarVisibility,
246
        enter = slideInVertically { with(localDensity) { -40.dp.roundToPx() } } +
247
            expandVertically(expandFrom = Alignment.Top) +
248
            fadeIn(initialAlpha = 0.3f),
249
        exit = slideOutVertically() + shrinkVertically() + fadeOut()
250
    ) {
251
        Column {
252
            TopAppBar(
253
                title = {
254
                    Column {
255
                        Text(
256
                            text = documentDescriptors[currentIndex].getTitle(context),
257
                            color = Color.White,
258
                            style = TextStyle(
259
                                fontSize = 16.sp,
260
                                fontWeight = FontWeight.Medium
261
                            )
262
                        )
263
                    }
264
                },
265
                actions = {
266
                    IconButton(
267
                        onClick = onClick
268
                    ) {
269
                        Icon(
270
                            painter = painterResource(id = R.drawable.ic_ai_assistant),
271
                            contentDescription = "AI Assistant",
272
                            tint = Color.White
273
                        )
274
                    }
275
                },
276
                colors = TopAppBarDefaults.topAppBarColors(
277
                    containerColor = MaterialTheme.colorScheme.primary,
278
                    titleContentColor = MaterialTheme.colorScheme.onPrimary
279
                )
280
            )
281
            PrimaryTabRow(
282
                selectedTabIndex = currentIndex,
283
                modifier = Modifier.fillMaxWidth()
284
            ) {
285
                documentDescriptors.forEachIndexed { index, descriptor ->
286
                    Tab(
287
                        selected = currentIndex == index,
288
                        onClick = {
289
                            coroutineScope.launch {
290
                                onPagerIndexChange.invoke(index)
291
                            }
292
                        },
293
                        text = {
294
                            Text(
295
                                text = descriptor.getTitle(context),
296
                                maxLines = 1,
297
                                overflow = TextOverflow.Ellipsis
298
                            )
299
                        }
300
                    )
301
                }
302
            }
303
        }
304
    }
305
}