How to build LinkedIn Chat with Smart Replies | LinkedIn Clone

Have you ever wondered how the LinkedIn chat feature works? If yes, then we are in the right place. In this video we are going to take a look at LinkedIn chat, explore all of its features and in particular see how we can implement ah the Smart Replies feature. Let's get right into it. Hey there guys, how is it going? It is AB the side. I am an upcoming software engineer at Oracle and an undergraduate in IIT Guwahati. Ah in this channel we mostly ah explore new technologies and we build tutorials

ah where we ah go ahead and implement real life applications ah just like this one. Ah so if you are new to this channel consider subscribing. In this particular video we are going to take a look at LinkedIn chat and we are going to implement all of its features. Ah so before I go ahead and tell you what all technologies will be using today. Ah let's have a look at the final demo of the application. So that is how our application will look like at the end of this video. Ah in this video I'll be

using ah Flutter, Firebase, ah Radar and Google's machine learning algorithms. And additionally we'll also be taking a look at one of the ah very famous tools for documentation. Ah I have a big announcement to make at the end of this video. Ah so make sure you watch it completely. So now let's have a look at the ingredients of today's application or ah basically the technologies and how they are connected to each other. So first of we have ah our mobile phone which is going to run front of and

ah that is going to communicate with Firebase ah and here we are going to use the authentication and the cloud fire so features then we have the machine learning kit by Google which will be supplying the smart device and finally for our location services will be making use of radar now I also told you will be using a documentation tool ah so this is actually Docusaurus so Docusaurus is actually this famous ah ah documentation tool which is a part of Facebook's ah open source efforts and it helps

you generate ah wonderful documentation websites by writing just mark down it also has the react support so you can write you know sort of a extended markdown where you can include more features into your markdown files. Ah and we have also generated our own ah you know little documentation website corresponding to this ah video. Ah which I'll show you in a bit. Ah now for people who are not familiar with Firebase, it's actually the Google flagship product for application and web development. A

h technically it's back end as a service. Which means it's it provides you all the features of the back end without you having to ah you know write them or build them from scratch and that makes the process of development ah just much faster. Ah and then we have radar. So for people who have watched my previous videos ah you know I have used map box ah to show you you know how you can ah do geofencing or even ah stuff like reverse geocoding. So in this case we are going to use radar for that. Ah

there is no reason why you cannot use map box or Google Maps. Ah I just wanted to introduce you to a new thing ah and in this case it's radar. Ah finally we have ah Google's machine learning kit. So ah Google's ML kit is actually ah this machine learning expertise of Google that is brought into ah mobile phone. Ah and what happens is it it actually processes all these ah you know powerful algorithms on your device itself. Which means things become much faster ah as compared if you have them on

its running ah and there are lot of APIs here so ah we have vision APIs but the one will be needing ah for our case is actually the smart reply which comes under the natural language tossing APIs ah and it will help us generate smart replies for our conversation ah which you will be seeing once we ah actually work on the application. For the purpose of this video we have the start application in place ah which is actually some basic LinkedIn UI and you know some LinkedIn chat UI ah on the top of

which we will build our application. Ah so I'll put a link to the description below. You can go and check that out and ah let's have a look at the repository and the website together now. So this is the repository I was telling you about and this is how it looks right now based on the time of your viewing. It might be slightly different. Ah but what we are interested in is actually these two folders. So one zero one smart ah replies ah is actually the current project. And this documentation sla

sh LinkedIn cloned documentation is the Docusaurus project that we have. Ah so we will come to the startup project later on but if we have a look at the website ah so this is the beautiful you know website that we have built using Docusaurus ah and ah the good thing about it is it it was built very fast because ah most of it is actually marked down ah and what we'll do now is let's move on to tutorial and go to the ah chat smart replies and inside setup let's have a look at all the steps that we

have to take to make sure that our startup application is up and running. Ah so if you remember last time we were writing these using mark down. Ah so I thought let's go and you know use documents for that now. So that things are a bit more organised. And ah I'll also be sharing the link to this particular website in the description. So you don't have to worry about that. Now in getting started you must first loan the repository ah and you know obviously you have to go to this particular startu

