Epic: Jovu Phase 2

.vscode/settings.json

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

libs/ui/design-system/src/lib/components/TextInput/TextInput.scss

@@ -44,6 +44,10 @@
     resize: none;
   }
 
+  textarea.text-input__textarea--small {
+    height: var(--textarea-height-small);
+  }
+
   &--has-error {
     input,
     textarea {

libs/ui/design-system/src/lib/components/TextInput/TextInput.tsx

@@ -12,6 +12,7 @@ export type Props = React.HTMLProps<HTMLTextAreaElement | HTMLInputElement> & {
   hideLabel?: boolean;
   hasError?: boolean;
   textarea?: boolean;
+  textareaSize?: "small" | "large";
   labelType?: LabelTypes;
   inputToolTip?: InputToolTipProps | undefined;
 };
@@ -28,6 +29,7 @@ export function TextInput({
   textarea,
   labelType,
   inputToolTip,
+  textareaSize = "large",
   ...rest
 }: Props) {
   const key = rest.key || rest.autoFocus?.toString();
@@ -48,6 +50,7 @@ export function TextInput({
             <textarea
               {...rest}
               ref={inputRef as React.Ref<HTMLTextAreaElement>}
+              className={`${CLASS_NAME}__textarea--${textareaSize}`}
             />
           ) : (
             <input

libs/ui/design-system/src/lib/components/VerticalNavigation/VerticalNavigationItem.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from "react";
-import { NavLink } from "react-router-dom";
+import React, { useCallback, useEffect } from "react";
+import { NavLink, useRouteMatch } from "react-router-dom";
 import { Icon } from "../Icon/Icon";
 import classNames from "classnames";
 import { VerticalNavigation } from "./VerticalNavigation";
@@ -30,6 +30,10 @@ export function VerticalNavigationItem({
 }: Props) {
   const [expanded, setExpanded] = React.useState(false);
 
+  const match = useRouteMatch({
+    path: to,
+  });
+
   const handleExpand = useCallback(
     (e: any) => {
       e.preventDefault();
@@ -40,6 +44,12 @@ export function VerticalNavigationItem({
     [onExpand, setExpanded]
   );
 
+  useEffect(() => {
+    if (match) {
+      setExpanded(true);
+    }
+  }, [match?.path]);
+
   return (
     <>
       <NavLink

libs/util/billing-types/src/lib/billing-feature.types.ts

@@ -13,6 +13,7 @@ export enum BillingFeature {
   GitLab = "feature-gitlab",
   IgnoreValidationCodeGeneration = "feature-ignore-validation-code-generation",
   ImportDBSchema = "feature-import-db-schema",
+  JovuRequests = "feature-jovu-requests",
   Notification = "feature-notifications",
   Projects = "feature-projects",
   RedesignArchitecture = "feature-redesign-architecture",

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);
@@ -75,6 +76,12 @@ $assistant-handle-margin: 40px;
     }
   }
 
+  &__limit {
+    padding: var(--default-spacing);
+    flex: 1;
+    text-align: center;
+  }
+
   &__header {
     display: flex;
     flex-direction: row;
@@ -109,6 +116,7 @@ $assistant-handle-margin: 40px;
     gap: var(--default-spacing);
     overflow-y: auto;
     padding: var(--default-spacing);
+    padding-left: 0;
     font-size: var(--tag-font-size);
   }
 
@@ -199,5 +207,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

@@ -1,6 +1,12 @@
 import {
+  EnumContentAlign,
+  EnumFlexDirection,
+  EnumGapSize,
+  EnumItemsAlign,
+  EnumTextAlign,
   EnumTextColor,
   EnumTextStyle,
+  FlexItem,
   Icon,
   Text,
   TextField,
@@ -17,6 +23,11 @@ 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";
+import { BillingFeature } from "@amplication/util-billing-types";
+import { useStiggContext } from "@stigg/react-sdk";
+import { GET_CONTACT_US_LINK } from "../Workspaces/queries/workspaceQueries";
+import { useQuery } from "@apollo/client";
 type SendMessageType = models.SendAssistantMessageInput;
 
 const INITIAL_VALUES: SendMessageType = {
@@ -52,6 +63,16 @@ const WIDTH_STATE_SETTINGS: Record<
 const Assistant = () => {
   const { currentWorkspace } = useAppContext();
 
+  const { stigg } = useStiggContext();
+
+  const { hasAccess } = stigg.getMeteredEntitlement({
+    featureId: BillingFeature.JovuRequests,
+  });
+
+  const { data } = useQuery(GET_CONTACT_US_LINK, {
+    variables: { id: currentWorkspace.id },
+  });
+
   const [open, setOpen] = useState(true);
   const [widthState, setWidthState] = useState(WIDTH_STATE_DEFAULT);
 
@@ -65,7 +86,6 @@ const Assistant = () => {
   const {
     sendMessage,
     messages,
-    sendMessageError: error,
     processingMessage: loading,
     streamError,
   } = useAssistant();
@@ -100,7 +120,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>
@@ -133,7 +159,51 @@ const Assistant = () => {
           </Tooltip>
         </div>
 
-        {currentWorkspace?.allowLLMFeatures ? (
+        {!hasAccess ? (
+          <FlexItem
+            direction={EnumFlexDirection.Column}
+            itemsAlign={EnumItemsAlign.Center}
+            contentAlign={EnumContentAlign.Center}
+            gap={EnumGapSize.Large}
+            className={`${CLASS_NAME}__limit`}
+          >
+            <img
+              src={jovu}
+              alt="jovu"
+              width={50}
+              height={50}
+              style={{ background: "white", borderRadius: "50%" }}
+            />
+            <Text textStyle={EnumTextStyle.H3} textAlign={EnumTextAlign.Center}>
+              You have reached the daily limit of Jovu requests for your plan.
+            </Text>
+            <Text
+              textStyle={EnumTextStyle.Tag}
+              textAlign={EnumTextAlign.Center}
+            >
+              Talk with us to upgrade and discover additional hidden
+              functionalities.
+            </Text>
+            <Text
+              textColor={EnumTextColor.White}
+              textStyle={EnumTextStyle.Tag}
+              textAlign={EnumTextAlign.Center}
+            >
+              <a
+                className={`${CLASS_NAME}__addon-section__contact-us`}
+                href={data?.contactUsLink}
+                target="blank"
+              >
+                <Text
+                  textColor={EnumTextColor.ThemeTurquoise}
+                  textStyle={EnumTextStyle.Tag}
+                >
+                  Talk with us
+                </Text>
+              </a>
+            </Text>
+          </FlexItem>
+        ) : currentWorkspace?.allowLLMFeatures ? (
           <>
             <div className={`${CLASS_NAME}__messages`}>
               {messages.map((message) => (
@@ -145,9 +215,6 @@ const Assistant = () => {
               ))}
 
               <div ref={messagesEndRef} />
-              {error && (
-                <div className={`${CLASS_NAME}__error`}>{error.message}</div>
-              )}
               {streamError && (
                 <div className={`${CLASS_NAME}__error`}>
                   {streamError.message}

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

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

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

@@ -50,18 +50,18 @@ const useAssistant = () => {
 
   const [threadId, setThreadId] = useState<string | null>(null);
 
-  const [
-    sendAssistantMessage,
-    { error: sendMessageError, loading: sendMessageLoading },
-  ] = useMutation<TAssistantThreadData>(SEND_ASSISTANT_MESSAGE, {
-    onCompleted: (data) => {
-      setThreadId(data.sendAssistantMessageWithStream.id);
-      setMessages([
-        ...messages,
-        ...data.sendAssistantMessageWithStream.messages,
-      ]);
-    },
-  });
+  const [sendAssistantMessage] = useMutation<TAssistantThreadData>(
+    SEND_ASSISTANT_MESSAGE,
+    {
+      onCompleted: (data) => {
+        setThreadId(data.sendAssistantMessageWithStream.id);
+        setMessages([
+          ...messages,
+          ...data.sendAssistantMessageWithStream.messages,
+        ]);
+      },
+    }
+  );
 
   const { error: streamError } = useSubscription<TAssistantMessageUpdatedData>(
     ASSISTANT_MESSAGE_UPDATED,
@@ -125,15 +125,29 @@ const useAssistant = () => {
         },
       },
     }).catch((error) => {
-      console.error(error);
+      setMessages([
+        ...messages,
+        {
+          text: "I'm sorry, I had a problem processing your request.",
+          role: models.EnumAssistantMessageRole.Assistant,
+          id: Date.now().toString() + "_",
+          createdAt: "",
+        },
+        {
+          text: error.message,
+          role: models.EnumAssistantMessageRole.Assistant,
+          id: Date.now().toString() + "_",
+          createdAt: "",
+        },
+      ]);
+
+      setProcessingMessage(false);
     });
   };
 
   return {
     sendMessage,
     messages,
-    sendMessageError,
-    sendMessageLoading,
     streamError,
     processingMessage,
   };