Resync Widget

ResyncWidget is a React component for integrating an AI-powered search widget into your application. It connects seamlessly with your custom API to provide intelligent search capabilities. Built with NextUI and Tailwind CSS for a modern and responsive UI.

Installation

Install the package and its dependencies:

npm install resync-widget @nextui-org/react framer-motion

Tailwind Setup

Add the following configuration to your tailwind.config.js file:

// tailwind.config.js
const { nextui } = require("@nextui-org/react");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

Usage

Use the ResyncWidget in your application as shown below:

import * as React from "react";
import { NextUIProvider } from "@nextui-org/react";
import ResyncWidget from "resync-widget";

const App = () => {
  return (
    <NextUIProvider>
      <ResyncWidget
        authorization="your-api-key"
        integrationId="your-integration-id"
        organizationDisplayName="Your Organization"
        title="Your Title"
        description="Your Description"
        primaryBrandColor="#123456"
      />
    </NextUIProvider>
  );
};

export default App;

Properties

All properties are optional.

| Property | Type | Description | |-------------------------|------------------------|-----------------------------------------------------------------------------------------------| | authorization | string | Required. API authorization token to authenticate requests. | | integrationId | string | Required. ID of the integration to be used. | | guidance | string | Optional. Guidance for the chat session. | | context | string | Optional. Context information for the chat session. | | role | string | Role of the user. Default value is "user". | | tags | string[] | Optional. Tags to associate with the chat session. | | chatMode | string | Mode of the chat. Default value is "AUTO". | | stream | boolean | Determines whether streaming is enabled. Default value is true. | | organizationDisplayName | string | Display name of the organization. | | title | string | Title for the widget. | | description | string | Description for the widget. | | primaryBrandColor | string | Primary brand color for the widget styling. | | botAvatarLight | React.ReactNode | Optional. Light mode avatar for the bot. | | botAvatarDark | React.ReactNode | Optional. Dark mode avatar for the bot. | | questions | string[] | Optional. Default questions to show in the widget. Default value is ["What are embeddings?"]| | searchButtonType | "searchbar" | "icon" | "iconSearch" | Type of the search button. Default value is "searchbar". | | customButton | React.ReactNode | Optional. Custom button element to trigger the widget. | | classNames | object | Optional. Custom class names for different parts of the widget. | | classNames.button | string | Optional. Custom class name for the button. | | classNames.modal | string | Optional. Custom class name for the modal. | | classNames.modalHeader | string | Optional. Custom class name for the modal header. | | classNames.card | string | Optional. Custom class name for the card. | | classNames.cardHeader | string | Optional. Custom class name for the card header. | | classNames.cardBody | string | Optional. Custom class name for the card body. | | classNames.modalFooter | string | Optional. Custom class name for the modal footer. | | classNames.searchButton | string | Optional. Custom class name for the search button. | | classNames.closeButton | string | Optional. Custom class name for the close button. | | classNames.submitButton | string | Optional. Custom class name for the submit button. |