@red-hat-developer-hub/backstage-plugin-lightspeed 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 ## @red-hat-developer-hub/backstage-plugin-lightspeed
 
+## 2.6.0
+
+### Patch Changes
+
+- 9f5f22a: Fix new chat streams when switching threads and scope Stop to the streaming conversation (RHDHBUGS-3040).
+  - @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- d621f93: Improved notebook upload modal and MessageBar UX.
+- d621f93: Fixed overwrite flow to add duplicate files to the Add Document modal instead of uploading immediately. Reduced notebook delete toast timeout to 2 seconds.
+- 5d17950: Retain Lightspeed chat and tool-call state when the chat UI remounts (for example when switching display mode between embedded and overlay), so the active thread and tool metadata are not dropped while messages are still streaming or before history refetches.
+  - @red-hat-developer-hub/backstage-plugin-lightspeed-common@2.5.1
+
 ## 2.5.0
 
 ### Minor Changes

package/README.md

@@ -85,7 +85,11 @@ Lightspeed is a front-end plugin that enables you to interact with any LLM serve
 #### Procedure
 
 1. Open your Backstage application and select a Lightspeed nav item from the **Navigation**.
-2. Ask you questions to the Lightspeed chatbot.
+2. Ask your questions to the Lightspeed chatbot.
+
+### Display modes and chat continuity
+
+Lightspeed supports multiple **display modes** from Settings (for example overlay, docked, embedded, and fullscreen). Switching modes can remount the chat surface; your **current conversation** and **tool-call metadata** for that thread stay with the session so the active chat is not reset. Live streaming text may not update continuously across a mode switch until the assistant response finishes loading.
 
 ### MCP servers settings
 
@@ -129,7 +133,7 @@ Notebooks is an experimental feature that enables **document-based conversations
 
 #### Prerequisites for Notebooks
 
