Here I provided my messageRow class. I want a user to be able to highlight message text, and beside the highlighted text an annotation box will appear embedded in the message. The user can then type out an annotation in the box that becomes part of the message, so as the user types the box expands and message text to the right of it pushed to the side. I also have a messageContent class if you need it. Please fix this. import { usePreviousDistinct } from '@react-hookz/web';
import { forwardRef, useEffect, useState, useRef } from 'react';
import { useLongPress } from 'react-aria';

import { Avatar } from '@/components/Avatar';
import IconButton from '@/components/IconButton';
import { LongPressMenu } from '@/components/LongPressMenu';
import { MessageContent } from '@/components/MessageContent';
import {
  Button,
  CopyToClipboardButton,
  CopyToClipboardIconButton,
  Icon,
  Markdown,
  Tooltip,
} from '@/components/Shared';
import { ToolEvents } from '@/components/ToolEvents';
import { ReservedClasses } from '@/constants';
import { Breakpoint, useBreakpoint } from '@/hooks/breakpoint';
import { getMessageRowId } from '@/hooks/citations';
import { useCitationsStore } from '@/stores';
import {
  type ChatMessage,
  isAbortedMessage,
  isErroredMessage,
  isFulfilledMessage,
  isFulfilledOrTypingMessage,
  isFulfilledOrTypingMessageWithCitations,
  isUserMessage,
  Annotation,
} from '@/types/message';
import { cn } from '@/utils';

import { STYLE_LEVEL_TO_CLASSES } from '@/components/Shared';

type Props = {
  isLast: boolean;
  message: ChatMessage;
  delay?: boolean;
  className?: string;
  onCopy?: VoidFunction;
  onRetry?: VoidFunction;
};

/**
 * Renders a single message row from the user or from our models.
 */
const MessageRow = forwardRef<HTMLDivElement, Props>(function MessageRowInternal(
  { message, delay = false, isLast, className = '', onCopy, onRetry },
  ref
) {
  const breakpoint = useBreakpoint();

  const [isShowing, setIsShowing] = useState(false);
  const [isLongPressMenuOpen, setIsLongPressMenuOpen] = useState(false);
  const [isStepsExpanded, setIsStepsExpanded] = useState<boolean>(isLast);
  const {
    citations: { selectedCitation, hoveredGenerationId },
    hoverCitation,
  } = useCitationsStore();
  const hasSteps =
    (isFulfilledOrTypingMessage(message) ||
      isErroredMessage(message) ||
      isAbortedMessage(message)) &&
    !!message.toolEvents &&
    message.toolEvents.length > 0;

  const getMessageText = () => {
    if (isFulfilledMessage(message)) {
      return message.originalText;
    }

    return message.text;
  };

  const enableLongPress =
    (isFulfilledMessage(message) || isUserMessage(message)) && breakpoint === Breakpoint.sm;
  const { longPressProps } = useLongPress({
    onLongPress: () => setIsLongPressMenuOpen(true),
  });

  // Delay the appearance of the message to make it feel more natural.
  useEffect(() => {
    if (delay) {
      setTimeout(() => setIsShowing(true), 300);
    }
  }, []);

  useEffect(() => {
    if (isLast) {
      setIsStepsExpanded(true);
    }
  }, [isLast]);

  const [highlightMessage, setHighlightMessage] = useState(false);
  const prevSelectedCitationGenId = usePreviousDistinct(selectedCitation?.generationId);

  useEffect(() => {
    if (isFulfilledOrTypingMessage(message) && message.citations && message.generationId) {
      if (
        selectedCitation?.generationId === message.generationId &&
        prevSelectedCitationGenId !== message.generationId
      ) {
        setHighlightMessage(true);

        setTimeout(() => {
          setHighlightMessage(false);
        }, 1000);
      }
    }
  }, [selectedCitation?.generationId, prevSelectedCitationGenId]);

  if (delay && !isShowing) return null;

  const handleOnMouseEnter = () => {
    if (isFulfilledOrTypingMessageWithCitations(message)) {
      hoverCitation(message.generationId);
    }
  };

  const handleOnMouseLeave = () => {
    if (isFulfilledOrTypingMessageWithCitations(message)) {
      hoverCitation(null);
    }
  };

  //

  // Annotations code for error highlighing in prompts!!!

  //


  // State to manage the selected text and annotations
  const [selectedText, setSelectedText] = useState<string>("");
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);
  const [annotationCount, setAnnotationCount] = useState<number>(0);

  // Function to increment annotationCount
  const incrementAnnotationCount = () => {
    setAnnotationCount(annotationCount + 1);
  };

  // Function to add an annotation
  const addAnnotation = (annotationText: string, index: number) => {
    const newAnnotations = annotations.map((annotation, i) =>
      i === index ? { ...annotation, annotation: annotationText } : annotation
    );

    setAnnotations(newAnnotations);
    setSelectedText('');
    const inputBox = inputRef.current;
    if (inputBox) inputBox.style.display = "none";
  };

  // Function to handle text selection
  const handleMouseUp = () => {
    const selection = window.getSelection();
    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      if (range && selection.toString().length > 0) {
        const start = range.startOffset;
        const end = range.endOffset;

        //Constuct the new annotation
        const newAnnotation: Annotation = {
          text: selection.toString(),
          annotation: '',
          start: start,
          end: end
        }

        const key = `${annotationCount}`;

        // If annotations property exists, push the new annotation to it
        if (message.annotations) {
          message.annotations[key] = newAnnotation;
        } else {
          // If annotations property doesn't exist, create it and add the new annotation
          message.annotations = {
            key: newAnnotation,
          };
        }

        incrementAnnotationCount();

        setSelectedText(selection.toString());

        const boundingRect = range.getBoundingClientRect();
        const inputBox = inputRef.current;
        if (inputBox) {
          const containerRect = range.commonAncestorContainer.parentElement!.getBoundingClientRect();
          inputBox.style.position = 'absolute';
          inputBox.style.top = `${boundingRect.bottom - containerRect.top}px`;
          inputBox.style.left = `${boundingRect.left - containerRect.left}px`;
          inputBox.style.display = 'block';
          inputBox.focus();
        }
      }
    }
  };


  return (
    <div
      id={
        isFulfilledOrTypingMessage(message) && message.generationId
          ? getMessageRowId(message.generationId)
          : undefined
      }
      className={cn(ReservedClasses.MESSAGE, 'flex', className)}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
      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
              }
              
              <MessageContent
                isLast={isLast}
                message={message}
                annotations={annotations}
                onAnnotate={handleMouseUp}
                onRetry={onRetry}
              />

              {inputRef.current && (
                <input
                ref={inputRef}
                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',
              
                  '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;
                      const index = annotations.findIndex(a => a.text === selectedText);
                      if (index !== -1) {
                          addAnnotation(target.value, index);
                      }
                      target.value = "";
                    }
                  }}
                />
              )}

              {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>
              ))}
            </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;