@vibe-forge/client 3.0.0-alpha.6 → 3.0.0-alpha.7

package/src/components/config/record-editors/McpServersRecordEditor.tsx

@@ -1,260 +0,0 @@
-import './McpServersRecordEditor.scss'
-
-import { Button, Input, Select, Switch, Tooltip } from 'antd'
-import { useEffect, useMemo, useState } from 'react'
-
-import { StringArrayEditor } from '../ConfigEditors'
-import { FieldRow } from '../ConfigFieldRow'
-import { getTypeIcon } from '../configUtils'
-import type { TranslationFn } from '../configUtils'
-import { KeyValueEditor } from './KeyValueEditor'
-
-export const McpServersRecordEditor = ({
-  value,
-  onChange,
-  t,
-  keyPlaceholder
-}: {
-  value: Record<string, unknown>
-  onChange: (nextValue: Record<string, unknown>) => void
-  t: TranslationFn
-  keyPlaceholder: string
-}) => {
-  const [newKey, setNewKey] = useState('')
-  const entries = useMemo(() => Object.entries(value), [value])
-  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
-    Object.fromEntries(entries.map(([key]) => [key, true]))
-  ))
-
-  useEffect(() => {
-    setCollapsedKeys(prev => {
-      const next: Record<string, boolean> = {}
-      for (const [key] of entries) {
-        next[key] = prev[key] ?? true
-      }
-      return next
-    })
-  }, [entries])
-
-  return (
-    <div className='config-view__record-list'>
-      {entries.map(([key, itemValue]) => {
-        const recordValue = (itemValue != null && typeof itemValue === 'object')
-          ? itemValue as Record<string, unknown>
-          : {}
-        const typeValue = typeof recordValue.type === 'string' ? recordValue.type : 'command'
-        const envValue = (recordValue.env != null && typeof recordValue.env === 'object')
-          ? recordValue.env as Record<string, string>
-          : {}
-        const headersValue = (recordValue.headers != null && typeof recordValue.headers === 'object')
-          ? recordValue.headers as Record<string, string>
-          : {}
-        const argsValue = Array.isArray(recordValue.args)
-          ? recordValue.args.filter(item => typeof item === 'string')
-          : []
-
-        const updateRecord = (nextValue: Record<string, unknown>) => {
-          onChange({ ...value, [key]: nextValue })
-        }
-
-        const isCollapsed = collapsedKeys[key] === true
-        return (
-          <div
-            key={key}
-            className={`config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`}
-          >
-            <div className='config-view__record-title'>
-              <div className='config-view__record-title-left'>
-                <Tooltip title={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}>
-                  <Button
-                    size='small'
-                    type='text'
-                    className='config-view__icon-button config-view__icon-button--compact'
-                    aria-label={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}
-                    icon={
-                      <span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>
-                    }
-                    onClick={() => {
-                      setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
-                    }}
-                  />
-                </Tooltip>
-                <span>{key}</span>
-              </div>
-              <Tooltip title={t('config.editor.remove')}>
-                <Button
-                  size='small'
-                  type='text'
-                  danger
-                  className='config-view__icon-button config-view__icon-button--compact'
-                  aria-label={t('config.editor.remove')}
-                  icon={<span className='material-symbols-rounded'>delete</span>}
-                  onClick={() => {
-                    const updated = { ...value }
-                    delete updated[key]
-                    onChange(updated)
-                  }}
-                />
-              </Tooltip>
-            </div>
-            <div className='config-view__record-body'>
-              <div className='config-view__record-fields'>
-                <FieldRow
-                  title={t('config.fields.mcpServer.enabled.label')}
-                  description={t('config.fields.mcpServer.enabled.desc')}
-                  icon={getTypeIcon('boolean')}
-                >
-                  <Switch
-                    checked={Boolean(recordValue.enabled)}
-                    onChange={(next) => {
-                      updateRecord({ ...recordValue, enabled: next })
-                    }}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.mcpServer.type.label')}
-                  description={t('config.fields.mcpServer.type.desc')}
-                  icon={getTypeIcon('string')}
-                >
-                  <Select
-                    value={typeValue}
-                    options={[
-                      { value: 'command', label: t('config.options.mcp.command') },
-                      { value: 'sse', label: t('config.options.mcp.sse') },
-                      { value: 'http', label: t('config.options.mcp.http') }
-                    ]}
-                    onChange={(next) => {
-                      const nextRecord = { ...recordValue }
-                      if (next === 'command') {
-                        delete nextRecord.type
-                        if (nextRecord.command == null) nextRecord.command = ''
-                        if (nextRecord.args == null) nextRecord.args = []
-                        delete nextRecord.url
-                        delete nextRecord.headers
-                      } else {
-                        nextRecord.type = next
-                        if (nextRecord.url == null) nextRecord.url = ''
-                        if (nextRecord.headers == null) nextRecord.headers = {}
-                        delete nextRecord.command
-                        delete nextRecord.args
-                      }
-                      updateRecord(nextRecord)
-                    }}
-                  />
-                </FieldRow>
-                {typeValue === 'command' && (
-                  <>
-                    <FieldRow
-                      title={t('config.fields.mcpServer.command.label')}
-                      description={t('config.fields.mcpServer.command.desc')}
-                      icon={getTypeIcon('string')}
-                    >
-                      <Input
-                        value={typeof recordValue.command === 'string' ? recordValue.command : ''}
-                        onChange={(event) => {
-                          updateRecord({ ...recordValue, command: event.target.value })
-                        }}
-                        placeholder={t('config.editor.commandPlaceholder')}
-                      />
-                    </FieldRow>
-                    <FieldRow
-                      title={t('config.fields.mcpServer.args.label')}
-                      description={t('config.fields.mcpServer.args.desc')}
-                      icon={getTypeIcon('array')}
-                      layout='stacked'
-                    >
-                      <StringArrayEditor
-                        value={argsValue}
-                        onChange={(next) => {
-                          updateRecord({ ...recordValue, args: next })
-                        }}
-                        t={t}
-                      />
-                    </FieldRow>
-                  </>
-                )}
-                {typeValue !== 'command' && (
-                  <>
-                    <FieldRow
-                      title={t('config.fields.mcpServer.url.label')}
-                      description={t('config.fields.mcpServer.url.desc')}
-                      icon={getTypeIcon('string')}
-                    >
-                      <Input
-                        value={typeof recordValue.url === 'string' ? recordValue.url : ''}
-                        onChange={(event) => {
-                          updateRecord({ ...recordValue, url: event.target.value })
-                        }}
-                        placeholder={t('config.editor.urlPlaceholder')}
-                      />
-                    </FieldRow>
-                    <FieldRow
-                      title={t('config.fields.mcpServer.headers.label')}
-                      description={t('config.fields.mcpServer.headers.desc')}
-                      icon={getTypeIcon('object')}
-                      layout='stacked'
-                    >
-                      <KeyValueEditor
-                        value={headersValue}
-                        onChange={(next) => {
-                          updateRecord({ ...recordValue, headers: next })
-                        }}
-                        t={t}
-                        keyPlaceholder={t('config.editor.newHeaderName')}
-                      />
-                    </FieldRow>
-                  </>
-                )}
-                <FieldRow
-                  title={t('config.fields.mcpServer.env.label')}
-                  description={t('config.fields.mcpServer.env.desc')}
-                  icon={getTypeIcon('object')}
-                  layout='stacked'
-                >
-                  <KeyValueEditor
-                    value={envValue}
-                    onChange={(next) => {
-                      updateRecord({ ...recordValue, env: next })
-                    }}
-                    t={t}
-                    keyPlaceholder={t('config.editor.newEnvVarName')}
-                  />
-                </FieldRow>
-              </div>
-            </div>
-          </div>
-        )
-      })}
-      <div className='config-view__record-add'>
-        <div className='config-view__record-add-inputs'>
-          <Input
-            value={newKey}
-            placeholder={keyPlaceholder}
-            onChange={(event) => setNewKey(event.target.value)}
-          />
-          <Tooltip title={t('common.confirm')}>
-            <Button
-              size='small'
-              type='primary'
-              className='config-view__icon-button'
-              aria-label={t('common.confirm')}
-              icon={<span className='material-symbols-rounded'>check</span>}
-              disabled={newKey.trim() === '' || Object.hasOwn(value, newKey)}
-              onClick={() => {
-                onChange({
-                  ...value,
-                  [newKey]: {
-                    enabled: true,
-                    command: '',
-                    args: []
-                  }
-                })
-                setNewKey('')
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/config/record-editors/ModelServicesRecordEditor.scss

@@ -1 +0,0 @@
-@use './RecordEditors.scss';

package/src/components/config/record-editors/ModelServicesRecordEditor.tsx

@@ -1,265 +0,0 @@
-import './ModelServicesRecordEditor.scss'
-
-import { Button, Input, InputNumber, Tooltip } from 'antd'
-import { useEffect, useMemo, useState } from 'react'
-
-import { ComplexTextEditor, StringArrayEditor } from '../ConfigEditors'
-import { FieldRow } from '../ConfigFieldRow'
-import { getTypeIcon } from '../configUtils'
-import type { TranslationFn } from '../configUtils'
-
-export const ModelServicesRecordEditor = ({
-  value,
-  onChange,
-  t,
-  keyPlaceholder
-}: {
-  value: Record<string, unknown>
-  onChange: (nextValue: Record<string, unknown>) => void
-  t: TranslationFn
-  keyPlaceholder: string
-}) => {
-  const [newKey, setNewKey] = useState('')
-  const entries = useMemo(() => Object.entries(value), [value])
-  const [collapsedKeys, setCollapsedKeys] = useState<Record<string, boolean>>(() => (
-    Object.fromEntries(entries.map(([key]) => [key, true]))
-  ))
-
-  useEffect(() => {
-    setCollapsedKeys(prev => {
-      const next: Record<string, boolean> = {}
-      for (const [key] of entries) {
-        next[key] = prev[key] ?? true
-      }
-      return next
-    })
-  }, [entries])
-
-  return (
-    <div className='config-view__record-list'>
-      {entries.map(([key, itemValue]) => {
-        const recordValue = (itemValue != null && typeof itemValue === 'object')
-          ? itemValue as Record<string, unknown>
-          : {}
-        const titleValue = typeof recordValue.title === 'string' ? recordValue.title : ''
-        const descriptionValue = typeof recordValue.description === 'string' ? recordValue.description : ''
-        const displayName = titleValue.trim() !== '' ? titleValue : key
-        const models = Array.isArray(recordValue.models)
-          ? recordValue.models.filter(item => typeof item === 'string')
-          : []
-
-        const isCollapsed = collapsedKeys[key] === true
-        return (
-          <div
-            key={key}
-            className={`config-view__record-card${isCollapsed ? ' config-view__record-card--collapsed' : ''}`}
-          >
-            <div className='config-view__record-title'>
-              <div className='config-view__record-title-left'>
-                <Tooltip title={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}>
-                  <Button
-                    size='small'
-                    type='text'
-                    className='config-view__icon-button config-view__icon-button--compact'
-                    aria-label={isCollapsed ? t('config.editor.expand') : t('config.editor.collapse')}
-                    icon={
-                      <span className='material-symbols-rounded'>{isCollapsed ? 'chevron_right' : 'expand_more'}</span>
-                    }
-                    onClick={() => {
-                      setCollapsedKeys(prev => ({ ...prev, [key]: !isCollapsed }))
-                    }}
-                  />
-                </Tooltip>
-                <div className='config-view__record-heading'>
-                  <div>{displayName}</div>
-                  {displayName !== key && (
-                    <div className='config-view__record-subtitle'>{key}</div>
-                  )}
-                  {descriptionValue !== '' && (
-                    <div className='config-view__record-desc'>{descriptionValue}</div>
-                  )}
-                </div>
-              </div>
-              <Tooltip title={t('config.editor.remove')}>
-                <Button
-                  size='small'
-                  type='text'
-                  danger
-                  className='config-view__icon-button config-view__icon-button--compact'
-                  aria-label={t('config.editor.remove')}
-                  icon={<span className='material-symbols-rounded'>delete</span>}
-                  onClick={() => {
-                    const updated = { ...value }
-                    delete updated[key]
-                    onChange(updated)
-                  }}
-                />
-              </Tooltip>
-            </div>
-            <div className='config-view__record-body'>
-              <div className='config-view__record-fields'>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.title.label')}
-                  description={t('config.fields.modelServices.item.title.desc')}
-                  icon={getTypeIcon('string')}
-                >
-                  <Input
-                    value={titleValue}
-                    onChange={(event) => {
-                      onChange({ ...value, [key]: { ...recordValue, title: event.target.value } })
-                    }}
-                    placeholder={t('config.editor.titlePlaceholder')}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.description.label')}
-                  description={t('config.fields.modelServices.item.description.desc')}
-                  icon={getTypeIcon('string')}
-                  layout='stacked'
-                >
-                  <Input.TextArea
-                    value={descriptionValue}
-                    onChange={(event) => {
-                      onChange({ ...value, [key]: { ...recordValue, description: event.target.value } })
-                    }}
-                    autoSize={{ minRows: 2 }}
-                    placeholder={t('config.editor.descriptionPlaceholder')}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.apiBaseUrl.label')}
-                  description={t('config.fields.modelServices.item.apiBaseUrl.desc')}
-                  icon={getTypeIcon('string')}
-                >
-                  <Input
-                    value={typeof recordValue.apiBaseUrl === 'string' ? recordValue.apiBaseUrl : ''}
-                    onChange={(event) => {
-                      onChange({ ...value, [key]: { ...recordValue, apiBaseUrl: event.target.value } })
-                    }}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.apiKey.label')}
-                  description={t('config.fields.modelServices.item.apiKey.desc')}
-                  icon={getTypeIcon('string')}
-                >
-                  <Input.Password
-                    value={typeof recordValue.apiKey === 'string' ? recordValue.apiKey : ''}
-                    onChange={(event) => {
-                      onChange({ ...value, [key]: { ...recordValue, apiKey: event.target.value } })
-                    }}
-                    placeholder={t('config.editor.secretPlaceholder')}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.models.label')}
-                  description={t('config.fields.modelServices.item.models.desc')}
-                  icon={getTypeIcon('array')}
-                  layout='stacked'
-                >
-                  <StringArrayEditor
-                    value={models}
-                    onChange={(next) => {
-                      onChange({ ...value, [key]: { ...recordValue, models: next } })
-                    }}
-                    t={t}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.timeoutMs.label')}
-                  description={t('config.fields.modelServices.item.timeoutMs.desc')}
-                  icon={getTypeIcon('number')}
-                >
-                  <InputNumber
-                    min={1}
-                    step={1000}
-                    value={typeof recordValue.timeoutMs === 'number' ? recordValue.timeoutMs : undefined}
-                    onChange={(nextValue) => {
-                      onChange({
-                        ...value,
-                        [key]: {
-                          ...recordValue,
-                          ...(typeof nextValue === 'number' ? { timeoutMs: nextValue } : { timeoutMs: undefined })
-                        }
-                      })
-                    }}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.maxOutputTokens.label')}
-                  description={t('config.fields.modelServices.item.maxOutputTokens.desc')}
-                  icon={getTypeIcon('number')}
-                >
-                  <InputNumber
-                    min={1}
-                    step={256}
-                    value={typeof recordValue.maxOutputTokens === 'number' ? recordValue.maxOutputTokens : undefined}
-                    onChange={(nextValue) => {
-                      onChange({
-                        ...value,
-                        [key]: {
-                          ...recordValue,
-                          ...(typeof nextValue === 'number'
-                            ? { maxOutputTokens: nextValue }
-                            : { maxOutputTokens: undefined })
-                        }
-                      })
-                    }}
-                  />
-                </FieldRow>
-                <FieldRow
-                  title={t('config.fields.modelServices.item.extra.label')}
-                  description={t('config.fields.modelServices.item.extra.desc')}
-                  icon={getTypeIcon('object')}
-                  layout='stacked'
-                >
-                  <ComplexTextEditor
-                    value={recordValue.extra ?? {}}
-                    onChange={(next) => {
-                      onChange({ ...value, [key]: { ...recordValue, extra: next } })
-                    }}
-                  />
-                </FieldRow>
-              </div>
-            </div>
-          </div>
-        )
-      })}
-      <div className='config-view__record-add'>
-        <div className='config-view__record-add-inputs'>
-          <Input
-            value={newKey}
-            placeholder={keyPlaceholder}
-            onChange={(event) => setNewKey(event.target.value)}
-          />
-          <Tooltip title={t('common.confirm')}>
-            <Button
-              size='small'
-              type='primary'
-              className='config-view__icon-button'
-              aria-label={t('common.confirm')}
-              icon={<span className='material-symbols-rounded'>check</span>}
-              disabled={newKey.trim() === '' || Object.hasOwn(value, newKey)}
-              onClick={() => {
-                onChange({
-                  ...value,
-                  [newKey]: {
-                    title: '',
-                    description: '',
-                    apiBaseUrl: '',
-                    apiKey: '',
-                    models: [],
-                    timeoutMs: undefined,
-                    maxOutputTokens: undefined,
-                    extra: {}
-                  }
-                })
-                setNewKey('')
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    </div>
-  )
-}