diff --git a/apps/storybook/stories/config.ts b/apps/storybook/stories/config.ts index 1d31e4b..5032172 100644 --- a/apps/storybook/stories/config.ts +++ b/apps/storybook/stories/config.ts @@ -63,4 +63,16 @@ const demoIndexes: DemoIndexConfig = { }, } +demoIndexes.oramaWithCustomIcons = { + ...demoIndexes.orama, + resultMap: { + ...demoIndexes.orama, + icon: (result) => { + return result.category === 'Open Source' + ? 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f680.svg' + : null + }, + }, +} + export default demoIndexes 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 ? ( + + ) : ( + + )}