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

package/src/components/automation-view/TaskList.scss

@@ -1,52 +1,113 @@
 .automation-view {
-  &__list {
+  &__task-list {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 8px;
+    min-width: 0;
+  }
 
-    &--horizontal {
-      gap: 8px;
+  &__task-stack {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
 
-      .automation-view__list-item {
-        flex: 0 0 360px;
-        min-width: 360px;
-      }
-    }
+  &__task-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
 
-    &-scroll {
-      display: flex;
-      gap: 8px;
-      overflow-x: auto;
-      padding-bottom: 4px;
-
-      .automation-view__list-item {
-        min-width: 340px;
-        flex: 0 0 340px;
-      }
-    }
+  &__task-card + &__task-card {
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
   }
 
-  &__list-item {
-    position: relative;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 12px;
+  &__task-composer {
     display: flex;
     flex-direction: column;
-    background: var(--bg-color);
-    transition: border-color .2s ease, background-color .2s ease;
+    gap: 10px;
+    min-width: 0;
   }
 
-  &__list-item:hover {
-    border-color: rgba(37, 99, 235, .18);
-    background: var(--tag-hover-bg);
+  &__task-title-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    width: 100%;
   }
 
-  &__list-header {
+  &__task-collapse-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 6px;
+    color: var(--sub-text-color);
+  }
+
+  &__task-collapse-button:not(:disabled):hover,
+  &__task-collapse-button:not(:disabled):focus-visible {
+    background: var(--tag-hover-bg) !important;
+    color: var(--text-color) !important;
+  }
+
+  &__task-title-item,
+  &__task-prompt-item {
+    width: 100%;
+  }
+
+  &__task-title-item {
+    box-sizing: border-box;
+    padding-right: 42px;
+    min-width: 0;
+  }
+
+  &__task-title-input {
+    width: 100%;
+    font-weight: 600;
+  }
+
+  &__task-collapsible {
     display: flex;
-    align-items: flex-end;
-    gap: 12px;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  &__task-collapsible[hidden] {
+    display: none;
+  }
+
+  &__task-sender {
+    width: 100%;
+    min-width: 0;
+  }
+
+  &__task-sender-stack {
+    width: 100%;
+    min-width: 0;
+  }
+
+  &__task-status-bar {
+    min-width: 0;
+    width: 100%;
+
+    .chat-status-bar__content {
+      display: flex;
+      justify-content: flex-start;
+    }
   }
 
   &__section-header {
@@ -87,9 +148,9 @@
   }
 
   &__form-desc {
+    margin-bottom: 0;
     font-size: 12px;
     color: var(--sub-text-color);
-    margin-bottom: 12px;
   }
 
   &__icon-button {
@@ -103,55 +164,60 @@
     border-radius: 6px;
   }
 
-  &__action-icon {
-    font-size: 18px;
-  }
-
-  &__remove-button {
+  &__task-remove-button {
     position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    padding: 0;
+    top: 0;
+    right: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    padding: 0;
     border-radius: 6px;
   }
 
-  &__task-index {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--sub-text-color);
+  &__task-card + &__task-card &__task-remove-button {
+    top: 16px;
   }
 
-  &__task-index-icon {
-    font-size: 14px;
+  &__action-icon {
+    font-size: 18px;
   }
 
-  &__list-item .ant-form-item {
+  &__task-card .ant-form-item {
     margin-bottom: 10px;
   }
 
-  &__list-item .ant-form-item:last-child {
+  &__task-composer .ant-form-item {
     margin-bottom: 0;
   }
 
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-input-number,
-  &__list-item .ant-select-selector {
+  &__task-title-input.ant-input {
     border-radius: 6px !important;
     background: var(--sub-bg-color);
   }
 
-  &__list-item .ant-input,
-  &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-select-selector {
-    min-height: 30px;
+  &__task-title-input.ant-input {
+    min-height: 32px;
+  }
+}
+
+.automation-view__sender-adapter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.automation-view__sender-adapter-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+
+  &--fallback {
+    font-size: 16px;
+    color: var(--sub-text-color);
   }
 }

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

@@ -1,35 +1,38 @@
 import './TaskList.scss'
 
 import { Button, Form, Input, Tooltip } from 'antd'
+import type { FormInstance } from 'antd'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-export function TaskList() {
+import { AutomationTaskComposer } from './@components/AutomationTaskComposer'
+import { DEFAULT_STARTUP_FORM_VALUES } from './@utils/startup-options'
+import type { RuleFormValues } from './types'
+
+export function TaskList({ form }: { form: FormInstance<RuleFormValues> }) {
   const { t } = useTranslation()
 
   return (
     <Form.List name='tasks'>
       {(fields, { add, remove }) => (
-        <div className='automation-view__list automation-view__list--horizontal'>
+        <div className='automation-view__task-list'>
           <div className='automation-view__section-header'>
             <div className='automation-view__section-heading'>
               <div className='automation-view__form-title'>
                 <span className='material-symbols-rounded automation-view__form-icon'>task</span>
                 {t('automation.sectionTasks')}
               </div>
-              <span className='automation-view__section-count'>
-                {t('automation.taskCount', { count: fields.length })}
-              </span>
             </div>
             <div className='automation-view__section-actions'>
               <Tooltip title={t('automation.addTask')}>
                 <Button
-                  className='automation-view__icon-button'
+                  className='automation-view__icon-button automation-view__icon-button--section-add'
                   type='text'
                   onClick={() =>
                     add({
                       title: t('automation.taskDefaultTitle', { index: fields.length + 1 }),
-                      prompt: ''
+                      prompt: '',
+                      ...DEFAULT_STARTUP_FORM_VALUES
                     })}
                 >
                   <span className='material-symbols-rounded automation-view__action-icon'>add</span>
@@ -37,42 +40,23 @@ export function TaskList() {
               </Tooltip>
             </div>
           </div>
-          <div className='automation-view__form-desc'>{t('automation.taskAll')}</div>
-          <div className='automation-view__list-scroll'>
-            {fields.map((field, index) => (
-              <div key={field.key} className='automation-view__list-item'>
+          <div className='automation-view__task-stack'>
+            {fields.map((field) => (
+              <div key={field.key} className='automation-view__task-card'>
                 <Form.Item name={[field.name, 'id']} hidden>
                   <Input />
                 </Form.Item>
                 <Tooltip title={t('automation.remove')}>
                   <Button
-                    className='automation-view__remove-button'
+                    className='automation-view__task-remove-button'
                     type='text'
-                    danger
                     onClick={() => remove(field.name)}
                     disabled={fields.length <= 1}
                   >
                     <span className='material-symbols-rounded automation-view__action-icon'>close</span>
                   </Button>
                 </Tooltip>
-                <div className='automation-view__list-header'>
-                  <Form.Item name={[field.name, 'title']} label={t('automation.taskTitle')}>
-                    <Input placeholder={t('automation.taskTitlePlaceholder')} />
-                  </Form.Item>
-                </div>
-                <Form.Item
-                  name={[field.name, 'prompt']}
-                  label={t('automation.prompt')}
-                  rules={[{ required: true, message: t('automation.promptRequired') }]}
-                >
-                  <Input.TextArea rows={3} />
-                </Form.Item>
-                <div className='automation-view__task-index'>
-                  <span className='material-symbols-rounded automation-view__task-index-icon'>
-                    format_list_numbered
-                  </span>
-                  {t('automation.taskIndex', { index: index + 1 })}
-                </div>
+                <AutomationTaskComposer fieldName={field.name} form={form} />
               </div>
             ))}
           </div>

package/src/components/automation-view/TriggerList.scss

@@ -89,7 +89,7 @@
   &__form-desc {
     font-size: 12px;
     color: var(--sub-text-color);
-    margin-bottom: 12px;
+    margin-bottom: 0;
   }
 
   &__icon-button {
@@ -125,10 +125,53 @@
     width: 100%;
   }
 
-  &__cron-section {
+  &__trigger-list {
+    gap: 8px;
+  }
+
+  &__trigger-rows {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
+  }
+
+  &__trigger-row {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr) 28px;
+    gap: 10px;
+    align-items: start;
+    padding: 0;
+  }
+
+  &__trigger-type,
+  &__trigger-config {
+    min-width: 0;
+  }
+
+  &__trigger-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__trigger-remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 6px;
+  }
+
+  &__trigger-row .ant-form-item {
+    margin-bottom: 0;
+  }
+
+  &__cron-section {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
   }
 
   &__cron-hint {
@@ -139,7 +182,9 @@
   &__cron-weekly {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 12px;
+    grid-column: 1 / -1;
+    gap: 8px;
+    min-width: 0;
   }
 
   &__webhook {
@@ -153,15 +198,20 @@
     align-items: center;
     justify-content: space-between;
     gap: 8px;
-    padding: 8px 12px;
+    min-height: 32px;
+    padding: 2px 4px 2px 10px;
     border-radius: 8px;
     border: 1px solid var(--border-color);
     background: var(--sub-bg-color);
     color: var(--sub-text-color);
   }
 
-  &__webhook-label {
+  &__webhook-url {
+    min-width: 0;
+    overflow: hidden;
     font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__list-item .ant-form-item {
@@ -175,14 +225,43 @@
   &__list-item .ant-input,
   &__list-item .ant-input-affix-wrapper,
   &__list-item .ant-input-number,
-  &__list-item .ant-select-selector {
+  &__list-item .ant-select-selector,
+  &__trigger-row .ant-input,
+  &__trigger-row .ant-input-affix-wrapper,
+  &__trigger-row .ant-input-number,
+  &__trigger-row .ant-select-selector {
     border-radius: 6px !important;
     background: var(--sub-bg-color);
   }
 
   &__list-item .ant-input,
   &__list-item .ant-input-affix-wrapper,
-  &__list-item .ant-select-selector {
+  &__list-item .ant-select-selector,
+  &__trigger-row .ant-input,
+  &__trigger-row .ant-input-affix-wrapper,
+  &__trigger-row .ant-select-selector {
     min-height: 30px;
   }
 }
+
+@media (max-width: 900px) {
+  .automation-view {
+    &__trigger-row {
+      grid-template-columns: 1fr 28px;
+    }
+
+    &__trigger-type,
+    &__trigger-config {
+      grid-column: 1 / 2;
+    }
+
+    &__trigger-actions {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+
+    &__cron-section {
+      grid-template-columns: 1fr;
+    }
+  }
+}