fix(lightspeed): Make Source card links as external links (#947)

* make source card links external

* add changeset

* add more unit tests

Author: karthikjeeyar

workspaces/lightspeed/.changeset/wet-fishes-do.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Make source card links as external links

workspaces/lightspeed/plugins/lightspeed/src/hooks/useConversationMessages.ts

@@ -31,6 +31,7 @@ import {
   createUserMessage,
   getMessageData,
   getTimestamp,
+  transformDocumentsToSources,
 } from '../utils/lightspeed-chatbox-utils';
 import { useCreateConversationMessage } from './useCreateCoversationMessage';
 
@@ -126,6 +127,7 @@ export const useConversationMessages = (
           model,
           content: botMessage,
           timestamp: botTimestamp,
+          referencedDocuments,
         } = getMessageData(aiMessage);
 
         _conversations[currentConversation].push(
@@ -142,6 +144,7 @@ export const useConversationMessages = (
               name: model ?? selectedModel,
               content: botMessage,
               timestamp: botTimestamp,
+              sources: transformDocumentsToSources(referencedDocuments),
             }),
           ],
         );

workspaces/lightspeed/plugins/lightspeed/src/types.ts

@@ -29,6 +29,10 @@ export type Conversations = {
   };
 };
 
+export type ReferencedDocuments = {
+  doc_title: string;
+  doc_url: string;
+}[];
 export interface BaseMessage {
   name: string;
   type: string;
@@ -41,6 +45,7 @@ export interface BaseMessage {
   };
   sources?: SourcesCardProps;
   additional_kwargs: {
+    referenced_documents?: ReferencedDocuments;
     [_key: string]: any;
   };
   error?: AlertProps;

workspaces/lightspeed/plugins/lightspeed/src/utils/__tests__/lightspeed-chatbot-utils.test.ts

@@ -24,8 +24,22 @@ import {
   getTimestamp,
   getTimestampVariablesString,
   splitJsonStrings,
+  transformDocumentsToSources,
 } from '../lightspeed-chatbox-utils';
 
+const referenced_documents = [
+  {
+    doc_title: 'About Red Hat Developer Hub',
+    doc_url:
+      'https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.6/html-single/about_red_hat_developer_hub/index',
+  },
+  {
+    doc_title: 'Adoption Insights in Red Hat Developer Hub',
+    doc_url:
+      'https://docs.redhat.com/en/documentation/red_hat_developer_hub/1.6/html-single/adoption_insights_in_red_hat_developer_hub/index',
+  },
+];
+
 describe('getTimestampVariablesString', () => {
   it('should add a leading zero if the number is less than 10', () => {
     expect(getTimestampVariablesString(5)).toBe('05');
@@ -203,6 +217,38 @@ describe('createBotMessage', () => {
       timestamp: '2024-10-30T14:00:00Z',
     });
   });
+
+  it('should create a bot message with source links', () => {
+    const message = createBotMessage({
+      name: 'BotMaster',
+      avatar: 'bot-avatar.png',
+      content: 'Bot message content',
+      timestamp: '2024-10-30T14:00:00Z',
+      isLoading: true,
+      sources: transformDocumentsToSources(referenced_documents),
+    });
+
+    expect(message?.sources?.sources).toHaveLength(2);
+    expect(message).toEqual(
+      expect.objectContaining({
+        role: 'bot',
+        name: 'BotMaster',
+        avatar: 'bot-avatar.png',
+        isLoading: true,
+        content: 'Bot message content',
+        timestamp: '2024-10-30T14:00:00Z',
+        sources: {
+          sources: expect.arrayContaining([
+            expect.objectContaining({
+              isExternal: true,
+              link: expect.anything(),
+              title: expect.anything(),
+            }),
+          ]),
+        },
+      }),
+    );
+  });
 });
 
 describe('getMessageData', () => {
@@ -223,6 +269,7 @@ describe('getMessageData', () => {
       content: 'This is the message content',
       model: 'granite3-dense:8b',
       timestamp: '15/04/2025, 05:39:08',
+      referencedDocuments: [],
     });
   });
 
@@ -232,10 +279,52 @@ describe('getMessageData', () => {
     expect(result).toEqual({
       content: '',
       timestamp: '',
+      model: undefined,
+      referencedDocuments: [],
+    });
+  });
+
+  it('should return referenced_documents as sources from additional_kwargs', () => {
+    const message = {
+      additional_kwargs: {
+        referenced_documents,
+      },
+    };
+    const result = getMessageData(message as any);
+    expect(result).toEqual({
+      content: '',
+      timestamp: '',
+      model: undefined,
+      referencedDocuments: referenced_documents,
     });
   });
 });
 
+describe('transformDocumentsToSources', () => {
+  it('should return undefined if invalid values are passed to referenced_documents', () => {
+    expect(
+      transformDocumentsToSources(undefined as unknown as any),
+    ).toBeUndefined();
+    expect(transformDocumentsToSources(null as unknown as any)).toBeUndefined();
+    expect(transformDocumentsToSources([] as unknown as any)).toBeUndefined();
+  });
+
+  it('should transform referenced documents into message sources', () => {
+    const sources = transformDocumentsToSources(referenced_documents);
+    expect(sources?.sources).toHaveLength(2);
+    expect(sources).toEqual(
+      expect.objectContaining({
+        sources: expect.arrayContaining([
+          expect.objectContaining({
+            isExternal: true,
+            link: expect.anything(),
+            title: expect.anything(),
+          }),
+        ]),
+      }),
+    );
+  });
+});
 describe('getCategorizeMessages', () => {
   const addProps = (c: ConversationSummary) => ({
     customProp: `prop-${c.conversation_id}`,

workspaces/lightspeed/plugins/lightspeed/src/utils/lightspeed-chatbox-utils.ts

@@ -16,7 +16,12 @@
 import { Conversation, SourcesCardProps } from '@patternfly/chatbot';
 import { PopoverProps } from '@patternfly/react-core';
 
-import { BaseMessage, ConversationList, ConversationSummary } from '../types';
+import {
+  BaseMessage,
+  ConversationList,
+  ConversationSummary,
+  ReferencedDocuments,
+} from '../types';
 
 export const getFootnoteProps = (additionalClassName: string) => ({
   label: 'Always check AI/LLM generated responses for accuracy prior to use.',
@@ -133,6 +138,24 @@ export const getMessageData = (message: BaseMessage) => {
     model: message?.response_metadata?.model,
     content: message?.content || '',
     timestamp: getTimestamp(message?.response_metadata?.created_at * 1000),
+    referencedDocuments: message?.additional_kwargs?.referenced_documents ?? [],
+  };
+};
+
+export const transformDocumentsToSources = (
+  referenced_documents: ReferencedDocuments,
+): SourcesCardProps | undefined => {
+  if (!referenced_documents || referenced_documents?.length === 0) {
+    return undefined;
+  }
+  return {
+    sources: referenced_documents.map(
+      (doc: { doc_title: string; doc_url: string }) => ({
+        title: doc.doc_title,
+        link: doc?.doc_url,
+        isExternal: true,
+      }),
+    ),
   };
 };