Merge pull request #1020 from thoraxe/first-time

First time user experience

Author: openshift-merge-bot[bot]

.gitignore

@@ -5,3 +5,4 @@ dist/
 .env
 gui_test_screenshots
 .nodeenv
+.playwright-mcp

locales/en/plugin__lightspeed-console-plugin.json

@@ -71,6 +71,7 @@
   "Not authorized": "Not authorized",
   "OpenShift Lightspeed authentication failed. Contact your system administrator for more information.": "OpenShift Lightspeed authentication failed. Contact your system administrator for more information.",
   "OpenShift Lightspeed chat history": "OpenShift Lightspeed chat history",
+  "OpenShift Lightspeed is now available to help you with your OpenShift questions and tasks. Try asking about deployments, troubleshooting, best practices, or any other OpenShift-related topics. This notice will disappear once you minimize the chat.": "OpenShift Lightspeed is now available to help you with your OpenShift questions and tasks. Try asking about deployments, troubleshooting, best practices, or any other OpenShift-related topics. This notice will disappear once you minimize the chat.",
   "OpenShift Lightspeed uses AI technology to help answer your questions. Do not include personal information or other sensitive information in your input. Interactions may be used to improve Red Hat's products or services.": "OpenShift Lightspeed uses AI technology to help answer your questions. Do not include personal information or other sensitive information in your input. Interactions may be used to improve Red Hat's products or services.",
   "Please retry or contact support if the issue persists.": "Please retry or contact support if the issue persists.",
   "Preview attachment": "Preview attachment",
@@ -90,6 +91,7 @@
   "Uploaded file is not valid YAML": "Uploaded file is not valid YAML",
   "Uploaded file is too large. Max size is {{max}} MB.": "Uploaded file is too large. Max size is {{max}} MB.",
   "Waiting for OpenShift Lightspeed service": "Waiting for OpenShift Lightspeed service",
+  "Welcome to OpenShift Lightspeed!": "Welcome to OpenShift Lightspeed!",
   "You can preview and optionally edit the code displayed in the modal before attaching it to your prompt.": "You can preview and optionally edit the code displayed in the modal before attaching it to your prompt.",
   "You can select a container and specify the most recent number of lines of its log file to include as an attachment for detailed troubleshooting and analysis.": "You can select a container and specify the most recent number of lines of its log file to include as an attachment for detailed troubleshooting and analysis.",
   "You can specify the most recent number of events from this resource to include as an attachment for detailed troubleshooting and analysis.": "You can specify the most recent number of events from this resource to include as an attachment for detailed troubleshooting and analysis.",

src/components/GeneralPage.tsx

@@ -46,6 +46,7 @@ import { copyToClipboard } from '../clipboard';
 import { ErrorType, getFetchErrorMessage } from '../error';
 import { AuthStatus, getRequestInitWithAuthHeader, useAuth } from '../hooks/useAuth';
 import { useBoolean } from '../hooks/useBoolean';
