feat: use network and WS connection observer services from LLC

examples/tutorial/package.json

@@ -16,7 +16,7 @@
     "emoji-mart": "^5.6.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "10.0.0-rc.11",
+    "stream-chat": "^10.0.0-rc.12",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/tutorial/src/2-core-component-setup/layout.css

@@ -1,21 +1,21 @@
 html,
 body,
 #root {
-    height: 100%;
+  height: 100%;
 }
 body {
-    margin: 0;
+  margin: 0;
 }
 #root {
-    display: flex;
+  display: flex;
 }
 
 .str-chat__channel-list {
-    width: 30%;
+  width: 30%;
 }
 .str-chat__channel {
-    width: 100%;
+  width: 100%;
 }
 .str-chat__thread {
-    width: 45%;
-}
+  width: 45%;
+}

examples/tutorial/src/3-channel-list/layout.css

@@ -19,7 +19,7 @@
 
     /* Panel backgrounds */
     --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --str-chat__background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-app: #c7dafc; /* message list background */
 
     /* Focus ring */
     --str-chat__border-utility-focused: #1e40af;

examples/tutorial/src/4-custom-ui-components/layout.css

@@ -19,7 +19,7 @@
 
     /* Panel backgrounds */
     --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --str-chat__background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-app: #c7dafc; /* message list background */
 
     /* Focus ring */
     --str-chat__border-utility-focused: #1e40af;

examples/tutorial/src/5-custom-attachment-type/layout.css

@@ -19,7 +19,7 @@
 
     /* Panel backgrounds */
     --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --str-chat__background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-app: #c7dafc; /* message list background */
 
     /* Focus ring */
     --str-chat__border-utility-focused: #1e40af;

examples/tutorial/src/6-emoji-picker/layout.css

@@ -19,7 +19,7 @@
 
     /* Panel backgrounds */
     --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --str-chat__background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-app: #c7dafc; /* message list background */
 
     /* Focus ring */
     --str-chat__border-utility-focused: #1e40af;

examples/tutorial/src/7-livestream/layout.css

@@ -19,7 +19,7 @@
 
     /* Panel backgrounds */
     --str-chat__background-core-elevation-1: #dbeafe; /* channel list, surrounding panels */
-    --str-chat__background-core-app: #c7dafc;         /* message list background */
+    --str-chat__background-core-app: #c7dafc; /* message list background */
 
     /* Focus ring */
     --str-chat__border-utility-focused: #1e40af;

examples/tutorial/src/tutorial-main.css

@@ -51,7 +51,9 @@
   background: rgba(255, 255, 255, 0.72);
   color: #0f172a;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
