@dxos/plugin-assistant 0.8.4-main.2e9d522 → 0.8.4-main.5ea62a8

package/src/components/ChatThread/ChatMessage.tsx

@@ -2,187 +2,234 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, type FC, type PropsWithChildren } from 'react';
+import React, { type FC, Fragment, type PropsWithChildren, useMemo } from 'react';
 
-import { type Tool } from '@dxos/ai';
-import { Surface } from '@dxos/app-framework';
+import { ErrorBoundary, Surface } from '@dxos/app-framework';
+import { resolveRef } from '@dxos/client';
+import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
+import { DXN, DXN_ECHO_REGEXP } from '@dxos/keys';
+import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { Button, Icon, IconButton, useTranslation, type ThemedClassName } from '@dxos/react-ui';
-import {
-  MarkdownViewer,
-  ToggleContainer as NativeToggleContainer,
-  type ToggleContainerProps,
-} from '@dxos/react-ui-components';
+import { Button, IconButton, Link, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { MarkdownViewer, ToggleContainer } from '@dxos/react-ui-components';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/react-ui-theme';
-import { type ContentBlock, type DataType } from '@dxos/schema';
+import { ContentBlock, type DataType } from '@dxos/schema';
 import { safeParseJson } from '@dxos/util';
 
-import { Json, ToolBlock, isToolMessage } from './ToolBlock';
-import { type ChatProcessor } from '../../hooks';
 import { meta } from '../../meta';
 import { type ChatEvent } from '../Chat';
-import { ToolboxContainer } from '../Toolbox';
+import { Toolbox } from '../Toolbox';
+
+import { ObjectLink } from './Link';
+import { type AiToolProvider, ToolBlock, isToolMessage } from './ToolBlock';
+
+export const styles = {
+  margin: 'pie-4 pis-4',
+  padding: 'pis-2 pie-2 pbs-0.5 pbe-0.5',
+  panel: 'is-full rounded-sm',
+  panelHeader: 'bg-groupSurface',
+  panelContent: 'bg-modalSurface',
+  json: '!p-1 text-xs bg-transparent',
+};
 
 export type ChatMessageProps = ThemedClassName<{
   debug?: boolean;
   space?: Space;
   message: DataType.Message;
-  // TODO(burdon): Move to context.
-  processor?: ChatProcessor;
-  tools?: Tool[];
+  toolProvider?: AiToolProvider;
   onEvent?: (event: ChatEvent) => void;
+  onDelete?: () => void;
 }>;
 
-export const ChatMessage = ({ classNames, debug, space, message, processor, tools, onEvent }: ChatMessageProps) => {
+export const ChatMessage = ({
+  classNames,
+  debug,
+  space,
+  message,
+  toolProvider,
+  onEvent,
+  onDelete,
+}: ChatMessageProps) => {
   const { t } = useTranslation(meta.id);
   const {
     sender: { role },
     blocks,
   } = message;
 
-  // TODO(burdon): Restructure types to make check unnecessary.
-  if (isToolMessage(message)) {
+  if (!debug && toolProvider && isToolMessage(message)) {
     return (
-      <MessageContainer classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}>
-        <ToolBlock classNames={panelClasses} message={message} tools={tools} />
-      </MessageContainer>
+      <MessageItem classNames={[styles.margin, 'animate-[fadeIn_0.5s]']}>
+        <ToolBlock message={message} toolProvider={toolProvider} />
+      </MessageItem>
     );
   }
 
   return (
     <>
-      {debug && (
-        <div className={mx('flex justify-end text-subdued', marginClasses)}>
-          <pre className='text-xs'>{JSON.stringify({ created: message.created })}</pre>
-        </div>
-      )}
-
       {blocks.map((block, idx) => {
         // TODO(burdon): Filter empty messages.
         if (block._tag === 'text' && block.text.replaceAll(/\s+/g, '').length === 0) {
           return null;
         }
 
-        const Component: BlockComponent = components[block._tag] ?? components.default!;
+        const Component: ContentBlockComponent = components[block._tag] ?? components.default!;
         if (!Component) {
           return null;
         }
 
         return (
-          <Fragment key={idx}>
-            <MessageContainer classNames={classNames} user={block._tag === 'text' && role === 'user'}>
-              <Component space={space} processor={processor} block={block} onEvent={onEvent} />
-            </MessageContainer>
-            {debug && (
-              <div className={mx('flex justify-end text-subdued', marginClasses)}>
-                <pre className='text-xs'>{JSON.stringify({ block: block._tag })}</pre>
-              </div>
-            )}
-          </Fragment>
+          <MessageItem key={idx} classNames={classNames} user={block._tag === 'text' && role === 'user'}>
+            <ErrorBoundary data={block}>
+              <Component space={space} block={block} onEvent={onEvent} />
+            </ErrorBoundary>
+          </MessageItem>
         );
       })}
-      <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', marginClasses)}>
-        <IconButton
-          classNames='animate-[fadeIn_0.5s]'
-          icon='ph--trash--regular'
-          iconOnly
-          label={t('button delete message')}
-          onClick={() => onEvent?.({ type: 'delete', id: message.id })}
-        />
-      </div>
+
+      {onDelete && (
+        <div className={mx('flex justify-end pbs-2 pbe-2 opacity-50 hover:opacity-100', styles.margin)}>
+          <IconButton
+            classNames='animate-[fadeIn_0.5s]'
+            icon='ph--trash--regular'
+            iconOnly
+            label={t('button delete message')}
+            onClick={() => onDelete()}
+          />
+        </div>
+      )}
     </>
   );
 };
 
-type BlockComponentProps = {
+type ContentBlockProps = {
   space?: Space;
   block: ContentBlock.Any;
-  /** @deprecated Replace with context */
-  processor?: ChatProcessor;
   onEvent?: (event: ChatEvent) => void;
 };
 
-type BlockComponent = FC<BlockComponentProps>;
+type ContentBlockComponent = FC<ContentBlockProps>;
 
-const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComponent>> = {
+/**
+ * Components for rendering content blocks.
+ */
+const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', ContentBlockComponent>> = {
   //
   // Text
   //
-  ['text' as const]: ({ block }) => {
+  ['text' as const]: ({ space, block }) => {
     invariant(block._tag === 'text');
-    // const [open, setOpen] = useState(block.disposition === 'cot' && block.pending);
-    const title = block.disposition ? titles[block.disposition] : undefined;
-    if (!title) {
-      return <MarkdownViewer content={block.text} />;
-    }
 
-    // TOOD(burdon): Store last time user opened/closed COT.
-    // Autoclose when streaming ends.
-    // useEffect(() => {
-    //   if (block.disposition === 'cot' && !block.pending) {
-    //     setOpen(false);
-    //   }
-    // }, [block.disposition, block.pending]);
+    return (
+      <MarkdownViewer
+        content={preprocessTextContent(block.text)}
+        components={{
+          a: ({ node: { properties }, children, href, ...props }) => {
+            if (space && typeof properties?.href === 'string' && properties?.href?.startsWith('dxn')) {
+              try {
+                // TODO(burdon): Check valid length (since serialized).
+                const dxn = DXN.parse(properties.href);
+                return <ObjectLink space={space} dxn={dxn} />;
+              } catch {}
+            }
+
+            // TODO(burdon): Can we revert to the default handler?
+            return (
+              <Link href={href} target='_blank' rel='noopener noreferrer' {...props}>
+                {children}
+              </Link>
+            );
+          },
+          img: ({ node: { properties } }) => {
+            const client = useClient();
+            if (space && typeof properties?.src === 'string' && properties?.src?.startsWith('dxn')) {
+              try {
+                const dxn = DXN.parse(properties?.src);
+                const subject = resolveRef(client, dxn, space);
+                const data = useMemo(() => ({ subject }), [subject]);
+                return <Surface role='card--transclusion' data={data} limit={1} />;
+              } catch {}
+            }
+            return <img {...properties} />;
+          },
+        }}
+      />
+    );
+  },
+
+  //
+  // Suggest
+  //
+  ['suggestion' as const]: ({ block, onEvent }) => {
+    invariant(block._tag === 'suggestion');
 
     return (
-      <ToggleContainer
-        // open={open}
-        defaultOpen={systemDispositions.includes(block.disposition ?? '') && block.pending}
-        title={title}
-        icon={
-          block.pending ? (
-            <Icon icon={'ph--circle-notch--regular'} classNames='text-subdued animate-spin' size={4} />
-          ) : undefined
-        }
-      >
-        <MarkdownViewer
-          content={block.text}
-          classNames={['pbe-2', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
-        />
-      </ToggleContainer>
+      <IconButton
+        icon='ph--lightning--regular'
+        label={block.text}
+        classNames='text-description'
+        onClick={() => onEvent?.({ type: 'submit', text: block.text })}
+      />
     );
   },
 
   //
-  // JSON
+  // Select
   //
-  ['json' as const]: ({ space, processor, block, onEvent }) => {
-    invariant(block._tag === 'json');
+  ['select' as const]: ({ block, onEvent }) => {
+    invariant(block._tag === 'select');
 
-    switch (block.disposition) {
-      case 'tool_list': {
-        return (
-          <ToggleContainer title={titles[block.disposition]} defaultOpen={true}>
-            <ToolboxContainer space={space} processor={processor} classNames='pbe-2' />
-          </ToggleContainer>
-        );
-      }
+    return (
+      <div className='flex flex-wrap gap-1'>
+        {block.options.map((option, idx) => (
+          <Button
+            classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
+            key={idx}
+            onClick={() => onEvent?.({ type: 'submit', text: option })}
+          >
+            {option}
+          </Button>
+        ))}
+      </div>
+    );
+  },
 
-      case 'suggest': {
-        const { text = '' }: { text: string } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <IconButton icon='ph--lightning--regular' label={text} onClick={() => onEvent?.({ type: 'submit', text })} />
-        );
-      }
+  //
+  // Toolkit
+  //
+  ['toolkit' as const]: ({ block }) => {
+    invariant(block._tag === 'toolkit');
 
-      case 'select': {
-        const { options = [] }: { options: string[] } = safeParseJson(block.data ?? '{}') ?? ({} as any);
-        return (
-          <div className='flex flex-wrap gap-1'>
-            {options.map((text, idx) => (
-              <Button
-                classNames={'animate-[fadeIn_0.5s] rounded-sm text-sm'}
-                key={idx}
-                onClick={() => onEvent?.({ type: 'submit', text })}
-              >
-                {text}
-              </Button>
-            ))}
-          </div>
-        );
-      }
+    const { t } = useTranslation(meta.id);
+    return (
+      <ToggleContainer.Root classNames={styles.panel} defaultOpen>
+        <ToggleContainer.Header classNames={styles.panelHeader} title={t('toolkit label')} />
+        <ToggleContainer.Content classNames={styles.panelContent}>
+          <Toolbox />
+        </ToggleContainer.Content>
+      </ToggleContainer.Root>
+    );
+  },
+
+  //
+  // Summary
+  //
+  ['summary' as const]: ({ block }) => {
+    invariant(block._tag === 'summary');
+
+    const summary = ContentBlock.createSummaryMessage(block, false);
+    return <div className='text-sm text-subdued'>{summary}</div>;
+  },
+
+  //
+  // JSON
+  //
+  ['json' as const]: ({ block, onEvent }) => {
+    invariant(block._tag === 'json');
 
+    // TODO(burdon): Disposition is deprecated.
+    switch (block.disposition) {
       case 'graph': {
         return (
           <div className='flex flex-wrap gap-1'>
@@ -204,65 +251,84 @@ const components: Partial<Record<ContentBlock.Any['_tag'] | 'default', BlockComp
       }
 
       default: {
-        const title = block.disposition ? titles[block.disposition] : undefined;
         return (
-          <ToggleContainer title={title ?? 'JSON'}>
-            <Json data={safeParseJson(block.data ?? block)} />
-          </ToggleContainer>
+          <ToggleContainer.Root classNames={styles.panel}>
+            <ToggleContainer.Header classNames={styles.panelHeader} title={block.disposition ?? block._tag} />
+            <ToggleContainer.Content classNames={styles.panelContent}>
+              <Json data={safeParseJson(block.data ?? block)} classNames={styles.json} />
+            </ToggleContainer.Content>
+          </ToggleContainer.Root>
         );
       }
     }
   },
 
   //
-  // Default
+  // Fallback
   //
   default: ({ block }) => {
-    let title = titles[block._tag];
-    if (block._tag === 'toolCall') {
-      title = `Tool [${block.name}]`; // TODO(burdon): Get label from tool.
-    } else {
-      title = block._tag;
-    }
-
     return (
-      <ToggleContainer title={title ?? 'JSON'}>
-        <Json data={block} />
-      </ToggleContainer>
+      <ToggleContainer.Root classNames={styles.panel}>
+        <ToggleContainer.Header classNames={styles.panelHeader} title={block._tag} />
+        <ToggleContainer.Content classNames={styles.panelContent}>
+          <Json data={block} classNames={styles.json} />
+        </ToggleContainer.Content>
+      </ToggleContainer.Root>
     );
   },
 };
 
-// TODO(burdon): Translations.
-const titles: Record<string, string> = {
-  ['cot' as const]: 'Chain of thought',
-  ['artifact' as const]: 'Artifact',
-  ['tool_use' as const]: 'Tool request',
-  ['tool_result' as const]: 'Tool result',
-  ['tool_list' as const]: 'Tools',
-  ['artifact-update' as const]: 'Artifact(s) changed',
+export type ChatErrorProps = Pick<ChatMessageProps, 'onEvent'> & {
+  error: Error;
 };
 
-const systemDispositions: string[] = ['cot', 'artifact-update'];
-
-const panelClasses = 'flex flex-col is-full bg-activeSurface rounded-sm';
-const marginClasses = 'pie-4 pis-4';
-const paddingClasses = 'pis-2 pie-2 pbs-0.5 pbe-0.5';
+/**
+ * Error message with retry.
+ */
+export const ChatError = ({ error, onEvent }: ChatErrorProps) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <>
+      <MessageItem>
+        <ToggleContainer.Root classNames={styles.panel}>
+          <ToggleContainer.Header classNames={styles.panelHeader} title={error.message || t('error label')} />
+          <ToggleContainer.Content classNames={styles.panelContent}>{String(error.cause)}</ToggleContainer.Content>
+        </ToggleContainer.Root>
+      </MessageItem>
+      <MessageItem>
+        <IconButton
+          classNames='bg-errorSurface text-errorSurfaceText'
+          icon='ph--lightning--regular'
+          label={t('button retry')}
+          onClick={() => onEvent?.({ type: 'retry' })}
+        />
+      </MessageItem>
+    </>
+  );
+};
 
-const MessageContainer = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
+/**
+ * Wrapper for each message.
+ */
+const MessageItem = ({ classNames, children, user }: ThemedClassName<PropsWithChildren<{ user?: boolean }>>) => {
   if (!children) {
     return null;
   }
 
   return (
-    <div role='list-item' className={mx('flex is-full', user && 'justify-end', marginClasses, classNames)}>
-      <div className={mx(user ? ['rounded-sm', 'bg-[--user-fill] text-accentSurfaceText', paddingClasses] : 'is-full')}>
+    <div role='list-item' className={mx('flex is-full', user && 'justify-end', styles.margin, classNames)}>
+      <div
+        className={mx(user ? ['bg-[--user-fill] text-white dark:text-black rounded-sm', styles.padding] : 'is-full')}
+      >
         {children}
       </div>
     </div>
   );
 };
 
-const ToggleContainer = (props: ToggleContainerProps) => {
-  return <NativeToggleContainer {...props} classNames={mx(panelClasses, props.classNames)} />;
-};
+export const renderObjectLink = (obj: Obj.Any, transclusion?: boolean) =>
+  `${transclusion ? '!' : ''}[${Obj.getLabel(obj)}](${Obj.getDXN(obj).toString()})`;
+
+// TODO(burdon): Move to parser.
+const preprocessTextContent = (content: string) =>
+  content.replaceAll(new RegExp(DXN_ECHO_REGEXP, 'g'), (_, dxn) => `<${dxn}>`);