Building the useCompletion hook

[00:00 - 00:17] Welcome back. In this lesson, we will build the use-completion-ooc, which is a function encapsulating the logic for our use case. Let's talk about the separation of concern. It's often a good idea to make code modular each possible. Let's think about application.

[00:18 - 00:36] What are the core tasks that need to be needed? We need to under the network. There are many applications, many things, or go wrong. For instance, maybe the network shuts down and you get an error. Maybe there is a time-out problem because the server is overloaded.

[00:37 - 00:46] Maybe you make several requests, but they don't arrive in the same order that we made. And so, there is quite a lot of logic to handle for this work.

[00:47 - 00:56] Then streaming. Let me notice that streaming at the worker is indeed different concern. As whether or not you are streaming, you still need to under the network.

[00:57 - 01:08] So, streaming is just to make sure that the data can be processed as soon as it is at the front end. And the last is the use case. Here it's our completion use case.

[01:09 - 01:15] It could be a chart use case. It could be an assistant use case. And for every use case, you will still need to under the network and streaming.

[01:16 - 01:26] So, let's begin with the network. How are we going to under the network logic? We have a hook. And I will advise you to use a library called "RagQuery".

[01:27 - 01:36] It has a new name called "TansTechQuery". It's very famous and very powerful and it completely under the network query for you.

[01:37 - 01:46] So, thanks to this library, we built a hook called "Use Chat Query". We text an input messages and an output runs a reader query.

[01:47 - 01:57] So, the reader is from the streams app we saw in the previous lesson. Now, as you can see, the hook is very short as the corlogic is under by "Use Query".

[01:58 - 02:05] What do we need to do? Simply to build a key. The key is used by the car. As long as the key does not change, we can reuse the cache.

[02:06 - 02:15] Then we need to pass the function, making the actual call. And what's very powerful is that we can pass many functions depending on the one time context.

[02:16 - 02:27] Then a few config, last till time, we need to know how long the cache should be kept and unable. Sometimes we want to skip the call if the parameters are not ready.

[02:28 - 02:33] So, that's all for the network logic. Now, let's see the streaming.

[02:34 - 02:44] The streaming we already dedicated an entire lesson to it. It's the previous lesson and we created a function "RagTextStream" which is dedicated to under the streaming.

[02:45 - 02:51] So, I'm skipping. You can go back to "Sif Details". Lastly, "Completion".

[02:52 - 03:01] So, "Completion" will be a hook that takes an input message and returns a completion query. So, it depends on how to preview block.

[03:02 - 03:21] The network block, which is "UseSet Query", we will do a dependency injection by passing "UseSet Query" in as a property that will be very useful for testing. And it depends on "RagTextStream" which is here which will simply import.

[03:22 - 03:28] So, now we have our code. It's quite simple. Let's go over it to see any trap.

[03:29 - 03:44] We have our standard state. We need to keep loading state, reading state, reading it, and again, we'll be concatenated to return the different state, either the data . And here we are making actual network call. You can see there is the reader.

[03:45 - 03:55] Then the reader is read with "RagTextStream". Everything is very simple. Here you can see the loading state is 100, the errors are 100 and so on.

[03:56 - 04:00] First, head forwards. Now, let's look here. It's a bit more tricky.

[04:01 - 04:08] We are passing to "RagTextStream" the "Unevent" function. It's a function which will process the event.

[04:09 - 04:17] So, what do we do? First, we check the field data. And here we are using a library called "Z" which is a standard type script library.

[04:18 - 04:25] Simply to check that the data is expected format. And here we are expecting an open AI chat-complexion check.

[04:26 - 04:34] But of course, you are free to use any type of formatting you want. And here we are writing the "Chorology" values case.

[04:35 - 04:41] What's the logic? It's simple. We are simply taking the previous value and we are adding the new check.

[04:42 - 04:48] And that's all. Now, there is still one trap. You need to be a bit wary.

[04:49 - 04:53] React batches updates. What does it mean? Let me show you the documentation.

[04:54 - 05:00] Here you can see there is a button plus three. Unclick, you have three updates.

[05:01 - 05:05] Set number plus one. Now, think what do you expect to happen if I click on this button?

[05:06 - 05:10] You may freeze the video if you want to figure out it a bit. Now, let me press "I get four".

[05:11 - 05:16] How is it possible? Because there is three update and yet I get four. Yeah, it's simple.

[05:17 - 05:24] React batches updates. Before, what happens is that there is a top date which is number plus one.

[05:25 - 05:29] Number was a value of three. Three plus one is four.

[05:30 - 05:34] And in the end, those updates are lost. So there is a way to fix that.

[05:35 - 05:45] Instead of passing the new value, you pass a function. It's a function that takes the previous value as input and then gives the output.

[05:46 - 05:50] So the output is an input. And now if I click, it works.

[05:51 - 06:05] So that's exactly the case we are facing with streaming. Because we could get a case where the streaming is so fast that the updates are under big batch before rendering.

[06:06 - 06:14] Yeah, we do not want to simply return a pre-presew junction. We really want to pass a function computing verb date.

[06:15 - 06:23] So that's the little trick that you need to be aware of. And now we build our use completion and we can build our use emoji.

[06:24 - 06:27] You have internalize of code. You have a very powerful functionality.

[06:28 - 06:32] Yeah, we have a message. Let's say we have an ID for convenience.

[06:33 - 06:36] We have a system message. We're telling convert text to all two images.

[06:37 - 06:43] Yeah, we have a user input and we have a completion query. And that's all.

[06:44 - 06:49] And with that, you could build any type of completion. If you sketch, for instance, you can get a spell checker.

[06:50 - 06:55] You could build the title of it to do this automatically and so on in a few lines of code. So thanks a lot.

[06:56 - 06:59] We have managed to build our functionality. See you soon.