@dxos/plugin-assistant 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/src/components/ChatPrompt/ChatActions.tsx

@@ -5,9 +5,10 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
 
-import { meta } from '../../meta';
 import { type ChatEvent } from '../Chat';
 
 export type ChatActionsProps = ThemedClassName<
@@ -15,57 +16,60 @@ export type ChatActionsProps = ThemedClassName<
     microphone?: boolean;
     recording?: boolean;
     processing?: boolean;
+    debug?: boolean;
     onEvent?: (event: ChatEvent) => void;
   }>
 >;
 
-export const ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }: ChatActionsProps) => {
+export const ChatActions = ({
+  classNames,
+  children,
+  microphone,
+  recording,
+  processing,
+  debug,
+  onEvent,
+}: ChatActionsProps) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div className={mx('flex items-center mie-1', classNames)}>
+    <div className={mx('flex items-center', classNames)}>
       {children}
 
-      {(processing && (
-        <IconButton
-          disabled={!processing}
-          classNames='px-1.5'
-          variant='ghost'
-          size={5}
-          icon='ph--x--regular'
-          iconOnly
-          label={t('button cancel processing')}
-          onClick={() => onEvent?.({ type: 'cancel' })}
-        />
-      )) || (
-        <IconButton
-          disabled
-          classNames='px-1.5'
-          variant='ghost'
-          size={5}
-          icon='ph--arrow-down--regular'
-          iconOnly
-          label={t('button scroll down')}
-          onClick={() => onEvent?.({ type: 'scroll-to-bottom' })}
-        />
-      )}
-
       {microphone && (
         <IconButton
           disabled={!processing}
-          classNames={mx('px-1.5', recording && 'bg-primary-500')}
+          classNames={mx(recording && 'bg-primary-500')}
           variant='ghost'
-          size={5}
           icon='ph--microphone--regular'
           iconOnly
           noTooltip
-          label={t('button microphone')}
+          label={t('microphone.button')}
           onMouseDown={() => onEvent?.({ type: 'record-start' })}
           onMouseUp={() => onEvent?.({ type: 'record-stop' })}
           onTouchStart={() => onEvent?.({ type: 'record-start' })}
           onTouchEnd={() => onEvent?.({ type: 'record-stop' })}
         />
       )}
+
+      {debug && (
+        <IconButton
+          variant='ghost'
+          icon='ph--wrench--regular'
+          iconOnly
+          label={t('debug.button')}
+          onClick={() => onEvent?.({ type: 'toggle-debug' })}
+        />
+      )}
+
+      <IconButton
+        disabled={!processing}
+        variant='ghost'
+        icon='ph--x--regular'
+        iconOnly
+        label={t('cancel-processing.button')}
+        onClick={() => onEvent?.({ type: 'cancel' })}
+      />
     </div>
   );
 };

package/src/components/ChatPrompt/ChatOptions.stories.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Chat } from '@dxos/assistant-toolkit';
+import { capabilities } from '@dxos/assistant-toolkit/testing';
+import { Feed, Filter, Ref } from '@dxos/echo';
+import { ChessPlugin } from '@dxos/plugin-chess';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { MapPlugin } from '@dxos/plugin-map';
+import { TablePlugin } from '@dxos/plugin-table';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withTheme } from '@dxos/react-ui/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { useBlueprintRegistry, useContextBinder } from '#hooks';
+import { translations } from '#translations';
+
+import { ChatOptions, ObjectsPanel, type ChatOptionsProps } from './ChatOptions';
+
+const presets = [
+  {
+    id: 'edge-claude-sonnet',
+    label: 'Edge/Claude Sonnet',
+  },
+  {
+    id: 'edge-gpt-4o',
+    label: 'Edge/GPT-4o',
+  },
+  {
+    id: 'ollama-llama3',
+    label: 'Ollama/Llama 3',
+  },
+];
+
+type DefaultStoryProps = Pick<ChatOptionsProps, 'presets'>;
+
+const DefaultStory = ({ presets }: DefaultStoryProps) => {
+  const [space] = useSpaces();
+  const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+  const [chat] = useQuery(space?.db, Filter.type(Chat.Chat));
+  const blueprintRegistry = useBlueprintRegistry();
+  const binder = useContextBinder(space, feed);
+  const [preset, setPreset] = useState(presets?.[0]?.id);
+  if (!space || !binder || !chat) {
+    return <Loading />;
+  }
+
+  return (
+    <ChatOptions
+      chat={chat}
+      db={space.db}
+      context={binder}
+      blueprintRegistry={blueprintRegistry}
+      presets={presets}
+      preset={preset}
+      onPresetChange={setPreset}
+    />
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/ChatOptions',
+  component: ChatOptions as any,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Chat.Chat, Feed.Feed, Organization.Organization, Person.Person],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              // Populate space with sample objects.
+              for (let idx = 0; idx < 8; idx++) {
+                space.db.add(Organization.make({ name: `Org ${idx + 1}` }));
+                space.db.add(Person.make({ fullName: `Person ${idx + 1}` }));
+              }
+
+              // Create the chat feed used by the context binder.
+              const feed = space.db.add(Feed.make());
+              space.db.add(Chat.make({ name: 'Test chat', feed: Ref.make(feed) }));
+              yield* Effect.promise(() => space.db.flush({ indexes: true }));
+            }),
+        }),
+        ChessPlugin(),
+        MapPlugin(),
+        TablePlugin(),
+      ],
+      capabilities,
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    presets,
+  },
+};
+
+export const _ObjectsPanel: Story = {
+  render: () => {
+    const [space] = useSpaces();
+    const [feed] = useQuery(space?.db, Filter.type(Feed.Feed));
+    const binder = useContextBinder(space, feed);
+    if (!space || !binder) {
+      return <Loading />;
+    }
+
+    return (
+      <div className='grid w-[300px] h-[300px] border border-separator'>
+        <ObjectsPanel db={space.db} context={binder} />
+      </div>
+    );
+  },
+};