InpuTron

Predict Example

let's create a text area to capture the user's comments. We will offer the user a bit of help to finish his/her thoughts

1'use client'
2import {Predictron} from '@revivesoft/inputron';
3import { useState } from 'react';
4const PredictRonExample = () => {
5    const handleChange = (name: string, value: string) => {
6        console.log('handing change for value', value);
7      }
8    
9    const [comments, setComments] = useState('');
10    return (
11        <Predictron name='comments' onChange={handleChange}/>
12    );
13}
14

Selectron Example

let's create a dropdown input to recommend the best surfing spots in the world

loading...

Selected Country:

Selected Surf Spot: 

1"use client";
2

3import { SelecTron } from  "@revivesoft/inputron";
4import {  useState ,useEffect } from "react";
5

6export default function SelectronExample() {
7  const [country, setCountry] = useState("");
8  const [surfSpot, setSurfSpot] = useState("");
9  // reset surfing spot when country changes
10  useEffect(() => { setSurfSpot("");}, [country]);
11

12  return (
13    <>
14      <div className="space-y-4">
15        <SelectronClient
16          value={country}
17          onValueChange={setCountry}
18          prompt={`top 5 countries for surfing`}
19          title={`Top Countries for surfing`}
20        />
21

22        {country && (
23          <SelectronClient
24            key={country}
25            value={surfSpot}
26            onValueChange={setSurfSpot}
27            prompt={`top 8 places to surf in ${country} only.`}
28            title={`Top Surf Spots in ${country}`}
29          />
30        )}
31      </div>s
32    </>
33  );
34}
35

Labeltron Example

Let's create a simple input field with a label that translates into 5 languages on hover. The languages are spanish, arabic , german , hindi 

1"use client";
2

3import { LabelTron } from "@revivesoft/inputron";
4import { Input } from "@/components/ui/input";
5import { Globe } from "lucide-react";
6

7const LabeltronExample = () => {
8  const langauges = ["es", "ar", "de", "hi"];
9  return (
10    <div className="flex flex-col space-y-4">
11      <LabelTron
12        languages={langauges}
13        icon={{ className: "h-3 text-pink-500",  visible: true, }}
14        interval={2000}
15        className="text-md font-bold ">
16        First Name
17      </LabelTron>
18      <Input name={"name"} placeholder="John "></Input>
19

20      <LabelTron
21        languages={langauges}
22        icon={{ className: "h-3 text-pink-500", visible: true, 
23            iconElement: <Globe className="h-3 animate-ping ml-1" />,}}
24        interval={2000}
25        className="text-md font-bold ">
26        Enter your e-mail address
27      </LabelTron>
28

29      <Input name={"email"} placeholder="john@email.com"></Input>
30    </div>
31  );
32};

TextareaTron Example

Let's create a simple text area to capture the medical condition of a patient at an clinic

In the example above, the user can click the Enhance it button, to improve the entry. A developer can also configure keys such as TAB to trigger the rewrite. You can use Ctrl+Z to undo the rewrite.
1'use client'    
2import { submitFormAction } from '@/app/actions/example-actions';
3import { TextareaTron } from "@revivesoft/inputron";
4import { Rocket } from "lucide-react";
5import { useState,useEffect } from "react";
6import { Button } from "@/components/ui/button";
7

8const TextareatronExample = () => {
9    const [comment, setComment] = useState('I feel a little bit dizzy')
10    const [originalText,setOriginalText] = useState(comment);
11    const customOnChange =async (e: React.ChangeEvent<HTMLTextAreaElement>) => {
12        setComment(e.target.value);
13    }
14

15    useEffect(()=>{
16        setOriginalText(comment);
17    })
18    return (
19        <>
20        <form action={submitFormAction} className="space-y-2">
21            <div className="px-4 py-4 bg-white  dark:bg-gray-800 w-full 
22                    space-y-4">
23                <TextareaTron
24                    autoFocus
25                    id='condition'
26                    name='condition'
27                    labelConfig={
28                    { content: 'Describe how you feel in simple words. 
29                        Use your favorite language.', 
30                      visible: true, 
31                      style: 'text-sm font-semibold text-gray-700' }}
32                    placeholder="Enter your comment here"
33                    onChange={customOnChange}
34                    value={comment}
35                    triggerKeys={['Tab']}
36                    setTextValue={setComment}
37                    prompt='Rewrite in medical terms.'
38                    buttonConfiguration={{
39                        button_visible: true,
40                        text_visible: true,
41                        text: 'Enhance it',
42                        icon: <Rocket className='w-3 h-3 text-xs mr-2 ' />,
43                        style: 'bg-white rounded-full  
44                            text-black p-3 h-4  text-xs 
45                            hover:bg-pink-500 hover:text-black 
46                            hover:text-white '
47                    }}
48                />
49                <Button type='submit' 
50                    className='bg-blue-600 text-white items-right'>
51                Submit</Button>
52            <div>
53

54        </form>
55

56</>
57    )
58}
59

TextareaTron Custom Agent Example

Let's come up with ideas for family vacations.

Custom agents are available only on business plans and above.

Agent: You are an expert family travel advisor.

Mission: Offer suggestions for family-friendly vacation activities based on the user's preferences.

In the example above, the user can click the Generate button, to improve the entry. A developer can also configure keys such as TAB to trigger the rewrite. You can use Ctrl+Z to undo the rewrite.
1'use client'    
2import { submitFormAction } from '@/app/actions/example-actions';
3import { TextareaTron } from "@revivesoft/inputron";
4import { Rocket } from "lucide-react";
5import { useState,useEffect } from "react";
6import { Button } from "@/components/ui/button";
7

8const TextareatronExample = () => {
9    const [comment, setComment] = useState('I feel a little bit dizzy')
10    const [originalText,setOriginalText] = useState(comment);
11    const customOnChange =async (e: React.ChangeEvent<HTMLTextAreaElement>) => {
12        setComment(e.target.value);
13    }
14

15    useEffect(()=>{
16        setOriginalText(comment);
17    })
18    return (
19        <>
20        <form action={submitFormAction} className="space-y-2">
21            <div className="px-4 py-4 bg-white  w-full space-y-4">
22                <TextareaTron
23                    autoFocus
24                    id='condition'
25                    name='TextAreaWithCustomAgent-TravelAdvisor'
26                    labelConfig={
27                    { content: 'Describe the activities your family enjoys on vacation.', 
28                      visible: true, 
29                      style: 'text-sm font-semibold text-gray-700' }}
30                    placeholder="Enter your comment here"
31                    onChange={customOnChange}
32                    value={comment}
33                    agent= 'custom'
34                    triggerKeys={['Tab']}
35                    setTextValue={setComment}
36                    buttonConfiguration={{
37                        button_visible: true,
38                        text_visible: true,
39                        text: 'Generate',
40                        icon: <Rocket className='w-3 h-3 text-xs mr-2 ' />,
41                        style: 'bg-white rounded-full  
42                            text-black p-3 h-4  text-xs 
43                            hover:bg-pink-500 hover:text-black 
44                            hover:text-white '
45                    }}
46                />
47                <Button type='submit' 
48                    className='bg-blue-600 text-white items-right'>
49                Submit</Button>
50            <div>
51

52        </form>
53

54</>
55    )
56}
57