@dxos/plugin-automation 0.7.5-labs.ea4b4c2 → 0.7.5-labs.f400bbc

package/src/components/Box/ToggleContainer.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
-
-import { Icon, useControlledState, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-export type ToggleContainerProps = ThemedClassName<
-  PropsWithChildren<{
-    title?: string | JSX.Element;
-    icon?: JSX.Element;
-    open?: boolean;
-    duration?: number;
-    /** Should shrink the width when closed. */
-    shrinkX?: boolean;
-    onChangeOpen?: (open: boolean) => void;
-  }>
->;
-
-export const ToggleContainer = ({
-  classNames,
-  title,
-  icon,
-  open: _open,
-  duration = 400,
-  shrinkX = false,
-  children,
-  onChangeOpen,
-}: ToggleContainerProps) => {
-  const [open, setOpen] = useControlledState(_open);
-  const [expandX, setExpandX] = useState(shrinkX ? open : true);
-  const [expandY, setExpandY] = useState(open);
-
-  useEffect(() => {
-    let t: NodeJS.Timeout;
-    if (open) {
-      if (shrinkX) {
-        setExpandX(true);
-      }
-      t = setTimeout(
-        () => {
-          setExpandY(true);
-        },
-        shrinkX ? duration : 0,
-      );
-    } else {
-      setExpandY(false);
-      if (shrinkX) {
-        t = setTimeout(() => {
-          setExpandX(false);
-        }, duration);
-      }
-    }
-
-    return () => clearTimeout(t);
-  }, [open]);
-
-  const handleToggle = () => {
-    if (onChangeOpen) {
-      onChangeOpen(!open);
-    } else {
-      setOpen((open) => !open);
-    }
-  };
-
-  return (
-    <div className={mx('overflow-hidden', classNames)}>
-      {title && (
-        <div
-          className='flex gap-1 py-1 items-center text-sm text-subdued cursor-pointer select-none'
-          onClick={handleToggle}
-        >
-          <div className='flex w-[24px] h-[24px] items-center justify-center'>
-            <Icon
-              size={4}
-              icon={'ph--caret-right--regular'}
-              style={{ transitionDuration: `${shrinkX ? duration * 2 : duration}ms` }}
-              classNames={['transition transition-transform ease-in-out', open ? 'rotate-90' : 'transform-none']}
-            />
-          </div>
-          <div className='flex-1 pis-1 pie-1 truncate'>{title}</div>
-          {icon}
-        </div>
-      )}
-      <div
-        style={{ transitionDuration: `${duration}ms` }}
-        className={mx(
-          'grid transition-[grid-template-columns] ease-in-out',
-          expandX ? 'grid-cols-[1fr]' : 'grid-cols-[0fr]',
-        )}
-      >
-        <div className='overflow-hidden'>
-          <div
-            style={{ transitionDuration: `${duration}ms` }}
-            className={mx(
-              'grid transition-[grid-template-rows] ease-in-out',
-              expandY ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
-            )}
-          >
-            <div className={mx('flex overflow-hidden transition-opacity')}>{children}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/Box/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './StatusLine';
-export * from './Tabbed';
-export * from './ToggleContainer';

package/src/components/ChatContainer/ChatContainer.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { invariant } from '@dxos/invariant';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { useChatProcessor, useMessageQueue } from '../../hooks';
-import { type AIChatType } from '../../types';
-import { Thread } from '../Thread';
-
-export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }) => {
-  const processor = useChatProcessor(chat);
-  const messageQueue = useMessageQueue(chat);
-  const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
-
-  const handleSubmit = useCallback(
-    async (text: string) => {
-      if (processor.streaming.value) {
-        await processor.cancel();
-      }
-
-      invariant(messageQueue);
-      await processor.request(text, {
-        history: messageQueue.items,
-        onComplete: (messages) => messageQueue.append(messages),
-      });
-    },
-    [processor, messageQueue],
-  );
-
-  const handleStop = useCallback(() => {
-    if (processor.streaming.value) {
-      void processor.cancel();
-    }
-  }, [processor]);
-
-  return (
-    <StackItem.Content toolbar={false} role={role}>
-      <Thread
-        messages={messages}
-        streaming={processor.streaming.value}
-        collapse={true}
-        onSubmit={handleSubmit}
-        onSuggest={handleSubmit}
-        onStop={handleStop}
-      />
-    </StackItem.Content>
-  );
-};

package/src/components/ChatContainer/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { ChatContainer } from './ChatContainer';
-
-export * from './ChatContainer';
-export default ChatContainer;

package/src/components/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { MarkdownViewer } from './MarkdownViewer';
-
-faker.seed(0);
-
-const meta: Meta<typeof MarkdownViewer> = {
-  title: 'plugins/plugin-automation/MarkdownViewer',
-  component: MarkdownViewer,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MarkdownViewer>;
-
-const content = `
-# Hello, world!
-
-${faker.lorem.paragraphs(1)}
-
-Here's a JSON block:
-
-~~~json
-{
-  "hello": "world"
-}
-~~~
-
-And some code:
-
-~~~ts
-const App = () => {
-  const title = 'Hello, world!';
-  return <div>{title}</div>;
-};
-~~~
-
-${faker.lorem.paragraphs(1)}
-`;
-
-export const Default: Story = {
-  args: {
-    classNames: 'w-[500px] border border-border rounded-md p-4',
-    content,
-  },
-};

package/src/components/MarkdownViewer/MarkdownViewer.tsx

@@ -1,79 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC } from 'react';
-import ReactMarkdown from 'react-markdown';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-import { omit } from '@dxos/util';
-
-type MarkdownViewerProps = ThemedClassName<{
-  content?: string;
-}>;
-
-/**
- * Transform text into react elements.
- *
- * https://github.com/remarkjs/react-markdown
- * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.
- */
-// TODO(burdon): Styles.
-// TODO(burdon): Factor out (react-ui-syntax-highlighter).
-export const MarkdownViewer: FC<MarkdownViewerProps> = ({ classNames, content = '' }) => {
-  return (
-    <div className={mx('space-y-2', classNames)}>
-      <ReactMarkdown
-        components={{
-          a: ({ node, children, href, ...props }) => (
-            <a
-              href={href}
-              className='text-primary-500 hover:text-primary-500'
-              target='_blank'
-              rel='noopener noreferrer'
-              {...props}
-            >
-              {children}
-            </a>
-          ),
-          ol: ({ node, children, ...props }) => (
-            <ol className='leading-tight list-decimal pl-6' {...omit(props, ['ordered'])}>
-              {children}
-            </ol>
-          ),
-          ul: ({ node, children, ...props }) => (
-            <ul className='leading-tight list-disc pl-6' {...omit(props, ['ordered'])}>
-              {children}
-            </ul>
-          ),
-          li: ({ node, children, ...props }) => (
-            <li className='' {...omit(props, ['ordered'])}>
-              {children}
-            </li>
-          ),
-          blockquote: ({ node, children, ...props }) => (
-            <blockquote className='border-l-4 border-primary-500 pl-4 my-4 text-primary-500' {...props}>
-              {children}
-            </blockquote>
-          ),
-          code: ({ children, className }) => {
-            const [_, language] = /language-(\w+)/.exec(className || '') || [];
-            return (
-              <SyntaxHighlighter PreTag='div' language={language} className='p-0'>
-                {children}
-              </SyntaxHighlighter>
-            );
-          },
-        }}
-      >
-        {content}
-      </ReactMarkdown>
-    </div>
-  );
-};
-
-// const Cursor = () => {
-//   return <span className='animate-[pulse_1s_steps(1)_infinite] text-primary-500'>▊</span>;
-// };

package/src/components/MarkdownViewer/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './MarkdownViewer';

package/src/components/Prompt/Prompt.stories.tsx

@@ -1,50 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Prompt } from './Prompt';
-
-const meta: Meta<typeof Prompt> = {
-  title: 'plugins/plugin-automation/Prompt',
-  component: Prompt,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Prompt>;
-
-export const Default: Story = {
-  args: {
-    classNames: 'w-96 p-4 rounded outline outline-gray-200',
-    autoFocus: true,
-    onEnter: (text) => {
-      console.log('onEnter', text);
-    },
-    onSuggest: (text) => {
-      const trimmed = text.trim().toLowerCase();
-      if (trimmed.length < 2) {
-        return [];
-      }
-
-      const suggestions = [
-        'Create a CRM',
-        'Create a new project',
-        'Find flights to Tokyo',
-        "Let's play chess",
-        'Show me Paris on a map',
-      ];
-
-      return suggestions.filter((s) => s.toLowerCase().startsWith(text));
-    },
-  },
-};

package/src/components/Prompt/Prompt.tsx

@@ -1,36 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createThemeExtensions,
-  useTextEditor,
-  type UseTextEditorProps,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-import { createAutocompleteExtension, type AutocompleteOptions } from './prompt-autocomplete';
-
-export type PromptProps = ThemedClassName<AutocompleteOptions & Pick<UseTextEditorProps, 'autoFocus'>>;
-
-export const Prompt = ({ classNames, autoFocus, onEnter, onSuggest }: PromptProps) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor({
-    autoFocus,
-    extensions: [
-      createBasicExtensions({
-        bracketMatching: false,
-        lineWrapping: false,
-        placeholder: 'Ask a question...',
-      }),
-      createThemeExtensions({ themeMode }),
-      createAutocompleteExtension({ onEnter, onSuggest }),
-    ],
-  });
-
-  return <div ref={parentRef} className={mx(classNames)} />;
-};

