@dxos/plugin-automation 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/src/components/Box/StatusLine.tsx

@@ -1,76 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useRef, useState } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-const emptyLines: string[] = [];
-
-export type StatusLineProps = ThemedClassName<{
-  line?: number;
-  lines?: string[];
-  transition?: number;
-  advance?: number;
-  autoAdvance?: boolean;
-}>;
-
-export const StatusLine = ({
-  classNames,
-  line = -1,
-  lines = emptyLines,
-  transition = 300,
-  advance = 1_000,
-  autoAdvance,
-}: StatusLineProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [currentLine, setCurrentLine] = useState(line);
-  useEffect(() => {
-    setCurrentLine(line);
-  }, [line]);
-
-  useEffect(() => {
-    if (!autoAdvance) {
-      return;
-    }
-
-    const next = () => {
-      setCurrentLine((prev) => {
-        if (prev >= lines.length - 1) {
-          clearInterval(interval);
-          return prev;
-        }
-
-        return prev + 1;
-      });
-    };
-
-    next();
-    const interval = setInterval(next, advance);
-
-    return () => clearInterval(interval);
-  }, [lines.length, autoAdvance, advance]);
-
-  useEffect(() => {
-    if (containerRef.current) {
-      containerRef.current.style.transition = `transform ${transition}ms ease-in-out`;
-      containerRef.current.style.transform = `translateY(-${currentLine * 24}px)`;
-    }
-  }, [currentLine]);
-
-  return (
-    <div className={mx('relative h-[24px] overflow-hidden', classNames)}>
-      <div ref={containerRef} className='h-[24px]'>
-        <div className='flex flex-col'>
-          {lines.map((line, i) => (
-            <div key={i} className={mx('flex h-[24px] items-center')}>
-              <span className='truncate'>{line}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

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

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

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

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

@@ -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));
-    },
-  },
-};