-- Notebooks requires a **Llama Stack service** to be running
+- Notebooks requires a **Lightspeed Stack service** to be running
 - The backend administrator must enable the feature (see [Backend Configuration](../lightspeed-backend/README.md#notebooks-developer-preview))
 - Users need the appropriate RBAC permissions (if enabled)
 

package/dist/alpha.d.ts

@@ -66,10 +66,12 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "notebook.view.upload.heading": string;
     readonly "notebook.view.upload.action": string;
     readonly "notebook.view.input.placeholder": string;
+    readonly "notebook.view.input.disabledTooltip": string;
     readonly "notebook.view.sidebar.collapse": string;
     readonly "notebook.view.sidebar.expand": string;
     readonly "notebook.view.sidebar.resize": string;
     readonly "notebook.view.documents.uploading": string;
+    readonly "notebook.view.documents.maxReached": string;
     readonly "notebook.upload.success": string;
     readonly "notebook.upload.failed": string;
     readonly "notebook.upload.modal.title": string;
@@ -77,6 +79,9 @@ declare const lightspeedTranslationRef: _backstage_frontend_plugin_api.Translati
     readonly "notebook.upload.modal.browseButton": string;
     readonly "notebook.upload.modal.separator": string;
     readonly "notebook.upload.modal.infoText": string;
+    readonly "notebook.upload.modal.selectedFiles": string;
+    readonly "notebook.upload.modal.addButton": string;
+    readonly "notebook.upload.modal.removeFile": string;
     readonly "notebook.upload.error.unsupportedType": string;
     readonly "notebook.upload.error.fileTooLarge": string;
     readonly "notebook.upload.error.tooManyFiles": string;

package/dist/components/LightSpeedChat.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useNavigate, useMatch } from 'react-router-dom';
 import { makeStyles, Button } from '@material-ui/core';
 import { ChatbotDisplayMode, ChatbotContent, ChatbotFooter, MessageBar, ChatbotFootnote, Settings, Chatbot, ChatbotHeader, ChatbotHeaderMain, ChatbotHeaderMenu, ChatbotHeaderTitle, FileDropZone, ChatbotAlert } from '@patternfly/chatbot';
@@ -452,7 +452,8 @@ const LightspeedChat = ({
     currentConversationId: routeConversationId,
     setCurrentConversationId,
     draftMessage,
-    setDraftMessage
+    setDraftMessage,
+    consumePendingOverlayThreadHandoff
   } = useLightspeedDrawerContext();
   const isFullscreenMode = displayMode === ChatbotDisplayMode.embedded;
   const showChatPanel = !isFullscreenMode || activeTab === 0;
@@ -529,11 +530,44 @@ const LightspeedChat = ({
     handleFileUpload,
     setUploadError
   } = useFileAttachmentContext();
+  useLayoutEffect(() => {
+    if (!isReady) return;
+    if (isFullscreenMode) {
+      return;
+    }
+    const handoff = consumePendingOverlayThreadHandoff?.() ?? false;
+    if (handoff) {
+      if (routeConversationId) {
+        setConversationId(routeConversationId);
+        setNewChatCreated(false);
+      } else {
+        setConversationId(TEMP_CONVERSATION_ID);
+        setNewChatCreated(true);
+      }
+      return;
+    }
+    if (routeConversationId && routeConversationId !== conversationId) {
+      setConversationId(routeConversationId);
+      setNewChatCreated(false);
+    } else if (!routeConversationId && conversationId === "" && lastOpenedId !== null) {
+      setConversationId(lastOpenedId);
+    }
+  }, [
+    isReady,
+    isFullscreenMode,
+    routeConversationId,
+    conversationId,
+    lastOpenedId,
+    consumePendingOverlayThreadHandoff
+  ]);
   useEffect(() => {
-    if (isReady && lastOpenedId !== null) {
+    if (!isReady || !isFullscreenMode) {
+      return;
+    }
+    if (lastOpenedId !== null) {
       setConversationId(lastOpenedId);
     }
-  }, [lastOpenedId, isReady]);
+  }, [lastOpenedId, isReady, isFullscreenMode]);
   const queryClient = useQueryClient();
   const {
     data: conversations = [],
@@ -545,27 +579,53 @@ const LightspeedChat = ({
   const samplePrompts = useWelcomePrompts();
   useEffect(() => {
     if (!user || !isReady) return;
+    const onOverlayLikeSurface = isFullscreenMode || !routeConversationId;
+    const stillOnProvisionalThread = !conversationId || conversationId === TEMP_CONVERSATION_ID;
     if (lastOpenedId === null) {
-      setConversationId(TEMP_CONVERSATION_ID);
+      if (onOverlayLikeSurface && stillOnProvisionalThread) {
+        setConversationId(TEMP_CONVERSATION_ID);
+      }
     }
     if (lastOpenedId === TEMP_CONVERSATION_ID || lastOpenedId === null) {
-      setNewChatCreated(true);
+      if (onOverlayLikeSurface && stillOnProvisionalThread) {
+        setNewChatCreated(true);
+      }
     }
-  }, [user, isReady, lastOpenedId, setConversationId]);
+  }, [
+    user,
+    isReady,
+    lastOpenedId,
+    setConversationId,
+    isFullscreenMode,
+    routeConversationId,
+    conversationId
+  ]);
   useEffect(() => {
     if (!isLoading && !isRefetching && conversations.length === 0 && lastOpenedId) {
       clearLastOpenedId();
+      setConversationId(TEMP_CONVERSATION_ID);
+      setNewChatCreated(true);
+      setCurrentConversationId(undefined);
     }
-  }, [isLoading, isRefetching, conversations, lastOpenedId, clearLastOpenedId]);
+  }, [
+    isLoading,
+    isRefetching,
+    conversations,
+    lastOpenedId,
+    clearLastOpenedId,
+    setCurrentConversationId
+  ]);
   useEffect(() => {
     if (!isLoading && !isRefetching && routeConversationId && isFullscreenMode) {
       const conversationExists = conversations.some(
         (c) => c.conversation_id === routeConversationId
       );
       if (!conversationExists) {
-        setConversationId(TEMP_CONVERSATION_ID);
-        setCurrentConversationId(undefined);
-        setNewChatCreated(true);
+        if (routeConversationId !== conversationId) {
+          setConversationId(TEMP_CONVERSATION_ID);
+          setCurrentConversationId(undefined);
+          setNewChatCreated(true);
+        }
       } else if (conversationId !== routeConversationId) {
         setConversationId(routeConversationId);
       }
@@ -585,6 +645,10 @@ const LightspeedChat = ({
       setLastOpenedId(conversationId);
     }
   }, [conversationId, setLastOpenedId]);
+  const viewConversationId = useMemo(
+    () => !isFullscreenMode && routeConversationId ? routeConversationId : conversationId,
+    [isFullscreenMode, routeConversationId, conversationId]
+  );
   const onStart = (conv_id) => {
     setConversationId(conv_id);
     setCurrentConversationId(conv_id);
@@ -602,12 +666,17 @@ const LightspeedChat = ({
       queryKey: ["conversations"]
     });
     queryClient.invalidateQueries({
-      queryKey: ["conversationMessages", conversationId]
+      queryKey: ["conversationMessages", viewConversationId]
     });
     setNewChatCreated(false);
   };
-  const { conversationMessages, handleInputPrompt, scrollToBottomRef } = useConversationMessages(
-    conversationId,
+  const {
+    conversationMessages,
+    handleInputPrompt,
+    scrollToBottomRef,
+    streamingConversationId
+  } = useConversationMessages(
+    viewConversationId,
     userName,
     selectedModel,
     selectedProvider,
@@ -617,11 +686,12 @@ const LightspeedChat = ({
     undefined,
     onRequestIdReady
   );
+  const streamingUiMatchesView = isSendButtonDisabled && streamingConversationId !== null && viewConversationId === streamingConversationId;
   const [messages, setMessages] = useState(conversationMessages);
   const sendMessage = (message) => {
     if (!message.toString().trim()) return;
     wasStoppedByUserRef.current = false;
-    if (conversationId !== TEMP_CONVERSATION_ID) {
+    if (viewConversationId !== TEMP_CONVERSATION_ID) {
       setNewChatCreated(false);
     }
     setAnnouncement(
@@ -839,7 +909,7 @@ const LightspeedChat = ({
     ]
   );
   const conversationFound = !!conversations.find(
-    (c) => c.conversation_id === conversationId
+    (c) => c.conversation_id === viewConversationId
   );
   const getMaxPrompts = () => {
     if (isFullscreenMode) {
@@ -1112,7 +1182,7 @@ const LightspeedChat = ({
               ref: scrollToBottomRef,
               welcomePrompts,
               conversationId,
-              isStreaming: isSendButtonDisabled,
+              isStreaming: streamingUiMatchesView,
               topicRestrictionEnabled,
               displayMode
             }
@@ -1140,8 +1210,8 @@ const LightspeedChat = ({
           hasMicrophoneButton: true,
           value: draftMessage,
           onChange: handleDraftMessage,
-          hasStopButton: isSendButtonDisabled,
-          handleStopButton: isSendButtonDisabled ? handleStopButton : undefined,
+          hasStopButton: streamingUiMatchesView,
+          handleStopButton: streamingUiMatchesView ? handleStopButton : undefined,
           buttonProps: {
             attach: {
               inputTestId: "attachment-input",
@@ -1217,7 +1287,7 @@ const LightspeedChat = ({
             variant: AlertVariant[variant ?? "success"],
             title,
             className: classes.toastAlert,
-            timeout: 8e3,
+            timeout: 2e3,
             onTimeout: () => handleRemoveNotebookAlert(key),
             actionClose: /* @__PURE__ */ jsx(
               AlertActionCloseButton,
@@ -1342,7 +1412,7 @@ const LightspeedChat = ({
                 "aria-label": t("aria.closeDrawerPanel")
               },
               setIsDrawerOpen: setIsChatHistoryDrawerOpen,
-              activeItemId: conversationId,
+              activeItemId: viewConversationId,
               onSelectActiveItem,
               conversations: filterConversations(filterValue),
               onNewChat: newChatCreated ? undefined : onNewChat,
@@ -1406,6 +1476,7 @@ const LightspeedChat = ({
               avatar,
               profileLoading,
               topicRestrictionEnabled,
+              selectedModel,
               onClose: handleCloseNotebook
             }
           ),