TaskingAI-UI

TaskingAI-UI is a comprehensive front-end component library designed to facilitate the development of user interfaces for TaskingAI applications. It provides a set of reusable UI components that can be easily integrated into your web projects.

Resources

• TaskingAI
• Documentation
• Support and Contact

Getting Started

Installation

To use TaskingAI-UI components in your project, you need to install the package via npm:

npm install @taskingai/taskingai-ui

This command installs the TaskingAI-UI library and makes it available for import in your application.

Usage

TaskingAI-UI supports tree-shaking by allowing you to import only the components you need, thus optimizing the final bundle size.

Here's how you can import a component:

import { TKDeleteModal } from '@taskingai/taskingai-ui';

Component Example

Below is an example of how to integrate the TKDeleteModal component into your application. Make sure to pass the required props to the component for proper functionality.

import React, { useState } from 'react';
import { TKDeleteModal } from '@taskingai/taskingai-ui';

function App() {
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
  const deleteValue = 'ItemName'; // The name of the item to be deleted

  return (
    <div>
      {/* Trigger Button */}
      <button onClick={() => setOpenDeleteModal(true)}>Delete Item</button>

      {/* Delete Confirmation Modal */}
      <TKDeleteModal 
        open={openDeleteModal} 
        objectClassName="Collection" 
        objectName={deleteValue} 
        description="This action cannot be undone and all retrieval integrations associated with the collection will be affected."
        onCancel={() => setOpenDeleteModal(false)}
        onConfirm={() => {
          // Handle the delete action
          setOpenDeleteModal(false);
        }}
      />
    </div>
  );
}

export default App;

In the example above, we have a button that, when clicked, sets openDeleteModal to true, which opens the modal. The TKDeleteModal component takes in several props:

• open: Controls the visibility of the modal.
• objectClassName: The class/type of the object being deleted.
• objectName: The name of the object being deleted.
• description: Additional details provided to the user, often regarding the consequences of the deletion.

License

TaskingAI-Inference is released under the same TaskingAI Open Source License as TaskingAI. By using or contributing to TaskingAI-Inference, you agree to abide by its terms.

Support and Contact

For support, please refer to our documentation or contact us at [email protected].