@dxos/react-ui-chat 0.8.4-main.03d5cd7b56

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@dxos/react-ui-chat",
+  "version": "0.8.4-main.03d5cd7b56",
+  "description": "Chat components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "MIT",
+  "author": "DXOS.org",
+  "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.5",
+    "@fluentui/react-tabster": "9.26.11",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-context": "1.1.1",
+    "@dxos/async": "0.8.4-main.03d5cd7b56",
+    "@dxos/debug": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/invariant": "0.8.4-main.03d5cd7b56",
+    "@dxos/log": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-dnd": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-components": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-editor": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-sfx": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-editor": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-types": "0.8.4-main.03d5cd7b56",
+    "@dxos/util": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.10",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-client": "0.8.4-main.03d5cd7b56",
+    "@dxos/storybook-utils": "0.8.4-main.03d5cd7b56",
+    "@dxos/random": "0.8.4-main.03d5cd7b56"
+  },
+  "peerDependencies": {
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/ChatDialog/ChatDialog.stories.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { Input, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { ChatDialog } from './ChatDialog';
+
+const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
+
+const meta = {
+  title: 'ui/react-ui-chat/ChatDialog',
+  component: ChatDialog.Root,
+  render: (args) => {
+    const [open, setOpen] = useState(true);
+    const [expanded, setExpanded] = useState(true);
+    return (
+      <>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={() => setOpen((open) => !open)}>Open</Toolbar.Button>
+          <Toolbar.Button onClick={() => setExpanded((expanded) => !expanded)}>Expand</Toolbar.Button>
+        </Toolbar.Root>
+
+        <ChatDialog.Root
+          {...args}
+          open={open}
+          onOpenChange={setOpen}
+          expanded={expanded}
+          onExpandedChange={setExpanded}
+        >
+          <ChatDialog.Header title='Chat' />
+          <ChatDialog.Content>
+            {items.map((item) => (
+              <div key={item} className='ps-4 pb-1'>
+                {item}
+              </div>
+            ))}
+          </ChatDialog.Content>
+          <ChatDialog.Footer classNames='px-2 items-center'>
+            <Input.Root>
+              <Input.TextInput classNames='border-none' placeholder='Test' />
+            </Input.Root>
+          </ChatDialog.Footer>
+        </ChatDialog.Root>
+      </>
+    );
+  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChatDialog.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ChatDialog/ChatDialog.tsx

@@ -0,0 +1,203 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type Dispatch, type PropsWithChildren, type SetStateAction, useEffect, useState } from 'react';
+
+import { Dialog, Icon, IconButton, type ThemedClassName, useControlledState } from '@dxos/react-ui';
+import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
+import { mx } from '@dxos/ui-theme';
+
+const preventDefault = (event: Event) => event.preventDefault();
+
+// TODO(burdon): Factor out.
+const Endcap = ({ children }: PropsWithChildren) => {
+  return (
+    <div className='grid w-[var(--dx-rail-action)] h-[var(--dx-rail-action)] items-center justify-center'>
+      {children}
+    </div>
+  );
+};
+
+//
+// Context
+//
+
+type ChatDialogContextValue = {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  expanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  size: Size;
+  setSize: Dispatch<SetStateAction<Size>>;
+};
+
+const [ChatDialogContextProvider, useChatDialogContext] = createContext<ChatDialogContextValue>('ChatDialog');
+
+//
+// Root
+//
+
+type ChatDialogRootProps = PropsWithChildren<{
+  open?: boolean;
+  expanded?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onExpandedChange?: (expanded: boolean) => void;
+  onEscape?: () => void;
+}>;
+
+const ChatDialogRoot = ({
+  children,
+  open: openProp = false,
+  expanded: expandedProp = false,
+  onOpenChange,
+  onExpandedChange,
+  onEscape,
+}: ChatDialogRootProps) => {
+  const [size, setSize] = useState<Size>('min-content');
+  const [open, setOpen] = useControlledState<boolean>(openProp, onOpenChange);
+  const [expanded, setExpanded] = useControlledState<boolean>(expandedProp, onExpandedChange);
+
+  // NOTE: We set the min size to 5rem (80px), and the header and prompt bar to 40px (i.e., the rail-size) each.
+  // The dialog has no vertical padding and has box-content so that when closed it collapses to the size of the header and prompt bar.
+  return (
+    <ChatDialogContextProvider
+      open={open}
+      setOpen={setOpen}
+      expanded={expanded}
+      setExpanded={setExpanded}
+      size={size}
+      setSize={setSize}
+    >
+      <Dialog.Root modal={false} open={open} onOpenChange={setOpen}>
+        <div className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
+          <Dialog.Content
+            size='md'
+            inOverlayLayout
+            classNames={[
+              'grid grid-rows-[var(--dx-rail-action)_1fr_min-content] p-0 overflow-hidden box-content pointer-events-auto',
+            ]}
+            onEscapeKeyDown={onEscape}
+            onInteractOutside={preventDefault}
+          >
+            {children}
+          </Dialog.Content>
+        </div>
+      </Dialog.Root>
+    </ChatDialogContextProvider>
+  );
+};
+
+ChatDialogRoot.displayName = 'ChatDialog.Root';
+
+//
+// Header
+//
+
+const CHAT_DIALOG_HEADER_NAME = 'ChatDialog.Header';
+
+type ChatDialogHeaderProps = ThemedClassName<{
+  title?: string;
+}>;
+
+const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
+  const { expanded, setExpanded } = useChatDialogContext(CHAT_DIALOG_HEADER_NAME);
+
+  return (
+    <div
+      className={mx('grid grid-cols-[var(--dx-rail-action)_1fr_min-content] items-center overflow-hidden', classNames)}
+    >
+      <Endcap>
+        <Dialog.Close>
+          <Icon icon='ph--x--regular' />
+        </Dialog.Close>
+      </Endcap>
+      <Dialog.Title
+        classNames='flex w-full justify-center text-sm text-subdued select-none cursor-pointer'
+        onClick={() => setExpanded((expanded) => !expanded)}
+      >
+        {title}
+      </Dialog.Title>
+      <Endcap>
+        <IconButton
+          variant='ghost'
+          icon='ph--caret-up--regular'
+          iconOnly
+          classNames={mx('p-1! [&>svg]:transition [&>svg]:duration-200', expanded && '[&>svg]:rotate-180')}
+          label={expanded ? 'Close' : 'Open'}
+          onClick={() => setExpanded((expanded) => !expanded)}
+        />
+      </Endcap>
+    </div>
+  );
+};
+
+ChatDialogHeader.displayName = CHAT_DIALOG_HEADER_NAME;
+
+//
+// Content
+//
+
+const CHAT_DIALOG_CONTENT_NAME = 'ChatDialog.Content';
+
+type ChatDialogContentProps = ThemedClassName<PropsWithChildren>;
+
+const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) => {
+  const { expanded, size, setSize } = useChatDialogContext(CHAT_DIALOG_CONTENT_NAME);
+  useEffect(() => {
+    setSize(expanded ? 'min-content' : 0);
+  }, [expanded]);
+
+  return (
+    <div
+      className={mx(
+        'border-t border-b border-subdued-separator',
+        'transition ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200',
+        classNames,
+      )}
+      style={{
+        ...sizeStyle(size, 'vertical', true),
+        maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 14rem)',
+      }}
+      {...resizeAttributes}
+    >
+      <ResizeHandle
+        side='block-start'
+        iconPosition='center'
+        defaultSize='min-content'
+        fallbackSize={0}
+        minSize={0}
+        onSizeChange={setSize}
+      />
+      {children}
+    </div>
+  );
+};
+
+ChatDialogContent.displayName = CHAT_DIALOG_CONTENT_NAME;
+
+//
+// Footer
+//
+
+const CHAT_DIALOG_FOOTER_NAME = 'ChatDialog.Footer';
+
+type ChatDialogFooterProps = ThemedClassName<PropsWithChildren>;
+
+const ChatDialogFooter = ({ children, classNames }: ChatDialogFooterProps) => {
+  return <div className={mx(classNames)}>{children}</div>;
+};
+
+ChatDialogFooter.displayName = CHAT_DIALOG_FOOTER_NAME;
+
+//
+// ChatDialog
+//
+
+export const ChatDialog = {
+  Root: ChatDialogRoot,
+  Header: ChatDialogHeader,
+  Content: ChatDialogContent,
+  Footer: ChatDialogFooter,
+};

