81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import React, { useCallback } from 'react'
|
|
|
|
import { EngineConfig, InferenceEngine } from '@janhq/core'
|
|
import { Button, Switch } from '@janhq/joi'
|
|
|
|
import { useAtom, useSetAtom } from 'jotai'
|
|
import { SettingsIcon } from 'lucide-react'
|
|
|
|
import { getTitleByEngine } from '@/utils/modelEngine'
|
|
|
|
import { showSettingActiveRemoteEngineAtom } from '@/helpers/atoms/Extension.atom'
|
|
import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
|
|
|
|
const RemoteEngineItems = ({
|
|
engine,
|
|
}: {
|
|
engine: InferenceEngine
|
|
values: EngineConfig[]
|
|
}) => {
|
|
const setSelectedSetting = useSetAtom(selectedSettingAtom)
|
|
|
|
const [showSettingActiveRemoteEngine, setShowSettingActiveRemoteEngineAtom] =
|
|
useAtom(showSettingActiveRemoteEngineAtom)
|
|
|
|
const onSwitchChange = useCallback(
|
|
(name: string) => {
|
|
if (showSettingActiveRemoteEngine.includes(name)) {
|
|
setShowSettingActiveRemoteEngineAtom(
|
|
[...showSettingActiveRemoteEngine].filter((x) => x !== name)
|
|
)
|
|
} else {
|
|
setShowSettingActiveRemoteEngineAtom([
|
|
...showSettingActiveRemoteEngine,
|
|
name,
|
|
])
|
|
}
|
|
},
|
|
[showSettingActiveRemoteEngine, setShowSettingActiveRemoteEngineAtom]
|
|
)
|
|
return (
|
|
<div className="flex w-full flex-col items-start justify-between border-b border-[hsla(var(--app-border))] py-3 sm:flex-row">
|
|
<div className="w-full flex-shrink-0 space-y-1.5">
|
|
<div className="flex items-center justify-between gap-x-2">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h6 className="line-clamp-1 font-semibold capitalize">
|
|
{getTitleByEngine(engine as InferenceEngine)}
|
|
</h6>
|
|
</div>
|
|
<div className="mt-2 w-full font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
|
|
<p>
|
|
Access models from {getTitleByEngine(engine as InferenceEngine)}{' '}
|
|
via their API.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-x-3">
|
|
<Switch
|
|
checked={!showSettingActiveRemoteEngine.includes(engine)}
|
|
onChange={() => onSwitchChange(engine)}
|
|
/>
|
|
<Button
|
|
theme="icon"
|
|
variant="outline"
|
|
onClick={() => setSelectedSetting(engine)}
|
|
>
|
|
<SettingsIcon
|
|
size={14}
|
|
className="text-[hsla(var(--text-secondary))]"
|
|
/>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RemoteEngineItems
|