+ jan.exe
+
+ 
+ Intel
+
+
+ M1/M2
+
+ 
+ jan.deb
-
-
setMore(!more)}
- >
-
{show && (
-
+ {!asChild && (
+
+
{more && (
setMore(!more)}
+ >
+
+ )}
+
{
- onRevealInFinderClick(title)
+ onRevealInFinderClick && onRevealInFinderClick(title)
setMore(false)
}}
>
-
+
+ Show in Finder
+
+
+ Opens thread.json. Changes affect this thread only.
+
+
+ ) : (
+
+ Show in Finder
+
+ )}
+
{
- onViewJsonClick(title)
+ onViewJsonClick && onViewJsonClick(title)
setMore(false)
}}
>
-
+
+ Edit Global Defaults for{' '}
+
+ {activeThread?.assistants[0].model.id}
+
+
+
+ {title === 'Model' ? (
+ <>
+ Opens {title}.json.
+ Changes affect all new assistants and threads.
+
+ ) : (
+ <>
+ Opens {title}.json.
+ Changes affect all new threads.
+
+ )}
+
+
+
+ = ({ name, title, checked }) => {
+const Checkbox: React.FC = ({ name, title, checked, description }) => {
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)
+ const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+
+ const modelSettingParams = toSettingParams(activeModelParams)
+
+ const engineParams = getConfigurationsData(modelSettingParams)
+
+ const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
+
+ const { stopModel } = useActiveModel()
+
const onCheckedChange = (checked: boolean) => {
if (!threadId) return
-
+ if (engineParams.some((x) => x.name.includes(name))) {
+ setEngineParamsUpdate(true)
+ stopModel()
+ } else {
+ setEngineParamsUpdate(false)
+ }
updateModelParameter(threadId, name, checked)
}
return (
)
}
diff --git a/web/containers/Layout/BottomBar/index.tsx b/web/containers/Layout/BottomBar/index.tsx
index 6fbac8bec..209d1d95c 100644
--- a/web/containers/Layout/BottomBar/index.tsx
+++ b/web/containers/Layout/BottomBar/index.tsx
@@ -1,6 +1,15 @@
-import { Badge, Button } from '@janhq/uikit'
+import {
+ Badge,
+ Button,
+ Tooltip,
+ TooltipArrow,
+ TooltipContent,
+ TooltipTrigger,
+} from '@janhq/uikit'
import { useAtomValue } from 'jotai'
+import { FaGithub, FaDiscord } from 'react-icons/fa'
+
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
@@ -15,7 +24,6 @@ import { MainViewState } from '@/constants/screens'
import { useActiveModel } from '@/hooks/useActiveModel'
import { useDownloadState } from '@/hooks/useDownloadState'
-import { useGetAppVersion } from '@/hooks/useGetAppVersion'
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
import useGetSystemResources from '@/hooks/useGetSystemResources'
import { useMainViewState } from '@/hooks/useMainViewState'
@@ -24,11 +32,23 @@ const BottomBar = () => {
const { activeModel, stateModel } = useActiveModel()
const { ram, cpu } = useGetSystemResources()
const progress = useAtomValue(appDownloadProgress)
- const appVersion = useGetAppVersion()
const { downloadedModels } = useGetDownloadedModels()
const { setMainViewState } = useMainViewState()
const { downloadStates } = useDownloadState()
+ const linksMenu = [
+ {
+ name: 'Discord',
+ icon:
{children}
)}
diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
index de18ca052..db331e2f7 100644
--- a/web/containers/Checkbox/index.tsx
+++ b/web/containers/Checkbox/index.tsx
@@ -1,32 +1,79 @@
import React from 'react'
-import { Switch } from '@janhq/uikit'
+import {
+ Switch,
+ Tooltip,
+ TooltipArrow,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from '@janhq/uikit'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { InfoIcon } from 'lucide-react'
+import { useActiveModel } from '@/hooks/useActiveModel'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+import { getConfigurationsData } from '@/utils/componentSettings'
+import { toSettingParams } from '@/utils/model_param'
+
+import {
+ engineParamsUpdateAtom,
+ getActiveThreadIdAtom,
+ getActiveThreadModelParamsAtom,
+} from '@/helpers/atoms/Thread.atom'
type Props = {
name: string
title: string
+ description: string
checked: boolean
}
-const Checkbox: React.FC
-
)
diff --git a/web/containers/DropdownListSidebar/index.tsx b/web/containers/DropdownListSidebar/index.tsx
index e40599344..0295f5512 100644
--- a/web/containers/DropdownListSidebar/index.tsx
+++ b/web/containers/DropdownListSidebar/index.tsx
@@ -26,7 +26,7 @@ import { useMainViewState } from '@/hooks/useMainViewState'
import useRecommendedModel from '@/hooks/useRecommendedModel'
-import { toGigabytes } from '@/utils/converter'
+import { toGibibytes } from '@/utils/converter'
import {
activeThreadAtom,
@@ -130,7 +130,7 @@ export default function DropdownListSidebar() {
{title}
+
+
+
+
+
+
+ {description}
+
+
+
+
+ {title} +
+
{x.name}
- {toGigabytes(x.metadata.size)}
+ {toGibibytes(x.metadata.size)}
diff --git a/web/containers/Layout/BottomBar/SystemItem/index.tsx b/web/containers/Layout/BottomBar/SystemItem/index.tsx
index bab545547..dfa8cb0d3 100644
--- a/web/containers/Layout/BottomBar/SystemItem/index.tsx
+++ b/web/containers/Layout/BottomBar/SystemItem/index.tsx
@@ -9,7 +9,7 @@ export default function SystemItem({ name, value }: Props) {
return (
{name}
- {value} + {value}
@@ -71,12 +91,39 @@ const BottomBar = () => {
-
-
)
diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx
index fa6d53193..2fa5189cc 100644
--- a/web/containers/Layout/Ribbon/index.tsx
+++ b/web/containers/Layout/Ribbon/index.tsx
@@ -74,6 +74,7 @@ export default function RibbonNav() {
state: MainViewState.Settings,
},
]
+
return (
+
+
+ {/* VERSION is defined by webpack, please see next.config.js */}
+ Jan v{VERSION ?? ''}
+
+ {linksMenu
+ .filter((link) => !!link)
+ .map((link, i) => {
+ return (
+
+
+
+
+ {link.icon}
+
+
+
+ {link.name}
+
+
+
+ )
+ })}
+
diff --git a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
index 976fbf279..c9ccfdfbb 100644
--- a/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
+++ b/web/containers/Layout/TopBar/CommandListDownloadedModel/index.tsx
@@ -26,7 +26,7 @@ export default function CommandListDownloadedModel() {
const onModelActionClick = (modelId: string) => {
if (activeModel && activeModel.id === modelId) {
- stopModel(modelId)
+ stopModel()
} else {
startModel(modelId)
}
diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
index 257af7de2..c830c84e3 100644
--- a/web/containers/Layout/TopBar/index.tsx
+++ b/web/containers/Layout/TopBar/index.tsx
@@ -1,18 +1,31 @@
+import { useState } from 'react'
+
+import { getUserSpace, joinPath, openFileExplorer } from '@janhq/core'
import { useAtomValue, useSetAtom } from 'jotai'
-import { PanelLeftIcon, PenSquareIcon, PanelRightIcon } from 'lucide-react'
+import {
+ PanelLeftIcon,
+ PenSquareIcon,
+ PanelRightIcon,
+ MoreVerticalIcon,
+ FolderOpenIcon,
+ Code2Icon,
+} from 'lucide-react'
+
+import { twMerge } from 'tailwind-merge'
import CommandListDownloadedModel from '@/containers/Layout/TopBar/CommandListDownloadedModel'
import CommandSearch from '@/containers/Layout/TopBar/CommandSearch'
import { MainViewState } from '@/constants/screens'
+import { useClickOutside } from '@/hooks/useClickOutside'
import { useCreateNewThread } from '@/hooks/useCreateNewThread'
import useGetAssistants, { getAssistants } from '@/hooks/useGetAssistants'
import { useMainViewState } from '@/hooks/useMainViewState'
import { showRightSideBarAtom } from '@/screens/Chat/Sidebar'
-import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
+import { activeThreadAtom, threadStatesAtom } from '@/helpers/atoms/Thread.atom'
const TopBar = () => {
const activeThread = useAtomValue(activeThreadAtom)
@@ -20,6 +33,13 @@ const TopBar = () => {
const { requestCreateNewThread } = useCreateNewThread()
const { assistants } = useGetAssistants()
const setShowRightSideBar = useSetAtom(showRightSideBarAtom)
+ const showing = useAtomValue(showRightSideBarAtom)
+ const threadStates = useAtomValue(threadStatesAtom)
+ const [more, setMore] = useState(false)
+ const [menu, setMenu] = useState(null)
+ const [toggle, setToggle] = useState(null)
+
+ useClickOutside(() => setMore(false), null, [menu, toggle])
const titleScreen = (viewStateName: MainViewState) => {
switch (viewStateName) {
@@ -47,15 +67,45 @@ const TopBar = () => {
}
}
+ const onReviewInFinderClick = async () => {
+ if (!activeThread) return
+ const activeThreadState = threadStates[activeThread.id]
+ if (!activeThreadState.isFinishInit) {
+ alert('Thread is not started yet')
+ return
+ }
+
+ const userSpace = await getUserSpace()
+ let filePath = undefined
+ filePath = await joinPath(['threads', activeThread.id])
+
+ if (!filePath) return
+ const fullPath = await joinPath([userSpace, filePath])
+ openFileExplorer(fullPath)
+ }
+
+ const onViewJsonClick = async () => {
+ if (!activeThread) return
+ const activeThreadState = threadStates[activeThread.id]
+ if (!activeThreadState.isFinishInit) {
+ alert('Thread is not started yet')
+ return
+ }
+
+ const userSpace = await getUserSpace()
+ let filePath = undefined
+ filePath = await joinPath(['threads', activeThread.id, 'thread.json'])
+ if (!filePath) return
+ const fullPath = await joinPath([userSpace, filePath])
+ openFileExplorer(fullPath)
+ }
+
return (
{mainViewState === MainViewState.Thread && (
-
- )}
-
- {mainViewState === MainViewState.Thread ? (
-
- = ({
title,
name,
value,
+ description,
placeholder,
}) => {
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)
+ const activeModelParams = useAtomValue(getActiveThreadModelParamsAtom)
+
+ const modelSettingParams = toSettingParams(activeModelParams)
+
+ const engineParams = getConfigurationsData(modelSettingParams)
+
+ const setEngineParamsUpdate = useSetAtom(engineParamsUpdateAtom)
+
+ const { stopModel } = useActiveModel()
+
const onValueChanged = (e: React.ChangeEvent) => {
if (!threadId) return
-
+ if (engineParams.some((x) => x.name.includes(name))) {
+ setEngineParamsUpdate(true)
+ stopModel()
+ } else {
+ setEngineParamsUpdate(false)
+ }
updateModelParameter(threadId, name, e.target.value)
}
return (
+
)
}
diff --git a/web/containers/Loader/ModelReload.tsx b/web/containers/Loader/ModelReload.tsx
new file mode 100644
index 000000000..a432927aa
--- /dev/null
+++ b/web/containers/Loader/ModelReload.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
+
+export default function ModelReload() {
+ const { stateModel } = useActiveModel()
+ const [loader, setLoader] = useState(0)
+
+ // This is fake loader please fix this when we have realtime percentage when load model
+ useEffect(() => {
+ if (stateModel.loading) {
+ if (loader === 24) {
+ setTimeout(() => {
+ setLoader(loader + 1)
+ }, 250)
+ } else if (loader === 50) {
+ setTimeout(() => {
+ setLoader(loader + 1)
+ }, 250)
+ } else if (loader === 78) {
+ setTimeout(() => {
+ setLoader(loader + 1)
+ }, 250)
+ } else if (loader === 99) {
+ setLoader(99)
+ } else {
+ setLoader(loader + 1)
+ }
+ } else {
+ setLoader(0)
+ }
+ }, [stateModel.loading, loader])
+
+ if (!stateModel.loading) return null
+
+ return (
+
+
+ )}
+
+ {mainViewState !== MainViewState.Thread && (
+
+
{
/>
+
+
+
+
+ {titleScreen(mainViewState)}
+
+
+
{activeThread && (
-
+ setShowRightSideBar((show) => !show)}
- >
-
- ) : (
-
+ {showing && (
+
)}
+
+ Threads Settings
+
+
+ )}
+ setMore(!more)}
+ >
+
+
+ {more && (
+
+
+ )}
+ {
+ onReviewInFinderClick()
+ setMore(false)
+ }}
+ >
+
+ {
+ onViewJsonClick()
+ setMore(false)
+ }}
+ >
+
+
+
+ Edit Threads Settings
+
+
+ Opens thread.json. Changes affect this thread
+ only.
+
+
+ setShowRightSideBar((show) => !show)}
+ >
+
-
- {titleScreen(mainViewState)}
-
-
- )}
-
+
+ {titleScreen(mainViewState)}
+
+
+ )}
+
+
+ )
+}
diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
index caa4f7fa3..b7f9e5904 100644
--- a/web/containers/ModelConfigInput/index.tsx
+++ b/web/containers/ModelConfigInput/index.tsx
@@ -1,14 +1,33 @@
-import { Textarea } from '@janhq/uikit'
+import {
+ Textarea,
+ Tooltip,
+ TooltipArrow,
+ TooltipContent,
+ TooltipPortal,
+ TooltipTrigger,
+} from '@janhq/uikit'
-import { useAtomValue } from 'jotai'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { InfoIcon } from 'lucide-react'
+
+import { useActiveModel } from '@/hooks/useActiveModel'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
-import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
+import { getConfigurationsData } from '@/utils/componentSettings'
+
+import { toSettingParams } from '@/utils/model_param'
+
+import {
+ engineParamsUpdateAtom,
+ getActiveThreadIdAtom,
+ getActiveThreadModelParamsAtom,
+} from '@/helpers/atoms/Thread.atom'
type Props = {
title: string
name: string
+ description: string
placeholder: string
value: string
}
@@ -17,20 +36,51 @@ const ModelConfigInput: React.FC
+
+
+ Reloading model {stateModel.model}
+
+
+
-
{title}
+
+
+
+
+
+
+ {description}
+
+
+
+
+ {title} +
+