package/src/components/ChatDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ChatDialog';

package/src/components/ChatEditor/ChatEditor.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { log } from '@dxos/log';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { ChatEditor } from './ChatEditor';
+import { type ReferenceData } from './references';
+
+const meta = {
+  title: 'ui/react-ui-chat/ChatEditor',
+  component: ChatEditor,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof ChatEditor>;
+
+export default meta;
+
+const classNames = 'w-[20rem] p-2 border border-separator';
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    classNames,
+    placeholder: 'Ask a question...',
+  },
+};
+
+// TODO(burdon): Restore and reconcile with suggest/typeahead.
+export const WithSuggestions: Story = {
+  args: {
+    classNames,
+    onSubmit: (text) => {
+      log('onSubmit', { text });
+    },
+
+    // onSuggest: (text) => {
+    //   const trimmed = text.trim().toLowerCase();
+    //   if (trimmed.length < 2) {
+    //     return [];
+    //   }
+    //   const suggestions = [
+    //     'Create a kanban board',
+    //     '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));
+    // },
+  },
+};
+
+// TODO(burdon): Replace.
+const references: ReferenceData[] = [
+  {
+    uri: 'dxn:echo:@:AAAAAAAA',
+    label: 'Meeting Notes',
+  },
+  {
+    uri: 'dxn:echo:@:BBBBBBBB',
+    label: 'Project Plan',
+  },
+  {
+    uri: 'dxn:echo:@:CCCCCCCC',
+    label: 'Meeting Plan',
+  },
+];
+
+export const WithReferences: Story = {
+  args: {
+    classNames,
+    references: {
+      provider: {
+        getReferences: async ({ query }) => {
+          const res = references.filter((i) => i.label.toLowerCase().startsWith(query.toLowerCase()));
+          log('getReferences', { query, res });
+          return res;
+        },
+        resolveReference: async ({ uri }) => {
+          const res = references.find((i) => i.uri === uri);
+          log('resolveReference', { uri, res });
+          return res ?? null;
+        },
+      },
+    },
+  },
+};

