slack: dismissable error/offline indicator (#1371)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.82/add-2025-11-02-jupyter-example.md

@@ -0,0 +1 @@
+* Add: Jupyter dataframes align cells right

znai-docs/znai/release-notes/1.82/add-2025-11-02-slack-offline-indicator.md

@@ -0,0 +1 @@
+* Add: Dismissable slack offline indicator instead of an error banner on every page.

znai-docs/znai/release-notes/1.82/doc-2025-11-02-jupyter.md

@@ -0,0 +1 @@
+* Doc: Jupyter improved example for docs

znai-docs/znai/release-notes/2025.md

@@ -1,3 +1,7 @@
+# 1.82
+
+:include-markdowns: 1.82
+
 # 1.81.1
 
 :include-markdowns: 1.81.1

znai-reactjs/src/doc-elements/text-selection/SlackActiveQuestions.css

@@ -73,3 +73,31 @@
 .theme-znai-dark .znai-highlight-bubble-resolve-wrapper {
     border-right: 1px solid rgba(255, 255, 255, 0.1);
 }
+
+.znai-slack-connection-indicator {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 10000;
+}
+
+.znai-slack-connection-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(255, 152, 0, 0.15);
+    border: 1px solid rgba(255, 152, 0, 0.4);
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 13px;
+}
+
+.znai-slack-connection-close {
+    background: none;
+    border: none;
+    color: rgba(255, 152, 0, 0.8);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0;
+    margin-left: 4px;
+}

znai-reactjs/src/doc-elements/text-selection/SlackActiveQuestions.tsx

@@ -22,9 +22,10 @@ import { HighlightedText } from "./HighlightedText";
 import { TocItem } from "../../structure/TocItem";
 
 import { ResolveQuestionButton } from "./ResolveQuestionButton";
-import "./SlackActiveQuestions.css";
 import { removeTrailingSlashFromQueryParam } from "./queryParamUtils";
 
+import "./SlackActiveQuestions.css";
+
 interface Question {
   id: string;
   selectedText: string;
@@ -37,9 +38,34 @@ interface Question {
   resolved: boolean;
 }
 
+let slackConnectionDismissed = false;
+
+function SlackConnectionIndicator({ onDismiss }: { onDismiss: () => void }) {
+  const handleDismiss = () => {
+    slackConnectionDismissed = true;
+    onDismiss();
+  };
+
+  return (
+    <div className="znai-slack-connection-indicator">
+      <div className="znai-slack-connection-content">
+        <span className="znai-slack-connection-message">Slack conversations are offline</span>
+        <button
+          className="znai-slack-connection-close"
+          onClick={handleDismiss}
+          aria-label="Dismiss Slack connection indicator"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export function SlackActiveQuestions({ containerNode, tocItem }: { containerNode: HTMLElement; tocItem: TocItem }) {
   const [questions, setQuestions] = useState<Question[]>([]);
   const [notification, setNotification] = useState<{ type: "success" | "error"; message: string } | null>(null);
+  const [showConnectionIndicator, setShowConnectionIndicator] = useState(false);
 
   const params = new URLSearchParams(window.location.search);
   const questionId = params.get("questionId") || "";
@@ -80,11 +106,18 @@ export function SlackActiveQuestions({ containerNode, tocItem }: { containerNode
         }));
         setQuestions(questions);
       } else {
-        setNotification({ type: "error", message: `Failed to fetch slack questions: ${response.statusText}` });
+        handleFetchError(`Failed to fetch slack questions: ${response.status} ${response.statusText}`);
         setQuestions([]);
       }
     } catch (err) {
-      setNotification({ type: "error", message: `Failed to fetch slack questions: ${err}` });
+      handleFetchError(`Failed to fetch slack questions: ${err}`);
+    }
+  }
+
+  function handleFetchError(errorMessage: string) {
+    console.error(errorMessage);
+    if (!slackConnectionDismissed) {
+      setShowConnectionIndicator(true);
     }
   }
 
@@ -150,6 +183,7 @@ export function SlackActiveQuestions({ containerNode, tocItem }: { containerNode
   return (
     <>
       {renderedQuestions}
+      {showConnectionIndicator && <SlackConnectionIndicator onDismiss={() => setShowConnectionIndicator(false)} />}
       {notification && (
         <Notification type={notification.type} message={notification.message} onClose={() => setNotification(null)} />
       )}