Skip to content

Commit

Permalink
Revert back save button thread setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@urmauur
urmauur committed Jan 4, 2024
1 parent 0f333c3 commit a653c58
Show file tree
Hide file tree
Showing 12 changed files with 213 additions and 628 deletions.
70 changes: 13 additions & 57 deletions web/containers/Checkbox/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,32 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import React from 'react'

import {
Switch,
Tooltip,
TooltipArrow,
TooltipContent,
TooltipPortal,
TooltipTrigger,
} from '@janhq/uikit'
import { Switch } from '@janhq/uikit'

// import { useAtomValue } from 'jotai'
import { useAtomValue } from 'jotai'

import { InfoIcon } from 'lucide-react'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

// import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

// import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'

type Props = {
name: string
title: string
description: string
value: boolean
checked: boolean
onBlur: () => void
onChange: (e: boolean) => void
}

const Checkbox: React.FC<Props> = ({
name,
value,
title,
checked,
description,
onChange,
onBlur,
}) => {
// const { updateModelParameter } = useUpdateModelParameters()
// const threadId = useAtomValue(getActiveThreadIdAtom)

// const onCheckedChange = (checked: boolean) => {
// if (!threadId) return
const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)

// updateModelParameter(threadId, name, checked)
// }
const onCheckedChange = (checked: boolean) => {
if (!threadId) return
updateModelParameter(threadId, name, checked)
}

return (
<div className="flex justify-between">
<div className="mb-1 flex items-center gap-x-2">
<p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
{title}
</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
<span>{description}</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>

<Switch
name={name}
checked={value !== undefined ? value : checked}
onCheckedChange={(e) => onChange(e)}
onBlur={onBlur}
/>
<p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
<Switch checked={checked} onCheckedChange={onCheckedChange} />
</div>
)
}
Expand Down
131 changes: 24 additions & 107 deletions web/containers/Layout/Ribbon/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@ import {
} from '@janhq/uikit'
import { motion as m } from 'framer-motion'

import { useAtomValue } from 'jotai'
import {
MessageCircleIcon,
SettingsIcon,
MonitorIcon,
LayoutGridIcon,
Twitter,
Github,
// Twitter,
// Github,
} from 'lucide-react'

import { twMerge } from 'tailwind-merge'
Expand All @@ -34,13 +33,8 @@ import { MainViewState } from '@/constants/screens'

import { useMainViewState } from '@/hooks/useMainViewState'

import { threadSettingFormUpdateAtom } from '@/helpers/atoms/Thread.atom'

