@dxos/plugin-search 0.8.4-main.67995b8 → 0.8.4-main.70d3990

package/src/components/SearchResults/SearchResults.tsx

@@ -4,12 +4,57 @@
 
 import React, { type FC, forwardRef } from 'react';
 
+import { Surface } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
 import { Card } from '@dxos/react-ui-stack';
 import { ghostHover } from '@dxos/react-ui-theme';
 
-import { SEARCH_RESULT } from '../../meta';
 import { type SearchResult } from '../../types';
 
+export type SearchResultsProps = {
+  items: SearchResult[];
+  match?: RegExp;
+  selected?: string;
+  onSelect?: (id: string) => void;
+};
+
+// TODO(burdon): Key cursor up/down.
+// TODO(burdon): Use stack (should be virtualized).
+export const SearchResults = ({ items }: SearchResultsProps) => {
+  return (
+    <div className='overflow-y-auto'>
+      <div className='flex flex-col'>
+        {items
+          // TODO(burdon): Hack to reduce noise from system objects.
+          .filter((item) => Obj.getLabel(item.object))
+          .map((item) => (
+            <div key={item.id} role='none' className='pli-2 first:pbs-2 pbe-2'>
+              <Surface role='card' data={{ subject: item.object }} limit={1} />
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
+
+export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
+  const { id, objectType, label, snippet, match, selected, onSelect } = item;
+
+  return (
+    <Card.StaticRoot
+      ref={forwardRef}
+      classNames={['mx-2 mt-2 cursor-pointer', selected && '!bg-activeSurface', ghostHover]}
+      onClick={() => onSelect?.(id)}
+    >
+      {objectType && <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>}
+      <Card.Heading>{label ?? 'Untitled'}</Card.Heading>
+      {snippet && <Snippet text={snippet} match={match} />}
+    </Card.StaticRoot>
+  );
+});
+
 export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) => {
   let content = <>{text}</>;
   if (match) {
@@ -36,51 +81,3 @@ export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) =
 
   return <span className='text-xs mb-1 line-clamp-3 text-neutral-300'>{content}</span>;
 };
-
-export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
-
-export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
-  const { id, objectType, label, snippet, match, selected, onSelect } = item;
-
-  return (
-    <Card.StaticRoot
-      ref={forwardRef}
-      classNames={['mx-2 mt-2 cursor-pointer', selected && '!bg-activeSurface', ghostHover]}
-      onClick={() => onSelect?.(id)}
-    >
-      {objectType && (
-        <>
-          <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>
-        </>
-      )}
-      <Card.Heading>{label ?? 'Untitled'}</Card.Heading>
-      {snippet && <Snippet text={snippet} match={match} />}
-    </Card.StaticRoot>
-  );
-});
-
-export type SearchResultsProps = {
-  match?: RegExp;
-  items: SearchResult[];
-  selected?: string;
-  onSelect?: (id: string) => void;
-};
-
-// TODO(burdon): Key cursor up/down.
-export const SearchResults = ({ items, selected, onSelect }: SearchResultsProps) => {
-  return (
-    <div className='flex flex-col grow overflow-y-auto'>
-      <div className='flex flex-col'>
-        {items.map((item) => (
-          <SearchItem
-            key={item.id}
-            type={SEARCH_RESULT}
-            {...item}
-            onSelect={onSelect}
-            selected={selected === item.id}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

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

@@ -2,26 +2,26 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { type Meta } from '@storybook/react-vite';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { Searchbar } from './Searchbar';
 
-import { Searchbar, type SearchbarProps } from './Searchbar';
-
-const meta: Meta<SearchbarProps> = {
+const meta = {
   title: 'plugins/plugin-search/Searchbar',
   component: Searchbar,
   decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof Searchbar>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     placeholder: 'Search...',
   },

package/src/components/Searchbar/Searchbar.tsx

@@ -2,66 +2,61 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
-import { Input, type TextInputProps, Icon } from '@dxos/react-ui';
+import { Input, type TextInputProps, type ThemedClassName, Toolbar, useControlledState } from '@dxos/react-ui';
 
-export type SearchbarProps = Pick<TextInputProps, 'variant' | 'placeholder'> & {
-  classes?: {
-    root?: string;
-    input?: string;
-  };
-  value?: string;
-  onChange?: (text?: string) => void;
-  onSubmit?: (text?: string) => void;
-  delay?: number;
-};
+export type SearchbarProps = ThemedClassName<
+  Pick<TextInputProps, 'variant' | 'placeholder'> & {
+    delay?: number;
+    value?: string;
+    onChange?: (text?: string) => void;
+    onSubmit?: (text?: string) => void;
+  }
+>;
 
-export const Searchbar = ({ classes, variant, placeholder, value, onChange, onSubmit }: SearchbarProps) => {
+export const Searchbar = ({ classNames, variant, placeholder, value, onChange, onSubmit }: SearchbarProps) => {
+  const [text, setText] = useControlledState(value, onChange);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [text, setText] = useState(value);
-  useEffect(() => {
-    setText(value);
-  }, [value]);
-  const handleChange = (text?: string) => {
-    setText(text);
-    onChange?.(text);
-  };
 
-  const handleReset = () => {
-    handleChange(undefined);
-    inputRef.current?.focus();
-  };
+  const handleWindowKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'f' && event.metaKey && event.shiftKey) {
+        inputRef.current?.focus();
+      }
+    },
+    [inputRef],
+  );
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter':
-        onSubmit?.(text);
-        break;
-      case 'Escape':
-        handleReset();
-        break;
-    }
-  };
+  useEffect(() => {
+    window.addEventListener('keydown', handleWindowKeyDown);
+    return () => window.removeEventListener('keydown', handleWindowKeyDown);
+  }, [handleWindowKeyDown]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      switch (event.key) {
+        case 'Enter':
+          onSubmit?.(text);
+          break;
+      }
+    },
+    [text, onSubmit],
+  );
 
   return (
-    <div className='flex shrink-0w-full items-center pli-1 pbs-1'>
+    <Toolbar.Root classNames={classNames}>
       <Input.Root>
         <Input.TextInput
           ref={inputRef}
           placeholder={placeholder}
+          autoFocus
           variant={variant}
           value={text ?? ''}
-          classNames={['pl-3 pr-10', classes?.input]}
-          onChange={({ target }) => handleChange(target.value)}
+          onChange={({ target }) => setText(target.value)}
           onKeyDown={handleKeyDown}
         />
-
-        {/* TODO(burdon): Margin should be density specific. */}
-        <div role='button' className='-ml-7 p-0 cursor-pointer' onClick={handleReset}>
-          <Icon icon='ph--magnifying-glass--regular' size={5} />
-        </div>
       </Input.Root>
-    </div>
+    </Toolbar.Root>
   );
 };

package/src/hooks/index.ts

@@ -3,5 +3,7 @@
 //
 
 export * from './sync';
+
 export * from './useGlobalSearch';
 export * from './useSearchResults';
+export * from './useWebSearch';

package/src/hooks/sync.test.ts

@@ -5,7 +5,7 @@
 import { describe, expect, test } from 'vitest';
 
 import { Client } from '@dxos/client';
-import { Obj, Filter, Type } from '@dxos/echo';
+import { Filter, Obj, Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 
 import { filterObjectsSync } from './sync';

package/src/hooks/sync.ts

@@ -2,10 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Schema, SchemaAST } from 'effect';
+import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 
 import { Obj } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
+import { Text } from '@dxos/schema';
 
 import { type SearchResult } from '../types';
 
@@ -45,7 +46,7 @@ export const filterObjectsSync = <T extends Record<string, any>>(objects: T[], m
 
   return objects.reduce<SearchResult[]>((results, object) => {
     // TODO(burdon): Hack to ignore Text objects.
-    if (object instanceof DataType.Text) {
+    if (object instanceof Text.Text) {
       return results;
     }
 
@@ -111,7 +112,7 @@ const getKeys = (object: Record<string, unknown>): string[] => {
 export const mapObjectToTextFields = <T extends Record<string, unknown>>(object: T): TextFields => {
   return getKeys(object).reduce<TextFields>((fields, key) => {
     const value = object[key] as any;
-    if (typeof value === 'string' || value instanceof DataType.Text) {
+    if (typeof value === 'string' || value instanceof Text.Text) {
       try {
         fields[key] = String(value);
       } catch (err) {

package/src/hooks/useGlobalSearch.tsx

@@ -2,13 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { filterObjectsSync, queryStringToMatch } from './sync';
 import { type SearchResult } from '../types';
 
+import { filterObjectsSync, queryStringToMatch } from './sync';
+
 type SearchContextType = {
   match?: RegExp;
   setMatch?: (text?: string) => void;

package/src/hooks/useSearchResults.ts

@@ -5,7 +5,7 @@
 import { yieldOrContinue } from 'main-thread-scheduling';
 import { useEffect, useState } from 'react';
 
-import { DataType } from '@dxos/schema';
+import { Text } from '@dxos/schema';
 
 // TODO(thure): Deprecate search-sync, move still-relevant utilities elsewhere (here, probably).
 import { mapObjectToTextFields, queryStringToMatch } from './sync';
@@ -20,7 +20,7 @@ export const filterObjects = async <T extends Record<string, any>>(
   }
   await Promise.all(
     objects
-      .filter((object) => !(object instanceof DataType.Text))
+      .filter((object) => !(object instanceof Text.Text))
       .map(async (object) => {
         await yieldOrContinue('interactive');
         const fields = mapObjectToTextFields<T>(object);
@@ -47,14 +47,14 @@ export const useSearchResults = <T extends Record<string, any>>(
 
   useEffect(() => {
     setPending(!!(objects && queryString));
-    const timeoutId = setTimeout(async () => {
+    const timeout = setTimeout(async () => {
       const nextResults =
         objects && queryString ? await filterObjects(objects, queryStringToMatch(queryString)) : new Map();
       setResults(nextResults);
       setPending(false);
     }, delay);
 
-    return () => clearTimeout(timeoutId);
+    return () => clearTimeout(timeout);
   }, [queryString, objects]);
 
   return [pending, results];

package/src/hooks/useWebSearch.ts

@@ -5,15 +5,15 @@
 import { useState } from 'react';
 
 import { EXA_API_KEY } from '@dxos/ai/testing';
-import { todo } from '@dxos/debug';
 import { Obj } from '@dxos/echo';
 import { type DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { getIconAnnotation } from '@dxos/schema';
-import { Testing } from '@dxos/schema/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
 import { search } from '../search';
 import { type SearchResult } from '../types';
+
 import { getStringProperty } from './sync';
 
 export const useWebSearch = ({ query, context }: { query?: string; context?: string }) => {
@@ -27,8 +27,7 @@ export const useWebSearch = ({ query, context }: { query?: string; context?: str
       const results = await search({
         query,
         context,
-        schema: [Testing.Project, Testing.Organization, Testing.Contact],
-        AiService: todo(),
+        schema: [TestSchema.Project, TestSchema.Organization, TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 

package/src/meta.ts

@@ -3,15 +3,18 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const SEARCH_PLUGIN = 'dxos.org/plugin/search';
-export const SEARCH_RESULT = `${SEARCH_PLUGIN}/result`;
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: SEARCH_PLUGIN,
+  id: 'dxos.org/plugin/search',
   name: 'Search',
-  description: 'Search ECHO spaces for content.',
+  description: trim`
+    Full-text search engine for finding content across all spaces and object types.
+    Quickly locate documents, tables, and other objects with instant results and relevance ranking.
+  `,
   icon: 'ph--magnifying-glass--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-search',
   tags: ['labs'],
 };
+
+export const SEARCH_RESULT = `${meta.id}/result`;

package/src/search/exa.test.ts

@@ -5,9 +5,8 @@
 import { describe, test } from 'vitest';
 
 import { EXA_API_KEY } from '@dxos/ai/testing';
-import { todo } from '@dxos/debug';
 import { log } from '@dxos/log';
-import { Testing } from '@dxos/schema/testing';
+import { TestSchema } from '@dxos/schema/testing';
 
 import { search } from './exa';
 
@@ -16,8 +15,7 @@ describe.skip('Search', () => {
     test.skip('contacts', { timeout: 60_000 }, async () => {
       const objects = await search({
         query: 'top executives at google',
-        schema: [Testing.Contact],
-        AiService: null as any, // TODO: Implement AiService
+        schema: [TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -27,8 +25,7 @@ describe.skip('Search', () => {
     test.skip('contacts projects and orgs', { timeout: 60_000 }, async () => {
       const objects = await search({
         query: 'top executives at google',
-        schema: [Testing.Contact, Testing.Project, Testing.Organization],
-        AiService: todo(),
+        schema: [TestSchema.Person, TestSchema.Project, TestSchema.Organization],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -38,8 +35,7 @@ describe.skip('Search', () => {
     test('a19z org, projects they invest in and team', { timeout: 60_000 }, async () => {
       const objects = await search({
         query: 'a19z org, projects they invest in and team',
-        schema: [Testing.Project, Testing.Organization, Testing.Contact],
-        AiService: todo(),
+        schema: [TestSchema.Project, TestSchema.Organization, TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -49,8 +45,7 @@ describe.skip('Search', () => {
     test('companies building CRDTs', { timeout: 60_000 }, async () => {
       const objects = await search({
         query: 'companies building CRDTs',
-        schema: [Testing.Project, Testing.Organization, Testing.Contact],
-        AiService: todo(),
+        schema: [TestSchema.Project, TestSchema.Organization, TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -62,8 +57,7 @@ describe.skip('Search', () => {
     test('composer context-based search', { timeout: 60_000 }, async () => {
       const objects = await search({
         context: COMPOSER_DXOS_DOC,
-        schema: [Testing.Project, Testing.Organization, Testing.Contact],
-        AiService: todo(),
+        schema: [TestSchema.Project, TestSchema.Organization, TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -73,8 +67,7 @@ describe.skip('Search', () => {
     test.only('edge architecture', { timeout: 60_000 }, async () => {
       const objects = await search({
         context: EDGE_ARCHITECTURE_DOC,
-        schema: [Testing.Project, Testing.Organization, Testing.Contact],
-        AiService: todo(),
+        schema: [TestSchema.Project, TestSchema.Organization, TestSchema.Person],
         exaApiKey: EXA_API_KEY,
       });
 
@@ -83,9 +76,7 @@ describe.skip('Search', () => {
   });
 });
 
-// TODO(dmaretskyi): Import as txt.
 const COMPOSER_DXOS_DOC = `
-
 ![img](https://dxos.network/dxos-logotype-blue.png)
 # Welcome to Composer by DXOS
 
@@ -93,7 +84,7 @@ const COMPOSER_DXOS_DOC = `
 
 Composer is an extensible application that includes familiar components such as documents, diagrams, and tables. It leverages DXOS — a full stack framework for building collaborative local-first applications.
 
-With our upcoming SDK, you'll be able to build custom plugins, leverage external APIs and integrate with LLMs. All inside of a private collaborative workspace.
+With our SDK, you'll be able to build custom plugins, leverage external APIs and integrate with LLMs. All inside of a private collaborative workspace.
 
 ## Disclaimer
 
@@ -219,6 +210,4 @@ const EDGE_ARCHITECTURE_DOC = `
 - given the fq id of the deployment object, anyone in the space should be able to invoke the function even if they don't have access to the object itself
 
 ### Service Side
-
-
 `;