[CM-1113] Create Android sample

android-sample/README.md

@@ -0,0 +1,11 @@
+#  YChat GPT Android Sample
+
+## Setup
+
+You need to supply an API key for running this sample successfully.
+
+### Steps
+
+1. Go to the `local.properties` file located in the root folder of this sample project;
+
+2. Set your API key in the `API_KEY` variable. Click [here](https://beta.openai.com/docs/api-reference/authentication) to get more information on how to get the api key.

android-sample/build.gradle.kts

@@ -51,4 +51,5 @@ dependencies {
     implementation(Dependencies.UI.COMPOSE_FOUNDATION)
     implementation(Dependencies.UI.COMPOSE_MATERIAL)
     implementation(Dependencies.UI.COMPOSE_ACTIVITY)
+    implementation(Dependencies.UI.COMPOSE_NAVIGATION)
 }

android-sample/src/main/AndroidManifest.xml

@@ -9,7 +9,8 @@
         android:theme="@style/AppTheme">
         <activity
             android:name="co.yml.ychatgpt.android.MainActivity"
-            android:exported="true">
+            android:exported="true"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />

android-sample/src/main/java/co/yml/ychatgpt/android/MainActivity.kt

@@ -3,43 +3,190 @@ package co.yml.ychatgpt.android
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import androidx.lifecycle.lifecycleScope
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 import co.yml.ychatgpt.ChatGpt
+import co.yml.ychatgpt.android.ui.AppBar
+import co.yml.ychatgpt.android.ui.ChatLayout
+import co.yml.ychatgpt.android.ui.Dimensions.spaceMedium
+import co.yml.ychatgpt.android.ui.Dimensions.splashIconSize
+import co.yml.ychatgpt.android.ui.DrawerBody
+import co.yml.ychatgpt.android.ui.DrawerHeader
+import co.yml.ychatgpt.android.ui.SendMessageLayout
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import kotlin.coroutines.CoroutineContext
 
 class MainActivity : ComponentActivity() {
 
     private val chatGpt by lazy { ChatGpt.create(BuildConfig.API_KEY) }
 
+    private val myCoroutineContext by lazy { lifecycleScope.coroutineContext }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MyApplicationTheme {
-                Surface(
-                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colors.background
-                ) {
-                    GreetingView("Hello world")
-                }
+            MyApplicationTheme() {
+                Navigation(chatGpt, myCoroutineContext)
             }
         }
     }
 }
 
 @Composable
