Epic: Jovu Phase 2

.vscode/settings.json

@@ -22,6 +22,7 @@
     "Formik",
     "IBLOCK",
     "isequalwith",
+    "jovu",
     "kafkajs",
     "linkcode",
     "logform",

packages/amplication-client/src/Assistant/Assistant.scss

@@ -5,6 +5,7 @@ $assistant-width: 350px;
 $assistant-handle-width: 24px;
 $assistant-handle-top: 150px;
 $assistant-handle-margin: 40px;
+$avatar-size: 30px;
 
 #root {
   // --assistant-background: var(--theme-gradient);
@@ -199,5 +200,11 @@ $assistant-handle-margin: 40px;
     justify-content: flex-start;
     font-weight: semi-bold;
     color: var(--assistant-role-color);
+
+    .user-avatar__initials {
+      width: $avatar-size;
+      height: $avatar-size;
+      font-size: var(--h3-font-size);
+    }
   }
 }

packages/amplication-client/src/Assistant/Assistant.tsx

@@ -17,6 +17,7 @@ import AssistantMessage from "./AssistantMessage";
 import classNames from "classnames";
 import { useAppContext } from "../context/appContext";
 import { Link } from "react-router-dom";
+import jovu from "../assets/jovu.svg";
 type SendMessageType = models.SendAssistantMessageInput;
 
 const INITIAL_VALUES: SendMessageType = {
@@ -100,7 +101,13 @@ const Assistant = () => {
         )}
       >
         <div className={`${CLASS_NAME}__header`}>
-          <Icon icon="ai" color={EnumTextColor.White} size="large" />
+          <img
+            src={jovu}
+            alt="jovu"
+            width={30}
+            height={30}
+            style={{ background: "white", borderRadius: "50%" }}
+          />
           <Text className={`${CLASS_NAME}__title`} textStyle={EnumTextStyle.H4}>
             Jovu (Beta)
           </Text>

packages/amplication-client/src/Assistant/AssistantMessage.tsx

@@ -1,8 +1,8 @@
 import {
   Button,
   EnumButtonStyle,
   EnumTextColor,
   Icon,
 } from "@amplication/ui/design-system";
 import ReactMarkdown from "react-markdown";
 import UserBadge from "../Components/UserBadge";
@@ -10,6 +10,8 @@
 import { AssistantMessageWithOptions } from "./hooks/useAssistant";
 import { Link } from "react-router-dom";
 
+import jovu from "../assets/jovu.svg";
+
 const CLASS_NAME = "assistant";
 
 type Props = {
@@ -28,7 +30,14 @@
           </>
         ) : (
           <>
-            <Icon icon="ai" color={EnumTextColor.ThemeTurquoise} size="large" />
+            <img
+              src={jovu}
+              alt="jovu"
+              width={30}
+              height={30}
+              style={{ background: "white", borderRadius: "50%" }}
+            />
+            {/* <Icon icon="ai" color={EnumTextColor.ThemeTurquoise} size="large" /> */}
             Jovu
           </>
         )}

packages/amplication-client/src/Workspaces/WorkspaceForm.tsx

