Tutorials Page Search Feature

[bilgeyucel]

Hey @carlosgauci, we need a search feature on the tutorials page as you discussed on discord. There's already a design for it: Figma design.

UX:

• When the user clicks the search bar, the modal will open and the cursor's focus will be on the search input. When user types the search word and presses enter or search button, query will send to the endpoint and results will be shown on the modal.
• There will be 5 search result items in the list.
• A spinner would be nice to show in the pending state.
• ESC key, X button on top right or clicking outside of the modal should close the modal.
• Now in the design, the result items displays the title of a tutorial and its description but instead of description, we'll display the search content of 100 - 120 words (it may be less or more, we can update that).

We'll provide an endpoint to send the query and get a response. Just as a piece of background information: the system will be on deepsetCloud -> Documentation for the endpoint @masci will help us setting up the API key on Vercel.

Not to block the implementation of the frontend, I'll share an example response from the endpoint with you. The necessary fields for you will be content and file_name of documents. The level and completion time of each tutorial (already in the design) will be provided later as meta info of each document in this response.

Example response:

{
   "query_id":"XXX",
   "results":[
      {
         "query_id":"XXX",
         "query":"prompt node",
         "answers":[
         ],
         "documents":[{
               "id":"XXX",
               "content":"You can use it to perform practically any NLP task if you define your own prompt templates for them. By creating your prompt templates, you can extend the model's capabilities and use it for a broader range of NLP tasks in Haystack.\nYou can define custom templates for each NLP task and register them with PromptNode. Let's create a custom template to generate descriptive titles for news:\n\nInitialize a   instance. Give your template a   and define the prompt in  . To define any parameters for the prompt, add them to the   wrapped with curly brackets. ",
               "content_type":"text",
               "meta":{
                  "_split_id":9,
                  "file_name":"21_Customizing_PromptNode.txt",
                  "headlines":[
                     {
                        "level":1,
                        "headline":"Generating Titles for News Articles with a Custom Template"
                     }
                  ],
                  "_file_created_at":"2023-04-12T13:24:50.576243+00:00",
                  "_file_size":14152,
                  "highlighted":{
                     "content":[
                        "You can use it to perform practically any NLP task if you define your own <em>prompt</em> templates for them.",
                        "By creating your <em>prompt</em> templates, you can extend the model's capabilities and use it for a broader range",
                        "Give your template a   and define the <em>prompt</em> in  .",
                        "To define any parameters for the <em>prompt</em>, add them to the   wrapped with curly brackets."
                     ]
                  }
               },
               "score":0.642711100022835,
               "embedding":null,
               "file":{
                  "id":"XXX",
                  "name":"21_Customizing_PromptNode.txt"
               },
               "result_id":"XXX"
            },
         ]
      }
   ]
}

Let me know if you have any questions :)

[TuanaCelik]

closed with #114