@dxos/plugin-assistant 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -14,7 +14,7 @@ import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { getStyles, mx } from '@dxos/ui-theme';
 
-import { useActiveBlueprints, useBlueprintHandlers, useBlueprints, useContextObjects, useFilteredTypes } from '#hooks';
+import { useActiveSkills, useContextObjects, useFilteredTypes, useSkillHandlers, useSkills } from '#hooks';
 import { meta } from '#meta';
 import { Assistant, type ChatPresetProps } from '#types';
 
@@ -34,7 +34,7 @@ export type ChatOptionsProps = ChatPresetProps & {
  * Manages the runtime context for the chat.
  */
 export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChange }: ChatOptionsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <div className='flex'>
@@ -64,19 +64,13 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
         <Popover.Portal>
           <Popover.Content side='top' classNames={styles.panel}>
             <Popover.Viewport>
-              <Tabs.Root
-                classNames='flex'
-                orientation='horizontal'
-                defaultValue='view'
-                defaultActivePart='list'
-                tabIndex={-1}
-              >
+              <Tabs.Root asChild orientation='horizontal' defaultValue='view' defaultActivePart='list' tabIndex={-1}>
                 <Tabs.Viewport classNames={mx('grid grid-rows-[1fr_40px] w-full')}>
                   <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='view'>
                     <ViewPanel chat={chat} />
                   </Tabs.Panel>
-                  <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='blueprints'>
-                    <BlueprintsPanel registry={registry} db={db} context={context} />
+                  <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='skills'>
+                    <SkillsPanel registry={registry} db={db} context={context} />
                   </Tabs.Panel>
                   <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='mcp-servers'>
                     <McpServersPanel db={db} />
@@ -86,11 +80,7 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
                   </Tabs.Panel>
                   <Tabs.Tablist classNames={[styles.toolbar]}>
                     <Tabs.IconTab value='view' icon='ph--eye--regular' label={t('chat-view.title')} />
-                    <Tabs.IconTab
-                      value='blueprints'
-                      icon='ph--blueprint--regular'
-                      label={t('options.blueprints.title')}
-                    />
+                    <Tabs.IconTab value='skills' icon='ph--blueprint--regular' label={t('options.skills.title')} />
                     <Tabs.IconTab
                       value='mcp-servers'
                       icon='ph--plugs-connected--regular'
@@ -109,32 +99,32 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
   );
 };
 
