539b467141
* 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>
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import React, { Children } from 'react'
|
|
import { execute } from '../../../../../electron/core/plugin-manager/execution/extension-manager'
|
|
|
|
type Props = {
|
|
pluginName: string
|
|
preferenceValues: any
|
|
preferenceItems: any
|
|
}
|
|
|
|
import { formatPluginsName } from '@utils/converter'
|
|
import { PluginService, preferences } from '@janhq/core'
|
|
|
|
const PreferencePlugins = (props: Props) => {
|
|
const { pluginName, preferenceValues, preferenceItems } = props
|
|
|
|
/**
|
|
* Notifies plugins of a preference update by executing the `PluginService.OnPreferencesUpdate` event.
|
|
* If a timeout is already set, it is cleared before setting a new timeout to execute the event.
|
|
*/
|
|
let timeout: any | undefined = undefined
|
|
function notifyPreferenceUpdate() {
|
|
if (timeout) {
|
|
clearTimeout(timeout)
|
|
}
|
|
timeout = setTimeout(() => execute(PluginService.OnPreferencesUpdate), 100)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h6 className="mb-6 text-sm font-semibold capitalize">
|
|
{formatPluginsName(pluginName)}
|
|
</h6>
|
|
|
|
{preferenceItems
|
|
.filter((x: any) => x.pluginName === pluginName)
|
|
?.map((e: any) => (
|
|
<div key={e.preferenceKey} className="mb-4 flex flex-col">
|
|
<div className="space-y-2">
|
|
<span className="">Setting:</span>
|
|
<span className="">{e.preferenceName}</span>
|
|
</div>
|
|
<span className="text-muted-foreground mt-1">
|
|
{e.preferenceDescription}
|
|
</span>
|
|
<div className="mt-2 flex flex-row items-center space-x-4">
|
|
<input
|
|
className="bg-background/80 ring-border placeholder:text-muted-foreground focus:ring-accent/50 block w-full rounded-md border-0 py-1.5 text-xs shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:leading-6"
|
|
defaultValue={
|
|
preferenceValues.filter(
|
|
(v: any) => v.key === e.preferenceKey
|
|
)[0]?.value
|
|
}
|
|
onChange={(event) => {
|
|
preferences
|
|
.set(e.pluginName, e.preferenceKey, event.target.value)
|
|
.then(() => notifyPreferenceUpdate())
|
|
}}
|
|
></input>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PreferencePlugins
|