@dxos/plugin-assistant 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/components/InitiativeContainer.tsx

@@ -1,340 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { Atom, useAtomValue } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
-import * as Match from 'effect/Match';
-import * as Option from 'effect/Option';
-import type * as Record from 'effect/Record';
-import React, { useCallback, useMemo, useState } from 'react';
-
-import { Surface, useCapability } from '@dxos/app-framework/ui';
-import { Initiative } from '@dxos/assistant-toolkit';
-import { DXN, Filter, Obj, Query, Ref } from '@dxos/echo';
-import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
-import { AtomObj, AtomRef } from '@dxos/echo-atom';
-import { FunctionDefinition, QueueService, Trigger } from '@dxos/functions';
-import { AutomationCapabilities } from '@dxos/plugin-automation/types';
-import { MarkdownEditor } from '@dxos/plugin-markdown';
-import { useObject, useQuery } from '@dxos/react-client/echo';
-import { Button, ButtonGroup, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-import { type Text } from '@dxos/schema';
-
-export type InitiativeContainerProps = {
-  role?: string;
-  initiative: Initiative.Initiative;
-};
-
-const TAB_INITATIVE = 'Initiative';
-const TAB_CHAT = 'Chat';
-
-export const InitiativeContainer = ({ role, initiative }: InitiativeContainerProps) => {
-  const [selectedTab, setSelectedTab] = useState<string>(TAB_INITATIVE);
-
-  const tabs = useAtomValue(
-    useMemo(
-      () =>
-        AtomObj.make(initiative).pipe((initiative) =>
-          Atom.make((get) => {
-            return [TAB_INITATIVE, TAB_CHAT, ...get(initiative).artifacts.map((artifact) => artifact.name)];
-          }),
-        ),
-      [initiative],
-    ),
-  );
-
-  const chat = useAtomValue(
-    useMemo(
-      () =>
-        AtomObj.make(initiative).pipe((initiative) =>
-          Atom.make((get) => {
-            const chat = get(initiative).chat;
-            return chat ? get(AtomRef.make(chat)) : undefined;
-          }),
-        ),
-      [initiative],
-    ),
-  );
-
-  const artifacts = useAtomValue(
-    useMemo(
-      () =>
-        AtomObj.make(initiative).pipe((initiative) =>
-          Atom.make((get) => {
-            return get(initiative).artifacts.map((artifact) => ({
-              name: artifact.name,
-              data: get(AtomRef.make(artifact.data)),
-            }));
-          }),
-        ),
-      [initiative],
-    ),
-  );
-
-  const selectedArtifact = artifacts.find((artifact) => artifact.name === selectedTab);
-
-  return (
-    <StackItem.Content toolbar>
-      <div
-        role='none'
-        className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1 border-b border-subduedSeparator'
-      >
-        {tabs.map((tab) => (
-          <IconButton
-            key={tab}
-            icon={Match.value(tab).pipe(
-              Match.when(TAB_INITATIVE, () => 'ph--sparkle--regular'),
-              Match.when(TAB_CHAT, () => 'ph--chat--regular'),
-              Match.orElse(() => 'ph--file--regular'),
-            )}
-            label={tab}
-            variant={selectedTab === tab ? 'primary' : 'ghost'}
-            onClick={() => setSelectedTab(tab)}
-          />
-        ))}
-      </div>
-      {selectedTab === TAB_INITATIVE && <InitiativeForm initiative={initiative} />}
-      {selectedTab === TAB_CHAT && <Surface.Surface role='article' data={{ subject: chat }} limit={1} />}
-      {selectedArtifact && <Surface.Surface role='section' data={{ subject: selectedArtifact.data }} limit={1} />}
-    </StackItem.Content>
-  );
-};
-
-export default InitiativeContainer;
-
-const InitiativeForm = ({ initiative }: { initiative: Initiative.Initiative }) => {
-  const handleChange = useCallback(
-    (
-      values: Omit<Initiative.Initiative, 'id'>,
-      { isValid, changed }: { isValid: boolean; changed: Record<string, boolean> },
-    ) => {
-      if (!isValid) {
-        return;
-      }
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as string]) as JsonPath[];
-      // Handle other property changes.
-      if (changedPaths.length > 0) {
-        Obj.change(initiative, () => {
-          for (const path of changedPaths) {
-            const parts = splitJsonPath(path);
-            const value = Obj.getValue(values as any, parts);
-            Obj.setValue(initiative, parts, value);
-          }
-        });
-      }
-
-      queueMicrotask(() => syncTriggers(initiative));
-    },
-    [initiative],
-  );
-
-  const fieldMap = useMemo<FormFieldMap>(
-    () => ({
-      spec: ({ type, label, getValue, onValueChange }) => {
-        const { t } = useTranslation();
-
-        const value: Ref.Ref<Text.Text> = getValue();
-        const target = useAtomValue(AtomRef.make(value));
-        const [initialValue] = useObject(target, 'content');
-
-        return (
-          <Input.Root>
-            <div role='none'>
-              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
-            </div>
-            <MarkdownEditor.Root id={target?.id ?? ''} object={target}>
-              <MarkdownEditor.Content initialValue={initialValue} />
-            </MarkdownEditor.Root>
-          </Input.Root>
-        );
-      },
-      plan: ({ type, label, getValue, onValueChange }) => {
-        const { t } = useTranslation();
-
-        const value: Ref.Ref<Text.Text> = getValue();
-        const target = useAtomValue(AtomRef.make(value));
-        const [initialValue] = useObject(target, 'content');
-
-        return (
-          <Input.Root>
-            <div role='none'>
-              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
-            </div>
-            <MarkdownEditor.Root id={target?.id ?? ''} object={target}>
-              <MarkdownEditor.Content initialValue={initialValue} />
-            </MarkdownEditor.Root>
-          </Input.Root>
-        );
-      },
-    }),
-    [],
-  );
-
-  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
-
-  const handleResetHistory = useCallback(async () => {
-    const runtime = computeRuntime.getRuntime(Obj.getDatabase(initiative)!.spaceId);
-
-    await runtime.runPromise(Initiative.resetChatHistory(initiative));
-
-    if (!initiative.queue) {
-      await runtime.runPromise(
-        Effect.gen(function* () {
-          const queue = yield* QueueService.createQueue();
-          Obj.change(initiative, (initiative) => {
-            initiative.queue = Ref.fromDXN(queue.dxn);
-          });
-        }),
-      );
-    }
-  }, [initiative, computeRuntime]);
-
-  const inputQueue = useAtomValue(
-    AtomObj.make(initiative).pipe((_) =>
-      Atom.make((get) =>
-        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
-      ),
-    ),
-  );
-
-  const inputQueueItems = useQuery(inputQueue, Query.select(Filter.everything()));
-
-  // TODO(dmaretskyi): Form breaks if we provide the echo object directly.
-  const spreadValue = useMemo(() => ({ ...initiative }), [initiative]);
-  return (
-    <div className='flex flex-col gap-2'>
-      <ButtonGroup classNames='h-10'>
-        <Button onClick={handleResetHistory}>Reset History</Button>
-      </ButtonGroup>
-      <h3 className='mb-2'>Input Queue</h3>
-      <div className='border border-subduedSeparator rounded-md p-2 h-64 overflow-y-auto'>
-        {inputQueueItems.map((item) => (
-          <Surface.Surface key={item.id} role='section' data={{ subject: item }} limit={1} />
-        ))}
-        {inputQueueItems.length === 0 && <div className='text-subdued'>No items in queue</div>}
-      </div>
-      <Form.Root
-        schema={omitId(Initiative.Initiative)}
-        onValuesChanged={handleChange as any}
-        values={spreadValue}
-        db={Obj.getDatabase(initiative)}
-        fieldMap={fieldMap}
-      >
-        <Form.FieldSet />
-      </Form.Root>
-    </div>
-  );
-};
-
-// TODO(dmaretskyi): Perhaps the association is better done with a relation.
-
-/**
- * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <initative id : ObjectId>
- */
-const INITIATIVE_TRIGGER_EXTENSION_KEY = 'dxos.org/extension/InitiativeTrigger';
-
-/**
- * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <dxn string of subscription target>
- */
-const INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY = 'dxos.org/extension/InitiativeTriggerTarget';
-
-/**
- * Syncs triggers in the database with the initiative subscriptions.
- */
-
-const syncTriggers = async (initiative: Initiative.Initiative) => {
-  const db = Obj.getDatabase(initiative);
-  if (!db) {
-    return;
-  }
-
-  const triggers = await db
-    .query(Filter.foreignKeys(Trigger.Trigger, [{ source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id }]))
-    .run();
-
-  // Delete triggers that are not in subscriptions.
-  for (const trigger of triggers) {
-    const target = Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).at(0)?.id;
-
-    const exists = initiative.subscriptions.find((subscription) => subscription.dxn.toString() === target);
-    if (!exists && !(initiative.useQualifyingAgent && target === Obj.getDXN(initiative)?.toString())) {
-      db.remove(trigger);
-    }
-  }
-
-  // Add triggers that are not in the database.
-  for (const subscription of initiative.subscriptions) {
-    const relevantTrigger = triggers.find((trigger) =>
-      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
-        (key) => key.id === subscription.dxn.toString(),
-      ),
-    );
-    if (relevantTrigger) {
-      continue;
-    }
-
-    const target = await subscription.tryLoad();
-    if (!target || !target.queue || !(target.queue.dxn instanceof DXN) || target.queue.dxn.kind !== DXN.kind.QUEUE) {
-      continue;
-    }
-
-    db.add(
-      Trigger.make({
-        [Obj.Meta]: {
-          keys: [
-            { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
-            { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: subscription.dxn.toString() },
-          ],
-        },
-        enabled: true,
-        spec: {
-          kind: 'queue',
-          queue: target.queue.dxn.toString(),
-        },
-        function: Ref.make(
-          FunctionDefinition.serialize(initiative.useQualifyingAgent ? Initiative.qualifier : Initiative.agent),
-        ),
-        input: {
-          initiative: Ref.make(initiative),
-          event: '{{event}}',
-        },
-      }),
-    );
-  }
-
-  if (initiative.useQualifyingAgent) {
-    const qualifierTrigger = triggers.find((trigger) =>
-      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
-        (key) => key.id === Obj.getDXN(initiative)?.toString(),
-      ),
-    );
-    if (!qualifierTrigger && initiative.queue) {
-      db.add(
-        Trigger.make({
-          [Obj.Meta]: {
-            keys: [
-              { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
-              { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: Obj.getDXN(initiative)?.toString() ?? '' },
-            ],
-          },
-          function: Ref.make(FunctionDefinition.serialize(Initiative.agent)),
-          enabled: true,
-          spec: {
-            kind: 'queue',
-            queue: initiative.queue.dxn.toString(),
-          },
-          input: {
-            initiative: Ref.make(initiative),
-            event: '{{event}}',
-          },
-        }),
-      );
-    }
-  }
-
-  await db.flush({ indexes: true });
-};

