🎉 Inputron 1.6-beta is released.
DocsComponentsTextEditComboTron

TextEditComboTron

The TextEditComboTron omponent is a highly customizable text editor designed for seamless integration of AI-powered actions, including predictions, enhancements, translations, and more. It offers a rich set of features and allows users to fine-tune its appearance and behavior.

Features

  • Multi-Agent Support: Configure multiple agents for different actions like prediction, enhancement, translation, etc.
  • Display Modes: Switch between apply (direct replacement) and suggest (inline suggestion) modes.
  • Dynamic Agent Selection: Enable users to toggle between different agents with buttons and icons.
  • Customizable Labels: Personalize labels for every component, including buttons and suggestions.
  • Styling Options: Tailor the appearance of every aspect of the component using custom styles.
  • Error Handling: Provide clear feedback for any issues during interactions.

Props

id

  • Type: string (optional)
  • Description: Unique identifier for the editable text area.

name

  • Type: string (optional)
  • Description: Name of the editable text area for form handling.

value

  • Type: string
  • Description: Current text content of the editor.

setTextValue

  • Type: (value: string | ((prevText: string) => string)) => void
  • Description: Callback to update the editor’s content.

agentsConfig

  • Type: AgentConfig[]
  • Description: Configuration for each agent. AgentConfig includes:
    • button_visible: boolean - Visibility of agent action button.
    • text_visible: boolean - Visibility of agent action text on button.
    • text: string - Button text.
    • icon: JSX.Element (optional) - Custom icon for the agent.
    • alignment: 'left' | 'right' (optional) - Alignment of the button.

activeAgent

  • Type: AgentTypes
  • Description: The currently active agent.

buttonConfiguration

  • Type: ComboTronButtonConfigType (optional)
  • Description: Configuration for action buttons.
    • name: string - Name of the agent.
    • actionType: AgentTypes - Action type (e.g., predict, enhance).
    • payloadConfig: object - Additional configs for some agents (see agents documentation below).
    • icon: JSX.Element (optional) - Custom icon for the agent.
    • suggestionLabelTextOverride: string (optional) - Custom suggestion label.
    • suggestionLabelVisibility: boolean (optional) - Toggle visibility of the suggestion label.
    • suggestionApplyButtonVisibility: string (optional) - Toggle visibility of the “Apply” button.
    • suggestionCopyButtonVisibility: string (optional) - Toggle visibility of the “copy” button.

displayMode

  • Type: object
  • Description: Initial display mode and optional styles.
    • initialState: ‘apply’ | ‘suggest’;
    • style?: React.CSSProperties

viewOnly

  • Type: boolean (optional)
  • Default: false
  • Description: Whether the editor is view-only.

placeholderText

  • Type: string (optional)
  • Default: ‘Type here…’
  • Description: Placeholder text when the editor is empty.

triggerInterval

  • Type: number (optional)
  • Default: 300
  • Description: Interval (in ms) for debounced triggers.

suggestionConfig

  • Type: object (optional)
  • Description: Configuration for suggestion display.
    • label: string - Label text for suggestions.
    • style: React.CSSProperties - Styles for the suggestion box.
    • applyButtonConfig: object - Configuration for the “Apply” button.
    • copyButtonConfig: object - Configuration for the “Copy” button.
    • alignment: 'bottom' | 'right' - Alignment of the suggestion box.

editorStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles editor section.

labelConfig

  • Type: object (optional)
  • Description: Configuration for the label above the editor.
    • content: string (optional) - Label text.
    • visible: boolean - Whether the label is visible.
    • style: React.CSSProperties (optional) - Custom styles.

persistAgentSelection

  • Type: boolean (optional)
  • Default: true
  • Description: Whether the agent selection persists across sessions.

containerStyle

  • Type: React.CSSProperties (optional)
  • Description: Custom styles for the container.

toggleButtonStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles for toggle buttons (Apply/Suggest).

agentButtonStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles for agent buttons.

agentButtonActiveStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles for the active agent button.

ghostTextStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles for ghost text.

errorTextStyle

  • Type: React.CSSProperties (optional)
  • Description: Styles for error text.

Supported Agents

Built-In Agents

  1. Predict
    • Description: Generates AI-powered predictions based on the text.
    • Properties:
      • actionType: ‘predict’
      • icon: Default is Wand, but customizable.
      • suggestionLabelTextOverride: Optional label override.
      • suggestionApplyButtonVisibility: Toggle visibility of the “Apply” button.
      • suggestionCopyButtonVisibility: Toggle visibility of the “Copy” button.
  2. Enhance
    • Description: Refines the text for grammar, tone, or style.
    • Properties:
      • actionType: ‘enhance’
      • payloadConfig.promptOverride: Custom instructions for enhancement.
      • payloadConfig.spiceitup: Add creativity.
      • payloadConfig.number_of_lines: Specify output length.
      • icon: Default is Edit3, but customizable.
  3. Translate
    • Description: Translates the text into a specified language.
    • Properties:
      • actionType: ‘translate’
      • targetLanguage: Specify the language for translation.
      • icon: Default is MessageCircle, but customizable.
  4. Feedback
    • Description: Provides AI-generated feedback on the text.
    • Properties:
      • actionType: ‘feedback’
      • icon: Default is MessageCircle.
  5. Reason
    • Description: Offers reasoning or justifications for the text content.
    • Properties:
      • actionType: ‘reason’
      • icon: Default is MessageCircle.
  6. Analyze
    • Description: Analyzes the text to provide insights or summaries.
    • Properties:
      • actionType: ‘analyze’
      • icon: Default is MessageCircle.
  7. Research (Coming Soon)
    • Description: Conducts AI-assisted research to gather insights or expand on topics related to the text.
    • Properties:
      • actionType: ‘research’

Example Usage

Basic Example

import React, { useState } from 'react';
import { TextEditorComboTron } from './ComboTextAreaTron';
 
const Example = () => {
  const [text, setText] = useState('');
  const agents = [
    {
      name: 'predict',
      actionType: 'predict',
      icon: <Wand />,
    },
    {
      name: 'enhance',
      actionType: 'enhance',
      icon: <Edit3 />,
    },
  ];
 
  return (
    <TextEditorComboTron
      id="example-editor"
      value={text}
      setTextValue={setText}
      agentsConfig={agents}
      activeAgent="predict"
      displayMode={{ initialState: 'apply' }}
      suggestionConfig={{
        suggestionLabel: 'Suggestions:',
        applyButtonConfig: { text: 'Apply', visible: true },
        copyButtonConfig: { text: 'Copy', visible: true },
      }}
      containerStyle={{ border: '1px solid #ccc', borderRadius: '8px' }}
      agentButtonStyle={{ backgroundColor: '#f0f0f0' }}
    />
  );
};
 
export default Example;

Custom Styling

<TextEditorComboTron
  value={text}
  setTextValue={setText}
  agentsConfig={[{ name: 'translate', actionType: 'translate', icon: <MessageCircle /> }]}
  containerStyle={{ backgroundColor: '#f4f4f4', padding: '20px', borderRadius: '8px' }}
  editorStyle={{ fontSize: '18px', color: '#333' }}
  agentButtonStyle={{ backgroundColor: '#007bff', color: '#fff', borderRadius: '50%' }}
/>
FeedbackTron