update lightspeed plugin documentation

plugins/lightspeed/README.md

@@ -4,6 +4,10 @@ The Lightspeed plugin enables you to interact with any LLM server running a mode
 
 ## For administrators
 
+### Prerequisites
+
+- Follow the lightspeed backend plugin [README](https://github.com/janus-idp/backstage-plugins/tree/main/plugins/lightspeed-backend) to integrate lightspeed backend in your Backstage instance.
+
 ### Installation
 
 1. Install the Lightspeed plugin using the following command:
@@ -14,26 +18,15 @@ The Lightspeed plugin enables you to interact with any LLM server running a mode
 
 ### Configuration
 
-1. Set the proxy to the desired LLM server in the `app-config.yaml` file as follows:
-
-   ```yaml title="app-config.yaml"
-   proxy:
-     endpoints:
-       '/lightspeed/api':
-         target: http://localhost:11434/v1/
-         headers:
-           Authorization: Bearer <token>
-   ```
-
-2. Add a new nav item **Lightspeed** in App `packages/app/src/App.tsx`:
+1. Add a new nav item **Lightspeed** in App `packages/app/src/App.tsx`:
 
    ```tsx title="packages/app/src/components/App.tsx"
    /* highlight-add-next-line */ import { LightspeedPage } from '@janus-idp/backstage-plugin-lightspeed';
 
    <Route path="/lightspeed" element={<LightspeedPage />} />;
    ```
 
-3. Enable **Lightspeed** page in `packages/app/src/components/Root/Root.tsx`:
+2. Enable **Lightspeed** page in `packages/app/src/components/Root/Root.tsx`:
 
    ```tsx title="packages/app/src/components/Root/Root.tsx"
    /* highlight-add-next-line */ import { LightspeedIcon } from '@janus-idp/backstage-plugin-lightspeed';
@@ -94,15 +87,14 @@ global:
                       text: Lightspeed
 ```
 
-- add the proxy configuration in the `app-config.yaml`
+- add the lightspeed configuration in the `app-config.yaml`
 
 ```
-proxy:
- endpoints:
-  '/lightspeed/api':
-    target: http://localhost:11434/v1/
-    headers:
-      Authorization: Bearer <token>
+lightspeed:
+  servers:
+    - id: <server_id>
+      url: <server_URL>
+      token: <api_key>
 ```
 
 ---
@@ -136,12 +128,11 @@ mv package $(echo $archive | sed -e 's:\.tgz$::')
 
 ```
 
-proxy:
-  endpoints:
-     '/lightspeed/api':
-      target: http://localhost:11434/v1/
-      headers:
-         Authorization: Bearer <token>
+lightspeed:
+  servers:
+    - id: <server id>
+      url: <serverURL>
+      token: <api key> # dummy token
 
 dynamicPlugins:
   frontend:

plugins/lightspeed/src/components/LightSpeedChat.tsx

@@ -80,11 +80,9 @@ export const LightspeedChat = ({
 
   const queryClient = useQueryClient();
 
+  const { data: conversations = [] } = useConversations();
   const { mutateAsync: createConversation } = useCreateConversation();
-  const { data: conversations = [], isFetching: isFetchingConversations } =
-    useConversations();
-  const { mutateAsync: deleteConversation, isPending: isDeleting } =
-    useDeleteConversation();
+  const { mutateAsync: deleteConversation } = useDeleteConversation();
 
   React.useEffect(() => {
     if (user) {
@@ -151,7 +149,6 @@ export const LightspeedChat = ({
     (conversationSummary: ConversationSummary) => ({
       menuItems: (
         <DropdownItem
-          isDisabled={isDeleting || isFetchingConversations}
           onClick={async () => {
             try {
               await deleteConversation({
@@ -169,7 +166,7 @@ export const LightspeedChat = ({
         </DropdownItem>
       ),
     }),
-    [deleteConversation, onNewChat, isDeleting, isFetchingConversations],
+    [deleteConversation, onNewChat],
   );
   const categorizedMessages = getCategorizeMessages(
     conversations,

plugins/lightspeed/src/hooks/__tests__/useConversationMessages.test.tsx

@@ -131,7 +131,7 @@ describe('useConversationMesages', () => {
       ({ conversationId }: { conversationId: any }) =>
         useConversationMessages(
           conversationId,
-          'test-user',
+          'test-user-id',
           'gpt-3',
           'avatar.png',
         ),
@@ -155,7 +155,7 @@ describe('useConversationMesages', () => {
   it('should call onComplete when streaming is done', async () => {
     const onComplete = jest.fn();
 
-    const mockApi = {
+    const lightSpeedApi = {
       createMessage: jest.fn().mockResolvedValue({
         read: jest
           .fn()
@@ -169,20 +169,19 @@ describe('useConversationMesages', () => {
       }),
     };
 
-    (useApi as jest.Mock).mockReturnValue(mockApi);
+    (useApi as jest.Mock).mockReturnValue(lightSpeedApi);
 
     const { result } = renderHook(
-      ({ conversationId }: { conversationId: any }) =>
+      () =>
         useConversationMessages(
-          conversationId,
+          'initialConversationId',
           'test-user',
           'gpt-3',
-          'avatar.png',
+          'user.png',
           onComplete,
         ),
       {
         wrapper,
-        initialProps: { conversationId: 'initialConversationId' },
       },
     );
 
@@ -213,17 +212,16 @@ describe('useConversationMesages', () => {
     (useApi as jest.Mock).mockReturnValue(mockApi);
 
     const { result } = renderHook(
-      ({ conversationId }: { conversationId: any }) =>
+      () =>
         useConversationMessages(
-          conversationId,
+          'testId',
           'test-user',
           'gpt-3',
-          'avatar.png',
+          'user.png',
           onComplete,
         ),
       {
         wrapper,
-        initialProps: { conversationId: 'initialConversationId' },
       },
     );
 
@@ -343,33 +341,33 @@ describe('useConversationMesages', () => {
   });
 
   it('should surface API error if last bot message failed', async () => {
-    const mockApi = {
+    const mockLsApiClient = {
       createMessage: jest
         .fn()
         .mockRejectedValue(new Error('Failed to create message')),
     };
 
-    (useApi as jest.Mock).mockReturnValue(mockApi);
+    (useApi as jest.Mock).mockReturnValue(mockLsApiClient);
 
     const { result } = renderHook(
       () =>
         useConversationMessages(
-          'testConversationId',
+          'testConversationID',
           'test-user',
           'gpt-3',
           'avatar.png',
         ),
       { wrapper },
     );
 
-    const prompt = 'Hello, how are you?';
+    const prompt = 'what is json?';
 
     await act(async () => {
       await result.current.handleInputPrompt(prompt);
     });
 
     await waitFor(() => {
-      expect(result.current.conversations.testConversationId).toEqual([
+      expect(result.current.conversations.testConversationID).toEqual([
         expect.objectContaining({
           role: 'user',
           content: prompt,