Devtools Fast follow group 1 (#23)

* Address memoization issue in ActivitiesGrid

* socket client fix

* Prettier

---------

Co-authored-by: Corina Gum <>

Author: corinagum

packages/devtools/src/components/ActivitiesGrid/ActivitiesGrid.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Menu,
   MenuButton,
@@ -71,6 +71,24 @@ const ActivitiesGrid: FC<ActivitiesGridProps> = ({
     }
   };
 
+  const memoizedRowsList = useMemo(
+    () =>
+      list
+        .slice()
+        .reverse()
+        .filter((event) => filterActivities(event, params))
+        .map((event, index) => (
+          <ActivityRow
+            key={event.id}
+            event={event}
+            index={index}
+            isSelected={selected?.id === event.id}
+            onSelect={handleRowSelect}
+          />
+        )),
+    [list, params, selected, handleRowSelect]
+  );
+
   const handleTypeFilter = (path: string) => {
     if (params.get('path') === path) {
       params.delete('path');
@@ -121,19 +139,7 @@ const ActivitiesGrid: FC<ActivitiesGridProps> = ({
         </thead>
         <tbody>
           {list.length ? (
-            list
-              .slice()
-              .reverse()
-              .filter((event) => filterActivities(event, params))
-              .map((event, index) => (
-                <ActivityRow
-                  key={event.id}
-                  event={event}
-                  index={index}
-                  isSelected={selected?.id === event.id}
-                  onSelect={handleRowSelect}
-                />
-              ))
+            memoizedRowsList
           ) : (
             <tr>
               <td colSpan={4} className={mergeClasses(classes.cell, classes.emptyTable)}>

packages/devtools/src/components/ComposeBox/ComposeBox.styles.ts

@@ -1,6 +1,6 @@
 import { makeStyles } from '@fluentui/react-components';
 
-export const useClasses = makeStyles({
+const useComposeBoxClasses = makeStyles({
   composeBoxContainer: {
     position: 'relative',
     margin: '1rem 3.125rem',
@@ -19,3 +19,5 @@ export const useClasses = makeStyles({
     position: 'relative',
   },
 });
+
+export default useComposeBoxClasses;

packages/devtools/src/components/ComposeBox/ComposeBox.tsx

@@ -1,20 +1,30 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  FC,
+  useState,
+  ChangeEvent,
+  KeyboardEvent,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import { Textarea } from '@fluentui/react-components';
-import { useClasses } from './ComposeBox.styles';
-import NewMessageToolbar from './ComposeBoxToolbar/ComposeBoxToolbar';
-import { useCardStore } from '../../stores/CardStore';
-import AttachmentsContainer from '../AttachmentsContainer/AttachmentsContainer';
 import { Attachment } from '@microsoft/spark.api';
+
+import { useCardStore } from '../../stores/CardStore';
 import { AttachmentType } from '../../types/Attachment';
+import AttachmentsContainer from '../AttachmentsContainer/AttachmentsContainer';
+import NewMessageToolbar from './ComposeBoxToolbar/ComposeBoxToolbar';
+import useComposeBoxClasses from './ComposeBox.styles';
 
 export interface ComposeBoxProps {
   onSend: (message: string, attachments?: Attachment[]) => void;
   messageHistory: string[];
   onMessageSent: (message: string) => void;
 }
 
-const ComposeBox: React.FC<ComposeBoxProps> = ({ onSend, messageHistory, onMessageSent }) => {
-  const classes = useClasses();
+const ComposeBox: FC<ComposeBoxProps> = ({ onSend, messageHistory, onMessageSent }) => {
+  const classes = useComposeBoxClasses();
   const [message, setMessage] = useState('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
   const [uiAttachments, setUiAttachments] = useState<AttachmentType[]>([]);
@@ -31,7 +41,7 @@ const ComposeBox: React.FC<ComposeBoxProps> = ({ onSend, messageHistory, onMessa
 
   // Convert API Attachment to UI AttachmentType
   const convertToAttachmentType = (attachment: Attachment): AttachmentType => {
-    // Check if it's a card attachment
+    // Check for card attachment
     if (attachment.contentType?.startsWith('application/vnd.microsoft.card.')) {
       return {
         type: 'card',
@@ -95,7 +105,7 @@ const ComposeBox: React.FC<ComposeBoxProps> = ({ onSend, messageHistory, onMessa
   }, [message, attachments, onSend, onMessageSent]);
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
+    (e: KeyboardEvent) => {
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         handleSendMessage();
@@ -166,14 +176,14 @@ const ComposeBox: React.FC<ComposeBoxProps> = ({ onSend, messageHistory, onMessa
   );
 
   // Memoized message input handler to prevent re-renders
-  const handleMessageChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleMessageChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     setMessage(e.target.value);
   }, []);
 
   // Check if there's content to send
   const hasContent = message.trim().length > 0 || attachments.length > 0;
 
-  const memoizedToolbar = React.useMemo(
+  const memoizedToolbar = useMemo(
     () => <NewMessageToolbar onSend={handleToolbarAction} hasContent={hasContent} />,
     [handleToolbarAction, hasContent]
   );

packages/devtools/src/utils/dev.tsx

@@ -31,8 +31,8 @@ if (import.meta.env.DEV) {
    * Only works in development mode
    */
   autoFillAndSendMessage = () => {
-    // Get the dev message from environment variable or use a default
-    const devMessage = import.meta.env.VITE_DEV_MESSAGE || 'This is a development test message';
+    // Get the dev message from environment variable
+    const devMessage = import.meta.env.VITE_DEV_MESSAGE || null;
 
     // Wait for DOM to be fully loaded
     setTimeout(() => {
@@ -55,7 +55,7 @@ if (import.meta.env.DEV) {
           'value'
         )?.set;
 
-        if (nativeInputValueSetter) {
+        if (nativeInputValueSetter && devMessage) {
           // Set the value directly using the native setter
           nativeInputValueSetter.call(composeTextarea, devMessage);