@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/automation-view/@components/AutomationTaskComposer.tsx

@@ -0,0 +1,220 @@
+/* eslint-disable max-lines -- task composer wires Sender, status bar, and collapse behavior together */
+import { Button, Form, Input, Tooltip } from 'antd'
+import type { FormInstance } from 'antd'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { ConfigResponse } from '@vibe-forge/types'
+
+import { getConfig } from '#~/api.js'
+import { Sender } from '#~/components/chat/sender/Sender'
+import { ChatStatusBar } from '#~/components/chat/status-bar/ChatStatusBar'
+import {
+  DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT,
+  getChatSessionWorkspaceDraftFromConfig
+} from '#~/hooks/chat/chat-session-workspace-draft'
+import type { ChatSessionWorkspaceDraft } from '#~/hooks/chat/chat-session-workspace-draft'
+
+import { useAutomationStartupOptionsData } from '../@hooks/use-automation-startup-options-data'
+import { useAutomationStartupStaticOptions } from '../@hooks/use-automation-startup-static-options'
+import { DEFAULT_STARTUP_FORM_VALUES, isNonEmptyString } from '../@utils/startup-options'
+import type { RuleFormValues } from '../types'
+
+interface AutomationTaskComposerProps {
+  fieldName: number
+  form: FormInstance<RuleFormValues>
+}
+
+interface AutomationTaskSenderProps extends AutomationTaskComposerProps {
+  onChange?: (value: string) => void
+  value?: string
+}
+
+const noop = () => {}
+const preventSubmit = () => false
+
+const isSenderEffort = (value: unknown): value is NonNullable<RuleFormValues['tasks'][number]['effort']> => (
+  value === 'default' || value === 'low' || value === 'medium' || value === 'high' || value === 'max'
+)
+
+function AutomationTaskSender({ fieldName, form, onChange, value }: AutomationTaskSenderProps) {
+  const { t } = useTranslation()
+  const emittedValueRef = useRef(value ?? '')
+  const [initialContent, setInitialContent] = useState(value ?? '')
+  const adapter = Form.useWatch(['tasks', fieldName, 'adapter'], form)
+  const model = Form.useWatch(['tasks', fieldName, 'model'], form)
+  const effort = Form.useWatch(['tasks', fieldName, 'effort'], form)
+  const selectedAdapter = isNonEmptyString(adapter) ? adapter : undefined
+  const selectedModel = isNonEmptyString(model) ? model : undefined
+  const selectedEffort = isSenderEffort(effort) ? effort : 'default'
+  const {
+    adapterOptions,
+    effectiveAdapter,
+    effectiveEffort,
+    effectiveModel,
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions
+  } = useAutomationStartupOptionsData({
+    selectedAdapter,
+    selectedEffort,
+    selectedModel
+  })
+  const { effortOptions } = useAutomationStartupStaticOptions(t)
+
+  useEffect(() => {
+    const nextValue = value ?? ''
+
+    if (nextValue === emittedValueRef.current) {
+      return
+    }
+
+    emittedValueRef.current = nextValue
+    setInitialContent(nextValue)
+  }, [value])
+
+  const setTaskField = (name: keyof RuleFormValues['tasks'][number], nextValue: unknown) => {
+    form.setFieldValue(['tasks', fieldName, name], nextValue)
+  }
+
+  return (
+    <div className='automation-view__task-sender'>
+      <Sender
+        initialContent={initialContent}
+        placeholder={t('automation.prompt')}
+        hideReferenceActions
+        hideSubmitAction
+        forceEffortControl
+        adapterOptions={adapterOptions}
+        selectedAdapter={effectiveAdapter}
+        onAdapterChange={(nextAdapter) => setTaskField('adapter', nextAdapter)}
+        modelMenuGroups={modelMenuGroups}
+        modelSearchOptions={modelSearchOptions}
+        recommendedModelOptions={recommendedModelOptions}
+        servicePreviewModelOptions={servicePreviewModelOptions}
+        selectedModel={effectiveModel}
+        onModelChange={(nextModel) => setTaskField('model', nextModel)}
+        effort={effectiveEffort}
+        effortOptions={effortOptions}
+        onEffortChange={(nextEffort) => setTaskField('effort', nextEffort)}
+        onInputChange={(nextValue) => {
+          emittedValueRef.current = nextValue
+          onChange?.(nextValue)
+        }}
+        onInterrupt={noop}
+        onSend={preventSubmit}
+        onSendContent={preventSubmit}
+      />
+    </div>
+  )
+}
+
+const getTaskWorkspaceDraft = (
+  task: RuleFormValues['tasks'][number] | undefined,
+  defaultDraft: ChatSessionWorkspaceDraft
+): ChatSessionWorkspaceDraft => {
+  const createWorktreeMode = task?.createWorktreeMode ?? DEFAULT_STARTUP_FORM_VALUES.createWorktreeMode
+  const branchAction = task?.branchAction ?? DEFAULT_STARTUP_FORM_VALUES.branchAction
+  const branchName = task?.branchName?.trim() ?? ''
+  const createWorktree = createWorktreeMode === 'managed'
+    ? true
+    : createWorktreeMode === 'local'
+    ? false
+    : defaultDraft.createWorktree
+
+  return {
+    createWorktree,
+    branch: branchAction === 'default' || branchName === ''
+      ? undefined
+      : {
+        mode: branchAction,
+        name: branchName,
+        kind: task?.branchKind ?? DEFAULT_STARTUP_FORM_VALUES.branchKind
+      }
+  }
+}
+
+function AutomationTaskStatusBar({ fieldName, form }: AutomationTaskComposerProps) {
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const task = Form.useWatch(['tasks', fieldName], form)
+  const defaultDraft = useMemo(() => (
+    configRes == null ? DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT : getChatSessionWorkspaceDraftFromConfig(configRes)
+  ), [configRes])
+  const draftWorkspace = useMemo(() => getTaskWorkspaceDraft(task, defaultDraft), [defaultDraft, task])
+  const handleDraftWorkspaceChange = useCallback((nextDraft: ChatSessionWorkspaceDraft) => {
+    form.setFieldValue(
+      ['tasks', fieldName, 'createWorktreeMode'],
+      nextDraft.createWorktree ? 'managed' : 'local'
+    )
+
+    if (nextDraft.branch == null) {
+      form.setFieldValue(['tasks', fieldName, 'branchAction'], 'default')
+      form.setFieldValue(['tasks', fieldName, 'branchName'], '')
+      form.setFieldValue(['tasks', fieldName, 'branchKind'], DEFAULT_STARTUP_FORM_VALUES.branchKind)
+      return
+    }
+
+    form.setFieldValue(['tasks', fieldName, 'branchAction'], nextDraft.branch.mode)
+    form.setFieldValue(['tasks', fieldName, 'branchName'], nextDraft.branch.name)
+    form.setFieldValue(
+      ['tasks', fieldName, 'branchKind'],
+      nextDraft.branch.kind ?? DEFAULT_STARTUP_FORM_VALUES.branchKind
+    )
+  }, [fieldName, form])
+
+  return (
+    <div className='automation-view__task-status-bar'>
+      <ChatStatusBar
+        draftWorkspace={draftWorkspace}
+        isCreating={false}
+        onDraftWorkspaceChange={handleDraftWorkspaceChange}
+      />
+    </div>
+  )
+}
+
+export function AutomationTaskComposer({ fieldName, form }: AutomationTaskComposerProps) {
+  const { t } = useTranslation()
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <div className={`automation-view__task-composer ${collapsed ? 'is-collapsed' : ''}`.trim()}>
+      <div className='automation-view__task-title-row'>
+        <Tooltip title={collapsed ? t('automation.expandTask') : t('automation.collapseTask')}>
+          <Button
+            aria-expanded={!collapsed}
+            aria-label={collapsed ? t('automation.expandTask') : t('automation.collapseTask')}
+            className='automation-view__task-collapse-button'
+            type='text'
+            onClick={() => setCollapsed(prev => !prev)}
+          >
+            <span className='material-symbols-rounded automation-view__action-icon'>
+              {collapsed ? 'chevron_right' : 'keyboard_arrow_down'}
+            </span>
+          </Button>
+        </Tooltip>
+        <Form.Item className='automation-view__task-title-item' name={[fieldName, 'title']}>
+          <Input
+            aria-label={t('automation.taskTitle')}
+            className='automation-view__task-title-input'
+            placeholder={t('automation.taskTitlePlaceholder')}
+          />
+        </Form.Item>
+      </div>
+      <div className='automation-view__task-collapsible' hidden={collapsed}>
+        <div className='sender-container automation-view__task-sender-stack'>
+          <Form.Item
+            className='automation-view__task-prompt-item'
+            name={[fieldName, 'prompt']}
+            rules={[{ required: true, message: t('automation.promptRequired') }]}
+          >
+            <AutomationTaskSender fieldName={fieldName} form={form} />
+          </Form.Item>
+          <AutomationTaskStatusBar fieldName={fieldName} form={form} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/automation-view/@components/AutomationTriggerRow.tsx

@@ -0,0 +1,192 @@
+import { Button, Form, Input, InputNumber, Select, Tooltip } from 'antd'
+import type { FormInstance } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { RuleFormValues } from '../types'
+
+interface AutomationTriggerRowProps {
+  fieldName: number
+  form: FormInstance<RuleFormValues>
+  getWebhookUrl: (triggerId?: string, webhookKey?: string) => string
+  index: number
+  remove: (name: number) => void
+  triggerCount: number
+  updateWeeklyCron: (index: number, nextDay?: string, nextTime?: string) => void
+}
+
+const resetTriggerFields = (
+  form: FormInstance<RuleFormValues>,
+  fieldName: number,
+  value: RuleFormValues['triggers'][number]['type']
+) => {
+  form.setFieldValue(['triggers', fieldName, 'intervalMinutes'], 30)
+  form.setFieldValue(['triggers', fieldName, 'cronExpression'], '')
+  form.setFieldValue(['triggers', fieldName, 'weeklyDay'], '1')
+  form.setFieldValue(['triggers', fieldName, 'weeklyTime'], '09:00')
+  form.setFieldValue(['triggers', fieldName, 'webhookKey'], '')
+  if (value !== 'cron') {
+    form.setFieldValue(['triggers', fieldName, 'cronPreset'], undefined)
+  }
+}
+
+export function AutomationTriggerRow({
+  fieldName,
+  form,
+  getWebhookUrl,
+  index,
+  remove,
+  triggerCount,
+  updateWeeklyCron
+}: AutomationTriggerRowProps) {
+  const { t } = useTranslation()
+  const selectArrow = <span className='material-symbols-rounded automation-view__select-arrow'>
+    keyboard_arrow_down
+  </span>
+
+  return (
+    <Form.Item
+      noStyle
+      shouldUpdate={(prevValues, nextValues) => {
+        const prevTrigger = prevValues.triggers?.[fieldName]
+        const nextTrigger = nextValues.triggers?.[fieldName]
+        return prevTrigger?.type !== nextTrigger?.type ||
+          prevTrigger?.webhookKey !== nextTrigger?.webhookKey ||
+          prevTrigger?.id !== nextTrigger?.id
+      }}
+    >
+      {(formInstance) => {
+        const triggerType = formInstance.getFieldValue([
+          'triggers',
+          fieldName,
+          'type'
+        ]) as RuleFormValues['triggers'][number]['type']
+        const triggerId = formInstance.getFieldValue(['triggers', fieldName, 'id']) as string | undefined
+        const webhookKey = formInstance.getFieldValue(['triggers', fieldName, 'webhookKey']) as string | undefined
+        const webhookUrl = getWebhookUrl(triggerId, webhookKey)
+        return (
+          <div className='automation-view__trigger-row'>
+            <Form.Item name={[fieldName, 'id']} hidden>
+              <Input />
+            </Form.Item>
+            <div className='automation-view__trigger-type'>
+              <Form.Item
+                name={[fieldName, 'type']}
+                rules={[{ required: true, message: t('automation.ruleTypeRequired') }]}
+              >
+                <Select
+                  aria-label={t('automation.ruleType')}
+                  options={[
+                    { label: t('automation.typeInterval'), value: 'interval' },
+                    { label: t('automation.typeWebhook'), value: 'webhook' },
+                    { label: t('automation.typeCron'), value: 'cron' }
+                  ]}
+                  suffixIcon={selectArrow}
+                  onChange={(value) => resetTriggerFields(form, fieldName, value)}
+                />
+              </Form.Item>
+            </div>
+            <div className='automation-view__trigger-config'>
+              {triggerType === 'interval' && (
+                <Form.Item
+                  name={[fieldName, 'intervalMinutes']}
+                  rules={[{ required: true, message: t('automation.intervalRequired') }]}
+                >
+                  <InputNumber
+                    min={1}
+                    aria-label={t('automation.intervalMinutes')}
+                    className='automation-view__input-number'
+                  />
+                </Form.Item>
+              )}
+              {triggerType === 'cron' && (
+                <div className='automation-view__cron-section'>
+                  <Form.Item
+                    name={[fieldName, 'cronExpression']}
+                    rules={[{ required: true, message: t('automation.cronExpressionRequired') }]}
+                  >
+                    <Input
+                      aria-label={t('automation.cronExpressionLabel')}
+                      placeholder={t('automation.cronExpressionHint')}
+                    />
+                  </Form.Item>
+                  <Form.Item name={[fieldName, 'cronPreset']}>
+                    <Select
+                      aria-label={t('automation.cronPreset')}
+                      options={[
+                        { label: t('automation.cronPresetHourly'), value: '0 * * * *' },
+                        { label: t('automation.cronPresetDaily9'), value: '0 9 * * *' },
+                        { label: t('automation.cronPresetWeekday9'), value: '0 9 * * 1-5' },
+                        { label: t('automation.cronPresetWeekend10'), value: '0 10 * * 6,0' }
+                      ]}
+                      onChange={(value) => form.setFieldValue(['triggers', fieldName, 'cronExpression'], value)}
+                      placeholder={t('automation.cronPresetHint')}
+                      allowClear
+                    />
+                  </Form.Item>
+                  <div className='automation-view__cron-weekly'>
+                    <Form.Item name={[fieldName, 'weeklyDay']}>
+                      <Select
+                        aria-label={t('automation.weeklyDay')}
+                        options={[
+                          { label: t('automation.weekdaySun'), value: '0' },
+                          { label: t('automation.weekdayMon'), value: '1' },
+                          { label: t('automation.weekdayTue'), value: '2' },
+                          { label: t('automation.weekdayWed'), value: '3' },
+                          { label: t('automation.weekdayThu'), value: '4' },
+                          { label: t('automation.weekdayFri'), value: '5' },
+                          { label: t('automation.weekdaySat'), value: '6' }
+                        ]}
+                        onChange={(value) => updateWeeklyCron(index, value)}
+                      />
+                    </Form.Item>
+                    <Form.Item name={[fieldName, 'weeklyTime']}>
+                      <Input
+                        aria-label={t('automation.weeklyTime')}
+                        placeholder={t('automation.weeklyTimeHint')}
+                        onChange={(event) => updateWeeklyCron(index, undefined, event.target.value)}
+                      />
+                    </Form.Item>
+                  </div>
+                </div>
+              )}
+              {triggerType === 'webhook' && (
+                <div className='automation-view__webhook'>
+                  <Form.Item name={[fieldName, 'webhookKey']}>
+                    <Input aria-label={t('automation.webhookKey')} placeholder={t('automation.webhookKeyHint')} />
+                  </Form.Item>
+                  {webhookUrl && (
+                    <div className='automation-view__webhook-row'>
+                      <span className='automation-view__webhook-url'>{webhookUrl}</span>
+                      <Tooltip title={t('automation.copy')}>
+                        <Button
+                          className='automation-view__icon-button'
+                          type='text'
+                          onClick={() => void navigator.clipboard.writeText(webhookUrl)}
+                        >
+                          <span className='material-symbols-rounded automation-view__action-icon'>content_copy</span>
+                        </Button>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className='automation-view__trigger-actions'>
+              <Tooltip title={t('automation.remove')}>
+                <Button
+                  className='automation-view__trigger-remove-button'
+                  type='text'
+                  onClick={() => remove(fieldName)}
+                  disabled={triggerCount <= 1}
+                >
+                  <span className='material-symbols-rounded automation-view__action-icon'>close</span>
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+        )
+      }}
+    </Form.Item>
+  )
+}