@dxos/react-ui-chat 0.8.4-main.3a94e84 → 0.8.4-main.3eb6e50203

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/lib/browser/index.mjs +142 -334
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +142 -334
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/components/ChatDialog/ChatDialog.d.ts +1 -1
  8. package/dist/types/src/components/ChatDialog/ChatDialog.d.ts.map +1 -1
  9. package/dist/types/src/components/ChatDialog/ChatDialog.stories.d.ts +35 -5
  10. package/dist/types/src/components/ChatDialog/ChatDialog.stories.d.ts.map +1 -1
  11. package/dist/types/src/components/ChatEditor/ChatEditor.d.ts +7 -8
  12. package/dist/types/src/components/ChatEditor/ChatEditor.d.ts.map +1 -1
  13. package/dist/types/src/components/ChatEditor/ChatEditor.stories.d.ts +20 -5
  14. package/dist/types/src/components/ChatEditor/ChatEditor.stories.d.ts.map +1 -1
  15. package/dist/types/src/components/ChatEditor/references.d.ts +4 -0
  16. package/dist/types/src/components/ChatEditor/references.d.ts.map +1 -1
  17. package/dist/types/src/index.d.ts +1 -0
  18. package/dist/types/src/index.d.ts.map +1 -1
  19. package/dist/types/src/translations.d.ts +2 -35
  20. package/dist/types/src/translations.d.ts.map +1 -1
  21. package/dist/types/tsconfig.tsbuildinfo +1 -1
  22. package/package.json +43 -39
  23. package/src/components/ChatDialog/ChatDialog.stories.tsx +9 -10
  24. package/src/components/ChatDialog/ChatDialog.tsx +21 -15
  25. package/src/components/ChatEditor/ChatEditor.stories.tsx +25 -24
  26. package/src/components/ChatEditor/ChatEditor.tsx +33 -63
  27. package/src/components/ChatEditor/references.ts +18 -12
  28. package/src/index.ts +1 -0
  29. package/src/translations.ts +2 -41
  30. package/dist/types/src/components/ChatEditor/autocomplete.d.ts +0 -25
  31. package/dist/types/src/components/ChatEditor/autocomplete.d.ts.map +0 -1
  32. package/src/components/ChatEditor/autocomplete.ts +0 -218
package/package.json CHANGED
@@ -1,14 +1,19 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-chat",
3
- "version": "0.8.4-main.3a94e84",
3
+ "version": "0.8.4-main.3eb6e50203",
4
4
  "description": "Chat components.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/dxos/dxos"
10
+ },
7
11
  "license": "MIT",
8
12
  "author": "DXOS.org",
9
13
  "type": "module",