package/src/components/ChatEditor/ChatEditor.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import React, { forwardRef, useMemo } from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import { Editor, type EditorController, type UseTextEditorProps } from '@dxos/react-ui-editor';
+import {
+  type BasicExtensionsOptions,
+  type SubmitOptions,
+  createBasicExtensions,
+  createThemeExtensions,
+  submit,
+  xmlFormatting,
+} from '@dxos/ui-editor';
+import { isTruthy } from '@dxos/util';
+
+import { type ReferencesOptions } from './references';
+
+export interface ChatEditorController extends EditorController {}
+
+export type ChatEditorProps = ThemedClassName<
+  {
+    extensions?: Extension;
+    references?: ReferencesOptions;
+  } & (SubmitOptions &
+    Pick<UseTextEditorProps, 'id' | 'autoFocus'> &
+    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>)
+>;
+
+export const useChatExtensions = ({ extensions, lineWrapping = false, placeholder, onSubmit }: ChatEditorProps) => {
+  const { themeMode } = useThemeContext();
+  return useMemo<Extension[]>(
+    () =>
+      [
+        createThemeExtensions({ themeMode }),
+        createBasicExtensions({ bracketMatching: false, lineWrapping, placeholder }),
+        xmlFormatting(),
+        submit({ onSubmit }),
+        extensions,
+      ].filter(isTruthy),
+    [themeMode, extensions, onSubmit],
+  );
+};
+
+export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
+  ({ classNames, autoFocus, extensions: extensionsProp, lineWrapping = false, placeholder, onSubmit }, forwardRef) => {
+    const extensions = useChatExtensions({ extensions: extensionsProp, lineWrapping, placeholder, onSubmit });
+
+    // TODO(burdon): Popover.
+    return (
+      <Editor.Root ref={forwardRef}>
+        <Editor.View classNames={classNames} autoFocus={autoFocus} extensions={extensions} />
+      </Editor.Root>
+    );
+  },
+);

package/src/components/ChatEditor/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './references';
+
+export * from './ChatEditor';

package/src/components/ChatEditor/references.ts