-  transition: transform 160ms ease, box-shadow 160ms ease;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease;
 }
 
 .tutorial-browser__step-button--active {

examples/vite/docs-playwright/screenshot-misc.ts

@@ -185,13 +185,12 @@ async function captureConnectionStatus(browser: any) {
   // Inject a connection status notification by dispatching an event
   await viewPage.evaluate(`(async () => {
     var client = window.client;
-    // Simulate connection failure notification
-    client.dispatchEvent({
-      type: 'connection.changed',
-      online: false,
-    });
+    // Simulate connection failure notification. The status store is the whole interface; the event
+    // this used to dispatch is gone.
+    client.wsConnection._setStatus({ isOnline: false });
   })()`);
-  await viewPage.waitForTimeout(1500);
+  // The banner holds a drop for five seconds before showing it, so a brief flap does not strobe it.
+  await viewPage.waitForTimeout(6500);
 
   console.log('📸 ConnectionStatus.png');
   // Screenshot the bottom area of the message list + notification + input

examples/vite/index.html

@@ -7,8 +7,15 @@
     <title>Stream Chat React</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" />
+    <link
+      rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
+    />
   </head>
   <body>
     <div id="root"></div>

examples/vite/package.json

@@ -18,7 +18,7 @@
     "modern-normalize": "^3.0.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "10.0.0-rc.11",
+    "stream-chat": "^10.0.0-rc.12",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/vite/src/App.tsx

@@ -77,6 +77,7 @@ import {
   resolveSingleChannel,
   SingleChannelModal,
 } from './SingleChannel/SingleChannelApp.tsx';
+import { ConnectionDevPanel } from './ConnectionDevPanel/ConnectionDevPanel.tsx';
 import { SystemNotification } from './SystemNotification/SystemNotification.tsx';
 import { chatViewSelectorItemSet } from './Sidebar/ChatViewSelectorItemSet.tsx';
 import {
@@ -291,6 +292,9 @@ const App = () => {
     channelCid: state.layout.channelCid,
   }));
   const { mode: themeMode } = useAppSettingsSelector((state) => state.theme);
+  const { connectionPanel: connectionPanelVisible } = useAppSettingsSelector(
+    (state) => state.devTools,
+  );
   const initialChannelId = useMemo(() => getInitialChannelIdFromUrl(), []);
   const initialChatView = useMemo(() => getInitialChatViewFromUrl(), []);
   const initialThreadId = useMemo(() => getInitialThreadIdFromUrl(), []);
@@ -638,6 +642,7 @@ const App = () => {
             ref={appLayoutRef}
             style={initialAppLayoutStyle}
           >
+            {connectionPanelVisible && <ConnectionDevPanel />}
             <SystemNotification />
             <div className='app-chat-layout__body'>
               <PanelLayoutStyleSync layoutRef={appLayoutRef} />

examples/vite/src/AppSettings/AppSettings.tsx

@@ -26,6 +26,7 @@ import { ReactionsTab } from './tabs/Reactions';
 import { SidebarTab } from './tabs/Sidebar';
 import { appSettingsStore, useAppSettingsState } from './state';
 import {
+  IconConnection,
   IconGear,
   IconMoon,
   IconSidebar,
@@ -159,6 +160,30 @@ const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {
   );
 };
 
+const SidebarConnectionPanelToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {
+  const { devTools } = useAppSettingsState();
+  const { connectionPanel } = devTools;
+
+  return (
+    <ChatViewSelectorButton
+      aria-checked={connectionPanel}
+      aria-label={`${connectionPanel ? 'Hide' : 'Show'} the connection dev panel`}
+      aria-selected={connectionPanel}
+      className='app__settings-group_button app__settings-group_button--toggle'
+      Icon={IconConnection}
+      iconOnly={iconOnly}
+      isActive={connectionPanel}
+      onClick={() =>
+        appSettingsStore.partialNext({
+          devTools: { ...devTools, connectionPanel: !connectionPanel },
+        })
+      }
+      role='switch'
+      text={connectionPanel ? 'Hide connection panel' : 'Connection panel'}
+    />
+  );
+};
+
 const SidebarRtlToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {
   const {
     theme,
@@ -203,6 +228,7 @@ export const AppSettings = ({ iconOnly = true }: { iconOnly?: boolean }) => {
 
   return (
     <div className='app__settings-group'>
+      <SidebarConnectionPanelToggle iconOnly={iconOnly} />
       <SidebarRtlToggle iconOnly={iconOnly} />
       <SidebarThemeToggle iconOnly={iconOnly} />
       <ActionsMenu iconOnly={iconOnly} />

examples/vite/src/AppSettings/state.ts

@@ -13,6 +13,12 @@ export type ChatViewSettingsState = {
   iconOnly: boolean;
 };
 
+/** Dev-only affordances that would not ship in an application. */
+export type DevToolsSettingsState = {
+  /** Shows the panel that drives the network and WebSocket facts independently. */
+  connectionPanel: boolean;
+};
+
 export type ThemeSettingsState = {
   direction: 'ltr' | 'rtl';
   mode: 'dark' | 'light';
@@ -94,6 +100,7 @@ export type LayoutSettingsState = {
 export type AppSettingsState = {
   channelDetail: ChannelDetailSettingsState;
   chatView: ChatViewSettingsState;
+  devTools: DevToolsSettingsState;
   language: LanguageSettingsState;
   layout: LayoutSettingsState;
   messageActions: MessageActionsSettingsState;
@@ -122,6 +129,9 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === 'object' && value !== null;
 
 const defaultAppSettingsState: AppSettingsState = {
+  devTools: {
+    connectionPanel: false,
+  },
   channelDetail: {
     modal: {
       channelMembersView: {

examples/vite/src/ConnectionDevPanel/ConnectionDevPanel.scss

@@ -0,0 +1,52 @@
+.connection-dev-panel {
+  align-items: center;
+  background: var(--str-chat__secondary-surface-color, #f7f7f8);
+  border-bottom: 1px solid var(--str-chat__surface-color, #e3e5e8);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: monospace;
+  font-size: 11px;
+  gap: 10px;
+  padding: 6px 12px;
+
+  &__label {
+    opacity: 0.6;
+    text-transform: uppercase;
+  }
+
+  &__toggle {
+    align-items: center;
+    background: #fff;
+    border: 1px solid var(--str-chat__surface-color, #d0d3d8);
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    font-family: inherit;
+    font-size: inherit;
+    gap: 8px;
+    padding: 3px 8px;
+
+    // `false` is the only definite negative. `undefined` means unknown and gets its own colour, so
+    // the state that must not read as offline does not look like it.
+    &[data-state='false'] {
+      background: #ffd7d7;
+    }
+
+    &[data-state='true'] {
+      background: #d7f5dd;
+    }
+
+    &[data-state='undefined'] {
+      background: #ffe9c7;
+    }
+  }
+
+  &__action {
+    opacity: 0.55;
+  }
+
+  &__hint {
+    margin-left: auto;
+    opacity: 0.5;
+  }
+}