Feedback

Overview

Feedback is crucial for knowing what your reader thinks, and help you to further improve documentation content.

You can integrate a simple feedback system with Hexta AI.

Installation

Install it using Hexta CLI.

npx @hexta/cli@latest add feedback

Page Feedback

To create a page-level feedback UI, add the <Feedback /> component to your docs page:

import { DocsPage } from 'hexta-ui/layout/docs/page';
import { Feedback } from '@/components/feedback/client';

export default async function Page() {
  return (
    <DocsPage>
      {/* at the bottom of page */}
      <Feedback
        onSendAction={async (feedback) => {
          'use server';

          console.log(feedback);
        }}
      />
    </DocsPage>
  );
}

• onSendAction: fired when user submit feedback.

You can specify a server action, or any function (in client component) to handle the user feedback. For example, to report user feedback as a on_rate_docs event on PostHog.

Feedback Block

You can also configure block-level feedback (e.g. a feedback popover as user select text).

Add the remark-block-id Remark plugin:

import {
  remarkBlockId,
  type RemarkBlockIdOptions,
} from 'hexta-core/mdx-plugins/remark-block-id';
import { defineConfig } from 'hexta-mdx/config';

const blockIdOptions: RemarkBlockIdOptions = {
  addDataAttribute: 'feedback',
};

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [
      [remarkBlockId, blockIdOptions],
    ],
  },
});

Then, wrap your page content under the FeedbackText component:

import { DocsPage } from 'hexta-ui/layout/docs/page';
import { FeedbackText } from '@/components/feedback/client';

export default async function Page() {
  return (
    <DocsPage>
      <FeedbackText
        onSendAction={async (feedback) => {
          'use server';

          console.log(feedback);
        }}
      >
        {/* the content of page */}
      </FeedbackText>
    </DocsPage>
  );
}

• onSendAction: fired when user submit feedback.

Integrating with GitHub Discussion

To report your feedback to GitHub Discussion, you can copy this file as a starting point:

1. Create your own GitHub App and obtain its app ID and private key.
2. Fill required environment variables.
3. Replace constants like owner, repo, and DocsCategory.
4. Use the onPageFeedbackAction & onBlockFeedbackAction in your feedback components.