From dd1fd06d3acdfaadb91ca47058fda71491954025 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Jos=C3=A9=20Borba=20Fernandes?= Date: Fri, 17 Jan 2025 02:24:35 -0300 Subject: [PATCH 1/2] feat: support custom icons per result --- packages/ui-stencil-vue/lib/components.ts | 1 + packages/ui-stencil/src/components.d.ts | 12 ++++++++-- .../orama-search-results.scss | 15 ++++++++++++ .../orama-search-results.tsx | 8 +++++-- .../orama-search-box/orama-search-box.tsx | 5 ++++ .../src/components/orama-search-box/readme.md | 3 ++- .../ui-stencil/src/services/SearchService.ts | 24 ++++++++++++++++--- packages/ui-stencil/src/types/index.ts | 8 +++++-- 8 files changed, 66 insertions(+), 10 deletions(-) diff --git a/packages/ui-stencil-vue/lib/components.ts b/packages/ui-stencil-vue/lib/components.ts index f108a48..bff4eed 100644 --- a/packages/ui-stencil-vue/lib/components.ts +++ b/packages/ui-stencil-vue/lib/components.ts @@ -172,6 +172,7 @@ export const OramaSearchBox = /*@__PURE__*/ defineContainer( 'open', 'facetProperty', 'resultMap', + 'resultItemRender', 'sourceBaseUrl', 'linksTarget', 'linksRel', diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 2e3f82f..974d326 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -6,7 +6,7 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { ButtonProps } from "./components/internal/orama-button/orama-button"; -import { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResultBySection, SourcesMap } from "./types/index"; +import { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultItemRenderFunction, ResultMap, SearchResultBySection, SourcesMap } from "./types/index"; import { TChatInteraction } from "./context/chatContext"; import { OramaClient } from "@oramacloud/client"; import { AnyOrama, Orama, SearchParams } from "@orama/orama"; @@ -18,7 +18,7 @@ import { TThemeOverrides as TThemeOverrides1 } from "./components.d"; import { SearchResultsProps } from "./components/internal/orama-search-results/orama-search-results"; import { TextProps } from "./components/internal/orama-text/orama-text"; export { ButtonProps } from "./components/internal/orama-button/orama-button"; -export { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultMap, SearchResultBySection, SourcesMap } from "./types/index"; +export { ChatMarkdownLinkHref, ChatMarkdownLinkTarget, ChatMarkdownLinkTitle, CloudIndexConfig, ColorScheme, Facet, OnAnswerGeneratedCallbackProps, OnAnswerSourceClickCallbackProps, OnChatMarkdownLinkClickedCallbackProps, OnSearchCompletedCallbackProps, OnSearchResultClickCallbackProps, ResultItemRenderFunction, ResultMap, SearchResultBySection, SourcesMap } from "./types/index"; export { TChatInteraction } from "./context/chatContext"; export { OramaClient } from "@oramacloud/client"; export { AnyOrama, Orama, SearchParams } from "@orama/orama"; @@ -206,6 +206,10 @@ export namespace Components { * @deprecated it will be removed on next releases Placeholder for chat input */ "placeholder"?: string; + /** + * Used to render a custom icom per result. It should return a local asset path. + */ + "resultItemRender"?: ResultItemRenderFunction; /** * Used to map dataset result properties to the expected SearchBox properties */ @@ -868,6 +872,10 @@ declare namespace LocalJSX { * @deprecated it will be removed on next releases Placeholder for chat input */ "placeholder"?: string; + /** + * Used to render a custom icom per result. It should return a local asset path. + */ + "resultItemRender"?: ResultItemRenderFunction; /** * Used to map dataset result properties to the expected SearchBox properties */ diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss index bb64c96..d8ca86a 100644 --- a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss +++ b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.scss @@ -107,3 +107,18 @@ ph-files { color: var(--icon-color-primary, icon-color('primary')); } + +.result-item-icon-wrapper { + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + width: 20px; + height: 20px; +} + +.custom-result-item-icon { + max-height: 20px; + max-width: 20px; + object-fit: contain; +} diff --git a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx index 868805c..727efa1 100644 --- a/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx +++ b/packages/ui-stencil/src/components/internal/orama-search-results/orama-search-results.tsx @@ -152,8 +152,12 @@ export class SearchResults { id={`search-result-${result.id}`} onClick={(onClickEvent) => this.handleItemClick(onClickEvent, result)} > -
- +
+ {result.icon ? ( + + ) : ( + + )}