+import { useFirstTimeUser } from '../hooks/useFirstTimeUser';
 import { useIsDarkTheme } from '../hooks/useIsDarkTheme';
 import {
   attachmentsClear,
@@ -65,6 +66,7 @@ import NewChatModal from './NewChatModal';
 import Prompt from './Prompt';
 import ReadinessAlert from './ReadinessAlert';
 import ResponseTools from './ResponseTools';
+import WelcomeNotice from './WelcomeNotice';
 
 import './general-page.css';
 import '@patternfly/chatbot/dist/css/main.css';
@@ -429,6 +431,7 @@ const GeneralPage: React.FC<GeneralPageProps> = ({ onClose, onCollapse, onExpand
   const conversationID: string = useSelector((s: State) => s.plugins?.ols?.get('conversationID'));
 
   const [authStatus] = useAuth();
+  const [isFirstTimeUser] = useFirstTimeUser();
 
   const [isNewChatModalOpen, , openNewChatModal, closeNewChatModal] = useBoolean(false);
   const [isCopied, , setCopied, setNotCopied] = useBoolean(false);
@@ -566,6 +569,7 @@ const GeneralPage: React.FC<GeneralPageProps> = ({ onClose, onCollapse, onExpand
             </Title>
             <AuthAlert authStatus={authStatus} />
             <PrivacyAlert />
+            {isFirstTimeUser && <WelcomeNotice />}
             {chatHistory.toJS().map((entry: ChatEntry, i: number) => (
               <ChatHistoryEntry
                 conversationID={conversationID}

src/components/Popover.tsx

@@ -7,6 +7,7 @@ import { consoleFetchJSON } from '@openshift-console/dynamic-plugin-sdk';
 import { getApiUrl } from '../config';
 import { getRequestInitWithAuthHeader } from '../hooks/useAuth';
 import { useBoolean } from '../hooks/useBoolean';
+import { useFirstTimeUser } from '../hooks/useFirstTimeUser';
 import { useHideLightspeed } from '../hooks/useHideLightspeed';
 import { useIsDarkTheme } from '../hooks/useIsDarkTheme';
 import { closeOLS, openOLS, userFeedbackDisable } from '../redux-actions';
@@ -29,6 +30,7 @@ const Popover: React.FC = () => {
   const [isExpanded, , expand, collapse] = useBoolean(false);
   const [isHidden] = useHideLightspeed();
   const [isDarkTheme] = useIsDarkTheme();
+  const [isFirstTimeUser, markAsExperienced, firstTimeLoaded] = useFirstTimeUser();
 
   React.useEffect(() => {
     consoleFetchJSON(
@@ -48,13 +50,28 @@ const Popover: React.FC = () => {
       });
   }, [dispatch]);
 
+  // Auto-open chat for first-time users
+  React.useEffect(() => {
+    if (firstTimeLoaded && isFirstTimeUser && !isOpen && !isHidden) {
+      // Small delay to allow the page to load before opening
+      const timer = setTimeout(() => {
+        dispatch(openOLS());
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [firstTimeLoaded, isFirstTimeUser, isOpen, isHidden, dispatch]);
+
   const open = React.useCallback(() => {
     dispatch(openOLS());
   }, [dispatch]);
 
   const close = React.useCallback(() => {
+    // Mark user as experienced when they close chat for the first time
+    if (isFirstTimeUser) {
+      markAsExperienced();
+    }
     dispatch(closeOLS());
-  }, [dispatch]);
+  }, [dispatch, isFirstTimeUser, markAsExperienced]);
 
   if (isHidden) {
     return null;

src/components/WelcomeNotice.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from '@patternfly/react-core';
+
+/**
+ * Welcome notice component for first-time users.
+ * Displayed inside the chat window to welcome new users and encourage them to try Lightspeed.
+ */
+const WelcomeNotice: React.FC = () => {
+  const { t } = useTranslation('plugin__lightspeed-console-plugin');
+
+  return (
+    <Alert
+      className="ols-plugin__alert"
+      isInline
+      title={t('Welcome to OpenShift Lightspeed!')}
+      variant="info"
+    >
+      {t(
+        'OpenShift Lightspeed is now available to help you with your OpenShift questions and tasks. Try asking about deployments, troubleshooting, best practices, or any other OpenShift-related topics. This notice will disappear once you minimize the chat.',
+      )}
+    </Alert>
+  );
+};
+
+export default WelcomeNotice;

src/hooks/useFirstTimeUser.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useUserSettings } from '@openshift-console/dynamic-plugin-sdk';
+
+/**
+ * Simple hook to manage first-time user experience for OpenShift Lightspeed.
+ *
+ * This hook tracks whether the user has ever closed/minimized the chat window.
+ * For first-time users, the chat should auto-open. Once they close it once,
+ * it should stay closed on future page loads.
+ *
+ * @returns A tuple containing:
+ *   - isFirstTimeUser: boolean indicating if this is a first-time user (chat should auto-open)
+ *   - markAsExperienced: callback function to mark that user has closed chat
+ *   - isLoaded: boolean indicating if the user settings have finished loading
+ */
+export const useFirstTimeUser = (): [boolean, () => void, boolean] => {
+  // Track if user has ever closed the chat window
+  const [hasClosedChatBefore, setHasClosedChatBefore, isLoaded] = useUserSettings(
+    'lightspeed.hasClosedChat',
+    false, // Default: user hasn't closed chat yet (first-time user)
+    true, // Sync across namespaces
+  );
+
+  // Create stable callback to mark user as experienced (no longer first-time)
+  const markAsExperienced = useCallback(() => {
+    setHasClosedChatBefore(true);
+  }, [setHasClosedChatBefore]);
+
+  // First-time user if they haven't closed chat before and settings are loaded
+  const isFirstTimeUser = isLoaded && !hasClosedChatBefore;
+
+  return [isFirstTimeUser, markAsExperienced, isLoaded];
+};

src/hooks/useIsDarkTheme.ts

@@ -3,7 +3,7 @@ import { useUserSettings } from '@openshift-console/dynamic-plugin-sdk';
 export const useIsDarkTheme = (): [boolean] => {
   const [theme] = useUserSettings('console.theme', null, true);
   return [
-    theme === 'systemDefault'
+    theme === 'systemDefault' || theme === null
       ? window.matchMedia?.('(prefers-color-scheme: dark)').matches
       : theme === 'dark',
   ];