i am trying to position an annotation box to the right of a user highlight selection, right now the X is 100% correct but i cant figure out the Y, can you fix it so the annotation box is positions just to the right of the user highlight? //Complicated function for determining annotaiton highlights by the user.
  const handleMouseUp = (event: React.MouseEvent) => {
    const selection = window.getSelection();
    if (!(selection && selection.toString() && !annotationVisible && selection.anchorNode)) { 
      return;
    }
    console.log("Y", event.clientY)
  
    console.log("X", event.clientX)
    const crect = event.currentTarget.getClientRects();
    const selectedText = selection.toString();
    const lenst = selectedText.length;
    const range = selection.getRangeAt(0);
    
    //For annotation positioning
    let rect = range.getBoundingClientRect();


    setAnnotationPosition({
      top: rect.bottom + window.scrollY,
      bottom: rect.bottom + (rect.height) + window.scrollY,
      right: crect[0].right,
      left: rect.right + window.scrollX - 10, //correct X.
      x: crect[0].x,
      y: crect[0].y,
      height: crect[0].height
    });

    console.log('rect.bottom:', rect.bottom);
console.log('window.scrollY:', window.scrollY);
console.log('Calculated top:', rect.bottom + window.scrollY);
console.log('Annotation Position:', annotationPosition);
  
    const startContainer = range.startContainer;
    const endContainer = range.endContainer;

    if (startContainer.parentElement?.id === "annots" || endContainer.parentElement?.id === "annots"){
      console.log("annotaitons")
      return;
    }
  
    const startOffset = range.startOffset;
    
    const endOffset = range.endOffset;
    //console.log("Start Container: ", startContainer, startOffset);
    //console.log("End Container: ", endContainer, endOffset);
  
    // Helper function to retrieve the text content of an entire node and its children
    const getTextContent = (node: Node): string => 
      true === true ? 
      (node.textContent ?? "") : 
      Array.from(node.childNodes).map(getTextContent).join("");
      
    // Retrieve the full text content of the start and end containers
    const startContainerText = getTextContent(startContainer);
    const endContainerText = getTextContent(endContainer);
  
    console.log("Start Container Text: ", startContainerText);
    console.log("End Container Text: ", endContainerText);

    const u = findExactIndices(message.text, startOffset, endOffset, selectedText, range)
    console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$")
    console.log(message.text.substring(Number(u.start), Number(u.end)))
    console.log(u.start)
    console.log(u.end)
    console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$")

    let start = Number(u.start)
    let end = Number(u.end)

    console.log(selectedText.charAt(lenst))
    console.log(backNormalize(message.text.substring(start,end)))

    const newFinalMessage = backNormalize(message.text.substring(start,end)) //Remove any final junk.
    const fLen = newFinalMessage.length;
    end = start + fLen;

  

    //console.log("SUBSTRING", message.text.substring(startIdxInMessage, endIdxInMessage))
    //user messages are weird so we handle them with special care (copied line breaks cause issues)
    if (message.text.indexOf(startContainerText) === -1 || message.text.indexOf(endContainerText) === -1){ //User selected from multiple chat rows.
      console.log("multiple!!!!")
      //return;
    }

    const startIdxInMessage = message.text.indexOf(startContainerText) + startOffset;
    const endIdxInMessage = message.text.indexOf(endContainerText) + endOffset;

    if (message.text.substring(startIdxInMessage, endIdxInMessage).includes('```') && startIdxInMessage < endIdxInMessage){ //THe user is trying to make a stupid highlight.
      console.log("code detection")
      return;
    }

    const ida = addAnnotation(selectedText, "", start, end, annotRanges);
    // //setAnnotationVisible(true);
    setAnnotationKey(ida);
    

  };

  return (
    <div
      id={
        isFulfilledOrTypingMessage(message) && message.generationId
          ? getMessageRowId(message.generationId)
          : undefined
      }
      className={cn(ReservedClasses.MESSAGE, 'flex', className)}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
      onMouseUp={handleMouseUp}
      ref={ref}
    >
      <LongPressMenu
        isOpen={isLongPressMenuOpen}
        close={() => setIsLongPressMenuOpen(false)}
        className="md:hidden"
      >
        <div className={cn('flex flex-col divide-y', 'divide-marble-300')}>
          <div className="flex flex-col gap-y-4 pt-4">
            <CopyToClipboardButton
              value={getMessageText()}
              label="Copy text"
              kind="secondary"
              iconAtStart
              onClick={onCopy}
            />
            {hasSteps && (
              <Button
                label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`}
                startIcon={<Icon name="list" />}
                kind="secondary"
                size="md"
                aria-label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`}
                animate={false}
                onClick={() => setIsStepsExpanded((prevIsExpanded) => !prevIsExpanded)}
              />
            )}
          </div>
        </div>
      </LongPressMenu>
      <div
        className={cn(
          'group flex h-fit w-full flex-col gap-2 rounded-md p-2 text-left md:flex-row',
          'transition-colors ease-in-out',
          'hover:bg-secondary-100',

          {
            'bg-secondary-50':
              isFulfilledOrTypingMessage(message) &&
              message.generationId &&
              hoveredGenerationId === message.generationId,
            'bg-primary-50 hover:bg-primary-50': highlightMessage,
          }
        )}
        {...(enableLongPress && longPressProps)}
      >
        <div className="flex w-full gap-x-2">
          <Avatar message={message} />
          <div className="flex w-full min-w-0 max-w-message flex-1 flex-col items-center gap-x-3 md:flex-row">
            <div className="w-full">
              {hasSteps && <ToolEvents show={isStepsExpanded} events={message.toolEvents} />}

              {//This is where we render the annotated box
              }

              {annotationVisible && (
                    console.log("annot visisble!"),
                    <div 
                    ref={annotationRef}
                    style={{
                      position: "absolute",
                      display: "block",
                      top: `${annotationPosition}px`,
                      left: `${annotationPosition.left}px`,
                      //bottom: `${annotationPosition.top}px`
                      //zIndex: 1000,
                    }}
                  
                    > 
                              <input
                              type='text'
                              style={{
                                fontSize: '14px', // Adjust the font size as needed
                                height: '2rem', // Adjust the height as needed
                                width: '200px', // Adjust the width as needed
                                padding: '0.5rem', // Adjust the padding as needed
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif' // Adjust the font family as needed
                            }}
                                className={cn(
                                  'min-h-[1rem] md:min-h-[2rem]', 
                                  "w-auto",
                                  'self-center',
                                  'rounded',
                                  'px-1 px-2',
                                  'border',
                                  'bg-danger-50',
                                  'text-lg',
                                  'w-full',
                              
                                  'border-secondary-400',
                                  'transition ease-in-out',
                                  'focus:border-secondary-700',
                                  'focus:outline-none',
                      
                                  'placeholder-base'
                                  
                                )}
                                placeholder="Add annotation . . ."
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") {
                                    const target = e.target as HTMLInputElement;


                                    console.log(annotationKey)
                                    console.log("TEXT",message.text)

                                    setAnnotDict(prevDict => ({
                                      ...prevDict,
                                      [annotationKey]: { ...prevDict[annotationKey], annotation: target.value }
                                    }));
                                    
                                    setAnnotationVisible(false);
                                    setAnnotationKey("")
                                    target.value = "";
                                  }
                                  else if(e.key === "Escape"){
                                    setAnnotationVisible(false);
                                    setAnnotationKey("")
                                  }
                                }}
                          />
                      </div>
                      )}

              <div className="flex w-full flex-col justify-center gap-y-1 py-1">
                <Text        
                  as="div"
                  className="flex flex-col gap-y-1 whitespace-pre-wrap [overflow-wrap:anywhere] md:max-w-4xl">
                  <div>
                    {renderAnnotatedText({p_msg:preprocessedMessage, ar:annotRanges})}
                  </div>
                </Text>
              </div>

              {//This was an old rendering pipeline. 
              //<MessageContent isLast={isLast} message={message} onRetry={onRetry} />
              }

              {/* {annotations.map((annotation, index) => (
                <div key={index} className='bg-secondary-50 p-1 my-1'>
                  <span className='font-bold'>{annotation.text}</span>: {annotation.annotation}
                </div>
              ))} */}

            
            {Object.keys(annotDict).length > 0 && <h1 id='annots' className={cn('text-title','font-bold','font-family-CohereIconDefault')} 
                                                      style={{ paddingTop: '0.5rem', paddingBottom: '0.3rem', }}>
                                                  Annotations</h1>}
            {Object.keys(annotDict).length > 0 &&  <hr id='annots' style={{ paddingTop: '0.5rem', paddingBottom: '0.1rem', border: 'none', borderTop: '2px solid black' }}></hr>}
            {Object.values(annotSortDict).map((annotation, index) => (
                <div id='annots' key={index} className={cn()}>
                  <span id='annots' className='clickable cursor-pointer bg-yellow-100 hover:underline focus:underline' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '200px', // Adjust the width as needed
                                padding: '0.3rem', // Adjust the padding as needed
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontWeight: 'bold'
                              }}
                              onClick={() => handleClick(createSecretId(message.text, annotation.start, annotation.end).substring(7,13))}
                              >{annotation.text}
                  </span>

                  <span id='annots' className='bg-secondary-900' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '200px', // Adjust the width as needed
                                paddingTop: '0.3rem', // Adjust the padding as needed
                                paddingBottom: '0.3rem',
                                paddingLeft: '-0.01rem',
                                paddingRight: '-0.1rem',
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontWeight: 'bold'
                              }}>
                              
                    </span>
                            
                    <span id='annots' className='clickable cursor-pointer bg-danger-50' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '200px', // Adjust the width as needed
                                padding: '0.3rem', // Adjust the padding as needed
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontStyle: 'italic'
                              }}
                              onClick={() => handleClick(createSecretId(message.text, annotation.start, annotation.end).substring(7,13))}
                              >{annotation.annotation}
                    </span>
                </div>
                
              ))}
            {Object.keys(annotDict).length > 2 &&  <hr id='annots' style={{ marginTop: '0.8rem', paddingTop: '0.8rem', paddingBottom: '0.1rem', border: 'none', borderTop: '2px solid black' }}></hr>}
            </div>
            


            

            <div
              className={cn('flex h-full items-end justify-end self-end', {
                'hidden md:invisible md:flex':
                  !isFulfilledMessage(message) && !isUserMessage(message),
                'hidden md:invisible md:flex md:group-hover:visible': !isLast,
              })}
            >
              {hasSteps && (
                <Tooltip label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`} hover>
                  <IconButton
                    iconName="list"
                    className="rounded hover:bg-secondary-100"
                    iconClassName={cn(
                      'text-volcanic-800 group-hover/icon-button:text-secondary-800',
                      {
                        'hidden md:invisible md:flex': !isFulfilledMessage(message),
                      }
                    )}
                    onClick={() => setIsStepsExpanded((prevIsExpanded) => !prevIsExpanded)}
                  />
                </Tooltip>
              )}
              <CopyToClipboardIconButton value={getMessageText()} onClick={onCopy} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});
export default MessageRow;