p project inside this folder. And ah then ah what you have to do is you have to set up radar. So Radar is ah as I have already mentioned is is a leading geofencing platform that we have. Ah and once you have actually you know signed up and ah completed all the other formalities. You will be greeted with your dashboard which will look something like this. And in the dashboard you have this thing called a live publishable client. Ah so ah that is a API key corresponding to your client site ah whic

h you will be needing. So go ahead and copy that and inside your assets conflict ah enrollment file. Ah you can go ahead and paste it here ah like I have done and The format of that key will be something similar to PRJ live ah PK and then some set of ah you know characters. And ah once that is done a radar is configured for you. Ah the next thing you have to do is Firebase. So ah Firebase ah as I have mentioned is the back end as a service platform and the first thing to do here is to create a p

roject. And once you have created your new project you have to add your applications in there. Now this is extensively documented inside Firebase docs. So you don't have to worry about you know not finding resources or being lost. So what you have to do is just create three applications and then keep in mind that you are following all of these four points. So the first point is to ah you know enable all the features that you will need. In our case for this video ah we are going to need ah basica

lly the authentication feature and the ah cloud fire store. So which is actually this Fire Store database feature and then make sure that you have your authentication enabled for Google get up and email password. Ah make sure you add your SHA keys ah to ah the project ah and you will find a link to ah that ah in the help option when you are adding your Android application basically and finally make sure that you download these two files. Ah so the ah Google Service info dot property list and Goo

gle Services dot Jason and put them in appropriate places inside your project ah so that Firebase is done. Ah the last step ah which is recommended. So right now Flutter Fire is ah in ah is the most famous thing being used to integrate front applications with Firebase. So Flutter Fire has this CRI tool which can directly use and once you run these two commands you'll have a Firebase Options. dart ah which will be generated for you and if you notice in the main ah ah main. dart file in our startu

p project you have these lines that is actually expecting this Firebase Options. dart file to be present so ah once you complete this ah your Firebase set up a done basically. Then you have Google login. So for ah Google login will be using Google sign in ah the plugin for that and you can go here and also check it out ah but what's important is for IOS. You go ahead and add these ah I mean these lines in your info dot property list and ah there you will already find these lines in the startup p

roject but you have to replace this particular line with your own ah reverse client ID that you will find inside your Google service and photo property list filed. So that being done you would be good to go with Google login. Now this is just for a information that we can go ahead and ah implement a sign in with Apple and it is mandatory if you are submitting your application to Apple store. Ah but in our case we are not going to do that. So you can just go and ignore it. Ah finally you have Git

Hub login. So ah I have attached links to the plugin here that is get hub sign in. And also ah you can take a look at it but ah before that you have to create your own ah overauth application and you will also find the steps for that in get hub docs ah which I have also attached a link to in our website and you see here how you can create authorized and scopes and all that ah and you need to save these three things ah basically ah basically two things that is client idea and client secret and th

e reader at URL you will be getting it from Firebase itself when you are trying to activate the ah get hub login so ah once you go ahead and do that you will ah quite ah easily understand what I am saying ah finally ah that's all you have to do and ah then you should be able to get your application up and running and I will show you how the startup projects look like ah in looks like in a minute. So did you find the documentation useful? Ah if yes then go ahead and let me know if you want me to

make a video on Docusaurus. So building the website that you just saw ah needed to write some markdown and also a little bit of configurations in JavaScript. Ah and then we hosted that using guitar pages. Ah so overall I could build something that and you know ah show Docusaurus you in action and also you know learn more about all the features that Docusaurus has. Ah so you can let me know in the comments below ah if you want me to have a video like that. Ah let's continue and ah take a look at

our starter application now. Ah so I have my starter application opened ah in in Android Studio and I also have my iPhone emulator open on the site ah so that we can run our application and see our application on the emulator. Ah and first of all what I want to show you is ah all the folders that we have in here and then ah I'll show you the application. So meanwhile ah while I am explaining the folders let me just go ahead and you know ah try launching that in here. So that you know we save som

e time. Ah now first of all I would like to mention that this particular startup project which we have here is not a very basic project because it's actually connected to Firebase and we are making use of ah you know the cloud fire store and the Firebase authentication and as well as making use of a app wide state management using mopex and providers. Ah so if you are unfamiliar with any of those things you can just go ahead and let me know in the comments and we will have videos ah where we kno

