Update BrowserConnectionStatus to remain visible when responses exist and refine StatusBar styling for rounded corners

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -250,7 +250,6 @@ export const MainView: React.FC<Props> = (props) => {
           {props.target == TARGET.WEB && (
             <BrowserConnectionStatus
               is_connected={props.is_connected}
-              has_responses={props.response_history.length > 0}
               on_install={props.on_install_browser_extension}
               translations={{
                 connected: t('main.browser-connection.connected'),
@@ -261,6 +260,8 @@ export const MainView: React.FC<Props> = (props) => {
             />
           )}
 
+          <UiSeparator height={6} />
+
           {props.response_history.length > 0 && (
             <UiResponses
               response_history={props.response_history}

apps/editor/src/views/prompt/frontend/Main/MainView/components/BrowserConnectionStatus/BrowserConnectionStatus.tsx

@@ -3,7 +3,6 @@ import { StatusBar } from '@ui/components/editor/prompt/StatusBar'
 
 type Props = {
   is_connected: boolean
-  has_responses: boolean
   translations: {
     connected: string
     not_connected: string
@@ -18,13 +17,10 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
   const [has_been_closed, setHasBeenClosed] = useState(false)
 
   useEffect(() => {
-    if (props.has_responses) {
-      setIsClosed(true)
-      setHasBeenClosed(true)
-    } else if (!props.is_connected) {
+    if (!props.is_connected) {
       setIsClosed(false)
     }
-  }, [props.has_responses, props.is_connected])
+  }, [props.is_connected])
 
   useEffect(() => {
     if (props.is_connected && !is_closed && has_been_closed) {
@@ -35,7 +31,7 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
     }
   }, [props.is_connected, is_closed, has_been_closed])
 
-  if (is_closed || props.has_responses) {
+  if (is_closed) {
     return null
   }
 
@@ -63,7 +59,6 @@ export const BrowserConnectionStatus: React.FC<Props> = (props) => {
 
   return (
     <StatusBar
-      placement="top"
       theme={props.is_connected ? 'success' : 'default'}
       icon={
         props.is_connected

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.module.scss

@@ -24,6 +24,10 @@
   border-bottom-right-radius: 6px;
 }
 
+.rounded {
+  border-radius: 6px;
+}
+
 .theme-default {
   color: var(--cwc-text-color);
   background-color: var(--cwc-bg-tertiary);

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.tsx

@@ -36,7 +36,7 @@ export const StatusBar: React.FC<StatusBarProps> = ({
       className={cn(
         styles.container,
         styles[`theme-${theme}`],
-        placement && styles[`placement-${placement}`],
+        placement ? styles[`placement-${placement}`] : styles.rounded,
         className
       )}
     >