@dxos/react-ui-chat 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5
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 +138 -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 +138 -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 -9
- 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 +42 -39
- package/src/components/ChatDialog/ChatDialog.stories.tsx +6 -9
- package/src/components/ChatDialog/ChatDialog.tsx +27 -17
- package/src/components/ChatEditor/ChatEditor.stories.tsx +21 -22
- package/src/components/ChatEditor/ChatEditor.tsx +33 -65
- 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 -26
- package/dist/types/src/components/ChatEditor/autocomplete.d.ts.map +0 -1
- package/src/components/ChatEditor/autocomplete.ts +0 -220
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-chat",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.fcfe5033a5",
|
|
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",
|
|
@@ -24,50 +28,49 @@
|
|
|
24
28
|
"src"
|
|
25
29
|
],
|
|
26
30
|
"dependencies": {
|
|
27
|
-
"@codemirror/autocomplete": "^6.
|
|
28
|
-
"@codemirror/language": "^6.
|
|
29
|
-
"@codemirror/search": "^6.5.
|
|
30
|
-
"@codemirror/state": "^6.
|
|
31
|
-
"@codemirror/view": "^6.
|
|
32
|
-
"@
|
|
33
|
-
"@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",
|
|
34
37
|
"@radix-ui/react-accordion": "1.2.3",
|
|
35
38
|
"@radix-ui/react-context": "1.1.1",
|
|
36
|
-
"@dxos/async": "0.8.4-main.
|
|
37
|
-
"@dxos/debug": "0.8.4-main.
|
|
38
|
-
"@dxos/echo
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/
|
|
41
|
-
"@dxos/react-ui-components": "0.8.4-main.
|
|
42
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/react-ui-
|
|
45
|
-
"@dxos/react-ui-
|
|
46
|
-
"@dxos/react-ui-
|
|
47
|
-
"@dxos/
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
39
|
+
"@dxos/async": "0.8.4-main.fcfe5033a5",
|
|
40
|
+
"@dxos/debug": "0.8.4-main.fcfe5033a5",
|
|
41
|
+
"@dxos/echo": "0.8.4-main.fcfe5033a5",
|
|
42
|
+
"@dxos/react-ui": "0.8.4-main.fcfe5033a5",
|
|
43
|
+
"@dxos/log": "0.8.4-main.fcfe5033a5",
|
|
44
|
+
"@dxos/react-ui-components": "0.8.4-main.fcfe5033a5",
|
|
45
|
+
"@dxos/react-ui-dnd": "0.8.4-main.fcfe5033a5",
|
|
46
|
+
"@dxos/invariant": "0.8.4-main.fcfe5033a5",
|
|
47
|
+
"@dxos/react-ui-sfx": "0.8.4-main.fcfe5033a5",
|
|
48
|
+
"@dxos/react-ui-editor": "0.8.4-main.fcfe5033a5",
|
|
49
|
+
"@dxos/react-ui-syntax-highlighter": "0.8.4-main.fcfe5033a5",
|
|
50
|
+
"@dxos/ui-editor": "0.8.4-main.fcfe5033a5",
|
|
51
|
+
"@dxos/ui-theme": "0.8.4-main.fcfe5033a5",
|
|
52
|
+
"@dxos/ui-types": "0.8.4-main.fcfe5033a5",
|
|
53
|
+
"@dxos/util": "0.8.4-main.fcfe5033a5",
|
|
54
|
+
"@dxos/react-ui-text-tooltip": "0.8.4-main.fcfe5033a5"
|
|
52
55
|
},
|
|
53
56
|
"devDependencies": {
|
|
54
|
-
"@types/react": "~
|
|
55
|
-
"@types/react-dom": "~
|
|
56
|
-
"effect": "3.
|
|
57
|
-
"react": "~
|
|
58
|
-
"react-dom": "~
|
|
59
|
-
"vite": "
|
|
60
|
-
"@dxos/echo": "0.8.4-main.
|
|
61
|
-
"@dxos/
|
|
62
|
-
"@dxos/
|
|
63
|
-
"@dxos/react-client": "0.8.4-main.
|
|
57
|
+
"@types/react": "~19.2.7",
|
|
58
|
+
"@types/react-dom": "~19.2.3",
|
|
59
|
+
"effect": "3.20.0",
|
|
60
|
+
"react": "~19.2.3",
|
|
61
|
+
"react-dom": "~19.2.3",
|
|
62
|
+
"vite": "^7.1.11",
|
|
63
|
+
"@dxos/echo": "0.8.4-main.fcfe5033a5",
|
|
64
|
+
"@dxos/random": "0.8.4-main.fcfe5033a5",
|
|
65
|
+
"@dxos/storybook-utils": "0.8.4-main.fcfe5033a5",
|
|
66
|
+
"@dxos/react-client": "0.8.4-main.fcfe5033a5"
|
|
64
67
|
},
|
|
65
68
|
"peerDependencies": {
|
|
66
|
-
"effect": "
|
|
67
|
-
"react": "~
|
|
68
|
-
"react-dom": "~
|
|
69
|
-
"@dxos/
|
|
70
|
-
"@dxos/react-ui
|
|
69
|
+
"effect": "3.20.0",
|
|
70
|
+
"react": "~19.2.3",
|
|
71
|
+
"react-dom": "~19.2.3",
|
|
72
|
+
"@dxos/ui-theme": "0.8.4-main.fcfe5033a5",
|
|
73
|
+
"@dxos/react-ui": "0.8.4-main.fcfe5033a5"
|
|
71
74
|
},
|
|
72
75
|
"publishConfig": {
|
|
73
76
|
"access": "public"
|
|
@@ -2,21 +2,18 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
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 { withLayout, withTheme } from '@dxos/
|
|
9
|
+
import { withLayout, withTheme } from '@dxos/react-ui/testing';
|
|
12
10
|
|
|
13
11
|
import { translations } from '../../translations';
|
|
14
|
-
|
|
15
12
|
import { ChatDialog } from './ChatDialog';
|
|
16
13
|
|
|
17
14
|
const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
|
|
18
15
|
|
|
19
|
-
const meta
|
|
16
|
+
const meta = {
|
|
20
17
|
title: 'ui/react-ui-chat/ChatDialog',
|
|
21
18
|
component: ChatDialog.Root,
|
|
22
19
|
render: (args) => {
|
|
@@ -39,7 +36,7 @@ const meta: Meta<typeof ChatDialog.Root> = {
|
|
|
39
36
|
<ChatDialog.Header title='Chat' />
|
|
40
37
|
<ChatDialog.Content>
|
|
41
38
|
{items.map((item) => (
|
|
42
|
-
<div key={item} className='
|
|
39
|
+
<div key={item} className='ps-4 pb-1'>
|
|
43
40
|
{item}
|
|
44
41
|
</div>
|
|
45
42
|
))}
|
|
@@ -53,14 +50,14 @@ const meta: Meta<typeof ChatDialog.Root> = {
|
|
|
53
50
|
</>
|
|
54
51
|
);
|
|
55
52
|
},
|
|
56
|
-
decorators: [withTheme, withLayout({
|
|
53
|
+
decorators: [withTheme(), withLayout({ layout: 'column' })],
|
|
57
54
|
parameters: {
|
|
58
55
|
translations,
|
|
59
56
|
},
|
|
60
|
-
}
|
|
57
|
+
} satisfies Meta<typeof ChatDialog.Root>;
|
|
61
58
|
|
|
62
59
|
export default meta;
|
|
63
60
|
|
|
64
|
-
type Story = StoryObj<typeof
|
|
61
|
+
type Story = StoryObj<typeof meta>;
|
|
65
62
|
|
|
66
63
|
export const Default: Story = {};
|
|
@@ -7,14 +7,16 @@ import React, { type Dispatch, type PropsWithChildren, type SetStateAction, useE
|
|
|
7
7
|
|
|
8
8
|
import { Dialog, Icon, IconButton, type ThemedClassName, useControlledState } from '@dxos/react-ui';
|
|
9
9
|
import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
|
|
10
|
-
import { mx } from '@dxos/
|
|
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'>
|
|
17
|
+
<div className='grid w-[var(--dx-rail-action)] h-[var(--dx-rail-action)] items-center justify-center'>
|
|
18
|
+
{children}
|
|
19
|
+
</div>
|
|
18
20
|
);
|
|
19
21
|
};
|
|
20
22
|
|
|
@@ -47,15 +49,15 @@ type ChatDialogRootProps = PropsWithChildren<{
|
|
|
47
49
|
|
|
48
50
|
const ChatDialogRoot = ({
|
|
49
51
|
children,
|
|
50
|
-
open:
|
|
51
|
-
expanded:
|
|
52
|
+
open: openProp = false,
|
|
53
|
+
expanded: expandedProp = false,
|
|
52
54
|
onOpenChange,
|
|
53
55
|
onExpandedChange,
|
|
54
56
|
onEscape,
|
|
55
57
|
}: ChatDialogRootProps) => {
|
|
56
58
|
const [size, setSize] = useState<Size>('min-content');
|
|
57
|
-
const [open, setOpen] = useControlledState<boolean>(
|
|
58
|
-
const [expanded, setExpanded] = useControlledState<boolean>(
|
|
59
|
+
const [open, setOpen] = useControlledState<boolean>(openProp, onOpenChange);
|
|
60
|
+
const [expanded, setExpanded] = useControlledState<boolean>(expandedProp, onExpandedChange);
|
|
59
61
|
|
|
60
62
|
// NOTE: We set the min size to 5rem (80px), and the header and prompt bar to 40px (i.e., the rail-size) each.
|
|
61
63
|
// 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.
|
|
@@ -71,10 +73,10 @@ const ChatDialogRoot = ({
|
|
|
71
73
|
<Dialog.Root modal={false} open={open} onOpenChange={setOpen}>
|
|
72
74
|
<div role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
|
|
73
75
|
<Dialog.Content
|
|
76
|
+
size='md'
|
|
74
77
|
inOverlayLayout
|
|
75
78
|
classNames={[
|
|
76
|
-
'grid grid-rows-[var(--rail-action)_1fr_min-content] p-0 overflow-hidden',
|
|
77
|
-
'box-content md:is-[35rem] md:max-is-none pointer-events-auto',
|
|
79
|
+
'grid grid-rows-[var(--dx-rail-action)_1fr_min-content] p-0 overflow-hidden box-content pointer-events-auto',
|
|
78
80
|
]}
|
|
79
81
|
onEscapeKeyDown={onEscape}
|
|
80
82
|
onInteractOutside={preventDefault}
|
|
@@ -93,15 +95,19 @@ ChatDialogRoot.displayName = 'ChatDialog.Root';
|
|
|
93
95
|
// Header
|
|
94
96
|
//
|
|
95
97
|
|
|
98
|
+
const CHAT_DIALOG_HEADER_NAME = 'ChatDialog.Header';
|
|
99
|
+
|
|
96
100
|
type ChatDialogHeaderProps = ThemedClassName<{
|
|
97
101
|
title?: string;
|
|
98
102
|
}>;
|
|
99
103
|
|
|
100
104
|
const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
|
|
101
|
-
const { expanded, setExpanded } = useChatDialogContext(
|
|
105
|
+
const { expanded, setExpanded } = useChatDialogContext(CHAT_DIALOG_HEADER_NAME);
|
|
102
106
|
|
|
103
107
|
return (
|
|
104
|
-
<div
|
|
108
|
+
<div
|
|
109
|
+
className={mx('grid grid-cols-[var(--dx-rail-action)_1fr_min-content] items-center overflow-hidden', classNames)}
|
|
110
|
+
>
|
|
105
111
|
<Endcap>
|
|
106
112
|
<Dialog.Close>
|
|
107
113
|
<Icon icon='ph--x--regular' />
|
|
@@ -118,7 +124,7 @@ const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
|
|
|
118
124
|
variant='ghost'
|
|
119
125
|
icon='ph--caret-up--regular'
|
|
120
126
|
iconOnly
|
|
121
|
-
classNames={mx('
|
|
127
|
+
classNames={mx('p-1! [&>svg]:transition [&>svg]:duration-200', expanded && '[&>svg]:rotate-180')}
|
|
122
128
|
label={expanded ? 'Close' : 'Open'}
|
|
123
129
|
onClick={() => setExpanded((expanded) => !expanded)}
|
|
124
130
|
/>
|
|
@@ -127,16 +133,18 @@ const ChatDialogHeader = ({ classNames, title }: ChatDialogHeaderProps) => {
|
|
|
127
133
|
);
|
|
128
134
|
};
|
|
129
135
|
|
|
130
|
-
ChatDialogHeader.displayName =
|
|
136
|
+
ChatDialogHeader.displayName = CHAT_DIALOG_HEADER_NAME;
|
|
131
137
|
|
|
132
138
|
//
|
|
133
139
|
// Content
|
|
134
140
|
//
|
|
135
141
|
|
|
142
|
+
const CHAT_DIALOG_CONTENT_NAME = 'ChatDialog.Content';
|
|
143
|
+
|
|
136
144
|
type ChatDialogContentProps = ThemedClassName<PropsWithChildren>;
|
|
137
145
|
|
|
138
146
|
const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) => {
|
|
139
|
-
const { expanded, size, setSize } = useChatDialogContext(
|
|
147
|
+
const { expanded, size, setSize } = useChatDialogContext(CHAT_DIALOG_CONTENT_NAME);
|
|
140
148
|
useEffect(() => {
|
|
141
149
|
setSize(expanded ? 'min-content' : 0);
|
|
142
150
|
}, [expanded]);
|
|
@@ -144,8 +152,8 @@ const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) =>
|
|
|
144
152
|
return (
|
|
145
153
|
<div
|
|
146
154
|
className={mx(
|
|
147
|
-
'
|
|
148
|
-
'transition
|
|
155
|
+
'border-t border-b border-subdued-separator',
|
|
156
|
+
'transition ease-in-out duration-0 [&:not([data-dx-resizing="true"])]:duration-200',
|
|
149
157
|
classNames,
|
|
150
158
|
)}
|
|
151
159
|
style={{
|
|
@@ -167,19 +175,21 @@ const ChatDialogContent = ({ children, classNames }: ChatDialogContentProps) =>
|
|
|
167
175
|
);
|
|
168
176
|
};
|
|
169
177
|
|
|
170
|
-
ChatDialogContent.displayName =
|
|
178
|
+
ChatDialogContent.displayName = CHAT_DIALOG_CONTENT_NAME;
|
|
171
179
|
|
|
172
180
|
//
|
|
173
181
|
// Footer
|
|
174
182
|
//
|
|
175
183
|
|
|
184
|
+
const CHAT_DIALOG_FOOTER_NAME = 'ChatDialog.Footer';
|
|
185
|
+
|
|
176
186
|
type ChatDialogFooterProps = ThemedClassName<PropsWithChildren>;
|
|
177
187
|
|
|
178
188
|
const ChatDialogFooter = ({ children, classNames }: ChatDialogFooterProps) => {
|
|
179
189
|
return <div className={mx(classNames)}>{children}</div>;
|
|
180
190
|
};
|
|
181
191
|
|
|
182
|
-
ChatDialogFooter.displayName =
|
|
192
|
+
ChatDialogFooter.displayName = CHAT_DIALOG_FOOTER_NAME;
|
|
183
193
|
|
|
184
194
|
//
|
|
185
195
|
// ChatDialog
|
|
@@ -2,33 +2,30 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
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';
|
|
11
9
|
|
|
12
10
|
import { translations } from '../../translations';
|
|
13
|
-
|
|
14
11
|
import { ChatEditor } from './ChatEditor';
|
|
15
12
|
import { type ReferenceData } from './references';
|
|
16
13
|
|
|
17
|
-
const meta
|
|
14
|
+
const meta = {
|
|
18
15
|
title: 'ui/react-ui-chat/ChatEditor',
|
|
19
16
|
component: ChatEditor,
|
|
20
|
-
decorators: [withTheme],
|
|
17
|
+
decorators: [withTheme()],
|
|
21
18
|
parameters: {
|
|
22
19
|
layout: 'centered',
|
|
23
20
|
translations,
|
|
24
21
|
},
|
|
25
|
-
}
|
|
22
|
+
} satisfies Meta<typeof ChatEditor>;
|
|
26
23
|
|
|
27
24
|
export default meta;
|
|
28
25
|
|
|
29
26
|
const classNames = 'w-[20rem] p-2 border border-separator';
|
|
30
27
|
|
|
31
|
-
type Story = StoryObj<typeof
|
|
28
|
+
type Story = StoryObj<typeof meta>;
|
|
32
29
|
|
|
33
30
|
export const Default: Story = {
|
|
34
31
|
args: {
|
|
@@ -36,31 +33,33 @@ export const Default: Story = {
|
|
|
36
33
|
},
|
|
37
34
|
};
|
|
38
35
|
|
|
36
|
+
// TODO(burdon): Restore and reconcile with suggest/typeahead.
|
|
39
37
|
export const WithSuggestions: Story = {
|
|
40
38
|
args: {
|
|
41
39
|
classNames,
|
|
42
40
|
onSubmit: (text) => {
|
|
43
41
|
log('onSubmit', { text });
|
|
44
42
|
},
|
|
45
|
-
onSuggest: (text) => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
// onSuggest: (text) => {
|
|
44
|
+
// const trimmed = text.trim().toLowerCase();
|
|
45
|
+
// if (trimmed.length < 2) {
|
|
46
|
+
// return [];
|
|
47
|
+
// }
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
49
|
+
// const suggestions = [
|
|
50
|
+
// 'Create a kanban board',
|
|
51
|
+
// 'Create a new project',
|
|
52
|
+
// 'Find flights to Tokyo',
|
|
53
|
+
// "Let's play chess",
|
|
54
|
+
// 'Show me Paris on a map',
|
|
55
|
+
// ];
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
},
|
|
57
|
+
// return suggestions.filter((s) => s.toLowerCase().startsWith(text));
|
|
58
|
+
// },
|
|
61
59
|
},
|
|
62
60
|
};
|
|
63
61
|
|
|
62
|
+
// TODO(burdon): Replace.
|
|
64
63
|
const references: ReferenceData[] = [
|
|
65
64
|
{
|
|
66
65
|
uri: 'dxn:echo:@:AAAAAAAA',
|
|
@@ -3,87 +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 { type
|
|
20
|
-
import { type ReferencesOptions, references as referencesExtension } from './references';
|
|
19
|
+
import { type ReferencesOptions } from './references';
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
export interface ChatEditorController {
|
|
25
|
-
focus(): void;
|
|
26
|
-
getText(): string;
|
|
27
|
-
setText(text: string): void;
|
|
28
|
-
}
|
|
21
|
+
export interface ChatEditorController extends EditorController {}
|
|
29
22
|
|
|
30
23
|
export type ChatEditorProps = ThemedClassName<
|
|
31
24
|
{
|
|
32
25
|
extensions?: Extension;
|
|
33
26
|
references?: ReferencesOptions;
|
|
34
|
-
} &
|
|
35
|
-
Pick<UseTextEditorProps, 'autoFocus'> &
|
|
36
|
-
Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
|
|
27
|
+
} & (SubmitOptions &
|
|
28
|
+
Pick<UseTextEditorProps, 'id' | 'autoFocus'> &
|
|
29
|
+
Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>)
|
|
37
30
|
>;
|
|
38
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
|
+
|
|
39
46
|
export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
|
|
40
|
-
(
|
|
41
|
-
{
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
autoFocus,
|
|
49
|
-
extensions: [
|
|
50
|
-
createThemeExtensions({ themeMode }),
|
|
51
|
-
autocomplete({ onSubmit, onSuggest, onCancel }),
|
|
52
|
-
references ? referencesExtension({ provider: references.provider }) : [],
|
|
53
|
-
createBasicExtensions({
|
|
54
|
-
bracketMatching: false,
|
|
55
|
-
lineWrapping,
|
|
56
|
-
placeholder,
|
|
57
|
-
}),
|
|
58
|
-
extensions,
|
|
59
|
-
].filter(isNonNullable),
|
|
60
|
-
},
|
|
61
|
-
[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.View classNames={classNames} autoFocus={autoFocus} extensions={extensions} />
|
|
54
|
+
</Editor.Root>
|
|
62
55
|
);
|
|
63
|
-
|
|
64
|
-
// Expose editor view.
|
|
65
|
-
useImperativeHandle(forwardRef, () => {
|
|
66
|
-
return {
|
|
67
|
-
focus: () => {
|
|
68
|
-
view?.focus();
|
|
69
|
-
},
|
|
70
|
-
getText: () => view?.state.doc.toString() ?? '',
|
|
71
|
-
setText: (text: string) => {
|
|
72
|
-
view?.dispatch({
|
|
73
|
-
changes: {
|
|
74
|
-
from: 0,
|
|
75
|
-
to: view.state.doc.length,
|
|
76
|
-
insert: text,
|
|
77
|
-
},
|
|
78
|
-
selection: {
|
|
79
|
-
anchor: text.length,
|
|
80
|
-
head: text.length,
|
|
81
|
-
},
|
|
82
|
-
});
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
}, [view, onSubmit]);
|
|
86
|
-
|
|
87
|
-
return <div ref={parentRef} className={mx('is-full', classNames)} />;
|
|
88
56
|
},
|
|
89
57
|
);
|
|
@@ -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
|
),
|
|
@@ -124,7 +130,7 @@ export const references = ({ provider, triggerCharacter = '@', debug = false }:
|
|
|
124
130
|
}),
|
|
125
131
|
|
|
126
132
|
autocompletion({
|
|
127
|
-
tooltipClass: () => 'shadow rounded',
|
|
133
|
+
tooltipClass: () => 'shadow rounded-sm',
|
|
128
134
|
activateOnTyping: true,
|
|
129
135
|
aboveCursor: true,
|
|
130
136
|
closeOnBlur: !debug,
|
|
@@ -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,26 +0,0 @@
|
|
|
1
|
-
import { type Extension } from '@codemirror/state';
|
|
2
|
-
export type AutocompleteOptions = {
|
|
3
|
-
fireIfEmpty?: boolean;
|
|
4
|
-
/**
|
|
5
|
-
* Callback triggered when Enter is pressed.
|
|
6
|
-
* @param text The current text in the editor
|
|
7
|
-
* @returns true if the editor should reset the document.
|
|
8
|
-
*/
|
|
9
|
-
onSubmit?: (text: string) => boolean | void;
|
|
10
|
-
/**
|
|
11
|
-
* Function that returns a list of suggestions based on the current text.
|
|
12
|
-
* @param text The current text before the cursor
|
|
13
|
-
* @returns Array of suggestion strings
|
|
14
|
-
*/
|
|
15
|
-
onSuggest?: (text: string) => string[];
|
|
16
|
-
/**
|
|
17
|
-
* ESC pressed.
|
|
18
|
-
*/
|
|
19
|
-
onCancel?: () => void;
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* Creates an autocomplete extension that shows inline suggestions.
|
|
23
|
-
* Pressing Tab will complete the suggestion.
|
|
24
|
-
*/
|
|
25
|
-
export declare const autocomplete: ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions) => Extension;
|
|
26
|
-
//# 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,EAAE,KAAK,SAAS,EAAQ,MAAM,mBAAmB,CAAC;AAWzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;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,gDAAgD,mBAAmB,KAAG,SA+JlG,CAAC"}
|