2024-08-13 09:32:59 +07:00

92 lines
3.0 KiB
TypeScript

import { useCallback } from 'react'
import { Button } from '@janhq/joi'
import { useAtomValue, useSetAtom } from 'jotai'
import { showMigrationModalAtom } from '@/containers/Providers/ModalMigrations'
import { toaster } from '@/containers/Toast'
import useThreads from '@/hooks/useThreads'
import { threadsAtom } from '@/helpers/atoms/Thread.atom'
const DataMigration: React.FC = () => {
const setShowMigrationModal = useSetAtom(showMigrationModalAtom)
const threads = useAtomValue(threadsAtom)
const { deleteThread } = useThreads()
const onStartMigrationClick = useCallback(() => {
setShowMigrationModal(true)
}, [setShowMigrationModal])
const onCleanUpDataClick = useCallback(async () => {
for (const thread of threads) {
try {
await deleteThread(thread.id)
} catch (err) {
console.error('Error deleting thread', err)
toaster({
title: 'Delete thread failed',
description: `Failed to delete thread ${thread.title}`,
type: 'error',
})
}
}
toaster({
title: 'Delete thread successfully!',
type: 'success',
})
}, [threads, deleteThread])
return (
<>
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
<div className="space-y-1">
<div className="flex gap-x-2">
<h6 className="font-semibold capitalize">
Data Migration from Older Versions
</h6>
</div>
<p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
From version 0.6, Jan uses Cortex as its core engine. Without
migration, your previous threads and models may be inaccessible.
Migrate your data to maintain access in the latest version.
</p>
</div>
<div className="flex flex-shrink-0 flex-row gap-x-2">
<Button
theme="primary"
onClick={onStartMigrationClick}
variant="soft"
>
Migrate Now
</Button>
</div>
</div>
<div className="flex w-full flex-col items-start justify-between gap-4 border-b border-[hsla(var(--app-border))] py-4 first:pt-0 last:border-none sm:flex-row">
<div className="space-y-1">
<div className="flex gap-x-2">
<h6 className="font-semibold capitalize">Delete All Threads</h6>
</div>
<p className="font-medium leading-relaxed text-[hsla(var(--text-secondary))]">
Multiple migrations may create duplicate threads. Use this button to
clean up if needed.
</p>
</div>
<div className="flex flex-shrink-0 flex-row gap-x-2">
<Button
theme="destructive"
onClick={onCleanUpDataClick}
variant="soft"
>
Remove All Threads
</Button>
</div>
</div>
</>
)
}
export default DataMigration