53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
|
import { useQueryClient } from "@tanstack/react-query"
|
||
|
|
import { useDarkMode } from "~hooks/useDarkmode"
|
||
|
|
import { useMessageOption } from "~hooks/useMessageOption"
|
||
|
|
import { PageAssitDatabase } from "~libs/db"
|
||
|
|
|
||
|
|
export const SettingOther = () => {
|
||
|
|
const { clearChat } = useMessageOption()
|
||
|
|
|
||
|
|
const queryClient = useQueryClient()
|
||
|
|
|
||
|
|
const { mode, toggleDarkMode } = useDarkMode()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col space-y-4">
|
||
|
|
<div className="flex flex-row justify-between">
|
||
|
|
<span className="text-gray-500 dark:text-gray-400 text-lg">
|
||
|
|
Change Theme
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={toggleDarkMode}
|
||
|
|
className="bg-blue-500 dark:bg-blue-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
|
||
|
|
{mode === "dark" ? "Light" : "Dark"}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-row justify-between">
|
||
|
|
<span className="text-gray-500 dark:text-gray-400 text-lg">
|
||
|
|
Delete Chat History
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={async () => {
|
||
|
|
const confirm = window.confirm(
|
||
|
|
"Are you sure you want to delete your chat history? This action cannot be undone."
|
||
|
|
)
|
||
|
|
|
||
|
|
if (confirm) {
|
||
|
|
const db = new PageAssitDatabase()
|
||
|
|
await db.deleteChatHistory()
|
||
|
|
queryClient.invalidateQueries({
|
||
|
|
queryKey: ["fetchChatHistory"]
|
||
|
|
})
|
||
|
|
clearChat()
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="bg-red-500 dark:bg-red-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
|
||
|
|
Delete
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|