@dxos/plugin-assistant 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -2,82 +2,94 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { createSystemPrompt } from '@dxos/artifact';
-import { Obj } from '@dxos/echo';
+import { createSystemPrompt } from '@dxos/assistant';
+import { Blueprint, Template } from '@dxos/compute';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
+
+import { translations } from '#translations';
 
 import { TemplateEditor, type TemplateEditorProps } from './TemplateEditor';
-import translations from '../../translations';
-import { TemplateType } from '../../types';
-
-const TEMPLATE = [
-  '{{! System Prompt }}',
-  '',
-  'You are a machine that is an expert chess player.',
-  'The move history of the current game is: {{history}}',
-  'If asked to suggest a move explain why it is a good move.',
-  '',
-  '{{#each artifacts}}',
-  '- {{this}}',
-  '{{/each}}',
-  '',
-  '---',
-  '',
-  '{{input}}',
-  '',
-].join('\n');
-
-const DefaultStory = ({ text }: TemplateEditorProps & { text: string }) => {
+
+const FENCE = '```';
+
+const TEMPLATE = trim`
+  {{! System Prompt }}
+  
+  You are an expert chess player.
+  The move history of the current game is: {{history}}.
+  If asked to suggest a move explain why it is a good move.
+
+  {{#each artifacts}}
+    {{this}}
+  {{/each}}
+
+  Reponse in the format: <suggestion>SUGGESTION</suggestion>
+
+  @dxn:queue:data:B6INSIBY3CBEF4M5VZRYBCMAHQMPYK5AJ:01K24XMVHSZHS97SG1VTVQDM5Z:01K24XPK464FSCKVQJAB2H662M
+
+  ---
+
+  ${FENCE}ts
+  const x = 100;
+  ${FENCE}
+
+  {{input}}
+`;
+
+const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
   const client = useClient();
-  const [template] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(Obj.make(TemplateType, { source: text, kind: { include: 'manual' } }));
+  const [blueprint] = useState(() => {
+    const space = client.spaces.get()[0];
+    return space.db.add(
+      Blueprint.make({
+        key: 'com.example.blueprint.test',
+        name: 'Test',
+        instructions: Template.make({ source }),
+      }),
+    );
   });
 
   return (
-    <div role='none' className='flex w-[50rem] overflow-hidden border-x border-separator'>
-      <TemplateEditor template={template} />
-    </div>
+    <TemplateEditor classNames='dx-document bg-base-surface' id={blueprint.id} template={blueprint.instructions} />
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-assistant/TemplateEditor',
-  component: TemplateEditor,
+const meta = {
+  title: 'plugins/plugin-assistant/components/TemplateEditor',
+  component: TemplateEditor as any,
   render: DefaultStory,
   decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
+      types: [Blueprint.Blueprint],
       createIdentity: true,
       createSpace: true,
-      types: [TemplateType],
     }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-    withTheme,
   ],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = Meta<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    text: TEMPLATE,
+    source: TEMPLATE,
   },
 };
 
 export const System: Story = {
   args: {
-    text: createSystemPrompt(),
+    source: createSystemPrompt({}),
   },
 };

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -2,75 +2,77 @@
 // Copyright 2025 DXOS.org
 //
 
