So we have to select a Volto-Slate block. So for example, we write some text, let's say, best tea drink, and the word tea would be the one that we want to show the available citations.

Right now what we see is the available formatting options for rich text provided by Volto-Slate. The last one is inserted by this Volto add-on that I created based on the Volto footnotes,

which is another add-on. On the right, we get a side portal, which is something that is used in Volto-Slate. Right now we are seeing available collections in the Zotero web library, which is something

that I understand is commonly used. It also has a word extension. So let's look at what the Zotero web library has. So on the left part, we see the collections, and these collections look like folders.

And if we go to the library, we see the items. Clicking on one of them, we see the available information. These items can be added to the web library through multiple ways, we will see later.

So these are some of the information that we will try to show in the app. The way the structure is, these items are associated to collections, but they're not

part of collections, so make sure when you delete one, that it will be deleted from every other collection. Now on the left, we see the way they are structured, like I said, they don't actually contain these items, and they can also be nested collection within collection that

can also have items inside them, apart from collections. As we see, the last ones that we have here in alphabetical order are the 2020, 2021, and all outside goals.

And yeah, this is pretty much the architecture that it is here. Okay, so we see that we are only requesting 10 right now since they are not all shown. As you can see, there are more of them.

A load more button appears. This button is aware of the list it has, and it will disappear if there are no more results to show, but also it goes the last one we saw earlier.

Okay, now the nested part. It would be tricky to go through the rabbit hole to see all the nested collections, and still remember to go back to each one of them. So the way we look is we go through the nested, but we go back to the original without

loading them again. Right now we see a combination of both results that are within that collection is a collection that you represent, that we show the arrow, and they have different behaviors if you click on them. One will show what's inside. The other we can use as a situation.

If you click on it, we see metadata, which is publication of available DoI or ISBN if there are. On the top part, we see this is a summary of this information. It's not the exact situation style that we will see because this is something that the

user can change based on some configuration we will see later. Okay, so we see it's the exact same one. It was in 2019 and has the same information that it's here. We show it there. So let's use it by clicking the check mark, and the way this is shown, if we click

outside, we'll see that there is a light blue background on the word, and if we want to

actually see the footnotes that we create, there's another block. It's called footnotes, and this can be dragged and dropped wherever, and it will still know what to show in each order. If we save, that's what it looks like. You can see the number, which this situation it is.

It's the first one, and it also has a popover which shows the exact style that comes from the Zotero web library. Okay.

Now, if we click on it, we see another panel of chases which now are not the original. They are not the initial from the VoltoSlate. The two things that we can do is either go back to the site panel and edit or remove it.

So let's go through the nested portion. We can go through it, and at one moment, we'll see there are more collections and items here than we show.

Again, the little button comes, and it knows that it would get this list and not the original list of collections but for the top-level collections. Same thing. Collections look and behave differently than items, so let's change the one we had with

the new one. Okay. How do we do this? How do we get this into our app? There's a portion called site setup where there are two things we need to do. In the site setup add-ons, we need to install the Zotero which is in the REST API portion of

it, and then the control panel portion of it which we click will have the information that we need. So the first thing is basically the ID.

We have the whole URL because maybe in the future we can customize, but that ID, where do we find it, is in the Zotero user account part which is user ID will be used

in API calls. Next is the Zotero API key. This key is generated if we click on create new private key, give it a name, save it at the desired access level.

One thing we need to remember is the Zotero also creates items inside it, so also check the read-write one. If you press the save key, it will take us to a new screen that will show only once that key that we need to add here. So Zotero default collection, like I said, we can add things into Zotero through this add-on

and we need to specify what that collection is. Where do we get this? Again, it's in the URL. Every collection is in the URL. It's easy to use. Recitation style.

So basically we don't just write the metadata information that the article has in one simple way, it's something that is specified that the user should choose its own style and how do we do this? If we go to the Zotero documentation, we see that there is a Zotero style repository.

To my surprise, there are about 20,000 styles of citations that you can use. I don't know how big the customization can be for a few data, but yeah.

So one thing, the EA one wasn't in the list, so the documentation specifies the Web API P3 basics that there's two ways you can do this. Either by name, which is if you find it in the list I showed before, or URL to remote csl file.

It's what we used. Another thing we can do is other than browsing through the list, we can also search by name. And this search, for example, we want to add coffee to the list of drinks and we will

try to add a citation for the coffee. Again, I click on it, which is the notebook icon, get the site panel, and we go to the search. So what we see now after we enter the word that we want to search, it will change.

