From 19a5aee38ed751cfb025305774ad73c2d00c9197 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Tue, 3 Feb 2026 14:18:17 +0800
Subject: [PATCH] fix: hide divider when OnlineUsers component is not rendered

Move the Divider into the OnlineUsers component so it conditionally
renders together with the online users content, preventing an orphaned
divider from appearing next to the preview button.
---
 .../workflow/header/header-in-normal.tsx      |   2 -
 .../workflow/header/online-users.tsx          | 242 +++++++++---------
 2 files changed, 123 insertions(+), 121 deletions(-)

diff --git a/web/app/components/workflow/header/header-in-normal.tsx b/web/app/components/workflow/header/header-in-normal.tsx
index 7d7e531691..309e75ed99 100644
--- a/web/app/components/workflow/header/header-in-normal.tsx
+++ b/web/app/components/workflow/header/header-in-normal.tsx
@@ -5,7 +5,6 @@ import {
 } from 'react'
 import { useNodes } from 'reactflow'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
-import Divider from '../../base/divider'
 import {
   useNodesInteractions,
   useNodesReadOnly,
@@ -75,7 +74,6 @@ const HeaderInNormal = ({
       </div>
       <div className="flex items-center gap-2">
         <OnlineUsers />
-        <Divider type="vertical" className="mx-auto h-3.5" />
         <RunAndHistory {...runAndHistoryProps} />
         <div className="shrink-0 cursor-pointer rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs backdrop-blur-[10px]">
           {components?.chatVariableTrigger}
diff --git a/web/app/components/workflow/header/online-users.tsx b/web/app/components/workflow/header/online-users.tsx
index fa6f5d95cd..9157b04cc6 100644
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@@ -4,6 +4,7 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
 import { useReactFlow } from 'reactflow'
 import Avatar from '@/app/components/base/avatar'
+import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -107,134 +108,137 @@ const OnlineUsers = () => {
   const hasCounter = remainingCount > 0
 
   return (
-    <div
-      className={cn(
-        'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
-        'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
-        hasCounter ? 'min-w-[87px] gap-px pl-1 pr-1.5' : 'gap-1 px-1.5',
-      )}
-    >
-      <div className="flex h-6 items-center">
-        <div className="flex items-center">
-          {visibleUsers.map((user, index) => {
-            const isCurrentUser = user.user_id === currentUserId
-            const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
-            return (
-              <Tooltip
-                key={`${user.sid}-${index}`}
-                popupContent={renderDisplayName(
-                  user,
-                  'system-xs-medium text-text-secondary',
-                  'text-text-quaternary',
-                )}
-                position="bottom"
-                triggerMethod="hover"
-                needsDelay={false}
-                asChild
-                popupClassName="flex h-[28px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
-                noDecoration
-              >
-                <div
-                  className={cn(
-                    'relative flex size-6 items-center justify-center',
-                    index > 0 && '-ml-1.5',
-                    !isCurrentUser && 'cursor-pointer transition-transform hover:scale-110',
+    <>
+      <div
+        className={cn(
+          'flex h-8 items-center rounded-full border-[0.5px] border-components-panel-border',
+          'bg-components-panel-bg py-1 shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]',
+          hasCounter ? 'min-w-[87px] gap-px pl-1 pr-1.5' : 'gap-1 px-1.5',
+        )}
+      >
+        <div className="flex h-6 items-center">
+          <div className="flex items-center">
+            {visibleUsers.map((user, index) => {
+              const isCurrentUser = user.user_id === currentUserId
+              const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+              return (
+                <Tooltip
+                  key={`${user.sid}-${index}`}
+                  popupContent={renderDisplayName(
+                    user,
+                    'system-xs-medium text-text-secondary',
+                    'text-text-quaternary',
                   )}
-                  style={{ zIndex: visibleUsers.length - index }}
-                  onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                  position="bottom"
+                  triggerMethod="hover"
+                  needsDelay={false}
+                  asChild
+                  popupClassName="flex h-[28px] items-center justify-center gap-1 rounded-md border-[0.5px] border-components-panel-border bg-components-tooltip-bg px-3 py-[6px] shadow-lg shadow-shadow-shadow-5 backdrop-blur-[10px]"
+                  noDecoration
                 >
-                  <Avatar
-                    name={user.username || 'User'}
-                    avatar={getAvatarUrl(user)}
-                    size={24}
-                    className="ring-1 ring-components-panel-bg"
-                    backgroundColor={userColor}
-                  />
-                </div>
-              </Tooltip>
-            )
-          })}
-          {remainingCount > 0 && (
-            <PortalToFollowElem
-              open={dropdownOpen}
-              onOpenChange={setDropdownOpen}
-              placement="bottom-start"
-              offset={{
-                mainAxis: 8,
-                crossAxis: -48,
-              }}
-            >
-              <PortalToFollowElemTrigger
-                onClick={() => setDropdownOpen(prev => !prev)}
-                asChild
-              >
-                <div className="flex items-center gap-1">
                   <div
                     className={cn(
-                      'flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] font-semibold uppercase leading-[12px] text-white ring-1 ring-components-panel-bg',
-                      visibleUsers.length > 0 && '-ml-1',
+                      'relative flex size-6 items-center justify-center',
+                      index > 0 && '-ml-1.5',
+                      !isCurrentUser && 'cursor-pointer transition-transform hover:scale-110',
+                    )}
+                    style={{ zIndex: visibleUsers.length - index }}
+                    onClick={() => !isCurrentUser && jumpToUserCursor(user.user_id)}
+                  >
+                    <Avatar
+                      name={user.username || 'User'}
+                      avatar={getAvatarUrl(user)}
+                      size={24}
+                      className="ring-1 ring-components-panel-bg"
+                      backgroundColor={userColor}
+                    />
+                  </div>
+                </Tooltip>
+              )
+            })}
+            {remainingCount > 0 && (
+              <PortalToFollowElem
+                open={dropdownOpen}
+                onOpenChange={setDropdownOpen}
+                placement="bottom-start"
+                offset={{
+                  mainAxis: 8,
+                  crossAxis: -48,
+                }}
+              >
+                <PortalToFollowElemTrigger
+                  onClick={() => setDropdownOpen(prev => !prev)}
+                  asChild
+                >
+                  <div className="flex items-center gap-1">
+                    <div
+                      className={cn(
+                        'flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-full bg-components-icon-bg-midnight-solid text-[10px] font-semibold uppercase leading-[12px] text-white ring-1 ring-components-panel-bg',
+                        visibleUsers.length > 0 && '-ml-1',
+                      )}
+                    >
+                      +
+                      {remainingCount}
+                    </div>
+                    <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
+                  </div>
+                </PortalToFollowElemTrigger>
+                <PortalToFollowElemContent
+                  className="z-[9999]"
+                >
+                  <div
+                    className={cn(
+                      'mt-1.5',
+                      'flex flex-col',
+                      'max-h-[200px] w-[240px] overflow-y-auto',
+                      'rounded-xl border-[0.5px] border-components-panel-border',
+                      'bg-components-panel-bg-blur p-1',
+                      'shadow-lg shadow-shadow-shadow-5',
+                      'backdrop-blur-[10px]',
                     )}
                   >
-                    +
-                    {remainingCount}
-                  </div>
-                  <ChevronDownIcon className="h-3 w-3 cursor-pointer text-gray-500" />
-                </div>
-              </PortalToFollowElemTrigger>
-              <PortalToFollowElemContent
-                className="z-[9999]"
-              >
-                <div
-                  className={cn(
-                    'mt-1.5',
-                    'flex flex-col',
-                    'max-h-[200px] w-[240px] overflow-y-auto',
-                    'rounded-xl border-[0.5px] border-components-panel-border',
-                    'bg-components-panel-bg-blur p-1',
-                    'shadow-lg shadow-shadow-shadow-5',
-                    'backdrop-blur-[10px]',
-                  )}
-                >
-                  {onlineUsers.map((user) => {
-                    const isCurrentUser = user.user_id === currentUserId
-                    const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
-                    return (
-                      <div
-                        key={user.sid}
-                        className={cn(
-                          'flex items-center gap-2 rounded-lg px-3 py-1.5',
-                          !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
-                        )}
-                        onClick={() => {
-                          if (!isCurrentUser) {
-                            jumpToUserCursor(user.user_id)
-                            setDropdownOpen(false)
-                          }
-                        }}
-                      >
-                        <div className="relative">
-                          <Avatar
-                            name={user.username || 'User'}
-                            avatar={getAvatarUrl(user)}
-                            size={24}
-                            backgroundColor={userColor}
-                          />
+                    {onlineUsers.map((user) => {
+                      const isCurrentUser = user.user_id === currentUserId
+                      const userColor = isCurrentUser ? undefined : getUserColor(user.user_id)
+                      return (
+                        <div
+                          key={user.sid}
+                          className={cn(
+                            'flex items-center gap-2 rounded-lg px-3 py-1.5',
+                            !isCurrentUser && 'cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover',
+                          )}
+                          onClick={() => {
+                            if (!isCurrentUser) {
+                              jumpToUserCursor(user.user_id)
+                              setDropdownOpen(false)
+                            }
+                          }}
+                        >
+                          <div className="relative">
+                            <Avatar
+                              name={user.username || 'User'}
+                              avatar={getAvatarUrl(user)}
+                              size={24}
+                              backgroundColor={userColor}
+                            />
+                          </div>
+                          {renderDisplayName(
+                            user,
+                            'system-xs-medium text-text-secondary',
+                            'text-text-tertiary',
+                          )}
                         </div>
-                        {renderDisplayName(
-                          user,
-                          'system-xs-medium text-text-secondary',
-                          'text-text-tertiary',
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              </PortalToFollowElemContent>
-            </PortalToFollowElem>
-          )}
+                      )
+                    })}
+                  </div>
+                </PortalToFollowElemContent>
+              </PortalToFollowElem>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+      <Divider type="vertical" className="mx-auto h-3.5" />
+    </>
   )
 }