96dba2690d
chore: add facades refactor: core module export refactor: inference plugin - deprecate function registering (#537) * refactor: revamp inference plugin as class - deprecate function registering * refactor: monitoring plugin - deprecate service registering (#538) refactor: revamp inference plugin as class - deprecate function registering chore: update import refactor: plugin revamp - model management chore: update build steps and remove experimental plugins refactor: remove pluggable electron chore: add sorting for conversations chore: build plugins for testing chore: consistent plugin directory name chore: docs chore: fix CI chore: update conversation prefix
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import React, { useCallback } from 'react'
|
|
import { ModelStatus, ModelStatusComponent } from '../ModelStatusComponent'
|
|
import { useAtomValue } from 'jotai'
|
|
import ModelActionButton, { ModelActionType } from '../ModelActionButton'
|
|
import useStartStopModel from '@hooks/useStartStopModel'
|
|
import useDeleteModel from '@hooks/useDeleteModel'
|
|
import { activeModelAtom, stateModel } from '@helpers/atoms/Model.atom'
|
|
import { toGigabytes } from '@utils/converter'
|
|
import { Model } from '@janhq/core/lib/types'
|
|
|
|
type Props = {
|
|
model: Model
|
|
}
|
|
|
|
const ModelRow: React.FC<Props> = ({ model }) => {
|
|
const { startModel, stopModel } = useStartStopModel()
|
|
const activeModel = useAtomValue(activeModelAtom)
|
|
const { deleteModel } = useDeleteModel()
|
|
const { loading, model: currentModelState } = useAtomValue(stateModel)
|
|
|
|
let status = ModelStatus.Installed
|
|
if (activeModel && activeModel._id === model._id) {
|
|
status = ModelStatus.Active
|
|
}
|
|
|
|
let actionButtonType = ModelActionType.Start
|
|
if (activeModel && activeModel._id === model._id) {
|
|
actionButtonType = ModelActionType.Stop
|
|
}
|
|
|
|
const onModelActionClick = (action: ModelActionType) => {
|
|
if (action === ModelActionType.Start) {
|
|
startModel(model._id)
|
|
} else {
|
|
stopModel(model._id)
|
|
}
|
|
}
|
|
|
|
const onDeleteClick = useCallback(() => {
|
|
deleteModel(model)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [model])
|
|
|
|
return (
|
|
<tr className="border-b border-border bg-background/50 last:rounded-lg last:border-b-0">
|
|
<td className="whitespace-nowrap px-3 font-semibold text-muted-foreground">
|
|
{model.name}
|
|
<span className="ml-2 font-semibold">v{model.version}</span>
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 text-muted-foreground">
|
|
<div className="flex flex-col justify-start">
|
|
<span>GGUF</span>
|
|
</div>
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 text-muted-foreground">
|
|
{toGigabytes(model.size)}
|
|
</td>
|
|
<td className="whitespace-nowrap px-3 text-muted-foreground">
|
|
<ModelStatusComponent status={status} />
|
|
</td>
|
|
<ModelActionButton
|
|
disabled={loading}
|
|
loading={currentModelState === model._id ? loading : false}
|
|
type={actionButtonType}
|
|
onActionClick={onModelActionClick}
|
|
onDeleteClick={onDeleteClick}
|
|
/>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
export default ModelRow
|