@dxos/plugin-assistant 0.8.4-main.c4373fc → 0.8.4-main.d9fc60f731

package/src/stories/QueryEditor.stories.tsx

@@ -1,114 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Obj, TagInfo, type TagMap } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
-import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
-import { faker } from '@dxos/random';
-import { Filter, useSpaces } from '@dxos/react-client/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
-import { DataType } from '@dxos/schema';
-import { type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
-import { render } from '@dxos/storybook-utils';
-
-import { translations } from '../translations';
-
-faker.seed(1);
-const generator = faker as any as ValueGenerator;
-
-const DefaultStory = ({ value: valueParam }: QueryEditorProps) => {
-  const [query, setQuery] = useState(valueParam);
-  const [space] = useSpaces();
-  const builder = useMemo(() => new QueryBuilder(), []);
-  const [filter, setFilter] = useState<Filter.Any>(Filter.everything());
-  const objects = useQuery(space, filter).sort(Obj.sort(Obj.sortByTypename, Obj.sortByLabel));
-  const model = useGraphModel(space, filter);
-
-  useEffect(() => {
-    if (query) {
-      const filter = builder.build(query);
-      setFilter(filter ?? Filter.everything());
-    } else {
-      setFilter(Filter.everything());
-    }
-  }, [builder, query]);
-
-  return (
-    <div role='none' className='grid grid-cols-2 grow divide-x divide-subduedSeparator overflow-hidden'>
-      <div className='flex flex-col overflow-hidden'>
-        <QueryEditor
-          classNames='p-2 is-full border-b border-subduedSeparator'
-          space={space}
-          value={query}
-          onChange={setQuery}
-        />
-        <div className='bs-full overflow-y-auto'>
-          {objects.map((object) => (
-            <div
-              key={object.id}
-              className='grid grid-cols-3 gap-2 p-2 border-b border-subduedSeparator overflow-hidden'
-            >
-              <span className='truncate text-sm font-mono'>{object.id}</span>
-              <span className='truncate text-sm font-mono'>{Obj.getTypename(object)}</span>
-              <span className='truncate'>{Obj.getLabel(object)}</span>
-            </div>
-          ))}
-        </div>
-        <div className='p-2 text-right text-infoText text-xs'>{objects.length}</div>
-      </div>
-      <D3ForceGraph model={model} />
-    </div>
-  );
-};
-
-const tags: TagMap = {
-  ['tag_1' as const]: TagInfo.make({ label: 'Red' }),
-  ['tag_2' as const]: TagInfo.make({ label: 'Green' }),
-  ['tag_3' as const]: TagInfo.make({ label: 'Blue' }),
-};
-
-const meta: Meta<typeof QueryEditor> = {
-  title: 'plugins/plugin-assistant/QueryEditor',
-  component: QueryEditor,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme,
-    withClientProvider({
-      types: [DataType.Organization, DataType.Person, DataType.Project, DataType.Employer],
-      createIdentity: true,
-      onCreateIdentity: async ({ client }) => {
-        const space = client.spaces.default;
-        const createObjects = createObjectFactory(space.db, generator);
-        const objects = await createObjects([
-          { type: DataType.Organization, count: 30 },
-          { type: DataType.Project, count: 20 },
-          { type: DataType.Person, count: 50 },
-        ]);
-        objects.forEach((obj) => {
-          Obj.getMeta(obj).tags = faker.helpers.uniqueArray(Object.keys(tags), faker.number.int(3));
-        });
-      },
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    value: '(type:dxos.org/type/Person OR type:dxos.org/type/Organization)',
-  },
-};

package/src/stories/components/BlueprintContainer.tsx

@@ -1,34 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Blueprint } from '@dxos/blueprints';
-import { Filter, Obj } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/react-ui-theme';
-
-import { TemplateEditor } from '../../components';
-import { meta } from '../../meta';
-
-import { type ComponentProps } from './types';
-
-export const BlueprintContainer = ({ space }: ComponentProps) => {
-  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
-  const { t } = useTranslation(meta.id);
-
-  return !blueprint?.instructions ? (
-    <p className={mx(descriptionMessage, 'm-trimLg')}>{t('no blueprint message')}</p>
-  ) : (
-    <div className='flex flex-col h-full'>
-      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
-        <h2>{Obj.getLabel(blueprint)}</h2>
-        <div className='flex-1' />
-        <Toolbar.IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' />
-      </Toolbar.Root>
-      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
-    </div>
-  );
-};

package/src/stories/components/ChatContainer.tsx

@@ -1,74 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Filter } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { IconButton, Popover } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { Chat, Toolbar } from '../../components';
-import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
-import { useOnline, usePresets } from '../../hooks';
-import { Assistant } from '../../types';
-
-import { ExecutionGraphContainer } from './ExecutionGraphContainer';
-import { type ComponentProps } from './types';
-
-export const ChatContainer = ({ space, onEvent }: ComponentProps) => {
-  const [online, setOnline] = useOnline();
-  const { preset, ...chatProps } = usePresets(online);
-
-  const chats = useQuery(space, Filter.type(Assistant.Chat));
-  const chat = chats.at(-1);
-
-  const blueprintRegistry = useBlueprintRegistry();
-  const services = useChatServices({ space, chat });
-  const processor = useChatProcessor({ chat, preset, services, blueprintRegistry });
-
-  const handleUpdateName = useCallback(() => {
-    if (chat) {
-      void processor?.updateName(chat);
-    }
-  }, [processor, chat]);
-
-  return !chat || !processor ? null : (
-    <StackItem.Content toolbar>
-      <div role='none' className='flex items-center gap-2 pie-2'>
-        <Toolbar classNames='is-min grow' chat={chat} onReset={() => onEvent?.('reset')} />
-        <Popover.Root>
-          <Popover.Trigger asChild>
-            <IconButton icon='ph--sort-ascending--regular' label='Logs' variant='ghost' />
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content>
-              <ExecutionGraphContainer space={space} />
-              <Popover.Arrow />
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-        <div className='truncate text-subdued'>{chat.name ?? 'no name'}</div>
-        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Update name' onClick={handleUpdateName} />
-      </div>
-
-      <div role='none' className='relative'>
-        <Chat.Root chat={chat} processor={processor} classNames='absolute inset-0'>
-          <Chat.Thread />
-          {/* <ChatProgress chat={chat} /> */}
-          <div className='flex justify-center p-4'>
-            <Chat.Prompt
-              {...chatProps}
-              outline
-              classNames='max-is-prose'
-              preset={preset?.id}
-              online={online}
-              onOnlineChange={setOnline}
-            />
-          </div>
-        </Chat.Root>
-      </div>
-    </StackItem.Content>
-  );
-};

