424b00338e
* Make thread screen as default screen * Blank state when user have not any model * Cleanup topbar thread screen * Improve style right panel * Add instructions right panel * Styling thread list history * Resolve conflict * Default title new thread * Fix trigger panel sidebar * Make default right panel false when no activethread * Fix CI test * chore: assistant instruction with system prompt * Fix title and blank state explore the hub * Claenup style thread screen and add buble message for assitant * Remove unused import * Styling more menus on thread list and right panel, and make max height textarea 400 pixel * Finished revamp ui thread * Finished system monitor UI * Style box running models * Make animate right panel more smooth * Add status arround textarea for starting model info * Temporary disable hide left panel * chore: system resource monitoring update * copy nits * chore: typo * Reverse icon chevron accordion * Move my models into setting page --------- Co-authored-by: Louis <louis@jan.ai> Co-authored-by: 0xSage <n@pragmatic.vc>
85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import React, { useMemo } from 'react'
|
|
|
|
import { Model } from '@janhq/core'
|
|
import { Button } from '@janhq/uikit'
|
|
import { atom, useAtomValue } from 'jotai'
|
|
|
|
import ModalCancelDownload from '@/containers/ModalCancelDownload'
|
|
|
|
import { MainViewState } from '@/constants/screens'
|
|
|
|
import useDownloadModel from '@/hooks/useDownloadModel'
|
|
import { useDownloadState } from '@/hooks/useDownloadState'
|
|
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
|
|
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
|
|
import { toGigabytes } from '@/utils/converter'
|
|
|
|
type Props = {
|
|
model: Model
|
|
isRecommended: boolean
|
|
}
|
|
|
|
const ModelVersionItem: React.FC<Props> = ({ model }) => {
|
|
const { downloadModel } = useDownloadModel()
|
|
const { downloadedModels } = useGetDownloadedModels()
|
|
const { setMainViewState } = useMainViewState()
|
|
const isDownloaded =
|
|
downloadedModels.find(
|
|
(downloadedModel) => downloadedModel.id === model.id
|
|
) != null
|
|
|
|
const { modelDownloadStateAtom, downloadStates } = useDownloadState()
|
|
|
|
const downloadAtom = useMemo(
|
|
() => atom((get) => get(modelDownloadStateAtom)[model.id ?? '']),
|
|
[model.id]
|
|
)
|
|
const downloadState = useAtomValue(downloadAtom)
|
|
|
|
const onDownloadClick = () => {
|
|
downloadModel(model)
|
|
}
|
|
|
|
let downloadButton = (
|
|
<Button themes="outline" size="sm" onClick={() => onDownloadClick()}>
|
|
Download
|
|
</Button>
|
|
)
|
|
|
|
if (isDownloaded) {
|
|
downloadButton = (
|
|
<Button
|
|
themes="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
setMainViewState(MainViewState.MyModels)
|
|
}}
|
|
>
|
|
Use
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
if (downloadState != null && downloadStates.length > 0) {
|
|
downloadButton = <ModalCancelDownload model={model} isFromList />
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-4 border-t border-border pb-3 pl-3 pr-4 pt-3 first:border-t-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="line-clamp-1 flex-1" title={model.name}>
|
|
{model.name}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex justify-end gap-2"></div>
|
|
{downloadButton}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ModelVersionItem
|