@dxos/react-ui-chat 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-chat",
-  "version": "0.8.4-main.5acf9ea",
+  "version": "0.8.4-main.5ea62a8",
   "description": "Chat components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,10 +9,10 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -33,41 +33,41 @@
     "@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.5acf9ea",
-    "@dxos/debug": "0.8.4-main.5acf9ea",
-    "@dxos/echo-schema": "0.8.4-main.5acf9ea",
-    "@dxos/invariant": "0.8.4-main.5acf9ea",
-    "@dxos/live-object": "0.8.4-main.5acf9ea",
-    "@dxos/log": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-components": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-dnd": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-editor": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-sfx": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-types": "0.8.4-main.5acf9ea",
-    "@dxos/util": "0.8.4-main.5acf9ea"
+    "@dxos/async": "0.8.4-main.5ea62a8",
+    "@dxos/debug": "0.8.4-main.5ea62a8",
+    "@dxos/invariant": "0.8.4-main.5ea62a8",
+    "@dxos/log": "0.8.4-main.5ea62a8",
+    "@dxos/live-object": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-components": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-dnd": "0.8.4-main.5ea62a8",
+    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-sfx": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-editor": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-types": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui": "0.8.4-main.5ea62a8"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo": "0.8.4-main.5acf9ea",
-    "@dxos/random": "0.8.4-main.5acf9ea",
-    "@dxos/react-client": "0.8.4-main.5acf9ea",
-    "@dxos/storybook-utils": "0.8.4-main.5acf9ea"
+    "vite": "7.1.1",
+    "@dxos/echo": "0.8.4-main.5ea62a8",
+    "@dxos/random": "0.8.4-main.5ea62a8",
+    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
+    "@dxos/react-client": "0.8.4-main.5ea62a8"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
+    "@dxos/react-ui": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,18 +4,19 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Input, Toolbar } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ChatDialog } from './ChatDialog';
 import { translations } from '../../translations';
 
+import { ChatDialog } from './ChatDialog';
+
 const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
 
