Semantic Search

import * as React from "react";
import { SemanticSearch } from "@gooddata/sdk-ui-semantic-search";

// Import required styles
import "@gooddata/sdk-ui-semantic-search/styles/css/main.css";

const App = () => {
    return (
        <div style={{ width: 300 }}>
            {/* Wrap the search UI in a container of desired size */}
            <SemanticSearch
                // Handle item selection
                onSelect={(item) => {
                    console.log(`Selected item: ${item.title}`);
                    // Handle the selected item, e.g., navigate to the dashboard
                }}
                // Optional: Handle search errors
                onError={(errorMessage) => {
                    console.error(`Search error: ${errorMessage}`);
                }}
                // Optional: Filter by object types
                objectTypes={["dashboard", "metric"]}
                // Optional: Enable deep search
                deepSearch={true}
                // Optional: Set results limit
                limit={10}
                // Optional: Custom placeholder
                placeholder="Search for dashboards, metrics..."
                // Optional: Custom footer in search results
                renderFooter={(props, { closeSearch }) => {
                    return null;
                }}
            />
        </div>
    );
};

import * as React from "react";
import { useSemanticSearch } from "@gooddata/sdk-ui-semantic-search";

const MyCustomSearchComponent = () => {
    const [searchTerm, setSearchTerm] = React.useState("");

    const { searchStatus, searchResults, searchError, relationships } = useSemanticSearch({
        searchTerm,
        objectTypes: ["dashboard", "metric"],
        deepSearch: true,
        limit: 10,
        // backend and workspace are optional if provided via context
    });

    return (
        <div>
            <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search..."
            />

            {searchStatus === "loading" && <div>Loading...</div>}
            {searchStatus === "error" && <div>Error: {searchError}</div>}

            {searchStatus === "success" && (
                <ul>
                    {searchResults.map((item) => (
                        <li key={item.id} onClick={() => handleItemClick(item)}>
                            {item.title}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
};

interface ISemanticSearchResultItem {
    /**
     * The ID of the item.
     */
    id: string;

    /**
     * The title of the item.
     */
    title: string;

    /**
     * The description of the item.
     */
    description?: string;

    /**
     * The type of the item (e.g., "dashboard", "metric", "insight").
     */
    type: string;

    /**
     * The URL to the item in the GoodData platform.
     */
    link?: string;

    /**
     * Additional metadata about the item.
     */
    meta?: Record<string, any>;
}

interface ISemanticSearchRelationship {
    /**
     * The ID of the source item.
     */
    sourceId: string;

    /**
     * The type of the source item.
     */
    sourceType: string;

    /**
     * The ID of the target item.
     */
    targetId: string;

    /**
     * The type of the target item.
     */
    targetType: string;

    /**
     * The type of relationship between the source and target.
     * For example, "contains" for a dashboard containing a visualization.
     */
    type: string;
}

import React, { useCallback, useEffect, useState } from "react";
import { SemanticSearch, FooterButtonAiAssistant } from "@gooddata/sdk-ui-semantic-search";
import {
    GenAIAssistant,
    clearThreadAction,
    newMessageAction,
    makeUserMessage,
    makeTextContents,
} from "@gooddata/sdk-ui-gen-ai";

type ChatDispatcher = (action: unknown) => void;

const MyCustomSearchComponentWithAiAssistant = () => {
    const [chatDispatcher, setDispatcher] = useState<ChatDispatcher | null>(null);
    const [askedQuestion, setAskedQuestion] = useState("");
    const onDispatcher = useCallback(
        (dispatcher: ChatDispatcher) => {
            setDispatcher(() => dispatcher);
        },
        [setDispatcher],
    );

    useEffect(() => {
        if (!chatDispatcher || !askedQuestion) {
            return;
        }

        chatDispatcher(clearThreadAction());
        chatDispatcher(newMessageAction(makeUserMessage([makeTextContents(askedQuestion, [])])));
    }, [chatDispatcher, askedQuestion]);

    return (
        <>
            <SemanticSearch
                onSelect={(item) => {
                    console.log(`Selected item: ${item.title}`);
                }}
                objectTypes={["dashboard", "visualization", "metric"]}
                renderFooter={({ value }, { closeSearch }) => (
                    <FooterButtonAiAssistant
                        onClick={() => {
                            // You can extend the search query with additional context.
                            setAskedQuestion(`Build new visualization based on: ${value}`);
                            closeSearch();
                        }}
                    />
                )}
            />
            <GenAIAssistant onDispatcher={onDispatcher} />
        </>
    );
};