-import { HighlightStyle, LanguageSupport, syntaxHighlighting } from '@codemirror/language';
-import { styleTags, tags } from '@lezer/highlight';
-import { handlebarsLanguage } from '@xiechao/codemirror-lang-handlebars';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import React from 'react';
 
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { useThemeContext, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { type Template } from '@dxos/compute';
+import { createDocAccessor } from '@dxos/echo-db';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createDataExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+import { composable, composableProps } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
 
-import { ASSISTANT_PLUGIN } from '../../meta';
-import { type TemplateType } from '../../types';
+import { meta } from '#meta';
 
-handlebarsLanguage.configure({
-  props: [
-    styleTags({
-      '---': tags.lineComment,
-    }),
-  ],
-});
+import { handlebars, xmlDecorator } from './extensions';
 
-export type TemplateEditorProps = ThemedClassName<{
-  template: TemplateType;
-}>;
-
-export const TemplateEditor = ({ classNames, template }: TemplateEditorProps) => {
-  const { t } = useTranslation(ASSISTANT_PLUGIN);
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(
-    () => ({
-      initialValue: template.source,
-      extensions: [
-        createDataExtensions({
-          id: template.id,
-          text: template.source !== undefined ? createDocAccessor(template, ['template']) : undefined,
-        }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineWrapping: true,
-          placeholder: t('template placeholder'),
-        }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            content: { className: '!p-3' },
-          },
-        }),
+export type TemplateEditorProps = {
+  id: string;
+  template: Template.Template;
+  lineNumbers?: boolean;
+};
 
-        // https://github.com/xiechao/lang-handlebars
-        new LanguageSupport(handlebarsLanguage, syntaxHighlighting(handlebarsHighlightStyle)),
-      ],
-    }),
-    [themeMode, prompt],
-  );
+export const TemplateEditor = composable<HTMLDivElement, TemplateEditorProps>(
+  ({ classNames, id, template, lineNumbers = true, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+    const { parentRef } = useTextEditor(() => {
+      const target = template.source?.target;
+      if (!target) {
+        return {};
+      }
 
-  return <div ref={parentRef} className={mx(classNames)} />;
-};
+      return {
+        initialValue: target.content ?? '',
+        extensions: [
+          createDataExtensions({
+            id,
+            text: createDocAccessor(target, ['content']),
+          }),
+          createBasicExtensions({
+            bracketMatching: false,
+            lineNumbers,
+            lineWrapping: true,
+            placeholder: t('template.placeholder'),
+          }),
+          createThemeExtensions({ themeMode }),
+          createMarkdownExtensions(),
+          decorateMarkdown(),
+          handlebars(),
+          // xml(),
+          // NOTE: Since we're using markdown only HTML nodes are parsed.
+          xmlDecorator(),
+          syntaxHighlighting(defaultHighlightStyle),
+        ].filter(isNonNullable),
+      };
+    }, [themeMode, template.source?.target, lineNumbers]);
 
-/**
- * https://github.com/xiechao/lang-handlebars/blob/direct/src/highlight.js
- */
-export const handlebarsHighlightStyle = HighlightStyle.define([
-  { tag: tags.tagName, class: 'text-redText' }, // Braces.
-  { tag: tags.variableName, class: 'text-blueText' },
-  { tag: tags.keyword, class: 'text-greenText' },
-  { tag: tags.comment, class: 'text-subdued' },
-]);
+    return (
+      <div
+        {...composableProps(props, {
+          role: 'none',
+          classNames: ['h-full overflow-hidden', classNames],
+        })}
+        ref={composeRefs(parentRef, forwardedRef)}
+      />
+    );
+  },
+);

package/src/components/TemplateEditor/TemplateForm.stories.tsx

@@ -2,61 +2,72 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { useState } from 'react';
+import { type Meta } from '@storybook/react-vite';
+import React, { useCallback, useState } from 'react';
 
+import { Blueprint, Template } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
+
+import { translations } from '#translations';
+
+import { type TemplateChangeCallback, TemplateForm } from './TemplateForm';
 
-import { TemplateForm } from './TemplateForm';
-import translations from '../../translations';
-import { TemplateType } from '../../types';
+const TEMPLATE = trim`
+  You are a machine that is an expert chess player.
+  The move history of the current game is: {{history}}
+  If asked to suggest a move explain why it is a good move.
 
-const TEMPLATE = [
-  'You are a machine that is an expert chess player.',
-  'The move history of the current game is: {{history}}',
-  'If asked to suggest a move explain why it is a good move.',
-  '',
-  '---',
-  '',
-  '{{input}}',
-].join('\n');
+  ---
+
+  {{input}},
+`;
 
 const DefaultStory = () => {
   const client = useClient();
-  const [template] = useState(() => {
-    const space = client.spaces.default;
-    return space.db.add(Obj.make(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
+  const [blueprint] = useState(() => {
+    const space = client.spaces.get()[0];
+    invariant(space, 'TemplateForm story requires at least one space');
+    return space.db.add(
+      Blueprint.make({
+        key: 'com.example.blueprint.test',
+        name: 'Test',
+        instructions: Template.make({ source: TEMPLATE }),
+      }),
+    );
   });
 
-  return (
-    <div role='none' className='flex w-[40rem] border border-separator overflow-hidden'>
-      <TemplateForm template={template} />
-    </div>
+  const handleChange: TemplateChangeCallback = useCallback(
+    (mutate) => {
+      Obj.update(blueprint, (blueprint) => mutate(blueprint.instructions));
+    },
+    [blueprint],
   );
+
+  return <TemplateForm id={blueprint.id} template={blueprint.instructions} onChange={handleChange} />;
 };
 
-const meta: Meta<typeof TemplateForm> = {
-  title: 'plugins/plugin-assistant/TemplateForm',
+const meta = {
+  title: 'plugins/plugin-assistant/components/TemplateForm',
   component: TemplateForm,
   render: DefaultStory,
   decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
+      types: [Blueprint.Blueprint],
       createIdentity: true,
       createSpace: true,
-      types: [TemplateType],
     }),
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
-    withTheme,
   ],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof TemplateForm>;
 
 export default meta;