130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
import React, { Fragment, useState } from "react"
|
|
import { Dialog, Menu, Transition } from "@headlessui/react"
|
|
import {
|
|
Bars3BottomLeftIcon,
|
|
XMarkIcon,
|
|
TagIcon,
|
|
CircleStackIcon,
|
|
CogIcon,
|
|
ChatBubbleLeftIcon,
|
|
Bars3Icon,
|
|
Bars4Icon,
|
|
ArrowPathIcon
|
|
} from "@heroicons/react/24/outline"
|
|
import logoImage from "data-base64:~assets/icon.png"
|
|
|
|
import { Link, useParams, useLocation, useNavigate } from "react-router-dom"
|
|
import { Sidebar } from "./Sidebar"
|
|
import { Drawer, Layout, Modal, Select } from "antd"
|
|
import { useQuery } from "@tanstack/react-query"
|
|
import { fetchModels } from "~services/ollama"
|
|
import { useMessageOption } from "~hooks/useMessageOption"
|
|
import { PanelLeftIcon, Settings2 } from "lucide-react"
|
|
import { Settings } from "./Settings"
|
|
import { useDarkMode } from "~hooks/useDarkmode"
|
|
|
|
const navigation = [
|
|
{ name: "Embed", href: "/bot/:id", icon: TagIcon },
|
|
{
|
|
name: "Preview",
|
|
href: "/bot/:id/preview",
|
|
icon: ChatBubbleLeftIcon
|
|
},
|
|
{
|
|
name: "Data Sources",
|
|
href: "/bot/:id/data-sources",
|
|
icon: CircleStackIcon
|
|
},
|
|
{
|
|
name: "Settings",
|
|
href: "/bot/:id/settings",
|
|
icon: CogIcon
|
|
}
|
|
]
|
|
|
|
//@ts-ignore -
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(" ")
|
|
}
|
|
|
|
export default function OptionLayout({
|
|
children
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const {
|
|
data: models,
|
|
isLoading: isModelsLoading,
|
|
refetch: refetchModels,
|
|
isFetching: isModelsFetching
|
|
} = useQuery({
|
|
queryKey: ["fetchModel"],
|
|
queryFn: fetchModels
|
|
})
|
|
|
|
const { selectedModel, setSelectedModel } = useMessageOption()
|
|
|
|
|
|
return (
|
|
<Layout className="bg-white dark:bg-[#171717] md:flex">
|
|
<div className="flex items-center p-3 fixed flex-row justify-between border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-[#171717] w-full z-10">
|
|
<div className="flex items-center flex-row gap-3">
|
|
<div>
|
|
<button
|
|
className="text-gray-500 dark:text-gray-400"
|
|
onClick={() => setSidebarOpen(true)}>
|
|
<PanelLeftIcon className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<Select
|
|
value={selectedModel}
|
|
onChange={setSelectedModel}
|
|
size="large"
|
|
loading={isModelsLoading || isModelsFetching}
|
|
placeholder="Select a model"
|
|
className="w-64"
|
|
options={models?.map((model) => ({
|
|
label: model.name,
|
|
value: model.model
|
|
}))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button>
|
|
|
|
</button>
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
className="text-gray-500 dark:text-gray-400">
|
|
<CogIcon className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<Layout.Content>{children}</Layout.Content>
|
|
|
|
<Drawer
|
|
title={"Chat History"}
|
|
placement="left"
|
|
closeIcon={null}
|
|
onClose={() => setSidebarOpen(false)}
|
|
open={sidebarOpen}>
|
|
<Sidebar />
|
|
</Drawer>
|
|
|
|
<Modal
|
|
open={open}
|
|
width={800}
|
|
title={"Settings"}
|
|
onOk={() => setOpen(false)}
|
|
footer={null}
|
|
onCancel={() => setOpen(false)}>
|
|
<Settings setClose={() => setOpen(false)} />
|
|
</Modal>
|
|
</Layout>
|
|
)
|
|
}
|