w build those things from scratch and I will explain you the concepts that are involved. So that you are not lost. Ah so anyway coming back to the startup project here. We have these folders here. So we do have a helpers folder where we have all the helper functions. And then we have the models ah in which case we have only one model which is the user model. Ah we have the request folder where we store all the request that we are making to Firebase or ah let's say the radar API in our case for r

everse geocoding. Then we have all the screens that are used in the application. So may be the initial setup screen which is coming before the main application ah such as login and you know gathering basic user information or the chat screen. Ah we also have the services folder which have things like handling exceptions and varied and then we have the stores. So I ah mentioned earlier that we are maintaining a state ah so this is what we are using for that. So let's say we are ah having a store

for the chat or ah store for management of authentication or you know store for management of user ah details and ah variables. So so these are actually the store ah I mean the files inside the stores folder. Then we have ah the widgets. So corresponding to each and every screen we might need to you know use some widgets or may be ah we are trying to make some UI UI widgets which are being used in multiple screens. Ah so that is when the widgets folder come into ah play. And ah then I have alrea

dy spoken to you about Firebase options. And ah then we have the main. So. main. dart you see here we are actually using a multi provider and we are ah using all these stores as providers and whenever we are trying to use them may be we will wrap our ah you know the return function or the widget that we are returning the consumer and then then consume the variables inside that particular store. Ah and then when you are trying to make a big application it's always recommended you have your routes

you know well organised instead of you you know randomly routing here and there inside the application using navigator. Ah you should use named routes. So that's why we have a routes. dart file here where we have ah you know mapped all our route names and these IDs are actually the route names corris point to each and every ah file that we have. Ah so that is all about the folder structure. Now if we go ahead and run the application. So we see that first of all it is trying to access my locatio

n which I will allow and then I see my splash screen. Ah after that I see the screen. So this is a screen where I can actually log in with Google or login with Kit Hub. So both of them have been implemented. Now ah when we have multiple social authentications with the same ah parameter in this case the email ID. There can be some complications but we will talk about that in a later video. Ah but now if I just click on Google then I am actually prompted to sign with Google and similarly I'll just

cancel it and show you the GitHub one ah if I click on continue to get hub I see this thing on my ah application where I can use my GitHub username and password to login basically. So let me just quickly log in at Google and I will show you the rest of the application. Alright, so I have put my username and password and then I will complete the two step verification. Ah and after that I will show you ah the application. So the Google authentication has completed and now I am actually seeing the

second screen which is asking you to confirm my location. So this is where we have made use of radar and ah if you go to Radar G according. you see example radar request that we are making. And we are trying to get our address from latter data and longitude. Ah so why are we doing this? We'll know that later on. Ah but ah we are just stretching the user ah location and then we have ah the LinkedIn user interface, the standard LinkedIn user interface. So if I mark that I am a student I have to f

ill in my degree type, bragitioner and school name. Otherwise I have to fill in my most recent job title, employment type and most recent company. Ah so for this I will just say ah something like software engineer and let's say full time. And let's say Oratel for my company. And if I go next I see a preview. So I have my photo which I am actually ah gathering from the Google login. And then I have my name also gathered from Google login. And then I have my tagline here. And then if I go and next

and then it asks me if I am looking for a job or not ah and then I'll just say ah not now. So the thing is that for each of the information we have entered previously that is actually being stored both in your application right state and also in the cloud fire store ah which ah is storing all this data and then in the application we have you know some of the basic screens so we have a home screen network screen ah screen for creating post for notification and for jobs ah and then we have ah the

ah drawer widget where we have the user profile information and ah sample LinkedIn like QI. Ah but if I go to settings ah I see the settings here and of here the most important one is sign out. So if I click on sign out I am actually signed out of the application. Now that will ask me to login again. Ah but this time it will remember my ah previous login because of ah the IOS features. Ah and then I can have a look at the chat ah screen. So this is a very standard screen that I and it's actuall

y ah emulating the LinkedIn chat UI ah and inside of each of these I have a completely blank ah chat screen. So which we have not yet implemented. Ah so this is part of what we will do in this video. Ah so let's go ahead and ah start working on this actually. Alright, so first of all what we'll talk about is the chat list file which you will find inside the screens chat folder and in here we have this ah function of on press handler. Now this on press handler is a function that we are calling wh

