feat: finished new UI thread setting pannel

luozhenyu336 · Jan 4, 2024 · 590fa67 · 590fa67
1 parent 2332c4e
commit 590fa67
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 105 deletions.
diff --git a/uikit/src/tooltip/index.tsx b/uikit/src/tooltip/index.tsx
@@ -8,6 +8,8 @@ const TooltipProvider = TooltipPrimitive.Provider
 
 const Tooltip = TooltipPrimitive.Root
 
+const TooltipPortal = TooltipPrimitive.Portal
+
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
@@ -37,4 +39,5 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipArrow,
+  TooltipPortal,
 }
diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx
@@ -13,14 +13,16 @@ import { useClickOutside } from '@/hooks/useClickOutside'
 interface Props {
   children: ReactNode
   title: string
-  onRevealInFinderClick: (type: string) => void
-  onViewJsonClick: (type: string) => void
+  onRevealInFinderClick?: (type: string) => void
+  onViewJsonClick?: (type: string) => void
+  asChild?: boolean
 }
 export default function CardSidebar({
   children,
   title,
   onRevealInFinderClick,
   onViewJsonClick,
+  asChild,
 }: Props) {
   const [show, setShow] = useState(true)
   const [more, setMore] = useState(false)
@@ -39,7 +41,8 @@ export default function CardSidebar({
   return (
     <div
       className={twMerge(
-        'flex w-full flex-col overflow-hidden border-t border-border bg-zinc-200 dark:bg-zinc-600/10'
+        'flex w-full flex-col border-t border-border bg-zinc-100 dark:bg-zinc-600/10',
+        asChild ? 'rounded-lg border' : 'border-t'
       )}
     >
       <div
@@ -50,16 +53,18 @@ export default function CardSidebar({
       >
         <span className="font-bold">{title}</span>
         <div className="flex">
-          <div
-            ref={setToggle}
-            className="cursor-pointer rounded-md bg-zinc-200 p-2 pr-0 dark:bg-zinc-600/10"
-            onClick={() => setMore(!more)}
-          >
-            <MoreVerticalIcon className="h-5 w-5" />
-          </div>
+          {!asChild && (
+            <div
+              ref={setToggle}
+              className="cursor-pointer rounded-lg bg-zinc-100 p-2 pr-0 dark:bg-zinc-600/10"
+              onClick={() => setMore(!more)}
+            >
+              <MoreVerticalIcon className="h-5 w-5" />
+            </div>
+          )}
           <button
             onClick={() => setShow(!show)}
-            className="flex w-full flex-1 items-center space-x-2 bg-zinc-200 px-3 py-2 dark:bg-zinc-600/10"
+            className="flex w-full flex-1 items-center space-x-2 rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-600/10"
           >
             <ChevronDownIcon
               className={twMerge(
@@ -72,38 +77,76 @@ export default function CardSidebar({
 
         {more && (
           <div
-            className="absolute right-0 top-8 z-20 w-52 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
+            className="absolute right-4 top-8 z-20 w-64 rounded-lg border border-border bg-background shadow-lg"
             ref={setMenu}
           >
             <div
-              className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+              className={twMerge(
+                'flex cursor-pointer space-x-2 px-4 py-2 hover:bg-secondary',
+                title === 'Model' ? 'items-start' : 'items-center'
+              )}
               onClick={() => {
-                onRevealInFinderClick(title)
+                onRevealInFinderClick && onRevealInFinderClick(title)
                 setMore(false)
               }}
             >
-              <FolderOpenIcon size={16} className="text-muted-foreground" />
-              <span className="text-bold text-black dark:text-muted-foreground">
-                {openFolderTitle}
-              </span>
+              <FolderOpenIcon
+                size={16}
+                className={twMerge(
+                  'flex-shrink-0 text-muted-foreground',
+                  title === 'Model' && 'mt-1'
+                )}
+              />
+              <>
+                {title === 'Model' ? (
+                  <div className="flex flex-col">
+                    <span className="font-medium text-black dark:text-muted-foreground">
+                      {openFolderTitle}
+                    </span>
+                    <span className="mt-1 text-muted-foreground">
+                      Opens thread.json. Changes affect this thread only.
+                    </span>
+                  </div>
+                ) : (
+                  <span className="text-bold text-black dark:text-muted-foreground">
+                    {openFolderTitle}
+                  </span>
+                )}
+              </>
             </div>
             <div
-              className="flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-secondary"
+              className="flex cursor-pointer items-start space-x-2 px-4 py-2 hover:bg-secondary"
               onClick={() => {
-                onViewJsonClick(title)
+                onViewJsonClick && onViewJsonClick(title)
                 setMore(false)
               }}
             >
-              <Code2Icon size={16} className="text-muted-foreground" />
-              <span className="text-bold text-black dark:text-muted-foreground">
-                View as JSON
-              </span>
+              <Code2Icon
+                size={16}
+                className="mt-0.5 flex-shrink-0 text-muted-foreground"
+              />
+              <>
+                <div className="flex flex-col">
+                  <span className="font-medium text-black dark:text-muted-foreground">
+                    View as JSON
+                  </span>
+                  <span className="mt-1 text-muted-foreground">
+                    Opens <span className="lowercase">{title}.json.</span>&nbsp;
+                    Changes affect all new threads.
+                  </span>
+                </div>
+              </>
             </div>
           </div>
         )}
       </div>
       {show && (
-        <div className="flex flex-col gap-2 bg-white p-2 dark:bg-background">
+        <div
+          className={twMerge(
+            'flex flex-col gap-2 bg-white p-2 dark:bg-background',
+            asChild && 'rounded-b-lg'
+          )}
+        >
           {children}
         </div>
       )}

diff --git a/web/containers/Checkbox/index.tsx b/web/containers/Checkbox/index.tsx
@@ -1,20 +1,30 @@
 import React from 'react'
 
-import { Switch } from '@janhq/uikit'
+import {
+  Switch,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
 
+import { InfoIcon } from 'lucide-react'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
   title: string
+  description: string
   checked: boolean
 }
 
-const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
+const Checkbox: React.FC<Props> = ({ name, title, checked, description }) => {
   const { updateModelParameter } = useUpdateModelParameters()
   const threadId = useAtomValue(getActiveThreadIdAtom)
 
@@ -26,7 +36,21 @@ const Checkbox: React.FC<Props> = ({ name, title, checked }) => {
 
   return (
     <div className="flex justify-between">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-1 flex items-center gap-x-2">
+        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InfoIcon size={16} className="flex-shrink-0" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
+
       <Switch checked={checked} onCheckedChange={onCheckedChange} />
     </div>
   )

diff --git a/web/containers/Layout/TopBar/index.tsx b/web/containers/Layout/TopBar/index.tsx
@@ -177,7 +177,7 @@ const TopBar = () => {
                         >
                           <Code2Icon
                             size={16}
-                            className="mt-1 flex-shrink-0 text-muted-foreground"
+                            className="mt-0.5 flex-shrink-0 text-muted-foreground"
                           />
                           <div className="flex flex-col">
                             <span className="font-medium text-black dark:text-muted-foreground">

diff --git a/web/containers/ModelConfigInput/index.tsx b/web/containers/ModelConfigInput/index.tsx
@@ -1,14 +1,24 @@
-import { Textarea } from '@janhq/uikit'
+import {
+  Textarea,
+  Tooltip,
+  TooltipPortal,
+  TooltipArrow,
+  TooltipContent,
+  TooltipTrigger,
+} from '@janhq/uikit'
 
 import { useAtomValue } from 'jotai'
 
+import { InfoIcon } from 'lucide-react'
+
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   title: string
   name: string
+  description: string
   placeholder: string
   value: string
 }
@@ -17,6 +27,7 @@ const ModelConfigInput: React.FC<Props> = ({
   title,
   name,
   value,
+  description,
   placeholder,
 }) => {
   const { updateModelParameter } = useUpdateModelParameters()
@@ -30,7 +41,20 @@ const ModelConfigInput: React.FC<Props> = ({
 
   return (
     <div className="flex flex-col">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-4 flex items-center gap-x-2">
+        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InfoIcon size={16} className="flex-shrink-0" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
       <Textarea
         placeholder={placeholder}
         onChange={onValueChanged}

diff --git a/web/containers/Slider/index.tsx b/web/containers/Slider/index.tsx
@@ -1,14 +1,22 @@
 import React from 'react'
 
-import { Slider, Input } from '@janhq/uikit'
+import { Slider, Input, TooltipPortal } from '@janhq/uikit'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipArrow,
+} from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
+import { InfoIcon } from 'lucide-react'
 
 import useUpdateModelParameters from '@/hooks/useUpdateModelParameters'
 
 import { getActiveThreadIdAtom } from '@/helpers/atoms/Thread.atom'
 
 type Props = {
   name: string
+  description: string
   title: string
   min: number
   max: number
@@ -21,6 +29,7 @@ const SliderRightPanel: React.FC<Props> = ({
   title,
   min,
   max,
+  description,
   step,
   value,
 }) => {
@@ -29,13 +38,25 @@ const SliderRightPanel: React.FC<Props> = ({
 
   const onValueChanged = (e: number[]) => {
     if (!threadId) return
-
     updateModelParameter(threadId, name, e[0])
   }
 
   return (
     <div className="flex flex-col">
-      <p className="mb-2 text-sm font-semibold text-gray-600">{title}</p>
+      <div className="mb-4 flex items-center gap-x-2">
+        <p className="text-sm font-semibold text-gray-600">{title}</p>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InfoIcon size={16} className="flex-shrink-0" />
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="top" className="max-w-[240px]">
+              <span>{description}</span>
+              <TooltipArrow />
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      </div>
       <div className="flex items-center gap-x-4">
         <div className="relative w-full">
           <Slider