@@ -129,14 +129,16 @@ function WorkspaceForm() {
                         gap={EnumGapSize.Small}
                       >
                         <div>
-                          Turn on this option to enable advanced features using
-                          artificial intelligence. These include personalized
+                          Manage Amplication AI-powered features and
+                          enable/disable advanced features using artificial
+                          intelligence. These include personalized
                           recommendations, and automation of tasks.
                         </div>
                         <div>
                           Note: This may involve processing your data with AI
-                          technologies. When disabled, we will never share your
-                          data with any AI or large language model services.
+                          technologies while keeping your data secure. When
+                          disabled, we will never share your data with any AI or
+                          large language model services.
                         </div>
                       </FlexItem>
                     </Text>

packages/amplication-server/.env

@@ -81,3 +81,4 @@ CHAT_OPENAI_KEY="CHAT_OPENAI_KEY"
 CHAT_ASSISTANT_ID="CHAT_ASSISTANT_ID"
 FEATURE_AI_ASSISTANT_ENABLED=true
 
+PLUGIN_API_URL="https://plugin-api.amplication.com/graphql"

packages/amplication-server/src/core/assistant/assistant.module.ts

@@ -7,6 +7,8 @@ import { ResourceModule } from "../resource/resource.module";
 import { ModuleModule } from "../module/module.module";
 import { ProjectModule } from "../project/project.module";
 import { GraphqlSubscriptionPubSubKafkaService } from "./graphqlSubscriptionPubSubKafka.service";
+import { PluginCatalogModule } from "../pluginCatalog/pluginCatalog.module";
+import { PluginInstallationModule } from "../pluginInstallation/pluginInstallation.module";
 
 @Module({
   imports: [
@@ -15,6 +17,8 @@ import { GraphqlSubscriptionPubSubKafkaService } from "./graphqlSubscriptionPubS
     ResourceModule,
     ModuleModule,
     ProjectModule,
+    PluginCatalogModule,
+    PluginInstallationModule,
   ],
   providers: [
     AssistantService,

packages/amplication-server/src/core/assistant/assistant.service.ts

@@ -21,6 +21,9 @@ import { AssistantStream } from "openai/lib/AssistantStream";
 import { AssistantMessageDelta } from "./dto/AssistantMessageDelta";
 import { AmplicationError } from "../../errors/AmplicationError";
 import { GraphqlSubscriptionPubSubKafkaService } from "./graphqlSubscriptionPubSubKafka.service";
+import { PluginCatalogService } from "../pluginCatalog/pluginCatalog.service";
+import { omit } from "lodash";
+import { PluginInstallationService } from "../pluginInstallation/pluginInstallation.service";
 
 enum EnumAssistantFunctions {
   CreateEntity = "createEntity",
@@ -30,10 +33,14 @@ enum EnumAssistantFunctions {
   CreateProject = "createProject",
   CommitProjectPendingChanges = "commitProjectPendingChanges",
   GetProjectPendingChanges = "getProjectPendingChanges",
+  GetPlugins = "getPlugins",
+  InstallPlugins = "installPlugins",
 }
 
 const MESSAGE_UPDATED_EVENT = "assistantMessageUpdated";
 
+export const PLUGIN_LATEST_VERSION_TAG = "latest";
+
 type MessageLoggerContext = {
   messageContext: {
     workspaceId: string;
@@ -62,6 +69,8 @@ export class AssistantService {
     private readonly moduleService: ModuleService,
     private readonly projectService: ProjectService,
     private readonly graphqlSubscriptionKafkaService: GraphqlSubscriptionPubSubKafkaService,
+    private readonly pluginCatalogService: PluginCatalogService,
+    private readonly pluginInstallationService: PluginInstallationService,
 
     configService: ConfigService
   ) {
@@ -94,7 +103,7 @@ export class AssistantService {
     snapshot: string,
     completed: boolean
   ) => {
-    this.logger.info("Chat: Message updated");
+    //this.logger.debug("Chat: Message updated");
     const message: AssistantMessageDelta = {
       id: "messageId",
       threadId,
@@ -665,5 +674,58 @@ export class AssistantService {
             : "Entity",
       }));
     },
+    getPlugins: async (args: undefined, context: AssistantContext) => {
+      const plugins = (await this.pluginCatalogService.getPlugins()).map(
+        (plugin) => omit(plugin, ["__typename"])
+      );
+      this.logger.debug(
+        `Chat: Plugins: ${JSON.stringify(plugins)}`,
+        null,
+        context
+      );
+      return plugins;
+    },
+    installPlugins: async (
+      args: { pluginIds: string[]; serviceId: string },
+      context: AssistantContext
+    ) => {
+      //iterate over the pluginIds and install each plugin synchronously
+      //to support synchronous installation of multiple plugins we need first to fix the plugins order code in the pluginInstallation Service
+      const installations = [];
+      for (const pluginId of args.pluginIds) {
+        const plugin =
+          await this.pluginCatalogService.getPluginWithLatestVersion(pluginId);
+        const pluginVersion = plugin.versions[0];
+
+        const { version, settings, configurations } = pluginVersion;
+
+        const installation = await this.pluginInstallationService.create(
+          {
+            data: {
+              displayName: plugin.name,
+              pluginId: pluginId,
+              enabled: true,
+              npm: plugin.npm,
+              version: version,
+              settings: settings,
+              configurations: configurations,
+              resource: { connect: { id: args.serviceId } },
+            },
+          },
+          context.user
+        );
+
+        installations.push({
+          result: installation,
+          link: `${this.clientHost}/${context.workspaceId}/${context.projectId}/${args.serviceId}/plugins/installed/${installation.id}`,
+        });
+      }
+
+      return {
+        installations,
+        pluginsCatalogLink: `${this.clientHost}/${context.workspaceId}/${context.projectId}/plugins/catalog`,
+        allInstalledPluginsLink: `${this.clientHost}/${context.workspaceId}/${context.projectId}/plugins/installed`,
+      };
+    },
   };
 }

packages/amplication-server/src/core/pluginCatalog/dto/PluginCatalogItem.ts

@@ -0,0 +1,17 @@
+import { PluginCatalogItemVersion } from "./PluginCatalogItemVersion";
+
+export class PluginCatalogItem {
+  id: string;
+  pluginId: string;
+  name: string;
+  description: string;
+  repo: string;
+  npm: string;
+  icon: string;
+  github: string;
+  website: string;
+  categories: string[];
+  type: string;
+  taggedVersions: { [tag: string]: string };
+  versions: PluginCatalogItemVersion[];
+}

packages/amplication-server/src/core/pluginCatalog/dto/PluginCatalogItemVersion.ts

@@ -0,0 +1,10 @@
+import { JsonValue } from "type-fest";
+
+export class PluginCatalogItemVersion {
+  version: string;
+  isLatest: boolean;
+  settings: JsonValue;
+  configurations: JsonValue;
+  id: string;
+  pluginId: string;
+}

packages/amplication-server/src/core/pluginCatalog/pluginCatalog.module.ts

@@ -0,0 +1,9 @@
+import { Module } from "@nestjs/common";
+import { PluginCatalogService } from "./pluginCatalog.service";
+
+@Module({
+  imports: [],
+  providers: [PluginCatalogService],
+  exports: [PluginCatalogService],
+})
+export class PluginCatalogModule {}

packages/amplication-server/src/core/pluginCatalog/pluginCatalog.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from "@nestjs/common";
+import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+import { ConfigService } from "@nestjs/config";
+import { Env } from "../../env";
+import { PluginCatalogItem } from "./dto/PluginCatalogItem";
+
+@Injectable()
+export class PluginCatalogService {
+  private client: ApolloClient<any>;
+
+  constructor(configService: ConfigService) {
+    this.client = new ApolloClient({
+      uri: configService.get<string>(Env.PLUGIN_API_URL),
+      cache: new InMemoryCache(),
+    });
+  }
+
+  async getPluginWithLatestVersion(
+    pluginId: string
+  ): Promise<PluginCatalogItem> {
+    const query = gql`
+      query GetPlugin($where: PluginWhereInput) {
+        plugins(where: $where) {
+          pluginId
+          name
+          icon
+          description
+          taggedVersions
+          npm
+          github
+          categories
+          versions(
+            where: { deprecated: { equals: null } }
+            orderBy: { createdAt: Desc }
+          ) {
+            id
+            pluginId
+            deprecated
+            isLatest
+            version
+            settings
+            configurations
+          }
+        }
+      }
+    `;
+
+    try {
+      const { data } = await this.client.query<{
+        plugins: PluginCatalogItem[];
+      }>({
+        query,
+        variables: {
+          where: {
+            categories: {}, //this is required to workaround an issue in the API
+            pluginId: {
+              equals: pluginId,
+            },
+          },
+        },
+      });
+      const plugin =
+        data.plugins && data.plugins.length ? data.plugins[0] : undefined;
+      if (plugin) {
+        const versions = plugin.versions.filter((version) => version.isLatest);
+        return {
+          ...plugin,
+          versions,
+        };
+      }
+      return undefined;
+    } catch (error) {
+      throw new Error(`Failed to fetch plugin with ID ${pluginId}: ${error}`);
+    }
+  }
+
+  async getPlugins(): Promise<PluginCatalogItem[]> {
+    const query = gql`
+      query GetPlugins {
+        plugins {
+          pluginId
+          name
+          icon
+          description
+          npm
+          github
+          categories
+        }
+      }
+    `;
+
+    try {
+      const { data } = await this.client.query<{
+        plugins: PluginCatalogItem[];
+      }>({
+        query,
+      });
+      return data.plugins;
+    } catch (error) {
+      throw new Error(`Failed to fetch plugins: ${error}`);
+    }
+  }
+}

packages/amplication-server/src/env.ts

@@ -43,4 +43,5 @@ export class Env {
   static readonly CHAT_OPENAI_KEY = "CHAT_OPENAI_KEY";
   static readonly CHAT_ASSISTANT_ID = "CHAT_ASSISTANT_ID";
   static readonly FEATURE_AI_ASSISTANT_ENABLED = "FEATURE_AI_ASSISTANT_ENABLED";
+  static readonly PLUGIN_API_URL = "PLUGIN_API_URL";
 }