en I am actually clicking on this list style. Ah and as you must have observed all of this is actually hard coded data because right now the user is not connected to other users. Ah we have not implemented LinkedIn connections ah which ah we'll see later on but ah what we have is ah we have the on press handler here and we have hard coded the IDs and the images for ah a user called Mari and a user called AB. So ah now this ID which we have here corresponding to these users are actually the ID wh

ich are return back to us from the Firebase authentication console and we are directly using that ah so if you are trying to build this application it's recommended that you create another ID. So I have a a ID ah for my own account and I have one more account ah ah Google account which goes by the name of Mary Jane and ah I am using its particular details as well. So that I can you know actually chat between two devices. So that you later on when we chat between two devices after the application

has ah you know buried to some extent. Ah and ah what we need to keep in mind is there are two important terms here. So we have a term called peer and we have a term called local. So the local user is the person who is actually using the mobile phone and the peer user is the person to whom the local user is actually talking to. So in my case if I am actually logged in with AB's account I am trying to talk to Mary and similarly if I am logged in with Mary's account I am trying to talk to AB. So

in this case what I have to do is I have to check if the ID ah through which I am logged in is actually ah equal to Marry or AB and correspondingly I am setting the PR IDs and the you know local IDs and images and names and stuff. Ah so Mari user exists ah in ah the Fire Store database and so does AB's user. So we are fetching the data of those users and we are storing them in user data. And then we are also maintaining ah the a wide state of ah the chat store and we are store ah some of the val

ues such as peer ID, user data, peer image and image ah and you will find that inside the chat store if you go in here you see ah you know all those things we are needing so name headline images we are also storing the chat messages so right now this is ah not very obvious but when we are trying to generate suggestions we might want to store the previous 10 or 20 chat messages or may be in our case all the chat messages so that we are actually generating reasonable suggestions or smart replies s

o ah after this is done we push them to the chat screen ah which is the next screen here. And that is something you will find inside ah the chat screen file. For this you have to go to widgets and you have to look at the chat ah ah folder inside the widgets and you will find a lot of folders in here. Some of which we will be actually implementing. Ah now this is a blank screen right now but there are few things of interest here. We do have a name here which comes ah by default I mean in this cha

t application But I kept it there just so that I can tell you how things are working. So in the last page we fetch the user information corresponding to Mary's ID from Firebase. And then we are making use of this chat store. peer name and we are making use of the consumer. And then this is actually displaying the Mary Jane as a title of the application bar. Ah other than that we have a video calling ah button here which is not implemented yet. And we do have a delete conversation which we will i

mplement in this video later on. Ah and finally we have a chat window that has been ah now I like to point out here that ah all these five widgets that we see here are the five things will be ah implementing in this particular video and ah the chat window is actually the scrollable list of ah you know messages that will be having. The chat window user will be a user ah details ah ah information thing that will be showing on the top of that and then the chat input is something that will use to in

put our chat that is to send messages and the chats will come up on the top of the chat input ah over here where which will be actually showing us the smart replies or the suggestions. Ah so the next thing we can do is actually going to chat window user and since we have already fetched the peer name from the chat store let's actually fetch the peer information such as the image and ah you know whatever name and ah the title or the designation of that particular person ah like you saw in the pre

vious screen ah for it may ah for me it showed that I was a soft oracle. So similarly ah let's actually fetch marriage information and then show it here ah so that we can you know ah proceed further. Alright, so I am inside the chat window user file now and the first thing I'll do is to set the ah network image here to ah the image of marry and that I'll do by saying chat store. peer image. Now this is no longer a constant. So I'll remove the constant here. And I also add a constant here. And fo

r the name ah I'll just ah use the same ah way and I'll say chat store. peer name. And for this one what I'll do is I'll say ah no up like that I'll say chat store. peer headline okay and it's no longer a constant alright so what we have done here is we have actually fetch the information that was inside the app white state and ah that is actually using the chat store ah which is ah ah you know have having all this information ah the the observables as ah in in mobic storms that is peer image pe

