From 686c02cd51098ce8df712fa59c4d38bc7eba9179 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Tue, 17 Dec 2024 06:00:32 +0100
Subject: [PATCH] Introduce Tooltip & Improved Intelligence Settings

---
 .../components/settings/InstanceSettings.tsx  | 89 +++++++++++--------
 web/src/components/ui/Tooltip.tsx             | 30 +++++--
 web/src/index.css                             | 34 +++++++
 web/src/routes/settings/index.tsx             | 41 +++++++++
 4 files changed, 150 insertions(+), 44 deletions(-)

diff --git a/web/src/components/settings/InstanceSettings.tsx b/web/src/components/settings/InstanceSettings.tsx
index b258aab..cc1d497 100644
--- a/web/src/components/settings/InstanceSettings.tsx
+++ b/web/src/components/settings/InstanceSettings.tsx
@@ -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());
@@ -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> */}
@@ -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>
                             );
                         }}
                     />
diff --git a/web/src/components/ui/Tooltip.tsx b/web/src/components/ui/Tooltip.tsx
index 2d8660c..b09e7cf 100644
--- a/web/src/components/ui/Tooltip.tsx
+++ b/web/src/components/ui/Tooltip.tsx
@@ -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>
+    );
+};
diff --git a/web/src/index.css b/web/src/index.css
index e1023d0..58fc2db 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -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;
+}
diff --git a/web/src/routes/settings/index.tsx b/web/src/routes/settings/index.tsx
index a9761e3..e6f539b 100644
--- a/web/src/routes/settings/index.tsx
+++ b/web/src/routes/settings/index.tsx
@@ -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';
@@ -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>
                             )}
@@ -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>
                             )}