package/src/components/PromptArticle.tsx

@@ -1,49 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { Agent } from '@dxos/assistant-toolkit';
-import { type Prompt } from '@dxos/blueprints';
-import { Obj } from '@dxos/echo';
-import { invokeFunctionWithTracing, useComputeRuntimeCallback } from '@dxos/plugin-automation';
-import { Layout, Toolbar, useTranslation } from '@dxos/react-ui';
-import { useAttention } from '@dxos/react-ui-attention';
-
-import { meta } from '../meta';
-
-import { TemplateEditor } from './TemplateEditor';
-
-export type PromptArticleProps = SurfaceComponentProps<Prompt.Prompt>;
-
-export const PromptArticle = ({ role, subject }: PromptArticleProps) => {
-  const { t } = useTranslation(meta.id);
-  const db = Obj.getDatabase(subject);
-  const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
-
-  const inputData = useMemo(
-    () =>
-      subject && {
-        prompt: db?.makeRef(Obj.getDXN(subject)),
-        input: {},
-      },
-    [subject, db],
-  );
-
-  const handleRun = useComputeRuntimeCallback(db?.spaceId, () => invokeFunctionWithTracing(Agent.prompt, inputData), [
-    inputData,
-  ]);
-
-  return (
-    <Layout.Main role={role} toolbar>
-      <Toolbar.Root disabled={!hasAttention} onClick={handleRun}>
-        <Toolbar.IconButton iconOnly icon='ph--play--regular' label={t('run prompt label')} onClick={handleRun} />
-      </Toolbar.Root>
-      <TemplateEditor id={subject.id} template={subject.instructions} classNames='container-max-width' />
-    </Layout.Main>
-  );
-};
-
-export default PromptArticle;

