npm - @nextclaw/ui - Versions diffs - 0.9.15 → 0.9.17 - Mend

@nextclaw/ui 0.9.15 → 0.9.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-D4alkESd.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-TJ2hy_Lv.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-SGSkQCPi.css">
+  <script type="module" crossorigin src="/assets/index-BsL1YIJ1.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-DJt0Azq5.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-C63mHRbE.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.9.15",
+  "version": "0.9.17",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.462.0",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
@@ -27,11 +28,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.1.1",
-    "@nextclaw/agent-chat-ui": "0.2.1",
-    "@nextclaw/ncp": "0.3.1",
-    "@nextclaw/ncp-http-agent-client": "0.3.1",
-    "@nextclaw/ncp-react": "0.3.2"
+    "@nextclaw/agent-chat": "0.1.2",
+    "@nextclaw/agent-chat-ui": "0.2.2",
+    "@nextclaw/ncp": "0.3.2",
+    "@nextclaw/ncp-http-agent-client": "0.3.2",
+    "@nextclaw/ncp-react": "0.3.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/api/channel-auth.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { api } from './client';
+import type {
+  ChannelAuthPollRequest,
+  ChannelAuthPollResult,
+  ChannelAuthStartRequest,
+  ChannelAuthStartResult
+} from './channel-auth.types';
+export async function startChannelAuth(
+  channel: string,
+  data: ChannelAuthStartRequest = {}
+): Promise<ChannelAuthStartResult> {
+  const response = await api.post<ChannelAuthStartResult>(
+    `/api/config/channels/${channel}/auth/start`,
+    data
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+export async function pollChannelAuth(
+  channel: string,
+  data: ChannelAuthPollRequest
+): Promise<ChannelAuthPollResult> {
+  const response = await api.post<ChannelAuthPollResult>(
+    `/api/config/channels/${channel}/auth/poll`,
+    data
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}

package/src/api/channel-auth.types.ts ADDED Viewed

@@ -0,0 +1,28 @@
+export type ChannelAuthStartRequest = {
+  accountId?: string;
+  baseUrl?: string;
+};
+export type ChannelAuthStartResult = {
+  channel: string;
+  kind: "qr_code";
+  sessionId: string;
+  qrCode: string;
+  qrCodeUrl: string;
+  expiresAt: string;
+  intervalMs: number;
+  note?: string;
+};
+export type ChannelAuthPollRequest = {
+  sessionId: string;
+};
+export type ChannelAuthPollResult = {
+  channel: string;
+  status: "pending" | "scanned" | "authorized" | "expired" | "error";
+  message?: string;
+  nextPollMs?: number;
+  accountId?: string | null;
+  notes?: string[];
+};

package/src/api/config.ts CHANGED Viewed

@@ -143,10 +143,8 @@ export async function fetchConfigSchema(): Promise<ConfigSchemaResponse> {
 }
 // PUT /api/config/model
-export async function updateModel(data: {
-  model: string;
-}): Promise<{ model: string }> {
-  const response = await api.put<{ model: string }>('/api/config/model', data);
+export async function updateModel(data: { model: string; workspace?: string }): Promise<{ model: string; workspace?: string }> {
+  const response = await api.put<{ model: string; workspace?: string }>('/api/config/model', data);
   if (!response.ok) {
     throw new Error(response.error.message);
   }

package/src/api/types.ts CHANGED Viewed

@@ -11,10 +11,7 @@ export type ApiResponse<T> =
   | { ok: true; data: T }
   | { ok: false; error: ApiError };
-export type AppMetaView = {
-  name: string;
-  productVersion: string;
-};
+export type AppMetaView = { name: string; productVersion: string };
 export type ThinkingLevel = "off" | "minimal" | "low" | "medium" | "high" | "adaptive" | "xhigh";
@@ -47,15 +44,8 @@ export type ProviderConnectionTestRequest = ProviderConfigUpdate & {
 export type ProviderCreateRequest = ProviderConfigUpdate;
-export type ProviderCreateResult = {
-  name: string;
-  provider: ProviderConfigView;
-};
-export type ProviderDeleteResult = {
-  deleted: boolean;
-  provider: string;
-};
+export type ProviderCreateResult = { name: string; provider: ProviderConfigView };
+export type ProviderDeleteResult = { deleted: boolean; provider: string };
 export type ProviderConnectionTestErrorCode =
   | 'API_KEY_REQUIRED'
@@ -140,13 +130,8 @@ export type ProviderAuthStartResult = {
   note?: string;
 };
-export type ProviderAuthStartRequest = {
-  methodId?: string;
-};
-export type ProviderAuthPollRequest = {
-  sessionId: string;
-};
+export type ProviderAuthStartRequest = { methodId?: string };
+export type ProviderAuthPollRequest = { sessionId: string };
 export type ProviderAuthPollResult = {
   provider: string;
@@ -155,12 +140,7 @@ export type ProviderAuthPollResult = {
   nextPollMs?: number;
 };
-export type ProviderAuthImportResult = {
-  provider: string;
-  status: "imported";
-  source: "cli";
-  expiresAt?: string;
-};
+export type ProviderAuthImportResult = { provider: string; status: "imported"; source: "cli"; expiresAt?: string };
 export type {
   AuthEnabledUpdateRequest,
@@ -169,6 +149,7 @@ export type {
   AuthSetupRequest,
   AuthStatusView
 } from './auth.types';
+export type { ChannelAuthPollRequest, ChannelAuthPollResult, ChannelAuthStartRequest, ChannelAuthStartResult } from './channel-auth.types';
 export type {
   RemoteAccessView,

package/src/components/chat/ChatSidebar.test.tsx CHANGED Viewed

@@ -179,7 +179,7 @@ describe('ChatSidebar', () => {
     expect(screen.getByText('Codex Task')).not.toBeNull();
     expect(screen.getByText('Codex')).not.toBeNull();
-    expect(screen.getByText('session:codex-1')).not.toBeNull();
+    expect(screen.queryByText('session:codex-1')).toBeNull();
   });
   it('formats non-native session badges generically when the type is no longer in the available options', () => {

package/src/components/chat/chat-sidebar-session-item.tsx CHANGED Viewed

@@ -119,7 +119,6 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
                 {runStatus ? <SessionRunBadge status={runStatus} /> : null}
               </span>
             </div>
-            <div className="mt-0.5 text-[11px] text-gray-400 truncate">{session.key}</div>
             <div className="mt-0.5 text-[11px] text-gray-400 truncate">
               {session.messageCount} · {formatDateTime(session.updatedAt)}
             </div>

package/src/components/chat/ncp/ncp-session-adapter.ts CHANGED Viewed

@@ -168,7 +168,6 @@ export function adaptNcpMessageToUiMessage(message: NcpMessageView): UIMessage {
 }
 export function adaptNcpMessagesToUiMessages(messages: readonly NcpMessageView[]): UIMessage[] {
-  console.log('[adaptNcpMessagesToUiMessages]', { messages });
   return messages.map(adaptNcpMessageToUiMessage);
 }

package/src/components/config/ChannelForm.tsx CHANGED Viewed

@@ -1,47 +1,25 @@
 import { useEffect, useState } from 'react';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateChannel, useExecuteConfigAction } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Switch } from '@/components/ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { TagInput } from '@/components/common/TagInput';
 import { StatusDot } from '@/components/ui/status-dot';
 import { LogoBadge } from '@/components/common/LogoBadge';
 import { t } from '@/lib/i18n';
 import { hintForPath } from '@/lib/config-hints';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import { Settings, ToggleLeft, Hash, Mail, Globe, KeyRound, BookOpen } from 'lucide-react';
+import { BookOpen, ChevronDown } from 'lucide-react';
 import type { ConfigActionManifest } from '@/api/types';
 import { resolveChannelTutorialUrl } from '@/lib/channel-tutorials';
 import { getChannelLogo } from '@/lib/logos';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_EMPTY_DETAIL_CARD_CLASS } from './config-layout';
+import { ChannelFormFieldsSection } from './channel-form-fields-section';
 import { buildChannelFields } from './channel-form-fields';
+import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
 type ChannelFormProps = {
   channelName?: string;
 };
-const getFieldIcon = (fieldName: string) => {
-  if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
-    return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
-  }
-  if (fieldName.includes('url') || fieldName.includes('host')) {
-    return <Globe className="h-3.5 w-3.5 text-gray-500" />;
-  }
-  if (fieldName.includes('email') || fieldName.includes('mail')) {
-    return <Mail className="h-3.5 w-3.5 text-gray-500" />;
-  }
-  if (fieldName.includes('id') || fieldName.includes('from')) {
-    return <Hash className="h-3.5 w-3.5 text-gray-500" />;
-  }
-  if (fieldName === 'enabled' || fieldName === 'consentGranted') {
-    return <ToggleLeft className="h-3.5 w-3.5 text-gray-500" />;
-  }
-  return <Settings className="h-3.5 w-3.5 text-gray-500" />;
-};
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -93,6 +71,7 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
     : channelName;
   const channelMeta = meta?.channels.find((item) => item.name === channelName);
   const tutorialUrl = channelMeta ? resolveChannelTutorialUrl(channelMeta) : undefined;
+  const isWeixinChannel = channelName === 'weixin';
   useEffect(() => {
     if (channelConfig) {
@@ -251,111 +230,45 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
       <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
         <div className="min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5">
-          {fields.map((field) => {
-            const hint = channelName
-              ? hintForPath(`channels.${channelName}.${field.name}`, uiHints)
-              : undefined;
-            const label = hint?.label ?? field.label;
-            const placeholder = hint?.placeholder;
-            return (
-              <div key={field.name} className="space-y-2.5">
-                <Label
-                  htmlFor={field.name}
-                  className="flex items-center gap-2 text-sm font-medium text-gray-900"
-                >
-                  {getFieldIcon(field.name)}
-                  {label}
-                </Label>
-                {field.type === 'boolean' && (
-                  <div className="flex items-center justify-between rounded-xl bg-gray-50 p-3">
-                    <span className="text-sm text-gray-500">
-                      {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
-                    </span>
-                    <Switch
-                      id={field.name}
-                      checked={(formData[field.name] as boolean) || false}
-                      onCheckedChange={(checked) => updateField(field.name, checked)}
-                      className="data-[state=checked]:bg-emerald-500"
-                    />
+          {isWeixinChannel ? (
+            <>
+              <WeixinChannelAuthSection
+                channelConfig={channelConfig}
+                formData={formData}
+                disabled={updateChannel.isPending || Boolean(runningActionId)}
+              />
+              <details className="group rounded-2xl border border-gray-200/80 bg-white">
+                <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-5 py-4 text-sm font-medium text-gray-900">
+                  <div>
+                    <p>{t('weixinAuthAdvancedTitle')}</p>
+                    <p className="mt-1 text-xs font-normal text-gray-500">{t('weixinAuthAdvancedDescription')}</p>
                   </div>
-                )}
-                {(field.type === 'text' || field.type === 'email') && (
-                  <Input
-                    id={field.name}
-                    type={field.type}
-                    value={(formData[field.name] as string) || ''}
-                    onChange={(e) => updateField(field.name, e.target.value)}
-                    placeholder={placeholder}
-                    className="rounded-xl"
-                  />
-                )}
-                {field.type === 'password' && (
-                  <Input
-                    id={field.name}
-                    type="password"
-                    value={(formData[field.name] as string) || ''}
-                    onChange={(e) => updateField(field.name, e.target.value)}
-                    placeholder={placeholder ?? t('leaveBlankToKeepUnchanged')}
-                    className="rounded-xl"
-                  />
-                )}
-                {field.type === 'number' && (
-                  <Input
-                    id={field.name}
-                    type="number"
-                    value={(formData[field.name] as number) || 0}
-                    onChange={(e) => updateField(field.name, parseInt(e.target.value, 10) || 0)}
-                    placeholder={placeholder}
-                    className="rounded-xl"
-                  />
-                )}
-                {field.type === 'tags' && (
-                  <TagInput
-                    value={(formData[field.name] as string[]) || []}
-                    onChange={(tags) => updateField(field.name, tags)}
+                  <ChevronDown className="h-4 w-4 text-gray-400 transition-transform group-open:rotate-180" />
+                </summary>
+                <div className="space-y-6 border-t border-gray-100 px-5 py-5">
+                  <ChannelFormFieldsSection
+                    channelName={channelName}
+                    fields={fields}
+                    formData={formData}
+                    jsonDrafts={jsonDrafts}
+                    setJsonDrafts={setJsonDrafts}
+                    updateField={updateField}
+                    uiHints={uiHints}
                   />
-                )}
-                {field.type === 'select' && (
-                  <Select
-                    value={(formData[field.name] as string) || ''}
-                    onValueChange={(v) => updateField(field.name, v)}
-                  >
-                    <SelectTrigger className="rounded-xl">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {(field.options ?? []).map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-                {field.type === 'json' && (
-                  <textarea
-                    id={field.name}
-                    value={jsonDrafts[field.name] ?? '{}'}
-                    onChange={(event) =>
-                      setJsonDrafts((prev) => ({
-                        ...prev,
-                        [field.name]: event.target.value
-                      }))
-                    }
-                    className="min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
-                  />
-                )}
-              </div>
-            );
-          })}
+                </div>
+              </details>
+            </>
+          ) : (
+            <ChannelFormFieldsSection
+              channelName={channelName}
+              fields={fields}
+              formData={formData}
+              jsonDrafts={jsonDrafts}
+              setJsonDrafts={setJsonDrafts}
+              updateField={updateField}
+              uiHints={uiHints}
+            />
+          )}
         </div>
         <div className="flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4">

package/src/components/config/ChannelsList.test.tsx CHANGED Viewed

@@ -3,8 +3,10 @@ import userEvent from '@testing-library/user-event';
 import { ChannelsList } from '@/components/config/ChannelsList';
 const mocks = vi.hoisted(() => ({
-  mutate: vi.fn(),
-  mutateAsync: vi.fn(),
+  updateChannelMutate: vi.fn(),
+  updateChannelMutateAsync: vi.fn(),
+  startChannelAuthMutateAsync: vi.fn(),
+  pollChannelAuthMutateAsync: vi.fn(),
   configQuery: {
     data: {
       channels: {
@@ -51,13 +53,27 @@ const mocks = vi.hoisted(() => ({
   }
 }));
+vi.mock('qrcode', () => ({
+  toDataURL: vi.fn().mockResolvedValue('data:image/png;base64,weixin-qr')
+}));
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: () => ({
+      invalidateQueries: vi.fn().mockResolvedValue(undefined)
+    })
+  };
+});
 vi.mock('@/hooks/useConfig', () => ({
   useConfig: () => mocks.configQuery,
   useConfigMeta: () => mocks.metaQuery,
   useConfigSchema: () => mocks.schemaQuery,
   useUpdateChannel: () => ({
-    mutate: mocks.mutate,
-    mutateAsync: mocks.mutateAsync,
+    mutate: mocks.updateChannelMutate,
+    mutateAsync: mocks.updateChannelMutateAsync,
     isPending: false
   }),
   useExecuteConfigAction: () => ({
@@ -66,27 +82,80 @@ vi.mock('@/hooks/useConfig', () => ({
   })
 }));
+vi.mock('@/hooks/use-channel-auth', () => ({
+  useStartChannelAuth: () => ({
+    mutateAsync: mocks.startChannelAuthMutateAsync,
+    isPending: false
+  }),
+  usePollChannelAuth: () => ({
+    mutateAsync: mocks.pollChannelAuthMutateAsync,
+    isPending: false
+  })
+}));
 describe('ChannelsList', () => {
   beforeEach(() => {
-    mocks.mutate.mockReset();
-    mocks.mutateAsync.mockReset();
+    mocks.updateChannelMutate.mockReset();
+    mocks.updateChannelMutateAsync.mockReset();
+    mocks.startChannelAuthMutateAsync.mockReset();
+    mocks.pollChannelAuthMutateAsync.mockReset();
   });
-  it('renders weixin and submits weixin-specific config fields', async () => {
+  it('renders weixin qr auth card and starts channel auth', async () => {
     const user = userEvent.setup();
+    mocks.startChannelAuthMutateAsync.mockResolvedValue({
+      channel: 'weixin',
+      kind: 'qr_code',
+      sessionId: 'session-1',
+      qrCode: 'qr-token',
+      qrCodeUrl: 'https://example.com/weixin-qr.png',
+      expiresAt: '2026-03-23T10:00:00.000Z',
+      intervalMs: 60_000,
+      note: '请扫码'
+    });
     render(<ChannelsList />);
     await user.click(await screen.findByRole('button', { name: /All Channels/i }));
     expect((await screen.findAllByText('Weixin')).length).toBeGreaterThan(0);
-    expect(await screen.findByLabelText('Default Account ID')).toBeTruthy();
+    expect(await screen.findByRole('button', { name: 'Reconnect with QR' })).toBeTruthy();
+    expect(screen.getByText('Weixin now uses QR login as the primary setup flow.')).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: 'Reconnect with QR' }));
+    await waitFor(() => {
+      expect(mocks.startChannelAuthMutateAsync).toHaveBeenCalledWith({
+        channel: 'weixin',
+        data: expect.objectContaining({
+          accountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com'
+        })
+      });
+    });
+    await waitFor(() => {
+      expect(screen.getByAltText('Weixin login QR code').getAttribute('src')).toBe('data:image/png;base64,weixin-qr');
+    });
+  });
+  it('saves weixin advanced settings from the advanced section', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<ChannelsList />);
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+    await user.click(await screen.findByText('Advanced settings'));
     const timeoutInput = await screen.findByLabelText('Long Poll Timeout (ms)');
     await user.clear(timeoutInput);
     await user.type(timeoutInput, '45000');
-    const accountsJson = await screen.findByLabelText('Accounts JSON');
+    const accountsJson = container.querySelector('textarea#accounts') as HTMLTextAreaElement | null;
+    expect(accountsJson).toBeTruthy();
+    if (!accountsJson) {
+      throw new Error('accounts textarea not found');
+    }
     await user.clear(accountsJson);
     fireEvent.change(accountsJson, {
       target: {
@@ -106,7 +175,7 @@ describe('ChannelsList', () => {
     await user.click(screen.getByRole('button', { name: /save/i }));
     await waitFor(() => {
-      expect(mocks.mutate).toHaveBeenCalledWith({
+      expect(mocks.updateChannelMutate).toHaveBeenCalledWith({
         channel: 'weixin',
         data: expect.objectContaining({
           enabled: false,

package/src/components/config/ModelConfig.test.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ModelConfig } from '@/components/config/ModelConfig';
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  configQuery: {
+    data: {
+      agents: {
+        defaults: {
+          model: 'openai/gpt-5.2',
+          workspace: '~/old-workspace'
+        }
+      },
+      providers: {
+        openai: {
+          enabled: true,
+          apiKeySet: true,
+          models: ['gpt-5.2']
+        }
+      }
+    },
+    isLoading: false
+  },
+  metaQuery: {
+    data: {
+      providers: [
+        {
+          name: 'openai',
+          displayName: 'OpenAI',
+          modelPrefix: 'openai',
+          defaultModels: ['openai/gpt-5.2'],
+          keywords: [],
+          envKey: 'OPENAI_API_KEY'
+        }
+      ]
+    }
+  },
+  schemaQuery: {
+    data: {
+      uiHints: {}
+    }
+  }
+}));
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.configQuery,
+  useConfigMeta: () => mocks.metaQuery,
+  useConfigSchema: () => mocks.schemaQuery,
+  useUpdateModel: () => ({
+    mutate: mocks.mutate,
+    isPending: false
+  })
+}));
+describe('ModelConfig', () => {
+  beforeEach(() => {
+    mocks.mutate.mockReset();
+  });
+  it('submits the workspace together with the selected model', async () => {
+    const user = userEvent.setup();
+    render(<ModelConfig />);
+    const workspaceInput = await screen.findByLabelText('Default Path');
+    await user.clear(workspaceInput);
+    await user.type(workspaceInput, '~/new-workspace');
+    await user.click(screen.getByRole('button', { name: /save/i }));
+    await waitFor(() => {
+      expect(mocks.mutate).toHaveBeenCalledWith({
+        model: 'openai/gpt-5.2',
+        workspace: '~/new-workspace'
+      });
+    });
+  });
+});

package/src/components/config/ModelConfig.tsx CHANGED Viewed

@@ -95,7 +95,10 @@ export function ModelConfig() {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    updateModel.mutate({ model: composedModel });
+    updateModel.mutate({
+      model: composedModel,
+      workspace
+    });
   };
   if (isLoading) {