@dxos/plugin-search 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/src/capabilities/react-surface.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { Capabilities, contributes, createSurface, useLayout, useAppGraph } from '@dxos/app-framework';
 import { getActiveSpace } from '@dxos/plugin-space';
+import { isSpace, type Space } from '@dxos/react-client/echo';
 
 import { SEARCH_DIALOG, SearchDialog, type SearchDialogProps, SearchMain } from '../components';
-import { SearchContextProvider } from '../context';
+import { SearchContextProvider } from '../hooks';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
@@ -23,17 +24,39 @@ export default () =>
       ),
     }),
     createSurface({
+      // id: `${SEARCH_DIALOG}/search-input`,
       id: 'search-input',
       role: 'search-input',
       component: () => {
         const layout = useLayout();
         const { graph } = useAppGraph();
         const space = graph ? getActiveSpace(graph, layout.active[0]) : undefined;
-        return space ? (
+        if (!space) {
+          return null;
+        }
+
+        return (
+          <SearchContextProvider>
+            <SearchMain space={space} />
+          </SearchContextProvider>
+        );
+      },
+    }),
+    createSurface({
+      id: `${SEARCH_DIALOG}/search`,
+      role: 'deck-companion--search',
+      filter: (data): data is { subject: Space } => isSpace(data.subject),
+      component: ({ data }) => {
+        const space = data.subject;
+        if (!space) {
+          return null;
+        }
+
+        return (
           <SearchContextProvider>
             <SearchMain space={space} />
           </SearchContextProvider>
-        ) : null;
+        );
       },
     }),
   ]);

package/src/components/Search.stories.tsx

@@ -12,7 +12,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SearchResults } from './SearchResults';
 import { Searchbar, type SearchbarProps } from './Searchbar';
-import { SearchContextProvider, useGlobalSearch, useGlobalSearchResults } from '../context';
+import { SearchContextProvider, useGlobalSearch, useGlobalSearchResults } from '../hooks';
 
 faker.seed(1);
 

package/src/components/SearchDialog.tsx

@@ -12,8 +12,8 @@ import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/r
 import { SearchList, type SearchListItemProps } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
+import { useSearchResults } from '../hooks';
 import { SEARCH_PLUGIN } from '../meta';
-import { useSearchResults } from '../search';
 
 export const SEARCH_DIALOG = `${SEARCH_PLUGIN}/SearchDialog`;
 

package/src/components/SearchMain.tsx

@@ -4,20 +4,23 @@
 
 import React, { type FC, useState } from 'react';
 
+import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { groupSurface, mx } from '@dxos/react-ui-theme';
 
 import { SearchResults } from './SearchResults';
 import { Searchbar } from './Searchbar';
-import { useGlobalSearch, useGlobalSearchResults } from '../context';
+import { useGlobalSearch, useGlobalSearchResults } from '../hooks';
+import { useWebSearch } from '../hooks/useWebSearch';
 import { SEARCH_PLUGIN } from '../meta';
 
