UI Improvements to the API Design Assistant

portals/publisher/src/main/webapp/site/public/locales/en.json

@@ -322,6 +322,7 @@
   "Apis.Details.ApiChat.components.CopyToClipboard.copiedText": "Copied",
   "Apis.Details.ApiChat.components.CopyToClipboard.copyText": "Copy to Clipboard",
   "Apis.Details.ApiChat.components.SampleQueryCard.executeButton": "Try It",
+  "Apis.Details.ApiChat.warning.authTokenMissing": "You must provide a token to start using API Design Assistant. To obtain one, follow the steps provided under {apiAiChatDocLink}",
   "Apis.Details.ApiConsole.ApiConsole.title": "Try Out",
   "Apis.Details.ApiConsole.adv.auth.header": "Authorization Header",
   "Apis.Details.ApiConsole.adv.auth.header.value": "Authorization Header Value",
@@ -1785,7 +1786,7 @@
   "Apis.Listing.SampleAPI.SampleAPI.ai.api.create.title": "Create AI/LLM API",
   "Apis.Listing.SampleAPI.SampleAPI.ai.api.import.content": "Create AI/LLM APIs by importing service provider APIs",
   "Apis.Listing.SampleAPI.SampleAPI.create.new": "Let’s get started !",
-  "Apis.Listing.SampleAPI.SampleAPI.create.new.description": "Create an API by yourself or",
+  "Apis.Listing.SampleAPI.SampleAPI.create.new.description": "Choose your option to create an API",
   "Apis.Listing.SampleAPI.SampleAPI.graphql.api": "GraphQL",
   "Apis.Listing.SampleAPI.SampleAPI.graphql.import.sdl.content": "Use an existing schema or endpoint",
   "Apis.Listing.SampleAPI.SampleAPI.graphql.import.sdl.title": "Create GraphQL API",

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/ApiChatBanner.tsx

