feat(lightspeed): add configurable sample prompts in lightspeed (#800)

* add configurable sample prompts in lightspeed

* udpate configuration name

* choose default prompts based on questionValidation setting

Author: karthikjeeyar

workspaces/lightspeed/.changeset/rude-ways-pump.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Add configurable sample prompts

workspaces/lightspeed/plugins/lightspeed/README.md

@@ -123,6 +123,9 @@ lightspeed:
       url: <server_URL>
       token: <api_key>
   questionValidation: true # Optional - To disable question (prompt) validation set it to false.
+  prompts: # optional
+    - title: <prompt_title>
+    - message: <prompt_message>
 ```
 
 `questionValidation` is default to be enabled with topic restriction on RHDH related topics.

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

@@ -43,5 +43,21 @@ export interface Config {
      * @visibility frontend
      */
     questionValidation?: boolean;
+    prompts?: Array</**
+     * @visibility frontend
+     */
+    {
+      /**
+       * The title of the prompt.
+       * Displayed as the heading of the prompt.
+       * @visibility frontend
+       */
+      title: string;
+      /**
+       * The main question or message shown in the prompt.
+       * @visibility frontend
+       */
+      message: string;
+    }>;
   };
 }

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

@@ -46,6 +46,7 @@ import {
   useLastOpenedConversation,
   useLightspeedDeletePermission,
 } from '../hooks';
+import { useWelcomePrompts } from '../hooks/useWelcomePrompts';
 import { ConversationSummary } from '../types';
 import { getAttachments } from '../utils/attachment-utils';
 import {
@@ -143,7 +144,7 @@ export const LightspeedChat = ({
   const { data: conversations = [] } = useConversations();
   const { mutateAsync: deleteConversation } = useDeleteConversation();
   const { allowed: hasDeleteAccess } = useLightspeedDeletePermission();
-
+  const samplePrompts = useWelcomePrompts();
   React.useEffect(() => {
     if (user && lastOpenedId === null && isReady) {
       setConversationId(TEMP_CONVERSATION_ID);
@@ -307,35 +308,13 @@ export const LightspeedChat = ({
   const welcomePrompts =
     (newChatCreated && conversationMessages.length === 0) ||
     (!conversationFound && conversationMessages.length === 0)
-      ? [
-          {
-            title: 'Getting Started with Backstage',
-            message:
-              'Can you guide me through the first steps to start using Backstage as a developer, like exploring the Software Catalog and adding my service?',
-            onClick: () =>
-              sendMessage(
-                'Can you guide me through the first steps to start using Backstage as a developer, like exploring the Software Catalog and adding my service?',
-              ),
-          },
-          {
-            title: 'Get Help On Code Readability',
-            message:
-              'Can you suggest techniques I can use to make my code more readable and maintainable?',
-            onClick: () =>
-              sendMessage(
-                'Can you suggest techniques I can use to make my code more readable and maintainable?',
-              ),
-          },
-          {
-            title: 'Create An OpenShift Deployment',
-            message:
-              'Can you guide me through creating a new deployment in OpenShift for a containerized application?',
-            onClick: () =>
-              sendMessage(
-                'Can you guide me through creating a new deployment in OpenShift for a containerized application?',
-              ),
+      ? samplePrompts?.map(prompt => ({
+          title: prompt.title,
+          message: prompt.message,
+          onClick: () => {
+            sendMessage(prompt.message);
           },
-        ]
+        }))
       : [];
 
   const handleFilter = React.useCallback((value: string) => {

workspaces/lightspeed/plugins/lightspeed/src/const.ts

@@ -1,3 +1,5 @@
+import { SamplePrompts } from './types';
+
 /*
  * Copyright Red Hat, Inc.
  *
@@ -18,3 +20,61 @@ export const TEMP_CONVERSATION_ID = 'temp-conversation-id';
 export const FUNCTION_DISCLAIMER_WITHOUT_QUESTION_VALIDATION = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;
 
 export const FUNCTION_DISCLAIMER = `Red Hat Developer Hub Lightspeed can answer questions on many topics using your configured models. Lightspeed's responses are influenced by the Red Hat Developer Hub documentation but Lightspeed does not have access to your Software Catalog, TechDocs, or Templates etc. Lightspeed uses question (prompt) validation to ensure that conversations remain focused on technical topics relevant to Red Hat Developer Hub, such as Backstage, Kubernetes, and OpenShift. Do not include personal or sensitive information in your input. Interactions with Developer Hub Lightspeed may be reviewed and used to improve products or services.`;
+
+const createPrompt = (title: string, message: string) => {
+  return { title, message };
+};
+
+export const DEFAULT_SAMPLE_PROMPTS: SamplePrompts = [
+  createPrompt(
+    'Get Help On Code Readability',
+    'Can you suggest techniques I can use to make my code more readable and maintainable?',
+  ),
+  createPrompt(
+    'Get Help With Debugging',
+    'My application is throwing an error when trying to connect to the database. Can you help me identify the issue?',
+  ),
+  createPrompt(
+    'Explain a Development Concept',
+    'Can you explain how microservices architecture works and its advantages over a monolithic design?',
+  ),
+  createPrompt(
+    'Suggest Code Optimizations',
+    'Can you suggest common ways to optimize code to achieve better performance?',
+  ),
+  createPrompt(
+    'Documentation Summary',
+    'Can you summarize the documentation for implementing OAuth 2.0 authentication in a web app?',
+  ),
+  createPrompt(
+    'Workflows With Git',
+    'I want to make changes to code on another branch without loosing my existing work. What is the procedure to do this using Git?',
+  ),
+  createPrompt(
+    'Suggest Testing Strategies',
+    'Can you recommend some common testing strategies that will make my application robust and error-free?',
+  ),
+  createPrompt(
+    'Demystify Sorting Algorithms',
+    'Can you explain the difference between a quicksort and a mergesort algorithm, and when to use each?',
+  ),
+  createPrompt(
+    'Understand Event-Driven Architecture',
+    'Can you explain what event-driven architecture is and when it’s beneficial to use it in software development?',
+  ),
+];
+
+export const RHDH_SAMPLE_PROMPTS: SamplePrompts = [
+  createPrompt(
+    'Deploy With Tekton',
+    'Can you help me automate the deployment of my application using Tekton pipelines?',
+  ),
+  createPrompt(
+    'Create An OpenShift Deployment',
+    'Can you guide me through creating a new deployment in OpenShift for a containerized application?',
+  ),
+  createPrompt(
+    'Getting Started with Backstage',
+    'Can you guide me through the first steps to start using Backstage as a developer, like exploring the Software Catalog and adding my service?',
+  ),
+];

workspaces/lightspeed/plugins/lightspeed/src/hooks/__tests__/useWelcomePrompts.test.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ConfigApi, useApi } from '@backstage/core-plugin-api';
+
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useWelcomePrompts } from '../useWelcomePrompts';
+
+jest.mock('@backstage/core-plugin-api', () => ({
+  useApi: jest.fn(),
+}));
+
+describe('useWelcomePrompts', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useApi as jest.Mock).mockReturnValue({
+      getOptionalConfigArray: jest.fn(),
+      getOptionalBoolean: jest.fn().mockReturnValue(false),
+    });
+  });
+
+  it('should return welcome prompts from user prompts', async () => {
+    const getMockString = (prompt: { title: string; message: string }) =>
+      ({
+        getString: jest.fn().mockImplementation(key => {
+          return prompt[key as keyof typeof prompt];
+        }),
+      }) as unknown as ConfigApi;
+
+    const userPrompts = [
+      { title: 'User Prompt 1', message: 'Message 1' },
+      { title: 'User Prompt 2', message: 'Message 2' },
+      { title: 'User Prompt 3', message: 'Message 3' },
+    ];
+
+    (useApi as jest.Mock).mockReturnValue({
+      getOptionalBoolean: jest.fn().mockReturnValue(true),
+      getOptionalConfigArray: jest
+        .fn()
+        .mockReturnValue(userPrompts.map(getMockString)),
+    });
+    const { result } = renderHook(() => useWelcomePrompts());
+    await waitFor(() => {
+      expect(result.current).toBeDefined();
+      expect(result.current.length).toBe(3);
+      const userPromptsTitles = userPrompts.map(p => p.title);
+      const [prompt1, prompt2, prompt3] = result.current;
+
+      expect(userPromptsTitles).toContain(prompt1.title);
+      expect(userPromptsTitles).toContain(prompt2.title);
+      expect(userPromptsTitles).toContain(prompt3.title);
+    });
+  });
+
+  it('should return welcome prompts from default prompts', async () => {
+    const { result } = renderHook(() => useWelcomePrompts());
+    await waitFor(() => {
+      expect(result.current).toBeDefined();
+      expect(result.current.length).toBe(3);
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+
+import { ConfigApi, configApiRef, useApi } from '@backstage/core-plugin-api';
+
+import { DEFAULT_SAMPLE_PROMPTS, RHDH_SAMPLE_PROMPTS } from '../const';
+import { SamplePrompts } from '../types';
+import { getRandomSamplePrompts } from '../utils/prompt-utils';
+
+export const useWelcomePrompts = (): SamplePrompts => {
+  const configApi: ConfigApi = useApi(configApiRef);
+
+  return React.useMemo(() => {
+    const questionValidationEnabled =
+      configApi.getOptionalBoolean('lightspeed.questionValidation') ?? true;
+
+    const DEFAULT_PROMPTS = questionValidationEnabled
+      ? RHDH_SAMPLE_PROMPTS
+      : [...DEFAULT_SAMPLE_PROMPTS, ...RHDH_SAMPLE_PROMPTS];
+
+    const samplePrompts: SamplePrompts = (
+      configApi?.getOptionalConfigArray('lightspeed.prompts') ?? []
+    ).map(config => ({
+      title: config.getString('title') ?? '',
+      message: config.getString('message') ?? '',
+    }));
+    return getRandomSamplePrompts(samplePrompts, DEFAULT_PROMPTS);
+  }, [configApi]);
+};

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

@@ -69,3 +69,8 @@ export type Attachment = {
 };
 
 export type ConversationList = ConversationSummary[];
+
+export type SamplePrompts = {
+  title: string;
+  message: string;
+}[];

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

@@ -0,0 +1,68 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { SamplePrompts } from '../../types';
+import { getRandomSamplePrompts } from '../prompt-utils';
+
+describe('getRandomSamplePrompts', () => {
+  it('should return empty array from default prompts and userPrompts is undefined', () => {
+    const result = getRandomSamplePrompts(undefined, undefined);
+    expect(result.length).toBe(0);
+  });
+
+  it('should return empty array from default prompts and userPrompts length is equal to 0', () => {
+    const userPrompts: SamplePrompts = [];
+    const defaultPrompts: SamplePrompts = [];
+
+    const result = getRandomSamplePrompts(userPrompts, defaultPrompts);
+    expect(result.length).toBe(0);
+  });
+
+  it('should return 3 random prompts from userPrompts if userPrompts length is greater than or equal to 3', () => {
+    const userPrompts: SamplePrompts = [
+      { title: 'Prompt 1', message: 'Message 1' },
+      { title: 'Prompt 2', message: 'Message 2' },
+      { title: 'Prompt 3', message: 'Message 3' },
+      { title: 'Prompt 4', message: 'Message 4' },
+    ];
+    const defaultPrompts: SamplePrompts = [
+      { title: 'Default Prompt 1', message: 'Default Message 1' },
+      { title: 'Default Prompt 2', message: 'Default Message 2' },
+    ];
+
+    const result = getRandomSamplePrompts(userPrompts, defaultPrompts, 3);
+    expect(result.length).toBe(3);
+    const [prompt1, prompt2, prompt3] = result;
+    const userPromptsTitles = userPrompts.map(prompt => prompt.title);
+    expect(userPromptsTitles).toContain(prompt1.title);
+    expect(userPromptsTitles).toContain(prompt2.title);
+    expect(userPromptsTitles).toContain(prompt3.title);
+  });
+
+  it('should return 2 random prompts from default prompts if userPrompts length is equal to 0', () => {
+    const userPrompts: SamplePrompts = [];
+    const defaultPrompts: SamplePrompts = [
+      { title: 'Default Prompt 1', message: 'Default Message 1' },
+      { title: 'Default Prompt 2', message: 'Default Message 2' },
+    ];
+
+    const result = getRandomSamplePrompts(userPrompts, defaultPrompts);
+    expect(result.length).toBe(2);
+    const [prompt1, prompt2] = result;
+    const defaultPromptsTitles = defaultPrompts.map(prompt => prompt.title);
+    expect(defaultPromptsTitles).toContain(prompt1.title);
+    expect(defaultPromptsTitles).toContain(prompt2.title);
+  });
+});