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

package/src/components/automation-view/AutomationEmptyLanding.tsx

@@ -0,0 +1,211 @@
+import './AutomationEmptyLanding.scss'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+
+import type { ChatMessageContent } from '@vibe-forge/core'
+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 { ComposerLanding } from '#~/components/composer-landing/ComposerLanding'
+import {
+  SidebarListCollapsedActionButton,
+  SidebarListCollapsedActions
+} from '#~/components/sidebar-list/SidebarListHeader'
+import { DEFAULT_CHAT_SESSION_TARGET_DRAFT } from '#~/hooks/chat/chat-session-target'
+import type { ChatSessionTargetDraft } from '#~/hooks/chat/chat-session-target'
+import {
+  DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT,
+  getChatSessionWorkspaceDraftFromConfig
+} from '#~/hooks/chat/chat-session-workspace-draft'
+import { useChatEffort } from '#~/hooks/chat/use-chat-effort'
+import { useChatModelAdapterSelection } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import { useChatPermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
+import { AutomationEmptyGuide } from './AutomationEmptyGuide'
+
+const noop = () => {}
+
+interface AutomationEmptyLandingProps {
+  flushPanelPadding?: boolean
+  isCreatingRule?: boolean
+  isRulePanelCollapsed?: boolean
+  onCreateRule?: () => void
+  onExpandRulePanel?: () => void
+}
+
+export function AutomationEmptyLanding({
+  flushPanelPadding = false,
+  isCreatingRule = false,
+  isRulePanelCollapsed = false,
+  onCreateRule,
+  onExpandRulePanel
+}: AutomationEmptyLandingProps) {
+  const { t } = useTranslation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
+  const { data: configRes } = useSWR<ConfigResponse>('/api/config', getConfig)
+  const workspaceDraftDirtyRef = useRef(false)
+  const defaultWorkspaceDraft = useMemo(() => (
+    configRes == null ? DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT : getChatSessionWorkspaceDraftFromConfig(configRes)
+  ), [configRes])
+  const [sessionTargetDraft, setSessionTargetDraft] = useState<ChatSessionTargetDraft>(() => ({
+    ...DEFAULT_CHAT_SESSION_TARGET_DRAFT
+  }))
+  const [workspaceDraft, setWorkspaceDraft] = useState(() => ({ ...DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT }))
+  const [starterContent, setStarterContent] = useState('')
+  const [starterContentKey, setStarterContentKey] = useState(0)
+  const {
+    adapterOptions,
+    hasAvailableModels,
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    selectedAdapter,
+    selectedModel,
+    selectedModelWithService,
+    servicePreviewModelOptions,
+    setSelectedAdapter,
+    setSelectedModel,
+    toggleRecommendedModel,
+    updatingRecommendedModelValue
+  } = useChatModelAdapterSelection()
+  const { effort, setEffort, effortOptions } = useChatEffort()
+  const { permissionMode, setPermissionMode, permissionModeOptions } = useChatPermissionMode()
+  const { isCreating: isCreatingSession, send, sendContent, interrupt } = useChatSessionActions({
+    modelForQuery: selectedModelWithService,
+    hasAvailableModels,
+    effort,
+    permissionMode,
+    adapter: selectedAdapter,
+    sessionTargetDraft,
+    workspaceDraft,
+    onClearMessages: noop
+  })
+
+  const handleSelectStarter = (prompt: string) => {
+    setStarterContent(prompt)
+    setStarterContentKey((current) => current + 1)
+  }
+
+  const buildAutomationCreationText = (text: string) => {
+    const request = text.trim()
+    const lowerRequest = request.toLowerCase()
+    if (request.includes('自动化任务工具') || lowerRequest.includes('automation tools')) {
+      return request
+    }
+    return t('automation.emptyLandingSendInstruction', { request })
+  }
+
+  const buildAutomationCreationContent = (content: ChatMessageContent[]) => {
+    let didWrapText = false
+    const nextContent = content.map((item): ChatMessageContent => {
+      if (item.type !== 'text' || didWrapText) {
+        return item
+      }
+
+      didWrapText = true
+      return {
+        ...item,
+        text: buildAutomationCreationText(item.text)
+      }
+    })
+
+    if (didWrapText) return nextContent
+
+    return [
+      { type: 'text' as const, text: t('automation.emptyLandingAttachmentInstruction') },
+      ...nextContent
+    ]
+  }
+
+  const composer = (
+    <div className='sender-container automation-empty-guide__composer'>
+      <Sender
+        key={starterContentKey}
+        initialContent={starterContent}
+        placeholder={t('automation.emptyLandingPlaceholder')}
+        autoFocus
+        sessionStatus={isCreatingSession ? 'running' : undefined}
+        onInterrupt={interrupt}
+        onSend={(text) => send(buildAutomationCreationText(text))}
+        onSendContent={(content: ChatMessageContent[]) => sendContent(buildAutomationCreationContent(content))}
+        modelMenuGroups={modelMenuGroups}
+        modelSearchOptions={modelSearchOptions}
+        recommendedModelOptions={recommendedModelOptions}
+        servicePreviewModelOptions={servicePreviewModelOptions}
+        onToggleRecommendedModel={toggleRecommendedModel}
+        updatingRecommendedModelValue={updatingRecommendedModelValue}
+        selectedModel={selectedModel}
+        onModelChange={setSelectedModel}
+        effort={effort}
+        effortOptions={effortOptions}
+        onEffortChange={setEffort}
+        permissionMode={permissionMode}
+        permissionModeOptions={permissionModeOptions}
+        onPermissionModeChange={setPermissionMode}
+        selectedAdapter={selectedAdapter}
+        adapterOptions={adapterOptions}
+        onAdapterChange={setSelectedAdapter}
+        modelUnavailable={!hasAvailableModels}
+        sessionTarget={{
+          draft: sessionTargetDraft,
+          locked: false,
+          disabled: isCreatingSession,
+          onChange: setSessionTargetDraft
+        }}
+      />
+      <ChatStatusBar
+        draftWorkspace={workspaceDraft}
+        isCreating={isCreatingSession}
+        onDraftWorkspaceChange={(nextDraft) => {
+          workspaceDraftDirtyRef.current = true
+          setWorkspaceDraft(nextDraft)
+        }}
+      />
+    </div>
+  )
+
+  useEffect(() => {
+    if (workspaceDraftDirtyRef.current) return
+    setWorkspaceDraft({ ...defaultWorkspaceDraft })
+  }, [defaultWorkspaceDraft])
+
+  const shellClassName = flushPanelPadding
+    ? 'automation-empty-landing-shell automation-empty-landing-shell--flush-panel'
+    : 'automation-empty-landing-shell'
+
+  return (
+    <div className={shellClassName}>
+      {isRulePanelCollapsed && (
+        <SidebarListCollapsedActions className='automation-empty-landing__collapsed-actions'>
+          <SidebarListCollapsedActionButton
+            active={isCreatingRule}
+            disabled={isCreatingRule}
+            filled={isCreatingRule}
+            icon={isCreatingRule ? 'progress_activity' : 'add'}
+            tooltip={isCreatingRule ? t('automation.creatingRule') : t('automation.newRule')}
+            ariaLabel={isCreatingRule ? t('automation.creatingRule') : t('automation.newRule')}
+            onClick={onCreateRule}
+          />
+          <SidebarListCollapsedActionButton
+            icon='dock_to_right'
+            tooltip={t('automation.expandRulePanel')}
+            ariaLabel={t('automation.expandRulePanel')}
+            onClick={onExpandRulePanel}
+          />
+        </SidebarListCollapsedActions>
+      )}
+      <ComposerLanding
+        className='automation-empty-landing'
+        compact={isCompactLayout || isTouchInteraction}
+        composer={composer}
+      >
+        <AutomationEmptyGuide onSelectStarter={handleSelectStarter} />
+      </ComposerLanding>
+    </div>
+  )
+}

package/src/components/automation-view/AutomationRuleDetailPreview.tsx

@@ -0,0 +1,179 @@
+import { Button, Tooltip } from 'antd'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { AutomationRule, AutomationTask, AutomationTrigger } from '#~/api.js'
+import { getServerHost, getServerPort } from '#~/api/base.js'
+
+interface AutomationRuleDetailPreviewProps {
+  rule: AutomationRule
+}
+
+const serverHost = getServerHost()
+const serverPort = getServerPort()
+const serverUrl = `http://${serverHost}:${serverPort}`
+
+const getRuleTriggers = (rule: AutomationRule): AutomationTrigger[] => {
+  if ((rule.triggers?.length ?? 0) > 0) return rule.triggers ?? []
+
+  return [{
+    id: rule.id,
+    type: rule.type,
+    intervalMs: rule.intervalMs,
+    cronExpression: rule.cronExpression,
+    webhookKey: rule.webhookKey
+  }]
+}
+
+const getRuleTasks = (rule: AutomationRule): AutomationTask[] => {
+  if ((rule.tasks?.length ?? 0) > 0) return rule.tasks ?? []
+
+  return [{
+    id: `${rule.id}:task`,
+    title: rule.name,
+    prompt: rule.prompt
+  }]
+}
+
+const getWebhookUrl = (triggerId?: string, webhookKey?: string | null) => {
+  if (!triggerId || !webhookKey) return ''
+  return `${serverUrl}/api/automation/webhook/${triggerId}?key=${webhookKey}`
+}
+
+function DetailTriggerRow({ trigger }: { trigger: AutomationTrigger }) {
+  const { t } = useTranslation()
+  const webhookUrl = getWebhookUrl(trigger.id, trigger.webhookKey)
+  const typeLabel = trigger.type === 'interval'
+    ? t('automation.typeInterval')
+    : trigger.type === 'cron'
+    ? t('automation.typeCron')
+    : t('automation.typeWebhook')
+
+  return (
+    <div className='automation-view__trigger-row automation-view__detail-trigger-row'>
+      <div className='automation-view__trigger-type'>
+        <span className='automation-view__detail-readonly-field automation-view__detail-readonly-field--type'>
+          {typeLabel}
+        </span>
+      </div>
+      <div className='automation-view__trigger-config'>
+        {trigger.type === 'interval' && (
+          <span className='automation-view__detail-readonly-field'>
+            {t('automation.intervalEvery', {
+              minutes: trigger.intervalMs ? Math.max(1, Math.round(trigger.intervalMs / 60000)) : 1
+            })}
+          </span>
+        )}
+        {trigger.type === 'cron' && (
+          <span className='automation-view__detail-readonly-field'>
+            {trigger.cronExpression?.trim() || t('automation.cronExpressionHint')}
+          </span>
+        )}
+        {trigger.type === 'webhook' && (
+          <div className='automation-view__webhook automation-view__detail-webhook'>
+            <span className='automation-view__detail-readonly-field'>
+              {trigger.webhookKey ?? t('automation.webhookKeyHint')}
+            </span>
+            {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>
+  )
+}
+
+function DetailTaskItem({ index, task }: { index: number; task: AutomationTask }) {
+  const { t } = useTranslation()
+  const [collapsed, setCollapsed] = useState(false)
+  const title = task.title?.trim() || t('automation.taskDefaultTitle', { index: index + 1 })
+
+  return (
+    <div className='automation-view__task-card automation-view__detail-task-card'>
+      <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>
+          <span
+            aria-label={t('automation.taskTitle')}
+            className='automation-view__detail-task-title-text'
+          >
+            {title}
+          </span>
+        </div>
+        <div className='automation-view__task-collapsible' hidden={collapsed}>
+          <div
+            aria-label={t('automation.prompt')}
+            className='automation-view__detail-task-prompt-text'
+          >
+            {task.prompt || t('automation.prompt')}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function AutomationRuleDetailPreview({ rule }: AutomationRuleDetailPreviewProps) {
+  const { t } = useTranslation()
+  const triggers = getRuleTriggers(rule)
+  const tasks = getRuleTasks(rule)
+
+  return (
+    <>
+      <div className='automation-view__detail-section'>
+        <div className='automation-view__detail-section-title'>
+          <span className='material-symbols-rounded automation-view__meta-icon'>bolt</span>
+          {t('automation.sectionTriggers')}
+        </div>
+        {triggers.length > 0
+          ? (
+            <div className='automation-view__trigger-rows automation-view__detail-trigger-list'>
+              {triggers.map(trigger => (
+                <DetailTriggerRow key={trigger.id} trigger={trigger} />
+              ))}
+            </div>
+          )
+          : <span className='automation-view__detail-placeholder'>{t('automation.noTriggers')}</span>}
+      </div>
+      <div className='automation-view__detail-section'>
+        <div className='automation-view__detail-section-title'>
+          <span className='material-symbols-rounded automation-view__meta-icon'>task</span>
+          {t('automation.sectionTasks')}
+        </div>
+        {tasks.length > 0
+          ? (
+            <div className='automation-view__task-stack automation-view__detail-task-stack'>
+              {tasks.map((task, index) => (
+                <DetailTaskItem key={task.id} index={index} task={task} />
+              ))}
+            </div>
+          )
+          : <span className='automation-view__detail-placeholder'>{t('automation.noTasks')}</span>}
+      </div>
+    </>
+  )
+}

package/src/components/automation-view/PanelTitleActions.tsx

@@ -0,0 +1,66 @@
+import { Button, Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+interface AutomationPanelTitleActionsProps {
+  collapsed: boolean
+  defaultIcon?: string
+  defaultIconClassName?: string
+  isCreating: boolean
+  onCreateRule?: () => void
+  onExpandRulePanel?: () => void
+}
+
+export function AutomationPanelTitleActions({
+  collapsed,
+  defaultIcon,
+  defaultIconClassName,
+  isCreating,
+  onCreateRule,
+  onExpandRulePanel
+}: AutomationPanelTitleActionsProps) {
+  const { t } = useTranslation()
+
+  if (!collapsed) {
+    if (!defaultIcon) return null
+    return (
+      <span className={`material-symbols-rounded ${defaultIconClassName ?? ''}`.trim()}>
+        {defaultIcon}
+      </span>
+    )
+  }
+
+  return (
+    <span className='automation-view__title-leading-actions'>
+      <Tooltip title={t('automation.expandRulePanel')}>
+        <Button
+          className='automation-view__title-action-button automation-view__title-action-button--expand'
+          type='text'
+          aria-label={t('automation.expandRulePanel')}
+          icon={<span className='material-symbols-rounded automation-view__title-action-icon'>dock_to_right</span>}
+          onClick={onExpandRulePanel}
+        />
+      </Tooltip>
+      <Tooltip title={isCreating ? t('automation.creatingRule') : t('automation.newRule')}>
+        <Button
+          className={[
+            'automation-view__title-action-button',
+            'automation-view__title-action-button--create',
+            isCreating ? 'is-active' : ''
+          ].filter(Boolean).join(' ')}
+          type='text'
+          aria-label={isCreating ? t('automation.creatingRule') : t('automation.newRule')}
+          disabled={isCreating}
+          icon={
+            <span
+              className={`material-symbols-rounded automation-view__title-action-icon ${isCreating ? 'filled' : ''}`
+                .trim()}
+            >
+              {isCreating ? 'progress_activity' : 'add'}
+            </span>
+          }
+          onClick={onCreateRule}
+        />
+      </Tooltip>
+    </span>
+  )
+}