@dxos/react-ui-chat 0.8.4-main.84f28bd

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@dxos/react-ui-chat",
+  "version": "0.8.4-main.84f28bd",
+  "description": "Chat components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.34.1",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-context": "1.1.1",
+    "@dxos/async": "0.8.4-main.84f28bd",
+    "@dxos/debug": "0.8.4-main.84f28bd",
+    "@dxos/echo-schema": "0.8.4-main.84f28bd",
+    "@dxos/invariant": "0.8.4-main.84f28bd",
+    "@dxos/live-object": "0.8.4-main.84f28bd",
+    "@dxos/log": "0.8.4-main.84f28bd",
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-components": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-dnd": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-sfx": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-editor": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-types": "0.8.4-main.84f28bd",
+    "@dxos/util": "0.8.4-main.84f28bd"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "effect": "3.14.21",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/echo": "0.8.4-main.84f28bd",
+    "@dxos/random": "0.8.4-main.84f28bd",
+    "@dxos/react-client": "0.8.4-main.84f28bd",
+    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+  },
+  "peerDependencies": {
+    "effect": "3.13.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { Input, Toolbar } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ChatDialog } from './ChatDialog';
+import { translations } from '../../translations';
+
+const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
+
+const meta: Meta<typeof ChatDialog.Root> = {
+  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='pis-4 pbe-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({ fullscreen: true, classNames: 'flex flex-col' })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChatDialog.Root>;
+
+export const Default: Story = {};

package/src/components/ChatDialog/ChatDialog.tsx

@@ -0,0 +1,193 @@
+//
+// 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, useControlledState, type ThemedClassName } from '@dxos/react-ui';
+import { resizeAttributes, ResizeHandle, type Size, sizeStyle } from '@dxos/react-ui-dnd';
+import { mx } from '@dxos/react-ui-theme';
+
+const preventDefault = (event: Event) => event.preventDefault();
+
+// TODO(burdon): Factor out.
+const Endcap = ({ children }: PropsWithChildren) => {
+  return (
+    <div className='grid w-[var(--rail-action)] h-[var(--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: _open = false,
+  expanded: _expanded = false,
+  onOpenChange,
+  onExpandedChange,
+  onEscape,
+}: ChatDialogRootProps) => {
+  const [size, setSize] = useState<Size>('min-content');
+  const [open, setOpen] = useControlledState<boolean>(_open, onOpenChange);
+  const [expanded, setExpanded] = useControlledState<boolean>(_expanded, 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 role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
+          <Dialog.Content
+            inOverlayLayout
+            classNames={[
+              'grid grid-rows-[var(--rail-action)_1fr_min-content] p-0 overflow-hidden',
+              'box-content md:is-[35rem] md:max-is-none pointer-events-auto',
+            ]}
+            onEscapeKeyDown={onEscape}
+            onInteractOutside={preventDefault}
+          >
+            {children}
+          </Dialog.Content>
+        </div>
+      </Dialog.Root>
+    </ChatDialogContextProvider>
+  );
+};
+
+ChatDialogRoot.displayName = 'ChatDialog.Root';
+
+//
+// Header
+//
+
+type ChatDialogHeaderProps = ThemedClassName<{
+  title?: string;
+}>;
+
+const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
+  const { expanded, setExpanded } = useChatDialogContext(ChatDialogHeader.displayName);
+
+  return (
+    <div className={mx('grid grid-cols-[var(--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 = 'ChatDialog.Header';
+
+//
+// Content
+//
+
+type ChatDialogContentProps = ThemedClassName<PropsWithChildren>;
+
+const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) => {
+  const { expanded, size, setSize } = useChatDialogContext(ChatDialogContent.displayName);
+  useEffect(() => {
+    setSize(expanded ? 'min-content' : 0);
+  }, [expanded]);
+
+  return (
+    <div
+      className={mx(
+        'flex flex-col overflow-y-auto border-t border-b border-subduedSeparator',
+        'transition-[block-size] 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 = 'ChatDialog.Content';
+
+//
+// Footer
+//
+
+type ChatDialogFooterProps = ThemedClassName<PropsWithChildren>;
+
+const ChatDialogFooter = ({ children, classNames }: ChatDialogFooterProps) => {
+  return <div className={mx(classNames)}>{children}</div>;
+};
+
+ChatDialogFooter.displayName = 'ChatDialog.Footer';
+
+//
+// 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,96 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react-vite';
+
+import { log } from '@dxos/log';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { ChatEditor } from './ChatEditor';
+import { type ReferenceData } from './references';
+import { translations } from '../../translations';
+
+const meta: Meta<typeof ChatEditor> = {
+  title: 'ui/react-ui-chat/ChatEditor',
+  component: ChatEditor,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+const classNames = 'w-[20rem] p-2 border border-separator';
+
+type Story = StoryObj<typeof ChatEditor>;
+
+export const Default: Story = {
+  args: {
+    classNames,
+  },
+};
+
+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));
+    },
+  },
+};
+
+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,91 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  type BasicExtensionsOptions,
+  type UseTextEditorProps,
+  createBasicExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { autocomplete, type AutocompleteOptions } from './autocomplete';
+import { references as referencesExtension, type ReferencesOptions } from './references';
+
+// TODO(burdon): Handle object references.
+
+export interface ChatEditorController {
+  focus(): void;
+  setText(text: string): void;
+}
+
+export type ChatEditorProps = ThemedClassName<
+  {
+    extensions?: Extension;
+    references?: ReferencesOptions;
+  } & AutocompleteOptions &
+    Pick<UseTextEditorProps, 'autoFocus'> &
+    Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
+>;
+
+export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
+  (
+    { classNames, extensions, references, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onCancel },
+    forwardRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const { parentRef, view } = useTextEditor(
+      {
+        debug: true,
+        autoFocus,
+        extensions: [
+          createThemeExtensions({ themeMode }),
+          autocomplete({ onSubmit, onSuggest, onCancel }),
+          references ? referencesExtension({ provider: references.provider }) : [],
+          createBasicExtensions({
+            bracketMatching: false,
+            lineWrapping,
+            placeholder,
+          }),
+          extensions,
+        ].filter(isNonNullable),
+      },
+      [themeMode, extensions, onSubmit, onSuggest],
+    );
+
+    // Expose editor view.
+    useImperativeHandle(
+      forwardRef,
+      () => {
+        return {
+          focus: () => {
+            view?.focus();
+          },
+          setText: (text: string) => {
+            view?.dispatch({
+              changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: text,
+              },
+              selection: {
+                anchor: text.length,
+                head: text.length,
+              },
+            });
+          },
+        };
+      },
+      [view, onSubmit],
+    );
+
+    return <div ref={parentRef} className={mx('is-full', classNames)} />;
+  },
+);