Update search component to include images and new scenario

[bfekadu21]

Update the existing search component to include images as seen in this wireframe (also in screenshot below): Figma link

Tasks:

• Use relevant images for each search result (i.e. model search result should have the Open AI logo, etc).
• Continue to include the arrow icon on the search result when updating the search component.
• Create an additional search component for a "No results found" scenario. This currently does not exist.

[Varthiny-V]

05/12 Design Update: I’ve updated the search results with relevant images based on the existing platform. I’ve also created two versions of the 'No results found' component - one with an illustration and another with an icon.

[natdink]

1. Please pull over the default state of the search as well which would be to show the "Recents" options.
2. Add "My Bookmarks" as a filter selection and you will probably need to update the pills to hug instead of a standard fixed width so they can all fit in one line (my preference at least)
3. I kind of like the second more simple option for the "No results found" image but @bfekadu21 do you have an opinion?

[Varthiny-V]

05/14 Design Update:

• Added 'My Bookmarks' section.
• Updated the pills to hug so they fit in one line, as Natalie suggested.
• Worked on the default search state to display ‘Recents’ when there's no active search input.

[natdink]

@Varthiny-V

1. I don't think the search bar itself should be behind the backdrop as the user would likely be interacting with it as much as the dropdown search component. Think about when you are typing looking at results and then continuing to type. Can you please adjust?
2. Let's proceed with the simpler icon for no results found (v2)
3. For the filters, you edited a button to look essentially like a chip - can you use the chip component instead and then you can update the colors to match what you have. Ill make a note to have Pooja work on a ticket that adds the color option to our design system
4. once you've done step 3, can you show the selected state nad update the search results based on that just so we have an example for the dev team

[Varthiny-V]

Sure! @natdink

[Varthiny-V]

05/15 Update: Worked on updating the button components to the current chip component. If Pooja makes any updates to the chip component, I’ll reflect those changes here as well. Also worked on the selected state - as discussed in the call, I’ve added the background color to the chip.

[bfekadu21]

@Varthiny-V We can move forward the variation that has the same icon in the search bar. Looks good to me and we can update chips when Pooja is finished making changes to the component.