-const BlueprintsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'registry' | 'db' | 'context'>) => {
-  const { t } = useTranslation(meta.id);
+const SkillsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'registry' | 'db' | 'context'>) => {
+  const { t } = useTranslation(meta.profile.key);
 
-  const blueprints = useBlueprints({ registry, db });
-  const activeBlueprints = useActiveBlueprints({ context });
-  const { onUpdateBlueprint } = useBlueprintHandlers({ db, context, registry });
+  const skills = useSkills({ registry, db });
+  const activeSkills = useActiveSkills({ context });
+  const { onUpdateSkill } = useSkillHandlers({ db, context, registry });
   const { results, handleSearch } = useSearchListResults({
-    items: blueprints,
-    extract: (blueprint) => blueprint.name,
+    items: skills,
+    extract: (skill) => skill.name,
   });
 
   return (
     <SearchList.Root onSearch={handleSearch}>
       <SearchList.Content classNames='flex flex-col'>
         <SearchList.Viewport>
-          {results.map((blueprint) => {
-            const blueprintKey = Obj.getMeta(blueprint).key ?? blueprint.id;
-            const isActive = activeBlueprints.has(blueprintKey);
+          {results.map((skill) => {
+            const skillKey = Obj.getMeta(skill).key ?? skill.id;
+            const isActive = activeSkills.has(skillKey);
             return (
               <SearchList.Item
                 classNames='flex items-center overflow-hidden'
-                key={blueprintKey}
-                value={blueprintKey}
-                label={blueprint.name}
+                key={skillKey}
+                value={skillKey}
+                label={skill.name}
                 checked={isActive}
-                onSelect={() => onUpdateBlueprint?.(blueprintKey, !isActive)}
+                onSelect={() => onUpdateSkill?.(skillKey, !isActive)}
               />
             );
           })}
@@ -146,18 +136,20 @@ const BlueprintsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'regi
 };
 
 const ViewPanel = ({ chat }: Pick<ChatOptionsProps, 'chat'>) => {
-  const { t } = useTranslation(meta.id);
-  const [view, setView] = useObject(chat, 'view');
+  const { t } = useTranslation(meta.profile.key);
+  const [view, setView] = useObject(chat, 'viewType');
   const value = (view as Assistant.ChatView | undefined) ?? 'normal';
 
   return (
     <Listbox.Root value={value} onValueChange={setView} autoFocus>
-      {Assistant.ChatViews.map((view) => (
-        <Listbox.Option key={view} value={view}>
-          <Listbox.OptionLabel>{t(`chat-view.${view}.label`, { defaultValue: view })}</Listbox.OptionLabel>
-          <Listbox.OptionIndicator />
-        </Listbox.Option>
-      ))}
+      <Listbox.Content aria-label={t('chat-view.title')}>
+        {Assistant.ChatViews.map((view) => (
+          <Listbox.Item key={view} id={view} classNames='px-2 py-1 dx-focus-ring rounded-xs'>
+            <Listbox.ItemLabel>{t(`chat-view.${view}.label`, { defaultValue: view })}</Listbox.ItemLabel>
+            <Listbox.Indicator />
+          </Listbox.Item>
+        ))}
+      </Listbox.Content>
     </Listbox.Root>
   );
 };
@@ -167,16 +159,17 @@ const ModelsPanel = ({
   preset,
   onPresetChange,
 }: Pick<ChatOptionsProps, 'presets' | 'preset' | 'onPresetChange'>) => {
+  const { t } = useTranslation(meta.profile.key);
   return (
     <Listbox.Root value={preset} onValueChange={onPresetChange} autoFocus>
-      {presets?.map(({ id, label }) => {
-        return (
-          <Listbox.Option key={id} value={id}>
-            <Listbox.OptionLabel>{label}</Listbox.OptionLabel>
-            <Listbox.OptionIndicator />
-          </Listbox.Option>
-        );
-      })}
+      <Listbox.Content aria-label={t('options.chat-model.title')}>
+        {presets?.map(({ id, label }) => (
+          <Listbox.Item key={id} id={id} classNames='px-2 py-1 dx-focus-ring rounded-xs'>
+            <Listbox.ItemLabel>{label}</Listbox.ItemLabel>
+            <Listbox.Indicator />
+          </Listbox.Item>
+        ))}
+      </Listbox.Content>
     </Listbox.Root>
   );
 };
@@ -186,7 +179,7 @@ type McpServersPanelProps = {
 };
 
 const McpServersPanel = ({ db }: McpServersPanelProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const servers = useQuery(db, Filter.type(McpServer.McpServer));
   const [adding, setAdding] = useState(false);
 
@@ -237,7 +230,7 @@ type McpServerRowProps = {
  * switch in sync with mutations made through the returned setter.
  */
 const McpServerRow = ({ server, onRemove }: McpServerRowProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [enabled, setEnabled] = useObject(server, 'enabled');
 
   return (
@@ -265,7 +258,7 @@ type McpServerFormProps = {
 };
 
 const McpServerForm = ({ onSubmit, onCancel }: McpServerFormProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [name, setName] = useState('');
   const [url, setUrl] = useState('');
   const [protocol, setProtocol] = useState<'sse' | 'http'>('sse');
@@ -336,7 +329,7 @@ const ANY = '__any__' as const;
 
 /** @private */
 export const ObjectsPanel = ({ db, context }: Pick<ChatOptionsProps, 'db' | 'context'>): JSX.Element => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   // Item types sorted by label.
   const types = useFilteredTypes(db);

package/src/components/ChatPrompt/ChatPrompt.tsx

@@ -4,16 +4,16 @@
 
 import { useAtomValue } from '@effect-atom/atom-react';
 import * as Option from 'effect/Option';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef } from 'react';
 
 import { type Chat } from '@dxos/assistant-toolkit';
 import { type Event } from '@dxos/async';
 import { type Database } from '@dxos/echo';
-import { type Merge } from '@dxos/effect';
-import { useVoiceInput } from '@dxos/plugin-transcription';
 import { Input, type ThemedClassName, useDynamicRef, useTranslation } from '@dxos/react-ui';
 import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
+import { pendingText } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
+import { type Merge } from '@dxos/util';
 
 import { useChatKeymapExtensions } from '#hooks';
 import { meta } from '#meta';
@@ -26,23 +26,22 @@ import { ChatMcpErrors } from './ChatMcpErrors';
 import { ChatOptions } from './ChatOptions';
 import { ChatReferences } from './ChatReferences';
 import { ChatStatusIndicator } from './ChatStatusIndicator';
-
-export type ChatPromptProps = ThemedClassName<
-  Merge<
-    {
-      outline?: boolean;
-      settings?: boolean;
-      expandable?: boolean;
-      db?: Database.Database;
-      chat?: Chat.Chat;
-      processor: AiChatProcessor;
-      event: Event<ChatEvent>;
-      online?: boolean;
-      placeholder?: ChatEditorProps['placeholder'];
-      onOnlineChange?: (online: boolean) => void;
-    },
-    ChatPresetProps
-  >
+import { useChatVoiceInput } from './useChatVoiceInput';
+
+export type ChatPromptProps = Merge<
+  ThemedClassName<{
+    outline?: boolean;
+    settings?: boolean;
+    expandable?: boolean;
+    db?: Database.Database;
+    chat?: Chat.Chat;
+    processor: AiChatProcessor;
+    event: Event<ChatEvent>;
+    /** Read-only indicator of whether the configured provider is the remote (online) service. */
+    online?: boolean;
+    placeholder?: ChatEditorProps['placeholder'];
+  }>,
+  ChatPresetProps
 >;
 
 export const ChatPrompt = ({
@@ -54,13 +53,12 @@ export const ChatPrompt = ({
   event,
   online,
   placeholder,
-  onOnlineChange,
   onPresetChange,
   settings = true,
   presets,
   preset,
 }: ChatPromptProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
   const streaming = useAtomValue(processor.streaming);
@@ -68,36 +66,21 @@ export const ChatPrompt = ({
   const activeRef = useDynamicRef(active);
 
   const editorRef = useRef<ChatEditorController>(null);
-  const [recordingState, setRecordingState] = useState(false);
   useEffect(() => {
     return event.on((ev) => {
-      switch (ev.type) {
-        case 'update-prompt':
-          if (!editorRef.current?.getText()?.length) {
-            editorRef.current?.setText(ev.text);
-            editorRef.current?.focus();
-          }
-          break;
-        case 'record-start':
-          setRecordingState(true);
-          break;
-        case 'record-stop':
-          setRecordingState(false);
-          break;
+      if (ev.type === 'update-prompt' && !editorRef.current?.getText()?.length) {
+        editorRef.current?.setText(ev.text);
+        editorRef.current?.focus();
       }
     });
   }, [event]);
 
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const { recording } = useVoiceInput({
-    active: recordingState,
-    onUpdate: (text) => {
-      editorRef.current?.setText(text);
-      editorRef.current?.focus();
-    },
-  });
+  const fallbackDocId = useId();
+  const docId = chat?.id ?? fallbackDocId;
+  useChatVoiceInput(docId, editorRef);
 
-  const extensions = useChatKeymapExtensions({ event });
+  const keymapExtensions = useChatKeymapExtensions({ event });
+  const extensions = useMemo(() => [keymapExtensions, pendingText()], [keymapExtensions]);
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
@@ -160,14 +143,15 @@ export const ChatPrompt = ({
           <ChatActions
             classNames='col-span-2'
             microphone={true}
-            recording={recording}
+            docId={docId}
             processing={streaming}
             onEvent={handleEvent}
           >
             {online !== undefined && (
               <Input.Root>
                 <Input.Label srOnly>{t('online-switch.label')}</Input.Label>
-                <Input.Switch classNames='mx-1' checked={online} onCheckedChange={onOnlineChange} />
+                {/* Read-only: the provider is configured in Assistant settings, not toggled here. */}
+                <Input.Switch classNames='mx-1' checked={online} disabled />
               </Input.Root>
             )}
           </ChatActions>

package/src/components/ChatPrompt/ChatReferences.tsx

@@ -18,7 +18,7 @@ export type ChatReferencesProps = ThemedClassName<{
 }>;
 
 export const ChatReferences = ({ classNames, context, db }: ChatReferencesProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { objects, onUpdateObject } = useContextObjects({ db, context });
 
   return (

package/src/components/ChatPrompt/useChatVoiceInput.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { useOptionalAtomCapabilityState } from '@dxos/app-framework/ui';
+import { TranscriptionCapabilities } from '@dxos/plugin-transcription/types';
+import { useTranslation } from '@dxos/react-ui';
+import { type ChatEditorController } from '@dxos/react-ui-chat';
+import { useAudioTrack, useTranscriber } from '@dxos/react-ui-transcription';
+import { type ContentBlock } from '@dxos/types';
+import { PendingTextStreamer, cancelPendingText, editorPendingTextSink, pendingTextState } from '@dxos/ui-editor';
+
+import { meta } from '#meta';
+
+// Recorder chunk interval; the transcriber's chunk threshold is derived from the buffering setting.
+const RECORDER_INTERVAL_MS = 200;
+
+/**
+ * Drives word-by-word streaming transcription into the chat editor via PendingTextStreamer.
+ * Reads the active RecordingSession and Settings capabilities; activates when the session id
+ * matches the given docId and the session is recording.
+ */
+export const useChatVoiceInput = (docId: string, editorRef: RefObject<ChatEditorController | null>): void => {
+  const { t } = useTranslation(meta.profile.key);
+  // Voice input is optional: tolerate the transcription plugin being absent (no session ⇒ inactive).
+  const [session] = useOptionalAtomCapabilityState(TranscriptionCapabilities.RecordingSession);
+  const [settings] = useOptionalAtomCapabilityState(TranscriptionCapabilities.Settings);
+
+  const active = !!session?.recording && session.id === docId;
+
+  const streamerRef = useRef<PendingTextStreamer | null>(null);
+
+  // Create/destroy the streamer when active transitions.
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+    const view = editorRef.current?.view;
+    if (!view) {
+      return;
+    }
+
+    const streamer = new PendingTextStreamer(editorPendingTextSink(view), {
+      mode: settings?.streamMode ?? 'word',
+      wordIntervalMs: settings?.wordIntervalMs ?? 80,
+    });
+    streamer.start({ anchor: view.state.selection.main.head, placeholder: t('recording.placeholder') });
+    streamerRef.current = streamer;
+
+    return () => {
+      streamer.dispose();
+      streamerRef.current = null;
+      // Drop the placeholder if nothing was transcribed; otherwise leave it for review.
+      const currentView = editorRef.current?.view;
+      if (currentView) {
+        const pending = currentView.state.field(pendingTextState, false);
+        if (pending && pending.final.length === 0) {
+          currentView.dispatch({ effects: cancelPendingText.of() });
+        }
+      }
+    };
+  }, [active, settings?.streamMode, settings?.wordIntervalMs]);
+
+  const handleSegments = useCallback(async (segments: ContentBlock.Transcript[]) => {
+    const text = segments
+      .map((segment) => segment.text)
+      .join(' ')
+      .trim();
+    if (text.length > 0) {
+      streamerRef.current?.push(text);
+    }
+  }, []);
+
+  // Derive the transcriber's chunk threshold from the configured initial buffering time.
+  const transcriberConfig = useMemo(
+    () => ({
+      transcribeAfterChunksAmount: Math.max(
+        1,
+        Math.round((settings?.transcribeAfterMs ?? 4000) / RECORDER_INTERVAL_MS),
+      ),
+    }),
+    [settings?.transcribeAfterMs],
+  );
+
+  // Stable identity: a fresh object would change useTranscriber's memo deps every render.
+  const recorderConfig = useMemo(() => ({ interval: RECORDER_INTERVAL_MS }), []);
+
+  const audioConstraints = useMemo<MediaTrackConstraints | undefined>(
+    () => (settings?.audioDeviceId ? { deviceId: { exact: settings.audioDeviceId } } : undefined),
+    [settings?.audioDeviceId],
+  );
+
+  const track = useAudioTrack(active, audioConstraints);
+
+  useTranscriber({
+    audioStreamTrack: track,
+    transcriberConfig,
+    recorderConfig,
+    onSegments: handleSegments,
+  });
+};

package/src/components/ChatThread/Anchor.stories.tsx

@@ -27,7 +27,7 @@ import { Organization } from '@dxos/types';
  *   `LayoutOperation.UpdatePopover`.
  * - `StorybookPlugin` provides both the `LayoutOperation.UpdatePopover` handler (mutating
  *   the layout-state atom) and the `<Layout>` shell that renders the popover via
- *   `<Surface.Surface type={AppSurface.Card} data={popoverContent}>`.
+ *   `<Surface.Surface type={AppSurface.CardContent} data={popoverContent}>`.
  * - `PreviewPlugin` also registers Card-role surfaces (Organization, Person, Task, …); the
  *   Surface system picks the matching one based on the resolved object's type.
  *

package/src/components/ChatThread/ChatThread.stories.tsx

@@ -9,7 +9,6 @@ import * as Layer from 'effect/Layer';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { createFeedServiceLayer } from '@dxos/client/echo';
 import { Database, Feed, Filter, Query } from '@dxos/echo';
 import { EffectEx } from '@dxos/effect';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
@@ -28,11 +27,11 @@ import { ChatThread, type ChatThreadProps } from './ChatThread';
 
 random.seed(1);
 
-type MessageGenerator = Effect.Effect<void, never, Database.Service | Feed.ContextFeedService | Feed.FeedService>;
+type MessageGenerator = Effect.Effect<void, never, Database.Service | Feed.ContextFeedService>;
 
-type DefaultStoryProps = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
+type StoryArgs = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
 
-const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: DefaultStoryProps) => {
+const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryArgs) => {
   const [space] = useSpaces();
   const feed = useMemo<Feed.Feed | undefined>(
     () => (space ? space.db.add(Feed.make({ name: 'chat' })) : undefined),
@@ -60,15 +59,7 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: DefaultStor
         }
 
         setDone(true);
-      }).pipe(
-        Effect.provide(
-          Layer.mergeAll(
-            Database.layer(space.db),
-            Feed.ContextFeedService.layer(feed),
-            createFeedServiceLayer(space.queues),
-          ),
-        ),
-      ),
+      }).pipe(Effect.provide(Layer.mergeAll(Database.layer(space.db), Feed.ContextFeedService.layer(feed)))),
     );
 
     return () => {
@@ -100,7 +91,7 @@ const meta = {
         StorybookPlugin({}),
         PreviewPlugin(),
         ClientPlugin({
-          types: [Organization.Organization, Person.Person],
+          types: [Feed.Feed, Message.Message, Organization.Organization, Person.Person],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* initializeIdentity(client);
@@ -113,11 +104,11 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<DefaultStoryProps>;
+} satisfies Meta<StoryArgs>;
 
 export default meta;
 
-type Story = StoryObj<DefaultStoryProps>;
+type Story = StoryObj<StoryArgs>;
 
 export const Default: Story = {
   args: {

package/src/components/ChatThread/DEBUG.md

@@ -39,3 +39,26 @@ MarkdownStream (packages/ui/react-ui-markdown/src/MarkdownStream/MarkdownStream.
 │ treats XML atomic ranges as indivisible units)
 ▼
 Rendered DOM (markdown + portaled widgets for tool calls / reasoning / etc.)
+
+---
+
+# Ephemeral status subscriptions (TaskList / debug panel)
+
+ProcessHandle.pushEphemeral → subscribeEphemeral(): Stream<Trace.Message>
+│
+│ UI hooks fork a collector fiber from the stream inside useEffect
+▼
+useProcessEphemeralStatus (TaskList delegated rows)
+EphemeralDebugModule (storybook debug panel)
+│
+│ **Must use Effect.forkDaemon**, not Effect.fork, when the parent is
+│ `runtime.runPromise(Effect.forEach(subscribe))` — forEach returns as soon as
+│ each subscribe forks, closing the scope and interrupting scoped forks before
+│ live events arrive. forkDaemon survives until explicit Fiber.interrupt on dispose.
+│
+│ Same pattern as ProcessOperationInvoker.fiberFromProcess (output collector).
+▼
+resolveEphemeralStatusUpdate → TaskList activity line
+
+**Contrast:** processor.ts uses Effect.fork because its parent Effect.gen continues
+through submitPrompt + waitForCompletion, keeping the scope open for the whole turn.

package/src/components/ChatThread/MarkdownStream.stories.tsx

@@ -54,7 +54,7 @@ const SAMPLE_TOOL_NAMES = [
   'get_project_rules',
   'list_mailboxes',
   'query_inbox',
-  'enable_blueprint',
+  'enable_skill',
   'create_schema',
   'create_project',
   'retry_operation',
@@ -70,7 +70,7 @@ const sampleCallAndResultBlocks = (toolCallId: string, index: number): ContentBl
   ];
 };
 
-type DefaultStoryProps = MarkdownStreamProps & {
+type StoryArgs = MarkdownStreamProps & {
   initialContent?: string;
   streamOptions?: TextStreamOptions;
   /**
@@ -87,7 +87,7 @@ const DefaultStory = ({
   debug: debugProp,
   seedToolWidgetsFromMarkdown = false,
   ...props
-}: DefaultStoryProps) => {
+}: StoryArgs) => {
   const [controller, setController] = useState<MarkdownStreamController | null>(null);
   const [streaming, setStreaming] = useState(false);
   const [debug, setDebug] = useState(debugProp);