er name ah and peer headline ah and next for we can do is we'll just go to chat window and you see that chat window has a couple of things so we have ah some initializations here which is just fetching the ah user ah name information ID and stuff and actually storing it inside variables to be used and we have a build item which is actually how one single text ah that is sent from ah the local user to the peer user looks like and then we have a build list messages which I will later on build and

you know ah show you all the ah messages basically ah and make a scrollable list of messages ah and finally we have the widget build function ah which has ah a column inside which we are supposed to fit all this. So ah the first thing that we have since we have just completed now let's go and write that so I'll call it Window user ah okay it's chat window user and if I do this and I also add a divider between so that you know it's just like sort of clearly differentiated. Now on running my appli

cation that is on doing hot ah reload. Ah I can see that I have Mari's information here right now. So I have and we do have software engineered Microsoft. Ah so now behind the scenes I created Mari's account and I filled a different information and that is being stored right now. Ah I'll show you the Firebase and all this information later on after we have implement ah the chat features and we are able to talk between two devices ah and then we'll go and implement the solutions. Ah but ah here w

e have the information of Mary completely. Ah one more thing which you can do is to have a look at the chat input file. So chat input widget right now ah has a bunch of UI stuff. So since you are trying to ah actually implement the LinkedIn ah chat UI. So we do have a bit of animations ah which I will show you in a minute and ah what we can do is over here we'll later on add our suggestions but for now we'll just add the chat input directly inside chat window so you see add the chat input stuff

here so I'll say chat input and if I again hot reload an application I get this chat input thing here now you must be wondering why there is no space in between ah so don't worry about that we'll fix that soon once we have the buildest message ah widget in place ah and this is the animation I was talking to you about so we have ah or these features here we can add attachments or you know open the camera, add videos, photos, GIFs or mention people. Ah so these are things which you look on in in f

uture videos but for now ah we will actually focus on ah the text widget here. And ah the text widget is sort of being controlled by text writing controller and that text writing controller will have information for the text message that I am trying to send. So I am using the submit message handler for that and I have a few other functions like toggling the animation or you know fetching the chat ID pair. Ah one thing I would like to mention as well ah in the chat window ah we have something cal

led a group chat ID which is actually ah you know generated from the helper function. So what ah it does is it just you know adds a hyphen between the ID and the peer ID ah and ah it is used to identify basically a pair of chat messages. So that's the way in which a to store information in ah Firestone ah which I will show you again ah later on. So ah now that this is done let's go and implement the chat ah window now ah work on the build list messages and ah actually show the ah you know the ch

at between two devices. So inside the build list message ah widget that we have here instead of the container. Now we'll go ahead and actually return a stream builder. So that stream builder that we are going to return is actually going to fetch ah a stream from Firebase, Firebase from Firebase ah and then ah return the list of messages that we want to show on the screen. Ah so let me just go and implement that and then I'll talk to you about the details. Alright, so what have we done here? We a

re actually using stream builder to listen to a stream from Firebase which is ah storing ah ah data inside a collection called messages and a document ah with the idea of group chat ID and creating I answer collection inside the document with the ah idea of group chat ID. Now we are doing this because ah there is a limit on the number of ah or basically the amount of data you can store inside one document. Ah so the nested collection inside the document allows you to store more number of message

s. Ah and then we are actually trying to order this ah stream ah based on the time stamp and we are doing that in descending order and finally we are fetching the snapshots out of that. Now we are returning a circular progress indicator here but that's not what we want to do instead what you going to do ah is actually we have to check if the snapshot has some data or not. So the condition that will do is if not of snapshot. has data and in that particular case only you want to return the circula

r progress indicator and in the else case that is one of the has some data. In this case we are going to return ah ah basically the list of messages that we have. So ah let me go ahead and show that how how I can do it. Ah we must add a query snapshot ah category here so that this thing works and then what will do is ah will turn a loop and what I'll do is I'll say from list message dot length minus one and for I get it then go to zero and I minus minus ah and inside this loop we are going to ad

d the chat messages to ah the chat messages variable I I actually showed you before in in fact and we have a function there at chat messages and the text will be list message. of I of course and. get ah and this time it's content because that's the chat content that we have and also the list message has one more thing which is ah dot get ID from. So it's actually ah saying ah from whom this ah message has been sent. Ah so we are going to use that ID from. Ah so that is done here and then we actu