package/src/components/TriggerStatus/TriggerStatus.tsx

@@ -1,142 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { useCapability } from '@dxos/app-framework/ui';
-import { useLayout } from '@dxos/app-toolkit/ui';
-import { type InvocationsState } from '@dxos/functions-runtime';
-import { useTriggerRuntimeControls } from '@dxos/plugin-automation';
-import { ClientCapabilities } from '@dxos/plugin-client/types';
-import { StatusBar } from '@dxos/plugin-status-bar';
-import { parseId } from '@dxos/react-client/echo';
-import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
-import { mx } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-
-type TriggerStatusState = 'disabled' | 'idle' | 'running' | 'error';
-
-const getIcon = (state: TriggerStatusState): string => {
-  switch (state) {
-    case 'disabled':
-      return 'ph--lightning-slash--regular';
-    case 'idle':
-      return 'ph--lightning--regular';
-    case 'running':
-      return 'ph--lightning--fill';
-    case 'error':
-      return 'ph--warning--regular';
-  }
-};
-
-const getIconClassNames = (state: TriggerStatusState): string | undefined => {
-  switch (state) {
-    case 'running':
-      return 'animate-pulse text-accentText';
-    case 'error':
-      return 'text-errorText';
-    default:
-      return undefined;
-  }
-};
-
-const useCurrentSpace = () => {
-  const layout = useLayout();
-  const client = useCapability(ClientCapabilities.Client);
-  const { spaceId } = parseId(layout.workspace);
-  const space = spaceId ? client.spaces.get(spaceId) : undefined;
-  return space;
-};
-
-export const TriggerStatus = () => {
-  const space = useCurrentSpace();
-  const db = space?.db;
-  const { state, start, stop } = useTriggerRuntimeControls(db);
-  const isRunning = state?.enabled ?? false;
-
-  // Determine the current trigger status state.
-  const triggerState: TriggerStatusState = useMemo(() => {
-    if (!isRunning) {
-      return 'disabled';
-    }
-
-    // Check if there's any pending invocation.
-    const hasPending = state?.invocations.some((invocation) => invocation.result === null);
-    if (hasPending) {
-      return 'running';
-    }
-
-    // Check if the last invocation failed.
-    const lastInvocation = state?.invocations.at(-1);
-    if (lastInvocation?.result?._tag === 'Failure') {
-      return 'error';
-    }
-
-    return 'idle';
-  }, [isRunning, state?.invocations]);
-
-  const { t } = useTranslation(meta.id);
-  const title = t(`trigger status ${triggerState} label`);
-  const icon = <Icon icon={getIcon(triggerState)} classNames={getIconClassNames(triggerState)} />;
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <TriggerStatusPopover
-            isRunning={isRunning}
-            state={triggerState}
-            currentFunctionName={state?.invocations.at(-1)?.function?.name ?? state?.invocations.at(-1)?.function?.key}
-            lastInvocation={state?.invocations.at(-1)}
-            onToggle={isRunning ? stop : start}
-          />
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-interface TriggerStatusPopoverProps {
-  isRunning: boolean;
-  state: TriggerStatusState;
-  currentFunctionName?: string;
-  lastInvocation?: InvocationsState;
-  onToggle: () => void;
-}
-
-const TriggerStatusPopover = ({
-  isRunning,
-  state,
-  currentFunctionName,
-  lastInvocation,
-  onToggle,
-}: TriggerStatusPopoverProps) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <div className='min-is-[240px] p-2 space-y-3'>
-      {/* Runtime Toggle */}
-      <Settings.ItemInput title={t('trigger runtime label')} description={t('trigger runtime description')}>
-        <Input.Switch classNames='justify-self-end' checked={isRunning} onCheckedChange={onToggle} />
-      </Settings.ItemInput>
-
-      {/* Status Indicator */}
-      <div className='flex items-center gap-2 pt-2 border-t border-separator'>
-        <Icon icon={getIcon(state)} classNames={mx(getIconClassNames(state), 'shrink-0')} />
-        <span className='text-sm'>{t(`trigger status ${state} label`)}</span>
-        {currentFunctionName && state === 'running' && (
-          <span className='text-xs text-description'>{currentFunctionName}</span>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TriggerStatus;

package/src/components/TriggerStatus/index.ts

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

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -1,161 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type EditorView } from '@codemirror/view';
-import * as LanguageModel from '@effect/ai/LanguageModel';
-import * as Effect from 'effect/Effect';
-import type * as Runtime from 'effect/Runtime';
-import React, { useState } from 'react';
-
-import { runInRuntime } from '@dxos/effect';
-import { log } from '@dxos/log';
-import { Button, Icon, Input, ThemeProvider } from '@dxos/react-ui';
-
-export interface AssistantToolbarProps {
-  view: EditorView;
-  from: number;
-  to: number;
-  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
-}
-
-export const AssistantToolbar = ({ view, from, to, runtime }: AssistantToolbarProps) => {
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [showPromptInput, setShowPromptInput] = useState(false);
-  const [customPrompt, setCustomPrompt] = useState('');
-
-  const runEffect = async (text: string, prompt: string) => {
-    setIsProcessing(true);
-    try {
-      const newText = await runInRuntime(
-        runtime,
-        Effect.gen(function* () {
-          // Construct meaningful system prompt context
-          const response = yield* LanguageModel.generateText({
-            prompt: `${prompt}:\n"${text}"`,
-          });
-          return response.text;
-        }),
-      );
-
-      // Apply change - check if selection is still valid/same?
-      // For simple demo, we just apply to the passed from/to, but ideally we check current selection.
-      // We can just rely on from/to passed as props, assuming the toolbar unmounts if selection changes.
-      view.dispatch({
-        changes: { from, to, insert: newText },
-      });
-    } catch (e) {
-      log.error('Assistant action failed', { error: e });
-    } finally {
-      setIsProcessing(false);
-      setShowPromptInput(false);
-    }
-  };
-
-  const currentText = view.state.sliceDoc(from, to);
-
-  const handleRegenerate = () => {
-    void runEffect(
-      currentText,
-      'You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Re-write the following text to be more clear and concise, keep the same meaning.',
-    );
-  };
-
-  const handleCasual = () => handleChangeTone('casual');
-  const handleFormal = () => handleChangeTone('formal');
-
-  const handleChangeTone = (tone: 'formal' | 'casual') => {
-    void runEffect(
-      currentText,
-      `You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Rewrite the following text to be more ${tone}`,
-    );
-  };
-
-  const handleEditWithPrompt = () => {
-    if (!customPrompt) return;
-    void runEffect(currentText, customPrompt);
-  };
-
-  return (
-    <ThemeProvider>
-      {showPromptInput ? (
-        <div
-          className='flex items-center gap-2 p-1 bg-white/90 dark:bg-neutral-800/90 backdrop-blur-md rounded-full shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          <Input.Root>
-            <Input.TextInput
-              placeholder='Instruction...'
-              value={customPrompt}
-              onChange={(e) => setCustomPrompt(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleEditWithPrompt();
-                if (e.key === 'Escape') setShowPromptInput(false);
-                e.stopPropagation();
-              }}
-              autoFocus
-              classNames='border-none bg-transparent focus-visible:ring-0 p-1 text-sm min-w-[200px]'
-            />
-          </Input.Root>
-          <Button
-            variant='ghost'
-            classNames='p-1 min-bs-0 bs-6 is-6 rounded-full'
-            onClick={handleEditWithPrompt}
-            disabled={!customPrompt || isProcessing}
-          >
-            <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
-          </Button>
-        </div>
-      ) : (
-        <div
-          className='flex items-center gap-1 p-1 bg-white/50 dark:bg-neutral-800/50 backdrop-blur-md rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          <div className='flex items-center gap-1'>
-            <Button
-              variant='ghost'
-              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
-              onClick={handleCasual}
-              disabled={isProcessing}
-            >
-              <Icon icon='ph--caret-left--regular' size={4} />
-              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Casual</span>
-            </Button>
-
-            <Button
-              variant='ghost'
-              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
-              onClick={handleRegenerate}
-              disabled={isProcessing}
-            >
-              <Icon icon='ph--arrows-clockwise--regular' size={4} classNames={isProcessing ? 'animate-spin' : ''} />
-              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Different</span>
-            </Button>
-
-            <Button
-              variant='ghost'
-              classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
-              onClick={handleFormal}
-              disabled={isProcessing}
-            >
-              <Icon icon='ph--caret-right--regular' size={4} />
-              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Formal</span>
-            </Button>
-          </div>
-
-          <div className='w-px h-8 bg-neutral-200 dark:bg-neutral-700 mx-1' />
-
-          <Button
-            variant='ghost'
-            classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
-            onClick={() => setShowPromptInput(true)}
-            disabled={isProcessing}
-          >
-            <Icon icon='ph--keyboard--regular' size={4} />
-            <span className='text-[10px] leading-none text-neutral-500 font-medium'>Instruct</span>
-          </Button>
-        </div>
-      )}
-    </ThemeProvider>
-  );
-};