@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.
- package/dist/lib/browser/index.mjs +142 -334
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +142 -334
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ChatDialog/ChatDialog.d.ts +1 -1
- package/dist/types/src/components/ChatDialog/ChatDialog.d.ts.map +1 -1
- package/dist/types/src/components/ChatDialog/ChatDialog.stories.d.ts +35 -5
- package/dist/types/src/components/ChatDialog/ChatDialog.stories.d.ts.map +1 -1
- package/dist/types/src/components/ChatEditor/ChatEditor.d.ts +7 -8
- package/dist/types/src/components/ChatEditor/ChatEditor.d.ts.map +1 -1
- package/dist/types/src/components/ChatEditor/ChatEditor.stories.d.ts +20 -5
- package/dist/types/src/components/ChatEditor/ChatEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/ChatEditor/references.d.ts +4 -0
- package/dist/types/src/components/ChatEditor/references.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +2 -35
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +43 -39
- package/src/components/ChatDialog/ChatDialog.stories.tsx +9 -10
- package/src/components/ChatDialog/ChatDialog.tsx +21 -15
- package/src/components/ChatEditor/ChatEditor.stories.tsx +25 -24
- package/src/components/ChatEditor/ChatEditor.tsx +33 -63
- package/src/components/ChatEditor/references.ts +18 -12
- package/src/index.ts +1 -0
- package/src/translations.ts +2 -41
- package/dist/types/src/components/ChatEditor/autocomplete.d.ts +0 -25
- package/dist/types/src/components/ChatEditor/autocomplete.d.ts.map +0 -1
- 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.
|
|
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.
|
|
27
|
-
"@codemirror/language": "^6.
|
|
28
|
-
"@codemirror/search": "^6.5.
|
|
29
|
-
"@codemirror/state": "^6.
|
|
30
|
-
"@codemirror/view": "^6.
|
|
31
|
-
"@
|
|
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.
|
|
36
|
-
"@dxos/debug": "0.8.4-main.
|
|
37
|
-
"@dxos/echo
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/react-ui-components": "0.8.4-main.
|
|
42
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
43
|
-
"@dxos/react-ui-
|
|
44
|
-
"@dxos/react-ui-sfx": "0.8.4-main.
|
|
45
|
-
"@dxos/react-ui-syntax-highlighter": "0.8.4-main.
|
|
46
|
-
"@dxos/react-ui-
|
|
47
|
-
"@dxos/
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/util": "0.8.4-main.
|
|
50
|
-
"@dxos/
|
|
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": "~
|
|
54
|
-
"@types/react-dom": "~
|
|
55
|
-
"effect": "3.
|
|
56
|
-
"react": "~
|
|
57
|
-
"react-dom": "~
|
|
58
|
-
"vite": "
|
|
59
|
-
"@dxos/
|
|
60
|
-
"@dxos/
|
|
61
|
-
"@dxos/react-client": "0.8.4-main.
|
|
62
|
-
"@dxos/storybook-utils": "0.8.4-main.
|
|
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": "
|
|
66
|
-
"react": "~
|
|
67
|
-
"react-dom": "~
|
|
68
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
69
|
-
"@dxos/
|
|
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 '@
|
|
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 {
|
|
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
|
|
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='
|
|
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({
|
|
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
|
|
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,
|
|
9
|
-
import {
|
|
10
|
-
import { mx } from '@dxos/
|
|
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
|
|
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:
|
|
51
|
-
expanded:
|
|
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>(
|
|
58
|
-
const [expanded, setExpanded] = useControlledState<boolean>(
|
|
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(
|
|
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
|
|
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 =
|
|
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(
|
|
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
|
-
'
|
|
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 =
|
|
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 =
|
|
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 '@
|
|
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/
|
|
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
|
|
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 = '
|
|
27
|
+
const classNames = 'is-[20rem] p-2 border border-separator';
|
|
29
28
|
|
|
30
|
-
type Story = StoryObj<typeof
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
// onSuggest: (text) => {
|
|
45
|
+
// const trimmed = text.trim().toLowerCase();
|
|
46
|
+
// if (trimmed.length < 2) {
|
|
47
|
+
// return [];
|
|
48
|
+
// }
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
|
12
|
+
type SubmitOptions,
|
|
12
13
|
createBasicExtensions,
|
|
13
14
|
createThemeExtensions,
|
|
14
|
-
|
|
15
|
-
} from '@dxos/
|
|
16
|
-
import {
|
|
17
|
-
import { isNonNullable } from '@dxos/util';
|
|
15
|
+
submit,
|
|
16
|
+
} from '@dxos/ui-editor';
|
|
17
|
+
import { isTruthy } from '@dxos/util';
|
|
18
18
|
|
|
19
|
-
import {
|
|
20
|
-
import { references as referencesExtension, type ReferencesOptions } from './references';
|
|
19
|
+
import { type ReferencesOptions } from './references';
|
|
21
20
|
|
|
22
|
-
|
|
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
|
-
} &
|
|
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
|
-
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
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
|
|
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: (
|
|
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
|
|
162
|
-
|
|
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:
|
|
169
|
-
return
|
|
171
|
+
override eq(other: this) {
|
|
172
|
+
return this.data.uri === other.data.uri;
|
|
170
173
|
}
|
|
171
174
|
|
|
172
|
-
override
|
|
173
|
-
|
|
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
package/src/translations.ts
CHANGED
|
@@ -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"}
|