ally return our ah list view builder so I say return list view dot builder and the item builder in fact takes in two things that is context so context and index and then we do this okay so inside here we have to again ah actually ah return a item and the bill item I showed you up here ah this is a thing so it represents one of the chat messages basically and the bill item is going to take an index and the document and the document will be snapshot dot a data. docs and I am going to take ah make

sure that it's not null so for that I'll add this here ah one more bracket on this side as well and what will do is we'll make sure it's not null and then we'll take the index of that ah and then we are going to go because it's actually expecting the ah the document so we are in the particular document correspond to that ah in fact ah we can use the arrow function here instead of you know those things. Alright ah item builder is done. What we have next is actually padding. So I am going to remov

e the padding here. We'll add a padding later on outside ah this one. I don't want padding between messages. And then I have item count so yes you guessed it it's from snapshot data ah. docs ah dot length so how many documents are there and we are going to set reverse to be true because I want the first message or you know the earliest message to come first and then we are going to specify controller list scroll controller so this this actually offers ah sort of animation so that I am always at

the end of the list and I am actually managing it from inside the chat store itself. Okay, now one more thing that we have to do is to wrap our stream builder ah with a widget and that widget is expanded ah and also we don't want to show the stream builder all the time ah we want to add a condition here that if the group chat ID is equal to this so the idea here is I I cannot fetch messages if I have some issue facing messages or if I am actually waiting for ah the message to load. So I'll be sh

owing a circular progress indicator in that case as well and I'll say ah centre child ah circular circular progress indicator. Okay and if my group chat ID is not equal to space. I am going to show the stream builder. Ah finally just ah let's add a padding to the list view builder. So I'll add a padding here and I am going to add a invitation to the left ah let's say of ah okay not like this ah of only and a left of ten indentation okay ah so now what we can do is we can just go ahead and use th

e build list message directly ah in our build ah context I mean now in a widget build function and ah we have to remove the constant here and add it to all this ah so because this is no longer a constant now okay so if I save this right now ah I I I can see that I am actually ah seeing ah marry Jane and you see that the expanded thing has shown up here and now if I ah go ahead and type a message let's say I say hi Mary then ah I can actually see this hi Mary coming from me I also see that date a

nd the time of the particular message and the person who actually send that message. Ah now behind the scenes I have went and actually run this application in another emulator. So let me quickly open that ah and this is basically the device of Mary Jane and Mary Jane also sees that AB Satyaprakash has actually texted her ah with the name of hi Mary so she can go and say hi AB ah and this will ah reflect on both devices now ah so now this also works if I send multiple messages from one device lik

e if I say hi AB and I say ah WhatsApp ah so that also shows up in both of this devices ah now one more thing which we have to implement is the ah the delete messages thing here that we have. So let me just go ahead and do that quickly ah and ah what I'll do is ah in here I'll again try to access the ah fire store. So I'll say Firebase Fire Store dot instance and the same collection that we specified previously. I will actually go and copy paste that. Ah this here paste it. So and once you are i

n here I'll say. get and a dot then and inside that ah I'll be expecting a snapshot as a value and what I will do is with the snapshot ah I will go ahead and run a loop here. So I'll say for ah document snapshot DS ah in snapshot. docs ah I'll delete each and every document snapshot show that's done by DS dot reference dot delete. So since we Have this ah I mean all this data inside documents inside the collection. So I am deleting all the documents inside that particular collection to make sure

that ah all the information in there is actually deleted. Alright, so now it's saved and if I go and click on delete conversation ah it ah actually hold on I have to choose the proper device again. Okay, now it's saved if I go and delete conversation. Yes, it's deleted from here. Now the interesting thing is it is also deleted from the other device that we had here. And this is something which might not be desirable. Ah for example in Telegram you have this feature but you might want ah to dele

te from one device. Ah in that particular case you can go and you know delete it from your local storage or ah you know just modify the way things are being stored in Fire Store. Ah and you will be able to achieve that ah gold basically. If you have watched the video so far, congratulations because you have just successfully completed your first chat application using the LinkedIn like QI. Now, before I go ahead and show you how the Firebase looks like right now and also implement the Smart Repl