@@ -0,0 +1,181 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type CompletionResult, autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { type Extension, RangeSet } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
+
+import { Mutex } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+
+// TODO(dmaretskyi): Consider adding details renderer for when you hover over the reference.
+export type ReferenceData = {
+  uri: string; // TODO(burdon): Rename dxn.
+  label: string;
+};
+
+/**
+ * @deprecated
+ */
+// TODO(burdon): Remove.
+export interface ReferencesProvider {
+  getReferences({ query }: { query: string }): Promise<ReferenceData[]>;
+  resolveReference({ uri }: { uri: string }): Promise<ReferenceData | null>;
+}
+
+export type ReferencesOptions = {
+  provider: ReferencesProvider;
+
+  /**
+   * @default '@'
+   */
+  triggerCharacter?: string;
+
+  /**
+   * Prevent the autocomplete from closing when the user blurs the editor.
+   * @default false
+   */
+  debug?: boolean;
+};
+
+/**
+ * Lookup object references.
+ * @deprecated
+ */
+// TODO(burdon): Remove.
+export const references = ({ provider, triggerCharacter = '@', debug = false }: ReferencesOptions): Extension => {
+  invariant(triggerCharacter.length === 1);
+
+  const decorationField = ViewPlugin.fromClass(
+    class ReferenceView {
+      // TODO(burdon): Why?
+      private _mutex = new Mutex();
+
+      decorations: DecorationSet = Decoration.set([]);
+
+      constructor(view: EditorView) {
+        queueMicrotask(async () => {
+          const guard = await this._mutex.acquire();
+          try {
+            this.decorations = await this._computeDecorations(view);
+          } finally {
+            guard.release();
+          }
+        });
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          queueMicrotask(async () => {
+            const guard = await this._mutex.acquire();
+            try {
+              this.decorations = await this._computeDecorations(update.view);
+            } finally {
+              guard.release();
+            }
+          });
+        }
+      }
+
+      private async _computeDecorations(view: EditorView): Promise<DecorationSet> {
+        const text = view.state.doc.toString();
+        const references = text.matchAll(new RegExp(`${triggerCharacter}[a-zA-Z0-9@:]+\\s`, 'g'));
+
+        const decorations = [];
+        for (const match of references) {
+          const reference = match[0];
+          const uri = reference.slice(1, -1);
+          const data = await provider.resolveReference({ uri });
+          if (data) {
+            decorations.push(
+              Decoration.replace({
+                widget: new ReferenceWidget(data),
+              }).range(match.index!, match.index! + reference.length),
+            );
+          }
+        }
+
+        return Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      provide: () => [
+        EditorView.atomicRanges.of(
+          (view): DecorationSet => view.plugin(decorationField)?.decorations ?? RangeSet.empty,
+        ),
+      ],
+    },
+  );
+
+  return [
+    decorationField,
+
+    EditorView.theme({
+      '.cm-reference-pill': {
+        borderRadius: '0.25rem',
+        borderWidth: '1px',
+        marginRight: '0.25rem',
+        marginLeft: '0.25rem',
+      },
+    }),
+
+    autocompletion({
+      tooltipClass: () => 'shadow rounded-sm',
+      activateOnTyping: true,
+      aboveCursor: true,
+      closeOnBlur: !debug,
+      override: [
+        async (context): Promise<CompletionResult | null> => {
+          const match = context.matchBefore(new RegExp(`${triggerCharacter}[a-zA-Z0-9]+`));
+          if (!match || match?.to === match?.from) {
+            return null;
+          }
+
+          const query = match.text.slice(1);
+          const references = await provider.getReferences({ query });
+          return {
+            from: match.from,
+            filter: false,
+            options: references.map((reference) => ({
+              label: reference.label,
+              apply: `${triggerCharacter}${reference.uri} `,
+            })),
+          };
+        },
+      ],
+    }),
+
+    keymap.of(completionKeymap),
+  ];
+};
+
+class ReferenceWidget extends WidgetType {
+  constructor(private data: ReferenceData) {
+    super();
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override eq(other: this) {
+    return this.data.uri === other.data.uri;
+  }
+
+  override toDOM() {
+    const span = document.createElement('span');
+    span.textContent = `@${this.data.label}`;
+    span.className = 'cm-reference-pill';
+    return span;
+  }
+}