-export const SearchMain: FC<{ space: Space }> = ({ space }) => {
+export const SearchMain: FC<ThemedClassName<{ space: Space }>> = ({ classNames, space }) => {
   const { t } = useTranslation(SEARCH_PLUGIN);
   const client = useClient();
   const { setMatch } = useGlobalSearch();
+  const [query, setQuery] = useState<string>();
   // TODO(burdon): UX to select all spaces.
   const allSpaces = false;
 
@@ -25,6 +28,14 @@ export const SearchMain: FC<{ space: Space }> = ({ space }) => {
   const objects = useQuery(allSpaces ? client.spaces : space, Filter.all());
   const results = useGlobalSearchResults(objects);
 
+  const {
+    runSearch,
+    results: webResults,
+    isLoading,
+  } = useWebSearch({
+    query,
+  });
+
   const [selected, setSelected] = useState<string>();
 
   // TODO(burdon): Activate and/or filter current main (set context).
@@ -32,15 +43,23 @@ export const SearchMain: FC<{ space: Space }> = ({ space }) => {
     setSelected((selected) => (selected === id ? undefined : id));
   };
 
+  const allResults = [...results, ...webResults];
+  log.info('results', { results, webResults });
+
   return (
-    <div className='flex flex-col grow h-full'>
-      <Searchbar placeholder={t('search placeholder')} onChange={setMatch} />
-      {results.length > 0 && (
-        <div className='absolute top-[--topbar-size] bottom-0 z-[1]'>
-          {/* TODO(burdon): Change to Portal? */}
-          <div className={mx('flex flex-col h-full overflow-hidden', groupSurface)}>
-            <SearchResults items={results} selected={selected} onSelect={handleSelect} />
-          </div>
+    <div className={mx('flex flex-col grow h-full overflow-hidden', classNames)}>
+      <Searchbar
+        placeholder={t('search placeholder')}
+        onChange={(text) => {
+          setQuery(text);
+          setMatch?.(text);
+        }}
+        onSubmit={runSearch}
+      />
+      {isLoading && <div className={mx('flex flex-col grow overflow-hidden', groupSurface)}>Loading...</div>}
+      {allResults.length > 0 && (
+        <div className={mx('flex flex-col grow overflow-hidden', groupSurface)}>
+          <SearchResults items={allResults} selected={selected} onSelect={handleSelect} />
         </div>
       )}
     </div>

package/src/components/SearchResults/SearchResults.stories.tsx

@@ -11,7 +11,7 @@ import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { SearchResults, type SearchResultsProps } from './SearchResults';
-import { filterObjectsSync } from '../../search-sync';
+import { filterObjectsSync } from '../../hooks';
 
 faker.seed(1);
 

package/src/components/SearchResults/SearchResults.tsx

@@ -2,31 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Icon, Buildings, Folders, User } from '@phosphor-icons/react';
 import React, { type FC, forwardRef } from 'react';
 
-import { ScrollArea } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-card';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
 
 import { SEARCH_RESULT } from '../../meta';
-import type { SearchResult } from '../../search-sync';
-
-// TODO(burdon): Factor out.
-const styles = {
-  selected: '!bg-primary-100 !dark:bg-primary-900',
-};
-
-// TODO(burdon): Registry defined by plugins?
-const getIcon = (type: string): Icon | undefined => {
-  const iconMap: Record<string, Icon> = {
-    user: User,
-    organization: Buildings,
-    project: Folders,
-  };
-
-  return iconMap[type];
-};
+import { type SearchResult } from '../../types';
 
 export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) => {
   let content = <>{text}</>;
@@ -58,15 +40,23 @@ export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) =
 export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
 
 export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
-  const { id, type, label, snippet, match, selected, onSelect } = item;
-  const Icon = type ? getIcon(type) : undefined;
+  const { id, objectType, label, snippet, match, selected, onSelect } = item;
+
+  // TODO(burdon): Convert react-ui-card to use react-ui-icon.
+  // TODO(burdon): Get icon from plugin registry based on object type.
+  const Icon = undefined;
 
   return (
     <Card.Root
       ref={forwardRef}
-      classNames={mx('mx-2 mt-2 cursor-pointer', ghostHover, selected && styles.selected)}
+      classNames={mx('mx-2 mt-2 cursor-pointer', selected && '!bg-groupSurface', ghostHover)}
       onClick={() => onSelect?.(id)}
     >
+      {objectType && (
+        <>
+          <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>
+        </>
+      )}
       <Card.Header>
         <Card.Title title={label ?? 'Untitled'} />
         {Icon && <Card.Endcap Icon={Icon} />}
@@ -90,8 +80,8 @@ export type SearchResultsProps = {
 // TODO(burdon): Key cursor up/down.
 export const SearchResults = ({ items, selected, onSelect }: SearchResultsProps) => {
   return (
-    <ScrollArea.Root classNames='grow'>
-      <ScrollArea.Viewport>
+    <div className='flex flex-col grow overflow-y-auto'>
+      <div className='flex flex-col'>
         {items.map((item) => (
           <SearchItem
             key={item.id}
@@ -101,11 +91,7 @@ export const SearchResults = ({ items, selected, onSelect }: SearchResultsProps)
             selected={selected === item.id}
           />
         ))}
-      </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation='vertical'>
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-      <ScrollArea.Corner />
-    </ScrollArea.Root>
+      </div>
+    </div>
   );
 };

package/src/components/Searchbar/Searchbar.stories.tsx

@@ -6,20 +6,23 @@ import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
 
+import { withTheme } from '@dxos/storybook-utils';
+
 import { Searchbar, type SearchbarProps } from './Searchbar';
 
 const meta: Meta<SearchbarProps> = {
   title: 'plugins/plugin-search/Searchbar',
   component: Searchbar,
+  decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
 };
 
+export default meta;
+
 export const Default = {
   args: {
     placeholder: 'Search...',
   },
 };
-
-export default meta;

package/src/components/Searchbar/Searchbar.tsx

@@ -15,10 +15,11 @@ export type SearchbarProps = Pick<TextInputProps, 'variant' | 'placeholder'> & {
   };
   value?: string;
   onChange?: (text?: string) => void;
+  onSubmit?: (text?: string) => void;
   delay?: number;
 };
 
-export const Searchbar = ({ classes, variant, placeholder, value, onChange }: SearchbarProps) => {
+export const Searchbar = ({ classes, variant, placeholder, value, onChange, onSubmit }: SearchbarProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [text, setText] = useState(value);
   useEffect(() => {
@@ -34,8 +35,19 @@ export const Searchbar = ({ classes, variant, placeholder, value, onChange }: Se
     inputRef.current?.focus();
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    switch (event.key) {
+      case 'Enter':
+        onSubmit?.(text);
+        break;
+      case 'Escape':
+        handleReset();
+        break;
+    }
+  };
+
   return (
-    <div className='flex w-full items-center pli-1 pbs-1'>
+    <div className='flex shrink-0w-full items-center pli-1 pbs-1'>
       <Input.Root>
         <Input.TextInput
           ref={inputRef}
@@ -44,7 +56,7 @@ export const Searchbar = ({ classes, variant, placeholder, value, onChange }: Se
           value={text ?? ''}
           classNames={mx('pl-3 pr-10', classes?.input)}
           onChange={({ target }) => handleChange(target.value)}
-          onKeyDown={({ key }) => key === 'Escape' && handleReset()}
+          onKeyDown={handleKeyDown}
         />
 
         {/* TODO(burdon): Margin should be density specific. */}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './sync';
+export * from './useGlobalSearch';
+export * from './useSearchResults';

package/src/{search.test.ts → hooks/sync.test.ts}

@@ -9,7 +9,7 @@ import { Expando } from '@dxos/echo-schema';
 import { create } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 
-import { filterObjectsSync } from './search-sync';
+import { filterObjectsSync } from './sync';
 
 faker.seed(1);
 

package/src/{search-sync.ts → hooks/sync.ts}

@@ -6,6 +6,8 @@ import { AST, type S } from '@dxos/echo-schema';
 import { getSchema } from '@dxos/live-object';
 import { TextType } from '@dxos/schema';
 
+import { type SearchResult } from '../types';
+
 export const queryStringToMatch = (queryString?: string): RegExp | undefined => {
   const trimmed = queryString?.trim();
   return trimmed ? new RegExp(trimmed, 'i') : undefined;
@@ -34,15 +36,6 @@ const getIcon = (schema: S.Schema.AnyNoContext | undefined): string | undefined
 // TODO(burdon): Reconcile with agent index.
 export type TextFields = Record<string, string>;
 
-export type SearchResult = {
-  id: string;
-  type?: string;
-  label?: string;
-  match?: RegExp;
-  snippet?: string;
-  object?: any;
-};
-
 // TODO(thure): This returns `SearchResult[]` which is not just a narrower set of objects as the name implies.
 export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], match?: RegExp): SearchResult[] => {
   if (!match) {
@@ -84,7 +77,7 @@ export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], m
 };
 
 // TODO(burdon): Use schema?
-const getStringProperty = (object: Record<string, unknown>, keys: string[]): string | undefined => {
+export const getStringProperty = (object: Record<string, unknown>, keys: string[]): string | undefined => {
   let label;
   keys.some((key) => {
     const value = object[key];

package/src/{context.tsx → hooks/useGlobalSearch.tsx}

@@ -6,7 +6,8 @@ import React, { createContext, type PropsWithChildren, useContext, useMemo, useS
 
 import { raise } from '@dxos/debug';
 
-import { filterObjectsSync, queryStringToMatch, type SearchResult } from './search-sync';
+import { filterObjectsSync, queryStringToMatch } from './sync';
+import { type SearchResult } from '../types';
 
 type SearchContextType = {
   match?: RegExp;

package/src/{search.ts → hooks/useSearchResults.ts}

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { TextType } from '@dxos/schema';
 
 // TODO(thure): Deprecate search-sync, move still-relevant utilities elsewhere (here, probably).
-import { mapObjectToTextFields, queryStringToMatch } from './search-sync';
+import { mapObjectToTextFields, queryStringToMatch } from './sync';
 
 export const filterObjects = async <T extends Record<string, any>>(
   objects: T[],

package/src/hooks/useWebSearch.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useState } from 'react';
+
+import { AIServiceEdgeClient } from '@dxos/assistant';
+import { AI_SERVICE_ENDPOINT } from '@dxos/assistant/testing';
+import { getSchema, getTypename } from '@dxos/echo-schema';
+import type { DXN } from '@dxos/keys';
+import { log } from '@dxos/log';
+import { getIconAnnotation } from '@dxos/schema';
+import { Testing } from '@dxos/schema/testing';
+
+import { getStringProperty } from './sync';
+import { search } from '../search';
+import type { SearchResult } from '../types';
+
+// TODO(dmaretskyi): Get from config/credentials
+const EXA_API_KEY = '9c7e17ff-0c85-4cd5-827a-8b489f139e03';
+
+export const useWebSearch = ({ query, context }: { query?: string; context?: string }) => {
+  const aiService = new AIServiceEdgeClient({
+    endpoint: AI_SERVICE_ENDPOINT.REMOTE,
+  });
+
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const runSearch = async () => {
+    try {
+      setIsLoading(true);
+      log.info('Running web search', { query, context });
+      const results = await search({
+        query,
+        context,
+        schema: [Testing.Project, Testing.Org, Testing.Contact],
+        aiService,
+        exaApiKey: EXA_API_KEY,
+      });
+
+      const mappedResults = results.data.map((result): SearchResult => {
+        const schema = getSchema(result);
+        return {
+          id: result.id,
+          objectType: getTypename(result) as DXN.String | undefined,
+          label: getStringProperty(result, ['name', 'title', 'label']),
+          snippet: getStringProperty(result, ['description', 'content', 'website', 'email']),
+          object: result,
+          icon: schema?.pipe(getIconAnnotation),
+        };
+      });
+
+      setResults(mappedResults);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return { runSearch, results, isLoading };
+};

package/src/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './context';
+export * from './hooks';
 export * from './meta';
-export * from './search-sync';
+export * from './types';
 
 export * from './SearchPlugin';