ies which is kind of the main aim of this project. Uh I would like to request you to like this video and basically subscribe to my channel if you found value in this video and also stay tuned till the end so that you can listen to the announcement that we are going to make. Uh let's have a look at Firebase now. So this is how the Firebase Fire Store database is looking right now. So we have the users. So we have two users here. We have ah AB and we have Manny and for each of these users. We actu

ally have all the information of those users. So things like their location, latitude and longitude. Things like their name and basically their employment type, job title, recent company, ah the address which we got from Radar and remember these are all the details that we have filled. At least in my case and similarly in Mary's case ah and also looking for job is student and student details and all these things. So whatever we filled ah is as actually present inside the users collection. Ah sim

ilarly inside messages collection I have told this to you before but I'll still reiterate we have ah a document inside ah the messages collection and inside that document we have another collection the same name now in this collection further has documents inside it so So all the documents inside this particular collection actually have the ID equal to the time stamp of that particular ah message that is being sent and then ah we are actually storing them in here and then we see that we have you

know the content and the ID from the ID2 and the time stamp. Ah so that is what actually ah is how we are storing the data in Fire Store database right now ah and ah you also have authentication where the user details and you know those who have authenticated that is being stored and you also have the sign in method ah where we are using Google Gita and email password. Make sure these are enabled ah as I have already mentioned before. Ah so that's how ah I think all about five A's right now. Le

t's ah go ahead and ah start implementing smart suggestions. So right now we are inside the chat suggestions file and what we are going to do first of all is going to declare a few variables. Ah so let's do that first. Okay, so we have basically declared ah a few variables here. We have the ID, peer ID, group chat ID and we have a list of suggestions ah which we have initialized with some random suggestions. Ah next what we'll do is go ahead and ah basically fetch the IDs and the group chat ID a

nd will do that inside the Fet Chat ID pair. Okay, so now inside the FetChat ID pair, we have actually made use of the user store and the chat store and using the provider. op of process we have actually ah you know fetch the user ID, the PR ID and also obtain the group chat ID. Now ah we are going to use the ah chip widget and ah since we want to display those small buttons above this. Ah so the chip widget will come in handy. But we want to customise this chip with a little bit ah we want to a

dd some gesture detector on the top of that. So that wherever I am trying to you know ah actually ah submit the messages or I am trying to click on one of those suggestions it actually ah gets into Fire Store and it's it's actually submitted as a ah message or basically a message is sent. Ah so we are going to do that right now and for that we'll be using the expanded and the gesture detector widgets. Alright, so the label of that particular chip that we have is actually being used as the conten

t for the on send message and then we are also providing the group chat ID and the ID of the person who is sending that message. Uh so right now this is actually done and what we have to do next is work on the get suggestions function. So in here we'll be making use of the Smart Replies plugin. So as we have already seen before it's a part of the Google ML kit ah but ah it's very well implemented in this plugin called Smart Replies. Ah which we already have inside this particular project ah and

what I'll do is I'll say list old suggestions and I'll call this as equal to suggestions and then ah I'll say suggestions equal to a wait a wait ah and constant and will use smart reply now. Now smart reply actually has this function called suggest replies and the text messages is the messages that we want ah it to have. So we'll call it messages basically ah which is being sent ah in here and then we will actually call set state. Now why are we doing this? Because we want to go ahead and reload

or rebuild our widgetry once we have the ah suggestions so that the new suggestions keep coming in every time a message is being sent. Now you don't want to do this though. The primary reason is you will fall into it infinite loop if you do this because the get suggestions method is kind of going to be called inside the ah widget build function and every time a widget is built I am calling get suggestions and I am rebuilding the widget. So that will cause ah your application to go into infinite

loop. So to prevent that we'll just ah do a very simple thing. I'll compare if my old suggestions ah is ah different from my new suggestion. So for that we have this amazing function called list equals and what we will do is ah we will compare the two lists here. So the first list is actually old suggestion and the new ah list is actually suggestions and if and only if this statement holds that is if it's not the same ah so I'll add a knot here as well so if it's not the same only then I will b

e setting my state. So this is a safeguard against that. Now finally I'll go ahead and work on the widget bill function. So we'll be using a stream builder again here ah and the aim of that stream builder will be to make sure that every time this ah new message comes in ah and ah basically it's listening to that stream. So I'll I should be updating my suggestions. So let's go ahead and do that. Okay, so that completes the widget bill. Let me tell you what we have done here. We have a stream in h

