Conversation tagging

components/KernDropdown.tsx

@@ -84,6 +84,7 @@ export default function KernDropdown(props: KernDropdownProps) {
             case "bottom": return "-translate-x-1/2 left-1/2 top-full";
             case "left": return "-translate-y-1/2 top-1/2 right-full";
             case "right": return "-translate-y-1/2 top-1/2 left-full";
+            case "leftBottom": return "top-3/4 right-full";
         }
     }, [props.positionDropdown]);
 

components/SVGIcon.tsx

@@ -1,64 +1,66 @@
 import { IconHammer, IconSettingsFilled, IconZoomIn, IconZoomOut } from '@tabler/icons-react';
-import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTrash } from './kern-icons/icons';
+import { MemoIconBolt, MemoIconChevronDown, MemoIconCode, MemoIconDotsVertical, MemoIconEdit, MemoIconExternalLink, MemoIconFileInfo, MemoIconFilePencil, MemoIconLoader, MemoIconPlayerPlayFilled, MemoIconPlus, MemoIconSettings, MemoIconShieldCheckFilled, MemoIconShieldFilled, MemoIconSquare, MemoIconSquareCheck, MemoIconTag, MemoIconTrash } from './kern-icons/icons';
 
 export const SUPPORTED_ICONS = ['IconCode', 'IconBolt', 'IconSquareCheck', 'IconSquare', 'IconPlayerPlayFilled', 'IconTrash', 'IconExternalLink',
     'IconLoader', 'IconFilePencil', 'IconFileInfo', 'IconEdit', 'IconShieldFilled', 'IconShieldCheckFilled', 'IconPlus', 'IconSettings', 'IconSettingsFilled',
-    'IconHammer', 'IconZoomIn', 'IconZoomOut'
-
+    'IconHammer', 'IconZoomIn', 'IconZoomOut', 'IconTag'
 ]
 
 type SVGIconProps = {
     icon: string,
     size?: number,
     strokeWidth?: number,
-    useFillForIcons?: boolean
+    useFillForIcons?: boolean,
+    addClasses?: string
 }
 
 export default function SVGIcon(props: SVGIconProps) {
     switch (props.icon) {
+        case 'IconTag':
+            return <MemoIconTag size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconCode':
-            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconCode size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconBolt':
-            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconBolt size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSquareCheck':
-            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquareCheck size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSquare':
-            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSquare size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconPlayerPlayFilled':
-            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlayerPlayFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconTrash':
-            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconTrash size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconExternalLink':
-            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconExternalLink size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconChevronDown':
-            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconChevronDown size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconDotsVertical':
-            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconDotsVertical size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconLoader':
-            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconFilePencil':
-            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFilePencil size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconFileInfo':
-            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconFileInfo size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconEdit':
-            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconEdit size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconShieldFilled':
-            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconShieldCheckFilled':
-            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconShieldCheckFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconPlus':
-            return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconPlus size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSettings':
-            return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <MemoIconSettings size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconSettingsFilled':
-            return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconSettingsFilled size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconHammer':
-            return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconHammer size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconZoomIn':
-            return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconZoomIn size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
         case 'IconZoomOut':
-            return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
-        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''}`} />
+            return <IconZoomOut size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
+        default: return <MemoIconLoader size={props.size} strokeWidth={props.strokeWidth} className={`${props.useFillForIcons ? 'fill-gray-800' : ''} ${props.addClasses}`} />
     }
 
 }

components/SwitchWithLabel.tsx

@@ -0,0 +1,51 @@
+import { combineClassNames } from "@/submodules/javascript-functions/general";
+import { Switch } from "@headlessui/react";
+import { Tooltip } from "@nextui-org/react";
+import { useMemo } from "react";
+import { MemoIconAlertCircle, MemoIconAlertTriangle } from "./kern-icons/icons";
+
+
+type Props = {
+    checked: boolean;
+    onChange: () => void;
+    label: string;
+    colorLabel?: string;
+    colorActive?: string;
+    colorInactive?: string;
+    addClassesGroup?: string;
+    tooltip?: string;
+}
+
+export default function SwitchWithLabel(props: Props) {
+
+    const finalColorActive = props.colorActive || 'bg-green-600';
+    const finalColorInactive = props.colorInactive || 'bg-gray-200';
+    const finalColorLabel = props.colorLabel || 'text-gray-700';
+
+    const tooltip = useMemo(() => props.tooltip ? <Tooltip content={props.tooltip} color="invert" placement="top"><MemoIconAlertTriangle className="w-6 h-6" /></Tooltip> : null, [props.tooltip])
+
+    return <Switch.Group as="div" className={combineClassNames("flex items-center justify-between", props.addClassesGroup)}>
+        <Switch.Description as="span" className={`font-medium ${finalColorLabel}`}>
+            {props.label}
+        </Switch.Description>
+        <div className="flex flex-row gap-x-2 items-center">
+            <Switch
+                checked={props.checked}
+                onChange={props.onChange}
+                className={combineClassNames(
+                    props.checked ? finalColorActive : finalColorInactive,
+                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2'
+                )}
+            >
+                <span
+                    aria-hidden="true"
+                    className={combineClassNames(
+                        props.checked ? 'translate-x-5' : 'translate-x-0',
+                        'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                    )}
+                />
+            </Switch>
+            {tooltip}
+        </div>
+    </Switch.Group>
+}

hooks/enums/useEnumOptionsTranslated.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 const cache = {};
 
-function getEnumOptionsForLanguage<T>(enumObj: T, lookupKey: string, t: any, language: string): { name: string, value: T }[] {
+function getEnumOptionsForLanguage<T>(enumObj: T, lookupKey: string, t: any, language: string): { name: string, value: T[keyof T] }[] {
     if (!(lookupKey in cache)) cache[lookupKey] = {};
     if (cache[lookupKey][language]) return cache[lookupKey][language];
     const finalArray = enumToArray(enumObj, { nameFunction: (s) => { return t(`${lookupKey}.${s}`) } });
@@ -16,7 +16,7 @@ function getEnumOptionsForLanguage<T>(enumObj: T, lookupKey: string, t: any, lan
 // unfortunately we need to provide the lookupKey ourselves which is the Enum name itself.
 // there is no way to get the name of the enum at runtime since they are compiled away
 // https://stackoverflow.com/a/59824941/19801189
-export default function useEnumOptionsTranslated<T>(enumObj: T, lookupKey: string, translationScope: string): { name: string, value: T }[] {
+export default function useEnumOptionsTranslated<T>(enumObj: T, lookupKey: string, translationScope: string): { name: string, value: T[keyof T] }[] {
     const { t, i18n } = useTranslation(translationScope);
     const values = useMemo(() => getEnumOptionsForLanguage(enumObj, lookupKey, t, i18n.language), [i18n.language]);
     return values;

hooks/enums/useEnumStateTranslated.tsx

@@ -6,9 +6,9 @@ import useRefState from "../useRefState";
 // only works if the corresponding enum is translated in the i18n file with the lookupKey
 // example: cognition-ui> PATExpiresAt
 export default function useEnumStateTranslated<T>(enumObj: T, lookupKey: string, translationScope?: string): [
-    { name: string, value: T },
-    Dispatch<SetStateAction<{ name: string; value: T; }>>,
-    { name: string, value: T }[]
+    { name: string, value: T[keyof T] },
+    Dispatch<SetStateAction<{ name: string; value: T[keyof T]; }>>,
+    { name: string, value: T[keyof T] }[]
 ] {
     const _translationScope = translationScope || 'enums';
     const options = useEnumOptionsTranslated(enumObj, lookupKey, _translationScope);

types/dropdown.ts

@@ -89,7 +89,7 @@ export type KernDropdownProps = {
     fontSizeClass?: string;
     filteredOptions?: (option: string) => void;
     ignoreDisabledForSearch?: boolean;
-    positionDropdown?: "top" | "bottom" | "left" | "right";
+    positionDropdown?: "top" | "bottom" | "left" | "right" | "leftBottom";
     scrollAfterNOptions?: number;
     dropdownAdd?: JSX.Element[];
     forceOverwriteOpen?: boolean;