update history widget on gaze for now.

src/components/Widget/HistoryWidget.tsx

@@ -1,13 +1,9 @@
 import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
 import TableElement from '../Element/Simple/TableElement';
 import HistoryMessageElement from '../Element/Complex/HistoryMessageElement';
-import {
-  getActiveConvoID,
-  getSelectedElementID,
-} from 'src/redux/slices/componentSlice';
+import { getListHistoryChannel } from 'src/redux/slices/componentSlice';
 import { useAppSelector } from 'src/redux/hooks';
 import { getMessages } from 'src/redux/slices/minimapSlice';
-import { useEffect, useState } from 'react';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -16,19 +12,15 @@ type HistoryWidgetProps = {
 const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const { id, x, y, w, h } = widget;
 
-  const convoID = useAppSelector(getActiveConvoID);
+  const { activeConversationId } = useAppSelector(getListHistoryChannel);
   const convoMessages = useAppSelector(getMessages).filter(
-    (message) => message.conversationId === convoID,
+    (message) => message.conversationId === activeConversationId,
   );
-  const activeElementID = useAppSelector(getSelectedElementID);
 
-  useEffect(() => {
-    console.log('activeElementID: ', activeElementID);
-  }, [activeElementID]);
-
-  const highlightIndex = convoMessages.findIndex(
-    (message) => message.id === activeElementID,
-  );
+  // const activeElementID = useAppSelector(getSelectedElementID);
+  // const highlightIndex = convoMessages.findIndex(
+  //   (message) => message.id === activeElementID,
+  // );
 
   return (
     <div
@@ -43,14 +35,15 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
               return (
                 <HistoryMessageElement
                   index={convoMessages.length - index}
-                  isActive={highlightIndex === convoMessages.length - 1 - index}
+                  // isActive={highlightIndex === convoMessages.length - 1 - index}
+                  isActive={false}
                   title={`ACA-${message.data.detectedByAca}`}
                   header="Request to attack"
                   desc={`Approval for ${message.data.attackWeapon.type} attack`}
                   tableContent={
                     <TableElement
                       element={{
-                        id: `table:${convoID}_${message}`,
+                        id: `table:${activeConversationId}_${message}`,
                         modality: 'visual',
                         h: 3,
                         w: 4,

src/components/Widget/ListWidget.tsx

@@ -2,10 +2,7 @@ import { useEffect, useState } from 'react';
 import Element from 'src/components/Element/Element';
 import useGaze from 'src/hooks/useGaze';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
-import {
-  setActiveConvoID,
-  setSelectedElementID,
-} from 'src/redux/slices/componentSlice';
+import { updateListHistoryChannel } from 'src/redux/slices/componentSlice';
 import { getElementsInGaze } from 'src/redux/slices/gazeSlice';
 import type { Widget } from 'src/types/widget';
 
@@ -15,13 +12,32 @@ type ListWidgetProps = {
 
 const ListWidget = ({ widget }: ListWidgetProps) => {
   const elementsInGaze = useAppSelector(getElementsInGaze);
+  const dispatch = useAppDispatch();
 
   // just pick the first element in the gaze for now
+  // FIX: should be fixed when gaze calculates overlapping area and picks element with greater overlapping
   const elementInGazeId = elementsInGaze[0]?.id;
 
-  // useEffect(() => {
-  //   console.log('elementsInGaze: ', elementsInGaze);
-  // }, [elementsInGaze]);
+  useEffect(() => {
+    widget.elements.forEach((element) => {
+      if (element.id === elementInGazeId) {
+        // @ts-ignore
+        if (!element.message) {
+          // FIX: all elements should have a message (at least the ones in the list)
+          // at the minimu, they should have a conversationId attached to them?
+          console.error('Element does not have a message', element);
+          return;
+        }
+
+        dispatch(
+          updateListHistoryChannel({
+            // @ts-ignore
+            activeConversationId: element.message.conversationId,
+          }),
+        );
+      }
+    });
+  }, [elementInGazeId, dispatch, widget.elements]);
 
   const className =
     'absolute p-2 flex flex-col gap-6 items-center overflow-scroll overflow-x-hidden overflow-y-hidden';
@@ -31,23 +47,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
     (a, b) => a.priority! - b.priority!,
   );
 
-  const [selectedElement, setSelectedElement] = useState(0);
-
-  const dispatch = useAppDispatch();
-
-  // useEffect(() => {
-  //   dispatch(
-  //     setActiveConvoID(
-  //       sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
-  //     ),
-  //     dispatch(
-  //       setSelectedElementID(
-  //         sortedElementsByPriority[selectedElement].message?.id,
-  //       ),
-  //     ),
-  //   );
-  // }, [selectedElement]);
-
   return (
     <div
       key={widget.id}

src/prototype/monitor.ts

@@ -42,7 +42,8 @@ const monitor = ({ dispatch }: MonitorProps) => {
     elementInGaze: ElementInGaze,
     elementInGazeIndex: number,
   ) {
-    console.log('element in gaze');
+    // add a check here to see if the element even has expirationIntervalMs property
+    // because if it does not, it means it never expires
     if (timeSomeMsAgo.toISOString() >= elementInGaze.timeEnteredGaze) {
       //has been in gaze for at least 100 ms
       console.log(
@@ -61,6 +62,8 @@ const monitor = ({ dispatch }: MonitorProps) => {
   ) {
     gazeAndKey.elemsInGaze.forEach(
       function (elementInGaze, elementInGazeIndex) {
+        // add a check here to see if the element even has expirationIntervalMs property
+        // because if it does not, it means it never expires
         dispatch(
           updateElementExpiration(elementInGaze.widgetId, elementInGaze.id),
         ); //update the time until expiration

src/redux/slices/componentSlice.ts

@@ -1,18 +1,15 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { type WidgetChannel } from 'src/types/support-types';
+import type { WidgetChannel, ListHistoryChannel } from 'src/types/channel';
 
 type InitialState = {
-  widgetChannels: {
-    [key in WidgetChannel]: any;
-  };
+  widgetChannels: WidgetChannel;
 };
 
 const initialState: InitialState = {
   widgetChannels: {
     'list-history': {
-      activeConvoID : "",
-      selectedElementID : "",
+      activeConversationId: '',
     },
   },
 };
@@ -21,24 +18,19 @@ export const componentSlice = createSlice({
   name: 'componentContext',
   initialState,
   reducers: {
-    // add state updating functions here)
-    setActiveConvoID : (state, action : PayloadAction<string>) => {
-        state.widgetChannels['list-history'].activeConvoID = action.payload;
-    },
-
-    setSelectedElementID : (state, action : PayloadAction<string>) => {
-        state.widgetChannels['list-history'].selectedElementID = action.payload;
+    updateListHistoryChannel: (
+      state,
+      action: PayloadAction<ListHistoryChannel>,
+    ) => {
+      state.widgetChannels['list-history'] = action.payload;
     },
   },
 
   selectors: {
-    // add selector functions here (to get state values from the store)
-    getActiveConvoID : (state) => state.widgetChannels['list-history'].activeConvoID,
-    getSelectedElementID : (state) => state.widgetChannels['list-history'].selectedElementID,
+    getListHistoryChannel: (state) => state.widgetChannels['list-history'],
   },
 });
 
-export const { setActiveConvoID, setSelectedElementID } =
-  componentSlice.actions;
+export const { updateListHistoryChannel } = componentSlice.actions;
 
-export const { getActiveConvoID, getSelectedElementID } = componentSlice.selectors;
+export const { getListHistoryChannel } = componentSlice.selectors;

src/redux/slices/minimapSlice.ts

@@ -204,9 +204,9 @@ export const minimapSlice = createSlice({
             if (element.id === elementId) {
               // if element does not have an expiration interval, log an error
               if (!element.expirationIntervalMs) {
-                console.error(
-                  `Element with id ${elementId} does not have an expiration interval`,
-                );
+                // console.error(
+                //   `Element with id ${elementId} does not have an expiration interval`,
+                // );
                 return;
               }
 

src/types/channel.ts

@@ -0,0 +1,7 @@
+export type ListHistoryChannel = {
+  activeConversationId: string;
+};
+
+export type WidgetChannel = {
+  'list-history': ListHistoryChannel;
+};

src/types/support-types.ts

@@ -45,5 +45,3 @@ export type WidgetCluster = {
   sectionIds?: LinkedSectionWidget[];
   actions?: string[];
 };
-
-export type WidgetChannel = 'list-history';