ere. Ah that is actually listening to Firebase ah ah fire store and it's actually ah checking it's a message has been added. And this is this is the same stream that we were using earlier to display the messages. Ah and then every time ah actually a change is being made here. I am going ahead and calling the get sedition function and checking if the new suggestion that I am getting is actually different from the older editions or not. So if it's any different from the older seditions ah what I a

m going to do is I am going to rebuild the widget and ah then ah what is the widgetry actually rendering in in for the suggestions. We are rendering this padding ah which is basically ah the parent of a row and the row is going to have have three suggestions which are being rendered by the chip widgets ah that we have shown above. So ah this is how we have actually implemented the suggestions file. So let's go and run this. Basically let's try running this in both of the devices ah like we did b

efore and let's have a look at if this suggestions are coming in or not. Now one more thing that we need to do before we can actually test this on devices is actually adding the chat suggestions here in the chat input. So ah this is actually part of the chat input file which I forgot to mention. Ah so you can just put chat suggestions here like this. And ah the rest everything should work. Ah also make sure that it's actually constant. Ah because we want to add the constant modify there. Ah so n

ow we can run this and then go ahead and test it out. Alright, so I have the two devices ah my iPhone 12 pro and iPhone 12 emulators ah and I'll be running ah basically ah the applications in both of them. Ah so let me ah let's go and write hi ah Mary in this one. And that shows up here and let me say hi AB here. And that also shows up here. Now let's say I want to ask Mary ah that you know WhatsApp and that shows up here on Mary's device ah and it's great that Mary is now getting suggestions so

she may go and say something like nothing much and then I'll say oh okay and then she may ask ah how are you and then may be I'll say I am I am good or may be good you and correspond to that she also understands that it's actually I am good now I press good you both ah I mean two times that's why we got the message twice ah but we can see that basically our suggestions ah the smart replies which is working completely and what we wanted to show initially in the initial ah ah video where we saw t

he final result. It's exactly the same thing that we have successfully built together now. Ah so pat yourself on the back and let's actually look at the conclusion of the video. Whoa, so I hope you enjoyed that as much as I did and building this application actually taught us the smart replies ah which is a very important concept because in most of the modern applications especially ah let's say the outlook or Gmail and other professional applications. We do have these smart replies implemented

so that you can you know actually reply back to emails that you have received quickly without having to type a new email or similar such circumstances. Ah so ah now that you have learned it it's actually easy for you to go ahead and you know implement in various applications that you might be building. Ah coming to the part of the big announcement I had already mentioned ah that will be doing at the end of the video. Ah and I am not sure if it's completely a surprise for you by now because I hav

e been dropping hints here and there. Ah but starting from this video we are actually launching our own LinkedIn clone series. In which will be implementing most of the ah famous features of LinkedIn which are you know very noticeable and ah from which you can actually learn a lot ah so it's actually a list of all these ah features that we have we will be implementing the chat features ah the user profile feature, user connections, user feed, creating posts ah and social authentication and linki

ng of user accounts as well as ah for receiving notifications on your phone. Now for each of these features I have included the possible set of text tax which I might be using for them. Ah and ah although that might change with time ah so we'll ah discuss more on that when those videos come into bing ah and ah if your favourite video did not make the list then what you have to do just go to the comment section and put your comment down there and I'll leave your comments and I'll see if those fea

tures are actually feasible and if they are important to implement ah then definitely I'll go ahead and make a video on that as well ah so ah your comment matters ah and ah so and one more important thing that we have to remember is that of course these are not all the features of LinkedIn LinkedIn has ah you know way way more features because it was implemented over a matter of years ah and ah by where various software engineers from all over the world. So ah but what we are covering here will

actually ah you know take ah cover things at a very basic level and you know ah help you understand how big applications like LinkedIn ah work ah even if we actually scale them down ah to a basic level. Ah so in the next video we'll have a look at ah first feature in the list that is the additional chat features such as video calling or adding of images and ah you know other stuff into the chat ah LinkedIn chat and ah so until then ah go ahead and like, share and subscribe ah and I'll see you in

the next one.