feat(messages): add scrollbar

Author: lambiengcode

.idea/jarRepositories.xml

@@ -65,6 +65,7 @@ dependencies {
  def nav_version = "2.5.3"
  implementation("androidx.navigation:navigation-compose:$nav_version")
  implementation("io.coil-kt:coil-compose:2.3.0")
- // system bars customization
+
+ // System bars customization
  implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"
 }

app/build.gradle

@@ -0,0 +1,6 @@
+package com.chatgptlite.wanted.constants
+
+const val urlToImageAppIcon = "https://res.cloudinary.com/apideck/image/upload/v1672442492/marketplaces/ckhg56iu1mkpc0b66vj7fsj3o/listings/-4-ans_frontend_assets.images.poe.app_icon.png-26-8aa0a2e5f237894d_tbragv.png"
+const val urlToImageAuthor = "https://avatars.githubusercontent.com/u/60530946?v=4"
+const val urlToAvatarGPT = "https://gptapk.com/wp-content/uploads/2023/02/chatgpt-icon.png"
+const val urlToGithub = "https://github.com/lambiengcode"

app/src/main/java/com/chatgptlite/wanted/constants/Constants.kt

@@ -0,0 +1,16 @@
+package com.chatgptlite.wanted.helpers
+
+import android.content.Context
+import android.content.Intent
+import android.net.Uri
+
+class UrlLauncher {
+
+ fun openUrl(context: Context, url: String) {
+ val urlIntent = Intent(
+ Intent.ACTION_VIEW,
+ Uri.parse(url)
+ )
+ context.startActivity(urlIntent)
+ }
+}

app/src/main/java/com/chatgptlite/wanted/helpers/UrlLauncher.kt

@@ -1,19 +1,25 @@
 package com.chatgptlite.wanted.ui.common
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import coil.compose.rememberAsyncImagePainter
+import com.chatgptlite.wanted.constants.urlToAvatarGPT
+import com.chatgptlite.wanted.constants.urlToImageAppIcon
 import com.chatgptlite.wanted.ui.conversations.ui.theme.ChatGPTLiteTheme
 import com.chatgptlite.wanted.ui.theme.BackGroundColor
 
