Faisal Amir 539b467141
ui: interface revamp (#429)
* feat: adding create bot functionality

Signed-off-by: James <james@jan.ai>

* update the temperature progress bar

Signed-off-by: James <james@jan.ai>

* WIP baselayout

* Mapping plugins with available preferences

* Added loader component

* WIP working another screen

* Cleanup types and avoid import one by one

* Prepare bottom bar

* Add css variables colors to enable user select the accent

* Enable change accent color

* Seperate css variable

* Fix conflict

* Add blank state of my model empty

* Restyle explore models page

* Enable user config left sidebar

* Restyle my models page

* WIP styling chat page

* Restyling chat message

* Fix conflict

* Adde form preferences setting plugins

* Fixed form bot info

* Sidebar bot chat

* Showing rightbar for both setting when user created bot

* Fix style bot info

* Using overflow auto intead of scroll

* Remove script built UI from root package

* Fix missig import

* Resolve error linter

* fix e2e tests

Signed-off-by: James <james@jan.ai>

---------

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
2023-10-24 10:59:12 +07:00

47 lines
1.5 KiB
TypeScript

import React, { Fragment, use } from 'react'
import ToggleSwitch from '../ToggleSwitch'
import { useController } from 'react-hook-form'
type Props = {
id: string
control?: any
required?: boolean
}
const CreateBotPromptInput: React.FC<Props> = ({ id, control, required }) => {
const { field } = useController({
name: id,
control: control,
rules: { required: required },
})
return (
<Fragment>
<div className="flex flex-col gap-2">
<label htmlFor="comment" className="block font-bold ">
Prompt
</label>
<p className="mt-1 font-normal text-gray-400">
All conversations with this bot will start with your prompt but it
will not be visible to the user in the chat. If you would like the
prompt message to be visible to the user, consider using an intro
message instead.
</p>
<ToggleSwitch
id="visibleFromBotProfile"
title={'Prompt visible from bot profile'}
control={control}
/>
<textarea
rows={4}
className="block w-full resize-none rounded-md border-0 bg-background/80 py-1.5 text-xs leading-relaxed text-background-reverse shadow-sm ring-1 ring-inset ring-border placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-accent/50"
placeholder="Talk to me like a pirate"
{...field}
/>
</div>
</Fragment>
)
}
export default CreateBotPromptInput