Skip to content

Commit

Permalink
Introduce Tooltip & Improved Intelligence Settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Dec 17, 2024
1 parent e7a8e66 commit 686c02c
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 44 deletions.
89 changes: 52 additions & 37 deletions web/src/components/settings/InstanceSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useHasPolicy } from '@/api/policy';
import { BaseInput } from '../input/BaseInput';
import { Button } from '../ui/Button';
import * as Dropdown from '../ui/Dropdown';
import { Label } from '../ui/Label';

export const InstanceSettings = () => {
const { data: instanceSettings } = useSuspenseQuery(getInstanceSettings());
Expand Down Expand Up @@ -47,7 +48,7 @@ export const InstanceSettings = () => {
}}
className="space-y-4"
>
<h2>Instance Settings</h2>
<h2 className="font-bold">Instance Settings</h2>
{/* <pre className="bg-black/5 p-4 rounded-lg text-wrap">
{JSON.stringify(instanceSettings.modules, undefined, 2)}
</pre> */}
Expand All @@ -56,43 +57,57 @@ export const InstanceSettings = () => {
name="id_casing_preference"
children={(field) => {
return (
<>
<Dropdown.Root>
<Dropdown.Trigger asChild>
<Button variant="default">
{field.state.value}
</Button>
</Dropdown.Trigger>
<Dropdown.Content className="w-56">
<Dropdown.Label>
ID Casing Preference
</Dropdown.Label>
<Dropdown.Separator />
<Dropdown.RadioGroup
value={field.state.value}
onValueChange={(value) =>
field.handleChange(
value as
| 'upper'
| 'lower'
)
}
>
{['upper', 'lower'].map(
(value) => {
return (
<Dropdown.RadioItem
value={value}
>
{value}
</Dropdown.RadioItem>
);
<div className="space-y-2">
<Label htmlFor="id_casing_preference">
ID Casing Preference
</Label>
<div>
<Dropdown.Root>
<Dropdown.Trigger asChild>
<Button variant="default">
{field.state.value}
</Button>
</Dropdown.Trigger>
<Dropdown.Content className="w-56">
<Dropdown.Label>
ID Casing Preference
</Dropdown.Label>
<Dropdown.Separator />
<Dropdown.RadioGroup
value={field.state.value}
onValueChange={(value) =>
field.handleChange(
value as
| 'upper'
| 'lower'
)
}
)}
</Dropdown.RadioGroup>
</Dropdown.Content>
</Dropdown.Root>
</>
>
{['upper', 'lower'].map(
(value) => {
return (
<Dropdown.RadioItem
value={
value
}
>
{value}
</Dropdown.RadioItem>
);
}
)}
</Dropdown.RadioGroup>
</Dropdown.Content>
</Dropdown.Root>
</div>
<p className="text-sm text-neutral-500">
This setting controls the
capitalization-correction for items in
your database. With "Upper" selected,
the item ID "ab123" will be corrected to
"AB123".
</p>
</div>
);
}}
/>
Expand Down
30 changes: 23 additions & 7 deletions web/src/components/ui/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { FC, PropsWithChildren, ReactNode } from 'react';
import { FiInfo } from 'react-icons/fi';

export const Tooltip = TooltipPrimitive.Provider;
export const TooltipRoot = TooltipPrimitive.Root;

export const TooltipTrigger = TooltipPrimitive.Trigger;
export const TooltipPortal = TooltipPrimitive.Portal;
export const TooltipContent = TooltipPrimitive.Content;
export const TooltipArrow = TooltipPrimitive.Arrow;
export const Tooltip: FC<PropsWithChildren<{ trigger?: ReactNode }>> = ({
trigger,
children,
}) => {
return (
<TooltipPrimitive.TooltipProvider>
<TooltipPrimitive.Tooltip>
<TooltipPrimitive.TooltipTrigger>
{trigger || <FiInfo />}
</TooltipPrimitive.TooltipTrigger>
<TooltipPrimitive.TooltipContent
className="TooltipContent border drop-shadow-sm max-w-sm"
sideOffset={5}
>
{children}
<TooltipPrimitive.TooltipArrow className="TooltipArrow" />
</TooltipPrimitive.TooltipContent>
</TooltipPrimitive.Tooltip>
</TooltipPrimitive.TooltipProvider>
);
};
34 changes: 34 additions & 0 deletions web/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,3 +371,37 @@ a {
.loading-dots span:nth-child(3) {
animation-delay: 400ms;
}


.TooltipContent {
border-radius: 4px;
padding: 10px 15px;
font-size: 15px;
line-height: 1;
color: var(--violet-11);
background-color: white;
user-select: none;
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.TooltipContent[data-state="delayed-open"][data-side="top"] {
animation-name: slideDownAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="right"] {
animation-name: slideLeftAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="bottom"] {
animation-name: slideUpAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="left"] {
animation-name: slideRightAndFade;
}

.TooltipArrow {
fill: #999;
}

.code {
@apply bg-neutral-100 rounded-md px-1 py-0.5;
}
41 changes: 41 additions & 0 deletions web/src/routes/settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { SearchTaskTable } from '@/components/search_tasks/SearchTaskTable';
import { BuildDetails } from '@/components/settings/BuildDetails';
import { InstanceSettings } from '@/components/settings/InstanceSettings';
import { Button } from '@/components/ui/Button';
import { Tooltip } from '@/components/ui/Tooltip';
import { UserApiKeysTable } from '@/components/user_api_keys/UserApiKeysTable';
import { UserProfile } from '@/components/UserProfile';
import { SCPage } from '@/layouts/SimpleCenterPage';
Expand Down Expand Up @@ -70,6 +71,26 @@ export const Route = createFileRoute('/settings/')({
<div className="font-bold flex items-center gap-2">
<SiGooglegemini />
Gemini
<Tooltip>
<div className="space-y-2 pt-2">
<div className="flex items-center gap-2">
<SiGooglegemini />
<span>Gemini</span>
</div>
<p>
Gemini is a large language
model.
</p>
<p className="text-sm text-neutral-500">
You can enable gemini by
setting the{' '}
<code className="code">
GEMINI_API_KEY
</code>{' '}
via environment variables.
</p>
</div>
</Tooltip>
</div>
</div>
)}
Expand All @@ -78,6 +99,26 @@ export const Route = createFileRoute('/settings/')({
<div className="font-bold flex items-center gap-2">
<SiOllama />
Ollama
<Tooltip>
<div className="space-y-2 pt-2">
<div className="flex items-center gap-2">
<SiOllama />
<span>Ollama</span>
</div>
<p>
Ollama is a large language
model.
</p>
<p className="text-sm text-neutral-500 font-normal">
You can enable ollama by
setting the{' '}
<code className="code">
OLLAMA_API_KEY
</code>{' '}
via environment variables.
</p>
</div>
</Tooltip>
</div>
</div>
)}
Expand Down

0 comments on commit 686c02c

Please sign in to comment.