this is my current code. It's already working in terms of functionality and design. it can generate the AI-generated text to continue to write the story where the user left off. I want you to add a feature where the AI-generated text is highlighted or in a different color. You are free to use new libraries that are suitable.

"use client";

import { useNovel } from "@/hooks/useNovel";
import { usePrompt } from "@/hooks/usePrompt";
import { generateText } from "@/utils/NovelService";
import { HighlightWithinTextarea } from "react-highlight-within-textarea";

import { KeyboardEvent, useEffect } from "react";

const NovelInput = () => {
  const [novel, setNovel] = useNovel();
  const [prompt, setPrompt] = usePrompt();
  const handleGenerate = async (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (!(e.key === "Enter" && e.ctrlKey)) return;
    await generateText(novel, (value: string) =>
      setPrompt((prev) => prev + value),
    );
  };

  useEffect(() => {
    setNovel((prev) => ({ ...prev, prompt }));
  }, [prompt, setNovel]);

  return (
    <textarea
      value={prompt}
      placeholder="Type here"
      className="scrollbar textarea h-auto min-h-[85dvh] w-full resize-none overflow-y-scroll whitespace-pre-wrap rounded-t-md bg-base-200 p-3"
      autoFocus={true}
      onChange={(e) => setPrompt(e.currentTarget.value)}
      onKeyDown={handleGenerate}
    />
  );
};

export default NovelInput;