1 00:00:00,930 --> 00:00:08,090 In the previous video, we have seen how to build a chart feed that basically we have created that message 2 00:00:08,160 --> 00:00:13,110 US function and rendered all the messages using the props that we get from the React chat engine. 3 00:00:13,560 --> 00:00:19,200 So one little thing that is left here inside the city is we have to create a leadership function, which 4 00:00:19,200 --> 00:00:19,890 we'll do later. 5 00:00:20,250 --> 00:00:25,020 So now our interest is building this message and better messenger components. 6 00:00:25,590 --> 00:00:27,720 The first thing in my message our component. 7 00:00:29,560 --> 00:00:34,390 Inside, when we are going into this mindset, as you can see inside my head, Chatfield, then we are 8 00:00:34,390 --> 00:00:35,470 calling this my message. 9 00:00:35,710 --> 00:00:36,850 We are sending some proof. 10 00:00:36,880 --> 00:00:40,030 That is the message from so now we have to catch them properly over here. 11 00:00:40,630 --> 00:00:42,040 So I'll catch the message from. 12 00:00:46,330 --> 00:00:48,190 So once we get all of the message from. 13 00:00:49,300 --> 00:00:55,360 Now I want to see whether the message is an image or not, if it is image after another thing, another 14 00:00:55,360 --> 00:01:00,880 way, if it is a picture and render it in another, it's so hard to check whether it is image or not. 15 00:01:01,360 --> 00:01:07,720 The fact that we can use that if condition, if message, not attachments. 16 00:01:09,050 --> 00:01:14,590 So basically, the media's going to be in the form of attachments to the message, if this is true, 17 00:01:14,600 --> 00:01:19,430 if the message that attachment is not zero, if it is greater than zero, then. 18 00:01:19,460 --> 00:01:27,590 And so what this and it is that and operator, if this is true, then only little check the next statement. 19 00:01:27,890 --> 00:01:32,420 So basically finished with of following proceed to the next statement. 20 00:01:32,420 --> 00:01:34,070 So this is maybe like logic. 21 00:01:35,240 --> 00:01:38,480 Message, not attachment that is greater than zero. 22 00:01:41,610 --> 00:01:42,010 Length. 23 00:01:45,120 --> 00:01:46,080 It's better than zero. 24 00:01:47,130 --> 00:01:52,950 So we're checking whether the images I've made zero eight is a major part of, whether it is a PDF or 25 00:01:52,950 --> 00:01:54,110 whether it is a media we don't know. 26 00:01:54,690 --> 00:02:01,320 Checking the length of the images that we are sending, we may just two images, maybe more so if this 27 00:02:01,560 --> 00:02:04,200 condition holds, then we have the redundant image. 28 00:02:06,310 --> 00:02:13,720 So returning the images, audio images, they're basically the, you know, it is a basic and that in 29 00:02:13,750 --> 00:02:16,840 the premium part in Belgium alone. 30 00:02:18,660 --> 00:02:25,440 So, yeah, we can give it some attributes, so the source will be message attachments. 31 00:02:28,190 --> 00:02:28,820 Not fine. 32 00:02:29,810 --> 00:02:33,770 So this is how we can get the source of dementia inside the message. 33 00:02:34,130 --> 00:02:35,480 We can go to the attachment. 34 00:02:35,720 --> 00:02:36,830 You can access that attachment. 35 00:02:37,010 --> 00:02:39,190 And if there are more attachments, it will be added. 36 00:02:39,380 --> 00:02:44,030 So we will be getting the first element of that attachment and then the file will give the location 37 00:02:44,030 --> 00:02:46,040 of that attachment inside a local system. 38 00:02:46,970 --> 00:02:48,460 So I'll be giving all the prop. 39 00:02:49,840 --> 00:02:56,110 So in simple language, these called as attributes are pretty inbuilt HDMI detect if it is a customized 40 00:02:56,110 --> 00:02:57,830 HDMI, detect them, we call them as props. 41 00:02:57,880 --> 00:03:01,150 So that is the simple difference, and that is how we have to remember. 42 00:03:02,360 --> 00:03:03,780 And you give a message attachment. 43 00:03:04,080 --> 00:03:09,900 If for some reason it is not rendering, the immediate should give a message, so no users should know 44 00:03:09,900 --> 00:03:10,950 it should be user friendly. 45 00:03:16,400 --> 00:03:17,660 I'll be giving a last name. 46 00:03:21,210 --> 00:03:22,260 Men will be message. 47 00:03:22,980 --> 00:03:23,460 Image. 48 00:03:27,080 --> 00:03:28,630 After that, we can give us time. 49 00:03:30,390 --> 00:03:30,740 So it. 50 00:03:32,860 --> 00:03:33,910 Flawed, right? 51 00:03:34,900 --> 00:03:37,210 So this styling that is basically implicit and as you can. 52 00:03:38,420 --> 00:03:41,310 See which style suits the type you like. 53 00:03:41,330 --> 00:03:43,580 User interface by simply trying and editing. 54 00:03:49,490 --> 00:03:52,250 So with this, we completed the image, but. 55 00:03:53,890 --> 00:04:01,390 So now, if it is true, then it will return this image, if it is not true, then it will does not 56 00:04:01,390 --> 00:04:05,560 point to the block knife block and relatively written the statement. 57 00:04:05,710 --> 00:04:11,120 So what we have done, we have to return the messages, OK? 58 00:04:11,410 --> 00:04:14,560 Our message is not the images, but the image this will perform. 59 00:04:14,890 --> 00:04:17,680 If it is not an image, then we have to return that message. 60 00:04:18,070 --> 00:04:21,550 So we'll be giving up plus name called message. 61 00:04:26,450 --> 00:04:27,440 Style will be. 62 00:04:30,220 --> 00:04:31,150 Float to the right. 63 00:04:35,330 --> 00:04:37,220 Margin, right, will be 18 pixels. 64 00:04:41,350 --> 00:04:42,370 18 pixels. 65 00:04:46,100 --> 00:04:47,480 Color will be white. 66 00:04:50,900 --> 00:04:52,460 And then finally, the background of. 67 00:04:57,020 --> 00:04:59,810 We'll be giving her hash four three two five zero. 68 00:05:01,720 --> 00:05:04,150 Three men with five zero. 69 00:05:06,820 --> 00:05:07,090 So. 70 00:05:09,330 --> 00:05:14,190 So with this now inside there, we have to return the message, not text. 71 00:05:15,260 --> 00:05:16,820 The next president can send the message. 72 00:05:18,390 --> 00:05:24,000 So now we have completed the message component, but next, we'll see how to render their message. 73 00:05:24,120 --> 00:05:30,720 So this will be similar to my message, like rendering it as an attachment and then rendering it in 74 00:05:30,720 --> 00:05:31,560 a different way. 75 00:05:31,800 --> 00:05:34,560 If it does not have an attachment, rendering the message itself. 76 00:05:34,800 --> 00:05:36,600 So we'll see how to do that in the next few.