@finos/legend-application-marketplace 0.2.13 → 0.2.15

package/src/pages/Agents/MarketplaceAIProductAutosuggest.tsx

@@ -0,0 +1,181 @@
+/**
+ * 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 type { AutosuggestResult } from '@finos/legend-server-marketplace';
+import { useLegendMarketplaceAIChatStore } from '../../application/providers/LegendMarketplaceAIChatStoreProvider.js';
+
+const AUTOSUGGEST_DEBOUNCE_MS = 300;
+const AUTOSUGGEST_LIMIT = 6;
+
+export const MarketplaceAIProductAutosuggest = observer(
+  (props: {
+    onSelect: (result: AutosuggestResult) => void;
+    placeholder?: string;
+    className?: string;
+    autoFocus?: boolean;
+  }): React.ReactNode => {
+    const {
+      onSelect,
+      placeholder = 'Search data products...',
+      className,
+      autoFocus,
+    } = props;
+    const store = useLegendMarketplaceAIChatStore();
+    const [searchText, setSearchText] = useState('');
+    const [results, setResults] = useState<AutosuggestResult[]>([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const abortControllerRef = useRef<AbortController | undefined>(undefined);
+
+    const fetchResults = useCallback(
+      async (query: string, signal?: AbortSignal): Promise<void> => {
+        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: string) => {
+          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: string): void => {
+        setSearchText(value);
+        debouncedFetch(value);
+      },
+      [debouncedFetch],
+    );
+
+    const handleSelectResult = useCallback(
+      (result: AutosuggestResult): void => {
+        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 (
+      <div className={rootClass}>
+        <div className="ai-product-autosuggest__search">
+          <SearchIcon />
+          <input
+            ref={inputRef}
+            type="text"
+            className="ai-product-autosuggest__input"
+            placeholder={placeholder}
+            autoFocus={autoFocus}
+            value={searchText}
+            onChange={(e): void => handleSearchChange(e.target.value)}
+          />
+          {searchText && (
+            <button
+              type="button"
+              className="ai-product-autosuggest__clear"
+              onClick={(): void => {
+                setSearchText('');
+                setResults([]);
+                inputRef.current?.focus();
+              }}
+            >
+              <TimesIcon />
+            </button>
+          )}
+        </div>
+        {(isSearching || results.length > 0 || searchText) && (
+          <div className="ai-product-autosuggest__results">
+            {isSearching && (
+              <div className="ai-product-autosuggest__status">Searching...</div>
+            )}
+            {!isSearching && searchText && results.length === 0 && (
+              <div className="ai-product-autosuggest__status">
+                No products found
+              </div>
+            )}
+            {!isSearching &&
+              results.map((r) => (
+                <button
+                  key={`${r.dataProductDetails.groupId}:${r.dataProductDetails.artifactId}`}
+                  type="button"
+                  className="ai-product-autosuggest__item"
+                  onClick={(): void => handleSelectResult(r)}
+                >
+                  <div className="ai-product-autosuggest__item-name">
+                    {r.dataProductName}
+                  </div>
+                  {r.dataProductDescription && (
+                    <div className="ai-product-autosuggest__item-desc">
+                      {r.dataProductDescription}
+                    </div>
+                  )}
+                </button>
+              ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/pages/Agents/MarketplaceAIProductCards.tsx

@@ -0,0 +1,111 @@
+/**
+ * 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 type { DataProductSearchResult } from '@finos/legend-server-marketplace';
+import { CheckIcon, TimesIcon, CaretRightIcon } from '@finos/legend-art';
+import {
+  type ScoredProductCandidate,
+  unwrapProductDetails,
+} from '../../stores/ai/LegendMarketplaceAIChatStore.js';
+
+const DESCRIPTION_TRUNCATION_LENGTH = 120;
+const UNKNOWN_PRODUCT_LABEL = 'Unknown Product';
+
+export const MarketplaceAIProductCards = (props: {
+  products: DataProductSearchResult[];
+  scoredCandidates?: ScoredProductCandidate[];
+  onSelect: (product: DataProductSearchResult) => void;
+}): React.ReactNode => {
+  const { products, scoredCandidates, onSelect } = props;
+
+  return (
+    <div className="legend-ai__product-cards">
+      {products.map((product, idx) => {
+        const candidate = scoredCandidates?.[idx];
+        const hasFieldInfo =
+          candidate &&
+          (candidate.matchedFields.length > 0 ||
+            candidate.missingFields.length > 0);
+
+        const { groupId, artifactId } = unwrapProductDetails(product);
+
+        return (
+          <button
+            key={`${groupId}:${artifactId}`}
+            type="button"
+            className="legend-ai__product-card"
+            onClick={(): void => onSelect(product)}
+          >
+            <div className="legend-ai__product-card-title">
+              {product.dataProductTitle ?? UNKNOWN_PRODUCT_LABEL}
+            </div>
+            {product.dataProductDescription && (
+              <div className="legend-ai__product-card-desc">
+                {product.dataProductDescription.length >
+                DESCRIPTION_TRUNCATION_LENGTH
+                  ? `${product.dataProductDescription.slice(0, DESCRIPTION_TRUNCATION_LENGTH)}...`
+                  : product.dataProductDescription}
+              </div>
+            )}
+
+            {hasFieldInfo && (
+              <div className="legend-ai__product-card-fields">
+                {candidate.matchedFields.map((f) => (
+                  <span
+                    key={f}
+                    className="legend-ai__product-card-field legend-ai__product-card-field--matched"
+                  >
+                    {f} <CheckIcon />
+                  </span>
+                ))}
+                {candidate.missingFields.map((f) => (
+                  <span
+                    key={f}
+                    className="legend-ai__product-card-field legend-ai__product-card-field--missing"
+                  >
+                    {f} <TimesIcon />
+                  </span>
+                ))}
+              </div>
+            )}
+
+            <div className="legend-ai__product-card-meta">
+              {candidate ? (
+                <span className="legend-ai__product-card-score">
+                  Score: {(candidate.compositeScore * 100).toFixed(0)}%
+                </span>
+              ) : (
+                product.similarity > 0 && (
+                  <span className="legend-ai__product-card-score">
+                    Match: {(product.similarity * 100).toFixed(0)}%
+                  </span>
+                )
+              )}
+              {product.tags1.length > 0 && (
+                <span className="legend-ai__product-card-tags">
+                  {product.tags1.slice(0, 3).join(', ')}
+                </span>
+              )}
+            </div>
+            <div className="legend-ai__product-card-action">
+              Use this product <CaretRightIcon />
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/src/pages/Agents/MarketplaceAIScopeSelector.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 } from 'react';
+import { observer } from 'mobx-react-lite';
+import { PlusIcon, DatabaseIcon } from '@finos/legend-art';
+import type { AutosuggestResult } from '@finos/legend-server-marketplace';
+import { useLegendMarketplaceAIChatStore } from '../../application/providers/LegendMarketplaceAIChatStoreProvider.js';
+import { MarketplaceAIProductAutosuggest } from './MarketplaceAIProductAutosuggest.js';
+
+const MAX_SCOPE_PRODUCTS = 3;
+
+export const MarketplaceAIScopeSelector = observer(() => {
+  const store = useLegendMarketplaceAIChatStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent): void => {
+      if (
+        dropdownRef.current &&
+        e.target instanceof Node &&
+        !dropdownRef.current.contains(e.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  const handleSelectProduct = useCallback(
+    (result: AutosuggestResult): void => {
+      store.addScopeProduct(result);
+      setIsOpen(false);
+    },
+    [store],
+  );
+
+  return (
+    <div className="ai-scope-selector" ref={dropdownRef}>
+      {store.scopeProducts.length < MAX_SCOPE_PRODUCTS && (
+        <button
+          type="button"
+          className="ai-scope-selector__trigger"
+          title="Scope to a data product"
+          aria-label="Scope to a data product"
+          onClick={(): void => setIsOpen(true)}
+        >
+          <PlusIcon />
+        </button>
+      )}
+
+      {isOpen && (
+        <div className="ai-scope-selector__dropdown">
+          <div className="ai-scope-selector__dropdown-header">
+            <DatabaseIcon />
+            <span>Select Data Product</span>
+          </div>
+          <MarketplaceAIProductAutosuggest
+            onSelect={handleSelectProduct}
+            className="ai-scope-selector__autosuggest"
+            autoFocus={true}
+          />
+        </div>
+      )}
+    </div>
+  );
+});