@finos/legend-application-marketplace
Version:
Legend Marketplace application core
86 lines • 4.88 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) 2026-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { SearchIcon, TimesIcon } from '@finos/legend-art';
import { debounce, noop } from '@finos/legend-shared';
import { useLegendMarketplaceAIChatStore } from '../../application/providers/LegendMarketplaceAIChatStoreProvider.js';
const AUTOSUGGEST_DEBOUNCE_MS = 300;
const AUTOSUGGEST_LIMIT = 6;
export const MarketplaceAIProductAutosuggest = observer((props) => {
const { onSelect, placeholder = 'Search data products...', className, autoFocus, } = props;
const store = useLegendMarketplaceAIChatStore();
const [searchText, setSearchText] = useState('');
const [results, setResults] = useState([]);
const [isSearching, setIsSearching] = useState(false);
const inputRef = useRef(null);
const abortControllerRef = useRef(undefined);
const fetchResults = useCallback(async (query, signal) => {
if (!query.trim()) {
setResults([]);
setIsSearching(false);
return;
}
setIsSearching(true);
try {
const response = await store.baseStore.marketplaceServerClient.getAutosuggestions(query, store.baseStore.envState.lakehouseEnvironment, AUTOSUGGEST_LIMIT, signal);
if (!signal?.aborted) {
setResults(response.results);
setIsSearching(false);
}
}
catch {
if (!signal?.aborted) {
setResults([]);
setIsSearching(false);
}
}
}, [store.baseStore]);
const debouncedFetch = useMemo(() => debounce((query) => {
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
const controller = new AbortController();
abortControllerRef.current = controller;
fetchResults(query, controller.signal).catch(noop());
}, AUTOSUGGEST_DEBOUNCE_MS), [fetchResults]);
const handleSearchChange = useCallback((value) => {
setSearchText(value);
debouncedFetch(value);
}, [debouncedFetch]);
const handleSelectResult = useCallback((result) => {
onSelect(result);
setSearchText('');
setResults([]);
}, [onSelect]);
useEffect(() => () => {
debouncedFetch.cancel();
if (abortControllerRef.current) {
abortControllerRef.current.abort();
}
}, [debouncedFetch]);
const rootClass = className
? `ai-product-autosuggest ${className}`
: 'ai-product-autosuggest';
return (_jsxs("div", { className: rootClass, children: [_jsxs("div", { className: "ai-product-autosuggest__search", children: [_jsx(SearchIcon, {}), _jsx("input", { ref: inputRef, type: "text", className: "ai-product-autosuggest__input", placeholder: placeholder, autoFocus: autoFocus, value: searchText, onChange: (e) => handleSearchChange(e.target.value) }), searchText && (_jsx("button", { type: "button", className: "ai-product-autosuggest__clear", onClick: () => {
setSearchText('');
setResults([]);
inputRef.current?.focus();
}, children: _jsx(TimesIcon, {}) }))] }), (isSearching || results.length > 0 || searchText) && (_jsxs("div", { className: "ai-product-autosuggest__results", children: [isSearching && (_jsx("div", { className: "ai-product-autosuggest__status", children: "Searching..." })), !isSearching && searchText && results.length === 0 && (_jsx("div", { className: "ai-product-autosuggest__status", children: "No products found" })), !isSearching &&
results.map((r) => (_jsxs("button", { type: "button", className: "ai-product-autosuggest__item", onClick: () => handleSelectResult(r), children: [_jsx("div", { className: "ai-product-autosuggest__item-name", children: r.dataProductName }), r.dataProductDescription && (_jsx("div", { className: "ai-product-autosuggest__item-desc", children: r.dataProductDescription }))] }, `${r.dataProductDetails.groupId}:${r.dataProductDetails.artifactId}`)))] }))] }));
});
//# sourceMappingURL=MarketplaceAIProductAutosuggest.js.map