From addf42b36df60cc5f3989d12af6d54951852a498 Mon Sep 17 00:00:00 2001 From: Cameron Taylor Date: Fri, 15 May 2026 15:07:30 -0400 Subject: [PATCH] feat: turn template banner green when all chatflows are up to date --- .../ui/src/Admin/Chatflows/index.tsx | 112 +++++++++++------- 1 file changed, 71 insertions(+), 41 deletions(-) diff --git a/packages-answers/ui/src/Admin/Chatflows/index.tsx b/packages-answers/ui/src/Admin/Chatflows/index.tsx index b30cea48632..aff5d85e52b 100644 --- a/packages-answers/ui/src/Admin/Chatflows/index.tsx +++ b/packages-answers/ui/src/Admin/Chatflows/index.tsx @@ -463,26 +463,58 @@ const AdminChatflows = () => { const fullDefaultTemplate = chatflowsData.find((chatflow: any) => chatflow.id === defaultTemplateData.id) if (!fullDefaultTemplate) return false + const hasOutdated = chatflowsData.some((cf: any) => cf.templateStatus === 'outdated') + const bc = hasOutdated + ? { + bg: isDarkMode ? 'rgba(255, 193, 7, 0.1)' : 'rgba(255, 193, 7, 0.08)', + border: isDarkMode ? '1px solid rgba(255, 193, 7, 0.3)' : '1px solid #b8860b', + text: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#8b6914', + textMuted: isDarkMode ? 'rgba(255, 193, 7, 0.7)' : '#8b6914', + iconMain: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#b8860b', + iconColor: isDarkMode ? 'rgba(255, 193, 7, 0.8)' : '#8b6914', + iconBg: isDarkMode ? 'rgba(255, 193, 7, 0.1)' : 'rgba(184, 134, 11, 0.1)', + iconHoverColor: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#6b5210', + iconHoverBg: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.2)', + iconHoverBorder: isDarkMode ? 'rgba(255, 193, 7, 0.5)' : '#8b6914', + badgeBg: isDarkMode ? 'rgba(255, 193, 7, 0.3)' : 'rgba(184, 134, 11, 0.15)', + badgeBorder: isDarkMode ? '1px solid rgba(255, 193, 7, 0.5)' : '1px solid #b8860b', + chipBg: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.15)', + chipBorder: isDarkMode ? '1px solid rgba(255, 193, 7, 0.4)' : '1px solid #b8860b' + } + : { + bg: isDarkMode ? 'rgba(76, 175, 80, 0.1)' : 'rgba(76, 175, 80, 0.08)', + border: isDarkMode ? '1px solid rgba(76, 175, 80, 0.3)' : '1px solid #388e3c', + text: isDarkMode ? 'rgba(76, 175, 80, 0.9)' : '#2e7d32', + textMuted: isDarkMode ? 'rgba(76, 175, 80, 0.7)' : '#2e7d32', + iconMain: isDarkMode ? 'rgba(76, 175, 80, 0.9)' : '#388e3c', + iconColor: isDarkMode ? 'rgba(76, 175, 80, 0.8)' : '#2e7d32', + iconBg: isDarkMode ? 'rgba(76, 175, 80, 0.1)' : 'rgba(56, 142, 60, 0.1)', + iconHoverColor: isDarkMode ? 'rgba(76, 175, 80, 0.9)' : '#1b5e20', + iconHoverBg: isDarkMode ? 'rgba(76, 175, 80, 0.2)' : 'rgba(56, 142, 60, 0.2)', + iconHoverBorder: isDarkMode ? 'rgba(76, 175, 80, 0.5)' : '#388e3c', + badgeBg: isDarkMode ? 'rgba(76, 175, 80, 0.3)' : 'rgba(56, 142, 60, 0.15)', + badgeBorder: isDarkMode ? '1px solid rgba(76, 175, 80, 0.5)' : '1px solid #388e3c', + chipBg: isDarkMode ? 'rgba(76, 175, 80, 0.2)' : 'rgba(56, 142, 60, 0.15)', + chipBorder: isDarkMode ? '1px solid rgba(76, 175, 80, 0.4)' : '1px solid #388e3c' + } + return ( {/* Header Section */} - + - + Organization Default Template @@ -493,9 +525,9 @@ const AdminChatflows = () => { { { { { sx={{ height: 20, fontSize: '0.65rem', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.15)', - color: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#8b6914', - border: isDarkMode - ? '1px solid rgba(255, 193, 7, 0.4)' - : '1px solid #b8860b', + bgcolor: bc.chipBg, + color: bc.text, + border: bc.chipBorder, '& .MuiChip-label': { px: 0.75, py: 0.25 @@ -585,7 +615,7 @@ const AdminChatflows = () => { { { { { { size='small' onClick={() => window.open(getCanvasFullUrl(fullDefaultTemplate), '_blank')} sx={{ - color: isDarkMode ? 'rgba(255, 193, 7, 0.8)' : '#8b6914', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.1)' : 'rgba(184, 134, 11, 0.1)', - border: isDarkMode ? '1px solid rgba(255, 193, 7, 0.3)' : '1px solid #b8860b', + color: bc.iconColor, + bgcolor: bc.iconBg, + border: bc.border, '&:hover': { - color: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#6b5210', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.2)', - borderColor: isDarkMode ? 'rgba(255, 193, 7, 0.5)' : '#8b6914' + color: bc.iconHoverColor, + bgcolor: bc.iconHoverBg, + borderColor: bc.iconHoverBorder } }} > @@ -695,13 +725,13 @@ const AdminChatflows = () => { size='small' onClick={() => handleOpenMetrics(fullDefaultTemplate.id)} sx={{ - color: isDarkMode ? 'rgba(255, 193, 7, 0.8)' : '#8b6914', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.1)' : 'rgba(184, 134, 11, 0.1)', - border: isDarkMode ? '1px solid rgba(255, 193, 7, 0.3)' : '1px solid #b8860b', + color: bc.iconColor, + bgcolor: bc.iconBg, + border: bc.border, '&:hover': { - color: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#6b5210', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.2)', - borderColor: isDarkMode ? 'rgba(255, 193, 7, 0.5)' : '#8b6914' + color: bc.iconHoverColor, + bgcolor: bc.iconHoverBg, + borderColor: bc.iconHoverBorder } }} > @@ -713,13 +743,13 @@ const AdminChatflows = () => { size='small' onClick={() => handleOpenVersions(fullDefaultTemplate.id)} sx={{ - color: isDarkMode ? 'rgba(255, 193, 7, 0.8)' : '#8b6914', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.1)' : 'rgba(184, 134, 11, 0.1)', - border: isDarkMode ? '1px solid rgba(255, 193, 7, 0.3)' : '1px solid #b8860b', + color: bc.iconColor, + bgcolor: bc.iconBg, + border: bc.border, '&:hover': { - color: isDarkMode ? 'rgba(255, 193, 7, 0.9)' : '#6b5210', - bgcolor: isDarkMode ? 'rgba(255, 193, 7, 0.2)' : 'rgba(184, 134, 11, 0.2)', - borderColor: isDarkMode ? 'rgba(255, 193, 7, 0.5)' : '#8b6914' + color: bc.iconHoverColor, + bgcolor: bc.iconHoverBg, + borderColor: bc.iconHoverBorder } }} >