@dxos/plugin-assistant 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

package/src/components/PromptSettings.tsx

@@ -1,91 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Match, type Schema } from 'effect';
-import React, { type ChangeEvent, useCallback } from 'react';
-
-import { debounce } from '@dxos/async';
-import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
-
-import { ASSISTANT_PLUGIN } from '../meta';
-import { TemplateKinds, type TemplateType, type TemplateKindSchema } from '../types';
-
-export const PromptSettings = ({ template }: { template: TemplateType }) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
-
-  const handleKindChange = useCallback(
-    (value: string) => {
-      const kind = Match.type<string>().pipe(
-        Match.withReturnType<Schema.Schema.Type<typeof TemplateKindSchema>>(),
-        Match.when('always', () => ({ include: 'always' })),
-        Match.when('schema-matching', () => ({ include: 'schema-matching', typename: '' })),
-        Match.when('automatically', () => ({ include: 'automatically', description: '' })),
-        Match.orElse(() => ({ include: 'manual' })),
-      )(value);
-
-      template.kind = kind;
-    },
-    [template],
-  );
-
-  const handleTypenameChange = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      if (template.kind.include === 'schema-matching') {
-        template.kind.typename = event.target.value;
-      }
-    }, 300),
-    [template.kind.include],
-  );
-
-  const handleDescriptionChange = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      if (template.kind.include === 'automatically') {
-        template.kind.description = event.target.value;
-      }
-    }, 300),
-    [template.kind.include],
-  );
-
-  return (
-    <div className='flex flex-col gap-4'>
-      <h2>{t('prompt rules label')}</h2>
-      <Toolbar.Root>
-        <Select.Root value={template.kind.include} onValueChange={handleKindChange}>
-          <Toolbar.Button asChild>
-            <Select.TriggerButton />
-          </Toolbar.Button>
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {TemplateKinds.map((kind) => (
-                  <Select.Option key={kind} value={kind}>
-                    {kind}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-        {template.kind.include === 'schema-matching' && (
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('typename placeholder')}
-              defaultValue={template.kind.typename}
-              onChange={handleTypenameChange}
-            />
-          </Input.Root>
-        )}
-        {template.kind.include === 'automatically' && (
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('description placeholder')}
-              defaultValue={template.kind.description}
-              onChange={handleDescriptionChange}
-            />
-          </Input.Root>
-        )}
-      </Toolbar.Root>
-    </div>
-  );
-};

package/src/components/TemplateContainer.tsx

@@ -1,23 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { StackItem, type StackItemContentProps } from '@dxos/react-ui-stack';
-
-import { TemplateEditor } from './TemplateEditor';
-import { type TemplateType } from '../types';
-
-export const TemplateContainer = ({
-  role,
-  template,
-}: Pick<StackItemContentProps, 'role'> & { template: TemplateType }) => {
-  return (
-    <StackItem.Content role={role} classNames='container-max-width'>
-      <TemplateEditor template={template} />
-    </StackItem.Content>
-  );
-};
-
-export default TemplateContainer;

package/src/components/Thread/Thread.stories.tsx

@@ -1,201 +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 { Message } from '@dxos/ai';
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
-
-import { Thread, type ThreadProps } from './Thread';
-import translations from '../../translations';
-
-faker.seed(1);
-
-const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
-  const [processing, setProcessing] = useState(false);
-  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
-  useEffect(() => {
-    setMessages(_messages ?? []);
-  }, [_messages]);
-
-  const handleSubmit = useCallback(
-    (text: string) => {
-      const request: Message = Obj.make(Message, { role: 'user', content: [{ type: 'text', text }] });
-      const response: Message = Obj.make(Message, {
-        role: 'assistant',
-        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
-      });
-      setMessages([...messages, request, response]);
-      setProcessing(true);
-      setTimeout(() => {
-        response.content[0].pending = false;
-        setMessages([
-          ...messages,
-          request,
-          response,
-          Obj.make(Message, {
-            role: 'assistant',
-            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
-          }),
-        ]);
-        setProcessing(false);
-      }, 3_000);
-    },
-    [messages],
-  );
-
-  return (
-    <div className='flex w-[30rem] bg-white dark:bg-black'>
-      <Thread
-        {...props}
-        messages={messages}
-        processing={processing}
-        onSubmit={handleSubmit}
-        onCancel={() => setProcessing(false)}
-      />
-    </div>
-  );
-};
-
-const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-assistant/Thread',
-  render: DefaultStory,
-  component: Thread,
-  decorators: [
-    withSignals,
-    withClientProvider({ createIdentity: true, createSpace: true }),
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withTheme,
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-  ],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<ThreadProps>;
-
-const TEST_MESSAGES: Message[] = [
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.sentence(5),
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    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: {},
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '1234',
-        content: 'This is a tool result.',
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'tool_use',
-        id: '4567',
-        name: 'create',
-        input: {},
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'user',
-    content: [
-      {
-        type: 'tool_result',
-        toolUseId: '4567',
-        content: 'This is a tool result.',
-      },
-    ],
-  }),
-  Obj.make(Message, {
-    role: 'assistant',
-    content: [
-      {
-        type: 'text',
-        text: faker.lorem.paragraphs(1),
-      },
-    ],
-  }),
-];
-
-export const Default: Story = {
-  args: {
-    messages: TEST_MESSAGES,
-  },
-};
-
-export const Input: Story = {
-  args: {
-    processing: true,
-  },
-};
-
-export const Collapse: Story = {
-  args: {
-    collapse: true,
-    messages: TEST_MESSAGES,
-  },
-};
-
-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 <DefaultStory messages={messages} collapse />;
-  },
-};

