@dxos/plugin-automation 0.7.4 → 0.7.5-labs.401163d

package/src/components/Box/Tabbed.stories.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme, withSignals } from '@dxos/storybook-utils';
+
+import { Tabs } from './Tabbed';
+import { ToggleContainer } from './ToggleContainer';
+
+const content = Array.from({ length: 4 }, (_, i) => ({
+  title: faker.lorem.paragraph(),
+  content: faker.lorem.paragraphs(3),
+}));
+
+const meta: Meta<typeof Tabs> = {
+  title: 'plugins/plugin-automation/Tabbed',
+  component: Tabs,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(0);
+    return (
+      <div className='flex flex-col w-[500px] p-4 bg-attention'>
+        <ToggleContainer
+          open
+          title={content[selected].title}
+          classNames='p-1 rounded-lg bg-baseSurface border border-neutral-500'
+        >
+          <div className='flex w-full overflow-hidden'>
+            <Tabs length={content.length} selected={selected} onSelect={setSelected} />
+            <div className='flex-1 pis-2 pie-2 overflow-y-auto'>
+              <div>{content[selected].content}</div>
+            </div>
+          </div>
+        </ToggleContainer>
+      </div>
+    );
+  },
+};

package/src/components/Box/Tabbed.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+const numbers = [
+  { regular: 'ph--number-circle-zero--thin', active: 'ph--number-circle-zero--duotone' },
+  { regular: 'ph--number-circle-one--thin', active: 'ph--number-circle-one--duotone' },
+  { regular: 'ph--number-circle-two--thin', active: 'ph--number-circle-two--duotone' },
+  { regular: 'ph--number-circle-three--thin', active: 'ph--number-circle-three--duotone' },
+  { regular: 'ph--number-circle-four--thin', active: 'ph--number-circle-four--duotone' },
+  { regular: 'ph--number-circle-five--thin', active: 'ph--number-circle-five--duotone' },
+  { regular: 'ph--number-circle-six--thin', active: 'ph--number-circle-six--duotone' },
+  { regular: 'ph--number-circle-seven--thin', active: 'ph--number-circle-seven--duotone' },
+  { regular: 'ph--number-circle-eight--thin', active: 'ph--number-circle-eight--duotone' },
+  { regular: 'ph--number-circle-nine--thin', active: 'ph--number-circle-nine--duotone' },
+];
+
+export type TabsProps = ThemedClassName<{
+  length: number;
+  selected?: number;
+  onSelect?: (index: number) => void;
+}>;
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ classNames, length, selected = 0, onSelect }, forwardedRef) => {
+    return (
+      <div
+        ref={forwardedRef}
+        className={mx('flex flex-col overflow-hidden outline-none', classNames)}
+        tabIndex={-1}
+        onKeyDown={(ev) => {
+          // TODO(burdon): Focus when open Toggle.
+          switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowRight': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (selected < length - 1) {
+                onSelect?.(selected + 1);
+              }
+              break;
+            }
+            case 'ArrowUp':
+            case 'ArrowLeft': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (selected > 0) {
+                onSelect?.(selected - 1);
+              }
+              break;
+            }
+
+            case 'Enter': {
+              ev.preventDefault();
+              ev.stopPropagation();
+              onSelect?.(selected);
+              break;
+            }
+          }
+        }}
+      >
+        {Array.from({ length }).map((_, i) => {
+          const icon = numbers[i + 1];
+          return (
+            <div
+              key={i}
+              className={mx(
+                'relative flex w-[24px] h-[28px] justify-center cursor-pointer text-subdued',
+                selected === i && '!text-cyan-550 !dark:text-cyan-300',
+              )}
+            >
+              {i < length - 1 && <div className='absolute left-[11.5px] top-[21px] w-[1px] h-[10px] bg-neutral-400' />}
+              <Icon
+                icon={selected === i ? icon.regular : icon.regular}
+                classNames='z-10 !p-0 !w-[24px] !h-[24px] outline-none'
+                onClick={() => onSelect?.(i)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/components/Box/ToggleContainer.stories.tsx

@@ -0,0 +1,110 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { Icon, Input, Toolbar } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme, withSignals } from '@dxos/storybook-utils';
+
+import { ToggleContainer, type ToggleContainerProps } from './ToggleContainer';
+import { MarkdownViewer } from '../MarkdownViewer';
+
+class Generator {
+  private readonly _current = signal<string>(faker.lorem.sentence(5));
+  private readonly _lines = signal<string[]>([]);
+  private _running: NodeJS.Timeout | undefined;
+
+  readonly count = computed(() => this._lines.value.length);
+  readonly text: ReadonlySignal<string[]> = computed(() => [...this._lines.value, this._current.value]);
+
+  start() {
+    this.stop();
+    this._running = setInterval(() => {
+      if (this._current.value.length > 0) {
+        this._current.value += ' ';
+      }
+      this._current.value += faker.lorem.words(Math.ceil(Math.random() * 2));
+      if (Math.random() > 0.95) {
+        this._lines.value = [...this._lines.value, this._current.value + '.'];
+        this._current.value = '';
+      }
+    }, 100);
+  }
+
+  stop() {
+    if (this._running) {
+      clearInterval(this._running);
+      this._running = undefined;
+    }
+  }
+}
+
+const Render = ({ shrinkX, ...props }: ToggleContainerProps) => {
+  const generator = useMemo(() => new Generator(), []);
+  const [running, setRunning] = useState(false);
+  useEffect(() => {
+    if (running) {
+      generator.start();
+    } else {
+      generator.stop();
+    }
+  }, [running]);
+
+  return (
+    <div className='flex flex-col w-[500px]'>
+      <Toolbar.Root classNames='p-4'>
+        <Input.Root>
+          <Input.Switch checked={running} onCheckedChange={(checked) => setRunning(checked)} />
+        </Input.Root>
+        <div className='grow' />
+        <div>{generator.count.value}</div>
+      </Toolbar.Root>
+      <div className='flex p-4'>
+        <div className={mx('border border-border rounded-md p-2', !shrinkX && 'w-full')}>
+          <ToggleContainer
+            {...props}
+            shrinkX={shrinkX}
+            icon={
+              running ? (
+                <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued ml-2 animate-spin' size={4} />
+              ) : undefined
+            }
+          >
+            <MarkdownViewer classNames='text-sm' content={generator.text.value.join('\n\n')} />
+          </ToggleContainer>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ToggleContainer> = {
+  title: 'plugins/plugin-automation/ToggleContainer',
+  component: ToggleContainer,
+  render: Render,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center bg-baseSurface' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleContainer>;
+
+export const Default: Story = {
+  args: {
+    title: 'Markdown',
+  },
+};
+
+export const Shrink: Story = {
+  args: {
+    title: 'Markdown',
+    shrinkX: true,
+  },
+};

package/src/components/Box/ToggleContainer.tsx

@@ -0,0 +1,108 @@
+//
+// 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

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

package/src/components/ChatContainer/ChatContainer.tsx

@@ -0,0 +1,52 @@
+//
+// 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

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

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

@@ -0,0 +1,56 @@
+//
+// 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

@@ -0,0 +1,79 @@
+//
+// 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

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

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

@@ -0,0 +1,50 @@
+//
+// 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

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

package/src/components/Prompt/index.ts

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