@dxos/plugin-automation 0.7.5-labs.f5080a1 → 0.7.5-main.5ae2ba8

package/src/components/Thread/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/Thread/Tabbed.stories.tsx

@@ -1,52 +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
-          title={content[selected].title}
-          classNames='p-1 rounded-lg bg-baseSurface border border-neutral-500'
-          toggle
-          defaultOpen
-        >
-          <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/Thread/Tabbed.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC } 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 }>;
-
-// TODO(burdon): Key up/down.
-export const Tabs: FC<TabsProps> = ({ classNames, length, selected = 0, onSelect }) => {
-  return (
-    <div
-      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': {
-            if (selected < length - 1) {
-              onSelect?.(selected + 1);
-            }
-            break;
-          }
-          case 'ArrowUp':
-          case 'ArrowLeft': {
-            if (selected > 0) {
-              onSelect?.(selected - 1);
-            }
-            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-green-500', // TODO(burdon): accent.
-            )}
-          >
-            {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/Thread/Thread.stories.tsx

@@ -1,190 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { type Message } from '@dxos/artifact';
-import { ObjectId } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
-
-import { Thread, type ThreadProps } from './Thread';
-import translations from '../../translations';
-
-faker.seed(1);
-
-const Render = ({ messages: _messages, ...props }: ThreadProps) => {
-  const [streaming, setStreaming] = useState(false);
-  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
-  useEffect(() => {
-    setMessages(_messages ?? []);
-  }, [_messages]);
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
-      const response: Message = {
-        id: ObjectId.random(),
-        role: 'assistant',
-        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
-      };
-      setMessages([...messages, request, response]);
-      setStreaming(true);
-      setTimeout(() => {
-        response.content[0].pending = false;
-        setMessages([
-          ...messages,
-          request,
-          response,
-          {
-            id: ObjectId.random(),
-            role: 'assistant',
-            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
-          },
-        ]);
-        setStreaming(false);
-      }, 3_000);
-    },
-    [messages],
-  );
-
-  return (
-    <div className='flex grow justify-center overflow-center bg-base'>
-      <div className='flex w-[500px] bg-white dark:bg-black'>
-        <Thread {...props} messages={messages} streaming={streaming} onSubmit={handleSubmit} onStop={() => {}} />
-      </div>
-    </div>
-  );
-};
-
-const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-automation/Thread',
-  render: Render,
-  component: Thread,
-  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, tooltips: true })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ThreadProps>;
-
-const TEST_MESSAGES: Message[] = [
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.sentence(5),
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        disposition: 'cot',
-        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
-          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
-          .join('\n'),
-      },
-      {
-        type: 'text',
-        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
-          .map(() => faker.lorem.paragraphs())
-          .join('\n\n'),
-      },
-      {
-        type: 'tool_use',
-        id: '1234',
-        name: 'search',
-        input: {},
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '1234',
-        content: 'This is a tool result.',
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'tool_use',
-        id: '4567',
-        name: 'create',
-        input: {},
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '4567',
-        content: 'This is a tool result.',
-      },
-    ],
-  },
-  {
-    id: ObjectId.random(),
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.paragraphs(1),
-      },
-    ],
-  },
-];
-
-export const Default: Story = {
-  args: {
-    debug: true,
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Input: Story = {
-  args: {
-    streaming: true,
-  },
-};
-
-export const Incremental: Story = {
-  render: () => {
-    const [messages, setMessages] = useState<Message[]>([]);
-    useEffect(() => {
-      let i = 0;
-      const interval = setInterval(() => {
-        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
-        if (i >= TEST_MESSAGES.length) {
-          clearInterval(interval);
-        }
-      }, 2_000);
-
-      return () => clearInterval(interval);
-    }, []);
-
-    return <Render messages={messages} collapse />;
-  },
-};

package/src/components/Thread/Thread.tsx

@@ -1,156 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type KeyboardEventHandler, useCallback, useMemo, useRef, useState } from 'react';
-
-import { type Message } from '@dxos/artifact';
-import { IconButton, Input, useTranslation } from '@dxos/react-ui';
-import { Spinner } from '@dxos/react-ui-sfx';
-import { mx } from '@dxos/react-ui-theme';
-
-import { ScrollContainer, type ScrollController } from './ScrollContainer';
-import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
-import { AUTOMATION_PLUGIN } from '../../meta';
-
-export type ThreadProps = {
-  messages?: Message[];
-  streaming?: boolean;
-  onSubmit?: (message: string) => void;
-  onStop?: () => void;
-} & Pick<ThreadMessageProps, 'collapse' | 'debug' | 'onSuggest' | 'onDelete'>;
-
-// TODO(burdon): Factor out scroll logic.
-export const Thread = ({
-  messages,
-  streaming,
-  collapse,
-  debug,
-  onSubmit,
-  onStop,
-  onSuggest,
-  onDelete,
-}: ThreadProps) => {
-  const { t } = useTranslation(AUTOMATION_PLUGIN);
-  const scroller = useRef<ScrollController>(null);
-
-  const [text, setText] = useState('');
-  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
-    (ev) => {
-      switch (ev.key) {
-        case 'Escape': {
-          setText('');
-          break;
-        }
-
-        case 'Enter': {
-          const value = text.trim();
-          if (value.length > 0) {
-            scroller.current?.scrollToBottom();
-            onSubmit?.(value);
-            setText('');
-          }
-          break;
-        }
-      }
-    },
-    [text],
-  );
-
-  /**
-   * Reduce message blocks into collections of messages that contain related contiguous blocks.
-   * For example, collapse all tool request/response pairs into a single message.
-   */
-  // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
-  const { messages: lines = [] } = useMemo(() => {
-    if (!collapse) {
-      return { messages: messages ?? [] };
-    }
-
-    return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(
-      ({ current, messages }, message) => {
-        let i = 0;
-        for (const block of message.content) {
-          switch (block.type) {
-            case 'tool_use':
-            case 'tool_result': {
-              if (current) {
-                current.content.push(block);
-              } else {
-                current = {
-                  id: [message.id, i].join('_'),
-                  role: message.role,
-                  content: [block],
-                };
-                messages.push(current);
-              }
-              break;
-            }
-
-            case 'text':
-            default: {
-              current = undefined;
-              messages.push({
-                id: [message.id, i].join('_'),
-                role: message.role,
-                content: [block],
-              });
-              break;
-            }
-          }
-
-          i++;
-        }
-
-        return { current, messages };
-      },
-      { messages: [] as Message[] },
-    );
-  }, [messages, collapse]);
-
-  return (
-    <div className='flex flex-col grow overflow-hidden'>
-      <ScrollContainer ref={scroller} classNames='py-2 gap-2 overflow-x-hidden'>
-        {lines.map((message) => (
-          <ThreadMessage
-            key={message.id}
-            classNames='px-4'
-            message={message}
-            collapse={collapse}
-            debug={debug}
-            onSuggest={onSuggest}
-            onDelete={onDelete}
-          />
-        ))}
-      </ScrollContainer>
-
-      {onSubmit && (
-        <div className='flex p-4 gap-3 items-center'>
-          <Spinner active={streaming} />
-          <Input.Root>
-            <Input.TextInput
-              autoFocus
-              classNames='px-2 baseSurface rounded'
-              placeholder={t('chat input placeholder')}
-              value={text}
-              onChange={(ev) => setText(ev.target.value)}
-              onKeyDown={handleKeyDown}
-            />
-          </Input.Root>
-          {onStop && (
-            <IconButton
-              disabled={!streaming}
-              classNames={mx('!p-1 !opacity-20 transition', streaming && '!opacity-80')}
-              variant='ghost'
-              size={5}
-              onClick={onStop}
-              icon='ph--x--regular'
-              label={t('chat stop')}
-              iconOnly
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-};