So we'll no longer see the browsing. We will see two or three tabs screen that has two types of results. Zotero. So this is everything that is in Zotero that has anything to do with coffee. We see the Zotero logo. And this is the same summary of the most important data in the metadata of the file.

And if we expand, we see the most important ones.

Okay. Journal, article, if it's present, and then we can use it. So let's use this one. See how it looks. As we can see, the second one appeared and they're automatically counted. For example, if we had more and we chose to delete any one of them, the counting would be

rearranged and each one of them has the popover that shows the exact style that was set up in the config part. So let's look at OpenIR.

What is OpenIR? So we see two kinds of data that we get, publication and research data. Basically, there are types of results. We see the OpenIR logo and the label that says this is the publication and the others are research data.

Okay. So OpenIR is similar to Zotero, but it doesn't look in just in what you have. It looks in everything that it has. And as you can see, we got inspired by the way they show the data here.

I think it's very useful if you want to only look for the authors. It's very easy to see for those or title or stuff like that. On the right, on the left, we will see the available types, which are publications and research data.

These are the two that we consider most important to show in our research results. So let's take this one. Let's use this one. First, we will try to see if it already is in the Zotero.

We will see why. So at the moment, it isn't. We are going to use it. And why this is important, because we can see we get successful added to Zotero. So the thing is, if we want Zotero to give us the desired style that we specified, it is the EA way, we need to add it to Zotero.

So now it has been added, we search for it, we will see it. And it's the exact same that we wanted to add.

The situation is, the situation is updated with the desired situation. And right now we will look for it. As I said, it's in that collection where everything outside goes, and it's the first time. Another thing, if we look for it again, just by the T, not by the name of the author, we will see it's not in the first time.

So we need to load more. Okay, maybe it's here. It's not. So, yeah, it's the second to last.

This is the one that we added. Another thing is the Zotero results have the priority. We don't want to add OpenAI results over and over to Zotero. So if it would have, if these results would come through OpenAI, then they will be taken out of the list and only keep those rings of term.

This tab shows everything, the two results combined. We can filter the type of results, which is a simple slice.

No requests are done for taking them out or putting them back in. If a researcher doesn't show any results, we will show this nice message that I think in the

future will be customizable through a similar way like the other cabin creations were done in the control panel. Okay, let's put them back in.

So the load more is here again. And again, it knows, as we can see, this is a long scroll bar because it has only 10 results. We go here, we load more data. It gets shortened because both of the types are getting requested, but the Zotero ones, we go, it's only 10.

So it's again aware of where it is and which listing is to scroll. Also, it didn't go back to the top, so you miss your position. It keeps it there. It's not some magic. It's simple slice of the array stuff.

Okay, so let's add some text to see. So the popover here comes into play. If you have a lot of text and you want to see what is the reference there, you can just scroll it.

Other thing is you can also, yeah, it takes you to the citation. Also, it is highlighted yellow and that small arrow at the back. It will take you to where that citation is, which is, yeah, it's the correct one.

Okay. Search for Doi. This is our DOI. This is, again, something else that we can do, not just search by name, which would give multiple results, but search by DOE, which ideally should return one.

Maybe by some bug, it will return more because of if it's already in Zotero and also shows the one in. Okay, so the one we got is not in Zotero. It is only in OpenAI.

It worked. It's, yeah. Okay. Let's use it. Changed. So let's do something a bit more difficult.

Let's add another one. So I understood that there are people that could use just pasting there some, maybe two arrays and maybe add some text, depending on what copy paste they did. Let's see if this works.

It also works. It shows the two, it's basically some very good regex that I found that extracts the Dois from the text and it only searches for them. This functionality is not yet perfect, but based on something that we will receive, we should know if there's need to improve it more.

Okay. Yeah. So the one we added is in the collection where everything that is outside of Zotero goes.

One thing that we can make and also remove the citation. So we remove it, the decoration disappears and the numbering is corrected.

Next, we can delete this block and some users might want to do this because there's too much text and they can also see the citations here.

It's enough for them. That's okay. But if you want to add them, it just automatically comes back and it knows what to show and it works.

Okay. So we also have notations, which is something that Alin mentioned. My version would be a notation on steroids, which is a citation.

So what's the difference? Well, for starters, it's another icon that you have to press. Uses some of the same functionality, but you can see notations, but footnotes that the author writes for clarifications or, I don't know, providing some synonyms for some words or something like that.

But it gets integrated with the footnotes. It looks the same as a popover and the numbering is taken into consideration also on the footnotes block.