export default function RibbonNav() {
const { mainViewState, setMainViewState } = useMainViewState()
const threadSettingFormUpdate = useAtomValue(threadSettingFormUpdateAtom)
const [showModalUpdateThreadSetting, setshowModalUpdateThreadSetting] =
useState({ show: false, view: mainViewState })

const onMenuClick = (state: MainViewState) => {
if (mainViewState === state) return
Expand Down Expand Up @@ -70,22 +64,22 @@ export default function RibbonNav() {
},
]

const linksMenu = [
{
name: 'Twitter',
icon: (
<Twitter size={20} className="flex-shrink-0 text-muted-foreground" />
),
link: 'https://twitter.com/janhq_',
},
{
name: 'Github',
icon: (
<Github size={20} className="flex-shrink-0 text-muted-foreground" />
),
link: 'https://github.com/janhq/jan',
},
]
// const linksMenu = [
// {
// name: 'Twitter',
// icon: (
// <Twitter size={20} className="flex-shrink-0 text-muted-foreground" />
// ),
// link: 'https://twitter.com/janhq_',
// },
// {
// name: 'Github',
// icon: (
// <Github size={20} className="flex-shrink-0 text-muted-foreground" />
// ),
// link: 'https://github.com/janhq/jan',
// },
// ]

const secondaryMenus = [
{
Expand Down Expand Up @@ -132,23 +126,7 @@ export default function RibbonNav() {
'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center',
isActive && 'z-10'
)}
onClick={() => {
if (
threadSettingFormUpdate &&
mainViewState === MainViewState.Thread
) {
setshowModalUpdateThreadSetting({
show: true,
view: primary.state,
})
} else {
setshowModalUpdateThreadSetting({
show: false,
view: mainViewState,
})
onMenuClick(primary.state)
}
}}
onClick={() => onMenuClick(primary.state)}
>
{primary.icon}
</div>
Expand All @@ -170,7 +148,8 @@ export default function RibbonNav() {
</div>

<div>
<>
{/* Temporary hidden social media until we finalize design */}
{/* <>
{linksMenu
.filter((link) => !!link)
.map((link, i) => {
Expand All @@ -195,7 +174,8 @@ export default function RibbonNav() {
</div>
)
})}
</>
</> */}

{secondaryMenus
.filter((secondary) => !!secondary)
.map((secondary, i) => {
Expand All @@ -210,23 +190,7 @@ export default function RibbonNav() {
'relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center',
isActive && 'z-10'
)}
onClick={() => {
if (
threadSettingFormUpdate &&
mainViewState === MainViewState.Thread
) {
setshowModalUpdateThreadSetting({
show: true,
view: secondary.state,
})
} else {
setshowModalUpdateThreadSetting({
show: false,
view: mainViewState,
})
onMenuClick(secondary.state)
}
}}
onClick={() => onMenuClick(secondary.state)}
>
{secondary.icon}
</div>
Expand All @@ -248,53 +212,6 @@ export default function RibbonNav() {
</div>
</div>
</div>

<Modal
open={showModalUpdateThreadSetting.show}
onOpenChange={() =>
setshowModalUpdateThreadSetting({
show: false,
view: mainViewState,
})
}
>
<ModalContent>
<ModalHeader>
<ModalTitle>
<div className="text-lg">Unsave changes</div>
</ModalTitle>
<ModalDescription>
<p className="mb-2">
You have unsave changes. Are you sure you want to leave this
page?
</p>
</ModalDescription>
</ModalHeader>
<ModalFooter>
<div className="flex gap-x-2">
<ModalClose asChild>
<Button themes="secondary" block>
Stay
</Button>
</ModalClose>
<Button
themes="danger"
autoFocus
block
onClick={() => {
setshowModalUpdateThreadSetting({
show: false,
view: mainViewState,
})
onMenuClick(showModalUpdateThreadSetting.view)
}}
>
Leave
</Button>
</div>
</ModalFooter>
</ModalContent>
</Modal>
</div>
)
}
2 changes: 1 addition & 1 deletion web/containers/Layout/TopBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ const TopBar = () => {
/>
<div className="flex flex-col">
<span className="font-medium text-black dark:text-muted-foreground">
View as JSON
Edit Threads Settings
</span>
<span className="mt-1 text-muted-foreground">
Opens thread.json. Changes affect this thread
Expand Down
56 changes: 12 additions & 44 deletions web/containers/ModelConfigInput/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,39 @@
import {
Textarea,
Tooltip,
TooltipPortal,
TooltipArrow,
TooltipContent,
TooltipTrigger,
} from '@janhq/uikit'
import { Textarea } from '@janhq/uikit'

// import { useAtomValue } from 'jotai'
import { useAtomValue } from 'jotai'

import { InfoIcon } from 'lucide-react'
import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

// import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'

// import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'

type Props = {
title: string
name: string
description: string
placeholder: string
value: string
onBlur: () => void
onChange: () => void
}

const ModelConfigInput: React.FC<Props> = ({
title,
name,
value,
description,
placeholder,
onChange,
onBlur,
}) => {
// const { updateModelParameter } = useUpdateModelParameters()
// const threadId = useAtomValue(getActiveThreadIdAtom)
const { updateModelParameter } = useUpdateModelParameters()
const threadId = useAtomValue(getActiveThreadIdAtom)

// const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
// if (!threadId) return
const onValueChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
if (!threadId) return

// updateModelParameter(threadId, name, e.target.value)
// }
updateModelParameter(threadId, name, e.target.value)
}

return (
<div className="flex flex-col">
<div className="mb-4 flex items-center gap-x-2">
<p className="text-sm font-semibold text-zinc-500 dark:text-gray-300">
{title}
</p>
<Tooltip>
<TooltipTrigger asChild>
<InfoIcon size={16} className="flex-shrink-0 dark:text-gray-500" />
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side="top" className="max-w-[240px]">
<span>{description}</span>
<TooltipArrow />
</TooltipContent>
</TooltipPortal>
</Tooltip>
</div>
<p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
<Textarea
name={name}
placeholder={placeholder}
onChange={onChange}
onBlur={onBlur}
onChange={onValueChanged}
value={value}
/>
</div>
Expand Down
Loading

0 comments on commit a653c58

Please sign in to comment.