feat(lightspeed): add a new lightspeed plugin with basic implementation of chat

Author: rohitkrai03

.github/CODEOWNERS

@@ -38,6 +38,7 @@ yarn.lock                    @janus-idp/maintainers-plugins
 /plugins/analytics-module-matomo            @janus-idp/maintainers-plugins @janus-idp/devex-uxe
 /plugins/kiali                              @janus-idp/maintainers-plugins @janus-idp/kiali
 /plugins/kiali-backend                      @janus-idp/maintainers-plugins @janus-idp/kiali
+/plugins/lightspeed                         @janus-idp/maintainers-plugins @rohitkrai03
 /plugins/quay                               @janus-idp/rhtap
 /plugins/tekton                             @janus-idp/rhtap
 /plugins/argocd                             @janus-idp/rhtap

plugins/lightspeed/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/lightspeed/README.md

@@ -0,0 +1,61 @@
+# Lightspeed plugin for Backstage
+
+The Lightspeed plugin enables you to interact with any LLM server running a model with OpenAI's API compatibility.
+
+## For administrators
+
+### Installation
+
+1. Install the Topology plugin using the following command:
+
+   ```console
+   yarn workspace app add @janus-idp/backstage-plugin-lightspeed
+   ```
+
+### Configuration
+
+1. Set the proxy to the desired LLM server in the `app-config.yaml` file as follows:
+
+   ```yaml title="app-config.yaml"
+   proxy:
+     '/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`:
+
+   ```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`:
+
+   ```tsx title="packages/app/src/components/Root/Root.tsx"
+   /* highlight-add-next-line */ import { LightspeedIcon } from '@janus-idp/backstage-plugin-lightspeed';
+
+   <SidebarItem
+     icon={LightspeedIcon as IconComponent}
+     to="lightspeed"
+     text="Lightspeed"
+   />;
+   ```
+
+## For users
+
+### Using the Lightspeed plugin in Backstage
+
+Lightspeed is a front-end plugin that enables you to interact with any LLM server running a model with OpenAI's API compatibility.
+
+#### Prerequisites
+
+- Your Backstage application is installed and running.
+- You have installed the Lightspeed plugin. For installation process, see [Installation](#installation).
+
+#### Procedure
+
+1. Open your Backstage application and select a Lightspeed nav item from the **Navigation**.
+2. Ask you questions to the Lightspeed chatbot.

plugins/lightspeed/app-config.janus-idp.yaml

@@ -0,0 +1,14 @@
+dynamicPlugins:
+  frontend:
+    janus-idp.backstage-plugin-lightspeed:
+      appIcons:
+        - name: LightspeedIcon
+          module: LightspeedPlugin
+          importName: LightspeedIcon
+      dynamicRoutes:
+        - path: /lightspeed
+          importName: LightspeedPage
+          module: LightspeedPlugin
+          menuItem:
+            icon: LightspeedIcon
+            text: Lightspeed

plugins/lightspeed/config.d.ts

@@ -0,0 +1 @@
+export interface Config {}

plugins/lightspeed/dev/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { createDevApp } from '@backstage/dev-utils';
+
+import { LightspeedPage, lightspeedPlugin } from '../src/plugin';
+
+createDevApp()
+  .registerPlugin(lightspeedPlugin)
+  .addPage({
+    element: <LightspeedPage />,
+    title: 'Lightspeed Page',
+    path: '/lightspeed',
+  })
+  .render();

plugins/lightspeed/images/logo.svg

@@ -0,0 +1,78 @@
+{
+  "name": "@janus-idp/backstage-plugin-lightspeed",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "export-dynamic": "janus-cli package export-dynamic-plugin",
+    "lint": "backstage-cli package lint",
+    "postpack": "backstage-cli package postpack",
+    "postversion": "yarn run export-dynamic",
+    "prepack": "backstage-cli package prepack",
+    "start": "backstage-cli package start",
+    "test": "backstage-cli package test --passWithNoTests --coverage",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.14.4",
+    "@backstage/core-plugin-api": "^1.9.2",
+    "@backstage/theme": "^0.5.5",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/icons-material": "^5.15.18",
+    "openai": "^4.52.6",
+    "react-use": "^17.2.4"
+  },
+  "peerDependencies": {
+    "react": "16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "0.26.6",
+    "@backstage/core-app-api": "1.12.5",
+    "@backstage/dev-utils": "1.0.32",
+    "@backstage/test-utils": "1.5.5",
+    "@janus-idp/cli": "1.11.1",
+    "@testing-library/jest-dom": "6.0.0",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.0.0",
+    "msw": "1.0.0"
+  },
+  "files": [
+    "dist",
+    "config.d.ts",
+    "dist-scalprum",
+    "app-config.janus-idp.yaml"
+  ],
+  "scalprum": {
+    "name": "janus-idp.backstage-plugin-lightspeed",
+    "exposedModules": {
+      "PluginRoot": "./src/index.ts"
+    }
+  },
+  "configSchema": "config.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/janus-idp/backstage-plugins",
+    "directory": "plugins/lightspeed"
+  },
+  "keywords": [
+    "backstage",
+    "plugin"
+  ],
+  "homepage": "https://janus-idp.io/",
+  "bugs": "https://github.com/janus-idp/backstage-plugins/issues"
+}

plugins/lightspeed/package.json

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import logo from '../../images/logo.svg';
+
+export const LightspeedIcon = () => {
+  return (
+    <img src={logo as any} alt="lightspeed icon" style={{ height: '25px' }} />
+  );
+};

plugins/lightspeed/src/components/LightspeedIcon.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import TextField from '@material-ui/core/TextField';
+import SendIcon from '@material-ui/icons/Send';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapForm: {
+      display: 'flex',
+      justifyContent: 'center',
+      width: '98%',
+      margin: `${theme.spacing(0)} auto`,
+    },
+    wrapText: {
+      width: '100%',
+    },
+    button: {
+      margin: theme.spacing(0),
+    },
+  }),
+);
+
+type LightspeedInputProps = {
+  onSubmit: (prompt: string) => void;
+};
+
+export const LightspeedInput: React.FC<LightspeedInputProps> = ({
+  onSubmit,
+}) => {
+  const classes = useStyles();
+
+  const [prompt, setPrompt] = React.useState('');
+
+  const handleInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setPrompt(e.target.value);
+    },
+    [],
+  );
+
+  const handleSubmit = React.useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      onSubmit(prompt);
+      setPrompt('');
+    },
+    [onSubmit, prompt],
+  );
+
+  return (
+    <form
+      className={classes.wrapForm}
+      noValidate
+      autoComplete="off"
+      onSubmit={handleSubmit}
+    >
+      <TextField
+        id="standard-text"
+        label="Ask Lightspeed"
+        className={classes.wrapText}
+        value={prompt}
+        onChange={handleInputChange}
+      />
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        className={classes.button}
+        onSubmit={handleSubmit}
+      >
+        <SendIcon />
+      </Button>
+    </form>
+  );
+};