package/src/components/Thread/Thread.tsx

@@ -1,118 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
-
-import { type Message } from '@dxos/ai';
-import { type Space } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { ScrollContainer, type ScrollController } from '@dxos/react-ui-components';
-import { mx } from '@dxos/react-ui-theme';
-import { keyToFallback } from '@dxos/util';
-
-import { ThreadMessage, type ThreadMessageProps } from './ThreadMessage';
-import { messageReducer } from './reducer';
-import { PromptBar, type PromptBarProps } from '../Prompt';
-import type { ReferenceData, ReferencesProvider } from '../Prompt/references';
-
-export interface ContextProvider {
-  query({ query }: { query: string }): Promise<ReferenceData[]>;
-
-  resolveMetadata({ uri }: { uri: string }): Promise<ReferenceData | null>;
-}
-
-export type ThreadProps = ThemedClassName<{
-  space?: Space;
-  messages?: Message[];
-  collapse?: boolean;
-  transcription?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  contextProvider?: ContextProvider;
-}> &
-  Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
-
-/**
- * Chat thread component.
- */
-export const Thread = ({
-  classNames,
-  space,
-  messages,
-  collapse = true,
-  transcription,
-  processing,
-  error,
-  onSubmit,
-  onCancel,
-  onOpenChange,
-  contextProvider,
-  ...props
-}: ThreadProps) => {
-  const scroller = useRef<ScrollController>(null);
-
-  const identity = useIdentity();
-  const fallbackValue = keyToFallback(identity!.identityKey);
-  const userHue = identity!.profile?.data?.hue || fallbackValue.hue;
-
-  const handleSubmit = useCallback<NonNullable<PromptBarProps['onSubmit']>>(
-    (value: string) => {
-      onSubmit?.(value);
-      scroller.current?.scrollToBottom();
-      return true;
-    },
-    [onSubmit],
-  );
-
-  // TODO(dmaretskyi): This needs to be a separate type: `id` is not a valid ObjectId, this needs to accommodate messageId for deletion.
-  const { messages: filteredMessages = [] } = useMemo(() => {
-    if (collapse) {
-      return (messages ?? []).reduce<{ messages: Message[]; current?: Message }>(messageReducer, {
-        messages: [],
-      });
-    } else {
-      return { messages: messages ?? [] };
-    }
-  }, [messages, collapse]);
-
-  const references = useMemo<ReferencesProvider | undefined>(() => {
-    if (!contextProvider) {
-      return undefined;
-    }
-
-    return {
-      getReferences: async ({ query }: { query: string }) => contextProvider.query({ query }),
-      resolveReference: async ({ uri }: { uri: string }) => contextProvider.resolveMetadata({ uri }),
-    };
-  }, [contextProvider]);
-
-  return (
-    <div role='none' className={mx('flex flex-col grow overflow-hidden', classNames)}>
-      <ScrollContainer ref={scroller} fade>
-        <div
-          role='none'
-          className={mx(filteredMessages.length > 0 && 'pbs-6 pbe-6')}
-          style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
-        >
-          {filteredMessages.map((message) => (
-            <ThreadMessage key={message.id} classNames='px-4 pbe-4' space={space} message={message} {...props} />
-          ))}
-        </div>
-      </ScrollContainer>
-
-      {onSubmit && (
-        <PromptBar
-          microphone={transcription}
-          processing={processing}
-          error={error}
-          onSubmit={handleSubmit}
-          onCancel={onCancel}
-          onOpenChange={onOpenChange}
-          references={references}
-        />
-      )}
-    </div>
-  );
-};