MGMT-22746: Add chatbot app (#3350)

* Add chatbot app

* Update deps

* Add README

* Address review comments

Author: rawagner

.eslintrc.json

@@ -6,6 +6,7 @@
     "node": true
   },
   "parserOptions": {
+    "ecmaVersion": "latest",
     "project": [
       "apps/*/tsconfig.eslint.json",
       "libs/*/tsconfig.eslint.json",
@@ -21,6 +22,9 @@
   "ignorePatterns": [
     "apps/*/build",
     "libs/*/build",
-    "tools/*/build"
+    "tools/*/build",
+    "apps/*/dist",
+    "libs/*/dist",
+    "tools/*/dist"
   ]
 }

.gitignore

@@ -38,8 +38,3 @@ package-lock.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-
-# Ignored apps
-apps/*
-!apps/assisted-ui
-!apps/assisted-disconnected-ui

apps/assisted-chatbot/.eslintrc.cjs

@@ -0,0 +1,39 @@
+/** @type {import('eslint').ESLint.ConfigData} */
+module.exports = {
+  overrides: [
+    {
+      files: ['./vite.config.ts'],
+      extends: ['@openshift-assisted/eslint-config'],
+      env: {
+        browser: false,
+      },
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['./src/**/*.{ts,tsx}'],
+      extends: ['@openshift-assisted/eslint-config', 'plugin:react/jsx-runtime'],
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: 'react-i18next',
+                importNames: ['useTranslation'],
+                message: 'Import `useTranslation` from `@openshift-assisted/ui-lib/common` instead',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};

apps/assisted-chatbot/README.md

@@ -0,0 +1,19 @@
+# Assisted Installer Chatbot UI
+
+This is a federated module for
+[Astro Virtual Assistant UI](https://github.com/RedHatInsights/astro-virtual-assistant-frontend)
+
+## Run the project
+
+1. Run the Astro
+   1. For now you need to use my fork which can load this new assisted chatbot module - clone the
+      repo
+      [Astro fork](https://github.com/rawagner/astro-virtual-assistant-frontend/tree/chatbot_app)
+   2. run `npm install`
+   3. start the Astro `npm run start`
+2. Run the Assisted Chatbot
+
+   1. run `yarn start:assisted_chatbot:static`
+
+3. Open [c.rh.c](https://prod.foo.redhat.com:1337/). The chatbot will appear on the bottom left
+   corner. You should be able to choose Assisted Installer chatbot

apps/assisted-chatbot/deploy/frontend.yaml

@@ -0,0 +1,34 @@
+---
+apiVersion: v1
+kind: Template
+metadata:
+  name: assisted-installer-ui-chatbot
+objects:
+  - apiVersion: cloud.redhat.com/v1alpha1
+    kind: Frontend
+    metadata:
+      name: assisted-installer-ui-chatbot
+    spec:
+      feoConfigEnabled: true
+      envName: ${ENV_NAME}
+      title: Assisted Installer UI Chatbot
+      deploymentRepo: https://github.com/openshift-assisted/assisted-installer-ui
+      frontend:
+        paths:
+          - /apps/assisted-installer-ui-chatbot
+      API:
+        versions:
+          - v1
+      image: ${IMAGE}:${IMAGE_TAG}
+      module:
+        manifestLocation: '/apps/assisted-installer-ui-chatbot/fed-mods.json'
+        moduleConfig:
+          ssoScopes:
+            - rhfull
+parameters:
+  - name: ENV_NAME
+    required: true
+  - name: IMAGE_TAG
+    required: true
+  - name: IMAGE
+    value: quay.io/app-sre/assisted-installer-ui-chatbot

apps/assisted-chatbot/fec.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const { insights } = require('./package.json');
+const moduleName = insights.appname.replace(/-(\w)/g, (_, match) => match.toUpperCase());
+
+module.exports = {
+  appUrl: '/openshift/assisted-installer-ui-chatbot',
+  appEntry: path.resolve(__dirname, './src/AppEntry.tsx'),
+  debug: true,
+  useProxy: true,
+  proxyVerbose: true,
+  stripAllPfStyles: true,
+  sassPrefix: `.${moduleName}`,
+  interceptChromeConfig: false,
+  plugins: [],
+  hotReload: process.env.HOT === 'true',
+  nodeModulesDirectories: '../../node_modules',
+  moduleFederation: {
+    exposes: {
+      './ChatbotMessageEntry': path.resolve(
+        __dirname,
+        './src/components/ChatbotMessageEntry/ChatbotMessageEntry.tsx',
+      ),
+      './useAsyncChatbot': path.resolve(__dirname, './src/hooks/useAsyncChatbot.tsx'),
+    },
+  },
+  routes: {
+    '/apps/assisted-installer-ui-chatbot': { host: 'http://localhost:8003' },
+  },
+};

apps/assisted-chatbot/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@openshift-assisted/assisted-installer-ui-chatbot",
+  "version": "1.0.0",
+  "main": "index.js",
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
+  "scripts": {
+    "build": "fec build",
+    "check_types": "yarn run -T tsc --noEmit",
+    "clean": "yarn run -T rimraf node_modules dist .cache",
+    "patch:hosts": "fec patch-etc-hosts",
+    "format": "yarn run -T prettier --cache --check . \"!dist\"",
+    "fix-code-style": "yarn lint --fix && yarn format --write",
+    "lint": "yarn run -T eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache .",
+    "start": "HOT=true fec dev --clouddotEnv=prod --uiEnv=stable",
+    "start:static": "fec static --port=7003 --config ../../node_modules/@redhat-cloud-services/frontend-components-config/bin/prod.webpack.config.js",
+    "static": "fec static",
+    "postinstall": "ts-patch install"
+  },
+  "dependencies": {
+    "@openshift-assisted/chatbot": "workspace:*",
+    "@patternfly/chatbot": "6.4.1",
+    "@patternfly/patternfly": "6.4.0",
+    "@patternfly/react-core": "6.4.0",
+    "@patternfly/react-icons": "6.4.0",
+    "@patternfly/react-styles": "6.4.0",
+    "@patternfly/react-tokens": "6.4.0",
+    "@redhat-cloud-services/ai-client-common": "^0.13.0",
+    "@redhat-cloud-services/ai-client-state": "^0.15.0",
+    "@redhat-cloud-services/frontend-components": "^7.0.0",
+    "axios": ">=0.22.0 <2.0.0",
+    "i18next": "^20.4.0",
+    "parse-url": "^9.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^11.11.4",
+    "react-router-dom-v5-compat": "^6.21.2"
+  },
+  "devDependencies": {
+    "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.3",
+    "@redhat-cloud-services/frontend-components-config": "^6.0.17",
+    "@redhat-cloud-services/tsc-transform-imports": "^1.0.4",
+    "@tsconfig/vite-react": "^1.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "ts-patch": "^3.0.2",
+    "typescript": "^5.2.2"
+  },
+  "insights": {
+    "appname": "assisted-installer-ui-chatbot"
+  }
+}

apps/assisted-chatbot/src/AppEntry.tsx

@@ -0,0 +1,9 @@
+// Minimal entry point for fec dev server
+// This module only exposes federated components, no standalone app
+import React from 'react';
+
+const AppEntry: React.FC = () => {
+  return null;
+};
+
+export default AppEntry;

apps/assisted-chatbot/src/assets/Ask_Red_Hat_OFFICIAL-whitebackground.svg

@@ -0,0 +1,3 @@
+.ai-async-message-skeleton--slow {
+  --pf-v6-c-skeleton--after--AnimationDuration: 3.6s;
+}