10
14
  "exports": {
11
15
  ".": {
16
+ "source": "./src/index.ts",
12
17
  "types": "./dist/types/src/index.d.ts",
13
18
  "browser": "./dist/lib/browser/index.mjs",
14
19
  "node": "./dist/lib/node-esm/index.mjs"
@@ -23,50 +28,49 @@
23
28
  "src"
24
29
  ],
25
30
  "dependencies": {
26
- "@codemirror/autocomplete": "^6.18.1",
27
- "@codemirror/language": "^6.10.3",
28
- "@codemirror/search": "^6.5.6",
29
- "@codemirror/state": "^6.4.1",
30
- "@codemirror/view": "^6.34.1",
31
- "@preact-signals/safe-react": "^0.9.0",
32
- "@preact/signals-core": "^1.9.0",
31
+ "@codemirror/autocomplete": "^6.19.0",
32
+ "@codemirror/language": "^6.11.3",
33
+ "@codemirror/search": "^6.5.11",
34
+ "@codemirror/state": "^6.5.2",
35
+ "@codemirror/view": "^6.38.4",
36
+ "@fluentui/react-tabster": "9.26.11",
33
37
  "@radix-ui/react-accordion": "1.2.3",
34
38
  "@radix-ui/react-context": "1.1.1",
35
- "@dxos/async": "0.8.4-main.3a94e84",
36
- "@dxos/debug": "0.8.4-main.3a94e84",
37
- "@dxos/echo-schema": "0.8.4-main.3a94e84",
38
- "@dxos/invariant": "0.8.4-main.3a94e84",
39
- "@dxos/live-object": "0.8.4-main.3a94e84",
40
- "@dxos/log": "0.8.4-main.3a94e84",
41
- "@dxos/react-ui-components": "0.8.4-main.3a94e84",
42
- "@dxos/react-ui": "0.8.4-main.3a94e84",
43
- "@dxos/react-ui-dnd": "0.8.4-main.3a94e84",
44
- "@dxos/react-ui-sfx": "0.8.4-main.3a94e84",
45
- "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3a94e84",
46
- "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
47
- "@dxos/react-ui-types": "0.8.4-main.3a94e84",
48
- "@dxos/react-ui-editor": "0.8.4-main.3a94e84",
49
- "@dxos/util": "0.8.4-main.3a94e84",
50
- "@dxos/react-ui-text-tooltip": "0.8.4-main.3a94e84"
39
+ "@dxos/async": "0.8.4-main.3eb6e50203",
40
+ "@dxos/debug": "0.8.4-main.3eb6e50203",
41
+ "@dxos/echo": "0.8.4-main.3eb6e50203",
42
+ "@dxos/log": "0.8.4-main.3eb6e50203",
43
+ "@dxos/react-ui": "0.8.4-main.3eb6e50203",
44
+ "@dxos/invariant": "0.8.4-main.3eb6e50203",
45
+ "@dxos/react-ui-components": "0.8.4-main.3eb6e50203",
46
+ "@dxos/react-ui-dnd": "0.8.4-main.3eb6e50203",
47
+ "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
48
+ "@dxos/react-ui-sfx": "0.8.4-main.3eb6e50203",
49
+ "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3eb6e50203",
50
+ "@dxos/react-ui-text-tooltip": "0.8.4-main.3eb6e50203",
51
+ "@dxos/ui-editor": "0.8.4-main.3eb6e50203",
52
+ "@dxos/ui-types": "0.8.4-main.3eb6e50203",
53
+ "@dxos/util": "0.8.4-main.3eb6e50203",
54
+ "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
51
55
  },
52
56
  "devDependencies": {
53
- "@types/react": "~18.2.0",
54
- "@types/react-dom": "~18.2.0",
55
- "effect": "3.17.0",
56
- "react": "~18.2.0",
57
- "react-dom": "~18.2.0",
58
- "vite": "5.4.7",
59
- "@dxos/echo": "0.8.4-main.3a94e84",
60
- "@dxos/random": "0.8.4-main.3a94e84",
61
- "@dxos/react-client": "0.8.4-main.3a94e84",
62
- "@dxos/storybook-utils": "0.8.4-main.3a94e84"
57
+ "@types/react": "~19.2.7",
58
+ "@types/react-dom": "~19.2.3",
59
+ "effect": "3.19.16",
60
+ "react": "~19.2.3",
61
+ "react-dom": "~19.2.3",
62
+ "vite": "7.1.9",
63
+ "@dxos/random": "0.8.4-main.3eb6e50203",
64
+ "@dxos/echo": "0.8.4-main.3eb6e50203",
65
+ "@dxos/react-client": "0.8.4-main.3eb6e50203",
66
+ "@dxos/storybook-utils": "0.8.4-main.3eb6e50203"
63
67
  },
64
68
  "peerDependencies": {
65
- "effect": "^3.13.3",
66
- "react": "~18.2.0",
67
- "react-dom": "~18.2.0",
68
- "@dxos/react-ui": "0.8.4-main.3a94e84",
69
- "@dxos/react-ui-theme": "0.8.4-main.3a94e84"
69
+ "effect": "3.19.16",
70
+ "react": "~19.2.3",
71
+ "react-dom": "~19.2.3",
72
+ "@dxos/react-ui": "0.8.4-main.3eb6e50203",
73
+ "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
70
74
  },
71
75
  "publishConfig": {
72
76
  "access": "public"
@@ -2,20 +2,19 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import '@dxos-theme';
6
-
7
- import { type StoryObj, type Meta } from '@storybook/react-vite';
5
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
8
6
  import React, { useState } from 'react';
9
7
 
10
8
  import { Input, Toolbar } from '@dxos/react-ui';
11
- import { withTheme, withLayout } from '@dxos/storybook-utils';
9
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
12
10
 
13
- import { ChatDialog } from './ChatDialog';
14
11
  import { translations } from '../../translations';
15
12
 
13
+ import { ChatDialog } from './ChatDialog';
14
+
16
15
  const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
17
16
 
18
- const meta: Meta<typeof ChatDialog.Root> = {
17
+ const meta = {
19
18
  title: 'ui/react-ui-chat/ChatDialog',
20
19
  component: ChatDialog.Root,
21
20
  render: (args) => {
@@ -43,7 +42,7 @@ const meta: Meta<typeof ChatDialog.Root> = {
43
42
  </div>
44
43
  ))}
45
44
  </ChatDialog.Content>
46
- <ChatDialog.Footer classNames='px-2 items-center'>
45
+ <ChatDialog.Footer classNames='pli-2 items-center'>
47
46
  <Input.Root>
48
47
  <Input.TextInput classNames='border-none' placeholder='Test' />
49
48
  </Input.Root>
@@ -52,14 +51,14 @@ const meta: Meta<typeof ChatDialog.Root> = {
52
51
  </>
53
52
  );
54
53
  },
55
- decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'flex flex-col' })],
54
+ decorators: [withTheme(), withLayout({ layout: 'column' })],
56
55
  parameters: {
57
56
  translations,
58
57
  },