@@ -91,12 +91,12 @@ const ApiChatBanner: React.FC = () => {
                     <img
                         alt='API Design Assistant'
                         src={`${app.context}/site/public/images/ai/APIchatassistantImageWithColour.svg`}
-                        style={{ width: '300px', height: 'auto' }}
+                        style={{ width: '200px', height: 'auto' }}
                     />
                 </Box>
                 <Box className={classes.tryAiBannerContentWrap}>
                     <Typography sx={{ fontSize: '1.0rem', fontWeight: 'bold' }}>
-                        Turn Your Ideas Into Reality in Minutes with Our Assistant!
+                        Turn your ideas into reality in minutes with our Assistant!
                     </Typography>
                 </Box>
             </Stack>

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/ApiChatExecute.tsx

@@ -23,6 +23,7 @@ import Send from '@mui/icons-material/SendOutlined';
 import { styled } from '@mui/system';
 import TextInput from './TextInput/TextInput';
 import { createPortal } from 'react-dom';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 
 const PREFIX = 'ApiChatExecute';
 
@@ -164,6 +165,9 @@ const ApiChatExecute: React.FC<ApiChatExecuteProps> = ({
     } | null>(null);
     const [mentionIndex, setMentionIndex] = useState<number>(0);
     const [dynamicCharacters, setDynamicCharacters] = useState<string[]>([]);
+    const { data: settings }: any = usePublisherSettings();
+    const aiAuthTokenProvided = settings?.aiAuthTokenProvided;
+    const designAssistantEnabled = settings?.designAssistantEnabled;
 
     useEffect(() => {
         const transformedPaths = paths.map(path => 
@@ -281,6 +285,7 @@ const ApiChatExecute: React.FC<ApiChatExecuteProps> = ({
                             onKeyDown={handleKeyDown}
                             testId='nl-query-input'
                             multiline
+                            disabled={(designAssistantEnabled && !aiAuthTokenProvided)||!designAssistantEnabled}
                             sx={{
                                 '& .TextInput-textarea': {
                                     resize: 'none',
@@ -299,9 +304,9 @@ const ApiChatExecute: React.FC<ApiChatExecuteProps> = ({
                                     color='primary'
                                     onClick={handleExecute}
                                     id='run-agent-button'
-                                    startIcon={<ExecuteQuery />}
                                     disabled={loading}
                                 >
+                                <ExecuteQuery />
                                 </Button>
                             )}
                             inputProps={{

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/ApiChatResponse.tsx

@@ -23,20 +23,15 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import Tooltip from '@mui/material/Tooltip';
 import Grid from '@mui/material/Grid';
-import Chip from '@mui/material/Chip';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import DangerousIcon from '@mui/icons-material/Dangerous';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { CircularProgress, Typography } from '@mui/material';
 import xmlFormat from 'xml-formatter';
 import Utils from 'AppData/Utils';
-import CustomIcon from 'AppComponents/Shared/CustomIcon';
-import IconButton from '@mui/material/IconButton';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CustomizedAccordions from './CustomizedAccordions';
 import Button from '@mui/material/Button';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
@@ -184,11 +179,6 @@ const Root = styled('div')(({ theme }) => ({
         setCopyBtnText(copyText);
     };
 
-    const handleCurlCopyClick = (curl: string) => {
-        setCopyBtnText(copiedText);
-        navigator.clipboard.writeText(curl);
-    };
-
     /**
      * Infer the content type of the response.
      *

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/LoadingDots.tsx

@@ -63,7 +63,7 @@ const LoadingDots: React.FC = () => {
         {keyframesStyle}
       </style>
       <div style={containerStyle}>
-        <span style={textStyle}>Assistant is thinking</span>
+        <span style={textStyle}>Generating a response</span>
         <div style={dotsStyle}>
           <span style={{ ...dotStyle, animationDelay: '-0.32s' }}></span>
           <span style={{ ...dotStyle, animationDelay: '-0.16s' }}></span>

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/SampleQueryCard.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /*
  * Copyright (c) 2025, WSO2 LLC. (http://www.wso2.org) All Rights Reserved.
  *
@@ -22,12 +21,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { CardActionArea } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
 
 const PREFIX = 'SampleQueryCard';
 
@@ -83,6 +79,10 @@ const SampleQueryCard: React.FC<SampleQueryCardProps> = ({
         setCopyBtnText(copiedText);
     };
 
+    const { data: settings }: any = usePublisherSettings();
+    const aiAuthTokenProvided = settings?.aiAuthTokenProvided;
+    const designAssistantEnabled = settings?.designAssistantEnabled;
+
     return (
         <Root>
             <Card 
@@ -112,6 +112,10 @@ const SampleQueryCard: React.FC<SampleQueryCardProps> = ({
                                     id='sample-query-execute'
                                     variant='outlined'
                                     onClick={() => onExecuteClick(queryData)}
+                                    disabled={
+                                        !designAssistantEnabled
+                                        || !aiAuthTokenProvided
+                                    }
                                 >
                                     {intl.formatMessage({
                                         id: 'Apis.Details.ApiChat.components.SampleQueryCard.executeButton',

portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/CreateAPIWithAI/components/WelcomeMessage.tsx

@@ -17,20 +17,33 @@
  */
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
 
 const WelcomeMessage = () => {    
     return (
       <Stack spacing={2} sx={{ alignItems: 'center', textAlign: 'center' }}>
-            <Typography sx={{ color: '#212020', fontWeight: 'bold', fontSize: '2rem', marginTop: '70px', paddingTop: '70px' }}>
-            Welcome to the
-
-            <Typography component="span" sx={{ color: '#004d99', fontWeight: 'bold', fontSize: '2rem' }}>
-                {' API Design Assistant!'}
-            </Typography>
-            </Typography>
+          <Box display='flex'>
+              <Typography sx={{ color: '#212020', fontWeight: 'bold', fontSize: '2rem', marginTop: '20px', paddingTop: '10px'}}>
+              Welcome to the
+                <Typography component="span" sx={{ color: '#004d99', fontWeight: 'bold', fontSize: '2rem' }}>
+                    {' API Design Assistant!'}
+                </Typography>
+                <Chip
+                    label='Experimental'
+                    variant='outlined'
+                    size='small'
+                    color='primary'
+                    sx={{
+                      ml: 1,
+                      mb:'40px',
+                    }}
+                />
+              </Typography>
+          </Box>
 
             <Typography sx={{ whiteSpace: 'pre-line', fontSize: '1.0rem'  }}>
-                        Provide API details or choose a template below to get started!
+                        Provide API details or choose a template to get started!
             </Typography>
       </Stack>
     );

portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/Landing/Menus/DesignAssistantMenu.jsx

@@ -0,0 +1,84 @@
+/* eslint-disable */
+/*
+ * Copyright (c) 2024, WSO2 LLC. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you 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 { Box, Button, Typography, useTheme } from '@mui/material';
+import Paper from '@mui/material/Paper';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { app } from 'Settings';
+import { isRestricted } from 'AppData/AuthManager';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+const DesignAssistantMenu = () => {
+    const theme = useTheme();    
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMediumScreen = useMediaQuery(theme.breakpoints.between('md', 'lg'));
+
+    return (
+        <Paper
+            square={false}
+            elevation={4}
+            sx={{
+                maxWidth: isSmallScreen ? 250 : isMediumScreen ? 400 : 500,
+                height: isSmallScreen ? 140 : isMediumScreen ? 150 : 140, 
+                display: 'flex',
+                justifyContent: 'center', alignItems: 'center',
+                transition: 'all 0.3s ease-in-out',
+                padding: isSmallScreen ? 1 : 2,
+                borderRadius: isSmallScreen ? 2 : 4,
+            }}
+        >
+            <Box p={1} border={0} borderRadius={1}
+                sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                <img
+                    alt='API Design Assistant'
+                    src={`${app.context}/site/public/images/ai/APIchatassistantImageWithColour.svg`}
+                    style={{ width: '90px', height: 'auto' }}
+                />
+                <Box p={2} border={0} borderRadius={2}
+                    sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <Typography variant='h6' sx={{ color: '#1a3c73', textAlign: 'center', mt: 2 }}>
+                        Not sure which API to create?<br />
+                        We got you!
+                    </Typography>
+                    <Button
+                        variant='contained'
+                        color='primary'
+                        component={Link}
+                        disabled={isRestricted(['apim:api_publish', 'apim:api_create'])}
+                        to='/apis/design-assistant'
+                        sx={{ whiteSpace: 'nowrap', mt: 2 }}
+                    >
+                        <FormattedMessage
+                            id='Apis.Listing.components.TopMenu.create.api.with.ai'
+                            defaultMessage='Create API with AI'
+                        />
+                        <img 
+                            alt='API Design Assistant'
+                            src={`${app.context}/site/public/images/ai/DesignAssistant.svg`}
+                            style={{ marginLeft: 8, width: 15, height: 15 }}
+                        />
+                    </Button>
+                </Box>
+            </Box>
+        </Paper>
+    );
+};
+
+export default DesignAssistantMenu;