@@ -25,25 +31,42 @@ fun AppBar(onClickMenu: () -> Unit) {
  shadowElevation = 4.dp,
  tonalElevation = 0.dp,
  ) {
- CenterAlignedTopAppBar (
+ CenterAlignedTopAppBar(
  title = {
+ val paddingSizeModifier = Modifier
+ .padding(start = 16.dp, top = 16.dp, bottom = 16.dp)
+ .size(32.dp)
  Box {
  Row(verticalAlignment = Alignment.CenterVertically) {
+ Image(
+ painter = rememberAsyncImagePainter(urlToAvatarGPT),
+ modifier = paddingSizeModifier.then(Modifier.clip(RoundedCornerShape(6.dp))),
+ contentScale = ContentScale.Crop,
+ contentDescription = null
+ )
+ Spacer(modifier = Modifier.width(8.dp))
  Text(
  text = "ChatGPT",
  textAlign = TextAlign.Center,
- fontSize = 18.sp,
+ fontSize = 16.5.sp,
  fontWeight = FontWeight.SemiBold,
- color = MaterialTheme.colorScheme.primary,
  )
+ Spacer(modifier = Modifier.width(12.dp))
  }
  }
  },
  navigationIcon = {
- IconButton(onClick = {
- onClickMenu()
- }) {
- Icon(Icons.Filled.Menu, "backIcon", modifier = Modifier.size(26.dp))
+ IconButton(
+ onClick = {
+ onClickMenu()
+ },
+ ) {
+ Icon(
+ Icons.Filled.Menu,
+ "backIcon",
+ modifier = Modifier.size(26.dp),
+ tint = MaterialTheme.colorScheme.primary,
+ )
  }
  },
  colors = TopAppBarDefaults.smallTopAppBarColors(

app/src/main/java/com/chatgptlite/wanted/ui/common/AppBar.kt

@@ -8,9 +8,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Edit
-import androidx.compose.material.icons.filled.EditNote
-import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterStart
@@ -20,22 +18,28 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil.compose.rememberAsyncImagePainter
+import com.chatgptlite.wanted.constants.urlToGithub
+import com.chatgptlite.wanted.constants.urlToImageAppIcon
+import com.chatgptlite.wanted.constants.urlToImageAuthor
 import com.chatgptlite.wanted.data.fake.fakeConversations
+import com.chatgptlite.wanted.helpers.UrlLauncher
 import com.chatgptlite.wanted.models.ConversationModel
 import com.chatgptlite.wanted.ui.theme.ChatGPTLiteTheme
-import com.chatgptlite.wanted.ui.theme.PrimaryColor
 
 @Composable
 fun AppDrawer(
  onProfileClicked: (String) -> Unit,
- onChatClicked: (String) ->
- Unit
+ onChatClicked: (String) -> Unit,
 ) {
+ val context = LocalContext.current
+
  ChatGPTLiteTheme() {
  Column(
  modifier = Modifier
@@ -46,14 +50,16 @@ fun AppDrawer(
  DrawerHeader()
  DividerItem()
  DrawerItemHeader("Chats")
- HistoryConversations(conversations = fakeConversations)
+ HistoryConversations(conversations = fakeConversations, onChatClicked)
  DividerItem(modifier = Modifier.padding(horizontal = 28.dp))
  DrawerItemHeader("Settings")
- ChatItem("Settings", Icons.Filled.Settings, false) { onChatClicked("avc") }
+ ChatItem("Settings", Icons.Filled.Settings, false) { onChatClicked("Settings") }
  ProfileItem(
  "lambiengcode (author)",
- "https://avatars.githubusercontent.com/u/60530946?v=4"
- ) { println("onClick my profile") }
+ urlToImageAuthor,
+ ) {
+ UrlLauncher().openUrl(context = context, urlToGithub)
+ }
  }
  }
 }
@@ -62,16 +68,12 @@ fun AppDrawer(
 private fun DrawerHeader() {
  val paddingSizeModifier = Modifier
  .padding(start = 16.dp, top = 16.dp, bottom = 16.dp)
- .background(
- Color.Transparent,
- shape = RoundedCornerShape(6.dp)
- )
  .size(34.dp)
 
  Row(modifier = Modifier.padding(16.dp), verticalAlignment = CenterVertically) {
  Image(
- painter = rememberAsyncImagePainter("https://res.cloudinary.com/apideck/image/upload/v1672442492/marketplaces/ckhg56iu1mkpc0b66vj7fsj3o/listings/-4-ans_frontend_assets.images.poe.app_icon.png-26-8aa0a2e5f237894d_tbragv.png"),
- modifier = paddingSizeModifier.then(Modifier.clip(CircleShape)),
+ painter = rememberAsyncImagePainter(urlToImageAppIcon),
+ modifier = paddingSizeModifier.then(Modifier.clip(RoundedCornerShape(6.dp))),
  contentScale = ContentScale.Crop,
  contentDescription = null
  )
@@ -80,32 +82,37 @@ private fun DrawerHeader() {
  "ChatGPT Lite",
  fontSize = 15.sp,
  fontWeight = FontWeight.Bold,
- color = PrimaryColor
+ color = MaterialTheme.colorScheme.secondary,
  )
  Text(
  "Powered by OpenAI",
  fontSize = 11.sp,
- fontWeight = FontWeight.Medium,
+ fontWeight = FontWeight.Normal,
  color = Color.White,
  )
  }
  }
 }
 
 @Composable
-private fun ColumnScope.HistoryConversations(conversations: List<ConversationModel>) {
+private fun ColumnScope.HistoryConversations(
+ conversations: List<ConversationModel>,
+ onChatClicked: (String) -> Unit
+) {
  LazyColumn(
  Modifier
  .fillMaxWidth()
  .weight(1f, false)
- .padding(horizontal = 16.dp),
+ .padding(horizontal = 12.dp),
  ) {
  items(conversations.size) { index ->
  ChatItem(
  text = conversations[index].title,
- Icons.Filled.EditNote,
+ Icons.Filled.Message,
  selected = index == 0,
- onChatClicked = {},
+ onChatClicked = {
+ onChatClicked(conversations[index].id)
+ },
  )
  }
  }

app/src/main/java/com/chatgptlite/wanted/ui/common/AppDrawer.kt

@@ -0,0 +1,52 @@
+package com.chatgptlite.wanted.ui.common
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Modifier.simpleVerticalScrollbar(
+ state: LazyListState,
+ width: Dp = 8.dp,
+ color: Color
+): Modifier {
+ val targetAlpha = if (state.isScrollInProgress) 1f else 0f
+ val duration = if (state.isScrollInProgress) 150 else 500
+
+ val alpha by animateFloatAsState(
+ targetValue = targetAlpha,
+ animationSpec = tween(durationMillis = duration)
+ )
+
+ return drawWithContent {
+ drawContent()
+
+ val firstVisibleElementIndex = state.layoutInfo.visibleItemsInfo.firstOrNull()?.index
+ val needDrawScrollbar = state.isScrollInProgress || alpha > 0.0f
+
+ // Draw scrollbar if scrolling or if the animation is still running and lazy column has content
+ if (needDrawScrollbar && firstVisibleElementIndex != null) {
+ val elementHeight = this.size.height / state.layoutInfo.totalItemsCount
+ val scrollbarOffsetY = firstVisibleElementIndex * elementHeight
+ val scrollbarHeight = state.layoutInfo.visibleItemsInfo.size * elementHeight
+
+ drawRect(
+ color = color,
+ topLeft = Offset(this.size.width - width.toPx(), scrollbarOffsetY),
+ size = Size(width.toPx(), scrollbarHeight),
+ alpha = alpha
+ )
+ }
+ }
+}

app/src/main/java/com/chatgptlite/wanted/ui/common/AppScrollBar.kt

@@ -3,7 +3,10 @@ package com.chatgptlite.wanted.ui.conversations
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -15,6 +18,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.chatgptlite.wanted.data.fake.fakeMessages
 import com.chatgptlite.wanted.models.MessageModel
+import com.chatgptlite.wanted.ui.common.simpleVerticalScrollbar
 import com.chatgptlite.wanted.ui.conversations.components.TextInput
 import com.chatgptlite.wanted.ui.conversations.ui.theme.ChatGPTLiteTheme
 import com.chatgptlite.wanted.ui.theme.*
@@ -36,13 +40,26 @@ fun Conversations() {
 
 @Composable
 fun ColumnScope.MessageList(messages: List<MessageModel>) {
+ val listState = rememberLazyListState()
+ val scrollState = rememberScrollState()
+
  LazyColumn(
- Modifier.fillMaxWidth().weight(1f, false)
+ Modifier
+ .fillMaxWidth()
+ .weight(1f, false)
+ .simpleVerticalScrollbar(
+ listState,
+ width = 4.dp,
+ color = MaterialTheme.colorScheme.secondary,
+ )
  .padding(horizontal = 16.dp),
  reverseLayout = true,
+ state = listState,
  ) {
  items(messages.size) { index ->
- MessageCard(message = messages[index], isLast = index == messages.size - 1)
+ Box(modifier = Modifier.padding(bottom = if (index == 0) 10.dp else 0.dp)) {
+ MessageCard(message = messages[index], isLast = index == messages.size - 1)
+ }
  }
  }
 }
@@ -53,7 +70,8 @@ fun MessageCard(message: MessageModel, isLast: Boolean = false) {
  horizontalAlignment = if (message.isMe) Alignment.End else Alignment.Start,
  modifier = Modifier
  .fillMaxWidth()
- .padding(vertical = 4.dp).padding(top = if (isLast) 80.dp else 0.dp)
+ .padding(vertical = 4.dp)
+ .padding(top = if (isLast) 80.dp else 0.dp)
  ) {
  Box(
  modifier = Modifier
@@ -64,7 +82,9 @@ fun MessageCard(message: MessageModel, isLast: Boolean = false) {
  ),
  ) {
  Text(
- text = message.message, fontSize = 13.sp, color = if (message.isMe) ColorTextHuman else ColorTextGPT,
+ text = message.message,
+ fontSize = 13.sp,
+ color = if (message.isMe) ColorTextHuman else ColorTextGPT,
  modifier = Modifier.padding(horizontal = 18.dp, vertical = 12.dp),
  textAlign = TextAlign.Justify,
  )