-fun GreetingView(text: String) {
-    Text(text = text)
+fun Navigation(chatGpt: ChatGpt, myCoroutineContext: CoroutineContext) {
+    val navController = rememberNavController()
+
+    NavHost(
+        navController = navController,
+        startDestination = "splash_screen"
+    ) {
+
+        composable("splash_screen") {
+            SplashScreen(navController)
+        }
+
+        composable("main_screen") {
+            MainScreen(chatGpt, myCoroutineContext)
+        }
+    }
+
 }
 
-@Preview
 @Composable
-fun DefaultPreview() {
-    MyApplicationTheme {
-        GreetingView("Hello, Android!")
+fun MainScreen(chatGpt: ChatGpt, myCoroutineContext: CoroutineContext) {
+    val scaffoldState = rememberScaffoldState()
+    val scope = rememberCoroutineScope()
+    var chatGptAnswer by remember {
+        mutableStateOf("")
     }
+    val items = remember {
+        mutableStateListOf<MessageItem>()
+    }
+    Scaffold(
+        scaffoldState = scaffoldState,
+        topBar = {
+            AppBar(
+                onNavigationItemClick = {
+                    scope.launch {
+                        scaffoldState.drawerState.open()
+                    }
+                }
+            )
+        },
+        drawerContent = {
+            DrawerHeader()
+            DrawerBody(items = listOf(
+                MenuItem(
+                    id = "completion",
+                    title = stringResource(R.string.completion),
+                    contentDescription = "completion",
+                    icon = Icons.Default.Edit
+                ),
+                MenuItem(
+                    id = "edits",
+                    title = stringResource(R.string.edits),
+                    contentDescription = "edit",
+                    icon = Icons.Default.Edit
+                )
+
+            ), onItemClick = {
+                // do nothing
+            })
+        },
+        content = { padding ->
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(padding),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                ChatLayout(items)
+            }
+        },
+        bottomBar = {
+            SendMessageLayout(onSendMessage = {
+                scope.launch {
+                    items.add(MessageItem(message = it, isOut = true))
+                    chatGptAnswer = chatGpt.completion(it)
+                    items.add(MessageItem(message = chatGptAnswer, isOut = false))
+                }
+            })
+        },
+    )
 }
+
+@Composable
+fun SplashScreen(navController: NavHostController) {
+
+    LaunchedEffect(key1 = true) {
+        delay(2000L)
+        navController.navigate("main_screen")
+    }
+
+    Surface(
+        modifier = Modifier.fillMaxWidth(),
+        color = MaterialTheme.colors.background,
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Image(
+                    painterResource(R.drawable.ic_chat),
+                    contentDescription = stringResource(R.string.logo),
+                    modifier = Modifier
+                        .width(splashIconSize)
+                        .height(splashIconSize)
+                )
+                Spacer(modifier = Modifier.width(spaceMedium))
+                Text(
+                    text = stringResource(R.string.ychat_gpt),
+                    fontSize = 26.sp,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+        }
+    }
+}

android-sample/src/main/java/co/yml/ychatgpt/android/MenuItem.kt

@@ -0,0 +1,10 @@
+package co.yml.ychatgpt.android
+
+import androidx.compose.ui.graphics.vector.ImageVector
+
+data class MenuItem(
+    val id: String,
+    val title: String,
+    val contentDescription: String,
+    val icon: ImageVector
+)

android-sample/src/main/java/co/yml/ychatgpt/android/MessageItem.kt

@@ -0,0 +1,6 @@
+package co.yml.ychatgpt.android
+
+data class MessageItem(
+    val message: String,
+    val isOut: Boolean,
+)

android-sample/src/main/java/co/yml/ychatgpt/android/MyApplicationTheme.kt

@@ -9,11 +9,13 @@ import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import co.yml.ychatgpt.android.ui.Dimensions.default
+import co.yml.ychatgpt.android.ui.Dimensions.spaceExtraSmall
 
 @Composable
 fun MyApplicationTheme(
@@ -22,15 +24,17 @@ fun MyApplicationTheme(
 ) {
     val colors = if (darkTheme) {
         darkColors(
-            primary = Color(0xFFBB86FC),
-            primaryVariant = Color(0xFF3700B3),
-            secondary = Color(0xFF03DAC5)
+            primary = colorResource(id = R.color.softPurple),
+            primaryVariant = colorResource(id = R.color.deepBlue),
+            secondary = colorResource(id = R.color.softGreen),
+            background = colorResource(id = R.color.darkGrey),
         )
     } else {
         lightColors(
-            primary = Color(0xFF6200EE),
-            primaryVariant = Color(0xFF3700B3),
-            secondary = Color(0xFF03DAC5)
+            primary = colorResource(id = R.color.softBlue),
+            primaryVariant = colorResource(id = R.color.deepBlue),
+            secondary = colorResource(id = R.color.softGreen),
+            background = colorResource(id = R.color.white),
         )
     }
     val typography = Typography(
@@ -41,9 +45,9 @@ fun MyApplicationTheme(
         )
     )
     val shapes = Shapes(
-        small = RoundedCornerShape(4.dp),
-        medium = RoundedCornerShape(4.dp),
-        large = RoundedCornerShape(0.dp)
+        small = RoundedCornerShape(spaceExtraSmall),
+        medium = RoundedCornerShape(spaceExtraSmall),
+        large = RoundedCornerShape(default)
     )
 
     MaterialTheme(

android-sample/src/main/java/co/yml/ychatgpt/android/ui/AppBar.kt

@@ -0,0 +1,33 @@
+package co.yml.ychatgpt.android.ui
+
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import co.yml.ychatgpt.android.R
+import co.yml.ychatgpt.android.ui.Dimensions.default
+
+@Composable
+fun AppBar(
+    onNavigationItemClick: () -> Unit
+) {
+    TopAppBar(
+        elevation = default,
+        title = { Text(text = stringResource(R.string.completition)) },
+        backgroundColor = MaterialTheme.colors.background,
+        navigationIcon = {
+            IconButton(onClick = onNavigationItemClick) {
+                Icon(
+                    imageVector = Icons.Default.Menu,
+                    contentDescription = stringResource(R.string.toggle),
+                    tint = MaterialTheme.colors.primary
+                )
+            }
+        }
+    )
+}

android-sample/src/main/java/co/yml/ychatgpt/android/ui/ChatLayout.kt

@@ -0,0 +1,40 @@
+package co.yml.ychatgpt.android.ui
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import co.yml.ychatgpt.android.MessageItem
+import co.yml.ychatgpt.android.ui.Dimensions.spaceMedium
+
+@Composable
+fun ChatLayout(
+    messages: List<MessageItem>
+) {
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(spaceMedium),
+    ) {
+        items(messages) { message ->
+            MessageItemLayout(
+                messageText = message.message, isOut = message.isOut
+            )
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewChatLayout() {
+    ChatLayout(
+        messages = listOf(
+            MessageItem(message = "message 1", isOut = true),
+            MessageItem(message = "message 2", isOut = false)
+        )
+    )
+}