feat(lightspeed): frontend integration with LCS apis (#1580)

* align lightspeed ui with lcs

* upgrade pf chatbot

* add unit tests

* fix e2e tests

* use lightspeed_question_validity shiels as valid provider

* add changeset, refactor and cleanup

* disable file attachment test

* address review comments

Signed-off-by: Karthik <karthik.jk11@gmail.com>

* fix e2e tests

* update app-config example

---------

Signed-off-by: Karthik <karthik.jk11@gmail.com>

Author: karthikjeeyar

workspaces/lightspeed/.changeset/sharp-vans-tie.md

@@ -0,0 +1,6 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': major
+'@red-hat-developer-hub/backstage-plugin-lightspeed-backend': patch
+---
+
+Align lightspeed UI with LCS

workspaces/lightspeed/app-config.yaml

@@ -76,9 +76,3 @@ catalog:
     pullRequestBranchName: backstage-integration
   rules:
     - allow: [Component, System, API, Resource, Location]
-
-lightspeed:
-  servers:
-    - id: ollama
-      url: http://localhost:11434/v1
-      token: dummy-token

workspaces/lightspeed/packages/app/e2e-tests/fixtures/responses.ts

@@ -19,16 +19,22 @@ export const createdAt = Date.now();
 
 export const models = [
   {
-    id: 'mock-model-1',
-    object: 'model',
-    created: Math.floor(createdAt / 1000),
+    identifier: 'mock-provider-1/mock-model-1',
+    api_model_type: 'llm',
+    model_type: 'llm',
+    provider_resource_id: 'mock-model-1',
+    type: 'model',
     owned_by: 'library',
+    provider_id: 'mock-provider-1',
   },
   {
-    id: 'mock-model-2',
-    object: 'model',
-    created: Math.floor(createdAt / 1000),
+    identifier: 'mock-provider-1/mock-model-2',
+    api_model_type: 'llm',
+    model_type: 'llm',
+    provider_resource_id: 'mock-model-2',
+    type: 'model',
     owned_by: 'library',
+    provider_id: 'mock-provider-1',
   },
 ];
 
@@ -64,57 +70,52 @@ export const moreConversations = [
 
 export const contents = [
   {
-    lc: 1,
-    type: 'constructor',
-    id: ['langchain_core', 'messages', 'HumanMessage'],
-    content: 'New conversation',
-    response_metadata: {
-      created_at: createdAt,
-    },
-    additional_kwargs: {},
+    provider: models[1].provider_id,
+    model: models[1].provider_resource_id,
+    messages: [
+      {
+        content: 'New conversation',
+        type: 'user',
+      },
+      {
+        content: "Still a placeholder message'",
+        type: 'assistant',
+      },
+    ],
+    started_at: '2025-10-06T15:39:38Z',
+    completed_at: '2025-10-06T15:39:42Z',
   },
+];
+
+export const mockShields = [
   {
-    lc: 1,
-    type: 'constructor',
-    id: ['langchain_core', 'messages', 'AIMessage'],
-    content: 'Still a placeholder message',
-    response_metadata: {
-      created_at: createdAt,
-      model: models[1].id,
-      tool_calls: [],
-      invalid_tool_calls: [],
-      additional_kwargs: {},
-    },
+    identifier: 'test-shield-id',
+    provider_id: 'test-shield-id',
+    type: 'shield',
+    params: {},
+    provider_resource_id: 'test-shield-id',
   },
 ];
-
 const repeatedSentence =
   'OpenShift deployment is a way to manage applications on the OpenShift platform.';
 const openshiftLongParagraph = `${repeatedSentence} `.repeat(30);
 
 export const demoChatContent = [
   {
-    lc: 1,
-    type: 'constructor',
-    id: ['langchain_core', 'messages', 'HumanMessage'],
-    content: 'let me know about openshift deployment in detail',
-    response_metadata: {
-      created_at: createdAt,
-    },
-    additional_kwargs: {},
-  },
-  {
-    lc: 1,
-    type: 'constructor',
-    id: ['langchain_core', 'messages', 'AIMessage'],
-    content: openshiftLongParagraph,
-    response_metadata: {
-      created_at: createdAt,
-      model: models[1].id,
-      tool_calls: [],
-      invalid_tool_calls: [],
-      additional_kwargs: {},
-    },
+    provider: models[1].provider_id,
+    model: models[1].provider_resource_id,
+    messages: [
+      {
+        content: 'let me know about openshift deployment in detail',
+        type: 'user',
+      },
+      {
+        content: openshiftLongParagraph,
+        type: 'assistant',
+      },
+    ],
+    started_at: createdAt,
+    completed_at: createdAt,
   },
 ];
 
@@ -137,7 +138,7 @@ export const generateQueryResponse = (conversationId: string) => {
   tokens.forEach((token, index) => {
     events.push({
       event: 'token',
-      data: { id: index, token },
+      data: { id: index, token, role: 'inference' },
     });
   });
 

workspaces/lightspeed/packages/app/e2e-tests/lightspeed.test.ts

@@ -51,6 +51,7 @@ import {
   mockFeedbackStatus,
   mockModels,
   mockQuery,
+  mockShields,
 } from './utils/devMode';
 
 const botQuery = 'Please respond';
@@ -74,6 +75,7 @@ test.beforeEach(async ({ page }) => {
     await mockConversations(page);
     await mockChatHistory(page);
     await mockQuery(page, botQuery, conversations);
+    await mockShields(page, mockShields);
   }
 
   await page.goto('/');
@@ -95,9 +97,9 @@ test('Lightspeed is available', async ({ page }) => {
 });
 
 test('Models are available', async ({ page }) => {
-  const model = models[1].id;
+  const model = models[1].provider_resource_id;
   const dropdown = page.locator('button[aria-label="Chatbot selector"]');
-  await expect(dropdown).toHaveText(models[0].id);
+  await expect(dropdown).toHaveText(models[0].provider_resource_id);
 
   await dropdown.click();
   await page.getByText(model).click();
@@ -137,7 +139,6 @@ test('verify default prompts are visible', async ({ page }) => {
 
   expect(nonEmptyTexts.length).toBe(3);
 });
-
 test.describe('File Attachment Validation', () => {
   const testFiles = [
     { path: '../../package.json', name: 'package.json' },
@@ -227,7 +228,7 @@ describeFn('Conversation', () => {
       await mockChatHistory(page, demoChatContent);
     }
 
-    let message = demoChatContent[0].content;
+    let message = demoChatContent[0].messages[0].content;
     if (!devMode) {
       message =
         (await page
@@ -236,8 +237,10 @@ describeFn('Conversation', () => {
     }
     await sendMessage(message, page, false);
 
-    const jumpTopButton = page.getByRole('button', { name: 'Jump top' });
-    const jumpBottomButton = page.getByRole('button', { name: 'Jump bottom' });
+    const jumpTopButton = page.getByRole('button', { name: 'Back to top' });
+    const jumpBottomButton = page.getByRole('button', {
+      name: 'Back to bottom',
+    });
 
     await expect(jumpTopButton).toBeVisible();
     await jumpTopButton.click();
@@ -262,7 +265,7 @@ describeFn('Conversation', () => {
       await mockConversations(page, moreConversations);
     }
     await sendMessage('test', page);
-    const sidePanel = page.locator('.pf-v6-c-drawer__panel');
+    const sidePanel = page.locator('.pf-v6-c-drawer__panel-main');
 
     const currentChat = sidePanel.locator('li.pf-chatbot__menu-item--active');
     await expect(currentChat).toHaveText(
@@ -293,10 +296,10 @@ describeFn('Conversation', () => {
     const botMessage = page.locator('.pf-chatbot__message--bot');
 
     await expect(userMessage).toContainText(
-      devMode ? contents[0].content : 'tell me about Backstage',
+      devMode ? contents[0].messages[0].content : 'tell me about Backstage',
     );
     await expect(botMessage).toContainText(
-      devMode ? contents[1].content : 'Backstage',
+      devMode ? contents[0].messages[1].content : 'Backstage',
     );
   });
 });

workspaces/lightspeed/packages/app/e2e-tests/utils/devMode.ts

@@ -18,7 +18,7 @@ import { generateQueryResponse, modelBaseUrl } from '../fixtures/responses';
 
 export async function mockModels(page: Page, models: any[]) {
   await page.route(`${modelBaseUrl}/v1/models`, async route => {
-    const json = { object: 'list', data: models };
+    const json = { models };
     await route.fulfill({ json });
   });
 }
@@ -28,7 +28,7 @@ export async function mockConversations(
   conversations?: any[],
   allowPost = false,
 ) {
-  await page.route(`${modelBaseUrl}/conversations`, async route => {
+  await page.route(`${modelBaseUrl}/v2/conversations`, async route => {
     if (route.request().method() === 'GET') {
       const json = conversations ? { conversations: conversations } : [];
       await route.fulfill({ json });
@@ -38,8 +38,15 @@ export async function mockConversations(
   });
 }
 
+export async function mockShields(page: Page, shields: any[] = []) {
+  await page.route(`${modelBaseUrl}/v1/shields`, async route => {
+    const json = { shields };
+    await route.fulfill({ json });
+  });
+}
+
 export async function mockChatHistory(page: Page, contents?: any[]) {
-  await page.route(`${modelBaseUrl}/conversations/user*`, async route => {
+  await page.route(`${modelBaseUrl}/v2/conversations/user*`, async route => {
     const json = contents ? { chat_history: contents } : [];
     await route.fulfill({ json });
   });

workspaces/lightspeed/packages/app/e2e-tests/utils/sidebar.ts

@@ -19,7 +19,9 @@ export async function assertChatDialogInitialState(page: Page) {
   await expect(page.getByLabel('Chatbot', { exact: true })).toContainText(
     'Developer Lightspeed',
   );
-  await expect(page.getByRole('button', { name: 'Toggle menu' })).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'Chat history menu' }),
+  ).toBeVisible();
   await assertDrawerState(page, 'open');
 }
 
@@ -29,7 +31,7 @@ export async function closeChatDrawer(page: Page) {
 }
 
 export async function openChatDrawer(page: Page) {
-  const toggleButton = page.getByRole('button', { name: 'Toggle menu' });
+  const toggleButton = page.getByRole('button', { name: 'Chat history menu' });
   await toggleButton.click();
 }
 
@@ -41,7 +43,7 @@ export async function assertDrawerState(page: Page, state: 'open' | 'closed') {
 
   const checks = [
     page.getByRole('button', { name: 'Close drawer panel' }),
-    page.getByRole('textbox', { name: 'Filter menu items' }),
+    page.getByRole('textbox', { name: 'Search previous conversations' }),
     page.getByRole('separator', { name: 'Resize' }),
   ];
 
@@ -51,7 +53,7 @@ export async function assertDrawerState(page: Page, state: 'open' | 'closed') {
 }
 
 export async function verifySidePanelConversation(page: Page) {
-  const sidePanel = page.locator('.pf-v6-c-drawer__panel');
+  const sidePanel = page.locator('.pf-v6-c-drawer__panel-main');
   await expect(sidePanel).toBeVisible();
 
   const newButton = sidePanel.getByRole('button', { name: 'new chat' });

workspaces/lightspeed/plugins/lightspeed-backend/README.md

@@ -31,36 +31,10 @@ Add the following lightspeed configurations into your `app-config.yaml` file:
 
 ```yaml
 lightspeed:
-  servers:
-    - id: <server id>
-      url: <serverURL>
-      token: <api key>
-  questionValidation: true # Optional - To disable question (prompt) validation set it to false.
   servicePort: <portNumber> # Optional - Change the LS service port nubmer. Defaults to 8080.
   systemPrompt: <system prompt> # Optional - Override the default system prompt.
 ```
 
-Example local development configuration:
-
-```yaml
-lightspeed:
-  servers:
-    - id: 'my-llm-server'
-      url: 'https://localhost:443/v1'
-      token: 'js92n-ssj28dbdk902' # dummy token
-```
-
-`questionValidation` is default to be enabled with topic restriction on RHDH related topics.
-If you want to disable the validation, set the value to be `false`.
-
-Example configuration to disable `questionValidation`:
-
-```yaml
-lightspeed:
-  questionValidation: false
-  servers: ... ...
-```
-
 #### Permission Framework Support
 
 The Lightspeed Backend plugin has support for the permission framework.

workspaces/lightspeed/plugins/lightspeed-backend/app-config.yaml

@@ -1,5 +1,4 @@
-lightspeed:
-  servers:
-    - id: ${SERVER_ID}
-      url: ${SERVER_URL}
-      token: ${SERVER_TOKEN}
+# OPTIONAL: Backend-only configurations
+#lightspeed:
+#  servicePort: 8080 # OPTIONAL: Port for lightspeed service (default: 8080)
+#  systemPrompt: <custom_system_prompt>   # OPTIONAL: Override default RHDH system prompt

workspaces/lightspeed/plugins/lightspeed-backend/config.d.ts

@@ -19,24 +19,7 @@ export interface Config {
    * Configuration required for using lightspeed
    * @visibility frontend
    */
-  lightspeed: {
-    servers: Array<{
-      /**
-       * The id of the server.
-       * @visibility frontend
-       */
-      id: string;
-      /**
-       * The url of the server.
-       * @visibility frontend
-       */
-      url: string;
-      /**
-       * The access token for authenticating server.
-       * @visibility secret
-       */
-      token?: string;
-    }>;
+  lightspeed?: {
     /**
      * configure the port number for the lightspeed service.
      * @visibility backend

workspaces/lightspeed/plugins/lightspeed-backend/src/service/router.ts

@@ -22,8 +22,6 @@ import express, { Router } from 'express';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import fetch from 'node-fetch';
 
-// const fetch = (await import('node-fetch')).default;
-
 import {
   lightspeedChatCreatePermission,
   lightspeedChatDeletePermission,