59
- };
58
+ } satisfies Meta<typeof ChatDialog.Root>;
60
59
 
61
60
  export default meta;
62
61
 
63
- type Story = StoryObj<typeof ChatDialog.Root>;
62
+ type Story = StoryObj<typeof meta>;
64
63
 
65
64
  export const Default: Story = {};
@@ -5,16 +5,16 @@
5
5
  import { createContext } from '@radix-ui/react-context';
6
6
  import React, { type Dispatch, type PropsWithChildren, type SetStateAction, useEffect, useState } from 'react';
7
7
 
8
- import { Dialog, Icon, IconButton, useControlledState, type ThemedClassName } from '@dxos/react-ui';
9
- import { resizeAttributes, ResizeHandle, type Size, sizeStyle } from '@dxos/react-ui-dnd';
10
- import { mx } from '@dxos/react-ui-theme';
8
+ import { Dialog, Icon, IconButton, type ThemedClassName, useControlledState } from '@dxos/react-ui';
9
+ import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
10
+ import { mx } from '@dxos/ui-theme';
11
11
 
12
12
  const preventDefault = (event: Event) => event.preventDefault();
13
13
 
14
14
  // TODO(burdon): Factor out.
15
15
  const Endcap = ({ children }: PropsWithChildren) => {
16
16
  return (
17
- <div className='grid w-[var(--rail-action)] h-[var(--rail-action)] items-center justify-center'>{children}</div>
17
+ <div className='grid is-[var(--rail-action)] bs-[var(--rail-action)] items-center justify-center'>{children}</div>
18
18
  );
19
19
  };
20
20
 
