mirror of
https://github.com/eigent-ai/eigent.git
synced 2026-05-30 03:35:54 +00:00
refactor(chat): use ds-* utilities in task list and session timeline
Prefer bg-ds-bg-*-subtle-default short aliases and border-ds-border-status-*. Made-with: Cursor
This commit is contained in:
Douglas
parent
ca086ab573
commit
172936ca54
3 changed files with 31 additions and 37 deletions
|
|
@ -435,31 +435,31 @@ export function TaskCard({
|
|||
key={`taskList-${task.id}`}
|
||||
className={`gap-2 rounded-lg px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex transition-all duration-300 ${
|
||||
task.status === TaskStatus.COMPLETED
|
||||
? 'bg-[var(--ds-bg-status-completed-subtle-default)]'
|
||||
? 'bg-ds-bg-completed-subtle-default'
|
||||
: task.status === TaskStatus.FAILED
|
||||
? 'bg-[var(--ds-bg-status-error-subtle-default)]'
|
||||
? 'bg-ds-bg-error-subtle-default'
|
||||
: task.status === TaskStatus.RUNNING
|
||||
? 'bg-[var(--ds-bg-status-running-subtle-default)]'
|
||||
? 'bg-ds-bg-running-subtle-default'
|
||||
: task.status === TaskStatus.BLOCKED
|
||||
? 'bg-[var(--ds-bg-status-blocked-subtle-default)]'
|
||||
? 'bg-ds-bg-blocked-subtle-default'
|
||||
: task.status === TaskStatus.SKIPPED ||
|
||||
task.status === TaskStatus.WAITING ||
|
||||
task.status === TaskStatus.EMPTY
|
||||
? 'bg-[var(--ds-bg-status-pending-subtle-default)]'
|
||||
: 'bg-[var(--ds-bg-status-running-subtle-default)]'
|
||||
? 'bg-ds-bg-pending-subtle-default'
|
||||
: 'bg-ds-bg-running-subtle-default'
|
||||
} cursor-pointer border border-solid border-transparent ${
|
||||
task.status === TaskStatus.COMPLETED
|
||||
? 'hover:border-[color:var(--ds-border-status-completed-default-focus)]'
|
||||
? 'hover:border-ds-border-status-completed-default-focus'
|
||||
: task.status === TaskStatus.FAILED
|
||||
? 'hover:border-[color:var(--ds-border-status-error-default-focus)]'
|
||||
? 'hover:border-ds-border-status-error-default-focus'
|
||||
: task.status === TaskStatus.RUNNING
|
||||
? 'hover:border-[color:var(--ds-border-status-running-default-focus)]'
|
||||
? 'hover:border-ds-border-status-running-default-focus'
|
||||
: task.status === TaskStatus.BLOCKED
|
||||
? 'hover:border-[color:var(--ds-border-status-blocked-default-focus)]'
|
||||
? 'hover:border-ds-border-status-blocked-default-focus'
|
||||
: task.status === TaskStatus.SKIPPED ||
|
||||
task.status === TaskStatus.WAITING ||
|
||||
task.status === TaskStatus.EMPTY
|
||||
? 'hover:border-[color:var(--ds-border-status-pending-default-hover)]'
|
||||
? 'hover:border-ds-border-status-pending-default-hover'
|
||||
: 'border-transparent'
|
||||
} `}
|
||||
>
|
||||
|
|
@ -467,7 +467,7 @@ export function TaskCard({
|
|||
{task.status === TaskStatus.RUNNING && (
|
||||
<LoaderCircle
|
||||
size={16}
|
||||
className={`text-[color:var(--ds-icon-information-default-default)] ${
|
||||
className={`text-ds-icon-information-default-default ${
|
||||
activeTaskStatus === ChatTaskStatus.RUNNING &&
|
||||
'animate-spin'
|
||||
} `}
|
||||
|
|
@ -476,32 +476,32 @@ export function TaskCard({
|
|||
{task.status === TaskStatus.SKIPPED && (
|
||||
<LoaderCircle
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-status-pending-default-default)]"
|
||||
className="text-ds-icon-status-pending-default-default"
|
||||
/>
|
||||
)}
|
||||
{task.status === TaskStatus.COMPLETED && (
|
||||
<CircleCheckBig
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-success-default-default)]"
|
||||
className="text-ds-icon-success-default-default"
|
||||
/>
|
||||
)}
|
||||
{task.status === TaskStatus.FAILED && (
|
||||
<CircleSlash
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-caution-default-default)]"
|
||||
className="text-ds-icon-caution-default-default"
|
||||
/>
|
||||
)}
|
||||
{task.status === TaskStatus.BLOCKED && (
|
||||
<TriangleAlert
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-warning-default-default)]"
|
||||
className="text-ds-icon-warning-default-default"
|
||||
/>
|
||||
)}
|
||||
{(task.status === TaskStatus.EMPTY ||
|
||||
task.status === TaskStatus.WAITING) && (
|
||||
<Circle
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-status-pending-default-default)]"
|
||||
className="text-ds-icon-status-pending-default-default"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -509,14 +509,14 @@ export function TaskCard({
|
|||
<div
|
||||
className={`min-w-0 w-full [overflow-wrap:anywhere] break-words whitespace-pre-line ${
|
||||
task.status === TaskStatus.FAILED
|
||||
? 'text-[color:var(--ds-text-caution-default-default)]'
|
||||
? 'text-ds-text-caution-default-default'
|
||||
: task.status === TaskStatus.BLOCKED
|
||||
? 'text-[color:var(--ds-text-warning-default-default)]'
|
||||
? 'text-ds-text-warning-default-default'
|
||||
: task.status === TaskStatus.SKIPPED ||
|
||||
task.status === TaskStatus.WAITING ||
|
||||
task.status === TaskStatus.EMPTY
|
||||
? 'text-[color:var(--ds-text-status-pending-default-default)]'
|
||||
: 'text-[color:var(--ds-text-neutral-default-default)]'
|
||||
? 'text-ds-text-status-pending-default-default'
|
||||
: 'text-ds-text-neutral-default-default'
|
||||
} text-sm font-medium leading-13`}
|
||||
>
|
||||
{task.content}
|
||||
|
|
|
|||
|
|
@ -77,10 +77,10 @@ export function TaskItem({
|
|||
{taskInfo.id === '' ? (
|
||||
<CircleDashed
|
||||
size={13}
|
||||
className="text-[color:var(--ds-icon-neutral-muted-default)]"
|
||||
className="text-ds-icon-neutral-muted-default"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-2 w-2 rounded-full bg-[var(--ds-icon-information-default-default)]"></div>
|
||||
<div className="h-2 w-2 bg-ds-icon-information-default-default rounded-full"></div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-h-4 min-w-0 py-0.5 relative flex flex-1 items-center self-stretch overflow-hidden transition-all duration-300">
|
||||
|
|
@ -140,10 +140,7 @@ export function TaskItem({
|
|||
size="xs"
|
||||
buttonContent="icon-only"
|
||||
>
|
||||
<Trash2
|
||||
size={16}
|
||||
className="text-[color:var(--ds-icon-neutral-muted-default)]"
|
||||
/>
|
||||
<Trash2 size={16} className="text-ds-icon-neutral-muted-default" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,13 +22,10 @@ import { ChatTaskStatus } from '@/types/constants';
|
|||
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
const TASK_LIST_ROW_BG = {
|
||||
information:
|
||||
'bg-[var(--ds-bg-status-splitting-subtle-default)] hover:brightness-[0.98]',
|
||||
success:
|
||||
'bg-[var(--ds-bg-status-completed-subtle-default)] hover:brightness-[0.98]',
|
||||
caution:
|
||||
'bg-[var(--ds-bg-status-error-subtle-default)] hover:brightness-[0.98]',
|
||||
idle: 'bg-transparent hover:bg-[var(--ds-bg-neutral-default-hover)]',
|
||||
information: 'bg-ds-bg-splitting-subtle-default hover:brightness-[0.98]',
|
||||
success: 'bg-ds-bg-completed-subtle-default hover:brightness-[0.98]',
|
||||
caution: 'bg-ds-bg-error-subtle-default hover:brightness-[0.98]',
|
||||
idle: 'bg-transparent hover:bg-ds-bg-neutral-default-hover',
|
||||
} as const;
|
||||
|
||||
/** Brief success highlight after a run completes; then idle (transparent). */
|
||||
|
|
@ -87,7 +84,7 @@ function TaskQueryScrollLabel({
|
|||
<div
|
||||
ref={outerRef}
|
||||
className={cn(
|
||||
'min-w-0 w-full overflow-hidden text-[color:var(--ds-text-neutral-muted-default)]'
|
||||
'min-w-0 text-ds-text-neutral-muted-default w-full overflow-hidden'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
|
|
@ -228,13 +225,13 @@ export function ChatTimeline({
|
|||
collapsed && 'hidden'
|
||||
)}
|
||||
>
|
||||
<span className="min-w-0 text-xs font-semibold truncate text-[color:var(--ds-text-neutral-muted-default)]">
|
||||
<span className="min-w-0 text-xs font-semibold text-ds-text-neutral-muted-default truncate">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-h-0 min-w-0 w-full flex-1 overflow-x-hidden overflow-y-auto">
|
||||
{entries.length === 0 ? (
|
||||
<p className="px-3 text-xs w-full text-[color:var(--ds-text-neutral-muted-default)]">
|
||||
<p className="px-3 text-xs text-ds-text-neutral-muted-default w-full">
|
||||
{emptyLabel}
|
||||
</p>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue