persist input text when switching display modes

Author: debsmita1

workspaces/lightspeed/plugins/lightspeed/report.api.md

@@ -13,9 +13,11 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot';
 import { ConfigApi } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { PathParams } from '@backstage/core-plugin-api';
 import { PropsWithChildren } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SourcesCardProps } from '@patternfly/chatbot';
+import { SubRouteRef } from '@backstage/core-plugin-api';
 
 // @public
 export type Attachment = {
@@ -163,10 +165,12 @@ export const LightspeedChatContainer: () => JSX_2.Element;
 export interface LightspeedDrawerContextType {
     currentConversationId?: string;
     displayMode: ChatbotDisplayMode;
+    draftMessage: string;
     drawerWidth: number;
     isChatbotActive: boolean;
     setCurrentConversationId: (id: string | undefined) => void;
     setDisplayMode: (mode: ChatbotDisplayMode) => void;
+    setDraftMessage: (message: string) => void;
     setDrawerWidth: React.Dispatch<React.SetStateAction<number>>;
     toggleChatbot: () => void;
 }
@@ -192,6 +196,7 @@ export const LightspeedPage: () => JSX_2.Element;
 // @public
 export const lightspeedPlugin: BackstagePlugin<    {
 root: RouteRef<undefined>;
+lightspeedConversation: SubRouteRef<PathParams<"/conversation/:conversationId">>;
 }, {}, {}>;
 
 // @public

workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ChangeEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { FileRejection } from 'react-dropzone/.';
 
 import { makeStyles } from '@material-ui/core';
@@ -148,6 +155,8 @@ export const LightspeedChat = ({
     setDisplayMode,
     currentConversationId: routeConversationId,
     setCurrentConversationId,
+    draftMessage,
+    setDraftMessage,
   } = useLightspeedDrawerContext();
   const {
     uploadError,
@@ -292,6 +301,7 @@ export const LightspeedChat = ({
     handleInputPrompt(message.toString(), getAttachments(fileContents));
     setIsSendButtonDisabled(true);
     setFileContents([]);
+    setDraftMessage('');
   };
 
   const onNewChat = useCallback(() => {
@@ -300,6 +310,7 @@ export const LightspeedChat = ({
         setMessages([]);
         setFileContents([]);
         setUploadError({ message: null });
+        setDraftMessage('');
         setConversationId(TEMP_CONVERSATION_ID);
         setNewChatCreated(true);
         setCurrentConversationId(undefined);
@@ -312,6 +323,7 @@ export const LightspeedChat = ({
     conversationId,
     setFileContents,
     setUploadError,
+    setDraftMessage,
     displayMode,
     setCurrentConversationId,
   ]);
@@ -491,12 +503,14 @@ export const LightspeedChat = ({
       setCurrentConversationId(newConvId);
       setFileContents([]);
       setUploadError({ message: null });
+      setDraftMessage('');
       scrollToBottomRef.current?.scrollToBottom();
     },
     [
       setConversationId,
       setUploadError,
       setFileContents,
+      setDraftMessage,
       scrollToBottomRef,
       setCurrentConversationId,
     ],
@@ -545,6 +559,11 @@ export const LightspeedChat = ({
     handleFileUpload(data);
   };
 
+  const handleDraftMessage = (
+    _e: ChangeEvent<HTMLTextAreaElement>,
+    value: string | number,
+  ) => setDraftMessage(value as any);
+
   const onAttachRejected = (data: FileRejection[]) => {
     data.forEach(attachment => {
       const hasInvalidTypeError = attachment.errors.some(
@@ -701,6 +720,8 @@ export const LightspeedChat = ({
                   hasAttachButton
                   handleAttach={handleAttach}
                   hasMicrophoneButton
+                  value={draftMessage}
+                  onChange={handleDraftMessage}
                   buttonProps={{
                     attach: {
                       inputTestId: 'attachment-input',

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerContext.tsx

@@ -57,6 +57,15 @@ export interface LightspeedDrawerContextType {
    * Pass undefined to clear the conversation (example: for new chat)
    */
   setCurrentConversationId: (id: string | undefined) => void;
+  /**
+   * The message in the chat input box
+   * Used to preserve input content when switching between display modes
+   */
+  draftMessage: string;
+  /**
+   * To save the input message as a draft when switching modes
+   */
+  setDraftMessage: (message: string) => void;
 }
 
 /**

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx

@@ -60,6 +60,7 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
   const [currentConversationIdState, setCurrentConversationIdState] = useState<
     string | undefined
   >(undefined);
+  const [draftMessage, setDraftMessageState] = useState<string>('');
   const openedViaFABRef = useRef<boolean>(false);
 
   const isLightspeedRoute = location.pathname.startsWith('/lightspeed');
@@ -148,6 +149,10 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
     [displayModeState, isLightspeedRoute, navigate],
   );
 
+  const setDraftMessage = useCallback((message: string) => {
+    setDraftMessageState(message);
+  }, []);
+
   // Set display mode with route handling for embedded/fullscreen
   const setDisplayMode = useCallback(
     (mode: ChatbotDisplayMode, conversationIdParam?: string) => {
@@ -199,6 +204,8 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
       setDrawerWidth,
       currentConversationId: currentConversationIdState,
       setCurrentConversationId,
+      draftMessage,
+      setDraftMessage,
     }),
     [
       isOpen,
@@ -209,6 +216,8 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
       setDrawerWidth,
       currentConversationIdState,
       setCurrentConversationId,
+      draftMessage,
+      setDraftMessage,
     ],
   );
 

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedChat.test.tsx

@@ -169,6 +169,8 @@ describe('LightspeedChat', () => {
       setDrawerWidth: jest.fn(),
       currentConversationId: undefined,
       setCurrentConversationId: mockSetCurrentConversationId,
+      draftMessage: '',
+      setDraftMessage: jest.fn(),
     });
 
     localStorage.clear();
@@ -484,6 +486,8 @@ describe('LightspeedChat', () => {
         setDrawerWidth: jest.fn(),
         currentConversationId: undefined,
         setCurrentConversationId: mockSetCurrentConversationId,
+        draftMessage: '',
+        setDraftMessage: jest.fn(),
       });
 
       render(setupLightspeedChat());
@@ -511,6 +515,8 @@ describe('LightspeedChat', () => {
         setDrawerWidth: jest.fn(),
         currentConversationId: undefined,
         setCurrentConversationId: mockSetCurrentConversationId,
+        draftMessage: '',
+        setDraftMessage: jest.fn(),
       });
 
       render(setupLightspeedChat());
@@ -538,6 +544,8 @@ describe('LightspeedChat', () => {
         setDrawerWidth: jest.fn(),
         currentConversationId: undefined,
         setCurrentConversationId: mockSetCurrentConversationId,
+        draftMessage: '',
+        setDraftMessage: jest.fn(),
       });
 
       render(setupLightspeedChat());

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedDrawerStateExposer.test.tsx

@@ -37,6 +37,8 @@ describe('LightspeedDrawerStateExposer', () => {
     setDrawerWidth: mockSetDrawerWidth,
     currentConversationId: undefined,
     setCurrentConversationId: jest.fn(),
+    draftMessage: '',
+    setDraftMessage: jest.fn(),
     ...overrides,
   });
 

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedFAB.test.tsx

@@ -37,6 +37,8 @@ describe('LightspeedFAB', () => {
     setDrawerWidth: jest.fn(),
     currentConversationId: undefined,
     setCurrentConversationId: jest.fn(),
+    draftMessage: '',
+    setDraftMessage: jest.fn(),
     ...overrides,
   });
 

workspaces/lightspeed/plugins/lightspeed/src/hooks/__tests__/useLightspeedDrawerContext.test.tsx

@@ -30,6 +30,8 @@ describe('useLightspeedDrawerContext', () => {
     setDrawerWidth: jest.fn(),
     currentConversationId: 'test-conv-id',
     setCurrentConversationId: jest.fn(),
+    draftMessage: '',
+    setDraftMessage: jest.fn(),
   };
 
   it('should return context value when used within provider', () => {
@@ -217,4 +219,41 @@ describe('useLightspeedDrawerContext', () => {
     result.current.setCurrentConversationId('new-conv-id');
     expect(mockSetConversationId).toHaveBeenCalledWith('new-conv-id');
   });
+
+  it('should return draftMessage from context', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <LightspeedDrawerContext.Provider
+        value={{ ...mockContextValue, draftMessage: 'test draft message' }}
+      >
+        {children}
+      </LightspeedDrawerContext.Provider>
+    );
+
+    const { result } = renderHook(() => useLightspeedDrawerContext(), {
+      wrapper,
+    });
+
+    expect(result.current.draftMessage).toBe('test draft message');
+  });
+
+  it('should provide working setDraftMessage function', () => {
+    const mockSetDraftMessage = jest.fn();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <LightspeedDrawerContext.Provider
+        value={{
+          ...mockContextValue,
+          setDraftMessage: mockSetDraftMessage,
+        }}
+      >
+        {children}
+      </LightspeedDrawerContext.Provider>
+    );
+
+    const { result } = renderHook(() => useLightspeedDrawerContext(), {
+      wrapper,
+    });
+
+    result.current.setDraftMessage('new draft message');
+    expect(mockSetDraftMessage).toHaveBeenCalledWith('new draft message');
+  });
 });