@@ -47,15 +47,15 @@ type ChatDialogRootProps = PropsWithChildren<{
47
47
 
48
48
  const ChatDialogRoot = ({
49
49
  children,
50
- open: _open = false,
51
- expanded: _expanded = false,
50
+ open: openProp = false,
51
+ expanded: expandedProp = false,
52
52
  onOpenChange,
53
53
  onExpandedChange,
54
54
  onEscape,
55
55
  }: ChatDialogRootProps) => {
56
56
  const [size, setSize] = useState<Size>('min-content');
57
- const [open, setOpen] = useControlledState<boolean>(_open, onOpenChange);
58
- const [expanded, setExpanded] = useControlledState<boolean>(_expanded, onExpandedChange);
57
+ const [open, setOpen] = useControlledState<boolean>(openProp, onOpenChange);
58
+ const [expanded, setExpanded] = useControlledState<boolean>(expandedProp, onExpandedChange);
59
59
 
60
60
  // NOTE: We set the min size to 5rem (80px), and the header and prompt bar to 40px (i.e., the rail-size) each.
61
61
  // 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.
@@ -93,12 +93,14 @@ ChatDialogRoot.displayName = 'ChatDialog.Root';
93
93
  // Header
94
94
  //
95
95
 
96
+ const CHAT_DIALOG_HEADER_NAME = 'ChatDialog.Header';
97
+
96
98
  type ChatDialogHeaderProps = ThemedClassName<{
97
99
  title?: string;
98
100
  }>;
99
101
 
100
102
  const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
101
- const { expanded, setExpanded } = useChatDialogContext(ChatDialogHeader.displayName);
103
+ const { expanded, setExpanded } = useChatDialogContext(CHAT_DIALOG_HEADER_NAME);
102
104
 
103
105
  return (
104
106
  <div className={mx('grid grid-cols-[var(--rail-action)_1fr_min-content] items-center overflow-hidden', classNames)}>
@@ -108,7 +110,7 @@ const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
108
110
  </Dialog.Close>
109
111
  </Endcap>
110
112
  <Dialog.Title
111
- classNames='flex w-full justify-center text-sm text-subdued select-none cursor-pointer'
113
+ classNames='flex is-full justify-center text-sm text-subdued select-none cursor-pointer'
112
114
  onClick={() => setExpanded((expanded) => !expanded)}
113
115
  >
114
116
  {title}
@@ -127,16 +129,18 @@ const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
127
129
  );
128
130
  };
129
131
 
130
- ChatDialogHeader.displayName = 'ChatDialog.Header';
132
+ ChatDialogHeader.displayName = CHAT_DIALOG_HEADER_NAME;
131
133
 
132
134
  //
133
135
  // Content
134
136
  //
135
137
 
138
+ const CHAT_DIALOG_CONTENT_NAME = 'ChatDialog.Content';
139
+
136
140
  type ChatDialogContentProps = ThemedClassName<PropsWithChildren>;
137
141
 
138
142
  const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) => {
139
- const { expanded, size, setSize } = useChatDialogContext(ChatDialogContent.displayName);
143
+ const { expanded, size, setSize } = useChatDialogContext(CHAT_DIALOG_CONTENT_NAME);
140
144
  useEffect(() => {
141
145
  setSize(expanded ? 'min-content' : 0);
142
146
  }, [expanded]);
@@ -144,7 +148,7 @@ const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) =>
144
148
  return (
145
149
  <div
146
150
  className={mx(
147
- 'flex flex-col overflow-y-auto border-t border-b border-subduedSeparator',
151
+ 'border-bs border-be border-subduedSeparator',
148
152
  'transition-[block-size] ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200',
149
153
  classNames,
150
154
  )}
@@ -167,19 +171,21 @@ const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) =>
167
171
  );
168
172
  };
169
173
 
170
- ChatDialogContent.displayName = 'ChatDialog.Content';
174
+ ChatDialogContent.displayName = CHAT_DIALOG_CONTENT_NAME;
171
175
 
172
176
  //
173
177
  // Footer
174
178
  //
175
179
 
180
+ const CHAT_DIALOG_FOOTER_NAME = 'ChatDialog.Footer';
181
+
176
182
  type ChatDialogFooterProps = ThemedClassName<PropsWithChildren>;
177
183
 
178
184
  const ChatDialogFooter = ({ children, classNames }: ChatDialogFooterProps) => {
179
185
  return <div className={mx(classNames)}>{children}</div>;
180
186
  };
181
187
 
182
- ChatDialogFooter.displayName = 'ChatDialog.Footer';
188
+ ChatDialogFooter.displayName = CHAT_DIALOG_FOOTER_NAME;
183
189
 
184
190
  //
185
191
  // ChatDialog
@@ -2,32 +2,31 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import '@dxos-theme';
6
-
7
- import { type StoryObj, type Meta } from '@storybook/react-vite';
5
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
8
6
 
9
7
  import { log } from '@dxos/log';
10
- import { withTheme } from '@dxos/storybook-utils';
8
+ import { withTheme } from '@dxos/react-ui/testing';
9
+
10
+ import { translations } from '../../translations';
11
11
 
12
12
  import { ChatEditor } from './ChatEditor';
13
13
  import { type ReferenceData } from './references';
14
- import { translations } from '../../translations';
15
14
 
16
- const meta: Meta<typeof ChatEditor> = {
15
+ const meta = {
17
16
  title: 'ui/react-ui-chat/ChatEditor',
18
17
  component: ChatEditor,
19
- decorators: [withTheme],
18
+ decorators: [withTheme()],
20
19
  parameters: {
21
20
  layout: 'centered',
22
21
  translations,
23
22
  },
24
- };
23
+ } satisfies Meta<typeof ChatEditor>;
25
24
 
26
25
  export default meta;
27
26
 
