New cells for the last messages

components/KernDropdown.tsx

@@ -61,7 +61,7 @@ export default function KernDropdown(props: KernDropdownProps) {
             setDropdownCaptions(prepareOptions);
             setSearchIndexes(null);
         }
-    }, [props.options, searchText, selectedCheckboxes, props.hasSearchBar, props.hasCheckboxes, props.selectedCheckboxes, props.hasSelectAll, props.valuePropertyPath]);
+    }, [props.options, searchText, props.hasSearchBar, props.hasCheckboxes, props.valuePropertyPath, props.selectedCheckboxes, props.hasSelectAll]);
 
     useEffect(() => {
         if (!props.disabledOptions || !props.options) return;
@@ -94,8 +94,7 @@ export default function KernDropdown(props: KernDropdownProps) {
         return { "maxHeight": `${maxHeight}rem`, "overflowY": "auto" };
     }, [props.scrollAfterNOptions]);
 
-    function setOptionsWithCheckboxes(options: any[]) {
-        if (selectedCheckboxes.length > 0) return;
+    const setOptionsWithCheckboxes = useCallback((options: any[]) => {
         const newSelectedCheckboxes = options.map((option: any, index: number) => {
             return {
                 name: option,
@@ -110,15 +109,15 @@ export default function KernDropdown(props: KernDropdownProps) {
         }
         setSelectedCheckboxes(newSelectedCheckboxes);
         setDropdownCaptions(newSelectedCheckboxes.map((option: any) => option.name));
-    }
+    }, [props.hasSelectAll, props.selectedCheckboxes]);
 
     function toggleDropdown() {
         if (isDisabled && !props.hasCheckboxes) return; // if the dropdown has checkboxes, it shouldn't be disabled because the user can still select options
         if (isOpen && props.keepDrownOpen) return;
         setIsOpen(!isOpen);
     }
 
-    function handleSelectedCheckboxes(option: string, index: number, e: any) {
+    const handleSelectedCheckboxes = useCallback((option: string, index: number, e: any) => {
         let newSelectedCheckboxes = [...selectedCheckboxes];
         if (option == SELECT_ALL) {
             newSelectedCheckboxes.forEach((checkbox) => {
@@ -136,7 +135,7 @@ export default function KernDropdown(props: KernDropdownProps) {
             newSelectedCheckboxes = newSelectedCheckboxes.filter((checkbox) => checkbox.name != SELECT_ALL);
         }
         props.selectedOption(newSelectedCheckboxes);
-    }
+    }, [selectedCheckboxes, props.hasSelectAll]);
 
     function handleSelectedCheckboxesThreeStates(index: number) {
         const optionSave = { ...props.options[index] };
@@ -161,8 +160,7 @@ export default function KernDropdown(props: KernDropdownProps) {
         setSavedIndex(index);
     }
 
-
-    function performActionOnClick(option: string, index: number) {
+    const performActionOnClick = useCallback((option: string, index: number) => {
         if (props.hasCheckboxes) {
             handleSelectedCheckboxes(option, index, { target: { checked: !selectedCheckboxes[index].checked } });
             return;
@@ -180,8 +178,9 @@ export default function KernDropdown(props: KernDropdownProps) {
                 props.selectedOption(props.options[index]);
             }
             setIsOpen(false);
+            setSelectedCheckboxes([]);
         }
-    }
+    }, [props, selectedCheckboxes, searchIndexes]);
 
     return (
         <Menu ref={dropdownRef} as="div" className={`relative inline-block text-left ${props.dropdownWidth ?? 'w-full'} ${props.dropdownClasses ?? ''} ${props.fontClass ?? ''}`}>
@@ -266,7 +265,7 @@ export default function KernDropdown(props: KernDropdownProps) {
                                                         if (!props.optionsHaveHoverBox) return;
                                                         setHoverBoxPosition(null);
                                                     }}>
-                                                    {props.hasCheckboxes && <input checked={selectedCheckboxes[index].checked} name="option" type="checkbox" className="mr-3 cursor-pointer"
+                                                    {props.hasCheckboxes && <input checked={!!selectedCheckboxes[index]?.checked} name="option" type="checkbox" className="mr-3 cursor-pointer"
                                                         onChange={(e) => handleSelectedCheckboxes(option, index, e)} />}
                                                     {props.hasCheckboxesThreeStates && <div className="h-4 w-4 border-gray-300 mr-3 border rounded hover:bg-gray-200 min-w-4"
                                                         style={{ backgroundColor: getActiveNegateGroupColor(props.options[index]), borderColor: getActiveNegateGroupColor(props.options[index]) }}>

components/kern-table/CellComponents.tsx

@@ -345,4 +345,28 @@ function ConfigReleaseNotificationCell({ onClickView, onClickEdit }) {
     </div>;
 }
 
-export { OrganizationAndUsersCell, MaxRowsColsCharsCell, CommentsCell, ExportConsumptionAndDeleteCell, BadgeCell, OrganizationUserCell, DeleteCell, LevelCell, ArchiveReasonCell, ProjectNameTaskCell, CancelTaskCell, IconCell, ConfigCell, EditDeleteOrgButtonCell, ViewStackCell, AbortSessionButtonCell, FeedbackMessageCell, FeedbackMessageTextCell, JumpToConversationCell, RemoteVersionCell, ExternalLinkCell, ModelDateCell, FileSizeCell, StatusModelCell, DeleteModelCell, LabelCell, ViewCell, EvaluationRunStateCell, EvaluationRunDetailsCell, EtlApiTokenCell, EmailCell, EditIntegrationCell, ExpiredTokenCell, LinkCell, ConfigReleaseNotificationCell }
+function TruncateAndTooltipCell({ value, hasError = false }) {
+    return <div className="flex items-center">
+        {hasError && <MemoIconAlertTriangleFilled className="h-5 w-5 text-red-600 mr-2" />}
+        {value ? <Tooltip content={<span className="whitespace-pre-wrap">{value}</span>} color="invert" hideArrow={true} placement='bottom'>
+            <span className="block max-w-56 truncate">{value}</span>
+        </Tooltip> : <NotApplicableBadge />}
+    </div>;
+}
+
+function JumpToConversationAndAssignCell({ onClick }) {
+    const clickArrow = useCallback(() => {
+        if (onClick) onClick();
+    }, [onClick]);
+
+    return <div className="flex justify-center">
+        <Tooltip content="Assign user to the org and jump to conversation" color="invert" className="cursor-auto">
+            <button onClick={clickArrow}
+                className='inline-flex p-2 items-center justify-center rounded-lg hover:bg-gray-200'>
+                <MemoIconArrowRight className='h-4 w-4' />
+            </button>
+        </Tooltip>
+    </div>
+}
+
+export { OrganizationAndUsersCell, MaxRowsColsCharsCell, CommentsCell, ExportConsumptionAndDeleteCell, BadgeCell, OrganizationUserCell, DeleteCell, LevelCell, ArchiveReasonCell, ProjectNameTaskCell, CancelTaskCell, IconCell, ConfigCell, EditDeleteOrgButtonCell, ViewStackCell, AbortSessionButtonCell, FeedbackMessageCell, FeedbackMessageTextCell, JumpToConversationCell, RemoteVersionCell, ExternalLinkCell, ModelDateCell, FileSizeCell, StatusModelCell, DeleteModelCell, LabelCell, ViewCell, EvaluationRunStateCell, EvaluationRunDetailsCell, EtlApiTokenCell, EmailCell, EditIntegrationCell, ExpiredTokenCell, LinkCell, ConfigReleaseNotificationCell, TruncateAndTooltipCell, JumpToConversationAndAssignCell }

components/kern-table/KernTable.tsx

@@ -1,6 +1,6 @@
 import SortArrows from "@/submodules/react-components/components/kern-table/SortArrows";
 import { KernTableProps } from "../../types/kern-table";
-import { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteCell, EditDeleteOrgButtonCell, EmailCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell, EditIntegrationCell, ExpiredTokenCell, LinkCell, ConfigReleaseNotificationCell } from "./CellComponents";
+import { AbortSessionButtonCell, ArchiveReasonCell, BadgeCell, CancelTaskCell, CommentsCell, ConfigCell, DeleteModelCell, DeleteCell, EditDeleteOrgButtonCell, EmailCell, EtlApiTokenCell, EvaluationRunDetailsCell, EvaluationRunStateCell, ExportConsumptionAndDeleteCell, ExternalLinkCell, FeedbackMessageCell, FeedbackMessageTextCell, FileSizeCell, IconCell, JumpToConversationCell, LabelCell, LevelCell, MaxRowsColsCharsCell, ModelDateCell, OrganizationAndUsersCell, OrganizationUserCell, ProjectNameTaskCell, RemoteVersionCell, StatusModelCell, ViewCell, ViewStackCell, EditIntegrationCell, ExpiredTokenCell, LinkCell, ConfigReleaseNotificationCell, TruncateAndTooltipCell, JumpToConversationAndAssignCell } from "./CellComponents";
 import { Fragment, useMemo } from "react";
 import KernDropdown from "../KernDropdown";
 import { NotApplicableBadge } from "@/submodules/react-components/components/Badges";
@@ -162,6 +162,10 @@ function ComponentMapper(cell: any) {
                     return <LinkCell  {...cell} />;
                 case 'ConfigReleaseNotificationCell':
                     return <ConfigReleaseNotificationCell  {...cell} />;
+                case 'TruncateAndTooltipCell':
+                    return <TruncateAndTooltipCell {...cell} />;
+                case 'JumpToConversationAndAssignCell':
+                    return <JumpToConversationAndAssignCell {...cell} />;
                 case '@provided@':
                     return cell.jsx ?? <NotApplicableBadge />;
             }