This plugin adds a feedback popup to your Next.js application. You can import this component anywhere in your application.
Also - this plugin provides some admin components to manage and view the feedback submitted by your users.
Using the Plugin
Installation
To install the plugin, you can use git subtrees from your original repository:
git subtree add --prefix plugins/feedback-popup git@github.com:makerkit/next-supabase-saas-kit-plugins.git feedback-popup --squash
After running this command, you will have the plugin in your repository at
plugins/feedback
. Once pulled, you can apply any customization you need.
Using the CLI
If you're using the CLI, you can run the following command to install the plugin:
npx @makerkit/cli@latest plugins install
Follow the instructions to install the plugin.
If the installation fails
Some users are not able to install using the GitHub SSH URL. If you're having issues with that:
- properly set up SSH access to GitHub with your SSH key
- use the HTTPS URL instead of the SSH URL
To use the HTTPS URL, you can run the following command:
git subtree add --prefix plugins/feedback-popup https://github.com/makerkit/next-supabase-saas-kit-plugins feedback-popup --squash
Add the plugin as a workspace in your package.json
You can do so by adding the following to your package.json
file:
{
"workspaces": [
"plugins/feedback-popup"
]
}
Add it next to the other workspaces in your package.json
file.
Add the paths alias to the TypeScript configuration
To make sure that the TypeScript compiler can find the plugin, you will need
to add the following paths alias to your tsconfig.json
file, in addition
to the other paths aliases that you may have.
If not yet present, add the following to your tsconfig.json
file:
{
"compilerOptions": {
"paths": {
"~/plugins/*": [
"./plugins/*"
]
}
}
}
You only need to add this once, even if you have multiple plugins.
Update the Next.js configuration
To support the package @xenova/transformers.js
, we need to add an
additional property to the Next.js configuration.
Extend the Next.js configuration at next.config.js
with the following object:
experimental: {
serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
}
If the server is running, it may need to be restarted for the changes to take effect.
Installing dependencies
To install the dependencies, you can run the following command:
npm i
NPM will install the dependencies in the plugins/feedback
folder as an NPM
workspace.
Configuring the database migration
This plugin needs to store the documents that the AI will be trained on as vectors in the Supabase database. As such, we need to add a migration to the database.
The migration SQL file is available at plugins/feedback/migration.sql
. You
can generate a new mutation using the following command:
supabase migration new feedback
Make sure you're happy with the default table names before proceeding so that they don't conflict with your existing tables.
Now paste the content of the plugins/feedback/migration.sql
file into the
new migration file that was created.
Pushing the migration to production
When going to production, you will need to run the migration using the Supabase CLI:
supabase db push
You don't need to run this command in development.
Importing the Plugin
You can import the Chatbot
component from the plugin in your app/layout.tsx
file if you want it available on all pages:
import { FeedbackPopupContainer } from '~/plugins/feedback-popup/FeedbackPopup';
export default function Component() {
return (
<>
<FeedbackPopupContainer>
<Button variant='outline'>Feedback</Button>
</FeedbackPopupContainer>
</>
);
}
You can wrap any component with the FeedbackPopupContainer
component to
trigger the feedback popup. For example, an icon:
import { ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
import { FeedbackPopupContainer } from '~/plugins/feedback-popup/FeedbackPopup';
export default function Component() {
return (
<>
<FeedbackPopupContainer>
<Button size="icon" variant='ghost'>
<ChatBubbleLeftIcon className={'h-6'} />
</Button>
</FeedbackPopupContainer>
</>
);
}
Check out this repository's SiteHeader
component for an example of how it's implemented.
Adding Admin Routes
We need to import the routes from the plugin to the admin application.
Create the following file at app/admin/feedback/page.tsx
:
import FeedbackSubmissionsPage, {
metadata,
} from '~/plugins/feedback-popup/admin/FeedbackSubmissionsPage';
export default FeedbackSubmissionsPage;
export { metadata };
And the following file at app/admin/feedback/[id]/page.tsx
:
import FeedbackSubmissionPage, {
metadata,
} from '~/plugins/feedback-popup/admin/FeedbackSubmissionPage';
export default FeedbackSubmissionPage;
export { metadata };
Finally, add the page to the sidebar by updating the AdminSidebar
component:
<SidebarItem
path={'/admin/feedback'}
Icon={() => <ChatBubbleLeftRightIcon className={'h-6'} />}
>
Feedback
</SidebarItem>
That's it! You should now be able to access the admin pages at /admin/feedback
and /admin/feedback/[id]
.