package/src/components/Prompt/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './Prompt';

package/src/components/Prompt/prompt-autocomplete.ts

@@ -1,200 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Prec, type Extension } from '@codemirror/state';
-import {
-  EditorView,
-  Decoration,
-  ViewPlugin,
-  keymap,
-  type DecorationSet,
-  type ViewUpdate,
-  WidgetType,
-} from '@codemirror/view';
-
-export type AutocompleteOptions = {
-  /**
-   * Callback triggered when Enter is pressed.
-   * @param text The current text in the editor
-   */
-  onEnter?: (text: string) => void;
-
-  /**
-   * Function that returns a list of suggestions based on the current text.
-   * @param text The current text before the cursor
-   * @returns Array of suggestion strings
-   */
-  onSuggest: (text: string) => string[];
-};
-
-class InlineSuggestionWidget extends WidgetType {
-  constructor(private suffix: string) {
-    super();
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.textContent = this.suffix;
-    span.className = 'cm-inline-suggestion';
-    return span;
-  }
-
-  override eq(other: InlineSuggestionWidget) {
-    return other.suffix === this.suffix;
-  }
-}
-
-/**
- * Creates an autocomplete extension that shows inline suggestions.
- * Pressing Tab will complete the suggestion.
- */
-export const createAutocompleteExtension = ({ onEnter, onSuggest }: AutocompleteOptions): Extension => {
-  const suggestionPlugin = ViewPlugin.fromClass(
-    class {
-      _decorations: DecorationSet;
-      _currentSuggestion: string | null = null;
-
-      constructor(view: EditorView) {
-        this._decorations = this.computeDecorations(view);
-      }
-
-      update(update: ViewUpdate) {
-        if (update.docChanged || update.selectionSet) {
-          this._decorations = this.computeDecorations(update.view);
-        }
-      }
-
-      private computeDecorations(view: EditorView): DecorationSet {
-        const text = view.state.doc.toString();
-        const suggestions = onSuggest(text);
-        if (!suggestions.length) {
-          this._currentSuggestion = null;
-          return Decoration.none;
-        }
-
-        // Get the first suggestion.
-        this._currentSuggestion = suggestions[0];
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return Decoration.none;
-        }
-
-        // Always show ghost text at the end of the document.
-        return Decoration.set([
-          Decoration.widget({
-            widget: new InlineSuggestionWidget(suffix),
-            side: 1,
-          }).range(view.state.doc.length),
-        ]);
-      }
-
-      completeSuggestion(view: EditorView): boolean {
-        if (!this._currentSuggestion) {
-          return false;
-        }
-
-        const text = view.state.doc.toString();
-        const suffix = this._currentSuggestion.slice(text.length);
-        if (!suffix) {
-          return false;
-        }
-
-        view.dispatch({
-          changes: {
-            from: view.state.doc.length,
-            insert: suffix,
-          },
-          selection: {
-            anchor: view.state.doc.length + suffix.length,
-          },
-        });
-
-        return true;
-      }
-    },
-    {
-      decorations: (v) => v._decorations,
-    },
-  );
-
-  return [
-    suggestionPlugin,
-    EditorView.theme({
-      '.cm-inline-suggestion': {
-        opacity: 0.4,
-      },
-    }),
-
-    // Accept the current suggestion.
-    Prec.highest(
-      keymap.of([
-        {
-          key: 'Tab',
-          run: (view) => {
-            const plugin = view.plugin(suggestionPlugin);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-        {
-          key: 'ArrowRight',
-          run: (view) => {
-            // Only complete if cursor is at the end
-            if (view.state.selection.main.head !== view.state.doc.length) {
-              return false;
-            }
-
-            const plugin = view.plugin(suggestionPlugin);
-            return plugin?.completeSuggestion(view) ?? false;
-          },
-        },
-        {
-          key: 'Enter',
-          preventDefault: true,
-          run: (view) => {
-            const text = view.state.doc.toString();
-            if (onEnter) {
-              onEnter(text);
-              // Clear the document after calling onEnter
-              view.dispatch({
-                changes: {
-                  from: 0,
-                  to: view.state.doc.length,
-                  insert: '',
-                },
-              });
-              return true;
-            }
-            return false;
-          },
-        },
-        {
-          key: 'Shift-Enter',
-          run: (view) => {
-            view.dispatch({
-              changes: {
-                from: view.state.selection.main.head,
-                insert: '\n',
-              },
-            });
-            return true;
-          },
-        },
-        {
-          key: 'Escape',
-          run: (view) => {
-            // Clear the entire document.
-            view.dispatch({
-              changes: {
-                from: 0,
-                to: view.state.doc.length,
-                insert: '',
-              },
-            });
-            return true;
-          },
-        },
-      ]),
-    ),
-  ];
-};

package/src/components/PromptEditor/PromptEditor.stories.tsx

@@ -1,64 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { create, makeRef } from '@dxos/live-object';
-import { useClient } from '@dxos/react-client';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { PromptEditor } from './PromptEditor';
-import translations from '../../translations';
-import { ChainPromptType, ChainType } from '../../types';
-
-const template = [
-  '# Comment',
-  '',
-  'You are a machine that is an expert chess player.',
-  'The move history of the current game is: {history}',
-  'If asked to suggest a move explain why it is a good move.',
-  '',
-  '---',
-  '',
-  '{input}',
-].join('\n');
-
-const Render = () => {
-  const client = useClient();
-  const [chain] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(
-      create(ChainType, {
-        prompts: [makeRef(create(ChainPromptType, { command: 'test', template, inputs: [] }))],
-      }),
-    );
-  });
-
-  return (
-    <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <PromptEditor prompt={chain.prompts![0]!.target!} />
-    </div>
-  );
-};
-
-export const Default = {};
-
-const meta: Meta = {
-  title: 'plugins/plugin-automation/PromptEditor',
-  render: Render,
-  decorators: [
-    withClientProvider({ createIdentity: true, createSpace: true, types: [ChainType, ChainPromptType] }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center m-2' }),
-    withTheme,
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;