| import type { TaskSummaryItem } from '../../types/chat' |
| import { useTranslation } from '../../i18n' |
|
|
| const statusIcon: Record<TaskSummaryItem['status'], string> = { |
| pending: 'radio_button_unchecked', |
| in_progress: 'pending', |
| completed: 'check_circle', |
| } |
|
|
| const statusColor: Record<TaskSummaryItem['status'], string> = { |
| pending: 'var(--color-text-tertiary)', |
| in_progress: 'var(--color-warning)', |
| completed: 'var(--color-success)', |
| } |
|
|
| export function InlineTaskSummary({ tasks }: { tasks: TaskSummaryItem[] }) { |
| const t = useTranslation() |
| const completed = tasks.filter((tk) => tk.status === 'completed').length |
| const total = tasks.length |
|
|
| return ( |
| <div className="mb-3 rounded-[var(--radius-lg)] border border-[var(--color-outline-variant)]/40 bg-[var(--color-surface-container-lowest)] overflow-hidden"> |
| <div className="flex items-center gap-3 px-4 py-2 bg-[var(--color-surface-container)]"> |
| <div className="flex items-center justify-center w-5 h-5 rounded-[var(--radius-md)] bg-[var(--color-success)]/10"> |
| <span className="material-symbols-outlined text-[13px] text-[var(--color-success)]" style={{ fontVariationSettings: "'FILL' 1" }}> |
| task_alt |
| </span> |
| </div> |
| <span className="text-xs font-semibold text-[var(--color-text-primary)]"> |
| {t('tasks.completed')} |
| </span> |
| <span className="text-[10px] text-[var(--color-text-tertiary)] tabular-nums"> |
| {completed}/{total} |
| </span> |
| </div> |
| <div className="px-4 py-2 flex flex-col gap-0.5"> |
| {tasks.map((task) => ( |
| <div key={task.id} className="flex items-center gap-2 py-1 px-1"> |
| <span |
| className="material-symbols-outlined text-[14px] shrink-0" |
| style={{ color: statusColor[task.status], fontVariationSettings: "'FILL' 1" }} |
| > |
| {statusIcon[task.status]} |
| </span> |
| <span className="text-[10px] font-mono text-[var(--color-text-tertiary)]"> |
| #{task.id} |
| </span> |
| <span className={`text-xs ${ |
| task.status === 'completed' |
| ? 'text-[var(--color-text-tertiary)] line-through' |
| : 'text-[var(--color-text-primary)]' |
| }`}> |
| {task.subject} |
| </span> |
| </div> |
| ))} |
| </div> |
| </div> |
| ) |
| } |
|
|