package/src/stories/components/ChessContainer.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter } from '@dxos/echo';
-import { Chess } from '@dxos/plugin-chess';
-import { useQuery } from '@dxos/react-client/echo';
-
-import type { ComponentProps } from './types';
-
-export const ChessContainer: FC<ComponentProps> = ({ space }) => {
-  const chess = useQuery(space, Filter.type(Chess.Game));
-  return <Surface role='section' limit={1} data={{ subject: chess.at(-1) }} />;
-};

package/src/stories/components/CommentsContainer.tsx

@@ -1,25 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter, useQuery } from '@dxos/react-client/echo';
-
-import { useContextBinder } from '../../hooks';
-import { Assistant } from '../../types';
-
-import { type ComponentProps } from './types';
-
-export const CommentsContainer = ({ space }: ComponentProps) => {
-  const chats = useQuery(space, Filter.type(Assistant.Chat));
-  const binder = useContextBinder(chats.at(-1));
-  const object = binder?.objects.value[0]?.target;
-  const data = useMemo(() => ({ subject: 'comments', companionTo: object }), [object]);
-  if (!object) {
-    return null;
-  }
-
-  return <Surface role='article' data={data} />;
-};

package/src/stories/components/DebugCard.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Obj, type Relation } from '@dxos/echo';
-import { type ObjectId } from '@dxos/keys';
-
-interface DebugCardProps {
-  obj: Obj.Any | Relation.Any;
-}
-
-export const DebugCard = ({ obj }: DebugCardProps) => {
-  return (
-    <div className='border border-separator rounded-lg p-4 bg-surface'>
-      <div className='flex items-center justify-between mb-2'>
-        <h3 className='font-medium text-lg'>{Obj.getLabel(obj)}</h3>
-        <p className='flex gap-2 items-center'>
-          <span className='text-sm font-mono dx-text-hue' data-hue={colors[insecureIdHash(obj.id, colors.length)]}>
-            #{obj.id.slice(-6)}
-          </span>
-          <span className='text-sm text-description bg-neutral-800 px-2 py-1 rounded'>{Obj.getTypename(obj)}</span>
-        </p>
-      </div>
-      <details className='group'>
-        <summary className='cursor-pointer text-sm text-primary hover:text-primaryHover'>View JSON</summary>
-        <pre className='mt-2 text-xs p-3 rounded overflow-x-auto'>{JSON.stringify(obj, null, 2)}</pre>
-      </details>
-    </div>
-  );
-};
-
-const insecureIdHash = (id: ObjectId, modulo: number) => {
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    const num = id.charCodeAt(i);
-    hash = (hash ^ num) | 0;
-  }
-  return Math.abs(hash) % modulo;
-};
-
-const colors = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-];

package/src/stories/components/ExecutionGraphContainer.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Filter } from '@dxos/echo';
-import { Obj } from '@dxos/echo';
-import { InvocationTraceStartEvent } from '@dxos/functions';
-import { type Queue, useQuery, useQueue } from '@dxos/react-client/echo';
-import { Timeline, useExecutionGraph } from '@dxos/react-ui-components';
-
-import { Assistant } from '../../types';
-
-import { type ComponentProps } from './types';
-
-export const ExecutionGraphContainer = ({ space, traceQueue }: ComponentProps & { traceQueue?: Queue }) => {
-  const chats = useQuery(space, Filter.type(Assistant.Chat));
-  const invocations =
-    useQueue(space.properties?.invocationTraceQueue?.dxn)?.objects.filter(Obj.instanceOf(InvocationTraceStartEvent)) ??
-    [];
-  const queue = traceQueue ?? invocations?.at(-1)?.invocationTraceQueue?.target ?? chats.at(-1)?.traceQueue?.target;
-  const { branches, commits } = useExecutionGraph(queue);
-
-  return (
-    <div className='flex flex-col h-full'>
-      <Timeline branches={branches} commits={commits} />
-    </div>
-  );
-};

package/src/stories/components/GraphContainer.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Match from 'effect/Match';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { ResearchGraph } from '@dxos/assistant-testing';
-import { Filter, Query } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
-import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
-import { useQuery } from '@dxos/react-client/echo';
-import { IconButton, Toolbar } from '@dxos/react-ui';
-import { type ChatEditorProps } from '@dxos/react-ui-chat';
-import { type EditorController, QueryEditor } from '@dxos/react-ui-components';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
-
-import { useFlush } from '../../hooks';
-
-import { type ComponentProps } from './types';
-
-export const GraphContainer = ({ space }: ComponentProps) => {
-  const [filter, setFilter] = useState<Filter.Any>();
-  const [open, setOpen] = useState(false);
-
-  const [researchGraph] = useQuery(space, Query.type(ResearchGraph));
-  const queue = researchGraph?.queue.target;
-
-  // TODO(burdon): Clean-up API.
-  const model = useGraphModel(space, undefined, undefined, queue);
-  useEffect(() => {
-    model?.setFilter(filter ?? Filter.everything());
-  }, [model, filter]);
-
-  const parser = useMemo(() => new QueryBuilder(), []);
-  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
-    (text) => {
-      // TODO(burdon): Get AST from filter?
-      const filter = parser.build(text);
-      if (filter) {
-        setFilter(filter);
-        setOpen(true);
-      }
-    },
-    [space, parser],
-  );
-
-  return (
-    <div className={mx('relative bs-full grid', open && 'grid-rows-[min-content_1fr]')}>
-      <SearchBar space={space} onSubmit={handleSubmit} />
-      <D3ForceGraph classNames='min-bs-[50vh]' model={model} />
-
-      {/* TODO(burdon): Create component with context state for story. */}
-      {(open && (
-        <div className='absolute left-2 right-2 bottom-2 h-[8rem] flex overflow-hidden bg-baseSurface border border-subduedSeparator'>
-          <SyntaxHighlighter language='json' classNames='text-sm'>
-            {JSON.stringify({ filter }, null, 2)}
-          </SyntaxHighlighter>
-          <div className='absolute bottom-1 right-1'>
-            <IconButton variant='ghost' icon='ph--x--regular' iconOnly label='Close' onClick={() => setOpen(false)} />
-          </div>
-        </div>
-      )) || (
-        <div className='absolute bottom-3 right-3'>
-          <IconButton
-            variant='ghost'
-            icon='ph--arrow-line-up--regular'
-            iconOnly
-            label='Open'
-            onClick={() => setOpen(true)}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const SearchBar = ({ space, onSubmit }: ComponentProps & Pick<ChatEditorProps, 'onSubmit'>) => {
-  const { state: flushState, handleFlush } = useFlush(space);
-  const editorRef = useRef<EditorController>(null);
-
-  return (
-    <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
-      <QueryEditor classNames='p-2 is-full border-b border-subduedSeparator' space={space} onChange={onSubmit} />
-      <Toolbar.IconButton
-        icon='ph--magnifying-glass--regular'
-        iconOnly
-        label='Search'
-        onClick={() => onSubmit?.(editorRef.current?.view?.state.doc.toString() ?? '')}
-      />
-      <Toolbar.IconButton
-        disabled={flushState === 'flushing'}
-        icon={Match.value(flushState).pipe(
-          Match.when('idle', () => 'ph--floppy-disk--regular'),
-          Match.when('flushing', () => 'ph--spinner--regular'),
-          Match.when('flushed', () => 'ph--check--regular'),
-          Match.exhaustive,
-        )}
-        iconOnly
-        label='flush'
-        onClick={handleFlush}
-      />
-    </Toolbar.Root>
-  );
-};

package/src/stories/components/InvocationsContainer.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { InvocationTraceContainer } from '@dxos/devtools';
-
-import type { ComponentProps } from './types';
-
-export const InvocationsContainer = ({ space }: ComponentProps) => {
-  return (
-    <div className='flex bs-full min-bs-[20rem] items-center justify-center'>
-      <InvocationTraceContainer space={space} detailAxis='block' />
-    </div>
-  );
-};

package/src/stories/components/MessageContainer.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface, useCapability } from '@dxos/app-framework';
-import { Filter } from '@dxos/echo';
-import { InboxCapabilities } from '@dxos/plugin-inbox';
-import { Mailbox } from '@dxos/plugin-inbox/types';
-import { fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
-
-import { type ComponentProps } from './types';
-
-export const MessageContainer = ({ space }: ComponentProps) => {
-  const [mailbox] = useQuery(space, Filter.type(Mailbox.Mailbox));
-  const state = useCapability(InboxCapabilities.MailboxState);
-  const message = mailbox && state[fullyQualifiedId(mailbox)];
-  const data = useMemo(() => ({ subject: message ?? 'message', companionTo: mailbox }), [message, mailbox]);
-
-  return <Surface role='section' data={data} limit={1} />;
-};

package/src/stories/components/ProjectContainer.tsx

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-
-import type { ComponentProps } from './types';
-
-export const ProjectContainer: FC<ComponentProps> = ({ space }) => {
-  const projects = useQuery(space, Filter.type(DataType.Project));
-  return <Surface role='article' limit={1} data={{ subject: projects.at(-1) }} />;
-};

package/src/stories/components/PromptContainer.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Predicate from 'effect/Predicate';
-import React from 'react';
-
-import { Prompt } from '@dxos/blueprints';
-import { Filter } from '@dxos/echo';
-import { type Space, createDocAccessor, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
-
-export const PromptContainer = ({ space }: { space: Space }) => {
-  const [prompt] = useQuery(space, Filter.type(Prompt.Prompt));
-  if (!prompt) {
-    return null;
-  }
-  return (
-    <div style={{ minHeight: '300px' }}>
-      <PromptEditor prompt={prompt} />
-    </div>
-  );
-};
-
-const PromptEditor = ({ prompt, classNames }: ThemedClassName<{ prompt: Prompt.Prompt }>) => {
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(() => {
-    return {
-      initialValue: prompt.instructions ?? '',
-      extensions: [
-        createDataExtensions({ id: prompt.id, text: createDocAccessor(prompt, ['instructions']) }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineNumbers: true,
-          lineWrapping: true,
-        }),
-        createThemeExtensions({ themeMode }),
-        createMarkdownExtensions(),
-      ].filter(Predicate.isTruthy),
-    };
-  }, [themeMode, prompt]);
-
-  return <div ref={parentRef} className={mx('bs-full overflow-hidden', classNames)} />;
-};

package/src/stories/components/ResearchInputStack.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Filter } from '@dxos/echo';
-import { useQuery, useQueue } from '@dxos/react-client/echo';
-
-import { ResearchInputQueue } from '../testing';
-
-import { DebugCard } from './DebugCard';
-import type { ComponentProps } from './types';
-
-export const ResearchInputStack = ({ space }: ComponentProps) => {
-  const [researchInput] = useQuery(space, Filter.type(ResearchInputQueue));
-  const queue = useQueue(researchInput?.queue.dxn);
-
-  return (
-    <div className='p-4 overflow-y-auto h-full'>
-      <ul className='space-y-4 '>
-        {queue?.objects.map((object) => (
-          <li key={object.id}>
-            <DebugCard obj={object} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/components/ResearchOutputStack.tsx

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { ResearchGraph } from '@dxos/assistant-testing';
-import { Filter } from '@dxos/echo';
-import { useQuery, useQueue } from '@dxos/react-client/echo';
-
-import type { ComponentProps } from './types';
-
-export const ResearchOutputStack = ({ space }: ComponentProps) => {
-  const [researchGraph] = useQuery(space, Filter.type(ResearchGraph));
-  const queue = useQueue(researchGraph?.queue.dxn);
-
-  return (
-    <div className='p-4 overflow-y-auto h-full'>
-      <ul className='space-y-4 '>
-        {queue?.objects.map((object) => (
-          <li key={object.id}>
-            <Surface role='card' data={{ subject: object }} limit={1} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

package/src/stories/components/ScriptContainer.tsx

@@ -1,28 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Capabilities, useCapability } from '@dxos/app-framework';
-import { Filter } from '@dxos/echo';
-import { ScriptType } from '@dxos/functions';
-import { ScriptCapabilities, ScriptContainer as ScriptContainerComponent, meta } from '@dxos/plugin-script';
-import { type ScriptSettings } from '@dxos/plugin-script/types';
-import { useQuery } from '@dxos/react-client/echo';
-
-import { type ComponentProps } from './types';
-
-export const ScriptContainer = ({ space }: ComponentProps) => {
-  const [script] = useQuery(space, Filter.type(ScriptType));
-  const compiler = useCapability(ScriptCapabilities.Compiler);
-  const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettings>(meta.id)?.value;
-  if (!script) {
-    return null;
-  }
-  return (
-    <div className='flex is-full bs-[70vh] min-bs-[20rem] overflow-auto'>
-      <ScriptContainerComponent role={'section'} script={script} settings={settings} env={compiler.environment} />
-    </div>
-  );
-};