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

package/src/components/ChatEditor/autocomplete.ts

@@ -0,0 +1,218 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Prec, type Extension } from '@codemirror/state';
+import {
+  EditorView,
+  Decoration,
+  ViewPlugin,
+  keymap,
+  type DecorationSet,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+
+export type AutocompleteOptions = {
+  /**
+   * Callback triggered when Enter is pressed.
+   * @param text The current text in the editor
+   * @returns true if the editor should reset the document.
+   */
+  onSubmit?: (text: string) => boolean | void;
+
+  /**
+   * Function that returns a list of suggestions based on the current text.
+   * @param text The current text before the cursor
+   * @returns Array of suggestion strings
+   */
+  onSuggest?: (text: string) => string[];
+
+  /**
+   * ESC pressed.
+   */
+  onCancel?: () => void;
+};
+
+/**
+ * Creates an autocomplete extension that shows inline suggestions.
+ * Pressing Tab will complete the suggestion.
+ */
+// TODO(burdon): Move to react-ui-editor.
+export const autocomplete = ({ onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
+  const suggest = ViewPlugin.fromClass(
+    class {
+      _decorations: DecorationSet;
+      _currentSuggestion: string | null = null;
+
+      constructor(view: EditorView) {
+        this._decorations = this.computeDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.selectionSet) {
+          this._decorations = this.computeDecorations(update.view);
+        }
+      }
+
+      private computeDecorations(view: EditorView): DecorationSet {
+        const text = view.state.doc.toString();
+        const suggestions = onSuggest?.(text) ?? [];
+        if (!suggestions.length) {
+          this._currentSuggestion = null;
+          return Decoration.none;
+        }
+
+        // Get the first suggestion.
+        this._currentSuggestion = suggestions[0];
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return Decoration.none;
+        }
+
+        // Always show ghost text at the end of the document.
+        return Decoration.set([
+          Decoration.widget({
+            widget: new InlineSuggestionWidget(suffix),
+            side: 1,
+          }).range(view.state.doc.length),
+        ]);
+      }
+
+      completeSuggestion(view: EditorView): boolean {
+        if (!this._currentSuggestion) {
+          return false;
+        }
+
+        const text = view.state.doc.toString();
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return false;
+        }
+
+        view.dispatch({
+          changes: {
+            from: view.state.doc.length,
+            insert: suffix,
+          },
+          selection: {
+            anchor: view.state.doc.length + suffix.length,
+          },
+        });
+
+        return true;
+      }
+    },
+    {
+      decorations: (v) => v._decorations,
+    },
+  );
+
+  return [
+    suggest,
+    EditorView.theme({
+      '.cm-inline-suggestion': {
+        opacity: 0.4,
+      },
+    }),
+
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: (view) => {
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'ArrowRight',
+          preventDefault: true,
+          run: (view) => {
+            // Only complete if cursor is at the end
+            if (view.state.selection.main.head !== view.state.doc.length) {
+              return false;
+            }
+
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'Enter',
+          preventDefault: true,
+          run: (view) => {
+            const text = view.state.doc.toString().trim();
+            if (text.length > 0 && onSubmit) {
+              const reset = onSubmit(text);
+
+              // Clear the document after calling onEnter.
+              if (reset) {
+                view.dispatch({
+                  changes: {
+                    from: 0,
+                    to: view.state.doc.length,
+                    insert: '',
+                  },
+                });
+              }
+            }
+
+            return true;
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          preventDefault: true,
+          run: (view) => {
+            view.dispatch({
+              changes: {
+                from: view.state.selection.main.head,
+                insert: '\n',
+              },
+              selection: {
+                anchor: view.state.selection.main.head + 1,
+                head: view.state.selection.main.head + 1,
+              },
+            });
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          preventDefault: true,
+          run: (view) => {
+            // Clear the entire document.
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: '',
+              },
+            });
+            onCancel?.();
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
+};
+
+class InlineSuggestionWidget extends WidgetType {
+  constructor(private suffix: string) {
+    super();
+  }
+
+  override toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = this.suffix;
+    span.className = 'cm-inline-suggestion';
+    return span;
+  }
+
+  override eq(other: InlineSuggestionWidget): boolean {
+    return other.suffix === this.suffix;
+  }
+}

package/src/components/ChatEditor/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './references';
+
+export * from './ChatEditor';

package/src/components/ChatEditor/references.ts

@@ -0,0 +1,175 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { autocompletion, completionKeymap, type CompletionResult } from '@codemirror/autocomplete';
+import { type Extension, RangeSet } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
+
+import { Mutex } from '@dxos/async';
+import { invariant } from '@dxos/invariant';
+
+// TODO(dmaretskyi): Consider adding details renderer for when you hover over the reference.
+export type ReferenceData = {
+  uri: string;
+  label: string;
+};
+
+export interface ReferencesProvider {
+  getReferences({ query }: { query: string }): Promise<ReferenceData[]>;
+  resolveReference({ uri }: { uri: string }): Promise<ReferenceData | null>;
+}
+
+export type ReferencesOptions = {
+  provider: ReferencesProvider;
+
+  /**
+   * @default '@'
+   */
+  triggerCharacter?: string;
+
+  /**
+   * Prevent the autocomplete from closing when the user blurs the editor.
+   * @default false
+   */
+  debug?: boolean;
+};
+
+/**
+ * Lookup object references.
+ */
+export const references = ({ provider, triggerCharacter = '@', debug = false }: ReferencesOptions): Extension => {
+  invariant(triggerCharacter.length === 1);
+
+  const decorationField = ViewPlugin.fromClass(
+    class ReferenceView {
+      // TODO(burdon): Why?
+      private _mutex = new Mutex();
+
+      decorations: DecorationSet = Decoration.set([]);
+
+      constructor(view: EditorView) {
+        queueMicrotask(async () => {
+          const guard = await this._mutex.acquire();
+          try {
+            this.decorations = await this._computeDecorations(view);
+          } finally {
+            guard.release();
+          }
+        });
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) {
+          queueMicrotask(async () => {
+            const guard = await this._mutex.acquire();
+            try {
+              this.decorations = await this._computeDecorations(update.view);
+            } finally {
+              guard.release();
+            }
+          });
+        }
+      }
+
+      private async _computeDecorations(view: EditorView): Promise<DecorationSet> {
+        const text = view.state.doc.toString();
+        const references = text.matchAll(new RegExp(`${triggerCharacter}[a-zA-Z0-9@:]+\\s`, 'g'));
+
+        const decorations = [];
+        for (const match of references) {
+          const reference = match[0];
+          const uri = reference.slice(1, -1);
+          const data = await provider.resolveReference({ uri });
+          if (data) {
+            decorations.push(
+              Decoration.replace({
+                widget: new ReferenceWidget(data),
+              }).range(match.index!, match.index! + reference.length),
+            );
+          }
+        }
+
+        return Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+      provide: (plugin) => [
+        EditorView.atomicRanges.of(
+          (view): DecorationSet => view.plugin(decorationField)?.decorations ?? RangeSet.empty,
+        ),
+      ],
+    },
+  );
+
+  return [
+    decorationField,
+
+    EditorView.theme({
+      '.cm-reference-pill': {
+        borderRadius: '0.25rem',
+        borderWidth: '1px',
+        marginRight: '0.25rem',
+        marginLeft: '0.25rem',
+      },
+    }),
+
+    autocompletion({
+      tooltipClass: () => 'shadow rounded',
+      activateOnTyping: true,
+      aboveCursor: true,
+      closeOnBlur: !debug,
+      override: [
+        async (context): Promise<CompletionResult | null> => {
+          const match = context.matchBefore(new RegExp(`${triggerCharacter}[a-zA-Z0-9]+`));
+          if (!match || match?.to === match?.from) {
+            return null;
+          }
+
+          const query = match.text.slice(1);
+          const references = await provider.getReferences({ query });
+          return {
+            from: match.from,
+            filter: false,
+            options: references.map((reference) => ({
+              label: reference.label,
+              apply: `${triggerCharacter}${reference.uri} `,
+            })),
+          };
+        },
+      ],
+    }),
+
+    keymap.of(completionKeymap),
+  ];
+};
+
+class ReferenceWidget extends WidgetType {
+  constructor(private data: ReferenceData) {
+    super();
+  }
+
+  override toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = `@ ${this.data.label}`;
+    span.className = 'cm-reference-pill';
+    return span;
+  }
+
+  override eq(other: ReferenceWidget): boolean {
+    return other.data.uri === this.data.uri;
+  }
+
+  override ignoreEvent(): boolean {
+    return true;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ChatDialog';
+export * from './ChatEditor';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './components';

package/src/translations.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+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',
+      },
+    },
+  },
+] as const satisfies Resource[];