-const meta: Meta<typeof ChatDialog.Root> = {
+const meta = {
   title: 'ui/react-ui-chat/ChatDialog',
   component: ChatDialog.Root,
   render: (args) => {
@@ -56,10 +57,10 @@ const meta: Meta<typeof ChatDialog.Root> = {
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof ChatDialog.Root>;
 
 export default meta;
 
-type Story = StoryObj<typeof ChatDialog.Root>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/ChatDialog/ChatDialog.tsx

@@ -5,8 +5,8 @@
 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 { Dialog, Icon, IconButton, type ThemedClassName, useControlledState } from '@dxos/react-ui';
+import { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/react-ui-theme';
 
 const preventDefault = (event: Event) => event.preventDefault();

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

@@ -4,16 +4,17 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { log } from '@dxos/log';
 import { withTheme } from '@dxos/storybook-utils';
 
+import { translations } from '../../translations';
+
 import { ChatEditor } from './ChatEditor';
 import { type ReferenceData } from './references';
-import { translations } from '../../translations';
 
-const meta: Meta<typeof ChatEditor> = {
+const meta = {
   title: 'ui/react-ui-chat/ChatEditor',
   component: ChatEditor,
   decorators: [withTheme],
@@ -21,13 +22,13 @@ const meta: Meta<typeof ChatEditor> = {
     layout: 'centered',
     translations,
   },
-};
+} satisfies Meta<typeof ChatEditor>;
 
 export default meta;
 
 const classNames = 'w-[20rem] p-2 border border-separator';
 
-type Story = StoryObj<typeof ChatEditor>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/ChatEditor/ChatEditor.tsx

@@ -16,13 +16,12 @@ import {
 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.
+import { type AutocompleteOptions, autocomplete } from './autocomplete';
+import { type ReferencesOptions, references as referencesExtension } from './references';
 
 export interface ChatEditorController {
   focus(): void;
+  getText(): string;
   setText(text: string): void;
 }
 
@@ -31,7 +30,7 @@ export type ChatEditorProps = ThemedClassName<
     extensions?: Extension;
     references?: ReferencesOptions;
   } & AutocompleteOptions &
-    Pick<UseTextEditorProps, 'autoFocus'> &
+    Pick<UseTextEditorProps, 'id' | 'autoFocus'> &
     Pick<BasicExtensionsOptions, 'lineWrapping' | 'placeholder'>
 >;
 
@@ -41,8 +40,9 @@ export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
     forwardRef,
   ) => {
     const { themeMode } = useThemeContext();
+
     const { parentRef, view } = useTextEditor(
-      {
+      () => ({
         debug: true,
         autoFocus,
         extensions: [
@@ -56,8 +56,8 @@ export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
           }),
           extensions,
         ].filter(isNonNullable),
-      },
-      [themeMode, extensions, onSubmit, onSuggest],
+      }),
+      [themeMode, extensions, onSubmit, onSuggest, onCancel],
     );
 
     // Expose editor view.
@@ -66,6 +66,7 @@ export const ChatEditor = forwardRef<ChatEditorController, ChatEditorProps>(
         focus: () => {
           view?.focus();
         },
+        getText: () => view?.state.doc.toString() ?? '',
         setText: (text: string) => {
           view?.dispatch({
             changes: {

package/src/components/ChatEditor/autocomplete.ts

@@ -2,18 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Prec, type Extension } from '@codemirror/state';
+import { type Extension, Prec } from '@codemirror/state';
 import {
-  EditorView,
   Decoration,
-  ViewPlugin,
-  keymap,
   type DecorationSet,
+  EditorView,
+  ViewPlugin,
   type ViewUpdate,
   WidgetType,
+  keymap,
 } from '@codemirror/view';
 
 export type AutocompleteOptions = {
+  fireIfEmpty?: boolean;
+
   /**
    * Callback triggered when Enter is pressed.
    * @param text The current text in the editor
@@ -39,7 +41,7 @@ export type AutocompleteOptions = {
  * Pressing Tab will complete the suggestion.
  */
 // TODO(burdon): Move to react-ui-editor.
-export const autocomplete = ({ onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
+export const autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
   const suggest = ViewPlugin.fromClass(
     class {
       _decorations: DecorationSet;
@@ -144,7 +146,7 @@ export const autocomplete = ({ onSubmit, onSuggest, onCancel }: AutocompleteOpti
           preventDefault: true,
           run: (view) => {
             const text = view.state.doc.toString().trim();
-            if (text.length > 0 && onSubmit) {
+            if (onSubmit && (fireIfEmpty || text.length > 0)) {
               const reset = onSubmit(text);
 
               // Clear the document after calling onEnter.

package/src/components/ChatEditor/references.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { autocompletion, completionKeymap, type CompletionResult } from '@codemirror/autocomplete';
+import { type CompletionResult, autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import { type Extension, RangeSet } from '@codemirror/state';
 import {
   Decoration,

package/src/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './components';
+export * from './translations';

package/src/translations.ts

@@ -9,46 +9,7 @@ export const translationKey = 'react-ui-chat';
 export const translations = [
   {
     'en-US': {
-      [translationKey]: {
-        'templates label': 'Templates',
-        'open ambient chat label': 'Open Assistant',
-        'assistant chat label': 'Assistant',
-        'plugin name': 'Assistant',
-        'object placeholder': 'New prompt',
-        'create object label': 'Create prompt',
-        'create trigger label': 'Create trigger',
-        'create stack section label': 'Create prompt',
-        'command placeholder': 'Enter slash command...',
-        'template placeholder': 'Enter template...',
-        'value placeholder': 'Enter value...',
-        'prompt rules label': 'Prompt Rules',
-        'typename placeholder': 'Enter typename of objects which this template is for',
-        'description placeholder': 'Enter description of when this template should be used',
-        'select preset template placeholder': 'Select preset',
-        'service registry label': 'Service Registry',
-
-        'sequence logs label': 'Logs',
-
-        'assistant dialog title': 'Assistant',
-        'open assistant label': 'Open assistant',
-
-        'search input placeholder': 'Search...',
-        'chat input placeholder': 'Ask a question...',
-        'chat stop': 'Cancel request.',
-
-        'button save': 'Save',
-        'button run': 'Run',
-
-        'prompt placeholder': 'Ask a question...',
-        'microphone button': 'Click to speak',
-        'cancel processing button': 'Stop processing',
-
-        'settings default label': 'Default',
-        'settings custom prompts label': 'Use custom prompts',
-        'settings llm provider label': 'LLM provider',
-        'settings edge llm model label': 'Remote language model',
-        'settings ollama llm model label': 'Ollama language model',
-      },
+      [translationKey]: {},
     },
   },
 ] as const satisfies Resource[];