28
- const classNames = 'w-[20rem] p-2 border border-separator';
27
+ const classNames = 'is-[20rem] p-2 border border-separator';
29
28
 
30
- type Story = StoryObj<typeof ChatEditor>;
29
+ type Story = StoryObj<typeof meta>;
31
30
 
32
31
  export const Default: Story = {
33
32
  args: {
@@ -35,31 +34,33 @@ export const Default: Story = {
35
34
  },
36
35
  };
37
36
 
37
+ // TODO(burdon): Restore and reconcile with suggest/typeahead.
38
38
  export const WithSuggestions: Story = {
39
39
  args: {
40
40
  classNames,
41
41
  onSubmit: (text) => {
42
42
  log('onSubmit', { text });
43
43
  },
44
- onSuggest: (text) => {
45
- const trimmed = text.trim().toLowerCase();
46
- if (trimmed.length < 2) {
47
- return [];
48
- }
44
+ // onSuggest: (text) => {
45
+ // const trimmed = text.trim().toLowerCase();
46
+ // if (trimmed.length < 2) {
47
+ // return [];
48
+ // }
49
49
 
50
- const suggestions = [
51
- 'Create a kanban board',
52
- 'Create a new project',
53
- 'Find flights to Tokyo',
54
- "Let's play chess",
55
- 'Show me Paris on a map',
56
- ];
50
+ // const suggestions = [
51
+ // 'Create a kanban board',
52
+ // 'Create a new project',
53
+ // 'Find flights to Tokyo',
54
+ // "Let's play chess",
55
+ // 'Show me Paris on a map',
56
+ // ];
57
57
 
58
- return suggestions.filter((s) => s.toLowerCase().startsWith(text));
59
- },
58
+ // return suggestions.filter((s) => s.toLowerCase().startsWith(text));
59
+ // },
60
60
  },
61
61
  };
62
62
 
63
+ // TODO(burdon): Replace.
63
64
  const references: ReferenceData[] = [
64
65
  {
65
66
  uri: 'dxn:echo:@:AAAAAAAA',
@@ -3,85 +3,55 @@
3
3
  //
4
4
 
5
5
  import { type Extension } from '@codemirror/state';
6
- import React, { forwardRef, useImperativeHandle } from 'react';
6
+ import React, { forwardRef, useMemo } from 'react';
7
7
 
8
8
  import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
9
+ import { Editor, type EditorController, type UseTextEditorProps } from '@dxos/react-ui-editor';
9
10
  import {
10
11
  type BasicExtensionsOptions,
11
- type UseTextEditorProps,
12
+ type SubmitOptions,
12
13
  createBasicExtensions,
13
14
  createThemeExtensions,
14
- useTextEditor,
15
- } from '@dxos/react-ui-editor';
16
- import { mx } from '@dxos/react-ui-theme';
17
- import { isNonNullable } from '@dxos/util';
15
+ submit,
16
+ } from '@dxos/ui-editor';
17
+ import { isTruthy } from '@dxos/util';
18
18
 
19
- import { autocomplete, type AutocompleteOptions } from './autocomplete';
20
- import { references as referencesExtension, type ReferencesOptions } from './references';
19
+ import { type ReferencesOptions } from './references';
21
20
 
22
- // TODO(burdon): Handle object references.
23
-
24
- export interface ChatEditorController {
25
- focus(): void;
26
- setText(text: string): void;
27
- }
21
+ export interface ChatEditorController extends EditorController {}
28
22
 
29
23
  export type ChatEditorProps = ThemedClassName<
30
24
  {
31
25
  extensions?: Extension;
32
26
  references?: ReferencesOptions;
33
- } & AutocompleteOptions &
34
- Pick<UseTextEditorProps, 'autoFocus'> &
35
- Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
27
+ } & (SubmitOptions &
28
+ Pick<UseTextEditorProps, 'id' | 'autoFocus'> &
29
+ Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>)
36
30
  >;
37
31
 
32
+ export const useChatExtensions = ({ extensions, lineWrapping = false, placeholder, onSubmit }: ChatEditorProps) => {
33
+ const { themeMode } = useThemeContext();
34
+ return useMemo<Extension[]>(
35
+ () =>
36
+ [
37
+ createThemeExtensions({ themeMode }),
38
+ createBasicExtensions({ bracketMatching: false, lineWrapping, placeholder }),
39
+ submit({ onSubmit }),
40
+ extensions,
41
+ ].filter(isTruthy),
42
+ [themeMode, extensions, onSubmit],
43
+ );
44
+ };
45
+
38
46
  export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
39
- (
40
- { classNames, extensions, references, autoFocus, lineWrapping = false, placeholder, onSubmit, onSuggest, onCancel },
41
- forwardRef,
42
- ) => {
43
- const { themeMode } = useThemeContext();
44
- const { parentRef, view } = useTextEditor(
45
- {
46
- debug: true,
47
- autoFocus,
48
- extensions: [
49
- createThemeExtensions({ themeMode }),
50
- autocomplete({ onSubmit, onSuggest, onCancel }),
51
- references ? referencesExtension({ provider: references.provider }) : [],
52
- createBasicExtensions({
53
- bracketMatching: false,
54
- lineWrapping,
55
- placeholder,
56
- }),
57
- extensions,
58
- ].filter(isNonNullable),
59
- },
60
- [themeMode, extensions, onSubmit, onSuggest],
47
+ ({ classNames, autoFocus, extensions: extensionsProp, lineWrapping = false, placeholder, onSubmit }, forwardRef) => {
48
+ const extensions = useChatExtensions({ extensions: extensionsProp, lineWrapping, placeholder, onSubmit });
49
+
50
+ // TODO(burdon): Popover.
51
+ return (
52
+ <Editor.Root ref={forwardRef}>
53
+ <Editor.Content classNames={classNames} autoFocus={autoFocus} extensions={extensions} />
54
+ </Editor.Root>
61
55
  );
62
-
63
- // Expose editor view.
64
- useImperativeHandle(forwardRef, () => {
65
- return {
66
- focus: () => {
67
- view?.focus();
68
- },
69
- setText: (text: string) => {
70
- view?.dispatch({
71
- changes: {
72
- from: 0,
73
- to: view.state.doc.length,
74
- insert: text,
75
- },
76
- selection: {
77
- anchor: text.length,
78
- head: text.length,
79
- },
80
- });
81
- },
82
- };
83
- }, [view, onSubmit]);
84
-
85
- return <div ref={parentRef} className={mx('is-full', classNames)} />;
86
56
  },
87
57
  );
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { autocompletion, completionKeymap, type CompletionResult } from '@codemirror/autocomplete';
5
+ import { type CompletionResult, autocompletion, completionKeymap } from '@codemirror/autocomplete';
6
6
  import { type Extension, RangeSet } from '@codemirror/state';
7
7
  import {
8
8
  Decoration,
@@ -19,10 +19,14 @@ import { invariant } from '@dxos/invariant';
19
19
 
20
20
  // TODO(dmaretskyi): Consider adding details renderer for when you hover over the reference.
21
21
  export type ReferenceData = {
22
- uri: string;
22
+ uri: string; // TODO(burdon): Rename dxn.
23
23
  label: string;
24
24
  };
25
25
 
26
+ /**
27
+ * @deprecated
28
+ */
29
+ // TODO(burdon): Remove.
26
30
  export interface ReferencesProvider {
27
31
  getReferences({ query }: { query: string }): Promise<ReferenceData[]>;
28
32
  resolveReference({ uri }: { uri: string }): Promise<ReferenceData | null>;
@@ -45,7 +49,9 @@ export type ReferencesOptions = {
45
49
 
46
50
  /**
47
51
  * Lookup object references.
52
+ * @deprecated
48
53
  */
54
+ // TODO(burdon): Remove.
49
55
  export const references = ({ provider, triggerCharacter = '@', debug = false }: ReferencesOptions): Extension => {
50
56
  invariant(triggerCharacter.length === 1);
51
57
 
@@ -103,7 +109,7 @@ export const references = ({ provider, triggerCharacter = '@', debug = false }:
103
109
  },
104
110
  {
105
111
  decorations: (v) => v.decorations,
106
- provide: (plugin) => [
112
+ provide: () => [
107
113
  EditorView.atomicRanges.of(
108
114
  (view): DecorationSet => view.plugin(decorationField)?.decorations ?? RangeSet.empty,
109
115
  ),
@@ -158,18 +164,18 @@ class ReferenceWidget extends WidgetType {
158
164
  super();
159
165
  }
160
166
 
161
- override toDOM(): HTMLSpanElement {
162
- const span = document.createElement('span');
163
- span.textContent = `@ ${this.data.label}`;
164
- span.className = 'cm-reference-pill';
165
- return span;
167
+ override ignoreEvent() {
168
+ return true;
166
169
  }
167
170
 
168
- override eq(other: ReferenceWidget): boolean {
169
- return other.data.uri === this.data.uri;
171
+ override eq(other: this) {
172
+ return this.data.uri === other.data.uri;
170
173
  }
171
174
 
172
- override ignoreEvent(): boolean {
173
- return true;
175
+ override toDOM() {
176
+ const span = document.createElement('span');
177
+ span.textContent = `@${this.data.label}`;
178
+ span.className = 'cm-reference-pill';
179
+ return span;
174
180
  }
175
181
  }
package/src/index.ts CHANGED
@@ -3,3 +3,4 @@
3
3
  //
4
4
 
5
5
  export * from './components';
6
+ export * from './translations';
@@ -4,51 +4,12 @@
4
4
 
5
5
  import { type Resource } from '@dxos/react-ui';
6
6
 
7
- export const translationKey = 'react-ui-chat';
7
+ export const translationKey = '@dxos/react-ui-chat';
8
8
 
9
9
  export const translations = [
10
10
  {
11
11
  'en-US': {
12
- [translationKey]: {
13
- 'templates label': 'Templates',
14
- 'open ambient chat label': 'Open Assistant',
15
- 'assistant chat label': 'Assistant',
16
- 'plugin name': 'Assistant',
17
- 'object placeholder': 'New prompt',
18
- 'create object label': 'Create prompt',
19
- 'create trigger label': 'Create trigger',
20
- 'create stack section label': 'Create prompt',
21
- 'command placeholder': 'Enter slash command...',
22
- 'template placeholder': 'Enter template...',
23
- 'value placeholder': 'Enter value...',
24
- 'prompt rules label': 'Prompt Rules',
25
- 'typename placeholder': 'Enter typename of objects which this template is for',
26
- 'description placeholder': 'Enter description of when this template should be used',
27
- 'select preset template placeholder': 'Select preset',
28
- 'service registry label': 'Service Registry',
29
-
30
- 'sequence logs label': 'Logs',
31
-
32
- 'assistant dialog title': 'Assistant',
33
- 'open assistant label': 'Open assistant',
34
-
35
- 'search input placeholder': 'Search...',
36
- 'chat input placeholder': 'Ask a question...',
37
- 'chat stop': 'Cancel request.',
38
-
39
- 'button save': 'Save',
40
- 'button run': 'Run',
41
-
42
- 'prompt placeholder': 'Ask a question...',
43
- 'microphone button': 'Click to speak',
44
- 'cancel processing button': 'Stop processing',
45
-
46
- 'settings default label': 'Default',
47
- 'settings custom prompts label': 'Use custom prompts',
48
- 'settings llm provider label': 'LLM provider',
49
- 'settings edge llm model label': 'Remote language model',
50
- 'settings ollama llm model label': 'Ollama language model',
51
- },
12
+ [translationKey]: {},
52
13
  },
53
14
  },
54
15
  ] as const satisfies Resource[];
@@ -1,25 +0,0 @@
1
- import { type Extension } from '@codemirror/state';
2
- export type AutocompleteOptions = {
3
- /**
4
- * Callback triggered when Enter is pressed.
5
- * @param text The current text in the editor
6
- * @returns true if the editor should reset the document.
7
- */
8
- onSubmit?: (text: string) => boolean | void;
9
- /**
10
- * Function that returns a list of suggestions based on the current text.
11
- * @param text The current text before the cursor
12
- * @returns Array of suggestion strings
13
- */
14
- onSuggest?: (text: string) => string[];
15
- /**
16
- * ESC pressed.
17
- */
18
- onCancel?: () => void;
19
- };
20
- /**
21
- * Creates an autocomplete extension that shows inline suggestions.
22
- * Pressing Tab will complete the suggestion.
23
- */
24
- export declare const autocomplete: ({ onSubmit, onSuggest, onCancel }: AutocompleteOptions) => Extension;
25
- //# sourceMappingURL=autocomplete.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChatEditor/autocomplete.ts"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAWzD,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,YAAY,GAAI,mCAAmC,mBAAmB,KAAG,SA+JrF,CAAC"}